Fixes tastejs#576 - adds new Polymer TodoMVC implementation. Add entr…

…y to the homepage
passy · Jun 18, 2013 · 8959076 · 8959076
1 parent e82d6e4
commit 8959076
Show file tree

Hide file tree

Showing 96 changed files with 10,468 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -80,6 +80,9 @@ <h2>JavaScript Apps</h2>
 					<li class="routing">
 						<a href="architecture-examples/maria/" data-source="https://github.com/petermichaux/maria" data-content="An MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC. The three core design patterns of MVC (observer, composite, and strategy) are embedded in Maria's Model, View, and Controller objects. Other patterns traditionally included in MVC implementations (e.g. factory method and template) make appearances too.">Maria</a>
 					</li>
+					<li class="labs routing">
+						<a href="labs/architecture-examples/polymer/index.html" data-source="http://polymer-project.org" data-content="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. It is comprised of core platform features (e.g Shadow DOM, Custom Elements, MDV) enabled with polyfills and a next generation web application framework built on these technologies.">Polymer</a>
+					</li>
 					<li class="labs">
 						<a href="labs/architecture-examples/cujo/index.html" data-source="http://cujojs.com" data-content="cujoJS is an architectural framework for building highly modular, scalable, maintainable applications in Javascript.  It provides architectural plumbing, such as modules (AMD and CommonJS), declarative application composition, declarative connections, and aspect oriented programming.">cujoJS</a>
 					</li>

