From 1a30efa2df95001e8eb6ee93a3d703474108596f Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 11 Jul 2015 12:30:28 -0700 Subject: [PATCH] Update demo --- _deploy | 2 +- source/demo/frontend.html | 1800 +++++++++++++++---------- source/demo/webcomponents-lite.min.js | 6 +- 3 files changed, 1118 insertions(+), 690 deletions(-) diff --git a/_deploy b/_deploy index aaa26e2e2bd..51e2a43dfbc 160000 --- a/_deploy +++ b/_deploy @@ -1 +1 @@ -Subproject commit aaa26e2e2bd352fcb015330314ea9176292f5c80 +Subproject commit 51e2a43dfbc4f40bafffab86bc0309030666c490 diff --git a/source/demo/frontend.html b/source/demo/frontend.html index b1c6d302076..593499cbfd2 100644 --- a/source/demo/frontend.html +++ b/source/demo/frontend.html @@ -141,6 +141,12 @@ this.copyOwnProperty(n, api, prototype); } return prototype || api; }, +mixin: function (target, source) { +for (var i in source) { +target[i] = source[i]; +} +return target; +}, copyOwnProperty: function (name, source, target) { var pd = Object.getOwnPropertyDescriptor(source, name); if (pd) { @@ -516,7 +522,7 @@ debouncer.stop(); } } }); -Polymer.version = '1.0.4'; +Polymer.version = '1.0.6'; Polymer.Base._addFeature({ _registerFeatures: function () { this._prepIs(); @@ -955,6 +961,8 @@ var getInnerHTML = Polymer.domInnerHTML.getInnerHTML; var nativeInsertBefore = Element.prototype.insertBefore; var nativeRemoveChild = Element.prototype.removeChild; var nativeAppendChild = Element.prototype.appendChild; +var nativeCloneNode = Element.prototype.cloneNode; +var nativeImportNode = Document.prototype.importNode; var dirtyRoots = []; var DomApi = function (node) { this.node = node; @@ -1064,8 +1072,8 @@ node._ownerShadyRoot = root; return node._ownerShadyRoot; }, _maybeDistribute: function (node, parent) { -var fragContent = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && node.querySelector(CONTENT); -var wrappedContent = fragContent && fragContent.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE; +var fragContent = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !node.__noContent && Polymer.dom(node).querySelector(CONTENT); +var wrappedContent = fragContent && Polymer.dom(fragContent).parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE; var hasContent = fragContent || node.localName === CONTENT; if (hasContent) { var root = this._ownerShadyRootForNode(parent); @@ -1083,8 +1091,8 @@ return parentNeedsDist || hasContent && !wrappedContent; }, _tryRemoveUndistributedNode: function (node) { if (this.node.shadyRoot) { -if (node.parentNode) { -nativeRemoveChild.call(node.parentNode, node); +if (node._composedParent) { +nativeRemoveChild.call(node._composedParent, node); } return true; } @@ -1093,7 +1101,7 @@ _updateInsertionPoints: function (host) { host.shadyRoot._insertionPoints = factory(host.shadyRoot).querySelectorAll(CONTENT); }, _nodeIsInLogicalTree: function (node) { -return Boolean(node._lightParent || node._isShadyRoot || this._ownerShadyRootForNode(node) || node.shadyRoot); +return Boolean(node._lightParent !== undefined || node._isShadyRoot || this._ownerShadyRootForNode(node) || node.shadyRoot); }, _parentNeedsDistribution: function (parent) { return parent && parent.shadyRoot && hasInsertionPoint(parent.shadyRoot); @@ -1127,7 +1135,7 @@ if (this._contains(container, content)) { var dc$ = factory(content).getDistributedNodes(); for (var j = 0; j < dc$.length; j++) { hostNeedsDist = true; -var node = dc$[i]; +var node = dc$[j]; var parent = node.parentNode; if (parent) { removeFromComposedParent(parent, node); @@ -1266,6 +1274,31 @@ _distributeParent: function () { if (this._parentNeedsDistribution(this.parentNode)) { this._lazyDistribute(this.parentNode); } +}, +cloneNode: function (deep) { +var n = nativeCloneNode.call(this.node, false); +if (deep) { +var c$ = this.childNodes; +var d = factory(n); +for (var i = 0, nc; i < c$.length; i++) { +nc = factory(c$[i]).cloneNode(true); +d.appendChild(nc); +} +} +return n; +}, +importNode: function (externalNode, deep) { +var doc = this.node instanceof HTMLDocument ? this.node : this.node.ownerDocument; +var n = nativeImportNode.call(doc, externalNode, false); +if (deep) { +var c$ = factory(externalNode).childNodes; +var d = factory(n); +for (var i = 0, nc; i < c$.length; i++) { +nc = factory(doc).importNode(c$[i], true); +d.appendChild(nc); +} +} +return n; } }; Object.defineProperty(DomApi.prototype, 'classList', { @@ -1293,6 +1326,9 @@ this.domApi._distributeParent(); toggle: function () { this.node.classList.toggle.apply(this.node.classList, arguments); this.domApi._distributeParent(); +}, +contains: function () { +return this.node.classList.contains.apply(this.node.classList, arguments); } }; if (!Settings.useShadow) { @@ -1411,8 +1447,9 @@ if (this.node.nodeType !== Node.TEXT_NODE) { this._clear(); var d = document.createElement('div'); d.innerHTML = text; -for (var e = d.firstChild; e; e = e.nextSibling) { -this.appendChild(e); +var c$ = Array.prototype.slice.call(d.childNodes); +for (var i = 0; i < c$.length; i++) { +this.appendChild(c$[i]); } } }, @@ -1435,6 +1472,13 @@ return n; n = n.parentNode; } }; +DomApi.prototype.cloneNode = function (deep) { +return this.node.cloneNode(deep); +}; +DomApi.prototype.importNode = function (externalNode, deep) { +var doc = this.node instanceof HTMLDocument ? this.node : this.node.ownerDocument; +return doc.importNode(externalNode, deep); +}; DomApi.prototype.getDestinationInsertionPoints = function () { var n$ = this.node.getDestinationInsertionPoints(); return n$ ? Array.prototype.slice.call(n$) : []; @@ -1579,9 +1623,6 @@ factory: factory Polymer.Base._addFeature({ _prepShady: function () { this._useContent = this._useContent || Boolean(this._template); -if (this._useContent) { -this._template._hasInsertionPoint = this._template.content.querySelector('content'); -} }, _poolContent: function () { if (this._useContent) { @@ -1601,7 +1642,7 @@ this.shadyRoot = this.root; this.shadyRoot._distributionClean = false; this.shadyRoot._isShadyRoot = true; this.shadyRoot._dirtyRoots = []; -this.shadyRoot._insertionPoints = this._template._hasInsertionPoint ? this.shadyRoot.querySelectorAll('content') : []; +this.shadyRoot._insertionPoints = !this._notes || this._notes._hasContent ? this.shadyRoot.querySelectorAll('content') : []; saveLightChildrenIfNeeded(this.shadyRoot); this.shadyRoot.host = this; }, @@ -1961,6 +2002,9 @@ var annote = { bindings: [], events: [] }; +if (element.localName === 'content') { +list._hasContent = true; +} this._parseChildNodesAnnotations(element, annote, list); if (element.attributes) { this._parseNodeAttributeAnnotations(element, annote, list); @@ -2320,6 +2364,7 @@ var MOUSE_EVENTS = [ 'mouseup', 'click' ]; +var IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/); var mouseCanceller = function (mouseEvent) { mouseEvent[HANDLED_OBJ] = { skip: true }; if (mouseEvent.type === 'click') { @@ -2344,6 +2389,9 @@ document.removeEventListener(en, mouseCanceller, true); } } function ignoreMouse() { +if (IS_TOUCH_ONLY) { +return; +} if (!POINTERSTATE.mouse.mouseIgnoreJob) { setupTeardownMouseCanceller(true); } @@ -2392,6 +2440,12 @@ node = next; } return node; }, +findOriginalTarget: function (ev) { +if (ev.path) { +return ev.path[0]; +} +return ev.target; +}, handleNative: function (ev) { var handled; var type = ev.type; @@ -2476,12 +2530,18 @@ node[GESTURE_KEY] = gobj = {}; } for (var i = 0, dep, gd; i < deps.length; i++) { dep = deps[i]; +if (IS_TOUCH_ONLY && MOUSE_EVENTS.indexOf(dep) > -1) { +continue; +} gd = gobj[dep]; if (!gd) { -gobj[dep] = gd = {}; +gobj[dep] = gd = { _count: 0 }; +} +if (gd._count === 0) { node.addEventListener(dep, this.handleNative); } gd[name] = (gd[name] || 0) + 1; +gd._count = (gd._count || 0) + 1; } node.addEventListener(evType, handler); if (recognizer.touchAction) { @@ -2499,9 +2559,10 @@ dep = deps[i]; gd = gobj[dep]; if (gd && gd[name]) { gd[name] = (gd[name] || 1) - 1; -if (gd[name] === 0) { -node.removeEventListener(dep, this.handleNative); +gd._count = (gd._count || 1) - 1; } +if (gd._count === 0) { +node.removeEventListener(dep, this.handleNative); } } } @@ -2563,7 +2624,7 @@ emits: [ 'up' ], mousedown: function (e) { -var t = e.currentTarget; +var t = Gestures.findOriginalTarget(e); var self = this; var upfn = function upfn(e) { self.fire('up', t, e); @@ -2573,10 +2634,10 @@ document.addEventListener('mouseup', upfn); this.fire('down', t, e); }, touchstart: function (e) { -this.fire('down', e.currentTarget, e.changedTouches[0]); +this.fire('down', Gestures.findOriginalTarget(e), e.changedTouches[0]); }, touchend: function (e) { -this.fire('up', e.currentTarget, e.changedTouches[0]); +this.fire('up', Gestures.findOriginalTarget(e), e.changedTouches[0]); }, fire: function (type, target, event) { var self = this; @@ -2632,7 +2693,7 @@ var dy = Math.abs(this.info.y - y); return dx >= TRACK_DISTANCE || dy >= TRACK_DISTANCE; }, mousedown: function (e) { -var t = e.currentTarget; +var t = Gestures.findOriginalTarget(e); var self = this; var movefn = function movefn(e) { var x = e.clientX, y = e.clientY; @@ -2666,7 +2727,7 @@ this.info.x = ct.clientX; this.info.y = ct.clientY; }, touchmove: function (e) { -var t = e.currentTarget; +var t = Gestures.findOriginalTarget(e); var ct = e.changedTouches[0]; var x = ct.clientX, y = ct.clientY; if (this.hasMovedEnough(x, y)) { @@ -2680,7 +2741,7 @@ this.info.started = true; } }, touchend: function (e) { -var t = e.currentTarget; +var t = Gestures.findOriginalTarget(e); var ct = e.changedTouches[0]; if (this.info.started) { Gestures.prevent('tap'); @@ -2756,9 +2817,10 @@ this.forward(e.changedTouches[0]); forward: function (e) { var dx = Math.abs(e.clientX - this.info.x); var dy = Math.abs(e.clientY - this.info.y); +var t = Gestures.findOriginalTarget(e); if (isNaN(dx) || isNaN(dy) || dx <= TAP_DISTANCE && dy <= TAP_DISTANCE) { if (!this.info.prevent) { -Gestures.fire(e.target, 'tap', { +Gestures.fire(t, 'tap', { x: e.clientX, y: e.clientY, sourceEvent: e @@ -2796,50 +2858,55 @@ Gestures.setTouchAction(node, DIRECTION_MAP[direction] || 'auto'); }); Polymer.Gestures = Gestures; }()); -Polymer.Async = function () { -var currVal = 0; -var lastVal = 0; -var callbacks = []; -var twiddle = document.createTextNode(''); -function runAsync(callback, waitTime) { +Polymer.Async = { +_currVal: 0, +_lastVal: 0, +_callbacks: [], +_twiddleContent: 0, +_twiddle: document.createTextNode(''), +run: function (callback, waitTime) { if (waitTime > 0) { return ~setTimeout(callback, waitTime); } else { -twiddle.textContent = currVal++; -callbacks.push(callback); -return currVal - 1; +this._twiddle.textContent = this._twiddleContent++; +this._callbacks.push(callback); +return this._currVal++; } -} -function cancelAsync(handle) { +}, +cancel: function (handle) { if (handle < 0) { clearTimeout(~handle); } else { -var idx = handle - lastVal; +var idx = handle - this._lastVal; if (idx >= 0) { -if (!callbacks[idx]) { +if (!this._callbacks[idx]) { throw 'invalid async handle: ' + handle; } -callbacks[idx] = null; +this._callbacks[idx] = null; } } -} -function atEndOfMicrotask() { -var len = callbacks.length; +}, +_atEndOfMicrotask: function () { +var len = this._callbacks.length; for (var i = 0; i < len; i++) { -var cb = callbacks[i]; +var cb = this._callbacks[i]; if (cb) { +try { cb(); +} catch (e) { +i++; +this._callbacks.splice(0, i); +this._lastVal += i; +this._twiddle.textContent = this._twiddleContent++; +throw e; } } -callbacks.splice(0, len); -lastVal += len; } -new (window.MutationObserver || JsMutationObserver)(atEndOfMicrotask).observe(twiddle, { characterData: true }); -return { -run: runAsync, -cancel: cancelAsync +this._callbacks.splice(0, len); +this._lastVal += len; +} }; -}(); +new (window.MutationObserver || JsMutationObserver)(Polymer.Async._atEndOfMicrotask.bind(Polymer.Async)).observe(Polymer.Async._twiddle, { characterData: true }); Polymer.Debounce = function () { var Async = Polymer.Async; var Debouncer = function (context) { @@ -2994,28 +3061,23 @@ elt[n] = props[n]; } } return elt; -}, -mixin: function (target, source) { -for (var i in source) { -target[i] = source[i]; -} } }); Polymer.Bind = { prepareModel: function (model) { model._propertyEffects = {}; model._bindListeners = []; -var api = this._modelApi; -for (var n in api) { -model[n] = api[n]; -} +Polymer.Base.mixin(model, this._modelApi); }, _modelApi: { _notifyChange: function (property) { var eventName = Polymer.CaseMap.camelToDashCase(property) + '-changed'; -this.fire(eventName, { value: this[property] }, { bubbles: false }); +Polymer.Base.fire(eventName, { value: this[property] }, { +bubbles: false, +node: this +}); }, -_propertySet: function (property, value, effects) { +_propertySetter: function (property, value, effects, fromAbove) { var old = this.__data__[property]; if (old !== value && (old === old || value === value)) { this.__data__[property] = value; @@ -3026,16 +3088,25 @@ if (this._propertyChanged) { this._propertyChanged(property, value, old); } if (effects) { -this._effectEffects(property, value, effects, old); +this._effectEffects(property, value, effects, old, fromAbove); } } return old; }, -_effectEffects: function (property, value, effects, old) { +__setProperty: function (property, value, quiet, node) { +node = node || this; +var effects = node._propertyEffects && node._propertyEffects[property]; +if (effects) { +node._propertySetter(property, value, effects, quiet); +} else { +node[property] = value; +} +}, +_effectEffects: function (property, value, effects, old, fromAbove) { effects.forEach(function (fx) { var fn = Polymer.Bind['_' + fx.kind + 'Effect']; if (fn) { -fn.call(this, property, value, fx.effect, old); +fn.call(this, property, value, fx.effect, old, fromAbove); } }, this); }, @@ -3093,10 +3164,13 @@ return this.__data__[property]; } }; var setter = function (value) { -this._propertySet(property, value, effects); +this._propertySetter(property, value, effects); }; -if (model.getPropertyInfo && model.getPropertyInfo(property).readOnly) { +var info = model.getPropertyInfo && model.getPropertyInfo(property); +if (info && info.readOnly) { +if (!info.computed) { model['_set' + this.upper(property)] = setter; +} } else { defun.set = setter; } @@ -3167,11 +3241,13 @@ return this._applyEffectValue(calc, effect); _reflectEffect: function (source) { this.reflectPropertyToAttribute(source); }, -_notifyEffect: function (source) { +_notifyEffect: function (source, value, effect, old, fromAbove) { +if (!fromAbove) { this._notifyChange(source); +} }, -_functionEffect: function (source, value, fn, old) { -fn.call(this, source, value, old); +_functionEffect: function (source, value, fn, old, fromAbove) { +fn.call(this, source, value, old, fromAbove); }, _observerEffect: function (source, value, effect, old) { var fn = this[effect.method]; @@ -3197,7 +3273,7 @@ var args = Polymer.Bind._marshalArgs(this.__data__, effect, source, value); if (args) { var fn = this[effect.method]; if (fn) { -this[effect.property] = fn.apply(this, args); +this.__setProperty(effect.property, fn.apply(this, args)); } else { this._warn(this._logf('_computeEffect', 'compute method `' + effect.method + '` not defined')); } @@ -3270,6 +3346,7 @@ if (prop.observer) { this._addObserverEffect(p, prop.observer); } if (prop.computed) { +prop.readOnly = true; this._addComputedEffect(p, prop.computed); } if (prop.notify) { @@ -3460,12 +3537,13 @@ this._configure(); }, _configure: function () { this._configureAnnotationReferences(); +this._aboveConfig = this.mixin({}, this._config); var config = {}; this.behaviors.forEach(function (b) { this._configureProperties(b.properties, config); }, this); this._configureProperties(this.properties, config); -this._mixinConfigure(config, this._config); +this._mixinConfigure(config, this._aboveConfig); this._config = config; this._distributeConfig(this._config); }, @@ -3509,18 +3587,13 @@ node._configValue(x.effect.name, value); }, _afterClientsReady: function () { this._executeStaticEffects(); -this._applyConfig(this._config); +this._applyConfig(this._config, this._aboveConfig); this._flushHandlers(); }, -_applyConfig: function (config) { +_applyConfig: function (config, aboveConfig) { for (var n in config) { if (this[n] === undefined) { -var effects = this._propertyEffects[n]; -if (effects) { -this._propertySet(n, config[n], effects); -} else { -this[n] = config[n]; -} +this.__setProperty(n, config[n], n in aboveConfig); } } }, @@ -3549,12 +3622,13 @@ h[0].call(this, h[1], h[2]); 'use strict'; Polymer.Base._addFeature({ notifyPath: function (path, value, fromAbove) { -var old = this._propertySet(path, value); +var old = this._propertySetter(path, value); if (old !== value && (old === old || value === value)) { this._pathEffector(path, value); if (!fromAbove) { this._notifyPath(path, value); } +return true; } }, _getPathParts: function (path) { @@ -3587,6 +3661,15 @@ return; } array = Array.isArray(prop) ? prop : null; } +if (array) { +var coll = Polymer.Collection.get(array); +var old = prop[last]; +var key = coll.getKey(old); +if (key) { +parts[i] = key; +coll.setItem(key, value); +} +} prop[last] = value; if (!root) { this.notifyPath(parts.join('.'), value); @@ -3740,9 +3823,8 @@ return ret; splice: function (path, start, deleteCount) { var array = this.get(path); var args = Array.prototype.slice.call(arguments, 1); -var rem = array.slice(start, start + deleteCount); var ret = array.splice.apply(array, args); -this._notifySplice(array, path, start, args.length - 2, rem); +this._notifySplice(array, path, start, args.length - 2, ret); return ret; }, shift: function (path) { @@ -3888,12 +3970,12 @@ var VAR_START = '--'; var MEDIA_START = '@media'; var AT_START = '@'; var rx = { -comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim, +comments: /\/\*[^*]*\*+([^\/*][^*]*\*+)*\//gim, port: /@import[^;]*;/gim, -customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?;/gim, -mixinProp: /(?:^|[\s;])--[^;{]*?:[^{;]*?{[^}]*?};?/gim, -mixinApply: /@apply[\s]*\([^)]*?\)[\s]*;/gim, -varApply: /[^;:]*?:[^;]*var[^;]*;/gim, +customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?(?:[;\n]|$)/gim, +mixinProp: /(?:^|[\s;])--[^;{]*?:[^{;]*?{[^}]*?}(?:[;\n]|$)?/gim, +mixinApply: /@apply[\s]*\([^)]*?\)[\s]*(?:[;\n]|$)?/gim, +varApply: /[^;:]*?:[^;]*var[^;]*(?:[;\n]|$)?/gim, keyframesRule: /^@[^\s]*keyframes/ }; return api; @@ -4069,25 +4151,33 @@ rule.selector = p$.join(COMPLEX_SELECTOR_SEP); }, _transformComplexSelector: function (selector, scope, hostScope) { var stop = false; +var hostContext = false; var self = this; selector = selector.replace(SIMPLE_SELECTOR_SEP, function (m, c, s) { if (!stop) { -var o = self._transformCompoundSelector(s, c, scope, hostScope); -if (o.stop) { -stop = true; -} -c = o.combinator; -s = o.value; +var info = self._transformCompoundSelector(s, c, scope, hostScope); +stop = stop || info.stop; +hostContext = hostContext || info.hostContext; +c = info.combinator; +s = info.value; } else { s = s.replace(SCOPE_JUMP, ' '); } return c + s; }); +if (hostContext) { +selector = selector.replace(HOST_CONTEXT_PAREN, function (m, pre, paren, post) { +return pre + paren + ' ' + hostScope + post + COMPLEX_SELECTOR_SEP + ' ' + pre + hostScope + paren + post; +}); +} return selector; }, _transformCompoundSelector: function (selector, combinator, scope, hostScope) { var jumpIndex = selector.search(SCOPE_JUMP); -if (selector.indexOf(HOST) >= 0) { +var hostContext = false; +if (selector.indexOf(HOST_CONTEXT) >= 0) { +hostContext = true; +} else if (selector.indexOf(HOST) >= 0) { selector = selector.replace(HOST_PAREN, function (m, host, paren) { return hostScope + paren; }); @@ -4106,7 +4196,8 @@ stop = true; return { value: selector, combinator: combinator, -stop: stop +stop: stop, +hostContext: hostContext }; }, _transformSimpleSelector: function (selector, scope) { @@ -4138,6 +4229,8 @@ var SIMPLE_SELECTOR_SEP = /(^|[\s>+~]+)([^\s>+~]+)/g; var HOST = ':host'; var ROOT = ':root'; var HOST_PAREN = /(\:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g; +var HOST_CONTEXT = ':host-context'; +var HOST_CONTEXT_PAREN = /(.*)(?:\:host-context)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))(.*)/; var CONTENT = '::content'; var SCOPE_JUMP = /\:\:content|\:\:shadow|\/deep\//; var CSS_CLASS_PREFIX = '.'; @@ -4518,7 +4611,7 @@ var cssText = style ? style.textContent || '' : this.transformStyles(element, pr var s = element._customStyle; if (s && !nativeShadow && s !== style) { s._useCount--; -if (s._useCount <= 0) { +if (s._useCount <= 0 && s.parentNode) { s.parentNode.removeChild(s); } } @@ -4539,14 +4632,23 @@ element._customStyle = style; } return style; }, +mixinCustomStyle: function (props, customStyle) { +var v; +for (var i in customStyle) { +v = customStyle[i]; +if (v || v === 0) { +props[i] = v; +} +} +}, rx: { -VAR_ASSIGN: /(?:^|;\s*)(--[^\:;]*?):\s*?(?:([^;{]*?)|{([^}]*)})(?=;)/gim, -MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\);?/im, -VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gim, -VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gim, +VAR_ASSIGN: /(?:^|[;\n]\s*)(--[\w-]*?):\s*(?:([^;{]*)|{([^}]*)})(?:(?=[;\n])|$)/gi, +MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\)/i, +VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gi, +VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gi, IS_VAR: /^--/, BRACKETED: /\{[^}]*\}/g, -HOST_PREFIX: '(?:^|[^.])', +HOST_PREFIX: '(?:^|[^.#[:])', HOST_SUFFIX: '($|[.:[\\s>+~])' }, HOST_SELECTORS: [':host'], @@ -4559,41 +4661,6 @@ var v = 1 << n % 32; bits[o] = (bits[o] || 0) | v; } }(); -Polymer.StyleDefaults = function () { -var styleProperties = Polymer.StyleProperties; -var styleUtil = Polymer.StyleUtil; -var api = { -_styles: [], -_properties: null, -addStyle: function (style) { -this._styles.push(style); -this._properties = null; -}, -get _styleProperties() { -if (!this._properties) { -styleProperties.decorateStyles(this._styles); -this._styles._scopeStyleProperties = null; -this._properties = styleProperties.scopePropertiesFromStyles(this._styles); -styleProperties.reify(this._properties); -} -return this._properties; -}, -_needsStyleProperties: function () { -}, -_computeStyleProperties: function () { -return this._styleProperties; -}, -updateStyles: function () { -this._styleCache.clear(); -for (var i = 0, s; i < this._styles.length; i++) { -s = this._styles[i]; -s = s.__importElement || s; -s._apply(); -} -} -}; -return api; -}(); (function () { Polymer.StyleCache = function () { this.cache = {}; @@ -4624,8 +4691,10 @@ clear: function () { this.cache = {}; }, _objectsEqual: function (target, source) { +var t, s; for (var i in target) { -if (target[i] !== source[i]) { +t = target[i], s = source[i]; +if (!(typeof t === 'object' && t ? this._objectsStrictlyEqual(t, s) : t === s)) { return false; } } @@ -4633,9 +4702,55 @@ if (Array.isArray(target)) { return target.length === source.length; } return true; +}, +_objectsStrictlyEqual: function (target, source) { +return this._objectsEqual(target, source) && this._objectsEqual(source, target); } }; }()); +Polymer.StyleDefaults = function () { +var styleProperties = Polymer.StyleProperties; +var styleUtil = Polymer.StyleUtil; +var StyleCache = Polymer.StyleCache; +var api = { +_styles: [], +_properties: null, +customStyle: {}, +_styleCache: new StyleCache(), +addStyle: function (style) { +this._styles.push(style); +this._properties = null; +}, +get _styleProperties() { +if (!this._properties) { +styleProperties.decorateStyles(this._styles); +this._styles._scopeStyleProperties = null; +this._properties = styleProperties.scopePropertiesFromStyles(this._styles); +styleProperties.mixinCustomStyle(this._properties, this.customStyle); +styleProperties.reify(this._properties); +} +return this._properties; +}, +_needsStyleProperties: function () { +}, +_computeStyleProperties: function () { +return this._styleProperties; +}, +updateStyles: function (properties) { +this._properties = null; +if (properties) { +Polymer.Base.mixin(this.customStyle, properties); +} +this._styleCache.clear(); +for (var i = 0, s; i < this._styles.length; i++) { +s = this._styles[i]; +s = s.__importElement || s; +s._apply(); +} +} +}; +return api; +}(); (function () { 'use strict'; var serializeValueToAttribute = Polymer.Base.serializeValueToAttribute; @@ -4665,6 +4780,7 @@ if (!scope._styleCache) { scope._styleCache = new Polymer.StyleCache(); } var scopeData = propertyUtils.propertyDataFromStyles(scope._styles, this); +scopeData.key.customStyle = this.customStyle; info = scope._styleCache.retrieve(this.is, scopeData.key, this._styles); var scopeCached = Boolean(info); if (scopeCached) { @@ -4679,15 +4795,14 @@ info = styleCache.retrieve(this.is, this._ownStyleProperties, this._styles); var globalCached = Boolean(info) && !scopeCached; var style = this._applyStyleProperties(info); if (!scopeCached) { -var cacheableStyle = style; -if (nativeShadow) { -cacheableStyle = style.cloneNode ? style.cloneNode(true) : Object.create(style || null); -} +style = style && nativeShadow ? style.cloneNode(true) : style; info = { -style: cacheableStyle, +style: style, _scopeSelector: this._scopeSelector, _styleProperties: this._styleProperties }; +scopeData.key.customStyle = {}; +this.mixin(scopeData.key.customStyle, this.customStyle); scope._styleCache.store(this.is, info, scopeData.key, this._styles); if (!globalCached) { styleCache.store(this.is, Object.create(info), this._ownStyleProperties, this._styles); @@ -4704,7 +4819,7 @@ this.mixin(props, propertyUtils.hostPropertiesFromStyles(this._styles)); scopeProps = scopeProps || propertyUtils.propertyDataFromStyles(scope._styles, this).properties; this.mixin(props, scopeProps); this.mixin(props, propertyUtils.scopePropertiesFromStyles(this._styles)); -this.mixin(props, this.customStyle); +propertyUtils.mixinCustomStyle(props, this.customStyle); propertyUtils.reify(props); this._styleProperties = props; }, @@ -4721,10 +4836,10 @@ _applyStyleProperties: function (info) { var oldScopeSelector = this._scopeSelector; this._scopeSelector = info ? info._scopeSelector : this.is + '-' + this.__proto__._scopeCount++; var style = propertyUtils.applyElementStyle(this, this._styleProperties, this._scopeSelector, info && info.style); -if ((style || oldScopeSelector) && !nativeShadow) { +if (!nativeShadow) { propertyUtils.applyElementScopeSelector(this, this._scopeSelector, oldScopeSelector, this._scopeCssViaAttr); } -return style || {}; +return style; }, serializeValueToAttribute: function (value, attribute, node) { node = node || this; @@ -4743,8 +4858,11 @@ selector += (selector ? ' ' : '') + SCOPE_NAME + ' ' + this.is + (element._scope } return selector; }, -updateStyles: function () { +updateStyles: function (properties) { if (this.isAttached) { +if (properties) { +this.mixin(this.customStyle, properties); +} if (this._needsStyleProperties()) { this._updateStyleProperties(); } else { @@ -4768,8 +4886,8 @@ c.updateStyles(); } } }); -Polymer.updateStyles = function () { -styleDefaults.updateStyles(); +Polymer.updateStyles = function (properties) { +styleDefaults.updateStyles(properties); Polymer.Base._updateRootStyles(document); }; var styleCache = new Polymer.StyleCache(); @@ -4866,7 +4984,7 @@ styleTransformer.documentRule(rule); }); }()); Polymer.Templatizer = { -properties: { _hideTemplateChildren: { observer: '_showHideChildren' } }, +properties: { __hideTemplateChildren__: { observer: '_showHideChildren' } }, _templatizerStatic: { count: 0, callbacks: {}, @@ -4895,6 +5013,7 @@ this._prepParentProperties(archetype, template); archetype._notifyPath = this._notifyPathImpl; archetype._scopeElementClass = this._scopeElementClassImpl; archetype.listen = this._listenImpl; +archetype._showHideChildren = this._showHideChildrenImpl; var _constructor = this._constructorImpl; var ctor = function TemplateInstance(model, host) { _constructor.call(this, model, host); @@ -4907,7 +5026,15 @@ this.ctor = ctor; _getRootDataHost: function () { return this.dataHost && this.dataHost._rootDataHost || this.dataHost; }, -_showHideChildren: function (hidden) { +_showHideChildrenImpl: function (hide) { +var c = this._children; +for (var i = 0; i < c.length; i++) { +var n = c[i]; +if (n.style) { +n.style.display = hide ? 'none' : ''; +n.__hideTemplateChildren__ = hide; +} +} }, _debounceTemplate: function (fn) { this._templatizerStatic.callbacks[this._templatizerId] = fn.bind(this); @@ -4930,6 +5057,9 @@ var parentProps = archetype._parentProps; for (var prop in parentProps) { archetype._addPropertyEffect(prop, 'function', this._createHostPropEffector(prop)); } +for (var prop in this._instanceProps) { +archetype._addPropertyEffect(prop, 'function', this._createInstancePropEffector(prop)); +} }, _customPrepAnnotations: function (archetype, template) { archetype._template = template; @@ -4988,18 +5118,29 @@ return function (source, value) { this.dataHost['_parent_' + prop] = value; }; }, +_createInstancePropEffector: function (prop) { +return function (source, value, old, fromAbove) { +if (!fromAbove) { +this.dataHost._forwardInstanceProp(this, prop, value); +} +}; +}, _extendTemplate: function (template, proto) { Object.getOwnPropertyNames(proto).forEach(function (n) { var val = template[n]; var pd = Object.getOwnPropertyDescriptor(proto, n); Object.defineProperty(template, n, pd); if (val !== undefined) { -template._propertySet(n, val); +template._propertySetter(n, val); } }); }, +_showHideChildren: function (hidden) { +}, _forwardInstancePath: function (inst, path, value) { }, +_forwardInstanceProp: function (inst, prop, value) { +}, _notifyPathImpl: function (path, value) { var dataHost = this.dataHost; var dot = path.indexOf('.'); @@ -5022,6 +5163,7 @@ this._rootDataHost = host._getRootDataHost(); this._setupConfigure(model); this._pushHost(host); this.root = this.instanceTemplate(this._template); +this.root.__noContent = !this._notes._hasContent; this.root.__styleScoped = true; this._popHost(); this._marshalAnnotatedNodes(); @@ -5033,6 +5175,9 @@ children.push(n); n._templateInstance = this; } this._children = children; +if (host.__hideTemplateChildren__) { +this._showHideChildren(true); +} this._tryReady(); }, _listenImpl: function (node, eventName, methodName) { @@ -5059,6 +5204,20 @@ model[prop] = this['_parent_' + prop]; } } return new this.ctor(model, this); +}, +modelForElement: function (el) { +var model; +while (el) { +if (model = el._templateInstance) { +if (model.dataHost != this) { +el = model.dataHost; +} else { +return model; +} +} else { +el = el.parentNode; +} +} } }; Polymer({ @@ -5105,7 +5264,7 @@ this._removeFromMap(this.store[key]); delete this.store[key]; }, _removeFromMap: function (item) { -if (typeof item == 'object') { +if (item && typeof item == 'object') { this.omap.delete(item); } else { delete this.pmap[item]; @@ -5117,7 +5276,7 @@ this.removeKey(key); return key; }, getKey: function (item) { -if (typeof item == 'object') { +if (item && typeof item == 'object') { return this.omap.get(item); } else { return this.pmap[item]; @@ -5126,8 +5285,17 @@ return this.pmap[item]; getKeys: function () { return Object.keys(this.store); }, -setItem: function (key, value) { -this.store[key] = value; +setItem: function (key, item) { +var old = this.store[key]; +if (old) { +this._removeFromMap(old); +} +if (item && typeof item == 'object') { +this.omap.set(item, key); +} else { +this.pmap[item] = key; +} +this.store[key] = item; }, getItem: function (key) { return this.store[key]; @@ -5289,7 +5457,7 @@ return; }, render: function () { this._fullRefresh = true; -this.debounce('render', this._render); +this._debounceTemplate(this._render); this._flushTemplates(); }, _render: function () { @@ -5321,9 +5489,9 @@ rowForKey[key] = i; if (!row) { this.rows.push(row = this._insertRow(i, null, item)); } -row[this.as] = item; -row.__key__ = key; -row[this.indexAs] = i; +row.__setProperty(this.as, item, true); +row.__setProperty('__key__', key, true); +row.__setProperty(this.indexAs, i, true); } for (; i < this.rows.length; i++) { this._detachRow(i); @@ -5477,27 +5645,30 @@ return row; _showHideChildren: function (hidden) { if (this.rows) { for (var i = 0; i < this.rows.length; i++) { -var c$ = this.rows[i]._children; -for (var j = 0; j < c$.length; j++) { -var c = c$[j]; -if (c.style) { -c.style.display = hidden ? 'none' : ''; -} -c._hideTemplateChildren = hidden; +this.rows[i]._showHideChildren(hidden); } } +}, +_forwardInstanceProp: function (row, prop, value) { +if (prop == this.as) { +var idx; +if (this._sortFn || this._filterFn) { +idx = this.items.indexOf(this.collection.getItem(row.__key__)); +} else { +idx = row[this.indexAs]; +} +this.set('items.' + idx, value); } }, _forwardInstancePath: function (row, path, value) { if (path.indexOf(this.as + '.') === 0) { this.notifyPath('items.' + row.__key__ + '.' + path.slice(this.as.length + 1), value); -return true; } }, _forwardParentProp: function (prop, value) { if (this.rows) { this.rows.forEach(function (row) { -row[prop] = value; +row.__setProperty(prop, value, true); }, this); } }, @@ -5519,25 +5690,11 @@ if (dot >= 0) { path = this.as + '.' + path.substring(dot + 1); row.notifyPath(path, value, true); } else { -row[this.as] = value; +row.__setProperty(this.as, value, true); } } } }, -modelForElement: function (el) { -var model; -while (el) { -if (model = el._templateInstance) { -if (model.dataHost != this) { -el = model.dataHost; -} else { -return model; -} -} else { -el = el.parentNode; -} -} -}, itemForElement: function (el) { var instance = this.modelForElement(el); return instance && instance[this.as]; @@ -5627,15 +5784,16 @@ extends: 'template', properties: { 'if': { type: Boolean, -value: false +value: false, +observer: '_queueRender' }, restamp: { type: Boolean, -value: false +value: false, +observer: '_queueRender' } }, behaviors: [Polymer.Templatizer], -observers: ['_queueRender(if, restamp)'], _queueRender: function () { this._debounceTemplate(this._render); }, @@ -5691,7 +5849,7 @@ this._instance = null; }, _wrapTextNodes: function (root) { for (var n = root.firstChild; n; n = n.nextSibling) { -if (n.nodeType === Node.TEXT_NODE) { +if (n.nodeType === Node.TEXT_NODE && n.textContent.trim()) { var s = document.createElement('span'); root.insertBefore(s, n); s.appendChild(n); @@ -5700,14 +5858,9 @@ n = s; } }, _showHideChildren: function () { -var hidden = this._hideTemplateChildren || !this.if; +var hidden = this.__hideTemplateChildren__ || !this.if; if (this._instance) { -var c$ = this._instance._children; -for (var i = 0; i < c$.length; i++) { -var c = c$[i]; -c.style.display = hidden ? 'none' : ''; -c._hideTemplateChildren = hidden; -} +this._instance._showHideChildren(hidden); } }, _forwardParentProp: function (prop, value) { @@ -6031,11 +6184,11 @@ this._removeChildren(); @@ -13406,9 +13642,10 @@ typeof define=="function"&&typeof define.amd=="object"&&define.amd?(Yn._=Zn, def /** * `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations. - * @polymerBehavior + * + * @polymerBehavior Polymer.NeonAnimationRunnerBehavior */ - Polymer.NeonAnimationRunnerBehavior = [Polymer.NeonAnimatableBehavior, { + Polymer.NeonAnimationRunnerBehaviorImpl = { properties: { @@ -13500,8 +13737,13 @@ typeof define=="function"&&typeof define.amd=="object"&&define.amd?(Yn._=Zn, def this._player.cancel(); } } + }; - }]; + /** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */ + Polymer.NeonAnimationRunnerBehavior = [ + Polymer.NeonAnimatableBehavior, + Polymer.NeonAnimationRunnerBehaviorImpl + ]; @@ -17612,6 +17703,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN