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

Unified Diff: bower_components/core-layout-trbl/core-layout-trbl.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-layout-trbl/bower.json ('k') | bower_components/core-layout-trbl/core-slide.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: bower_components/core-layout-trbl/core-layout-trbl.html
diff --git a/bower_components/core-layout-trbl/core-layout-trbl.html b/bower_components/core-layout-trbl/core-layout-trbl.html
deleted file mode 100644
index c9ea2c606ea804d3769089eb2f623aec96d42031..0000000000000000000000000000000000000000
--- a/bower_components/core-layout-trbl/core-layout-trbl.html
+++ /dev/null
@@ -1,269 +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
--->
-
-<!--
-`<core-layout-trbl>` arranges nodes horizontally via absolute positioning.
-Set the `vertical` attribute (boolean) to arrange vertically instead.
-
-`<core-layout-trbl>` arranges it's <b>sibling elements</b>, not
-it's children.
-
-One arranged node may be marked as elastic by giving it a `flex`
-attribute (boolean).
-
-You may remove a node from layout by giving it a `nolayout`
-attribute (boolean).
-
-CSS Notes:
-
-`padding` is ignored on the parent node.
-`margin` is ignored on arranged nodes.
-`min-width` is ignored on arranged nodes, use `min-width` on the parent node
-instead.
-
-Example:
-
-Arrange three `div` into columns. `flex` attribute on Column Two makes that
-column elastic.
-
- <core-layout-trbl></core-layout-trbl>
- <div>Column One</div>
- <div flex>Column Two</div>
- <div>Column Three</div>
-
-Remember that `<core-layout-trbl>` arranges it's sibling elements, not it's children.
-
-If body has width 52 device pixels (in this case, ascii characters), call that 52px.
-Column One has it's natural width of 12px (including border), Column Three has it's
-natural width of 14px, body border uses 2px, and Column Two automatically uses the
-remaining space: 24px.
-
- |- 52px -|
- ----------------------------------------------------
- ||Column One|| Column Two ||Column Three||
- ----------------------------------------------------
- |- 12px -||- (24px) -|| 14px -|
-
-As the parent node resizes, the elastic column reacts via CSS to adjust it's size.
-No javascript is used during parent resizing, for best performance.
-
-Changes in content or sibling size are not handled automatically.
-
- ----------------------------------------------------------------
- ||Column One| Column Two |Column Three||
- ----------------------------------------------------------------
-
- --------------------------------------
- ||Column One|Column Two|Column Three||
- --------------------------------------
-
-Arrange in rows by adding the `vertical` attribute.
-
-Example:
-
- <core-layout-trbl vertical></core-layout-trbl>
- <div>Row One</div>
- <div flex>Row Two</div>
- <div>Row Three</div>
-
-This setup will cause Row Two to stretch to fill the container.
-
- ----------- -----------
- |---------| |---------|
- | | | |
- |Row One | |Row One |
- | | | |
- |---------| |---------|
- | | | |
- |Row Two | |Row Two |
- | | | |
- |---------| | |
- | | | |
- |Row Three| | |
- | | |---------|
- |---------| | |
- ----------- |Row Three|
- | |
- |---------|
- |---------|
-
-Layouts can be nested arbitrarily.
-
- <core-layout-trbl></core-layout-trbl>
- <div>Menu</div>
- <div flex>
- <core-layout-trbl vertical></core-layout-trbl>
- <div>Title</div>
- <div>Toolbar</div>
- <div flex>Main</div>
- <div>Footer</div>
- </div>
-
-Renders something like this
-
- --------------------------------
- ||Menu ||Title ||
- || ||-----------------||
- || ||Toolbar ||
- || ||-----------------||
- || ||Main ||
- || || ||
- || ||-----------------||
- || ||Footer ||
- --------------------------------
-
-@group Polymer Core Elements
-@element core-layout-trbl
--->
-<link rel="import" href="../polymer/polymer.html">
-
-<polymer-element name="core-layout-trbl" attributes="vertical">
-
- <template>
-
- <style>
- :host {
- display: none;
- }
- </style>
-
- </template>
-
- <script>
-
- Polymer('core-layout-trbl', {
-
- vertical: false,
-
- ready: function() {
- this.setAttribute('nolayout', '');
- },
-
- attached: function() {
- this.asyncMethod(function() {
- this.prepare();
- this.layout();
- });
- },
-
- prepare: function() {
- var parent = this.parentNode.host || this.parentNode;
- // explicit position harmful on <body>
- if (parent.localName !== 'body') {
- // may recalc
- var cs = window.getComputedStyle(parent);
- if (cs.position === 'static') {
- parent.style.position = 'relative';
- }
- //parent.style.overflow = 'hidden';
- }
- // changes will cause another recalc at next validation step
- var stylize = this.stylize, vertical;
- this.parentNode.childNodes.array().forEach(function(c, i) {
- if (c.nodeType === Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) {
- stylize(c, {
- position: 'absolute',
- boxSizing: 'border-box',
- MozBoxSizing: 'border-box',
- });
- // test for auto-vertical
- if (vertical === undefined) {
- vertical = (c.offsetWidth == 0 && c.offsetHeight !== 0);
- }
- }
- });
- this.vertical = this.vertical || vertical;
- },
-
- /**
- * Arrange sibling nodes end-to-end in one dimension.
- *
- * Arrangement is horizontal unless the `vertical`
- * attribute is applied on this node.
- *
- * @method layout
- */
- layout: function() {
- var parent = this.parentNode.host || this.parentNode;
- var vertical = this.vertical;
- var ww = 0, hh = 0, pre = [], fit, post = [];
- var list = pre;
- // gather element information (at most one recalc)
- this.parentNode.childNodes.array().forEach(function(c, i) {
- if (c.nodeType===Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) {
- var info = {
- element: c,
- w: c.offsetWidth,
- h: c.offsetHeight
- };
- if (!c.hasAttribute('fit') && !c.hasAttribute('flex')) {
- ww += c.offsetWidth;
- hh += c.offsetHeight;
- list.push(info);
- } else {
- fit = c;
- list = post;
- ww = hh = 0;
- }
- }
- });
- // update layout styles (invalidate, no recalc)
- var v = 0;
- var mxp = 0, myp = 0;
- var stylize = this.stylize;
- pre.forEach(function(info) {
- if (vertical) {
- stylize(info.element, {
- top: v + 'px', right: mxp, height: info.h + 'px', left: mxp
- });
- } else {
- stylize(info.element, {
- top: myp, width: info.w + 'px', bottom: myp, left: v + 'px'
- });
- }
- v += vertical ? info.h : info.w;
- });
- if (fit) {
- if (vertical) {
- stylize(fit, {
- top: v + 'px', right: mxp, bottom: hh + 'px', left: mxp
- });
- } else {
- stylize(fit, {
- top: myp, right: ww + 'px', bottom: myp, left: v + 'px'
- });
- }
- v = vertical ? hh : ww;
- post.forEach(function(info) {
- v -= vertical ? info.h : info.w;
- if (vertical) {
- stylize(info.element, {
- height: info.h + 'px', right: mxp, bottom: v + 'px', left: mxp
- });
- } else {
- stylize(info.element, {
- top: myp, right: v + 'px', bottom: myp, width: info.w + 'px'
- });
- }
- });
- }
- },
-
- stylize: function(element, styles) {
- var style = element.style;
- Object.keys(styles).forEach(function(k){
- style[k] = styles[k];
- });
- }
-
- });
-
- </script>
-
-</polymer-element>
« no previous file with comments | « bower_components/core-layout-trbl/bower.json ('k') | bower_components/core-layout-trbl/core-slide.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698