├── public ├── favicon.ico ├── images │ └── famous_logo.png └── index.html ├── public-test ├── favicon.ico ├── images │ ├── bgimage.png │ └── famous_logo.png ├── fonts │ ├── opensans-bold-webfont.ttf │ ├── opensans-bold-webfont.woff │ ├── opensans-regular-webfont.eot │ ├── opensans-regular-webfont.ttf │ └── opensans-regular-webfont.woff └── index.html ├── .gitignore ├── bin ├── test.js ├── dev.js └── genericCompile.js ├── src ├── Label.vue ├── GlobalVars.js ├── Node.vue ├── DOMElement.vue ├── index.js ├── Carousel │ ├── index.js │ ├── Pager.vue │ ├── Arrow.vue │ ├── Dots.vue │ ├── Dot.vue │ ├── data │ │ └── imageData.json │ ├── Carousel.vue │ └── Page.vue ├── FamousVue.js ├── Settings.js ├── Twitterus │ ├── index.js │ ├── Swapper.vue │ ├── UIFooter.vue │ ├── Data.json │ ├── UIHeader.vue │ ├── Section.vue │ ├── NavButton.vue │ ├── Tweet.vue │ └── Twitterus.vue ├── Scene.vue ├── Resize.vue ├── VueComponentBase.js ├── Align.vue ├── NodeWithAutoPropsFromFamousObject.js ├── DOMElementOriginal.js ├── NodeWithCustomPropsParser.js ├── DOMElementWithAutoPropsFromFamousObject.js ├── ImageView.vue └── FamousBase.js ├── .travis.yml ├── README.md ├── .jscsrc ├── LICENSE.md ├── .eslintrc ├── package.json └── test └── index.js /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public-test/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public-test/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | public/*.bundle.js 3 | public/bundle.js 4 | node_modules 5 | *.log 6 | .DS_Store 7 | bundle.js 8 | -------------------------------------------------------------------------------- /public/images/famous_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public/images/famous_logo.png -------------------------------------------------------------------------------- /public-test/images/bgimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public-test/images/bgimage.png -------------------------------------------------------------------------------- /public-test/images/famous_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public-test/images/famous_logo.png -------------------------------------------------------------------------------- /bin/test.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | var genericCompile = require('./genericCompile') 3 | genericCompile('./test/index.js', './public-test') 4 | -------------------------------------------------------------------------------- /public-test/fonts/opensans-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public-test/fonts/opensans-bold-webfont.ttf -------------------------------------------------------------------------------- /public-test/fonts/opensans-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public-test/fonts/opensans-bold-webfont.woff -------------------------------------------------------------------------------- /public-test/fonts/opensans-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public-test/fonts/opensans-regular-webfont.eot -------------------------------------------------------------------------------- /public-test/fonts/opensans-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public-test/fonts/opensans-regular-webfont.ttf -------------------------------------------------------------------------------- /public-test/fonts/opensans-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/irwansyahwii/Famous-Vue/HEAD/public-test/fonts/opensans-regular-webfont.woff -------------------------------------------------------------------------------- /src/Label.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/GlobalVars.js: -------------------------------------------------------------------------------- 1 | import Settings from "./Settings" 2 | 3 | class GlobalVars{ 4 | constructor(){ 5 | this.settings = new Settings() 6 | } 7 | } 8 | 9 | export default new GlobalVars() -------------------------------------------------------------------------------- /src/Node.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/DOMElement.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | - iojs 5 | sudo: false 6 | notifications: 7 | email: 8 | - mike@famo.us 9 | - myles@famo.us 10 | - marianna@famo.us 11 | slack: 12 | secure: Rgq1FnjX5fg8J4boBUgmhT+1kpUf7VFxroZ5WwqGN3zQIraqPq3g2wapJNHqZ0j8UXTvgrr79C2DF1BYdta5fV758yMGJ7ifSk8MF9HBVxoCpP1DC0RZ8MJclhreiZpLAFWZoOJanachPz8OSzJ1/8U2TCJsAR51+Id0mT95CGc= 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import FamousVue from './FamousVue' 3 | // import './Twitterus' 4 | import './Carousel' 5 | 6 | Vue.config.debug = true 7 | 8 | new Vue({ 9 | el: 'body', 10 | ready: function(){ 11 | 12 | // this.$refs.mainNode.$set('sizeMode', 'render,render,render') 13 | // console.log(this.$refs.mainNode.sizeMode) 14 | 15 | } 16 | }) 17 | 18 | -------------------------------------------------------------------------------- /src/Carousel/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Carousel from './Carousel.vue' 3 | import Arrow from './Arrow.vue' 4 | import Dot from './Dot.vue' 5 | import Dots from './Dots.vue' 6 | import Page from './Page.vue' 7 | import Pager from './Pager.vue' 8 | 9 | Vue.component('carousel', Carousel) 10 | Vue.component('arrow', Arrow) 11 | Vue.component('dot', Dot) 12 | Vue.component('dots', Dots) 13 | Vue.component('page', Page) 14 | Vue.component('pager', Pager) -------------------------------------------------------------------------------- /src/FamousVue.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Scene from './Scene.vue' 3 | import Node from './Node.vue' 4 | // import imageView from './ImageView.vue' 5 | import DOMElement from './DOMElement.vue' 6 | import Align from './Align.vue' 7 | import Resize from './Resize.vue' 8 | 9 | Vue.component('scene', Scene) 10 | Vue.component('node', Node) 11 | // Vue.component('image-view', imageView) 12 | Vue.component('dom-element', DOMElement) 13 | Vue.component('align', Align) 14 | Vue.component('resize', Resize) 15 | -------------------------------------------------------------------------------- /src/Settings.js: -------------------------------------------------------------------------------- 1 | import famous from 'famous' 2 | var FamousEngine = famous.core.FamousEngine 3 | 4 | export default class Settings{ 5 | constructor(){ 6 | this._rootScene = null 7 | } 8 | 9 | get isRootSceneExists(){ 10 | return this._rootScene !== null 11 | } 12 | 13 | get rootScene(){ 14 | if(this._rootScene === null){ 15 | FamousEngine.init() 16 | this._rootScene = FamousEngine.createScene() 17 | 18 | } 19 | 20 | return this._rootScene 21 | } 22 | } -------------------------------------------------------------------------------- /src/Twitterus/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import UIHeader from './UIHeader.vue' 3 | import Swapper from './Swapper.vue' 4 | import UIFooter from './UIFooter.vue' 5 | import Twitterus from './Twitterus.vue' 6 | import NavButton from './NavButton.vue' 7 | import Section from './Section.vue' 8 | import Tweet from './Tweet.vue' 9 | 10 | 11 | Vue.component('ui-header', UIHeader) 12 | Vue.component('swapper', Swapper) 13 | Vue.component('ui-footer', UIFooter) 14 | Vue.component('twitterus', Twitterus) 15 | Vue.component('nav-button', NavButton) 16 | Vue.component('tweets-section', Section) 17 | Vue.component('tweet', Tweet) 18 | -------------------------------------------------------------------------------- /src/Scene.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/Twitterus/Swapper.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Famous-Vue 2 | > Vue components for Famous 3 | 4 | 5 | --- 6 | 7 | ###Installation 8 | 9 | ```bash 10 | git clone https://github.com/irwansyahwii/Famous-Vue 11 | cd Famous-Vue 12 | # rm -rf .git && git init && git commit -m "Make it so" # optionally reset git history 13 | npm i # install dependencies 14 | ``` 15 | 16 | --- 17 | ### Examples 18 | There are two examples inside the src folder: 19 | 20 | 1. src/Twitterus 21 | 2. src/Carousel 22 | 23 | --- 24 | 25 | ### Tutorials 26 | 27 | 1. [Layouting in Famous-Vue](https://medium.com/@irwansyah/layouting-in-famous-vue-b834f089886b#.fkzh48w8w) 28 | --- 29 | 30 | ###Development 31 | Run the dev server with ```npm run dev``` 32 | 33 | Now the dev server should be running on localhost:1618 34 | 35 | Run the linters with ```npm run lint``` 36 | 37 | Run All Tests with ```npm test``` 38 | 39 | --- 40 | 41 | 42 | ###LICENSE 43 | 44 | MIT 45 | -------------------------------------------------------------------------------- /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "requireCurlyBraces": ["do", "try", "catch"], 3 | "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"], 4 | "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"], 5 | "disallowSpaceAfterPrefixUnaryOperators": true, 6 | "disallowKeywords": ["with"], 7 | "disallowMultipleLineBreaks": true, 8 | "requireBlocksOnNewline": true, 9 | "disallowMixedSpacesAndTabs": true, 10 | "disallowTrailingWhitespace": true, 11 | "requireLineFeedAtFileEnd": true, 12 | "requireSpacesInFunctionExpression": { 13 | "beforeOpeningCurlyBrace": true 14 | }, 15 | "disallowSpacesInFunctionExpression": { 16 | "beforeOpeningRoundBrace": true 17 | }, 18 | "validateJSDoc": { 19 | "checkParamNames": true, 20 | "requireParamTypes": false 21 | }, 22 | "validateQuoteMarks": "'", 23 | "disallowMultipleVarDecl": true, 24 | "disallowSpacesInsideParentheses": true 25 | } 26 | -------------------------------------------------------------------------------- /src/Twitterus/UIFooter.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Famous Industries 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE.The MIT License (MIT) 22 | 23 | -------------------------------------------------------------------------------- /src/Twitterus/Data.json: -------------------------------------------------------------------------------- 1 | { 2 | sections: [{ 3 | id: 'Home', 4 | tweetNumber: 50 5 | }, { 6 | id: 'Discover', 7 | tweetNumber: 50 8 | }, { 9 | id: 'Connect', 10 | tweetNumber: 50 11 | }, { 12 | id: 'Me', 13 | tweetNumber: 25 14 | }], 15 | 16 | usernames: ['@LouieBlooRaspberry','@PonchoPunch','@SirIsaacLime','@StrawberryShortKook','@AlexandertheGrape', '@LittleOrphanOrange'], 17 | begin: ['Walk towards ', 'Jump on ' ,'Sing to ', 'Dance with ', 'Stare down ', 'Pick up ', 'Hold hands with ', 'Walk around ', 'Shake hands with ', 'Talk to ', 'Point at ', 'Read to ', 'High five ', 'Wave to ' ], 18 | middle: ['a duck ', 'some fish ', 'a zebra ', 'nine honey badgers ', 'an old gorilla ', 'a ham sandwich ', 'a peanut ', 'Nicolas Cage ', 'a sock ', 'a pillow ', '12 fish ','a potato ', 'your neighbor ', 'a snail '], 19 | end: ['quickly','and don\'t look back','without shoes', 'and clap your hands', 'and pat your belly', 'and do a jig', 'tomorrow', 'while eating ice cream', 'in the dark', 'at the park', 'with a friend', 'down by the bay', 'in the car', 'and yell'], 20 | hashtags: ['#harrystyles', '#live', '#boredom', '#mylife', '#hiphop', '#texas', '#november', '#scary', '#best',' #snowman', '#shuffle', '#squats', '#selfie' ] 21 | 22 | 23 | }; -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Famous :: Seed Project 7 | 8 | 9 | 10 | 28 | 29 | 30 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/Resize.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Carousel/Pager.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/VueComponentBase.js: -------------------------------------------------------------------------------- 1 | export default class VueComponentBase{ 2 | constructor(){ 3 | this.methods = {} 4 | 5 | if(this.onInit){ 6 | this.init = this.onInit 7 | this.methods.onInit = this.onInit 8 | } 9 | if(this.onCreated){ 10 | this.created = this.onCreated 11 | this.methods.onCreated = this.onCreated 12 | } 13 | if(this.onBeforeCompile){ 14 | this.beforeCompile = this.onBeforeCompile 15 | this.methods.onBeforeCompile = this.onBeforeCompile 16 | } 17 | if(this.onCompiled){ 18 | this.compiled = this.onCompiled 19 | this.methods.onCompiled = this.onCompiled 20 | } 21 | if(this.onReady){ 22 | this.ready = this.onReady 23 | this.methods.onReady = this.onReady 24 | } 25 | if(this.onAttached){ 26 | this.attached = this.onAttached 27 | this.methods.onAttached = this.onAttached 28 | } 29 | if(this.onDetached){ 30 | this.detached = this.onDetached 31 | this.methods.onDetached = this.onDetached 32 | } 33 | if(this.onDestroy){ 34 | this.destroy = this.onDestroy 35 | this.methods.onDestroy = this.onDestroy 36 | } 37 | if(this.onDestroyed){ 38 | this.destroyed = this.onDestroyed 39 | this.methods.onDestroyed = this.onDestroyed 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /src/Twitterus/UIHeader.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/Twitterus/Section.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/Carousel/Arrow.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/Carousel/Dots.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/Carousel/Dot.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/Carousel/data/imageData.json: -------------------------------------------------------------------------------- 1 | [ 2 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._01_-_Autorretrato._Francisco_Goya_y_Lucientes2C_pintor_thumb.jpg', 3 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._02_-_El_si_pronuncian_y_la_mano_alargan_al_primero_que_llega_thumb.jpg', 4 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._03_-_Que_viene_el_Coco_thumb.jpg', 5 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._04_-_El_de_la_rollona_thumb.jpg', 6 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._05_-_Tal_para_qual_thumb.jpg', 7 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._06_-_Nadie_se_conoce_thumb.jpg', 8 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._07_-_Ni_asi_la_distingue_thumb.jpg', 9 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._09_-_Tantalo_thumb.jpg', 10 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._10_-_El_amor_y_la_muerte_thumb.jpg', 11 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._11_-_Muchachos_al_avC3ADo_thumb.jpg', 12 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._12_-_A_caza_de_dientes_thumb.jpg', 13 | 'http://demo.famo.us.s3.amazonaws.com/hub/apps/carousel/Museo_del_Prado_-_Goya_-_Caprichos_-_No._13_-_Estan_calientes_thumb.jpg' 14 | ] -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true 5 | }, 6 | "rules": { 7 | // Possible Errors 8 | "comma-dangle": 1, 9 | "valid-jsdoc": 0, //Moved to a separate script check-jsdoc 10 | // Best Practices 11 | "block-scoped-var": 1, 12 | "curly": [0, "multi"], 13 | "dot-location": [0, "object"], //Too much noise for now, might consider to enable it as a warning later 14 | "eqeqeq": [2, "allow-null"], 15 | "no-loop-func": 0, 16 | "no-multi-spaces": 0, 17 | "no-self-compare": 1, 18 | // Strict Mode 19 | "strict": 1, 20 | // Variables 21 | "no-shadow": 0, //Too much noise from tests, might consider to enable it as a warning later 22 | "no-undefined": 0, 23 | "no-unused-vars": [2, {"vars": "all", "args": "none"}], 24 | "no-use-before-define": [0, "nofunc"], 25 | "no-new": 0, 26 | // Stylistic Issues 27 | "brace-style": [1, "stroustrup"], 28 | "camelcase": 0, //Too much noise from tests, might consider to enable it as a warning later 29 | "comma-spacing": [0, {"before": false, "after": true}], //Noise 30 | "consistent-this": [0, "_this"], 31 | "eol-last": 1, 32 | "key-spacing": 0, 33 | "new-cap": 0, 34 | "no-trailing-spaces": 0, 35 | "no-mixed-spaces-and-tabs": 0, //Too much noise for now, might consider to enable it as a warning later 36 | "no-underscore-dangle": 0, 37 | "quotes": [0, "single"], //Too much noise for now, might consider to enable it as a warning later 38 | "semi-spacing": 0, //Too much noise for now, might consider to enable it as a warning later 39 | "space-infix-ops": 0, 40 | "space-unary-ops": 0 //Too much noise for now, might consider to enable it as a warning later 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/Twitterus/NavButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "engine-seed", 3 | "version": "1.0.0", 4 | "description": "seed project for a browserified version of the Famous Engine", 5 | "browser": "src/index.js", 6 | "scripts": { 7 | "build": "browserify src/index.js -g uglifyify | uglifyjs --screw-ie8 -m -c dead_code,sequences,conditionals,booleans,unused,if_return,join_vars,drop_debugger > public/bundle.js", 8 | "build-test": "browserify src/index.js -g uglifyify | uglifyjs --screw-ie8 -m -c dead_code,sequences,conditionals,booleans,unused,if_return,join_vars,drop_debugger > public-test/bundle.js", 9 | "watch": "watchify src/index.js -d -v -o public/bundle.js", 10 | "start": "npm run build && serve --compress public/ -p 1618", 11 | "dev": "node ./bin/dev.js", 12 | "test-original": "npm run lint -s && npm run build", 13 | "test": "node ./bin/test.js", 14 | "lint-jscs": "jscs src/", 15 | "lint-eslint": "eslint --ignore-path .gitignore src/", 16 | "lint": "npm run lint-eslint && npm run lint-jscs" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/Famous/engine-seed.git" 21 | }, 22 | "browserify": { 23 | "transform": [ 24 | "babelify" 25 | ] 26 | }, 27 | "devDependencies": { 28 | "babel-core": "^6.4.5", 29 | "babel-plugin-transform-runtime": "^6.4.3", 30 | "babel-preset-es2015": "^6.3.13", 31 | "babel-preset-stage-2": "^6.3.13", 32 | "babel-runtime": "^5.8.35", 33 | "babelify": "^6.4.0", 34 | "browserify": "^10.1.3", 35 | "chalk": "^1.0.0", 36 | "eslint": "^0.22.1", 37 | "finalhandler": "^0.3.6", 38 | "jscs": "^1.7.3", 39 | "serve-static": "^1.9.3", 40 | "uglify-js": "^2.4.15", 41 | "uglifyify": "^3.0.1", 42 | "vue-hot-reload-api": "^1.3.2", 43 | "vueify": "^8.3.5", 44 | "vueify-insert-css": "^1.0.0", 45 | "watchify": "^3.1.0" 46 | }, 47 | "author": "Famous", 48 | "license": "MIT", 49 | "dependencies": { 50 | "babelify": "^6.0.1", 51 | "famous": "^0.6.1", 52 | "vue": "^1.0.16" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /public-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Famous :: Seed Project 7 | 8 | 9 | 10 | 29 | 30 | 31 | 36 | 37 | 38 | 39 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/Carousel/Carousel.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 56 | 57 | -------------------------------------------------------------------------------- /src/Twitterus/Tweet.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /bin/dev.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | var genericCompile = require('./genericCompile') 3 | genericCompile('./src/index.js', './public') 4 | 5 | 6 | 7 | // 'use strict'; 8 | 9 | // var vue = require('vue') 10 | // var browserify = require('browserify'); 11 | // var watchify = require('watchify'); 12 | // var path = require('path'); 13 | // var http = require('http'); 14 | // var fs = require('fs'); 15 | // var finalhandler = require('finalhandler'); 16 | // var serveStatic = require('serve-static'); 17 | // var chalk = require('chalk'); 18 | 19 | // var b = browserify(path.resolve('./src/index.js'), watchify.args); 20 | // b.transform('vueify'); 21 | // var w = watchify(b); 22 | 23 | // var bytes, time; 24 | // w.on('bytes', function (b) { bytes = b }); 25 | // w.on('time', function (t) { time = t }); 26 | 27 | // var update = function(bundle) { 28 | // var didError = false; 29 | // var writeStream = fs.createWriteStream(path.resolve('./public/bundle.js')); 30 | 31 | // bundle.on('error', function (err) { 32 | // console.error(String(chalk.red(err))); 33 | // didError = true; 34 | // writeStream.end(); 35 | // }); 36 | 37 | // bundle.pipe(writeStream); 38 | 39 | // writeStream.on('error', function (err) { 40 | // console.error(chalk.red(err)); 41 | // }); 42 | 43 | // writeStream.on('close', function () { 44 | // if (!didError) { 45 | // console.error(chalk.cyan(bytes) + chalk.grey(' bytes written to ') + chalk.cyan(path.resolve('./public/bundle.js')) 46 | // + ' (' + (time / 1000).toFixed(2) + ' seconds)' 47 | // ); 48 | // } 49 | // }); 50 | // } 51 | 52 | // update(w.bundle()); 53 | 54 | // w.on('update', function (ids) { 55 | // update(w.bundle()); 56 | // }); 57 | 58 | // var serve = serveStatic(path.normalize('./public/')); 59 | 60 | // var server = http.createServer(function(req, res){ 61 | // serve(req, res, finalhandler(req, res)) 62 | // }); 63 | 64 | // server.listen(1618, function() {console.log(chalk.grey('serving ') + chalk.blue(path.resolve('./public/')) + chalk.grey(' on port ') + chalk.blue('1618'));}); 65 | -------------------------------------------------------------------------------- /bin/genericCompile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(entryFilePath, outputRootFolder){ 2 | 'use strict'; 3 | 4 | var vue = require('vue') 5 | var browserify = require('browserify'); 6 | var watchify = require('watchify'); 7 | var path = require('path'); 8 | var http = require('http'); 9 | var fs = require('fs'); 10 | var finalhandler = require('finalhandler'); 11 | var serveStatic = require('serve-static'); 12 | var chalk = require('chalk'); 13 | 14 | var b = browserify(path.resolve(entryFilePath), watchify.args); 15 | b.transform('vueify'); 16 | var w = watchify(b); 17 | 18 | var bytes, time; 19 | w.on('bytes', function (b) { bytes = b }); 20 | w.on('time', function (t) { time = t }); 21 | 22 | var update = function(bundle) { 23 | var didError = false; 24 | var writeStream = fs.createWriteStream(path.resolve(outputRootFolder + '/bundle.js')); 25 | 26 | bundle.on('error', function (err) { 27 | console.error(String(chalk.red(err))); 28 | didError = true; 29 | writeStream.end(); 30 | }); 31 | 32 | bundle.pipe(writeStream); 33 | 34 | writeStream.on('error', function (err) { 35 | console.error(chalk.red(err)); 36 | }); 37 | 38 | writeStream.on('close', function () { 39 | if (!didError) { 40 | console.error(chalk.cyan(bytes) + chalk.grey(' bytes written to ') + chalk.cyan(path.resolve(outputRootFolder + '/bundle.js')) 41 | + ' (' + (time / 1000).toFixed(2) + ' seconds)' 42 | ); 43 | } 44 | }); 45 | } 46 | 47 | update(w.bundle()); 48 | 49 | w.on('update', function (ids) { 50 | update(w.bundle()); 51 | }); 52 | 53 | var serve = serveStatic(path.normalize(outputRootFolder + '/')); 54 | 55 | var server = http.createServer(function(req, res){ 56 | serve(req, res, finalhandler(req, res)) 57 | }); 58 | 59 | server.listen(1618, function() {console.log(chalk.grey('serving ') + chalk.blue(path.resolve(outputRootFolder + '/')) + chalk.grey(' on port ') + chalk.blue('1618'));}); 60 | 61 | } 62 | -------------------------------------------------------------------------------- /src/Align.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/NodeWithAutoPropsFromFamousObject.js: -------------------------------------------------------------------------------- 1 | import GlobalVars from './GlobalVars' 2 | import famous from 'famous' 3 | import FamousBase from './FamousBase' 4 | import VueComponentBase from './VueComponentBase' 5 | 6 | var Node = famous.core.Node 7 | 8 | export default class NodeWithAutoPropsFromFamousObject extends FamousBase{ 9 | constructor(){ 10 | super() 11 | } 12 | 13 | onInit(){ 14 | this.$options.famousObject = new Node() 15 | 16 | this.$options.famousObject.onMount = (path)=>{ 17 | this.location = this.$options.famousObject.getLocation() 18 | this.id = this.location 19 | this.$dispatch('on-mount', path) 20 | } 21 | 22 | this.$options.famousObject.onReceive = (event, eventData)=>{ 23 | this.$dispatch(event, eventData) 24 | } 25 | 26 | let parentFamousObject = (this.$parent.$options.famousObject || (this.$parent.$parent && this.$parent.$parent.$options.famousObject )) || {} 27 | 28 | 29 | if(parentFamousObject.addChild){ 30 | parentFamousObject.addChild(this.$options.famousObject) 31 | } 32 | else { 33 | GlobalVars.settings.rootScene.addChild(this.$options.famousObject) 34 | } 35 | 36 | 37 | this.$options.methods.createPropsFromFamousObject.call(this, this.$options.famousObject) 38 | this.$options.props.sizeMode.get = function(){ 39 | let famousObject = this.famousObject || this.$options.famousObject 40 | let currentSizeMode = famousObject.getSizeMode() 41 | 42 | let mappings = { 43 | 0: 'relative', 44 | 1: 'absolute', 45 | 2: 'render', 46 | } 47 | 48 | return [mappings[currentSizeMode[0]], mappings[currentSizeMode[1]], mappings[currentSizeMode[2]]] 49 | } 50 | 51 | this.$options.props.sizeMode.coerce = function(val){ 52 | let famousObject = this.famousObject || this.$options.famousObject 53 | 54 | let parsedValue = val 55 | if(typeof val === 'string'){ 56 | parsedValue = this.$options.methods.parseStringPropertyWithComma(val, 'sizeMode') 57 | 58 | if(parsedValue.length > 0){ 59 | famousObject.setSizeMode.apply(famousObject, parsedValue) 60 | } 61 | } 62 | 63 | return famousObject.getSizeMode() 64 | }.bind(this) 65 | 66 | 67 | // this.mountPoint = "0,0,0" 68 | } 69 | 70 | 71 | 72 | 73 | } -------------------------------------------------------------------------------- /src/DOMElementOriginal.js: -------------------------------------------------------------------------------- 1 | import famous from "famous" 2 | import GlobalVars from "./GlobalVars" 3 | import FamousBase from './FamousBase' 4 | 5 | var DOMElement = famous.domRenderables.DOMElement 6 | var GestureHandler = famous.components.GestureHandler 7 | 8 | export default class DOMElementVue extends FamousBase{ 9 | constructor(){ 10 | super() 11 | 12 | this.props = { 13 | tagName: { 14 | type: String, 15 | default: 'div', 16 | famousType: 'string', 17 | assign: function(value){ 18 | this.$options.famousObject._tagName = value 19 | } 20 | }, 21 | attributes: { 22 | type: Object, 23 | default: {}, 24 | famousType: 'object', 25 | assign: function(value){ 26 | 27 | for (let key in value){ 28 | this.$options.famousObject.setAttribute(key, value[key]); 29 | } 30 | } 31 | }, 32 | properties: { 33 | type: Object, 34 | default: {}, 35 | famousType: 'object', 36 | assign: function(value){ 37 | for (let key in value){ 38 | this.$options.famousObject.setProperty(key, value[key]); 39 | } 40 | } 41 | }, 42 | content: { 43 | type: String, 44 | default: '', 45 | famousObject: 'string', 46 | assign: function(value){ 47 | if(this.$el.children.length > 0){ 48 | this.$options.famousObject.setContent(this.$el.children[0].outerHTML) 49 | } 50 | else{ 51 | let innerHTMLValue = this.$el.innerHTML 52 | if(innerHTMLValue.length > 0){ 53 | this.$options.famousObject.setContent(innerHTMLValue) 54 | } 55 | else{ 56 | this.$options.famousObject.setContent(value) 57 | } 58 | } 59 | } 60 | } 61 | } 62 | 63 | this.methods.setContent = this.setContent 64 | } 65 | 66 | setContent(content){ 67 | this.$options.famousObject.setContent(content) 68 | } 69 | 70 | onBeforeCompile(){ 71 | let parentNode = null 72 | 73 | if(this.$parent.$options.famousObject && this.$parent.$options.famousObject.addChild){ 74 | parentNode = this.$parent.$options.famousObject 75 | } 76 | else{ 77 | parentNode = GlobalVars.settings.rootScene.addChild() 78 | 79 | } 80 | 81 | this.$options.famousObject = new DOMElement(parentNode) 82 | } 83 | 84 | onCompiled(){ 85 | super.onCompiled() 86 | 87 | } 88 | } -------------------------------------------------------------------------------- /src/NodeWithCustomPropsParser.js: -------------------------------------------------------------------------------- 1 | import GlobalVars from './GlobalVars' 2 | import famous from 'famous' 3 | import FamousBase from './FamousBase' 4 | 5 | var Node = famous.core.Node 6 | 7 | export default class NodeVue extends FamousBase{ 8 | constructor(){ 9 | super() 10 | this.props = { 11 | sizeMode: { 12 | type: String, 13 | default: '', 14 | famousType: 'string', 15 | allowEmpty: false, 16 | target: function(){ 17 | return this.$options.famousObject 18 | }, 19 | get: function(){ 20 | return this.$options.famousObject.getSizeMode() 21 | } 22 | }, 23 | absoluteSize: { 24 | type: String, 25 | default: '', 26 | famousType: 'float', 27 | allowNull: true, 28 | target: function(){ 29 | return this.$options.famousObject 30 | } 31 | }, 32 | differentialSize: { 33 | type: String, 34 | default: '', 35 | famousType: 'float', 36 | target: function(){ 37 | return this.$options.famousObject 38 | } 39 | }, 40 | position: { 41 | type: String, 42 | default: '', 43 | famousType: 'float', 44 | target: function(){ 45 | return this.$options.famousObject 46 | } 47 | }, 48 | mountPoint: { 49 | type: String, 50 | default: '', 51 | famousType: 'float', 52 | target: function(){ 53 | return this.$options.famousObject 54 | } 55 | }, 56 | origin: { 57 | type: String, 58 | default: '', 59 | famousType: 'float', 60 | target: function(){ 61 | return this.$options.famousObject 62 | } 63 | }, 64 | align: { 65 | type: String, 66 | default: '', 67 | famousType: 'float', 68 | target: function(){ 69 | return this.$options.famousObject 70 | } 71 | }, 72 | } 73 | 74 | this.methods.requestUpdate = this.requestUpdate 75 | this.methods.requestUpdateOnNextTick = this.requestUpdateOnNextTick 76 | this.methods.setRotation = this.setRotation 77 | } 78 | 79 | onBeforeCompile(){ 80 | 81 | this.$parent.$options.famousObject = this.$parent.$options.famousObject || {} 82 | 83 | this.$options.famousObject = new Node() 84 | this.$options.famousObject.onMount = (path)=>{ 85 | this.$dispatch('on-mount', path) 86 | } 87 | } 88 | 89 | 90 | onReady(){ 91 | if(this.$parent.$options.famousObject.addChild){ 92 | this.$parent.$options.famousObject.addChild(this.$options.famousObject) 93 | } 94 | else { 95 | GlobalVars.settings.rootScene.addChild(this.$options.famousObject) 96 | } 97 | } 98 | 99 | addComponent(obj){ 100 | return this.$options.famousObject.addComponent(obj) 101 | } 102 | 103 | requestUpdate(obj){ 104 | this.$options.famousObject.requestUpdate(obj) 105 | } 106 | 107 | requestUpdateOnNextTick(obj){ 108 | this.$options.famousObject.requestUpdateOnNextTick(obj) 109 | } 110 | } -------------------------------------------------------------------------------- /src/Carousel/Page.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/DOMElementWithAutoPropsFromFamousObject.js: -------------------------------------------------------------------------------- 1 | import famous from "famous" 2 | import GlobalVars from "./GlobalVars" 3 | import FamousBase from './FamousBase' 4 | 5 | var DOMElement = famous.domRenderables.DOMElement 6 | var Node = famous.core.Node 7 | 8 | export default class DOMElementWithAutoPropsFromFamousObject extends FamousBase{ 9 | constructor(){ 10 | super() 11 | } 12 | 13 | onInit(){ 14 | 15 | this.$options.node = null 16 | 17 | if(this.$parent.$options.famousObject.addChild){ 18 | this.$options.node = this.$parent.$options.famousObject 19 | } 20 | else { 21 | this.$options.node = GlobalVars.settings.rootScene.addChild() 22 | } 23 | 24 | this.$options.famousObject = new DOMElement(this.$options.node) 25 | 26 | this.$options.propsConverter.attribute = (newVal)=>{ 27 | let parsedValue = newVal 28 | if(typeof newVal === 'string'){ 29 | parsedValue = this.$options.methods.parseStringPropertyWithComma(newVal, 'attribute') 30 | } 31 | 32 | return parsedValue 33 | } 34 | 35 | this.$options.propsConverter.id = (newVal)=>{ 36 | let parsedValue = newVal 37 | if(typeof newVal === 'string'){ 38 | parsedValue = this.$options.methods.parseStringPropertyWithComma(newVal, 'id') 39 | } 40 | 41 | return parsedValue 42 | } 43 | 44 | this.$options.propsConverter.content = (newVal)=>{ 45 | let parsedValue = newVal 46 | if(typeof newVal === 'string'){ 47 | parsedValue = this.$options.methods.parseStringPropertyWithComma(newVal, 'content') 48 | } 49 | 50 | return (parsedValue || '') 51 | } 52 | 53 | this.$options.props.classes = { 54 | type: String, 55 | coerce: (newVal)=>{ 56 | let parsedValue = newVal 57 | if(typeof newVal === 'string'){ 58 | parsedValue = this.$options.methods.parseStringPropertyWithComma(newVal, 'classes') 59 | for(let i = 0; i < parsedValue.length; i++){ 60 | this.$options.famousObject.addClass(parsedValue[0]) 61 | } 62 | } 63 | return newVal 64 | } 65 | } 66 | 67 | this.$options.props.cssproperties = { 68 | type: Object, 69 | coerce: (newVal)=>{ 70 | 71 | if(typeof newVal === 'object'){ 72 | let isAddWatch = false 73 | if(newVal.__ob__){ 74 | isAddWatch = true 75 | 76 | } 77 | for(let prop in newVal){ 78 | this.$options.famousObject.setProperty(prop, newVal[prop]) 79 | 80 | if(isAddWatch){ 81 | let propDescriptor = Object.getOwnPropertyDescriptor(newVal, prop) 82 | 83 | Object.defineProperty(newVal, prop, { 84 | get: propDescriptor.get, 85 | set: (the_val)=>{ 86 | propDescriptor.set.call(newVal, the_val) 87 | this.$options.famousObject.setProperty(prop, the_val) 88 | } 89 | }) 90 | 91 | } 92 | } 93 | } 94 | 95 | return newVal 96 | } 97 | } 98 | 99 | this.$options.props.attributes = { 100 | type: Object, 101 | coerce: function(newVal){ 102 | if(typeof newVal === 'object'){ 103 | let isAddWatch = false 104 | if(newVal.__ob__){ 105 | isAddWatch = true 106 | 107 | } 108 | 109 | for(let attribute in newVal){ 110 | this.$options.famousObject.setAttribute(attribute, newVal[attribute]) 111 | 112 | if(isAddWatch){ 113 | let propDescriptor = Object.getOwnPropertyDescriptor(newVal, prop) 114 | 115 | Object.defineProperty(newVal, prop, { 116 | get: propDescriptor.get, 117 | set: (the_val)=>{ 118 | propDescriptor.set.call(newVal, the_val) 119 | this.$options.famousObject.setAttribute(prop, the_val) 120 | } 121 | }) 122 | 123 | } 124 | } 125 | } 126 | 127 | return newVal 128 | } 129 | } 130 | 131 | this.$options.methods.createPropsFromFamousObject.call(this, this.$options.famousObject) 132 | } 133 | } -------------------------------------------------------------------------------- /src/ImageView.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import FamousVue from '../src/FamousVue' 3 | import '../src/Twitterus' 4 | import assert from 'assert' 5 | import '../src/Carousel' 6 | 7 | Vue.config.debug = true 8 | 9 | new Vue({ 10 | el: 'body', 11 | methods:{ 12 | testNode: function(){ 13 | this.$refs.testNode.sizeMode = 'render,absolute,default' 14 | assert.equal(this.$refs.testNode.sizeMode[0], 'render') 15 | assert.equal(this.$refs.testNode.sizeMode[1], 'absolute') 16 | assert.equal(this.$refs.testNode.sizeMode[2], 'relative') 17 | 18 | assert.equal(this.$refs.testNode.location, 'body/0', 'get location failed') 19 | assert.equal(this.$refs.testNode.id, 'body/0', 'get id failed') 20 | 21 | assert.equal(typeof this.$refs.testNode.emit, 'function', 'emit is not a function') 22 | 23 | assert.equal(typeof this.$refs.testNode.value, 'object', 'value doesnt return an object') 24 | 25 | assert.equal(this.$refs.testNode.children.length, 0, 'children is not empty') 26 | 27 | assert.equal(typeof this.$refs.testNode.parent, 'object', 'parent is not an object') 28 | assert.equal(this.$refs.testNode.parent.constructor.name, 'Scene') 29 | 30 | assert.equal(typeof this.$refs.testNode.requestUpdate, 'function') 31 | assert.equal(typeof this.$refs.testNode.requestUpdateOnNextTick, 'function') 32 | 33 | assert.equal(this.$refs.testNode.isMounted(), true) 34 | 35 | assert.equal(this.$refs.testNode.isShown(), true) 36 | 37 | this.$refs.testNode.opacity = 0.7 38 | assert.equal(this.$refs.testNode.opacity, 0.7) 39 | 40 | this.$refs.testNode.mountPoint = "0,1,1" 41 | assert.equal(this.$refs.testNode.mountPoint[0], 0) 42 | assert.equal(this.$refs.testNode.mountPoint[1], 1) 43 | assert.equal(this.$refs.testNode.mountPoint[2], 0.5) 44 | 45 | this.$refs.testNode.mountPoint = [1,0,0] 46 | assert.equal(this.$refs.testNode.mountPoint[0], 1) 47 | assert.equal(this.$refs.testNode.mountPoint[1], 0) 48 | assert.equal(this.$refs.testNode.mountPoint[2], -0.5) 49 | 50 | let currentAlignt = this.$refs.testNode.align 51 | this.$refs.testNode.align = "1" 52 | assert.equal(this.$refs.testNode.align[0], 1) 53 | assert.equal(this.$refs.testNode.align[1], currentAlignt[1]) 54 | assert.equal(this.$refs.testNode.align[2], currentAlignt[2]) 55 | 56 | currentAlignt = this.$refs.testNode.align 57 | this.$refs.testNode.align = "0.5,1" 58 | assert.equal(this.$refs.testNode.align[0], 0.5) 59 | assert.equal(this.$refs.testNode.align[1], 1) 60 | assert.equal(this.$refs.testNode.align[2], currentAlignt[2]) 61 | 62 | this.$refs.testNode.align = "0,0.5,1" 63 | assert.equal(this.$refs.testNode.align[0], 0) 64 | assert.equal(this.$refs.testNode.align[1], 0.5) 65 | assert.equal(this.$refs.testNode.align[2], 0.5) 66 | 67 | this.$refs.testNode.align = [1, 0, 0] 68 | assert.equal(this.$refs.testNode.align[0], 1) 69 | assert.equal(this.$refs.testNode.align[1], 0) 70 | assert.equal(this.$refs.testNode.align[2], -0.5) 71 | 72 | let currentPosition = this.$refs.testNode.position 73 | this.$refs.testNode.position = "400" 74 | assert.equal(this.$refs.testNode.position[0], 400) 75 | assert.equal(this.$refs.testNode.position[1], currentPosition[1]) 76 | assert.equal(this.$refs.testNode.position[2], currentPosition[2]) 77 | 78 | currentPosition = this.$refs.testNode.position 79 | this.$refs.testNode.position = "700,200" 80 | assert.equal(this.$refs.testNode.position[0], 700) 81 | assert.equal(this.$refs.testNode.position[1], 200) 82 | assert.equal(this.$refs.testNode.position[2], currentPosition[2]) 83 | 84 | this.$refs.testNode.position = "900,100,300" 85 | assert.equal(this.$refs.testNode.position[0], 900) 86 | assert.equal(this.$refs.testNode.position[1], 100) 87 | assert.equal(this.$refs.testNode.position[2], 300) 88 | 89 | this.$refs.testNode.position = [20, 800, 98] 90 | assert.equal(this.$refs.testNode.position[0], 20) 91 | assert.equal(this.$refs.testNode.position[1], 800) 92 | assert.equal(this.$refs.testNode.position[2], 98) 93 | 94 | this.$refs.testNode.position = [77, 11] 95 | assert.equal(this.$refs.testNode.position[0], 77) 96 | assert.equal(this.$refs.testNode.position[1], 11) 97 | assert.equal(this.$refs.testNode.position[2], 98) 98 | 99 | console.info('end of testNode') 100 | }, 101 | testDOMElement: function(){ 102 | assert.equal(typeof this.$refs.testDom.value, 'object') 103 | assert.equal(typeof this.$refs.testDom.onUpdate, 'function') 104 | assert.equal(typeof this.$refs.testDom.onMount, 'function') 105 | assert.equal(typeof this.$refs.testDom.onDismount, 'function') 106 | assert.equal(typeof this.$refs.testDom.onShow, 'function') 107 | 108 | this.$refs.testDom.cutOutState = true 109 | this.$refs.testDom.cutOutState = false 110 | 111 | assert.equal(typeof this.$refs.testDom.onTransformChange, 'function') 112 | assert.equal(typeof this.$refs.testDom.onSizeChange, 'function') 113 | assert.equal(typeof this.$refs.testDom.onOpacityChange, 'function') 114 | assert.equal(typeof this.$refs.testDom.onAddUIEvent, 'function') 115 | assert.equal(typeof this.$refs.testDom.onRemoveUIEvent, 'function') 116 | assert.equal(typeof this.$refs.testDom.preventDefault, 'function') 117 | assert.equal(typeof this.$refs.testDom.allowDefault, 'function') 118 | assert.equal(typeof this.$refs.testDom.onSizeModeChange, 'function') 119 | 120 | assert.equal(typeof this.$refs.testDom.renderSize, 'object') 121 | 122 | this.$refs.testDom.addClass('button') 123 | assert.equal(this.$refs.testDom.value.classes[1], 'button') 124 | assert.equal(this.$refs.testDom.hasClass('button'), true) 125 | 126 | this.$refs.testDom.removeClass('button') 127 | assert.equal(this.$refs.testDom.value.classes.length, 1) 128 | assert.equal(this.$refs.testDom.hasClass('button'), false) 129 | 130 | this.$refs.testDom.attributes = {href:'localhost'} 131 | assert.equal(this.$refs.testDom.value.attributes.href, 'localhost') 132 | 133 | this.$refs.testDom.cssproperties = { 134 | backgroundColor: 'green' 135 | } 136 | assert.equal(this.$refs.testDom.value.styles.backgroundColor, 'green') 137 | 138 | this.$refs.testDom.id = "divMain" 139 | assert.equal(this.$refs.testDom.value.id, 'divMain') 140 | 141 | this.$refs.testDom.content = "haloo" 142 | 143 | assert.equal(this.$refs.testDom.value.content, 'haloo') 144 | 145 | assert.equal(typeof this.$refs.testDom.on, 'function') 146 | assert.equal(typeof this.$refs.testDom.onReceive, 'function') 147 | 148 | this.$refs.domnode.align = [0.5, 0.7] 149 | 150 | this.$refs.testDom.classes = "button" 151 | assert.equal(this.$refs.testDom.value.classes[1], 'button') 152 | 153 | 154 | console.info('end of testDOMElement') 155 | } 156 | }, 157 | ready: function(){ 158 | 159 | this.testNode() 160 | this.testDOMElement() 161 | 162 | 163 | console.info('End of tests') 164 | } 165 | }) 166 | 167 | -------------------------------------------------------------------------------- /src/Twitterus/Twitterus.vue: -------------------------------------------------------------------------------- 1 | 8 | 37 | 38 | -------------------------------------------------------------------------------- /src/FamousBase.js: -------------------------------------------------------------------------------- 1 | import VueComponentBase from './VueComponentBase' 2 | 3 | export default class FamousBase extends VueComponentBase{ 4 | constructor(){ 5 | super() 6 | this.famousObject = null 7 | 8 | this.propsConverter = {} 9 | this.customSetter = {} 10 | this.props = {} 11 | 12 | this.methods.createFamousProperty = this.createFamousProperty 13 | this.methods.createFamousMethods = this.createFamousMethods 14 | this.methods.createPropsFromFamousObject = this.createPropsFromFamousObject 15 | 16 | this.methods.parseStringPropertyWithComma = this.parseStringPropertyWithComma 17 | this.methods.parseIntPropertyWithComma = this.parseIntPropertyWithComma 18 | this.methods.parseFloatPropertyWithComma = this.parseFloatPropertyWithComma 19 | this.methods.parsePropsValue = this.parsePropsValue 20 | this.methods.doParsePropValue = this.doParsePropValue 21 | this.methods.getRealFamousObject = this.getRealFamousObject 22 | } 23 | 24 | getRealFamousObject(){ 25 | return (this.$options && this.$options.famousObject) || this.famousObject 26 | } 27 | 28 | createFamousProperty(propName, propInfo){ 29 | let ucasePropName = propName.substr(0, 1).toUpperCase() + propName.substr(1, propName.length - 1) 30 | let famousObject = this.famousObject || this.$options.famousObject 31 | 32 | if(propInfo.coerce){ 33 | propInfo.set = propInfo.coerce.bind(this) 34 | }else{ 35 | let famousObject = this.famousObject || this.$options.famousObject 36 | let prefix = 'set' 37 | let famousSetter = famousObject[prefix + ucasePropName] 38 | 39 | if(famousSetter){ 40 | propInfo.set = function(newVal){ 41 | famousSetter.apply(famousObject, [newVal]) 42 | } 43 | } 44 | } 45 | 46 | let prefix = 'get' 47 | if(propInfo.noGetPrefix){ 48 | prefix = '' 49 | } 50 | let famousGetter = famousObject[prefix + ucasePropName] 51 | 52 | if(famousGetter && !propInfo.get){ 53 | propInfo.get = function(){ 54 | 55 | return famousGetter.call(famousObject) 56 | } 57 | } 58 | 59 | if(propInfo.set || propInfo.get){ 60 | Object.defineProperty(this, propName, propInfo) 61 | } 62 | } 63 | 64 | createFamousMethods(methodName){ 65 | this[methodName] = function(){ 66 | let method = this.$options.famousObject[methodName] 67 | 68 | return method.apply(this.$options.famousObject, arguments) 69 | }.bind(this) 70 | } 71 | 72 | createPropsFromFamousObject(famousObject){ 73 | for(let memberName in famousObject){ 74 | if(memberName.indexOf('get') === 0 || memberName.indexOf('set') === 0 ){ 75 | 76 | 77 | let propName = '' 78 | if(memberName.indexOf('get') === 0){ 79 | propName = memberName.replace('get', '') 80 | } 81 | else{ 82 | propName = memberName.replace('set', '') 83 | } 84 | 85 | let ucasePropName = propName.substr(0, 1).toUpperCase() + propName.substr(1, propName.length - 1) 86 | let lcasePropName = propName.substr(0, 1).toLowerCase() + propName.substr(1, propName.length - 1) 87 | let propInfo = {} 88 | 89 | 90 | 91 | this.$options.props[lcasePropName] = propInfo 92 | 93 | let setter = famousObject['set'+ucasePropName] 94 | 95 | if(setter){ 96 | propInfo.coerce = (newVal)=>{ 97 | 98 | let converter = this.$options.propsConverter[lcasePropName] 99 | if(converter){ 100 | newVal = converter(newVal) 101 | } 102 | else{ 103 | if(typeof newVal === 'string'){ 104 | let convertedValue = this.$options.methods.parseFloatPropertyWithComma(newVal, lcasePropName) 105 | newVal = convertedValue 106 | } 107 | } 108 | 109 | let customSetter = this.$options.customSetter[lcasePropName] 110 | if(customSetter){ 111 | customSetter(newVal) 112 | } 113 | else{ 114 | if(typeof newVal === 'object'){ 115 | if(newVal.length === 1){ 116 | setter.call(famousObject, newVal[0]) 117 | } 118 | if(newVal.length === 2){ 119 | setter.call(famousObject, newVal[0], newVal[1]) 120 | } 121 | if(newVal.length === 3){ 122 | setter.call(famousObject, newVal[0], newVal[1], newVal[2]) 123 | } 124 | } 125 | else{ 126 | setter.call(famousObject, newVal) 127 | } 128 | 129 | } 130 | 131 | 132 | return newVal 133 | } 134 | } 135 | } 136 | } 137 | } 138 | 139 | onBeforeCompile() 140 | { 141 | for(let memberName in this.$options.famousObject){ 142 | if(memberName.indexOf('_') < 0 && memberName.indexOf('get') < 0 && memberName.indexOf('set') < 0){ 143 | this.createFamousMethods(memberName) 144 | } 145 | 146 | } 147 | 148 | for(let propName in this.$options.props){ 149 | let propInfo = this.$options.props[propName] 150 | this.createFamousProperty(propName, propInfo) 151 | } 152 | } 153 | 154 | doParsePropValue(propName){ 155 | let propInfo = this.$options.props[propName] 156 | 157 | if(typeof propInfo.allowEmpty === 'undefined'){ 158 | propInfo.allowEmpty = false 159 | } 160 | 161 | if(typeof propInfo.autoAssign === 'undefined'){ 162 | propInfo.autoAssign = true 163 | } 164 | 165 | if(!propInfo.autoAssign){ 166 | return 167 | } 168 | 169 | let propValue = [] 170 | if(propInfo.famousType === 'string'){ 171 | propValue = this.parseStringPropertyWithComma(this[propName], propName, 0) 172 | } 173 | if(propInfo.famousType === 'float'){ 174 | propValue = this.parseFloatPropertyWithComma(this[propName], propName, 0, propInfo.allowNull) 175 | } 176 | if(propInfo.famousType === 'object'){ 177 | propValue = this[propName] 178 | } 179 | if(propInfo.assign){ 180 | propInfo.assign.apply(this, [propValue]) 181 | } 182 | if(propInfo.target){ 183 | let ucasePropName = propName.substr(0, 1).toUpperCase() + propName.substr(1, propName.length - 1) 184 | 185 | let doAssignment = this[propName].length > 0 186 | doAssignment = doAssignment || (this[propName].length < 0 && propInfo.allowEmpty) 187 | 188 | 189 | if(doAssignment){ 190 | if(propValue.length === 1){ 191 | propInfo.target.apply(this)['set' + ucasePropName](propValue[0]) 192 | } 193 | if(propValue.length === 2){ 194 | propInfo.target.apply(this)['set' + ucasePropName](propValue[0], propValue[1]) 195 | } 196 | if(propValue.length === 3){ 197 | propInfo.target.apply(this)['set' + ucasePropName](propValue[0], propValue[1], propValue[2]) 198 | } 199 | 200 | } 201 | } 202 | } 203 | 204 | parsePropsValue(){ 205 | for(let propName in this.$options.props){ 206 | 207 | this.doParsePropValue(propName) 208 | 209 | this.$watch(propName, function(newVal, oldVal){ 210 | this.doParsePropValue(propName) 211 | }) 212 | } 213 | } 214 | 215 | parseIntPropertyWithComma(propertyValue, propertyName, valueLength, allowNull = false){ 216 | let stringValues = this.parseStringPropertyWithComma(propertyValue, propertyName, valueLength, true) 217 | 218 | for(let i = 0; i < stringValues.length; i++){ 219 | if(stringValues[i] === 'null'){ 220 | if(allowNull){ 221 | stringValues[i] = null 222 | } 223 | else{ 224 | stringValues[i] = 0 225 | } 226 | } 227 | else{ 228 | stringValues[i] = parseInt(stringValues[i]) 229 | } 230 | } 231 | 232 | return stringValues 233 | 234 | } 235 | 236 | parseFloatPropertyWithComma(propertyValue, propertyName, valueLength, allowNull = false){ 237 | let stringValues = this.parseStringPropertyWithComma(propertyValue, propertyName, valueLength, true) 238 | 239 | for(let i = 0; i < stringValues.length; i++){ 240 | if(stringValues[i] === 'null'){ 241 | if(allowNull){ 242 | stringValues[i] = null 243 | } 244 | else{ 245 | stringValues[i] = 0.0 246 | } 247 | } 248 | else{ 249 | stringValues[i] = parseFloat(stringValues[i]) 250 | } 251 | 252 | } 253 | 254 | return stringValues 255 | 256 | } 257 | 258 | parseStringPropertyWithComma(propertyValue, propertyName, valueLength, trim = true){ 259 | let propertyValues = propertyValue.split(',') 260 | 261 | 262 | if(trim){ 263 | for(let i = 0; i < propertyValues.length; i++){ 264 | propertyValues[i] = propertyValues[i].trim() 265 | } 266 | } 267 | 268 | return propertyValues; 269 | } 270 | } --------------------------------------------------------------------------------