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

Commit

Permalink
new polymer-elements
Browse files Browse the repository at this point in the history
  • Loading branch information
Scott J. Miles committed Jul 13, 2013
1 parent 22498e9 commit 3629cab
Show file tree
Hide file tree
Showing 4 changed files with 435 additions and 0 deletions.
81 changes: 81 additions & 0 deletions polymer-grid-layout/index.html
View file
@@ -0,0 +1,81 @@
<!doctype html>
<html>
<head>
<title>polymer-grid-layout example</title>
<script src="../../../polymer/polymer.js"></script>
<link href="polymer-grid-layout.html" rel="import">
<style>
body {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<grid-test></grid-test>

<polymer-element name="grid-test">
<template>
<polymer-grid-layout nodes="{{nodes}}" layout="{{layout}}"></polymer-grid-layout>

<panel id="toolbar">toolbar</panel>
<panel id="sidebar" v-flex>sidebar</panel>
<panel id="workspace" flex>workspace</panel>
<panel id="outputToolbar">otherbar</panel>
<panel id="output" v-flex>
output
<h2>Documentation</h2>
<h1>Verbiage</h1>
<p>In backbone record integer LED amplified internet protocol a extension reflective.
Array kilohertz LED. Wavelength extension patch supporting wave an by prompt.</p>
</panel>

<style>
* {
-webkit-transition: top, right, bottom, left;
-webkit-transition-duration: 0.3s;
}
panel {
display: inline-block;
border: 4px dotted lightblue;
padding: 16px;
}
#output {
width: 400px;
}
#workspace {
border-color: orange;
}
</style>
</template>
<script>
Polymer('grid-test', {
arrangements: [[
[1, 1, 1],
[2, 3, 5],
[2, 3, 4]
], [
[5, 3, 2],
[4, 3, 2],
[4, 1, 1]
], [
[1, 1],
[2, 3],
[5, 3]
]],
outputLayout: 0,
ready: function() {
this.nodes = [this.$.toolbar, this.$.sidebar, this.$.workspace, this.$.output, this.$.outputToolbar];
this.outputLayoutChanged();
setInterval(this.toggleLayout.bind(this), 2500);
},
outputLayoutChanged: function() {
this.layout = this.arrangements[this.outputLayout];
},
toggleLayout: function() {
this.outputLayout = (this.outputLayout + 1) % this.arrangements.length;
}
});
</script>
</polymer-element>
</body>
</html>
242 changes: 242 additions & 0 deletions polymer-grid-layout/polymer-grid-layout.html
View file
@@ -0,0 +1,242 @@
<polymer-element name="polymer-grid-layout" attributes="nodes layout">
<template>
</template>
<script>
(function() {
Polymer('polymer-grid-layout', {
nodes: null,
layout: null,
nodesChanged: function() {
this.invalidate();
},
layoutChanged: function() {
this.invalidate();
},
invalidate: function() {
if (this.layout && this.nodes) {
this.layoutJob = this.job(this.layoutJob, this.relayout);
}
},
relayout: function() {
layout(this.layout, this.nodes);
}
});

//

var lineParent;

function line(axis, p, d) {
var l = document.createElement('line');
var extent = (axis === 'left' ? 'width' : (axis === 'top' ? 'height' : axis));
l.setAttribute('extent', extent);
if (d < 0) {
axis = (axis === 'left' ? 'right' : (axis === 'top' ? 'bottom' : axis));
}
p = Math.abs(p);
l.style[axis] = p + 'px';
l.style[extent] = '0px';
lineParent.appendChild(l);
}

var colCount, colOwners, rowCount, rowOwners;

function matrixillate(matrix) {
// mesaure the matrix, must be rectangular
rowCount = matrix.length;
colCount = rowCount && matrix[0].length || 0;
// build a transposed matrix
var transpose = [];
for (var i=0; i<colCount; i++) {
var c = [];
for (var j=0; j<rowCount; j++) {
c.push(matrix[j][i]);
}
transpose.push(c);
}
// assign sizing control
colOwners = findOwners(matrix);
rowOwners = findOwners(transpose);
//console.log('colOwners', colOwners);
//console.log('rowOwners', rowOwners);
}

function findOwners(matrix) {
var majCount = matrix.length;
var minCount = majCount && matrix[0].length || 0;
var owners = [];
// for each column (e.g.)
for (var i=0; i<minCount; i++) {
// array of contained areas
var contained = {};
// look at each row to find a containing area
for (var j=0; j<majCount; j++) {
// get the row vector
var vector = matrix[j]
// node index at [i,j]
var nodei = vector[i];
// if a node is there
if (nodei) {
// determine if it bounds this column
var owns = false;
if (i === 0) {
owns = (i === minCount-1) || (nodei !== vector[i+1]);
} else if (i === minCount - 1) {
owns = (i === 0) || (nodei !== vector[i-1]);
} else {
owns = nodei !== vector[i-1] && nodei !== vector[i+1];
}
if (owns) {
contained[nodei] = 1;
}
}
// store the owners for this column
owners[i] = contained;
}
}
return owners;
}

var nodes;

function colWidth(i) {
for (var col in colOwners[i]) {
col = Number(col);
if (col === 0) {
return 96;
}
var node = nodes[col - 1];
if (node.hasAttribute('h-flex') || node.hasAttribute('flex')) {
return -1;
}
var w = node.offsetWidth;
//console.log('colWidth(' + i + ') ==', w);
return w;
}
return -1;
}

function rowHeight(i) {
for (var row in rowOwners[i]) {
row = Number(row);
if (row === 0) {
return 96;
}
var node = nodes[row - 1];
if (node.hasAttribute('v-flex') || node.hasAttribute('flex')) {
return -1;
}
var h = node.offsetHeight;
//console.log('rowHeight(' + i + ') ==', h);
return h;
}
return -1;
}

var m = 0;

function railize(count, sizeFn) {
var rails = [];
var a = 0;
for (var i=0; i<count; i++) {
rails[i] = {p: a, s: 1};
var x = sizeFn(i) + m + m;
if (x == -1) {
break;
}
a += x;
}
if (i === count) {
rails[i] = {p: 0, s: -1};
}
var b = 0;
for (var ii=count; ii>i; ii--) {
rails[ii] = {p: b, s: -1};
x = sizeFn(ii - 1) + m + m;
if (x !== -1) {
b += x;
}
}
return rails;
}

function _position(box, maj, min, ext, a, b) {
box.position = 'absolute';
box.boxSizing = box.mozBoxSizing = 'border-box';
box[maj] = box[min] = box[ext] = '';
if (a.s < 0 && b.s < 0) {
box[ext] = a.p - b.p - m - m + 'px';
//box[min] = b.p + m + 'px';
box[maj] = 'calc(100% - ' + (a.p - b.p - m - m) + 'px' + ')';
} else if (b.s < 0) {
box[maj] = a.p + m + 'px';
box[min] = b.p + m + 'px';
} else {
box[maj] = a.p + m + 'px';
box[ext] = b.p - a.p - m - m + 'px';
}
}

function position(elt, left, right, top, bottom) {
_position(elt.style, 'top', 'bottom', 'height', rows[top], rows[bottom]);
_position(elt.style, 'left', 'right', 'width', columns[left], columns[right]);
}

function layout(matrix, anodes, alineParent) {
//console.group('layout');

lineParent = alineParent;
nodes = anodes;
matrixillate(matrix);

columns = railize(colCount, colWidth);
rows = railize(rowCount, rowHeight);

if (alineParent) {
//console.group('column rails');
columns.forEach(function(c) {
//console.log(c.p, c.s);
line('left', c.p, c.s);
});
//console.groupEnd();

//console.group('row rails');
rows.forEach(function(r) {
//console.log(r.p, r.s);
line('top', r.p, r.s);
});
//console.groupEnd();
}

//console.group('rail boundaries');
nodes.forEach(function(node, i) {
// node indices are 1-based
var n = i + 1;
// boundary rails
var l, r, t = 1e10, b = -1e10;
matrix.forEach(function(vector, i) {
var f = vector.indexOf(n);
if (f > -1) {
l = f;
r = vector.lastIndexOf(n) + 1;
t = Math.min(t, i);
b = Math.max(b, i) + 1;
}
});
if (l == undefined) {
//console.log('unused');
node.style.visibility = 'hidden';
} else {
node.style.visibility = '';
//console.log(l, r, t, b);
position(node, l, r, t, b);
}
});
//console.groupEnd();

//console.groupEnd();
}

})();
</script>
</polymer-element>
23 changes: 23 additions & 0 deletions polymer-shared-lib/index.html
View file
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../../polymer/polymer.min.js"></script>
<link rel="import" href="polymer-shared-lib.html">
</head>
<body>
<polymer-shared-lib id="share" url="https://apis.google.com/js/client.js?onload=%%callback%%"></polymer-shared-lib>
<script>
share.addEventListener('polymer-shared-lib-loaded', function() {
console.log('lib loaded');
console.dir(event.detail);
});
</script>
</body>
</html>

0 comments on commit 3629cab

Please sign in to comment.