<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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>