polymer-rails 0.2.8 → 0.3.0

data/app/assets/javascripts/polymer/src/lib/base.html

@@ -0,0 +1,117 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<script>
+
+  Polymer.Base = {
+
+    // (semi-)pluggable features for Base
+    addFeature: function(feature) {
+      this.extend(this, feature);
+    },
+
+    registerCallback: function() {
+      this.registerFeatures();  // abstract
+      this.registered();
+    },
+
+    registered: function() {
+      // for overriding
+      // `this` context is a prototype, not an instance
+    },
+
+    createdCallback: function() {
+      Polymer.telemetry.instanceCount++;
+      this.root = this;
+      this.beforeCreated();
+      this.created();
+      this.afterCreated();
+      this.initFeatures(); // abstract
+    },
+
+    beforeCreated: function() {
+      // for overriding
+    },
+
+    created: function() {
+      // for overriding
+    },
+
+    afterCreated: function() {
+      // for overriding
+    },
+
+    attachedCallback: function() {
+      this.isAttached = true;
+      // reserved for canonical behavior
+      this.attached();
+    },
+
+    attached: function() {
+      // for overriding
+    },
+
+    detachedCallback: function() {
+      this.isAttached = false;
+      // reserved for canonical behavior
+      this.detached();
+    },
+
+    detached: function() {
+      // for overriding
+    },
+
+    attributeChangedCallback: function(name) {
+      this.setAttributeToProperty(this, name);
+      // reserved for canonical behavior
+      this.attributeChanged.apply(this, arguments);
+    },
+
+    attributeChanged: function() {
+      // for overriding
+    },
+
+    // copy own properties from `api` to `prototype`
+    extend: function(prototype, api) {
+      if (prototype && api) {
+        Object.getOwnPropertyNames(api).forEach(function(n) {
+          var pd = Object.getOwnPropertyDescriptor(api, n);
+          if (pd) {
+            Object.defineProperty(prototype, n, pd);
+          }
+        });
+      }
+      return prototype || api;
+    }
+
+  };
+
+  if (Object.__proto__) {
+    Polymer.Base.chainObject = function(object, inherited) {
+      if (object && inherited && object !== inherited) {
+        object.__proto__ = inherited;
+      }
+      return object;
+    };
+  } else {
+    Polymer.Base.chainObject = function(object, inherited) {
+      if (object && inherited && object !== inherited) {
+        var chained = Object.create(inherited);
+        object = Polymer.Base.extend(chained, object);
+      }
+      return object;
+    };
+  }
+
+  Polymer.Base = Polymer.Base.chainObject(Polymer.Base, HTMLElement.prototype);
+
+  // TODO(sjmiles): ad hoc telemetry
+  Polymer.telemetry.instanceCount = 0;
+
+</script>

data/app/assets/javascripts/polymer/src/lib/bind/accessors.html

