[polymer] Merge of master into polymer10-migration

netlog_viewer/resizable_vertical_split_view.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * This view implements a vertically split display with a draggable divider.
+ *
+ *                  <<-- sizer -->>
+ *
+ *  +----------------------++----------------+
+ *  |                      ||                |
+ *  |                      ||                |
+ *  |                      ||                |
+ *  |                      ||                |
+ *  |       leftView       ||   rightView    |
+ *  |                      ||                |
+ *  |                      ||                |
+ *  |                      ||                |
+ *  |                      ||                |
+ *  |                      ||                |
+ *  +----------------------++----------------+
+ *
+ * @param {!View} leftView The widget to position on the left.
+ * @param {!View} rightView The widget to position on the right.
+ * @param {!DivView} sizerView The widget that will serve as draggable divider.
+ */
+var ResizableVerticalSplitView = (function() {
+  'use strict';
+
+  // Minimum width to size panels to, in pixels.
+  var MIN_PANEL_WIDTH = 50;
+
+  // We inherit from View.
+  var superClass = View;
+
+  /**
+   * @constructor
+   */
+  function ResizableVerticalSplitView(leftView, rightView, sizerView) {
+    // Call superclass's constructor.
+    superClass.call(this);
+
+    this.leftView_ = leftView;
+    this.rightView_ = rightView;
+    this.sizerView_ = sizerView;
+
+    this.mouseDragging_ = false;
+    this.touchDragging_ = false;
+
+    // Setup the "sizer" so it can be dragged left/right to reposition the
+    // vertical split.  The start event must occur within the sizer's node,
+    // but subsequent events may occur anywhere.
+    var node = sizerView.getNode();
+    node.addEventListener('mousedown', this.onMouseDragSizerStart_.bind(this));
+    window.addEventListener('mousemove', this.onMouseDragSizer_.bind(this));
+    window.addEventListener('mouseup', this.onMouseDragSizerEnd_.bind(this));
+
+    node.addEventListener('touchstart', this.onTouchDragSizerStart_.bind(this));
+    window.addEventListener('touchmove', this.onTouchDragSizer_.bind(this));
+    window.addEventListener('touchend', this.onTouchDragSizerEnd_.bind(this));
+    window.addEventListener('touchcancel',
+                            this.onTouchDragSizerEnd_.bind(this));
+  }
+
+  ResizableVerticalSplitView.prototype = {
+    // Inherit the superclass's methods.
+    __proto__: superClass.prototype,
+
+    /**
+     * Sets the width of the left view.
+     * @param {Integer} px The number of pixels
+     */
+    setLeftSplit: function(px) {
+      this.leftSplit_ = px;
+    },
+
+    /**
+     * Repositions all of the elements to fit the window.
+     */
+    setGeometry: function(left, top, width, height) {
+      superClass.prototype.setGeometry.call(this, left, top, width, height);
+
+      // If this is the first setGeometry(), initialize the split point at 50%.
+      if (!this.leftSplit_)
+        this.leftSplit_ = parseInt((width / 2).toFixed(0));
+
+      // Calculate the horizontal split points.
+      var leftboxWidth = this.leftSplit_;
+      var sizerWidth = this.sizerView_.getWidth();
+      var rightboxWidth = width - (leftboxWidth + sizerWidth);
+
+      // Don't let the right pane get too small.
+      if (rightboxWidth < MIN_PANEL_WIDTH) {
+        rightboxWidth = MIN_PANEL_WIDTH;
+        leftboxWidth = width - (sizerWidth + rightboxWidth);
+      }
+
+      // Position the boxes using calculated split points.
+      this.leftView_.setGeometry(left, top, leftboxWidth, height);
+      this.sizerView_.setGeometry(this.leftView_.getRight(), top,
+                                  sizerWidth, height);
+      this.rightView_.setGeometry(this.sizerView_.getRight(), top,
+                                  rightboxWidth, height);
+    },
+
+    show: function(isVisible) {
+      superClass.prototype.show.call(this, isVisible);
+      this.leftView_.show(isVisible);
+      this.sizerView_.show(isVisible);
+      this.rightView_.show(isVisible);
+    },
+
+    /**
+     * Called once the sizer is clicked on. Starts moving the sizer in response
+     * to future mouse movement.
+     */
+    onMouseDragSizerStart_: function(event) {
+      this.mouseDragging_ = true;
+      event.preventDefault();
+    },
+
+    /**
+     * Called when the mouse has moved.
+     */
+    onMouseDragSizer_: function(event) {
+      if (!this.mouseDragging_)
+        return;
+      // If dragging has started, move the sizer.
+      this.onDragSizer_(event.pageX);
+      event.preventDefault();
+    },
+
+    /**
+     * Called once the mouse has been released.
+     */
+    onMouseDragSizerEnd_: function(event) {
+      if (!this.mouseDragging_)
+        return;
+      // Dragging is over.
+      this.mouseDragging_ = false;
+      event.preventDefault();
+    },
+
+    /**
+     * Called when the user touches the sizer.  Starts moving the sizer in
+     * response to future touch events.
+     */
+    onTouchDragSizerStart_: function(event) {
+      this.touchDragging_ = true;
+      event.preventDefault();
+    },
+
+    /**
+     * Called when the mouse has moved after dragging started.
+     */
+    onTouchDragSizer_: function(event) {
+      if (!this.touchDragging_)
+        return;
+      // If dragging has started, move the sizer.
+      this.onDragSizer_(event.touches[0].pageX);
+      event.preventDefault();
+    },
+
+    /**
+     * Called once the user stops touching the screen.
+     */
+    onTouchDragSizerEnd_: function(event) {
+      if (!this.touchDragging_)
+        return;
+      // Dragging is over.
+      this.touchDragging_ = false;
+      event.preventDefault();
+    },
+
+    /**
+     * Common code used for both mouse and touch dragging.
+     */
+    onDragSizer_: function(pageX) {
+      // Convert from page coordinates, to view coordinates.
+      this.leftSplit_ = (pageX - this.getLeft());
+
+      // Avoid shrinking the left box too much.
+      this.leftSplit_ = Math.max(this.leftSplit_, MIN_PANEL_WIDTH);
+      // Avoid shrinking the right box too much.
+      this.leftSplit_ = Math.min(
+          this.leftSplit_, this.getWidth() - MIN_PANEL_WIDTH);
+
+      // Force a layout with the new |leftSplit_|.
+      this.setGeometry(
+          this.getLeft(), this.getTop(), this.getWidth(), this.getHeight());
+    },
+  };
+
+  return ResizableVerticalSplitView;
+})();
+