spincycle
Version:
A reactive message router and object manager that lets clients subscribe to object property changes on the server
167 lines (146 loc) • 5.92 kB
HTML
<!--
@license
Copyright (c) 2015 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>iron-fit-behavior demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="simple-fit.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<style is="custom-style" include="demo-pages-shared-styles">
.centered {
min-width: 500px;
}
demo-snippet {
--demo-snippet-code: {
max-height: 250px;
}
}
</style>
</head>
<body unresolved class="centered">
<h3>
An element with <code>IronFitBehavior</code> can be centered in
<code>fitInto</code> or positioned around a <code>positionTarget</code>
</h3>
<demo-snippet>
<template>
<style>
.target {
cursor: pointer;
text-align: center;
display: inline-block;
box-sizing: border-box;
border: 1px solid;
width: 100px;
padding: 20px 0;
margin: 5px;
}
#myFit {
z-index: 10;
padding: 20px;
overflow: auto;
min-width: 100px;
min-height: 100px;
}
button {
background-color: white;
border-radius: 5px;
border-width: 1px;
}
button.selected {
background-color: #b3e5fc;
}
</style>
<template is="dom-bind">
<template is="dom-repeat" items="[[containers]]">
<div class="target" on-tap="updatePositionTarget">Target</div>
</template>
<simple-fit id="myFit" auto-fit-on-attach>
<h2>Align</h2>
<p>
<button on-tap="updateAlign" vertical-align="top">top</button>
<button on-tap="updateAlign" vertical-align="bottom">bottom</button>
<button on-tap="updateAlign" vertical-align="auto">auto</button>
<button on-tap="updateAlign" vertical-align>null</button>
</p>
<p>
<button on-tap="updateAlign" horizontal-align="left">left</button>
<button on-tap="updateAlign" horizontal-align="right">right</button>
<button on-tap="updateAlign" horizontal-align="auto">auto</button>
<button on-tap="updateAlign" horizontal-align>null</button>
</p>
<button on-tap="toggleNoOverlap">no overlap</button>
<button on-tap="toggleDynamicAlign">dynamic align</button>
</simple-fit>
<script>
var defaultTarget = Polymer.dom(myFit).parentNode;
var template = document.querySelector('template[is="dom-bind"]');
template.containers = new Array(30);
template.updatePositionTarget = function(e) {
var target = Polymer.dom(e).rootTarget;
target = myFit.positionTarget === target ? defaultTarget : target;
myFit.positionTarget.style.backgroundColor = '';
target.style.backgroundColor = 'orange';
myFit.positionTarget = target;
template.refit();
};
template._raf = null;
template.refit = function() {
template._raf && window.cancelAnimationFrame(template._raf);
template._raf = window.requestAnimationFrame(function() {
template._raf = null;
myFit.refit();
});
};
template.updateAlign = function(e) {
var target = Polymer.dom(e).rootTarget;
if (target.hasAttribute('horizontal-align')) {
myFit.horizontalAlign = target.getAttribute('horizontal-align');
var children = target.parentNode.querySelectorAll('[horizontal-align]');
for (var i = 0; i < children.length; i++) {
toggleClass(children[i], 'selected', children[i] === target);
}
}
if (target.hasAttribute('vertical-align')) {
myFit.verticalAlign = target.getAttribute('vertical-align');
var children = target.parentNode.querySelectorAll('[vertical-align]');
for (var i = 0; i < children.length; i++) {
toggleClass(children[i], 'selected', children[i] === target);
}
}
template.refit();
};
template.toggleNoOverlap = function(e) {
myFit.noOverlap = !myFit.noOverlap;
toggleClass(Polymer.dom(e).rootTarget, 'selected', myFit.noOverlap);
template.refit();
};
template.toggleDynamicAlign = function(e) {
myFit.dynamicAlign = !myFit.dynamicAlign;
toggleClass(Polymer.dom(e).rootTarget, 'selected', myFit.dynamicAlign);
template.refit();
};
// Listen for resize and scroll on window.
window.addEventListener('resize', template.refit);
window.addEventListener('scroll', template.refit);
function toggleClass(element, cssClass, condition) {
element.classList[condition ? 'add' : 'remove'](cssClass);
}
</script>
</template>
</template>
</demo-snippet>
</body>
</html>