polymer-rails 0.2.8 → 0.3.0

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

@@ -0,0 +1,83 @@
+<link rel="import" href="../../../module.html">
+<link rel="import" href="../../bind.html">
+<link rel="import" href="../../bind-effects.html">
+  
+<script>
+
+  using(['bind'], function(Bind) {
+
+    var out = document.querySelector('#bd');
+    out.innerHTML += '<hr><h3>bind demo</h3><hr>';
+    
+    // phase one: prototyping
+
+    var model = {};
+
+    Bind.prepareModel(model);
+
+    // 'observer' effects are called if foo changes value as fx(foo, old)
+
+    Bind.addPropertyEffect(model, 'foo', 'observer', 'fooChange');
+    Bind.addPropertyEffect(model, 'foo', 'observer', 'fooWork');
+
+    model.fooChange = function(foo) {
+      out.innerHTML += '<b>fooChange</b>: effect of changing foo to ' + foo + '\n';
+      console.log('fooChange: effect of changing foo to %d', foo);
+    };
+
+    model.fooWork = function(foo) {
+      out.innerHTML += '<b>fooWork</b>: effect of changing foo to ' + foo + '\n';
+      console.log('fooWork: effect of changing foo to %d', foo);
+    };
+
+    // 'compute' effect sets the value of bar to the result of computeBar when
+    // foo changes value
+
+    /*
+    Bind.addPropertyEffect(model, 'foo', 'compute', {
+      method: 'computeBar',
+      property: 'bar'
+    });
+    */
+    Bind.addComputedPropertyEffect(model, 'bar', 'computeFooTimes2(foo)');
+
+    model.computeFooTimes2 = function(foo) {
+      var foo2 = foo * 2;
+      out.innerHTML += '<b>computeFooTimes2</b>: calculated ' + foo2 + ' as an effect of changing foo to ' + foo + '\n';
+      console.log('computeFooTimes2: calculated %d as effect of changing foo to %d', foo2, foo);
+      return foo2;
+    };
+
+    // custom effect
+
+    Bind.addBuilder('async', function(model, property, effect) {
+      var fn = function() {
+        var flag = '_propertyTask';
+        clearTimeout(this[flag]);
+        this[flag] = setTimeout(function() {
+          this.effect(this.property);
+          this[flag] = 0;
+        }.bind(this));
+      };
+      var code = fn.toString().split('\n').slice(1, -1).join('\n');
+      return code.replace(/property/g, property).replace(/effect/g, effect);
+    });
+
+    Bind.addPropertyEffect(model, 'foo', 'async', 'asyncFoo');
+
+    model.asyncFoo = function(foo) {
+      out.innerHTML += '<b>asyncFoo</b>: effect of changing foo to ' + foo + '\n';
+      console.log('asyncFoo: effect of changing foo to %d', foo);
+    };
+
+    // phase two: instancing
+
+    Bind.prepareInstance(model);
+    Bind.createBindings(model);
+
+    model.foo = 3;
+    model.foo = 6;
+
+  });
+
+</script>

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

@@ -0,0 +1,80 @@
+<!--
+@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
+-->
+<link rel="import" href="../case-map.html">
+<script>
+
+  Polymer.Base.extend(Polymer.Bind, {
+
+    _shouldAddListener: function(info) {
+      return info.name &&
+             info.mode === '{' &&
+             !info.negate &&
+             info.kind != 'attribute'
+             ;
+    },
+
+    annotationEffect: function(source, value, info) {
+      if (source != info.value) {
+        value = this.getPathValue(info.value);
+      }
+      var calc = info.negate ? !value : value;
+      return this._applyEffectValue(calc, info);
+    },
+
+    reflectEffect: function(source) {
+      this.reflectPropertyToAttribute(source);
+    },
+
+    notifyEffect: function(source) {
+      this._notifyChange(source);
+    },
+
+    observerEffect: function(source, value, info, old) {
+      //console.log(value, info);
+      if (info.property) {
+        this[info.method](value, old);
+      } else {
+        var args = Polymer.Bind._marshalArgs(this._data, info.properties);
+        if (args) {
+          this[info.method].apply(this, args);
+        }
+      }
+    },
+
+    computeEffect: function(source, value, info) {
+      var args = Polymer.Bind._marshalArgs(this._data, info.args);
+      if (args) {
+        this[info.property] = this[info.methodName].apply(this, args);
+      }
+    },
+
+    annotatedComputationEffect: function(source, value, info) {
+      var args = Polymer.Bind._marshalArgs(this._data, info.args);
+      if (args) {
+        var value = this[info.methodName].apply(this, args);
+        this._applyEffectValue(value, info);
+      }
+    },
+
+    _marshalArgs: function(model, properties) {
+      var a=[];
+      for (var i=0, l=properties.length, v; i<l; i++) {
+        v = model[properties[i]];
+        if (v === undefined) {
+          return;
+        }
+        a[i] = v;
+      }
+      return a;
+    }
+
+  });
+
+</script>

