Enable mouse wheel on flyouts with scrollbars.

git-svn-id: http://blockly.googlecode.com/svn/trunk@1746 c400ca83-b69d-9dd7-9705-49c6b8615e23

blockly_uncompressed.js

@@ -42,7 +42,7 @@ goog.addDependency("../../../" + dir + "/core/field_image.js", ['Blockly.FieldIm
 goog.addDependency("../../../" + dir + "/core/field_label.js", ['Blockly.FieldLabel'], ['Blockly.Field', 'Blockly.Tooltip']);
 goog.addDependency("../../../" + dir + "/core/field_textinput.js", ['Blockly.FieldTextInput'], ['Blockly.Field', 'Blockly.Msg', 'goog.asserts', 'goog.userAgent']);
 goog.addDependency("../../../" + dir + "/core/field_variable.js", ['Blockly.FieldVariable'], ['Blockly.FieldDropdown', 'Blockly.Msg', 'Blockly.Variables']);
-goog.addDependency("../../../" + dir + "/core/flyout.js", ['Blockly.Flyout'], ['Blockly.Block', 'Blockly.Comment']);
+goog.addDependency("../../../" + dir + "/core/flyout.js", ['Blockly.Flyout'], ['Blockly.Block', 'Blockly.Comment', 'goog.userAgent']);
 goog.addDependency("../../../" + dir + "/core/generator.js", ['Blockly.Generator'], ['Blockly.Block']);
 goog.addDependency("../../../" + dir + "/core/icon.js", ['Blockly.Icon'], []);
 goog.addDependency("../../../" + dir + "/core/inject.js", ['Blockly.inject'], ['Blockly.Css', 'goog.dom']);

core/flyout.js

@@ -28,6 +28,7 @@ goog.provide('Blockly.Flyout');
 
 goog.require('Blockly.Block');
 goog.require('Blockly.Comment');
+goog.require('goog.userAgent');
 
 
 /**
@@ -50,7 +51,7 @@ Blockly.Flyout = function() {
    * @type {Array.<!Array>}
    * @private
    */
-  this.changeWrapper_ = null;
+  this.eventWrappers_ = [];
 
   /**
    * @type {number}
@@ -93,12 +94,6 @@ Blockly.Flyout.prototype.autoClose = true;
  */
 Blockly.Flyout.prototype.CORNER_RADIUS = 8;
 
-/**
- * Wrapper function called when a resize occurs.
- * @type {Array.<!Array>}
- * @private
- */
-Blockly.Flyout.prototype.onResizeWrapper_ = null;
 
 /**
  * Creates the flyout's DOM.  Only needs to be called once.
@@ -124,14 +119,8 @@ Blockly.Flyout.prototype.createDom = function() {
  */
 Blockly.Flyout.prototype.dispose = function() {
   this.hide();
-  if (this.onResizeWrapper_) {
-    Blockly.unbindEvent_(this.onResizeWrapper_);
-    this.onResizeWrapper_ = null;
-  }
-  if (this.changeWrapper_) {
-    Blockly.unbindEvent_(this.changeWrapper_);
-    this.changeWrapper_ = null;
-  }
+  Blockly.unbindEvent_(this.eventWrappers_);
+  this.eventWrappers_.length = 0;
   if (this.scrollbar_) {
     this.scrollbar_.dispose();
     this.scrollbar_ = null;
@@ -209,8 +198,7 @@ Blockly.Flyout.prototype.setMetrics_ = function(yRatio) {
  *     blocks.
  * @param {boolean} withScrollbar True if a scrollbar should be displayed.
  */
-Blockly.Flyout.prototype.init =
-    function(workspace, withScrollbar) {
+Blockly.Flyout.prototype.init = function(workspace, withScrollbar) {
   this.targetWorkspace_ = workspace;
   // Add scrollbars.
   var flyout = this;
@@ -221,11 +209,17 @@ Blockly.Flyout.prototype.init =
   this.hide();
 
   // If the document resizes, reposition the flyout.
-  this.onResizeWrapper_ = Blockly.bindEvent_(window,
-      goog.events.EventType.RESIZE, this, this.position_);
+  this.eventWrappers_.concat(Blockly.bindEvent_(window,
+      goog.events.EventType.RESIZE, this, this.position_));
   this.position_();
-  this.changeWrapper_ = Blockly.bindEvent_(this.targetWorkspace_.getCanvas(),
-      'blocklyWorkspaceChange', this, this.filterForCapacity_);
+  this.eventWrappers_.concat(Blockly.bindEvent_(this.svgGroup_,
+      'wheel', this, this.wheel_));
+  // Safari needs mousewheel.
+  this.eventWrappers_.concat(Blockly.bindEvent_(this.svgGroup_,
+      'mousewheel', this, this.wheel_));
+  this.eventWrappers_.concat(
+      Blockly.bindEvent_(this.targetWorkspace_.getCanvas(),
+      'blocklyWorkspaceChange', this, this.filterForCapacity_));
 };
 
 /**
@@ -277,6 +271,28 @@ Blockly.Flyout.prototype.position_ = function() {
   }
 };
 
+/**
+ * Scroll the flyout up or down.
+ * @param {!Event} e Mouse wheel scroll event.
+ */
+Blockly.Flyout.prototype.wheel_ = function(e) {
+  // Safari uses wheelDeltaY, everyone else uses deltaY.
+  var delta = e.deltaY || -e.wheelDeltaY;
+  if (delta) {
+    if (goog.userAgent.GECKO) {
+      // Firefox's deltas are a tenth that of Chrome/Safari.
+      delta *= 10;
+    }
+    var metrics = this.getMetrics_();
+    var y = metrics.viewTop + delta;
+    y = Math.max(y, 0);
+    y = Math.min(y, metrics.contentHeight - metrics.viewHeight);
+    this.scrollbar_.set(y);
+    // Don't scroll the page.
+    e.preventDefault();
+  }
+};
+
 /**
  * Is the flyout visible?
  * @return {boolean} True if visible.
@@ -297,7 +313,7 @@ Blockly.Flyout.prototype.hide = function() {
   for (var x = 0, listen; listen = this.listeners_[x]; x++) {
     Blockly.unbindEvent_(listen);
   }
-  this.listeners_.splice(0);
+  this.listeners_.length = 0;
   if (this.reflowWrapper_) {
     Blockly.unbindEvent_(this.reflowWrapper_);
     this.reflowWrapper_ = null;
@@ -324,7 +340,7 @@ Blockly.Flyout.prototype.show = function(xmlList) {
   for (var x = 0, rect; rect = this.buttons_[x]; x++) {
     goog.dom.removeNode(rect);
   }
-  this.buttons_.splice(0);
+  this.buttons_.length = 0;
 
   var margin = this.CORNER_RADIUS;
   this.svgGroup_.style.display = 'block';

core/scrollbar.js

@@ -131,36 +131,8 @@ Blockly.ScrollbarPair.prototype.resize = function() {
  * @param {number} y Vertical scroll value.
  */
 Blockly.ScrollbarPair.prototype.set = function(x, y) {
-  /* HACK:
-   Two scrollbars are about to have their sliders moved.  Moving a scrollbar
-   will normally result in its onScroll function being called.  That function
-   will update the contents.  At issue is what happens when two scrollbars are
-   moved.  Calling onScroll twice may result in two rerenderings of the content
-   and increase jerkiness during dragging.
-   In the case of native scrollbars (currently used only by Firefox), onScroll
-   is called as an event, which means two separate renderings of the content are
-   performed.  However in the case of SVG scrollbars (currently used by all
-   other browsers), onScroll is called as a function and the browser only
-   rerenders the contents once at the end of the thread.
-  */
-  if (Blockly.Scrollbar === Blockly.ScrollbarNative) {
-    // Native scrollbar mode.
-    // Set both scrollbars and suppress their two separate onScroll events.
-    this.hScroll.set(x, false);
-    this.vScroll.set(y, false);
-    // Redraw the surface once with the new settings for both scrollbars.
-    var xyRatio = {};
-    xyRatio.x = (this.hScroll.outerDiv_.scrollLeft /
-                 this.hScroll.innerImg_.offsetWidth) || 0;
-    xyRatio.y = (this.vScroll.outerDiv_.scrollTop /
-                 this.vScroll.innerImg_.offsetHeight) || 0;
-    this.workspace_.setMetrics(xyRatio);
-  } else {
-    // SVG scrollbars.
-    // Set both scrollbars and allow each to call a separate onScroll execution.
-    this.hScroll.set(x, true);
-    this.vScroll.set(y, true);
-  }
+  this.hScroll.set(x);
+  this.vScroll.set(y);
 };
 
 // --------------------------------------------------------------------
@@ -517,15 +489,11 @@ Blockly.Scrollbar.prototype.onScroll_ = function() {
 /**
  * Set the scrollbar slider's position.
  * @param {number} value The distance from the top/left end of the bar.
- * @param {boolean} fireEvents True if onScroll events should be fired.
  */
-Blockly.Scrollbar.prototype.set = function(value, fireEvents) {
+Blockly.Scrollbar.prototype.set = function(value) {
   // Move the scrollbar slider.
   this.svgKnob_.setAttribute(this.horizontal_ ? 'x' : 'y', value * this.ratio_);
-
-  if (fireEvents) {
-    this.onScroll_();
-  }
+  this.onScroll_();
 };
 
 /**