1 2 3 Polymer('core-splitter', { 4 5 /** 6 * Possible values are "left", "right", "up" and "down". 7 * 8 * @attribute direction 9 * @type string 10 * @default 'left' 11 */ 12 direction: 'left', 13 14 /** 15 * Minimum width to which the splitter target can be sized 16 * 17 * @attribute minSize 18 * @type number 19 * @default 0 20 */ 21 minSize: 0, 22 23 /** 24 * Locks the split bar so it can't be dragged. 25 * 26 * @attribute locked 27 * @type boolean 28 * @default false 29 */ 30 locked: false, 31 32 /** 33 * By default the parent and siblings of the splitter are set to overflow hidden. This helps 34 * avoid elements bleeding outside the splitter regions. Set this property to true to allow 35 * these elements to overflow. 36 * 37 * @attribute allowOverflow 38 * @type boolean 39 * @default false 40 */ 41 allowOverflow: false, 42 43 ready: function() { 44 this.directionChanged(); 45 }, 46 47 domReady: function() { 48 if (!this.allowOverflow) { 49 this.parentNode.style.overflow = this.nextElementSibling.style.overflow = 50 this.previousElementSibling.style.overflow = 'hidden'; 51 } 52 }, 53 54 directionChanged: function() { 55 this.isNext = this.direction === 'right' || this.direction === 'down'; 56 this.horizontal = this.direction === 'up' || this.direction === 'down'; 57 this.update(); 58 }, 59 60 update: function() { 61 this.target = this.isNext ? this.nextElementSibling : this.previousElementSibling; 62 this.dimension = this.horizontal ? 'height' : 'width'; 63 this.classList.toggle('horizontal', this.horizontal); 64 }, 65 66 targetChanged: function(old) { 67 if (old) { 68 old.style[old.__splitterMinSize] = ''; 69 } 70 var min = this.target.__splitterMinSize = this.horizontal ? 'minHeight' : 'minWidth'; 71 this.target.style[min] = this.minSize + 'px'; 72 }, 73 74 trackStart: function() { 75 this.update(); 76 this.size = parseInt(getComputedStyle(this.target)[this.dimension]); 77 }, 78 79 track: function(e) { 80 if (this.locked) { 81 return; 82 } 83 var d = e[this.horizontal ? 'dy' : 'dx']; 84 this.target.style[this.dimension] = 85 this.size + (this.isNext ? -d : d) + 'px'; 86 }, 87 88 preventSelection: function(e) { 89 e.preventDefault(); 90 } 91 }); 92 93