├── app ├── views │ └── .gitkeep ├── components │ ├── .gitkeep │ ├── mat-select.js │ └── core-transition.js ├── helpers │ └── .gitkeep ├── models │ └── .gitkeep ├── routes │ ├── .gitkeep │ └── core-transition.js ├── controllers │ ├── .gitkeep │ ├── application.js │ ├── core-transition.js │ └── transitions.js ├── templates │ ├── components │ │ ├── .gitkeep │ │ ├── mat-select.hbs │ │ └── core-transition.hbs │ ├── core-transition.hbs │ ├── index.hbs │ ├── application.hbs │ ├── transitions.hbs │ └── toolbar.hbs ├── router.js ├── app.js ├── index.html ├── styles │ └── app.css └── elements.html ├── vendor └── .gitkeep ├── tests ├── unit │ ├── .gitkeep │ ├── routes │ │ └── core-transition-test.js │ ├── controllers │ │ ├── application-test.js │ │ ├── transitions-test.js │ │ └── core-transition-test.js │ └── components │ │ ├── mat-select-test.js │ │ └── core-transition-test.js ├── test-helper.js ├── helpers │ ├── resolver.js │ └── start-app.js ├── .jshintrc └── index.html ├── public ├── robots.txt └── crossdomain.xml ├── .bowerrc ├── testem.json ├── .ember-cli ├── .gitignore ├── .travis.yml ├── .jshintrc ├── .editorconfig ├── bower.json ├── Brocfile.js ├── package.json ├── config └── environment.js └── README.md /app/views/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/helpers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/models/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/routes/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/unit/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/controllers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/templates/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/templates/components/mat-select.hbs: -------------------------------------------------------------------------------- 1 | {{yield}} 2 | -------------------------------------------------------------------------------- /app/templates/core-transition.hbs: -------------------------------------------------------------------------------- 1 | {{core-transition}} 2 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # http://www.robotstxt.org 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components", 3 | "analytics": false 4 | } 5 | -------------------------------------------------------------------------------- /app/routes/core-transition.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Route.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/controllers/application.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Controller.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /app/controllers/core-transition.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Controller.extend({ 4 | }); 5 | -------------------------------------------------------------------------------- /tests/test-helper.js: -------------------------------------------------------------------------------- 1 | import resolver from './helpers/resolver'; 2 | import { 3 | setResolver 4 | } from 'ember-qunit'; 5 | 6 | setResolver(resolver); 7 | -------------------------------------------------------------------------------- /testem.json: -------------------------------------------------------------------------------- 1 | { 2 | "framework": "qunit", 3 | "test_page": "tests/index.html?hidepassed", 4 | "launch_in_ci": [ 5 | "PhantomJS" 6 | ], 7 | "launch_in_dev": [ 8 | "PhantomJS", 9 | "Chrome" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /app/templates/index.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{#link-to 'toolbar' classNames='collection-item'}}Core-Toolbar{{/link-to}} 3 | {{#link-to 'transitions' classNames='collection-item'}}Transitions{{/link-to}} 4 |
5 | 6 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false 9 | } 10 | -------------------------------------------------------------------------------- /tests/helpers/resolver.js: -------------------------------------------------------------------------------- 1 | import Resolver from 'ember/resolver'; 2 | import config from '../../config/environment'; 3 | 4 | var resolver = Resolver.create(); 5 | 6 | resolver.namespace = { 7 | modulePrefix: config.modulePrefix, 8 | podModulePrefix: config.podModulePrefix 9 | }; 10 | 11 | export default resolver; 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | /bower_components 10 | 11 | # misc 12 | /.sass-cache 13 | /connect.lock 14 | /coverage/* 15 | /libpeerconnection.log 16 | npm-debug.log 17 | testem.log 18 | -------------------------------------------------------------------------------- /app/templates/application.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Ember Cli Polymer Kitchen Sink App

