Added Polymer
This commit is contained in:
Thaum
18
rpg-docs/public/bower_components/core-layout-trbl/.bower.json
vendored
Normal file
18
rpg-docs/public/bower_components/core-layout-trbl/.bower.json
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "core-layout-trbl",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1",
|
||||
"homepage": "https://github.com/Polymer/core-layout-trbl",
|
||||
"_release": "0.5.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.1",
|
||||
"commit": "02494683e83f362fa8a4cdc4deb4770d1fe9ff6d"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/core-layout-trbl.git",
|
||||
"_target": "^0.5.0",
|
||||
"_originalSource": "Polymer/core-layout-trbl"
|
||||
}
|
||||
4
rpg-docs/public/bower_components/core-layout-trbl/README.md
vendored
Normal file
4
rpg-docs/public/bower_components/core-layout-trbl/README.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
core-layout-trbl
|
||||
================
|
||||
|
||||
See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-layout-trbl) for more information.
|
||||
8
rpg-docs/public/bower_components/core-layout-trbl/bower.json
vendored
Normal file
8
rpg-docs/public/bower_components/core-layout-trbl/bower.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "core-layout-trbl",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1"
|
||||
}
|
||||
269
rpg-docs/public/bower_components/core-layout-trbl/core-layout-trbl.html
vendored
Normal file
269
rpg-docs/public/bower_components/core-layout-trbl/core-layout-trbl.html
vendored
Normal file
@@ -0,0 +1,269 @@
|
||||
<!--
|
||||
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>
|
||||
181
rpg-docs/public/bower_components/core-layout-trbl/core-slide.html
vendored
Normal file
181
rpg-docs/public/bower_components/core-layout-trbl/core-slide.html
vendored
Normal file
@@ -0,0 +1,181 @@
|
||||
<!--
|
||||
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="../polymer/polymer.html">
|
||||
|
||||
<polymer-element name="core-slide" attributes="open closed vertical target targetId">
|
||||
|
||||
<template>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer('core-slide', {
|
||||
|
||||
closed: false,
|
||||
open: true,
|
||||
vertical: false,
|
||||
targetId: '',
|
||||
target: null,
|
||||
|
||||
ready: function() {
|
||||
this.setAttribute('nolayout', '');
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this.target = this.parentNode;
|
||||
},
|
||||
|
||||
targetIdChanged: function() {
|
||||
var p = this.parentNode;
|
||||
while (p.parentNode) {p = p.parentNode;};
|
||||
this.target = p.querySelector('#' + this.targetId);
|
||||
},
|
||||
|
||||
targetChanged: function() {
|
||||
if (this.closed) {
|
||||
this.asyncMethod(this.update);
|
||||
}
|
||||
},
|
||||
|
||||
toggle: function() {
|
||||
this.open = !this.open;
|
||||
},
|
||||
|
||||
closedChanged: function() {
|
||||
this.open = !this.closed;
|
||||
},
|
||||
|
||||
openChanged: function() {
|
||||
this.asyncMethod(this.update);
|
||||
},
|
||||
|
||||
update: function() {
|
||||
this.closed = !this.open;
|
||||
if (this.target) {
|
||||
if (this.vertical) {
|
||||
if (this.target.style.top !== '') {
|
||||
this.updateTop();
|
||||
} else {
|
||||
this.updateBottom();
|
||||
}
|
||||
} else {
|
||||
if (this.target.style.left !== '') {
|
||||
this.updateLeft();
|
||||
} else {
|
||||
this.updateRight();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateLeft: function() {
|
||||
var w = this.target.offsetWidth;
|
||||
var l = this.open ? 0 : -w;
|
||||
this.target.style.left = l + 'px';
|
||||
var s = this.target.nextElementSibling;
|
||||
while (s) {
|
||||
if (!s.hasAttribute('nolayout')) {
|
||||
if (s.style.left === '' && s.style.right !== '') {
|
||||
break;
|
||||
}
|
||||
l += w;
|
||||
s.style.left = l + 'px';
|
||||
w = s.offsetWidth;
|
||||
}
|
||||
s = s.nextElementSibling;
|
||||
}
|
||||
},
|
||||
|
||||
updateRight: function() {
|
||||
var w = this.target.offsetWidth;
|
||||
var r = this.open ? 0 : -w;
|
||||
this.target.style.right = r + 'px';
|
||||
//var s = this.target.previousElementSibling;
|
||||
var s = previousElementSibling(this.target);
|
||||
while (s) {
|
||||
if (!s.hasAttribute('nolayout')) {
|
||||
if (s.style.right === '' && s.style.left !== '') {
|
||||
break;
|
||||
}
|
||||
r += w;
|
||||
s.style.right = r + 'px';
|
||||
w = s.offsetWidth;
|
||||
}
|
||||
//if (s == s.previousElementSibling) {
|
||||
// console.error(s.localName + ' is its own sibling', s);
|
||||
// break;
|
||||
//}
|
||||
//s = s.previousElementSibling;
|
||||
s = previousElementSibling(s);
|
||||
}
|
||||
},
|
||||
|
||||
updateTop: function() {
|
||||
var h = this.target.offsetHeight;
|
||||
var t = this.open ? 0 : -h;
|
||||
this.target.style.top = t + 'px';
|
||||
var s = this.target.nextElementSibling;
|
||||
while (s) {
|
||||
if (!s.hasAttribute('nolayout')) {
|
||||
if (s.style.top === '' && s.style.bottom !== '') {
|
||||
break;
|
||||
}
|
||||
t += h;
|
||||
s.style.top = t + 'px';
|
||||
h = s.offsetHeight;
|
||||
}
|
||||
s = s.nextElementSibling;
|
||||
}
|
||||
},
|
||||
|
||||
updateBottom: function() {
|
||||
var h = this.target.offsetHeight;
|
||||
var b = this.open ? 0 : -h;
|
||||
this.target.style.bottom = b + 'px';
|
||||
//var s = this.target.previousElementSibling;
|
||||
var s = previousElementSibling(this.target);
|
||||
while (s) {
|
||||
if (!s.hasAttribute('nolayout')) {
|
||||
if (s.style.bottom === '' && s.style.top !== '') {
|
||||
break;
|
||||
}
|
||||
b = b + h;
|
||||
s.style.bottom = b + 'px';
|
||||
h = s.offsetHeight;
|
||||
}
|
||||
//if (s == s.previousElementSibling) {
|
||||
// console.error(s.localName + ' is its own sibling', s);
|
||||
// break;
|
||||
//}
|
||||
//s = s.previousElementSibling;
|
||||
s = previousElementSibling(s);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// TODO(sjmiles): temporary workaround for b0rked property in ShadowDOMPolyfill
|
||||
function previousElementSibling(e) {
|
||||
do {
|
||||
e = e.previousSibling;
|
||||
} while (e && e.nodeType !== Node.ELEMENT_NODE);
|
||||
return e;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
58
rpg-docs/public/bower_components/core-layout-trbl/demo.html
vendored
Normal file
58
rpg-docs/public/bower_components/core-layout-trbl/demo.html
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE 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
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>core-layout-trbl demo</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
<link rel="import" href="core-layout-trbl.html">
|
||||
<link rel="import" href="core-slide.html">
|
||||
|
||||
<style>
|
||||
div {
|
||||
padding: 8px;
|
||||
border: 3px solid lightblue;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
[vertical] ~ div {
|
||||
border: 3px solid orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<div style="height: 600px; overflow: hidden;">
|
||||
<core-layout-trbl></core-layout-trbl>
|
||||
<div id="left">Hi I'm some content</div>
|
||||
<div id="left2" onclick="leftSlide.closed = !leftSlide.closed;">Click Me First</div>
|
||||
<div onclick="leftSlide2.closed = !leftSlide2.closed;">Click Me Second</div>
|
||||
<div fit>
|
||||
<core-layout-trbl vertical></core-layout-trbl>
|
||||
<div id="top">Gribble gribble</div>
|
||||
<div onclick="topSlide.closed = !topSlide.closed;">Click Me</div>
|
||||
<div fit>Squids!</div>
|
||||
<div onclick="bottomSlide.closed = !bottomSlide.closed;">Click Me</div>
|
||||
<div>More is more</div>
|
||||
<div id="bottom">Squids are larger than they appear.</div>
|
||||
</div>
|
||||
<div onclick="rightSlide.closed = !rightSlide.closed;">Click me</div>
|
||||
<div id="right">A last bit, like a panel</div>
|
||||
</div>
|
||||
<core-slide id="leftSlide" targetid="left"></core-slide>
|
||||
<core-slide id="leftSlide2" targetid="left2"></core-slide>
|
||||
<core-slide id="rightSlide" targetid="right"></core-slide>
|
||||
<core-slide id="topSlide" vertical targetid="top"></core-slide>
|
||||
<core-slide id="bottomSlide" vertical targetid="bottom"></core-slide>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
rpg-docs/public/bower_components/core-layout-trbl/index.html
vendored
Normal file
22
rpg-docs/public/bower_components/core-layout-trbl/index.html
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
<!doctype 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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
<link rel="import" href="../core-component-page/core-component-page.html">
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<core-component-page></core-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user