From 6783c7b5b6894351d9e98ac2d1307de9fbcf181f Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Fri, 20 Sep 2013 17:47:38 -0700
Subject: [PATCH] wip

---
 yvonne/getting-started/components/gs-app.html | 70 +++++++++++++++++++
 .../components/gs-import-selector.html        | 47 +++++++++++++
 yvonne/getting-started/index.html             | 10 +++
 yvonne/getting-started/index.js               |  3 +
 yvonne/getting-started/lib/server.js          | 31 ++++++++
 yvonne/getting-started/package.json           |  8 +++
 6 files changed, 169 insertions(+)
 create mode 100644 yvonne/getting-started/components/gs-app.html
 create mode 100644 yvonne/getting-started/components/gs-import-selector.html
 create mode 100644 yvonne/getting-started/index.html
 create mode 100755 yvonne/getting-started/index.js
 create mode 100644 yvonne/getting-started/lib/server.js
 create mode 100644 yvonne/getting-started/package.json

diff --git a/yvonne/getting-started/components/gs-app.html b/yvonne/getting-started/components/gs-app.html
new file mode 100644
index 0000000..0715fdc
--- /dev/null
+++ b/yvonne/getting-started/components/gs-app.html
@@ -0,0 +1,70 @@
+<link href="../../../../polymer-elements/polymer-selector/polymer-selector.html" rel="import">
+<link href="../../../../polymer-ui-elements/polymer-ui-pages/polymer-ui-pages.html" rel="import">
+<link href="gs-import-selector.html" rel="import">
+<polymer-element name="gs-app" attributes="page imports selectedImportsIndex projectName projectPath">
+	<template>
+		<style>
+			polymer-ui-pages {
+				display: block;
+			}
+			polymer-selector .polymer-selected {
+				color: white;
+				background: black;
+			}
+		</style>
+		<polymer-ui-pages selected="{{page}}">
+			<section>
+				<h1>Getting Started with Polymer</h1>
+				<h2>What's the name of your project?</h2>
+				<input value="{{projectName}}">
+				<h2>Create at:</h2>
+				<input value="{{projectPath}}">/{{projectName}}
+				<button on-click="nextAction">Next!</button>
+			</section>
+			<section>
+				<gs-import-selector imports="{{imports}}"></gs-import-selector>
+				<button on-click="nextAction">Next!</button>
+			</section>
+			<section>
+				<p>
+					Project: {{projectName}} at {{projectPath}}/{{projectName}}
+				</p>
+				<p>
+					Imports:<br>
+					<template repeat="{{projectImports}}">
+						{{}}<br>
+					</template>
+				</p>
+				<button on-click="generateAction">Generate!</button>
+			</section>
+		</polymer-ui-pages>
+	</template>
+	<script>
+		Polymer('gs-app', {
+			page: 0,
+			imports: [
+				'polymer-ui-elements/polymer-ui-accordion/polymer-ui-accordion.html',
+				'polymer-ui-elements/polymer-ui-arrow/polymer-ui-arrow.html',
+				'polymer-ui-elements/polymer-ui-breadcrumbs/polymer-ui-breadcrumbs.html',
+				'polymer-ui-elements/polymer-ui-card/polymer-ui-card.html',
+				'polymer-ui-elements/polymer-ui-collapsible/polymer-ui-collapsible.html',
+			],
+			selectedImportsIndex: [],
+			projectName: '',
+			projectPath: '',
+			projectImports: [],
+			nextAction: function() {
+				this.page += 1;
+				if (this.selectedImportsIndex) {
+					this.projectImports = [];
+					for (var i = 0; i < this.selectedImportsIndex.length; i++) {
+						var idx = this.selectedImportsIndex[i];
+						this.projectImports.push(this.imports[idx]);
+					}
+				}
+			},
+			generateAction: function() {
+			}
+		});
+	</script>
+</polymer-element>
diff --git a/yvonne/getting-started/components/gs-import-selector.html b/yvonne/getting-started/components/gs-import-selector.html
new file mode 100644
index 0000000..3e1711c
--- /dev/null
+++ b/yvonne/getting-started/components/gs-import-selector.html
@@ -0,0 +1,47 @@
+<link href="../../../../polymer-elements/polymer-selector/polymer-selector.html" rel="import">
+<polymer-element name="gs-import-selector" attributes="imports selectedIndex results">
+	<template>
+		<style>
+			polymer-selector .polymer-selected {
+				color: white;
+				background: black;
+			}
+		</style>
+		<polymer-selector selected="{{selectedIndex}}" multi on-polymer-activate="activateAction">
+			<template repeat="{{imports}}">
+				<div>{{}}</div>
+			</template>
+		</polymer-selector>
+	</template>
+	<script>
+		Polymer('gs-import-selector', {
+			imports: [],
+			selectedIndex: [],
+			results: [],
+			created: function() {
+				this.selectedIndexChanged();
+			},
+			importsChanged: function() {
+				this.selectedIndex = [];
+				this.results = [];
+			},
+			selectedIndexChanged: function(old) {
+				if (old) {
+					this.observer && this.observer.close();
+				}
+				if (this.selectedIndex) {
+					this.observer = new ArrayObserver(this.selectedIndex, this.selectedIndexMutated.bind(this));
+				}
+			},
+			selectedIndexMutated: function(records) {
+				var record = records[0];
+				if (record.addedCount) {
+					this.results.push(this.imports[this.selectedIndex[record.index]]);
+				}
+				for (var i = 0; i < record.removed.length; i++) {
+					this.results.splice(this.results.indexOf(record.removed[i]));
+				}
+			}
+		});
+	</script>
+</polymer-element>
diff --git a/yvonne/getting-started/index.html b/yvonne/getting-started/index.html
new file mode 100644
index 0000000..a1e90b5
--- /dev/null
+++ b/yvonne/getting-started/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+	<link href="components/gs-app.html" rel="import">
+	<script src="polymer/polymer/polymer.js"></script>
+</head>
+<body>
+	<gs-app></gs-app>
+</body>
+</html>
diff --git a/yvonne/getting-started/index.js b/yvonne/getting-started/index.js
new file mode 100755
index 0000000..5db44dc
--- /dev/null
+++ b/yvonne/getting-started/index.js
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+var server = require('./lib/server');
diff --git a/yvonne/getting-started/lib/server.js b/yvonne/getting-started/lib/server.js
new file mode 100644
index 0000000..f7b76b4
--- /dev/null
+++ b/yvonne/getting-started/lib/server.js
@@ -0,0 +1,31 @@
+var port = 8888;
+var project_dir = __dirname + '/../';
+var root_dir = __dirname + '/../../../../';
+
+var express = require('express');
+
+var app = express();
+app.use(express.bodyParser());
+
+app.get('/', function(req, res) {
+	res.sendfile('index.html', {root: project_dir});
+});
+
+app.get('/components/*', function(req, res) {
+	res.sendfile(req.params[0], {root: project_dir + 'components/'});
+});
+
+app.get('/polymer/*', function(req, res) {
+	res.sendfile(req.params[0], {root: root_dir});
+});
+
+app.get('/polymer-elements/*', function(req, res) {
+	res.sendfile(req.params[0], {root: root_dir + 'polymer-elements/'});
+});
+
+app.get('/polymer-ui-elements/*', function(req, res) {
+	res.sendfile(req.params[0], {root: root_dir + 'polymer-ui-elements/'});
+});
+
+app.listen(port);
+console.log('Listening on port ' + port);
diff --git a/yvonne/getting-started/package.json b/yvonne/getting-started/package.json
new file mode 100644
index 0000000..569c3f5
--- /dev/null
+++ b/yvonne/getting-started/package.json
@@ -0,0 +1,8 @@
+{
+	"name": "getting-started",
+	"description": "Polymer bootstrap app",
+	"version": "0.0.1",
+	"dependencies": {
+		"express": "3.x"
+	}
+}
\ No newline at end of file