Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
simplify comments, fix accidental global
Browse files Browse the repository at this point in the history
  • Loading branch information
Scott J. Miles committed Apr 6, 2014
1 parent 025b040 commit efc22b0
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 127 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
core-layout-trbl
================

See //polymer.github.io/core-layout-trbl
See the [component page](http://polymer.github.io/core-layout-trbl) for more information.
250 changes: 124 additions & 126 deletions core-layout-trbl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,123 +6,120 @@
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
-->

<!--
/**
* @group Polymer Core Elements
*
* `<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 ||
* --------------------------------
*
* @element core-layout-trbl
*
*/
`<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">

Expand Down Expand Up @@ -167,7 +164,7 @@
//parent.style.overflow = 'hidden';
}
// changes will cause another recalc at next validation step
var vertical;
var stylize = this.stylize, vertical;
this.parentNode.childNodes.array().forEach(function(c, i) {
if (c.nodeType === Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) {
stylize(c, {
Expand Down Expand Up @@ -219,6 +216,7 @@
// 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, {
Expand Down Expand Up @@ -255,17 +253,17 @@
}
});
}
}
},

});
stylize: function(element, styles) {
var style = element.style;
Object.keys(styles).forEach(function(k){
style[k] = styles[k];
});
}

function stylize(element, styles) {
var style = element.style;
Object.keys(styles).forEach(function(k){
style[k] = styles[k];
});
}
});

</script>

</polymer-element>

0 comments on commit efc22b0

Please sign in to comment.