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

Commit 91e61d4

Browse files
author
Scott J. Miles
committed
tweaks
1 parent 36af6dd commit 91e61d4

File tree

3 files changed

+93
-237
lines changed

3 files changed

+93
-237
lines changed

‎index.html

+35-99
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
33
<head>
44
<title>polymer api</title>
@@ -8,121 +8,57 @@
88
white-space: nowrap;
99
overflow: hidden;
1010
}
11-
[nobowager] [ifnobowager], [noviewer] [ifnoviewer] {
11+
[noviewer] [ifnoviewer] {
1212
display: block;
1313
}
14-
[detector], [ifnobowager], [ifnoviewer], [nobowager] [ifbowager], [noviewer] [ifviewer] {
14+
[detector], [ifnoviewer], [noviewer] [ifviewer] {
1515
display: none;
1616
}
17-
img {
18-
vertical-align: middle;
19-
height: 22px;
20-
padding: 0 4px 2px 0;
21-
}
22-
div {
23-
display: inline-block;
24-
}
25-
h2 {
26-
display: inline-block;
27-
margin: 0px 6px;
28-
vertical-align: middle;
29-
}
30-
.choiceB, .choiceC {
31-
font-size: 0.8em;
32-
display: inline-block;
33-
white-space: nowrap;
34-
padding: 0px 16px;
35-
text-align: center;
36-
text-transform: uppercase;
37-
color: #eee;
38-
border-radius: 23px;
39-
}
40-
.choiceB {
41-
background-color: #BF8A30;
42-
}
43-
.choiceC {
44-
background-color: #284B7E;
45-
}
46-
.choiceB:hover {
47-
background-color: #C7F83E;
48-
color: #222;
49-
}
50-
.choiceC:hover {
51-
background-color: #C7F83E;
52-
color: #222;
17+
[ifviewer], [ifnoviewer] {
18+
position: absolute;
19+
top: 0;
20+
right: 0;
21+
bottom: 0;
22+
left: 0;
5323
}
54-
a {
55-
text-decoration: none;
24+
iframe {
25+
border: none;
26+
margin: 0;
27+
width: 100%;
28+
height: 100%;
5629
}
57-
polymer-doc-viewer {
58-
display: block;
30+
#remote {
5931
position: absolute;
60-
top: 56px;
32+
top: 0;
6133
right: 0;
62-
bottom: 0px;
63-
left: 0;
64-
border: 1px solid silver;
6534
}
6635
</style>
6736
<script src="../platform/platform.js"></script>
68-
<link rel="import" href="../polymer-doc-viewer/polymer-doc-viewer.html">
37+
<link rel="import" href="../polymer-home-page/polymer-home-page.html">
6938
</head>
7039
<body>
71-
<!-- detection-->
72-
<img detector src="../Bowager/static/bowager-logo.png" onerror="nobowager()">
73-
<img detector src="../polymer-doc-viewer/bowager-logo.png" onerror="noviewer()">
40+
<img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
41+
<polymer-home-page ifviewer></polymer-home-page>
42+
<div ifnoviewer>
43+
<span id="remote">[remote]</span>
44+
<iframe></iframe>
45+
</div>
46+
<!-- -->
7447
<script>
75-
function nobowager() {
76-
document.body.setAttribute('nobowager', '');
77-
}
48+
var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
49+
// if no local info viewer, load it remotely
7850
function noviewer() {
7951
document.body.setAttribute('noviewer', '');
52+
var path = location.pathname.split('/');
53+
var module = path.pop() || path.pop();
54+
document.querySelector('iframe').src = remoteDocs + module;
55+
document.querySelector('title').textContent = module;
8056
}
8157
// for testing only
82-
window.addEventListener('load', function() {
83-
var opts = window.location.search;
84-
if (opts.indexOf('viewer') >= 0) {
85-
document.body.removeAttribute('noviewer');
86-
}
87-
if (opts.indexOf('bowager') >= 0) {
88-
document.body.removeAttribute('nobowager');
89-
}
90-
if (opts.indexOf('noviewer') >= 0) {
91-
document.body.setAttribute('noviewer', '');
92-
}
93-
if (opts.indexOf('nobowager') >= 0) {
94-
document.body.setAttribute('nobowager', '');
95-
}
96-
});
97-
</script>
98-
<!-- -->
99-
<h2>polymer api</h2>
100-
<div ifnoviewer>
101-
<p>See the <a target="_blank" href="http://itch.selfip.net/bowertopia/components/polymer-ajax/doc.html">remote docs.</a></p>
102-
<p>Play with this element in the <a href="http://itch.selfip.net/bowertopia/designer/?element=polymer-ajax">remote sandbox.</a></p>
103-
<p>See the <a target="_blank" href="smoke.html">smoke test.</a></p>
104-
<hr>
105-
<p>To access these tools locally, install the <code>polymer-catalog-tools</code> package.</p>
106-
<code>bower install Polymer/polymer-catalog-tools</code>
107-
<br>
108-
<p ifbowager>
109-
Or use <a ifbowager target="_blank" href="foo">one-click install <img src="../Bowager/static/bowager-logo.png" title="install via bowager"></a>
110-
</p>
111-
<p ifnobowager>
112-
Pro tip: consider using Bowager for web-enabled installs.
113-
</p>
114-
</div>
115-
<h2 ifviewer>
116-
<a class="choiceB" target="_blank" id="sandbox">sandbox</a>
117-
<a class="choiceC" target="_blank" href="smoke.html">smoke test</a>
118-
<polymer-doc-viewer url="docs.json"></polymer-doc-viewer>
119-
</h2>
120-
<script>
121-
var pathName = location.pathname.split('/');
122-
moduleName = pathName.pop() || pathName.pop();
123-
document.querySelector('title').textContent = moduleName;
124-
document.querySelector('h2').textContent = moduleName;
125-
document.querySelector('#sandbox').href = '../../designer/?element=' + moduleName;
58+
var opts = window.location.search;
59+
if (opts.indexOf('noviewer') >= 0) {
60+
noviewer();
61+
}
12662
</script>
12763
</body>
128-
</html>
64+
</html>

‎smoke.html

+38-118
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,50 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
33
<head>
4-
<title>polymer-flex-layout</title>
5-
<script src="../../polymer/polymer.js"></script>
6-
<link rel="import" href="polymer-flex-layout.html">
7-
<link rel="import" href="polymer-flex-panel.html">
4+
<title>x-palette</title>
5+
<script src="../platform/platform.js"></script>
6+
<link rel="import" href="../x-palette/x-palette.html">
87
<style>
8+
html {
9+
position: relative;
10+
height: 100%;
11+
}
912
body {
10-
font-size: 20px;
13+
font-family: Neue Helvetica, Roboto, Arial;
14+
height: 100%;
15+
margin: 0;
16+
overflow: hidden;
1117
}
12-
13-
flex-css, flex-container, flex-nonvisual {
14-
height: 300px;
18+
x-palette {
19+
display: block;
20+
overflow: hidden;
21+
position: absolute !important;
22+
top: 0;
23+
right: 0;
24+
bottom: 0;
25+
left: 0;
1526
}
1627
</style>
28+
<link rel="import" href="../polymer-ui-elements/metadata.html">
1729
</head>
1830
<body>
19-
<polymer-element name="flex-css">
20-
<template>
21-
<link rel="stylesheet" href="polymer-flex-layout.css">
22-
<style>
23-
div {
24-
box-sizing: border-box;
25-
-moz-box-sizing: border-box;
26-
border: 2px solid #ccc;
27-
}
28-
</style>
29-
<div class="flexbox" flex>
30-
<div>Hi I'm some content</div>
31-
<div class="flexbox column" flex>
32-
<div class="flexbox align-center">
33-
<h3>Title</h3>
34-
<button>hello</button>
35-
</div>
36-
<div class="flexbox" flex>
37-
<div flex>Main content</div>
38-
<div>Sidebar content</div>
39-
</div>
40-
<div>Some more stuffs...</div>
41-
<div class="flexbox justify-end">
42-
<b>Footer</b>
43-
</div>
44-
</div>
45-
<div>A last bit, like a panel</div>
46-
</div>
47-
</template>
48-
<script>
49-
Polymer('flex-css', {
50-
ready: function() {
51-
this.classList.add('flexbox');
52-
}
31+
<x-palette></x-palette>
32+
<template>
33+
<link rel="import" href="../polymer-elements/metadata.html">
34+
<link rel="import" href="../more-elements/metadata.html">
35+
</template>
36+
<script>
37+
setTimeout(function() {
38+
var doc = document.querySelector('template').content;
39+
HTMLImports.importer.load(doc, function() {
40+
doc.querySelectorAll('link').array().forEach(
41+
function(link) {
42+
HTMLImports.parser.parse(link.content);
43+
CustomElements.parser.parse(link.content);
44+
}
45+
);
5346
});
54-
</script>
55-
</polymer-element>
56-
57-
<polymer-element name="flex-container" noscript extends="polymer-flex-panel">
58-
<template>
59-
<style>
60-
div, polymer-flex-panel {
61-
box-sizing: border-box;
62-
-moz-box-sizing: border-box;
63-
border: 2px solid #ccc;
64-
}
65-
</style>
66-
<div>Hi I'm some content</div>
67-
<polymer-flex-panel vertical flex>
68-
<polymer-flex-panel align="center">
69-
<h3>Title</h3>
70-
<button>hello</button>
71-
</polymer-flex-panel>
72-
<polymer-flex-panel flex>
73-
<div flex>Main content</div>
74-
<div>Sidebar content</div>
75-
</polymer-flex-panel>
76-
<div>Some more stuffs...</div>
77-
<polymer-flex-panel justify="end">
78-
<b>Footer</b>
79-
</polymer-flex-panel>
80-
</polymer-flex-panel>
81-
<div>A last bit, like a panel</div>
82-
</template>
83-
</polymer-element>
84-
85-
<polymer-element name="flex-nonvisual" noscript>
86-
<template>
87-
<style>
88-
div {
89-
box-sizing: border-box;
90-
-moz-box-sizing: border-box;
91-
border: 2px solid #ccc;
92-
}
93-
</style>
94-
<polymer-flex-layout></polymer-flex-layout>
95-
<div flex>
96-
<polymer-flex-layout></polymer-flex-layout>
97-
<div>Hi I'm some content</div>
98-
<div flex>
99-
<polymer-flex-layout vertical></polymer-flex-layout>
100-
<div>
101-
<polymer-flex-layout align="center"></polymer-flex-layout>
102-
<h3>Title</h3>
103-
<button>hello</button>
104-
</div>
105-
<div flex>
106-
<polymer-flex-layout></polymer-flex-layout>
107-
<div flex>Main content</div>
108-
<div>Sidebar content</div>
109-
</div>
110-
<div>Some more stuffs...</div>
111-
<div>
112-
<polymer-flex-layout justify="end"></polymer-flex-layout>
113-
<b>Footer</b>
114-
</div>
115-
</div>
116-
<div>A last bit, like a panel</div>
117-
</div>
118-
</template>
119-
</polymer-element>
120-
121-
<h3>polymer-flex-layout.css</h3>
122-
<flex-css></flex-css>
123-
<br>
124-
<h3>polymer-flex-panel element</h3>
125-
<flex-container></flex-container>
126-
<br>
127-
<h3>polymer-flex-layout element</h3>
128-
<flex-nonvisual></flex-nonvisual>
47+
}, 2000);
48+
</script>
12949
</body>
13050
</html>

‎x-palette.html

+20-20
Original file line numberDiff line numberDiff line change
@@ -109,26 +109,26 @@
109109
// TODO(sjmiles): all of the next three methods are here only to simulate
110110
// variety in the palette metadata (the background class in this case)
111111
ready: function() {
112-
this.watchMutation();
113-
},
114-
watchMutation: function() {
115-
var change = function(observer, mutations) {
116-
this.listDomChanged(mutations);
117-
this.onMutation(this.$.list, change);
118-
}.bind(this);
119-
this.onMutation(this.$.list, change);
120-
},
121-
listDomChanged: function(mutations) {
122-
for (var j=0, m; m=mutations[j]; j++) {
123-
if (m.addedNodes) {
124-
for (var i=0, n; n=m.addedNodes[i]; i++) {
125-
if (n.localName === 'div' && n.classList.contains('item')) {
126-
//console.log('new item');
127-
n.classList.add(['satin', 'grill', 'stage', 'bluefog'][Math.floor(Math.random()*4)]);
128-
}
129-
}
130-
}
131-
}
112+
// this.watchMutation();
113+
//},
114+
//watchMutation: function() {
115+
// var change = function(observer, mutations) {
116+
// this.listDomChanged(mutations);
117+
// this.onMutation(this.$.list, change);
118+
// }.bind(this);
119+
// this.onMutation(this.$.list, change);
120+
//},
121+
//listDomChanged: function(mutations) {
122+
// for (var j=0, m; m=mutations[j]; j++) {
123+
// if (m.addedNodes) {
124+
// for (var i=0, n; n=m.addedNodes[i]; i++) {
125+
// if (n.localName === 'div' && n.classList.contains('item')) {
126+
// //console.log('new item');
127+
// n.classList.add(['satin', 'grill', 'stage', 'bluefog'][Math.floor(Math.random()*4)]);
128+
// }
129+
// }
130+
// }
131+
// }
132132
},
133133
// TODO(sjmiles): needed only for Firefox?
134134
mousedown: function(event) {

0 commit comments

Comments
 (0)