five-bells-visualization
Version:
Tool to visualize Five Bells payments
196 lines (173 loc) • 6.43 kB
HTML
<!--
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="../lib/style-util.html">
<link rel="import" href="../lib/resolve-url.html">
<link rel="import" href="../lib/style-transformer.html">
<link rel="import" href="../lib/settings.html">
<script>
(function() {
var prepTemplate = Polymer.Base._prepTemplate;
var prepElement = Polymer.Base._prepElement;
var baseStampTemplate = Polymer.Base._stampTemplate;
var nativeShadow = Polymer.Settings.useNativeShadow;
Polymer.Base._addFeature({
// declaration-y
_prepTemplate: function() {
prepTemplate.call(this);
var port = Polymer.DomModule.import(this.is);
if (this._encapsulateStyle === undefined) {
this._encapsulateStyle =
Boolean(port && !nativeShadow);
}
// scope css
// NOTE: dom scoped via annotations
if (nativeShadow || this._encapsulateStyle) {
this._scopeCss();
}
},
_prepElement: function(element) {
if (this._encapsulateStyle) {
Polymer.StyleTransformer.element(element, this.is,
this._scopeCssViaAttr);
}
prepElement.call(this, element);
},
_scopeCss: function() {
this._styles = this._prepareStyles();
this._scopeStyles(this._styles);
},
// search for extra style modules via `styleModules`
_prepareStyles: function() {
var cssText = '', m$ = this.styleModules;
if (m$) {
for (var i=0, l=m$.length, m; (i<l) && (m=m$[i]); i++) {
cssText += this._cssFromModule(m);
}
}
cssText += this._cssFromModule(this.is);
var styles = [];
if (cssText) {
var s = document.createElement('style');
s.textContent = cssText;
styles.push(s);
}
return styles;
},
// returns cssText of styles in a given module; also un-applies any
// styles that apply to the document.
_cssFromModule: function(moduleId) {
var m = Polymer.DomModule.import(moduleId);
if (m && !m._cssText) {
var cssText = '';
var e$ = Array.prototype.slice.call(m.querySelectorAll('style'));
this._unapplyStyles(e$);
e$ = e$.concat(Array.prototype.map.call(
m.querySelectorAll(REMOTE_SHEET_SELECTOR), function(l) {
return l.import.body;
}));
m._cssText = this._cssFromStyles(e$);
}
return m && m._cssText || '';
},
_cssFromStyles: function(styles) {
var cssText = '';
for (var i=0, l=styles.length, s; (i<l) && (s = styles[i]); i++) {
if (s && s.textContent) {
cssText +=
Polymer.ResolveUrl.resolveCss(s.textContent, s.ownerDocument);
}
}
return cssText;
},
_unapplyStyles: function(styles) {
for (var i=0, l=styles.length, s; (i<l) && (s = styles[i]); i++) {
s = s.__appliedElement || s;
s.parentNode.removeChild(s);
}
},
_scopeStyles: function(styles) {
for (var i=0, l=styles.length, s; (i<l) && (s=styles[i]); i++) {
// transform style if necessary and place in correct place
if (nativeShadow) {
if (this._template) {
this._template.content.appendChild(s);
}
} else {
var rules = this._rulesForStyle(s);
Polymer.StyleUtil.applyCss(
Polymer.StyleTransformer.css(rules, this.is, this.extends,
null, this._scopeCssViaAttr),
this.is, null, true);
}
}
},
_rulesForStyle: function(style) {
if (!style.__cssRules) {
style.__cssRules = Polymer.StyleUtil.parser.parse(style.textContent);
}
return style.__cssRules;
},
// instance-y
_stampTemplate: function() {
if (this._encapsulateStyle) {
Polymer.StyleTransformer.host(this, this.is);
}
baseStampTemplate.call(this);
},
// add scoping class whenever an element is added to localDOM
_elementAdd: function(node) {
if (this._encapsulateStyle && !node.__styleScoped) {
Polymer.StyleTransformer.dom(node, this.is, this._scopeCssViaAttr);
}
},
// remove scoping class whenever an element is removed from localDOM
_elementRemove: function(node) {
if (this._encapsulateStyle) {
Polymer.StyleTransformer.dom(node, this.is, this._scopeCssViaAttr, true);
}
},
/**
* Apply style scoping to the specified `container` and all its
* descendants. If `shoudlObserve` is true, changes to the container are
* monitored via mutation observer and scoping is applied.
*/
scopeSubtree: function(container, shouldObserve) {
if (nativeShadow) {
return;
}
var self = this;
var scopify = function(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
node.className = self._scopeElementClass(node, node.className);
var n$ = node.querySelectorAll('*');
Array.prototype.forEach.call(n$, function(n) {
n.className = self._scopeElementClass(n, n.className);
});
}
};
scopify(container);
if (shouldObserve) {
var mo = new MutationObserver(function(mxns) {
mxns.forEach(function(m) {
if (m.addedNodes) {
for (var i=0; i < m.addedNodes.length; i++) {
scopify(m.addedNodes[i]);
}
}
});
});
mo.observe(container, {childList: true, subtree: true});
return mo;
}
}
});
var REMOTE_SHEET_SELECTOR = 'link[rel=import][type~=css]';
})();
</script>