Moving Polymer out of labs

labs/architecture-examples/polymer/app/app.css → architecture-examples/polymer/app/app.css

@@ -9,7 +9,7 @@ body {
 body {
 	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	line-height: 1.4em;
-	background: #eaeaea url('../components/todomvc-common/bg.png');
+	background: #eaeaea url('../bower_components/todomvc-common/bg.png');
 	color: #4d4d4d;
 	width: 550px;
 	margin: 0 auto;

architecture-examples/polymer/bower.json

@@ -0,0 +1,9 @@
+{
+  "name": "todomvc-polymer",
+  "version": "0.0.0",
+  "dependencies": {
+    "todomvc-common": "~0.1.4",
+    "director": "*",
+    "polymer": "*"
+  }
+}

labs/architecture-examples/polymer/elements/td-item.html → architecture-examples/polymer/elements/td-item.html

@@ -1,9 +1,9 @@
 <element name="td-item" extends="li" attributes="item editing" on-blur="commitAction">
 	<link rel="stylesheet" href="td-item.css">
 	<template>
-		<div class="view {{completed: item.completed; editing: editing}}" hidden?="{{editing}}" on-dblclick="editAction">
+		<div class="view {{completed: item.completed; editing: editing}}" hidden?="{{editing}}">
 			<input type="checkbox" class="toggle" checked="{{item.completed}}" on-click="itemChangeAction">
-			<label>{{item.title}}</label>
+			<label on-dblclick="editAction">{{item.title}}</label>
 			<button class="destroy" on-click="destroyAction"></button>
 		</div>
 		<input id="edit" class="edit" value="{{title}}" hidden?="{{!editing}}" on-keyup="keyAction">
@@ -13,7 +13,7 @@
 		var ESC_KEY = 27;
 		Polymer.register(this, {
 			editing: false,
-			keyAction: function(e) {
+			keyAction: function (e) {
 				switch (e.keyCode) {
 					case ESC_KEY:
 						this.cancelAction();
@@ -23,16 +23,16 @@
 						break;
 				}
 			},
-			editAction: function() {
+			editAction: function () {
 				this.editing = true;
 				this.title = this.item.title;
 				// schedule focus for the end of microtask, when the input will be visible
 				Platform.flush();
-				this.asyncMethod(function() {
+				this.asyncMethod(function () {
 					this.$.edit.focus();
 				});
 			},
-			commitAction: function() {
+			commitAction: function () {
 				if (this.editing) {
 					this.editing = false;
 					this.item.title = this.title.trim();
@@ -41,13 +41,13 @@
 					}
 				}
 			},
-			cancelAction: function() {
+			cancelAction: function () {
 				this.editing = false;
 			},
-			itemChangeAction: function() {
+			itemChangeAction: function () {
 				this.fire('td-item-changed');
 			},
-			destroyAction: function() {
+			destroyAction: function () {
 				this.fire('td-destroy-item', this.item);
 			}
 		});

labs/architecture-examples/polymer/elements/td-model.html → architecture-examples/polymer/elements/td-model.html

@@ -5,58 +5,56 @@
 			completedCount: 0,
 			activeCount: 0,
 			allCompleted: false,
-			ready: function() {
-				this.asyncMethod(function() {
+			ready: function () {
+				this.asyncMethod(function () {
 					this.items = this.items || [];
 				});
 			},
-			filterChanged: function() {
+			filterChanged: function () {
 				this.filterItems();
 			},
-			itemsChanged: function() {
-				this.completedCount =
-					this.items.filter(this.filters.completed).length;
+			itemsChanged: function () {
+				this.completedCount = this.items.filter(this.filters.completed).length;
 				this.activeCount = this.items.length - this.completedCount;
 				this.allCompleted = this.completedCount && !this.activeCount;
 				this.filterItems();
 				this.fire('td-model-changed');
 			},
-			filterItems: function() {
+			filterItems: function () {
 				var fn = this.filters[this.filter];
 				this.filtered = fn ? this.items.filter(fn) : this.items;
 			},
-			newItem: function(title) {
+			newItem: function (title) {
 				title = String(title).trim();
 				if (title) {
-					var item = {
+					this.items.push({
 						title: title,
 						completed: false
-					};
-					this.items.push(item);
+					});
 					this.itemsChanged();
 				}
 			},
-			destroyItem: function(item) {
+			destroyItem: function (item) {
 				var i = this.items.indexOf(item);
 				if (i >= 0) {
 					this.items.splice(i, 1);
 				}
 				this.itemsChanged();
 			},
-			clearItems: function(){
+			clearItems: function () {
 				this.items = this.items.filter(this.filters.active);
 			},
-			setItemsCompleted: function(completed) {
-				this.items.forEach(function(item) {
+			setItemsCompleted: function (completed) {
+				this.items.forEach(function (item) {
 					item.completed = completed;
 				});
 				this.itemsChanged();
 			},
 			filters: {
-				active: function(item) {
+				active: function (item) {
 					return !item.completed;
 				},
-				completed: function(item) {
+				completed: function (item) {
 					return item.completed;
 				}
 			}

labs/architecture-examples/polymer/elements/td-todos.html → architecture-examples/polymer/elements/td-todos.html

@@ -45,30 +45,30 @@
 		var ENTER_KEY = 13;
 		var ESC_KEY = 27;
 		Polymer.register(this, {
-			keyAction: function(e, detail, sender) {
+			keyAction: function (e, detail, sender) {
 				switch (e.keyCode) {
 					case ENTER_KEY:
 						this.$.model.newItem(sender.value);
 						// when polyfilling Object.observe, make sure we update immediately
 						Platform.flush();
-					case ESC_KEY: 
+					case ESC_KEY:
 						sender.value = '';
 						break;
 				}
 			},
-			modelChangedAction: function() {
+ 			modelChangedAction: function () {
 				this.$.storage.save();
 			},
-			itemChangedAction: function() {
+			itemChangedAction: function () {
 				this.$.model.itemsChanged();
 			},
-			destroyItemAction: function(e, detail) {
+			destroyItemAction: function (e, detail) {
 				this.$.model.destroyItem(detail);
 			},
-			toggleAllCompletedAction: function(e, detail, sender) {
+			toggleAllCompletedAction: function (e, detail, sender) {
 				this.$.model.setItemsCompleted(sender.checked);
 			},
-			clearCompletedAction: function() {
+			clearCompletedAction: function () {
 				this.$.model.clearItems();
 			}
 		});

architecture-examples/polymer/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en" data-framework="polymer">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>Polymer • TodoMVC</title>
+		<link rel="stylesheet" href="app/app.css">
+	</head>
+	<body>
+		<section>
+			<header>
+				<h1>todos</h1>
+			</header>
+			<td-todos></td-todos>
+			<footer id="info">
+				<p>Double-click to edit a todo</p>
+				<p>Created by <a href="http://www.polymer-project.org">The Polymer Authors</a></p>
+				<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+			</footer>
+		</section>
+
+		<script src="bower_components/todomvc-common/base.js"></script>
+		<script src="bower_components/polymer/polymer.js"></script>
+		<link rel="import" href="elements/td-todos.html">
+	</body>
+</html>

labs/architecture-examples/polymer/lib-elements/flatiron-director.html → architecture-examples/polymer/lib-elements/flatiron-director.html

@@ -1,13 +1,13 @@
-<script src="../components/director/build/director.min.js"></script>
+<script src="../bower_components/director/build/director.min.js"></script>
 <element name="flatiron-director" attributes="route">
 	<script>
 		var private_router;
 		Polymer.register(this, {
-			ready: function() {
-				this.router.on(/(\w*)/, function(route) {
+			ready: function () {
+				this.router.on(/(\w*)/, function (route) {
 					this.route = route;
 				}.bind(this));
-				this.asyncMethod(function() {
+				this.asyncMethod(function () {
 					var initialRoute = this.router.getRoute(0);
 					this.route = initialRoute || '';
 				});
@@ -19,7 +19,7 @@
 				}
 				return private_router;
 			},
-			routeChanged: function() {
+			routeChanged: function () {
 				this.fire('route', this.route);
 			}
 		});

labs/architecture-examples/polymer/lib-elements/polymer-localstorage.html → architecture-examples/polymer/lib-elements/polymer-localstorage.html

@@ -21,23 +21,23 @@
 	<script>
 		Polymer.register(this, {
 			isJson: true,
-			ready: function() {
+			ready: function () {
 				this.load();
 			},
-			valueChanged: function() {
+			valueChanged: function () {
 				this.save();
 			},
-			load: function() {
+			load: function () {
 				var s = window.localStorage.getItem(this.name);
 				if (s && this.isJson) {
 					this.value = JSON.parse(s);
 				} else {
 					this.value = s;
 				}
 			},
-			save: function() {
-				window.localStorage.setItem(this.name, 
-					this.isJson ? JSON.stringify(this.value) : this.value);
+			save: function () {
+				var item = this.isJson ? JSON.stringify(this.value) : this.value;
+				window.localStorage.setItem(this.name, item);
 			}
 		});
 	</script>

labs/architecture-examples/polymer/lib-elements/polymer-selection.html → architecture-examples/polymer/lib-elements/polymer-selection.html

@@ -21,42 +21,43 @@
 	<script>
 		Polymer.register(this, {
 			multi: false,
-			ready: function() {
+			ready: function () {
 				this.clear();
 			},
-			clear: function() {
+			clear: function () {
 				this.selection = [];
 			},
-			getSelection: function() {
+			getSelection: function () {
 				return this.multi ? this.selection : this.selection[0];
 			},
-			isSelected: function(inItem) {
+			isSelected: function (inItem) {
 				return this.selection.indexOf(inItem) >= 0;
 			},
-			setItemSelected: function(inItem, inIsSelected) {
+			setItemSelected: function (inItem, inIsSelected) {
+				var i;
 				if (inItem) {
 					if (inIsSelected) {
 						this.selection.push(inItem);
 					} else {
-						var i = this.selection.indexOf(inItem);
+						i = this.selection.indexOf(inItem);
 						if (i >= 0) {
 							this.selection.splice(i, 1);
 						}
 					}
 					// TODO(sjmiles): consider replacing with summary
 					// notifications (asynchronous job)
-					this.asend("select", {isSelected: inIsSelected, item: inItem});
+					this.asend("select", { isSelected: inIsSelected, item: inItem });
 				}
 			},
-			select: function(inItem) {
+			select: function (inItem) {
 				if (this.multi) {
 					this.toggle(inItem);
 				} else if (this.getSelection() !== inItem) {
 					this.setItemSelected(this.getSelection(), false);
 					this.setItemSelected(inItem, true);
 				}
 			},
-			toggle: function(inItem) {
+			toggle: function (inItem) {
 				this.setItemSelected(inItem, !this.isSelected(inItem));
 			}
 		});