4 | 5 | 6 | 7 | {{outlet}} 8 | -------------------------------------------------------------------------------- /app/router.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import config from './config/environment'; 3 | 4 | var Router = Ember.Router.extend({ 5 | location: config.locationType 6 | }); 7 | 8 | Router.map(function() { 9 | this.route('toolbar'); 10 | this.route('transitions'); 11 | this.route('core-transition'); 12 | }); 13 | 14 | export default Router; 15 | -------------------------------------------------------------------------------- /app/components/mat-select.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | var $ = Ember.$; 3 | 4 | export default Ember.Component.extend({ 5 | tagName: 'select', 6 | didInsertElement(){ 7 | $(document).ready(function(){ 8 | $('select').material_select(); 9 | }); 10 | }, 11 | change(){ 12 | this.sendAction('changeAnimation'); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | - "0.12" 5 | 6 | sudo: false 7 | 8 | cache: 9 | directories: 10 | - node_modules 11 | 12 | before_install: 13 | - "npm config set spin false" 14 | - "npm install -g npm@^2" 15 | 16 | install: 17 | - npm install -g bower 18 | - npm install 19 | - bower install 20 | 21 | script: 22 | - npm test 23 | -------------------------------------------------------------------------------- /tests/unit/routes/core-transition-test.js: -------------------------------------------------------------------------------- 1 | import { 2 | moduleFor, 3 | test 4 | } from 'ember-qunit'; 5 | 6 | moduleFor('route:core-transition', { 7 | // Specify the other units that are required for this test. 8 | // needs: ['controller:foo'] 9 | }); 10 | 11 | test('it exists', function(assert) { 12 | var route = this.subject(); 13 | assert.ok(route); 14 | }); 15 | -------------------------------------------------------------------------------- /tests/unit/controllers/application-test.js: -------------------------------------------------------------------------------- 1 | import { 2 | moduleFor, 3 | test 4 | } from 'ember-qunit'; 5 | 6 | moduleFor('controller:application', { 7 | // Specify the other units that are required for this test. 8 | // needs: ['controller:foo'] 9 | }); 10 | 11 | // Replace this with your real tests. 12 | test('it exists', function(assert) { 13 | var controller = this.subject(); 14 | assert.ok(controller); 15 | }); 16 | -------------------------------------------------------------------------------- /tests/unit/controllers/transitions-test.js: -------------------------------------------------------------------------------- 1 | import { 2 | moduleFor, 3 | test 4 | } from 'ember-qunit'; 5 | 6 | moduleFor('controller:transitions', { 7 | // Specify the other units that are required for this test. 8 | // needs: ['controller:foo'] 9 | }); 10 | 11 | // Replace this with your real tests. 12 | test('it exists', function(assert) { 13 | var controller = this.subject(); 14 | assert.ok(controller); 15 | }); 16 | -------------------------------------------------------------------------------- /tests/unit/controllers/core-transition-test.js: -------------------------------------------------------------------------------- 1 | import { 2 | moduleFor, 3 | test 4 | } from 'ember-qunit'; 5 | 6 | moduleFor('controller:core-transition', { 7 | // Specify the other units that are required for this test. 8 | // needs: ['controller:foo'] 9 | }); 10 | 11 | // Replace this with your real tests. 12 | test('it exists', function(assert) { 13 | var controller = this.subject(); 14 | assert.ok(controller); 15 | }); 16 | -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import Resolver from 'ember/resolver'; 3 | import loadInitializers from 'ember/load-initializers'; 4 | import config from './config/environment'; 5 | 6 | Ember.MODEL_FACTORY_INJECTIONS = true; 7 | 8 | var App = Ember.Application.extend({ 9 | modulePrefix: config.modulePrefix, 10 | podModulePrefix: config.podModulePrefix, 11 | Resolver: Resolver 12 | }); 13 | 14 | loadInitializers(App, config.modulePrefix); 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /tests/unit/components/mat-select-test.js: -------------------------------------------------------------------------------- 1 | import { 2 | moduleForComponent, 3 | test 4 | } from 'ember-qunit'; 5 | 6 | moduleForComponent('mat-select', { 7 | // specify the other units that are required for this test 8 | // needs: ['component:foo', 'helper:bar'] 9 | }); 10 | 11 | test('it renders', function(assert) { 12 | assert.expect(2); 13 | 14 | // creates the component instance 15 | var component = this.subject(); 16 | assert.equal(component._state, 'preRender'); 17 | 18 | // renders the component to the page 19 | this.render(); 20 | assert.equal(component._state, 'inDOM'); 21 | }); 22 | -------------------------------------------------------------------------------- /tests/unit/components/core-transition-test.js: -------------------------------------------------------------------------------- 1 | import { 2 | moduleForComponent, 3 | test 4 | } from 'ember-qunit'; 5 | 6 | moduleForComponent('core-transition', { 7 | // specify the other units that are required for this test 8 | // needs: ['component:foo', 'helper:bar'] 9 | }); 10 | 11 | test('it renders', function(assert) { 12 | assert.expect(2); 13 | 14 | // creates the component instance 15 | var component = this.subject(); 16 | assert.equal(component._state, 'preRender'); 17 | 18 | // renders the component to the page 19 | this.render(); 20 | assert.equal(component._state, 'inDOM'); 21 | }); 22 | -------------------------------------------------------------------------------- /tests/helpers/start-app.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import Application from '../../app'; 3 | import Router from '../../router'; 4 | import config from '../../config/environment'; 5 | 6 | export default function startApp(attrs) { 7 | var application; 8 | 9 | var attributes = Ember.merge({}, config.APP); 10 | attributes = Ember.merge(attributes, attrs); // use defaults, but you can override; 11 | 12 | Ember.run(function() { 13 | application = Application.create(attributes); 14 | application.setupForTesting(); 15 | application.injectTestHelpers(); 16 | }); 17 | 18 | return application; 19 | } 20 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document", 4 | "window", 5 | "-Promise" 6 | ], 7 | "browser": true, 8 | "boss": true, 9 | "curly": true, 10 | "debug": false, 11 | "devel": true, 12 | "eqeqeq": true, 13 | "evil": true, 14 | "forin": false, 15 | "immed": false, 16 | "laxbreak": false, 17 | "newcap": true, 18 | "noarg": true, 19 | "noempty": false, 20 | "nonew": false, 21 | "nomen": false, 22 | "onevar": false, 23 | "plusplus": false, 24 | "regexp": false, 25 | "undef": true, 26 | "sub": true, 27 | "strict": false, 28 | "white": false, 29 | "eqnull": true, 30 | "esnext": true, 31 | "unused": true 32 | } 33 | -------------------------------------------------------------------------------- /public/crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /app/templates/components/core-transition.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | indent_style = space 14 | indent_size = 2 15 | 16 | [*.js] 17 | indent_style = space 18 | indent_size = 2 19 | 20 | [*.hbs] 21 | insert_final_newline = false 22 | indent_style = space 23 | indent_size = 2 24 | 25 | [*.css] 26 | indent_style = space 27 | indent_size = 2 28 | 29 | [*.html] 30 | indent_style = space 31 | indent_size = 2 32 | 33 | [*.{diff,md}] 34 | trim_trailing_whitespace = false 35 | -------------------------------------------------------------------------------- /app/controllers/transitions.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Controller.extend({ 4 | up: true, 5 | max: 4, 6 | actions: { 7 | changeAnimation() { 8 | var s = document.querySelector('select'); 9 | document.querySelector('core-animated-pages').transitions = s.options[s.selectedIndex].value; 10 | }, 11 | switchPanes(){ 12 | var animatedPages = document.querySelector('core-animated-pages'); 13 | if (this.up && animatedPages.selected === this.max || !this.up && animatedPages.selected === 0) { 14 | this.up = !this.up; 15 | } 16 | if (this.up) { 17 | animatedPages.selected += 1; 18 | } else { 19 | animatedPages.selected -= 1; 20 | } 21 | } 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-polymer", 3 | "dependencies": { 4 | "jquery": "2.1.3", 5 | "ember": "1.10.0", 6 | "ember-data": "1.0.0-beta.16", 7 | "ember-resolver": "~0.1.14", 8 | "loader.js": "ember-cli/loader.js#3.2.0", 9 | "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", 10 | "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", 11 | "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2", 12 | "ember-qunit": "0.2.8", 13 | "ember-qunit-notifications": "0.0.7", 14 | "qunit": "~1.17.1", 15 | "polymer": "Polymer/polymer#~0.5.1", 16 | "core-elements": "Polymer/core-elements#~0.5.1", 17 | "paper-elements": "Polymer/paper-elements#~0.5.1", 18 | "materialize": "~0.95.3" 19 | }, 20 | "resolutions": { 21 | "jquery": ">= 1.7.0 < 2.2.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EmberCliPolymer 7 | 8 | 9 | 10 | {{content-for 'head'}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{content-for 'head-footer'}} 18 | 19 | 20 | {{content-for 'body'}} 21 | 22 | 23 | 24 | 25 | {{content-for 'body-footer'}} 26 | 27 | 28 | -------------------------------------------------------------------------------- /tests/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document", 4 | "window", 5 | "location", 6 | "setTimeout", 7 | "$", 8 | "-Promise", 9 | "define", 10 | "console", 11 | "visit", 12 | "exists", 13 | "fillIn", 14 | "click", 15 | "keyEvent", 16 | "triggerEvent", 17 | "find", 18 | "findWithAssert", 19 | "wait", 20 | "DS", 21 | "andThen", 22 | "currentURL", 23 | "currentPath", 24 | "currentRouteName" 25 | ], 26 | "node": false, 27 | "browser": false, 28 | "boss": true, 29 | "curly": false, 30 | "debug": false, 31 | "devel": false, 32 | "eqeqeq": true, 33 | "evil": true, 34 | "forin": false, 35 | "immed": false, 36 | "laxbreak": false, 37 | "newcap": true, 38 | "noarg": true, 39 | "noempty": false, 40 | "nonew": false, 41 | "nomen": false, 42 | "onevar": false, 43 | "plusplus": false, 44 | "regexp": false, 45 | "undef": true, 46 | "sub": true, 47 | "strict": false, 48 | "white": false, 49 | "eqnull": true, 50 | "esnext": true 51 | } 52 | -------------------------------------------------------------------------------- /Brocfile.js: -------------------------------------------------------------------------------- 1 | var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 2 | var pickFiles = require('broccoli-static-compiler'); 3 | var mergeTrees = require('broccoli-merge-trees'); 4 | var vulcanize = require('broccoli-vulcanize'); 5 | 6 | var app = new EmberApp(); 7 | 8 | app.import('bower_components/materialize/bin/materialize.js'); 9 | app.import('bower_components/materialize/bin/materialize.css'); 10 | 11 | var polymerVulcanize = vulcanize('app', { 12 | input: 'elements.html', 13 | output: 'assets/vulcanized.html', 14 | csp: true, 15 | inline: true, 16 | strip: false, 17 | excludes: { 18 | imports: ["(^data:)|(^http[s]?:)|(^\/)"], 19 | scripts: ["(^data:)|(^http[s]?:)|(^\/)"], 20 | styles: ["(^data:)|(^http[s]?:)|(^\/)"] 21 | } 22 | }); 23 | 24 | var polymer = pickFiles('bower_components/', { 25 | srcDir: '', 26 | files: [ 27 | 'webcomponentsjs/webcomponents.js', 28 | 'polymer/polymer.js', 29 | 'polymer/polymer.html' 30 | ], 31 | destDir: '/assets' 32 | }); 33 | 34 | module.exports = mergeTrees([ 35 | polymerVulcanize, 36 | polymer, 37 | app.toTree() 38 | ]); 39 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EmberCliPolymer Tests 7 | 8 | 9 | 10 | {{content-for 'head'}} 11 | {{content-for 'test-head'}} 12 | 13 | 14 | 15 | 16 | 17 | {{content-for 'head-footer'}} 18 | {{content-for 'test-head-footer'}} 19 | 20 | 21 | 22 | {{content-for 'body'}} 23 | {{content-for 'test-body'}} 24 | 25 | 26 | 27 | 28 | 29 | 30 | {{content-for 'body-footer'}} 31 | {{content-for 'test-body-footer'}} 32 | 33 | 34 | -------------------------------------------------------------------------------- /app/templates/transitions.hbs: -------------------------------------------------------------------------------- 1 | {{#mat-select changeAnimation='changeAnimation'}} 2 | 3 | 4 | {{/mat-select}} 5 | 6 | 7 |
8 |
9 |
orange lighten-2
10 |
11 |
12 |
13 |
14 |
orange lighten-1
15 |
16 |
17 |
18 |
19 |
orange
20 |
21 |
22 |
23 |
24 |
orange darken-1
25 |
26 |
27 |
28 |
29 |
orange darken-2
30 |
31 |
32 | 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-polymer", 3 | "version": "0.0.0", 4 | "description": "Small description for ember-cli-polymer goes here", 5 | "private": true, 6 | "directories": { 7 | "doc": "doc", 8 | "test": "tests" 9 | }, 10 | "scripts": { 11 | "start": "ember server", 12 | "build": "ember build", 13 | "test": "ember test" 14 | }, 15 | "repository": "", 16 | "engines": { 17 | "node": ">= 0.10.0" 18 | }, 19 | "author": "", 20 | "license": "MIT", 21 | "devDependencies": { 22 | "broccoli-asset-rev": "^2.0.2", 23 | "ember-cli": "0.2.1", 24 | "ember-cli-app-version": "0.3.3", 25 | "ember-cli-babel": "^4.0.0", 26 | "ember-cli-dependency-checker": "0.0.8", 27 | "ember-cli-htmlbars": "0.7.4", 28 | "ember-cli-ic-ajax": "0.1.1", 29 | "ember-cli-inject-live-reload": "^1.3.0", 30 | "ember-cli-qunit": "0.3.9", 31 | "ember-cli-uglify": "1.0.1", 32 | "ember-data": "1.0.0-beta.16", 33 | "ember-export-application-global": "^1.0.2", 34 | "broccoli-static-compiler": "^0.1.4", 35 | "broccoli-merge-trees": "^0.2.0", 36 | "broccoli-vulcanize": "^1.0.4" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | /* jshint node: true */ 2 | 3 | module.exports = function(environment) { 4 | var ENV = { 5 | modulePrefix: 'ember-cli-polymer', 6 | environment: environment, 7 | baseURL: '/', 8 | locationType: 'auto', 9 | EmberENV: { 10 | FEATURES: { 11 | // Here you can enable experimental features on an ember canary build 12 | // e.g. 'with-controller': true 13 | } 14 | }, 15 | 16 | APP: { 17 | // Here you can pass flags/options to your application instance 18 | // when it is created 19 | } 20 | }; 21 | 22 | if (environment === 'development') { 23 | // ENV.APP.LOG_RESOLVER = true; 24 | // ENV.APP.LOG_ACTIVE_GENERATION = true; 25 | // ENV.APP.LOG_TRANSITIONS = true; 26 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; 27 | // ENV.APP.LOG_VIEW_LOOKUPS = true; 28 | } 29 | 30 | if (environment === 'test') { 31 | // Testem prefers this... 32 | ENV.baseURL = '/'; 33 | ENV.locationType = 'none'; 34 | 35 | // keep test console output quieter 36 | ENV.APP.LOG_ACTIVE_GENERATION = false; 37 | ENV.APP.LOG_VIEW_LOOKUPS = false; 38 | 39 | ENV.APP.rootElement = '#ember-testing'; 40 | } 41 | 42 | if (environment === 'production') { 43 | 44 | } 45 | 46 | return ENV; 47 | }; 48 | -------------------------------------------------------------------------------- /app/styles/app.css: -------------------------------------------------------------------------------- 1 | core-toolbar{ 2 | background-color: #42a5f5; 3 | color: black; 4 | } 5 | .dark-theme{ 6 | background-color: #0d47a1; 7 | color: white; 8 | } 9 | #hero1 { 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | width: 300px; 14 | height: 300px; 15 | background-color: orange; 16 | } 17 | #hero2 { 18 | position: absolute; 19 | top: 200px; 20 | left: 300px; 21 | width: 300px; 22 | height: 300px; 23 | background-color: orange; 24 | } 25 | #bottom1, #bottom2 { 26 | position: absolute; 27 | bottom: 0; 28 | top: 0; 29 | left: 0; 30 | height: 50px; 31 | } 32 | #bottom1 { 33 | background-color: blue; 34 | } 35 | #bottom2 { 36 | background-color: green; 37 | } 38 | .title{ 39 | text-align: center; 40 | } 41 | .example-toolbar{ 42 | margin-top: 10px; 43 | } 44 | 45 | core-animated-pages { 46 | position: absolute; 47 | top: 250px; 48 | right: 0; 49 | bottom: 0; 50 | left: 0; 51 | font-size: 72px; 52 | overflow: hidden; 53 | } 54 | .select-wrapper{ 55 | margin-top: 1px; 56 | } 57 | .select-wrapper input{ 58 | height: 60px !important; 59 | margin-left: 100px; 60 | } 61 | section > div { 62 | height: 100%; 63 | color: white; 64 | } 65 | 66 | #animate-me { 67 | background-color: lime; 68 | position: fixed; 69 | top: 300px; 70 | width: 100%; 71 | height: 100%; 72 | } 73 | -------------------------------------------------------------------------------- /app/components/core-transition.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Component.extend({ 4 | meta: null, 5 | transition: null, 6 | currentState: null, 7 | 8 | init: function() { 9 | this._super(); 10 | this.currentState = { opened: false }; 11 | }, 12 | 13 | didInsertElement: function() { 14 | var component = this; 15 | 16 | document.addEventListener('polymer-ready', function() { 17 | // initial setup 18 | component.setup(); 19 | document.getElementById('animate-me').removeAttribute('hidden'); 20 | }); 21 | }, 22 | 23 | setup: function() { 24 | var target = document.getElementById('animate-me'); 25 | 26 | if (this.transition) { 27 | this.transition.teardown(target); 28 | } 29 | 30 | var value = document.getElementById('sel').selectedOptions[0].value; 31 | this.transition = this.getMeta().byId(value); 32 | this.transition.setup(target); 33 | }, 34 | 35 | getMeta: function() { 36 | if (!this.meta) { 37 | this.meta = document.createElement('core-meta'); 38 | this.meta.type = 'transition'; 39 | } 40 | return this.meta; 41 | }, 42 | 43 | actions: { 44 | stuff: function() { 45 | var target = document.getElementById('animate-me'); 46 | this.currentState.opened = !this.currentState.opened; 47 | this.transition.go(target, this.currentState); 48 | }, 49 | changeAnimation: function() { 50 | this.setup(); 51 | }, 52 | } 53 | }); 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ember-cli-polymer-kitchen-sink 2 | 3 | The basic goal of this project is to get all the core elements of google polymer playing nice with ember-cli. A full list of core elements can be found at https://www.polymer-project.org/0.5/docs/elements/ 4 | 5 | Also you can see what elements are installed into the project by viewing the elements.html file in the app directory. 6 | https://github.com/poetic/ember-cli-polymer-kitchen-sink/blob/master/app/elements.html 7 | 8 | ## Prerequisites 9 | 10 | You will need the following things properly installed on your computer. 11 | 12 | * [Git](http://git-scm.com/) 13 | * [Node.js](http://nodejs.org/) (with NPM) 14 | * [Bower](http://bower.io/) 15 | * [Ember CLI](http://www.ember-cli.com/) 16 | * [PhantomJS](http://phantomjs.org/) 17 | 18 | ## Installation 19 | 20 | * `git clone ` this repository 21 | * change into the new directory 22 | * `npm install` 23 | * `bower install` 24 | 25 | ## Running / Development 26 | 27 | * `ember server` 28 | * Visit your app at [http://localhost:4200](http://localhost:4200). 29 | 30 | ### Code Generators 31 | 32 | Make use of the many generators for code, try `ember help generate` for more details 33 | 34 | ### Running Tests 35 | 36 | * `ember test` 37 | * `ember test --server` 38 | 39 | ### Building 40 | 41 | * `ember build` (development) 42 | * `ember build --environment production` (production) 43 | 44 | ### Deploying 45 | 46 | Specify what it takes to deploy your app. 47 | 48 | ## Further Reading / Useful Links 49 | 50 | * [ember.js](http://emberjs.com/) 51 | * [ember-cli](http://www.ember-cli.com/) 52 | * Development Browser Extensions 53 | * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi) 54 | * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/) 55 | 56 | -------------------------------------------------------------------------------- /app/elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /app/templates/toolbar.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | Toolbar 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | Toolbar: dark-theme 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | Toolbar: tall 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 32 | Toolbar: tall with elements pin to the bottom 33 | 34 | 35 | 36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | Toolbar: medium-tall with label aligns to the bottom 45 | 46 | 47 |
48 | 49 | 50 | 51 |
52 | 53 | 54 |
label aligns to the middle
55 |
some stuffs align to the bottom
56 | 57 | 58 |
59 | 60 | 61 | 62 |
63 | 64 | 65 |
element (e.g. progress) fits at the bottom of the toolbar
66 |
67 | 68 | --------------------------------------------------------------------------------