@@ -0,0 +1,223 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<script>
+
+  Polymer.Bind = {
+
+    // for prototypes (usually)
+
+    prepareModel: function(model) {
+      model._propertyEffects = {};
+      model._bindListeners = [];
+      // TODO(sjmiles): no mixin function?
+      var api = this._modelApi;
+      for (var n in api) {
+        model[n] = api[n];
+      }
+    },
+
+    _modelApi: {
+
+      _notifyChange: function(property) {
+        var eventName = Polymer.CaseMap.camelToDashCase(property) + '-changed';
+        // TODO(sjmiles): oops, `fire` doesn't exist at this layer
+        this.fire(eventName, {
+          value: this[property]
+        }, null, false);
+      },
+
+      // TODO(sjmiles): removing _notifyListener from here breaks accessors.html
+      // as a standalone lib. This is temporary, as standard/configure.html
+      // installs it's own version on Polymer.Base, and we need that to work
+      // right now.
+      // NOTE: exists as a hook for processing listeners
+      /*
+      _notifyListener: function(fn, e) {
+        // NOTE: pass e.target because e.target can get lost if this function
+        // is queued asynchrously
+        return fn.call(this, e, e.target);
+      },
+      */
+
+      _propertySet: function(property, value, effects) {
+        var old = this._data[property];
+        if (old !== value) {
+          this._data[property] = value;
+          if (typeof value == 'object') {
+            this._clearPath(property);
+          }
+          if (effects) {
+            this._effectEffects(property, value, effects, old);
+          }
+        }
+        return old;
+      },
+
+      _effectEffects: function(property, value, effects, old) {
+        effects.forEach(function(fx) {
+          //console.log(fx);
+          var fn = Polymer.Bind[fx.kind + 'Effect'];
+          if (fn) {
+            fn.call(this, property, value, fx.effect, old);
+          }
+        }, this);
+      },
+
+      _clearPath: function(path) {
+        for (var prop in this._data) {
+          if (prop.indexOf(path + '.') === 0) {
+            this._data[prop] = undefined;
+          }
+        }
+      }
+
+    },
+
+    // a prepared model can acquire effects
+
+    addPropertyEffect: function(model, property, kind, effect) {
+      var fx = model._propertyEffects[property];
+      if (!fx) {
+        fx = model._propertyEffects[property] = [];
+      }
+      fx.push({
+        kind: kind,
+        effect: effect
+      });
+    },
+
+    createBindings: function(model) {
+      //console.group(model.is);
+      // map of properties to effects
+      var fx$ = model._propertyEffects;
+      if (fx$) {
+        // for each property with effects
+        for (var n in fx$) {
+          // array of effects
+          var fx = fx$[n];
+          // effects have priority
+          fx.sort(this._sortPropertyEffects);
+          // create accessors
+          this._createAccessors(model, n, fx);
+        }
+      }
+      //console.groupEnd();
+    },
+
+    _sortPropertyEffects: (function() {
+      // TODO(sjmiles): EFFECT_ORDER buried this way is not ideal,
+      // but presumably the sort method is going to be a hot path and not
+      // have a `this`. There is also a problematic dependency on effect.kind
+      // values here, which are otherwise pluggable.
+      var EFFECT_ORDER = {
+        'compute': 0,
+        'annotation': 1,
+        'computedAnnotation': 2,
+        'reflect': 3,
+        'notify': 4,
+        'observer': 5,
+        'function': 6
+      };
+      return function(a, b) {
+        return EFFECT_ORDER[a.kind] - EFFECT_ORDER[b.kind];
+      };
+    })(),
+
+    // create accessors that implement effects
+
+    _createAccessors: function(model, property, effects) {
+      var defun = {
+        get: function() {
+          // TODO(sjmiles): elide delegation for performance, good ROI?
+          return this._data[property];
+        }
+      };
+      var setter = function(value) {
+        this._propertySet(property, value, effects);
+      };
+      // ReadOnly properties have a private setter only
+      // TODO(kschaaf): Per current Bind factoring, we shouldn't
+      // be interrogating the prototype here
+      if (model.isReadOnlyProperty && model.isReadOnlyProperty(property)) {
+        //model['_' + property + 'Setter'] = setter;
+        //model['_set_' + property] = setter;
+        model['_set' + this.upper(property)] = setter;
+      } else {
+        defun.set = setter;
+      }
+      Object.defineProperty(model, property, defun);
+    },
+
+    upper: function(name) {
+      return name[0].toUpperCase() + name.substring(1);
+    },
+
+    _addAnnotatedListener: function(model, index, property, path, event) {
+      var fn = this._notedListenerFactory(property, path,
+        this._isStructured(path), this._isEventBogus);
+      var eventName = event ||
+        (Polymer.CaseMap.camelToDashCase(property) + '-changed');
+      model._bindListeners.push({
+        index: index,
+        property: property,
+        path: path,
+        changedFn: fn,
+        event: eventName
+      });
+    },
+
+    _isStructured: function(path) {
+      return path.indexOf('.') > 0;
+    },
+
+    _isEventBogus: function(e, target) {
+      return e.path && e.path[0] !== target;
+    },
+
+    _notedListenerFactory: function(property, path, isStructured, bogusTest) {
+      return function(e, target) {
+        if (!bogusTest(e, target)) {
+          if (e.detail && e.detail.path) {
+            this.notifyPath(this._fixPath(path, property, e.detail.path),
+              e.detail.value);
+          } else {
+            var value = target[property];
+            if (!isStructured) {
+              this[path] = target[property];
+            } else {
+              // TODO(kschaaf): dirty check avoids null references when the object has gone away
+              if (this._data[path] != value) {
+                this.setPathValue(path, value);
+              }
+            }
+          }
+        }
+      };
+    },
+
+    // for instances
+
+    prepareInstance: function(inst) {
+      inst._data = Object.create(null);
+    },
+
+    setupBindListeners: function(inst) {
+      inst._bindListeners.forEach(function(info) {
+        // Property listeners:
+        // <node>.on.<property>-changed: <path]> = e.detail.value
+        //console.log('[_setupBindListener]: [%s][%s] listening for [%s][%s-changed]', this.localName, info.path, info.id || info.index, info.property);
+        var node = inst._nodes[info.index];
+        node.addEventListener(info.event, inst._notifyListener.bind(inst, info.changedFn));
+      });
+    }
+
+  };
+
+</script>

