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

Commit

Permalink
tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
Scott J. Miles committed Dec 13, 2013
1 parent 36af6dd commit 91e61d4
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 237 deletions.
134 changes: 35 additions & 99 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<title>polymer api</title>
Expand All @@ -8,121 +8,57 @@
white-space: nowrap;
overflow: hidden;
}
[nobowager] [ifnobowager], [noviewer] [ifnoviewer] {
[noviewer] [ifnoviewer] {
display: block;
}
[detector], [ifnobowager], [ifnoviewer], [nobowager] [ifbowager], [noviewer] [ifviewer] {
[detector], [ifnoviewer], [noviewer] [ifviewer] {
display: none;
}
img {
vertical-align: middle;
height: 22px;
padding: 0 4px 2px 0;
}
div {
display: inline-block;
}
h2 {
display: inline-block;
margin: 0px 6px;
vertical-align: middle;
}
.choiceB, .choiceC {
font-size: 0.8em;
display: inline-block;
white-space: nowrap;
padding: 0px 16px;
text-align: center;
text-transform: uppercase;
color: #eee;
border-radius: 23px;
}
.choiceB {
background-color: #BF8A30;
}
.choiceC {
background-color: #284B7E;
}
.choiceB:hover {
background-color: #C7F83E;
color: #222;
}
.choiceC:hover {
background-color: #C7F83E;
color: #222;
[ifviewer], [ifnoviewer] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
a {
text-decoration: none;
iframe {
border: none;
margin: 0;
width: 100%;
height: 100%;
}
polymer-doc-viewer {
display: block;
#remote {
position: absolute;
top: 56px;
top: 0;
right: 0;
bottom: 0px;
left: 0;
border: 1px solid silver;
}
</style>
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer-doc-viewer/polymer-doc-viewer.html">
<link rel="import" href="../polymer-home-page/polymer-home-page.html">
</head>
<body>
<!-- detection-->
<img detector src="../Bowager/static/bowager-logo.png" onerror="nobowager()">
<img detector src="../polymer-doc-viewer/bowager-logo.png" onerror="noviewer()">
<img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
<polymer-home-page ifviewer></polymer-home-page>
<div ifnoviewer>
<span id="remote">[remote]</span>
<iframe></iframe>
</div>
<!-- -->
<script>
function nobowager() {
document.body.setAttribute('nobowager', '');
}
var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
// if no local info viewer, load it remotely
function noviewer() {
document.body.setAttribute('noviewer', '');
var path = location.pathname.split('/');
var module = path.pop() || path.pop();
document.querySelector('iframe').src = remoteDocs + module;
document.querySelector('title').textContent = module;
}
// for testing only
window.addEventListener('load', function() {
var opts = window.location.search;
if (opts.indexOf('viewer') >= 0) {
document.body.removeAttribute('noviewer');
}
if (opts.indexOf('bowager') >= 0) {
document.body.removeAttribute('nobowager');
}
if (opts.indexOf('noviewer') >= 0) {
document.body.setAttribute('noviewer', '');
}
if (opts.indexOf('nobowager') >= 0) {
document.body.setAttribute('nobowager', '');
}
});
</script>
<!-- -->
<h2>polymer api</h2>
<div ifnoviewer>
<p>See the <a target="_blank" href="http://itch.selfip.net/bowertopia/components/polymer-ajax/doc.html">remote docs.</a></p>
<p>Play with this element in the <a href="http://itch.selfip.net/bowertopia/designer/?element=polymer-ajax">remote sandbox.</a></p>
<p>See the <a target="_blank" href="smoke.html">smoke test.</a></p>
<hr>
<p>To access these tools locally, install the <code>polymer-catalog-tools</code> package.</p>
<code>bower install Polymer/polymer-catalog-tools</code>
<br>
<p ifbowager>
Or use <a ifbowager target="_blank" href="foo">one-click install <img src="../Bowager/static/bowager-logo.png" title="install via bowager"></a>
</p>
<p ifnobowager>
Pro tip: consider using Bowager for web-enabled installs.
</p>
</div>
<h2 ifviewer>
<a class="choiceB" target="_blank" id="sandbox">sandbox</a>
<a class="choiceC" target="_blank" href="smoke.html">smoke test</a>
<polymer-doc-viewer url="docs.json"></polymer-doc-viewer>
</h2>
<script>
var pathName = location.pathname.split('/');
moduleName = pathName.pop() || pathName.pop();
document.querySelector('title').textContent = moduleName;
document.querySelector('h2').textContent = moduleName;
document.querySelector('#sandbox').href = '../../designer/?element=' + moduleName;
var opts = window.location.search;
if (opts.indexOf('noviewer') >= 0) {
noviewer();
}
</script>
</body>
</html>
</html>
156 changes: 38 additions & 118 deletions smoke.html
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,50 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<title>polymer-flex-layout</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-flex-layout.html">
<link rel="import" href="polymer-flex-panel.html">
<title>x-palette</title>
<script src="../platform/platform.js"></script>
<link rel="import" href="../x-palette/x-palette.html">
<style>
html {
position: relative;
height: 100%;
}
body {
font-size: 20px;
font-family: Neue Helvetica, Roboto, Arial;
height: 100%;
margin: 0;
overflow: hidden;
}

flex-css, flex-container, flex-nonvisual {
height: 300px;
x-palette {
display: block;
overflow: hidden;
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<link rel="import" href="../polymer-ui-elements/metadata.html">
</head>
<body>
<polymer-element name="flex-css">
<template>
<link rel="stylesheet" href="polymer-flex-layout.css">
<style>
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<div class="flexbox" flex>
<div>Hi I'm some content</div>
<div class="flexbox column" flex>
<div class="flexbox align-center">
<h3>Title</h3>
<button>hello</button>
</div>
<div class="flexbox" flex>
<div flex>Main content</div>
<div>Sidebar content</div>
</div>
<div>Some more stuffs...</div>
<div class="flexbox justify-end">
<b>Footer</b>
</div>
</div>
<div>A last bit, like a panel</div>
</div>
</template>
<script>
Polymer('flex-css', {
ready: function() {
this.classList.add('flexbox');
}
<x-palette></x-palette>
<template>
<link rel="import" href="../polymer-elements/metadata.html">
<link rel="import" href="../more-elements/metadata.html">
</template>
<script>
setTimeout(function() {
var doc = document.querySelector('template').content;
HTMLImports.importer.load(doc, function() {
doc.querySelectorAll('link').array().forEach(
function(link) {
HTMLImports.parser.parse(link.content);
CustomElements.parser.parse(link.content);
}
);
});
</script>
</polymer-element>

<polymer-element name="flex-container" noscript extends="polymer-flex-panel">
<template>
<style>
div, polymer-flex-panel {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<div>Hi I'm some content</div>
<polymer-flex-panel vertical flex>
<polymer-flex-panel align="center">
<h3>Title</h3>
<button>hello</button>
</polymer-flex-panel>
<polymer-flex-panel flex>
<div flex>Main content</div>
<div>Sidebar content</div>
</polymer-flex-panel>
<div>Some more stuffs...</div>
<polymer-flex-panel justify="end">
<b>Footer</b>
</polymer-flex-panel>
</polymer-flex-panel>
<div>A last bit, like a panel</div>
</template>
</polymer-element>

<polymer-element name="flex-nonvisual" noscript>
<template>
<style>
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 2px solid #ccc;
}
</style>
<polymer-flex-layout></polymer-flex-layout>
<div flex>
<polymer-flex-layout></polymer-flex-layout>
<div>Hi I'm some content</div>
<div flex>
<polymer-flex-layout vertical></polymer-flex-layout>
<div>
<polymer-flex-layout align="center"></polymer-flex-layout>
<h3>Title</h3>
<button>hello</button>
</div>
<div flex>
<polymer-flex-layout></polymer-flex-layout>
<div flex>Main content</div>
<div>Sidebar content</div>
</div>
<div>Some more stuffs...</div>
<div>
<polymer-flex-layout justify="end"></polymer-flex-layout>
<b>Footer</b>
</div>
</div>
<div>A last bit, like a panel</div>
</div>
</template>
</polymer-element>

<h3>polymer-flex-layout.css</h3>
<flex-css></flex-css>
<br>
<h3>polymer-flex-panel element</h3>
<flex-container></flex-container>
<br>
<h3>polymer-flex-layout element</h3>
<flex-nonvisual></flex-nonvisual>
}, 2000);
</script>
</body>
</html>
40 changes: 20 additions & 20 deletions x-palette.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,26 +109,26 @@
// TODO(sjmiles): all of the next three methods are here only to simulate
// variety in the palette metadata (the background class in this case)
ready: function() {
this.watchMutation();
},
watchMutation: function() {
var change = function(observer, mutations) {
this.listDomChanged(mutations);
this.onMutation(this.$.list, change);
}.bind(this);
this.onMutation(this.$.list, change);
},
listDomChanged: function(mutations) {
for (var j=0, m; m=mutations[j]; j++) {
if (m.addedNodes) {
for (var i=0, n; n=m.addedNodes[i]; i++) {
if (n.localName === 'div' && n.classList.contains('item')) {
//console.log('new item');
n.classList.add(['satin', 'grill', 'stage', 'bluefog'][Math.floor(Math.random()*4)]);
}
}
}
}
// this.watchMutation();
//},
//watchMutation: function() {
// var change = function(observer, mutations) {
// this.listDomChanged(mutations);
// this.onMutation(this.$.list, change);
// }.bind(this);
// this.onMutation(this.$.list, change);
//},
//listDomChanged: function(mutations) {
// for (var j=0, m; m=mutations[j]; j++) {
// if (m.addedNodes) {
// for (var i=0, n; n=m.addedNodes[i]; i++) {
// if (n.localName === 'div' && n.classList.contains('item')) {
// //console.log('new item');
// n.classList.add(['satin', 'grill', 'stage', 'bluefog'][Math.floor(Math.random()*4)]);
// }
// }
// }
// }
},
// TODO(sjmiles): needed only for Firefox?
mousedown: function(event) {
Expand Down

0 comments on commit 91e61d4

Please sign in to comment.