Ported five polymer.js samples to Dart.

R=jmesserly@google.com Review URL: https://chromiumcodereview.appspot.com//265673005
dart-archive · Apr 30, 2014 · 0d297e7 · 0d297e7
1 parent 59e197e
commit 0d297e7
Show file tree

Hide file tree

Showing 23 changed files with 265 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@
 
 # pub
 packages
+build
 
 #other
 .settings

diff --git a/polymer_mini_samples/README.md b/polymer_mini_samples/README.md
@@ -0,0 +1,9 @@
+# Polymer Mini Samples
+
+This directory contains short Polymer Dart samples. Many of the samples are 
+ports of polymer.js samples that are used in the docs of polymer-project.org.
+The origianl JS samples can be found at 
+[https://github.com/Polymer/docs/tree/master/samples](http://polymer.github.io).
+
+The original AUTHORS, CONTRIBUTORS, LICENSE and PATENTS files for polymer can 
+be found at [http://polymer.github.io](http://polymer.github.io)/.
diff --git a/polymer_mini_samples/pubspec.lock b/polymer_mini_samples/pubspec.lock
@@ -0,0 +1,91 @@
+# Generated by pub
+# See http://pub.dartlang.org/doc/glossary.html#lockfile
+packages:
+  analyzer:
+    description: analyzer
+    source: hosted
+    version: "0.13.6"
+  args:
+    description: args
+    source: hosted
+    version: "0.10.0+2"
+  barback:
+    description: barback
+    source: hosted
+    version: "0.12.0"
+  browser:
+    description: browser
+    source: hosted
+    version: "0.10.0+2"
+  code_transformers:
+    description: code_transformers
+    source: hosted
+    version: "0.1.3"
+  collection:
+    description: collection
+    source: hosted
+    version: "0.9.2"
+  html5lib:
+    description: html5lib
+    source: hosted
+    version: "0.10.0"
+  logging:
+    description: logging
+    source: hosted
+    version: "0.9.1+1"
+  matcher:
+    description: matcher
+    source: hosted
+    version: "0.10.0"
+  mock:
+    description: mock
+    source: hosted
+    version: "0.10.0+1"
+  observe:
+    description: observe
+    source: hosted
+    version: "0.10.0-pre.4"
+  path:
+    description: path
+    source: hosted
+    version: "1.1.0"
+  polymer:
+    description: polymer
+    source: hosted
+    version: "0.10.0-pre.9"
+  polymer_expressions:
+    description: polymer_expressions
+    source: hosted
+    version: "0.10.0-pre.1"
+  smoke:
+    description: smoke
+    source: hosted
+    version: "0.1.0-pre.2"
+  source_maps:
+    description: source_maps
+    source: hosted
+    version: "0.9.0"
+  stack_trace:
+    description: stack_trace
+    source: hosted
+    version: "0.9.3+1"
+  template_binding:
+    description: template_binding
+    source: hosted
+    version: "0.10.0-pre.1"
+  unittest:
+    description: unittest
+    source: hosted
+    version: "0.10.1+2"
+  utf:
+    description: utf
+    source: hosted
+    version: "0.9.0"
+  web_components:
+    description: web_components
+    source: hosted
+    version: "0.3.3"
+  yaml:
+    description: yaml
+    source: hosted
+    version: "0.9.0"
diff --git a/polymer_mini_samples/pubspec.yaml b/polymer_mini_samples/pubspec.yaml
@@ -0,0 +1,16 @@
+name: polymer_mini_samples
+description: Short Polymer examples
+dependencies:
+  polymer: ">=0.10.0-pre.9 <0.11.0"
+transformers:
+- polymer:
+    entry_points:
+      - web/binding_data/index.html
+      - web/binding_to_a_style_value/index.html
+      - web/creating_an_element/index.html
+      - web/creating_an_element_using_noscript/index.html
+      - web/waiting_until_an_element_is_ready/index.html
+dev_dependencies:
+  unittest: ">=0.10.0 <0.11.0"
+environment:
+  sdk: ">=1.2.0 <2.0.0"
diff --git a/polymer_mini_samples/web/binding_data/README.md b/polymer_mini_samples/web/binding_data/README.md
@@ -0,0 +1,2 @@
+Port of
+https://github.com/Polymer/docs/blob/45e09c8a6499d788438667b6564df64a9f86527c/samples/components/tk-element-databinding.html
diff --git a/polymer_mini_samples/web/binding_data/index.html b/polymer_mini_samples/web/binding_data/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+    <link rel="import" href="packages/polymer/polymer.html">
+    <link rel="import" href="my_element.html">
+  </head>
+  <body>
+    <my-element></my-element>
+  </body>
+</html>
diff --git a/polymer_mini_samples/web/binding_data/my_element.dart b/polymer_mini_samples/web/binding_data/my_element.dart
@@ -0,0 +1,9 @@
+library binding_data.my_element;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('my-element')
+class MyElement extends PolymerElement {
+  @observable String owner = 'Daniel';
+  MyElement.created() : super.created();
+}
diff --git a/polymer_mini_samples/web/binding_data/my_element.html b/polymer_mini_samples/web/binding_data/my_element.html
@@ -0,0 +1,6 @@
+<polymer-element name="my-element">
+  <template>
+    This is <b>{{owner}}</b>'s name-tag element.
+  </template>
+  <script type="application/dart;component=1" src="my_element.dart"></script>
+</polymer-element>
diff --git a/polymer_mini_samples/web/binding_to_a_style_value/README.md b/polymer_mini_samples/web/binding_to_a_style_value/README.md
@@ -0,0 +1,2 @@
+Port of
+https://github.com/Polymer/docs/blob/45e09c8a6499d788438667b6564df64a9f86527c/samples/components/tk-element-databinding-color.html
diff --git a/polymer_mini_samples/web/binding_to_a_style_value/index.html b/polymer_mini_samples/web/binding_to_a_style_value/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <link rel="import" href="packages/polymer/polymer.html">
+    <link rel="import" href="my_element.html">
+  </head>
+  <body>
+    <my-element></my-element>
+  </body>
+</html>
diff --git a/polymer_mini_samples/web/binding_to_a_style_value/my_element.dart b/polymer_mini_samples/web/binding_to_a_style_value/my_element.dart
@@ -0,0 +1,10 @@
+library binding_to_a_style_value.my_element;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('my-element')
+class MyElement extends PolymerElement {
+  @observable String owner = 'Daniel';
+  @observable String color = 'red';
+  MyElement.created() : super.created();
+}
diff --git a/polymer_mini_samples/web/binding_to_a_style_value/my_element.html b/polymer_mini_samples/web/binding_to_a_style_value/my_element.html
@@ -0,0 +1,8 @@
+<polymer-element name="my-element">
+  <template>
+    This is <b>{{owner}}</b>'s fav-color element.
+    {{owner}} likes the color
+    <span style="color: {{color}}">{{color}}</span>.
+  </template>
+  <script type="application/dart;component=1" src="my_element.dart"></script>
+</polymer-element>
diff --git a/polymer_mini_samples/web/creating_an_element/README.md b/polymer_mini_samples/web/creating_an_element/README.md
@@ -0,0 +1,6 @@
+Ports (with changes)
+https://github.com/Polymer/docs/blob/45e09c8a6499d788438667b6564df64a9f86527c/samples/components/tk-element-proto.html
+
+Dart does not have a prototype chain, so the sample has been rewritten to
+demonstrates how to create an element that uses a Dart class. Contrast this
+sample with creating_an_element_using_noscript.
diff --git a/polymer_mini_samples/web/creating_an_element/index.html b/polymer_mini_samples/web/creating_an_element/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <link rel="import" href="packages/polymer/polymer.html">
+    <link rel="import" href="my_element.html">
+  </head>
+  <body>
+    <my-element></my-element>
+  </body>
+</html>
diff --git a/polymer_mini_samples/web/creating_an_element/my_element.dart b/polymer_mini_samples/web/creating_an_element/my_element.dart
@@ -0,0 +1,9 @@
+library creating_an_element.my_element;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('my-element')
+class MyElement extends PolymerElement {
+  @observable String name = 'John';
+  MyElement.created() : super.created();
+}
diff --git a/polymer_mini_samples/web/creating_an_element/my_element.html b/polymer_mini_samples/web/creating_an_element/my_element.html
@@ -0,0 +1,6 @@
+<polymer-element name="my-element">
+  <template>
+    <span>Hello {{name}}!</span>
+  </template>
+  <script type="application/dart;component=1" src="my_element.dart"></script>
+</polymer-element>
diff --git a/polymer_mini_samples/web/creating_an_element_using_noscript/README.md b/polymer_mini_samples/web/creating_an_element_using_noscript/README.md
@@ -0,0 +1,2 @@
+Port of
+https://github.com/Polymer/docs/blob/45e09c8a6499d788438667b6564df64a9f86527c/samples/components/tk-element.html
diff --git a/polymer_mini_samples/web/creating_an_element_using_noscript/index.html b/polymer_mini_samples/web/creating_an_element_using_noscript/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <link rel="import" href="packages/polymer/polymer.html">
+    <link rel="import" href="my_element.html">
+  </head>
+  <body>
+    <my-element></my-element>
+  </body>
+</html>
diff --git a/polymer_mini_samples/web/creating_an_element_using_noscript/my_element.html b/polymer_mini_samples/web/creating_an_element_using_noscript/my_element.html
@@ -0,0 +1,5 @@
+<polymer-element name="my-element" noscript>
+  <template>
+    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
+  </template>
+</polymer-element>
diff --git a/polymer_mini_samples/web/waiting_until_an_element_is_ready/README.md b/polymer_mini_samples/web/waiting_until_an_element_is_ready/README.md
@@ -0,0 +1,2 @@
+Port of
+https://github.com/Polymer/docs/blob/2fd88b259f20bccf873158c1407175b5014991ed/samples/components/tk-element-created.html
diff --git a/polymer_mini_samples/web/waiting_until_an_element_is_ready/index.html b/polymer_mini_samples/web/waiting_until_an_element_is_ready/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <link rel="import" href="packages/polymer/polymer.html">
+    <link rel="import" href="my_element.html">
+  </head>
+  <body>
+    <my-element></my-element>
+  </body>
+</html>
diff --git a/polymer_mini_samples/web/waiting_until_an_element_is_ready/my_element.dart b/polymer_mini_samples/web/waiting_until_an_element_is_ready/my_element.dart
@@ -0,0 +1,13 @@
+library waiting_until_an_element_is_ready.my_element;
+
+import 'package:polymer/polymer.dart';
+
+@CustomTag('my-element')
+class MyElement extends PolymerElement {
+  @observable String owner = 'Daniel';
+  MyElement.created() : super.created();
+
+  ready() {
+    $['el'].text = "$owner is ready!";
+  }
+}
diff --git a/polymer_mini_samples/web/waiting_until_an_element_is_ready/my_element.html b/polymer_mini_samples/web/waiting_until_an_element_is_ready/my_element.html
@@ -0,0 +1,7 @@
+<polymer-element name="my-element">
+  <template>
+    This element has a ready() method.
+    <span id="el">Not ready...</span>
+  </template>
+  <script type="application/dart;component=1" src="my_element.dart"></script>
+</polymer-element>