Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(4767)

Unified Diff: bower_components/core-style/core-style.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « bower_components/core-style/bower.json ('k') | bower_components/core-style/demo.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: bower_components/core-style/core-style.html
diff --git a/bower_components/core-style/core-style.html b/bower_components/core-style/core-style.html
deleted file mode 100644
index d0aaf5295faebe39fd2ea2747783086194ed4991..0000000000000000000000000000000000000000
--- a/bower_components/core-style/core-style.html
+++ /dev/null
@@ -1,387 +0,0 @@
-<!--
-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
--->
-<!--
-
-The `core-style` element helps manage styling inside other elements and can
-be used to make themes. The `core-style` element can be either a producer
-or consumer of styling. If it has its `id` property set, it's a producer.
-Elements that are producers should include css styling as their text content.
-If a `core-style` has its `ref` property set, it's a consumer. A `core-style`
-typically sets its `ref` property to the value of the `id` property of the
-`core-style` it wants to use. This allows a single producer to be used in
-multiple places, for example, in many different elements.
-
-It's common to place `core-style` producer elements inside HTMLImports.
-Remote stylesheets should be included this way, the &#64;import css mechanism is
-not currently supported.
-
-Here's a basic example:
-
- <polymer-element name="x-test" noscript>
- <template>
- <core-style ref="x-test"></core-style>
- <content></content>
- </template>
- </polymer-element>
-
-The `x-test` element above will be styled by any `core-style` elements that have
-`id` set to `x-test`. These `core-style` producers are separate from the element
-definition, allowing a user of the element to style it independent of the author's
-styling. For example:
-
- <core-style id="x-test">
- :host {
- backgound-color: steelblue;
- }
- </core-style>
-
-The content of the `x-test` `core-style` producer gets included inside the
-shadowRoot of the `x-test` element. If the content of the `x-test` producer
-`core-style` changes, all consumers of it are automatically kept in sync. This
-allows updating styling on the fly.
-
-The `core-style` element also supports bindings and it is the producer
-`core-style` element is the model for its content. Here's an example:
-
- <core-style id="x-test">
- :host {
- background-color: {{myColor}};
- }
- </core-style>
- <script>
- document._currentScript.ownerDocument.getElementById('x-test').myColor = 'orange';
- </script>
-
-Finally, to facilitate sharing data between `core-style` elements, all
-`core-style` elements have a `g` property which is set to the global
-`CoreStyle.g`. Here's an example:
-
- <core-style id="x-test">
- :host {
- background-color: {{g.myColor}};
- }
- </core-style>
- <script>
- CoreStyle.g.myColor = 'tomato';
- </script>
-
-Finally, one `core-style` can be nested inside another. The `core-style`
-element has a `list` property which is a map of all the `core-style` producers.
-A `core-style` producer's content is available via its `cssText` property.
-Putting this together:
-
- <core-style id="common">
- :host {
- font-family: sans-serif;
- }
- </core-style>
-
- <core-style id="x-test">
- {{list.common.cssText}}
-
- :host {
- background-color: {{g.myColor}};
- }
- </core-style>
-
-
-@group Polymer Core Elements
-@element core-style
-@homepage github.io
--->
-
-<link rel="import" href="../polymer/polymer.html">
-
-<polymer-element name="core-style" hidden>
-<script>
-(function() {
-
-window.CoreStyle = window.CoreStyle || {
- g: {},
- list: {},
- refMap: {}
-};
-
-Polymer('core-style', {
- /**
- * The `id` property should be set if the `core-style` is a producer
- * of styles. In this case, the `core-style` should have text content
- * that is cssText.
- *
- * @attribute id
- * @type string
- * @default ''
- */
-
-
- publish: {
- /**
- * The `ref` property should be set if the `core-style` element is a
- * consumer of styles. Set it to the `id` of the desired `core-style`
- * element.
- *
- * @attribute ref
- * @type string
- * @default ''
- */
- ref: ''
- },
-
- // static
- g: CoreStyle.g,
- refMap: CoreStyle.refMap,
-
- /**
- * The `list` is a map of all `core-style` producers stored by `id`. It
- * should be considered readonly. It's useful for nesting one `core-style`
- * inside another.
- *
- * @attribute list
- * @type object (readonly)
- * @default {map of all `core-style` producers}
- */
- list: CoreStyle.list,
-
- // if we have an id, we provide style
- // if we have a ref, we consume/require style
- ready: function() {
- if (this.id) {
- this.provide();
- } else {
- this.registerRef(this.ref);
- if (!window.ShadowDOMPolyfill) {
- this.require();
- }
- }
- },
-
- // can't shim until attached if using SD polyfill because need to find host
- attached: function() {
- if (!this.id && window.ShadowDOMPolyfill) {
- this.require();
- }
- },
-
- /****** producer stuff *******/
-
- provide: function() {
- this.register();
- // we want to do this asap, especially so we can do so before definitions
- // that use this core-style are registered.
- if (this.textContent) {
- this._completeProvide();
- } else {
- this.async(this._completeProvide);
- }
- },
-
- register: function() {
- var i = this.list[this.id];
- if (i) {
- if (!Array.isArray(i)) {
- this.list[this.id] = [i];
- }
- this.list[this.id].push(this);
- } else {
- this.list[this.id] = this;
- }
- },
-
- // stamp into a shadowRoot so we can monitor dom of the bound output
- _completeProvide: function() {
- this.createShadowRoot();
- this.domObserver = new MutationObserver(this.domModified.bind(this))
- .observe(this.shadowRoot, {subtree: true,
- characterData: true, childList: true});
- this.provideContent();
- },
-
- provideContent: function() {
- this.ensureTemplate();
- this.shadowRoot.textContent = '';
- this.shadowRoot.appendChild(this.instanceTemplate(this.template));
- this.cssText = this.shadowRoot.textContent;
- },
-
- ensureTemplate: function() {
- if (!this.template) {
- this.template = this.querySelector('template:not([repeat]):not([bind])');
- // move content into the template
- if (!this.template) {
- this.template = document.createElement('template');
- var n = this.firstChild;
- while (n) {
- this.template.content.appendChild(n.cloneNode(true));
- n = n.nextSibling;
- }
- }
- }
- },
-
- domModified: function() {
- this.cssText = this.shadowRoot.textContent;
- this.notify();
- },
-
- // notify instances that reference this element
- notify: function() {
- var s$ = this.refMap[this.id];
- if (s$) {
- for (var i=0, s; (s=s$[i]); i++) {
- s.require();
- }
- }
- },
-
- /****** consumer stuff *******/
-
- registerRef: function(ref) {
- //console.log('register', ref);
- this.refMap[this.ref] = this.refMap[this.ref] || [];
- this.refMap[this.ref].push(this);
- },
-
- applyRef: function(ref) {
- this.ref = ref;
- this.registerRef(this.ref);
- this.require();
- },
-
- require: function() {
- var cssText = this.cssTextForRef(this.ref);
- //console.log('require', this.ref, cssText);
- if (cssText) {
- this.ensureStyleElement();
- // do nothing if cssText has not changed
- if (this.styleElement._cssText === cssText) {
- return;
- }
- this.styleElement._cssText = cssText;
- if (window.ShadowDOMPolyfill) {
- this.styleElement.textContent = cssText;
- cssText = Platform.ShadowCSS.shimStyle(this.styleElement,
- this.getScopeSelector());
- }
- this.styleElement.textContent = cssText;
- }
- },
-
- cssTextForRef: function(ref) {
- var s$ = this.byId(ref);
- var cssText = '';
- if (s$) {
- if (Array.isArray(s$)) {
- var p = [];
- for (var i=0, l=s$.length, s; (i<l) && (s=s$[i]); i++) {
- p.push(s.cssText);
- }
- cssText = p.join('\n\n');
- } else {
- cssText = s$.cssText;
- }
- }
- if (s$ && !cssText) {
- console.warn('No styles provided for ref:', ref);
- }
- return cssText;
- },
-
- byId: function(id) {
- return this.list[id];
- },
-
- ensureStyleElement: function() {
- if (!this.styleElement) {
- this.styleElement = window.ShadowDOMPolyfill ?
- this.makeShimStyle() :
- this.makeRootStyle();
- }
- if (!this.styleElement) {
- console.warn(this.localName, 'could not setup style.');
- }
- },
-
- makeRootStyle: function() {
- var style = document.createElement('style');
- this.appendChild(style);
- return style;
- },
-
- makeShimStyle: function() {
- var host = this.findHost(this);
- if (host) {
- var name = host.localName;
- var style = document.querySelector('style[' + name + '=' + this.ref +']');
- if (!style) {
- style = document.createElement('style');
- style.setAttribute(name, this.ref);
- document.head.appendChild(style);
- }
- return style;
- }
- },
-
- getScopeSelector: function() {
- if (!this._scopeSelector) {
- var selector = '', host = this.findHost(this);
- if (host) {
- var typeExtension = host.hasAttribute('is');
- var name = typeExtension ? host.getAttribute('is') : host.localName;
- selector = Platform.ShadowCSS.makeScopeSelector(name,
- typeExtension);
- }
- this._scopeSelector = selector;
- }
- return this._scopeSelector;
- },
-
- findHost: function(node) {
- while (node.parentNode) {
- node = node.parentNode;
- }
- return node.host || wrap(document.documentElement);
- },
-
- /* filters! */
- // TODO(dfreedm): add more filters!
-
- cycle: function(rgb, amount) {
- if (rgb.match('#')) {
- var o = this.hexToRgb(rgb);
- if (!o) {
- return rgb;
- }
- rgb = 'rgb(' + o.r + ',' + o.b + ',' + o.g + ')';
- }
-
- function cycleChannel(v) {
- return Math.abs((Number(v) - amount) % 255);
- }
-
- return rgb.replace(/rgb\(([^,]*),([^,]*),([^,]*)\)/, function(m, a, b, c) {
- return 'rgb(' + cycleChannel(a) + ',' + cycleChannel(b) + ', '
- + cycleChannel(c) + ')';
- });
- },
-
- hexToRgb: function(hex) {
- var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result ? {
- r: parseInt(result[1], 16),
- g: parseInt(result[2], 16),
- b: parseInt(result[3], 16)
- } : null;
- }
-
-});
-
-
-})();
-</script>
-</polymer-element>
« no previous file with comments | « bower_components/core-style/bower.json ('k') | bower_components/core-style/demo.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698