data/app/assets/javascripts/polymer/src/lib/bind/demo/app-chrome.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>Bind Test</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <style>
+    pre {
+      font-family: sans-serif;
+      font-size: 14px;
+    }
+  </style>
+
+  <link rel="import" href="src/bind-demo.html">
+  <link rel="import" href="src/annotations-bind-demo.html">
+
+</head>
+<body>
+
+  <pre id="bd"></pre>
+
+  <pre id="abd"></pre>
+
+</body>
+</html>

data/app/assets/javascripts/polymer/src/lib/bind/demo/app.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>Bind Test</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <style>
+    pre {
+      font-family: sans-serif;
+      font-size: 14px;
+    }
+  </style>
+
+  <link rel="import" href="src/bind-demo.html">
+  <link rel="import" href="src/annotations-bind-demo.html">
+
+</head>
+<body>
+
+  <pre id="bd"></pre>
+  <pre id="abd"></pre>
+
+</body>
+</html>

data/app/assets/javascripts/polymer/src/lib/bind/demo/src/annotations-bind-demo.html

@@ -0,0 +1,76 @@
+<link rel="import" href="../../../module.html">
+<link rel="import" href="../../../lang.html">
+<link rel="import" href="../../../annotations/annotations.html">
+
+<link rel="import" href="../../bind.html">
+<link rel="import" href="../../bind-effects.html">
+<link rel="import" href="../../bind-annotations.html">
+
+<template>
+
+  <div>annotated #foo span:</div>
+  <br>
+  <span id="foo" attribute="{{path}}" oneway="[[otherpath]]" style="{{specialStyle}}">{{text}}</span>
+
+</template>
+
+<script>
+
+  // TODO(sjmiles): should 'bind-annotations' blend the other two modules
+  // somehow so we don't need to include all three here?
+  using(['Annotations', 'bind', 'bind-annotations'], 
+
+   function(Annotations, Bind, BindAnnotations) {
+
+    var out = document.querySelector('#abd');
+    out.innerHTML += '<hr><h3>annotations-bind demo</h3><hr>';
+
+    // phase one: prototyping
+
+    var prototype = {};
+    var template = currentImport.querySelector('template');
+    var list = Templabindinate(prototype, template);
+
+    // phase two: instancing
+    
+    var model = Object.create(prototype);
+    var dom = Instancinance(model, template);
+    document.body.appendChild(dom);
+
+    // affect model
+
+    model.text = 'Hello from Model';
+    model.path = 'path';
+    model.otherpath = 'other.path';
+    model.specialStyle = {backgroundColor: "red"};
+
+    // effects visible in dom
+
+    var foo = dom.querySelector('#foo');
+    out.innerHTML += 
+      'foo.<b>path</b> = "' + model.path + '"<br>'
+      + 'foo.<b>otherpath</b> = "' + model.otherpath + '"<br>'
+      + 'foo.<b>specialStyle</b> = "' + JSON.stringify(model.specialStyle)+ '"<br>'
+      ;
+
+    // ad hoc abstractions
+    
+    function Templabindinate(model, template) {
+      Bind.prepareModel(model);
+      var list = Annotations.parseAnnotations(template);
+      BindAnnotations.addEffects(model, list);
+      return list;
+    }
+
+    function Instancinance(model, template) {
+      Bind.prepareInstance(model);
+      Bind.createBindings(model);
+      var dom = document.importNode(template.content, true);
+      model._nodes = BindAnnotations.marshalAnnotatedNodes(model._nodes, dom, 
+        Annotations.findAnnotatedNode);
+      return dom;
+    }
+
+  });
+
+</script>