systrace/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html - platform/prebuilts/fullsdk-darwin/platform-tools - Git at Google

 <!doctype 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>
	<!doctype 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>