Feedback

examples/polymer/README.md

@@ -2,34 +2,33 @@
 
 > Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.
 
-> _[Polymer - www.polymer-project.org](http://www.polymer-project.org/)_
+> _[Polymer - www.polymer-project.org](https://www.polymer-project.org/)_
 
 ## Learning Polymer
 
-The [Polymer website](http://www.polymer-project.org) is a great resource for getting started.
+The [Polymer website](https://www.polymer-project.org) is a great resource for getting started.
 
 Here are some links you may find helpful:
 
-* [Getting Started](http://www.polymer-project.org/docs/start/everything.html)
-* [FAQ](http://www.polymer-project.org/resources/faq.html)
-* [Browser Compatibility](http://www.polymer-project.org/resources/compatibility.html)
+* [Getting Started](https://www.polymer-project.org/1.0/docs/start/getting-the-code.html)
+* [FAQ](https://www.polymer-project.org/0.5/resources/faq.html) (old)
+* [Browser Compatibility](https://www.polymer-project.org/1.0/resources/compatibility.html)
 
 Get help from Polymer devs and users:
 
-* Find us on IRC on __#polymer__ at freenode.
+* Find us Slack - polymer.slack.com
 * Join the high-traffic [polymer-dev](https://groups.google.com/forum/?fromgroups=#!forum/polymer-dev) Google group or the announcement-only [polymer-announce](https://groups.google.com/forum/?fromgroups=#!forum/polymer-announce) Google group.
 
 ## Implementation
 
 The Polymer implementation of TodoMVC has a few key differences with other implementations:
 
-* Since [Web Components](http://w3c.github.io/webcomponents/explainer/) allow you to create new types of DOM elements, the DOM tree is very different from other implementations.
-* The template, styling, and behavior are fully encapsulated in each custom element. Instead of having an overall stylesheet (`base.css` or `app.css`), each element that needs styling has its own stylesheet.
-* Non-visual elements such as the router and the model are also implemented as custom elements and appear in the DOM. Implementing them as custom elements instead of plain objects allows you to take advantage of Polymer data binding and event handling throughout the app.
+* [Web Components](http://w3c.github.io/webcomponents/explainer/) allow you to create new HTML elements that are reusable, composable, and encapsulated.
+* Non-visual elements such as the router and the model are also implemented as custom elements and appear in the DOM. Implementing them as custom elements instead of plain objects allows you to take advantage of Polymer's data binding and event handling throughout the app.
 
 ## Compatibility
 
-Polymer and its polyfills are intended to work in the latest version of [evergreen browsers](http://tomdale.net/2013/05/evergreen-browsers/). IE9 is not supported. Please refer to [Browser Compatibility](http://www.polymer-project.org/resources/compatibility.html) for more details.
+Polymer and the web component polyfills are intended to work in the latest version of [evergreen browsers](http://tomdale.net/2013/05/evergreen-browsers/). IE9 is not supported. Please refer to [Browser Compatibility](https://www.polymer-project.org/1.0/resources/compatibility.html) for more details.
 
 ## Running this sample
 
@@ -42,3 +41,11 @@ Polymer and its polyfills are intended to work in the latest version of [evergre
      `python -m SimpleHTTPServer`
 
 1. Browse to the server root
+
+## Making updates
+
+If you want to make a change to any of the elements in elements/elements.html, you'll need to install `polybuild` (Polymer's build tool) and re-vulcanize elements.build.html.
+
+1. Run `npm install`
+1. Make a change
+2. Run `npm run build`

examples/polymer/elements/elements.build.html

@@ -36,7 +36,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 	</dom-module>
 <dom-module id="td-todos" assetpath="/">
 	<template>
-	  <style>		:host {			display: block;		}	</style>
+		<style>			:host {				display: block;			}		</style>
 		<flatiron-director route="{{route}}" hidden=""></flatiron-director>
 		<section id="todoapp">
 			<header id="header">
@@ -56,8 +56,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 				<footer id="footer">
 					<span id="todo-count">
-					  <strong>{{activeCount}}</strong>
-					  <span>{{_computeItemsLeft(activeCount)}}</span> left
+						<strong>{{activeCount}}</strong>
+						<span>{{_computeItemsLeft(activeCount)}}</span> left
 					</span>
 
 					<iron-selector id="filters" selected="{{route}}" attr-for-selected="route">

examples/polymer/elements/td-input.html

 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <script>
-(function() {
+(function () {
 	'use strict';
 
 	var ENTER_KEY = 13;

examples/polymer/elements/td-item.html

@@ -20,7 +20,7 @@
 		</template>
 	</template>
 	<script>
-		(function() {
+		(function () {
 			'use strict';
 
 			Polymer({
@@ -35,7 +35,7 @@
 					},
 					item: {
 						type: Object,
-						value: function() { return {}; }
+						value: function () { return {}; }
 					},
 				},
 
@@ -48,21 +48,21 @@
 					this.toggleClass('editing', editing);
 				},
 
-				_onBlur: function() {
+				_onBlur: function () {
 					this._commitAction();
 					this.editing = false;
 				},
 
-				_editAction: function() {
+				_editAction: function () {
 					this.editing = true;
 					this._editingValue = this.item.title;
 					// Wait one tick template to stamp.
-					this.async(function() {
+					this.async(function () {
 						this.querySelector('#edit').focus();
 					});
 				},
 
-				_commitAction: function() {
+				_commitAction: function () {
 					if (this.editing) {
 						this.editing = false;
 						this.set('item.title', this._editingValue.trim());
@@ -72,11 +72,11 @@
 					}
 				},
 
-				_cancelAction: function() {
+				_cancelAction: function () {
 					this.editing = false;
 				},
 
-				_destroyAction: function() {
+				_destroyAction: function () {
 					this.fire('td-destroy-item', this.item);
 				}
 			});

examples/polymer/elements/td-model.html

@@ -7,7 +7,7 @@
 				on-iron-localstorage-load-empty="_initializeDefaultTodos"></iron-localstorage>
 	</template>
 	<script>
-		(function() {
+		(function () {
 			'use strict';
 
 			Polymer({
@@ -27,7 +27,7 @@
 					}
 				},
 
-				_initializeDefaultTodos: function() {
+				_initializeDefaultTodos: function () {
 					this.items = [];
 				},
 
@@ -41,11 +41,11 @@
 					this.push('items', {title: title, completed: false});
 				},
 
-				getCompletedCount: function() {
+				getCompletedCount: function () {
 					return this.items ? this.items.filter(this.filters.completed).length : 0;
 				},
 
-				getActiveCount: function() {
+				getActiveCount: function () {
 					return this.items.length - this.getCompletedCount(this.items);
 				},
 
@@ -61,12 +61,12 @@
 					}
 				},
 
-				clearCompletedItems: function() {
+				clearCompletedItems: function () {
 					this.items = this.items.filter(this.filters.active);
 				},
 
 				setItemsCompleted: function(completed) {
-          for (var i = 0; i < this.items.length; ++i) {
+					for (var i = 0; i < this.items.length; ++i) {
 						this.set(['items', i, 'completed'], completed);
 					}
 				},

examples/polymer/elements/td-todos.html

@@ -6,28 +6,28 @@
 
 <dom-module id="td-todos">
 	<template>
-	  <style>
-		  :host {
-		  	display: block;
-		  }
-	  </style>
+		<style>
+			:host {
+				display: block;
+			}
+		</style>
 		<flatiron-director route="{{route}}" hidden></flatiron-director>
 		<section id="todoapp">
 			<header id="header">
 				<input is="td-input" id="new-todo"
-				       placeholder="What needs to be done?" autofocus
-				       on-td-input-commit="addTodoAction"
-				       on-td-input-cancel="cancelAddTodoAction">
+							 placeholder="What needs to be done?" autofocus
+							 on-td-input-commit="addTodoAction"
+							 on-td-input-cancel="cancelAddTodoAction">
 			</header>
 
 			<template is="dom-if" if="{{items.length}}">
 				<section id="main">
 					<input id="toggle-all" type="checkbox" checked="[[allCompleted]]"
-					       on-change="toggleAllCompletedAction">
+								 on-change="toggleAllCompletedAction">
 					<label for="toggle-all">Mark all as complete</label>
 					<ul id="todo-list" on-td-destroy-item="destroyItemAction">
 						<template id="todo-list-repeater" is="dom-repeat" items="{{items}}"
-						          filter="{{matchesFilter(route)}}" observe="completed">
+											filter="{{matchesFilter(route)}}" observe="completed">
 							<li is="td-item" item="{{item}}"></li>
 						</template>
 					</ul>
@@ -35,8 +35,8 @@
 
 				<footer id="footer">
 					<span id="todo-count">
-					  <strong>{{activeCount}}</strong>
-					  <span>{{_computeItemsLeft(activeCount)}}</span> left
+						<strong>{{activeCount}}</strong>
+						<span>{{_computeItemsLeft(activeCount)}}</span> left
 					</span>
 
 					<iron-selector id="filters" selected="{{route}}" attr-for-selected="route">
@@ -62,7 +62,7 @@
 		</section>
 	</template>
 	<script>
-		(function() {
+		(function () {
 			'use strict';
 
 			Polymer({
@@ -95,7 +95,7 @@
 					}
 				},
 
-				attached: function() {
+				attached: function () {
 					this.model = document.querySelector('#' + this.modelId);
 				},
 
@@ -122,15 +122,15 @@
 				matchesFilter: function(route) {
 					return function(item, index, array) {
 						return this.model ? this.model.matchesFilter(item, route) : false;
-				  }.bind(this);
+					}.bind(this);
 				},
 
-				addTodoAction: function() {
+				addTodoAction: function () {
 					this.model.newItem(this.$['new-todo'].value);
 					this.$['new-todo'].value = '';
 				},
 
-				cancelAddTodoAction: function() {
+				cancelAddTodoAction: function () {
 					this.$['new-todo'].value = '';
 				},
 
@@ -142,7 +142,7 @@
 					this.model.setItemsCompleted(e.target.checked);
 				},
 
-				clearCompletedAction: function() {
+				clearCompletedAction: function () {
 					this.model.clearCompletedItems();
 				}
 			});

examples/polymer/index.html

@@ -27,15 +27,15 @@
 		<script>
 			(function() {
 				// Feature detect and conditionally load the polyfills.
-			  var webComponentsSupported = ('registerElement' in document
-			    && 'import' in document.createElement('link')
-			    && 'content' in document.createElement('template'));
+				var webComponentsSupported = ('registerElement' in document
+					&& 'import' in document.createElement('link')
+					&& 'content' in document.createElement('template'));
 
 				if (!webComponentsSupported) {
-				  var script = document.createElement('script');
-				  script.async = true;
-				  script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
-				  document.head.appendChild(script);
+					var script = document.createElement('script');
+					script.async = true;
+					script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
+					document.head.appendChild(script);
 				}
 			})();
 		</script>

examples/polymer/package.json

 {
-  "name": "polymer-todomvc",
-  "version": "1.0.0",
-  "description": "Polymer TodoMVC demo",
-  "main": "index.html",
+  "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "postinstall": "npm run build",
+    "build": "polybuild --maximum-crush elements/elements.html"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tastejs/todomvc"
-  },
-  "keywords": [
-    "polymer",
-    "todomvc"
-  ],
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/tastejs/todomvc/issues"
-  },
-  "homepage": "https://github.com/tastejs/todomvc",
   "devDependencies": {
     "polybuild": "^1.0.5"
   }

examples/polymer/vulcanize.sh

-#!/bin/sh
-
-# vulcanize elements.html \
-#     --inline-script --inline-css --strip-comments | \
-#     crisper -h elements.build.html -j elements.build.js
-
-polybuild --maximum-crush elements/elements.html