data/app/assets/javascripts/polymer/src/lib/case-map.html

@@ -0,0 +1,46 @@
+<!--
+@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.CaseMap = {
+
+    _caseMap: {},
+
+    dashToCamelCase: function(dash) {
+      var mapped = Polymer.CaseMap._caseMap[dash];
+      if (mapped) {
+        return mapped;
+      }
+      // TODO(sjmiles): is rejection test actually helping perf?
+      if (dash.indexOf('-') < 0) {
+        return Polymer.CaseMap._caseMap[dash] = dash;
+      }
+      return Polymer.CaseMap._caseMap[dash] = dash.replace(/-([a-z])/g, 
+        function(m) {
+          return m[1].toUpperCase(); 
+        }
+      );
+    },
+
+    camelToDashCase: function(camel) {
+      var mapped = Polymer.CaseMap._caseMap[camel];
+      if (mapped) {
+        return mapped;
+      }
+      return Polymer.CaseMap._caseMap[camel] = camel.replace(/([a-z][A-Z])/g, 
+        function (g) { 
+          return g[0] + '-' + g[1].toLowerCase() 
+        }
+      );
+    }
+
+  };
+
+</script>

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

@@ -0,0 +1,179 @@
+<!--
+@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
+-->
+
+<link rel="import" href="array-observe.html">
+<link rel="import" href="debounce.html">
+
+<script>
+
+  Polymer._collections = new WeakMap();
+
+  Polymer.Collection = function(userArray, noObserve) {
+    Polymer._collections.set(userArray, this);
+    this.userArray = userArray;
+    this.store = userArray.slice();
+    this.callbacks = [];
+    this.debounce = null;
+    this.map = null;
+    this.added = [];
+    this.removed = [];
+    if (!noObserve) {
+      Polymer.ArrayObserve.observe(userArray, this.applySplices.bind(this));
+      this.initMap();
+    }
+  };
+
+  Polymer.Collection.prototype = {
+    constructor: Polymer.Collection,
+
+    initMap: function() {
+      var map = this.map = new WeakMap();
+      var s = this.store;
+      var u = this.userArray;
+      for (var i=0; i<s.length; i++) {
+        var v = s[i];
+        if (v) {
+          switch (typeof v) {
+            case 'string':
+              v = s[i] = u[i]= new String(v);
+              break;
+            case 'number':
+              v = s[i] = u[i]= new Number(v);
+              break;          
+            case 'boolean':
+              v = s[i] = u[i]= new Boolean(v);
+              break;          
+          }
+        map.set(v, i);
+        }
+      }
+    },
+
+    add: function(item, squelch) {
+      var key = this.store.push(item) - 1;
+      if (item != null && this.map) {
+        this.map.set(item, key);
+      }
+      if (!squelch) {
+        this.added.push(key);
+        this.debounce = Polymer.Debounce(this.debounce, this.notify.bind(this));
+      }
+      return key;
+    },
+
+    removeKey: function(key) {
+      if (this.map) {
+        this.map.delete(this.store[key]);
+      }
+      delete this.store[key];
+      this.removed.push(key);
+      this.debounce = Polymer.Debounce(this.debounce, this.notify.bind(this));
+    },
+
+    remove: function(item, squelch) {
+      var key = this.getKey(item);
+      if (item != null && this.map) {
+        this.map.delete(item);
+      }
+      delete this.store[key];
+      if (!squelch) {
+        this.removed.push(key);
+        this.debounce = Polymer.Debounce(this.debounce, this.notify.bind(this));
+      }
+      return key;
+    },
+
+    notify: function(splices) {
+      if (!splices) {
+        splices = [{
+          added: this.added,
+          removed: this.removed
+        }];
+        this.added = [];
+        this.removed = [];
+      }
+      this.callbacks.forEach(function(cb) {
+        cb(splices);
+      }, this);
+    },
+
+    observe: function(callback) {
+      this.callbacks.push(callback);
+    },
+
+    unobserve: function(callback) {
+      this.callbacks.splice(this.callbacks.indexOf(callback), 1);
+    },
+
+    getKey: function(item) {
+      if (item != null && this.map) {
+        return this.map.get(item);
+      } else {
+        return this.store.indexOf(item);      
+      }
+    },
+
+    getKeys: function() {
+      return Object.keys(this.store);
+    },
+
+    setItem: function(key, value) {
+      this.store[key] = value;
+    },
+
+    getItem: function(key) {
+      return this.store[key];
+    },
+
+    getItems: function() {
+      var items = [], store = this.store;
+      for (var key in store) {
+        items.push(store[key]);
+      }
+      return items;
+    },
+
+    applySplices: function(splices) {
+      var map = this.map;
+      var keySplices = [];
+      for (var i=0; i<splices.length; i++) {
+        var j, o, key, s = splices[i];
+        // Removed keys
+        var removed = [];
+        for (j=0; j<s.removed.length; j++) {
+          o = s.removed[j];
+          key = this.remove(o, true);
+          removed.push(key);
+        }
+        // Added keys
+        var added = [];
+        for (j=0; j<s.addedCount; j++) {
+          o = this.userArray[s.index + j];
+          key = this.add(o, true);
+          added.push(key);
+        }
+        // Record splice
+        keySplices.push({
+          index: s.index,
+          removed: removed,
+          added: added
+        });
+      }
+      this.notify(keySplices);
+    }
+
+  };
+
+  Polymer.Collection.get = function(userArray, noObserve) {
+    return Polymer._collections.get(userArray) 
+      || new Polymer.Collection(userArray, noObserve);
+  };
+
+</script>