diff --git a/labs/architecture-examples/polymer/AUTHORS b/labs/architecture-examples/polymer/AUTHORS
@@ -0,0 +1,9 @@
+# Names should be added to this file with this pattern:
+#
+# For individuals:
+#   Name <email address>
+#
+# For organizations:
+#   Organization <fnmatch pattern>
+#
+Google Inc. <*@google.com>
diff --git a/labs/architecture-examples/polymer/CONTRIBUTING.md b/labs/architecture-examples/polymer/CONTRIBUTING.md
@@ -0,0 +1,63 @@
+# Contributing
+
+Want to contribute to Polymer? Great!
+
+We are more than happy to accept external contributions to the project in the form of [feedback](https://groups.google.com/forum/?fromgroups=#!forum/polymer-dev), [bug reports](../../issues), and pull requests.
+
+## Contributor License Agreement
+
+Before we can accept patches, there's a quick web form you need to fill out.
+
+- If you're contributing as and individual (e.g. you own the intellectual property), fill out [this form](http://code.google.com/legal/individual-cla-v1.0.html).
+- If you're contributing under a company, fill out [this form](http://code.google.com/legal/corporate-cla-v1.0.html) instead.
+
+This CLA asserts that contributions are owned by you and that we can license all work under our [license](LICENSE).
+
+Other projects require a similar agreement: jQuery, Firefox, Apache, Node, and many more.
+
+[More about CLAs](https://www.google.com/search?q=Contributor%20License%20Agreement)
+
+## Initial setup
+
+Here's an easy guide that should get you up and running:
+
+1. Fork the project on github and pull down your copy.
+   > replace the {{ username }} with your username and {{ repository }} with the repository name
+
+        git clone git@github.com:{{ username }}/{{ repository }}.git --recursive
+
+    Note the `--recursive`. This is necessary for submodules to initialize properly. If you don't do a recursive clone, you'll have to init them manually:
+
+        git submodule init
+        git submodule update
+
+2. Development happens on the `master` branch. Get yourself on it!
+
+        git checkout master
+
+That's it for the one time setup. Now you're ready to make a change.
+
+## Submitting a pull request
+
+We iterate fast! To avoid potential merge conflicts, it's a good idea to pull from the main project before making a change and submitting a pull request. The easiest way to do this is setup a remote called `upstream` and do a pull before working on a change:
+
+    git remote add upstream git://github.com/Polymer/{{ repository }}.git
+
+Then before making a change, do a pull from the upstream `master` branch:
+
+    git pull upstream master
+
+To make life easier, add a "pull upstream" alias in your `.gitconfig`:
+
+    [alias]
+      pu = !"git fetch origin -v; git fetch upstream -v; git merge upstream/master"
+
+That will pull in changes from your forked repo, the main (upstream) repo, and merge the two. Then it's just a matter of running `git pu` before a change and pushing to your repo:
+
+    git checkout master
+    git pu
+    # make change
+    git commit -a -m 'Awesome things.'
+    git push
+
+Lastly, don't forget to submit the pull request.
diff --git a/labs/architecture-examples/polymer/LICENSE b/labs/architecture-examples/polymer/LICENSE
@@ -0,0 +1,27 @@
+// Copyright (c) 2012 The Polymer Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/labs/architecture-examples/polymer/PATENTS b/labs/architecture-examples/polymer/PATENTS
@@ -0,0 +1,23 @@
+Additional IP Rights Grant (Patents)
+
+"This implementation" means the copyrightable works distributed by
+Google as part of the Polymer project.
+
+Google hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section)
+patent license to make, have made, use, offer to sell, sell, import,
+transfer and otherwise run, modify and propagate the contents of this
+implementation of Polymer, where such license applies only to those
+patent claims, both currently owned or controlled by Google and acquired
+in the future, licensable by Google that are necessarily infringed by
+this implementation of Polymer.  This grant does not include claims
+that would be infringed only as a consequence of further modification of
+this implementation.  If you or your agent or exclusive licensee
+institute or order or agree to the institution of patent litigation
+against any entity (including a cross-claim or counterclaim in a
+lawsuit) alleging that this implementation of Polymer or any code
+incorporated within this implementation of Polymer constitutes
+direct or contributory patent infringement, or inducement of patent
+infringement, then any patent rights granted to you under this License
+for this implementation of Polymer shall terminate as of the date
+such litigation is filed.
diff --git a/labs/architecture-examples/polymer/README.md b/labs/architecture-examples/polymer/README.md
@@ -0,0 +1,44 @@
+# Polymer TodoMVC Example
+
+> 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/)_
+
+## Learning Polymer
+
+The [Polymer website](http://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/getting-started.html)
+* [FAQ](http://www.polymer-project.org/faq.html)
+* [Browser Compatibility](http://www.polymer-project.org/compatibility.html)
+
+Get help from Polymer devs and users:
+
+* Find us on IRC on __#polymer__ at freenode.
+* 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](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) 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.
+
+## 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/compatibility.html) for more details.
+
+## Running this sample
+
+1. Install [node.js](nodejs.org) (required for `bower` client-side package management)
+1. Install bower: `npm install -g bower`
+
+1. From the `todomvc\` folder, run `bower update`
+1. Start a web server in the `todomvc\` folder.  Hint: if you have python installed, you can just run:
+
+     `python -m SimpleHTTPServer`
+
+1. Browse to the server root
diff --git a/labs/architecture-examples/polymer/app/app.css b/labs/architecture-examples/polymer/app/app.css
@@ -0,0 +1,200 @@
+/* base.css overrides */
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #eaeaea url('../components/todomvc-common/bg.png');
+	color: #4d4d4d;
+	width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+body > header {
+  padding-top: 22px;
+  margin-bottom: -5px;
+}
+
+h1 {
+  /*	position: absolute;
+	top: -120px;*/
+	width: 100%;
+	font-size: 70px;
+	font-weight: bold;
+	text-align: center;
+	color: #b3b3b3;
+	color: rgba(255, 255, 255, 0.3);
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+#info {
+	margin: 65px auto 0;
+	color: #a6a6a6;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+#info a {
+	color: inherit;
+}
+
+.hidden{
+	display:none;
+}
+
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #C5C5C5;
+	border-bottom: 1px dashed #F7F7F7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+/**body*/.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	/**body*/.learn-bar {
+		width: auto;
+		margin: 0 0 0 300px;
+	}
+	/**body*/.learn-bar > .learn {
+		left: 8px;
+	}
+	/**body*/.learn-bar #todoapp {
+		width: 550px;
+		margin: 130px auto 40px auto;
+	}
+}
diff --git a/labs/architecture-examples/polymer/bower.json b/labs/architecture-examples/polymer/bower.json
@@ -0,0 +1,9 @@
+{
+	"name": "todomvc-template",
+	"version": "0.0.0",
+	"dependencies": {
+		"todomvc-common": "~0.1.4",
+    "director": "*",
+    "polymer": "*"
+	}
+}
diff --git a/labs/architecture-examples/polymer/components/director/.gitignore b/labs/architecture-examples/polymer/components/director/.gitignore
@@ -0,0 +1,6 @@
+/.idea/
+node_modules
+npm-debug.log
+.DS_Store
+
+/test/browser/browserified-bundle.js