third_party/polymer/components/core-splitter/core-splitter.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `core-splitter` provides a split bar and dragging on the split bar
  12 will resize the sibling element.  Use its `direction` property to indicate
  13 which sibling element to be resized and the orientation.  Usually you would want
  14 to use `core-splitter` along with flex layout so that the other sibling
  15 element can be _flexible_.
  16
  17 Example:
  18
  19     <div horizontal layout>
  20       <div>left</div>
  21       <core-splitter direction="left"></core-splitter>
  22       <div flex>right</div>
  23     </div>
  24
  25 In the above example, dragging the splitter will resize the _left_ element.  And
  26 since the parent container is a flexbox and the _right_ element has
  27 `flex`, the _right_ element will be auto-resized.
  28
  29 For horizontal splitter set `direction` to `up` or `down`.
  30
  31 Example:
  32
  33     <div vertical layout>
  34       <div>top</div>
  35       <core-splitter direction="up"></core-splitter>
  36       <div flex>bottom</div>
  37     </div>
  38
  39 @group Polymer Core Elements
  40 @element core-splitter
  41 @homepage github.io
  42 -->
  43
  44 <link rel="import" href="../polymer/polymer.html">
  45 <link rel="import" href="../core-resizable/core-resizable.html">
  46
  47 <polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow"
  48     on-trackstart="{{trackStart}}" on-track="{{track}}" on-down="{{preventSelection}}">
  49
  50 <template>
  51
  52   <link rel="stylesheet" href="core-splitter.css">
  53
  54 </template>
  55 <script>
  56
  57   Polymer(Polymer.mixin({
  58
  59     /**
  60      * Possible values are `left`, `right`, `up` and `down`.
  61      *
  62      * @attribute direction
  63      * @type string
  64      * @default 'left'
  65      */
  66     direction: 'left',
  67
  68     /**
  69      * Minimum width to which the splitter target can be sized, e.g.
  70      * `minSize="100px"`
  71      *
  72      * @attribute minSize
  73      * @type string
  74      * @default ''
  75      */
  76     minSize: '',
  77
  78     /**
  79      * Locks the split bar so it can't be dragged.
  80      *
  81      * @attribute locked
  82      * @type boolean
  83      * @default false
  84      */
  85     locked: false,
  86
  87     /**
  88      * By default the parent and siblings of the splitter are set to overflow hidden. This helps
  89      * avoid elements bleeding outside the splitter regions. Set this property to true to allow
  90      * these elements to overflow.
  91      *
  92      * @attribute allowOverflow
  93      * @type boolean
  94      * @default false
  95      */
  96     allowOverflow: false,
  97
  98     // Listen for resize requests on parent, since splitter is peer to resizables
  99     resizerIsPeer: true,
 100
 101     ready: function() {
 102       this.directionChanged();
 103     },
 104
 105     attached: function() {
 106       this.resizerAttachedHandler();
 107     },
 108
 109     detached: function() {
 110       this.resizerDetachedHandler();
 111     },
 112
 113     domReady: function() {
 114       if (!this.allowOverflow) {
 115         this.parentNode.style.overflow = this.nextElementSibling.style.overflow =
 116             this.previousElementSibling.style.overflow = 'hidden';
 117       }
 118     },
 119
 120     directionChanged: function() {
 121       this.isNext = this.direction === 'right' || this.direction === 'down';
 122       this.horizontal = this.direction === 'up' || this.direction === 'down';
 123       this.update();
 124     },
 125
 126     update: function() {
 127       this.target = this.isNext ? this.nextElementSibling : this.previousElementSibling;
 128       this.dimension = this.horizontal ? 'height' : 'width';
 129       this.classList.toggle('horizontal', this.horizontal);
 130     },
 131
 132     targetChanged: function(old) {
 133       if (old) {
 134         old.style[old.__splitterMinSize] = '';
 135       }
 136       var min = this.target.__splitterMinSize = this.horizontal ? 'minHeight' : 'minWidth';
 137       this.target.style[min] = this.minSize;
 138     },
 139
 140     trackStart: function() {
 141       this.update();
 142       this.size = parseInt(getComputedStyle(this.target)[this.dimension]);
 143     },
 144
 145     track: function(e) {
 146       if (this.locked) {
 147         return;
 148       }
 149       var d = e[this.horizontal ? 'dy' : 'dx'];
 150       this.target.style[this.dimension] =
 151           this.size + (this.isNext ? -d : d) + 'px';
 152       this.notifyResize();
 153     },
 154
 155     preventSelection: function(e) {
 156       e.preventDefault();
 157     }
 158
 159   }, Polymer.CoreResizer));
 160
 161 </script>
 162 </polymer-element>