data/app/assets/javascripts/polymer/src/lib/css-parse.html

@@ -0,0 +1,131 @@
+<script>
+
+/*
+  Extremely simple css parser. Intended to be not more than what we need
+  and definitely not necessarly correct =).
+*/
+(function() {
+
+  // given a string of css, return a simple rule tree
+  function parse(text) {
+    text = clean(text);
+    return parseCss(lex(text), text);
+  }
+
+  // remove stuff we don't care about that may hinder parsing
+  function clean(cssText) {
+    return cssText.replace(rx.comments, '').replace(rx.port, '');
+  }
+
+  // super simple {...} lexer that returns a node tree
+  function lex(text) {
+    var root = {start: 0, end: text.length};
+    var n = root;
+    for (var i=0, s=0, l=text.length; i < l; i++) {
+      switch (text[i]) {
+        case OPEN_BRACE:
+          //console.group(i);
+          if (!n.rules) {
+            n.rules = [];
+          }
+          var p = n;
+          var previous = p.rules[p.rules.length-1];
+          n = {start: i+1, parent: p, previous: previous};
+          p.rules.push(n);
+          break;
+        case CLOSE_BRACE: 
+          //console.groupEnd(n.start);
+          n.end = i+1;
+          n = n.parent || root;
+          break;
+      }
+    }
+    return root;
+  }
+
+  // add selectors/cssText to node tree
+  function parseCss(node, text) {
+    var t = text.substring(node.start, node.end-1);
+    node.cssText = t.trim();
+    if (node.parent) {
+      var ss = node.previous ? node.previous.end : node.parent.start;
+      t = text.substring(ss, node.start-1);
+      // TODO(sorvell): ad hoc; make selector include only after last ;
+      // helps with mixin syntax
+      t = t.substring(t.lastIndexOf(';')+1);
+      node.selector = t.trim();
+    }
+    var r$ = node.rules;
+    if (r$) {
+      for (var i=0, l=r$.length, r; (i<l) && (r=r$[i]); i++) {
+        parseCss(r, text);
+      }  
+    }
+    return node;  
+  }
+
+  // stringify parsed css.
+  function stringify(node, text) {
+    text = text || '';
+    // calc rule cssText
+    var cssText = '';
+    if (node.cssText || node.rules) {
+      var r$ = node.rules;
+      if (r$ && !hasMixinRules(r$)) {
+        for (var i=0, l=r$.length, r; (i<l) && (r=r$[i]); i++) {
+          cssText = stringify(r, cssText);
+        }  
+      } else {
+        cssText = removeCustomProps(node.cssText).trim();
+        if (cssText) {
+          cssText = '  ' + cssText + '\n';
+        }
+      }
+    }
+    // emit rule iff there is cssText
+    if (cssText) {
+      if (node.selector) {
+        text += node.selector + ' ' + OPEN_BRACE + '\n';
+      }
+      text += cssText;
+      if (node.selector) {
+        text += CLOSE_BRACE + '\n\n';
+      }
+    }
+    return text;
+  }
+
+  var OPEN_BRACE = '{';
+  var CLOSE_BRACE = '}';
+
+  function hasMixinRules(rules) {
+    return (rules[0].selector.indexOf(VAR_START) >= 0);
+  }
+
+  function removeCustomProps(cssText) {
+    return cssText
+      .replace(rx.customProp, '')
+      .replace(rx.mixinProp, '')
+      .replace(rx.mixinApply, '');
+  }
+
+  var VAR_START = '--';
+
+  // helper regexp's
+  var rx = {
+    comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
+    port: /@import[^;]*;/gim,
+    customProp: /--[^;{]*?:[^{};]*?;/gim,
+    mixinProp: /--[^;{]*?:[^{;]*?{[^}]*?}/gim,
+    mixinApply: /@mixin[\s]*\([^)]*?\)[\s]*;/gim
+  };
+
+  // exports 
+  Polymer.CssParse = {
+    parse: parse,
+    stringify: stringify
+  };
+
+})();
+
+</script>