Fix Issue 361: Moving the mouse over an iframe breaks range selector interaction
[dygraphs.git] / dygraph-utils.js
index 907069f..707bbca 100644 (file)
@@ -51,20 +51,24 @@ Dygraph.DOT_DASH_LINE = [7, 2, 2, 2];
 Dygraph.log = function(severity, message) {
   var st;
   if (typeof(printStackTrace) != 'undefined') {
-    // Remove uninteresting bits: logging functions and paths.
-    st = printStackTrace({guess:false});
-    while (st[0].indexOf("stacktrace") != -1) {
-      st.splice(0, 1);
-    }
+    try {
+      // Remove uninteresting bits: logging functions and paths.
+      st = printStackTrace({guess:false});
+      while (st[0].indexOf("stacktrace") != -1) {
+        st.splice(0, 1);
+      }
 
-    st.splice(0, 2);
-    for (var i = 0; i < st.length; i++) {
-      st[i] = st[i].replace(/\([^)]*\/(.*)\)/, '@$1')
-          .replace(/\@.*\/([^\/]*)/, '@$1')
-          .replace('[object Object].', '');
+      st.splice(0, 2);
+      for (var i = 0; i < st.length; i++) {
+        st[i] = st[i].replace(/\([^)]*\/(.*)\)/, '@$1')
+            .replace(/\@.*\/([^\/]*)/, '@$1')
+            .replace('[object Object].', '');
+      }
+      var top_msg = st.splice(0, 1)[0];
+      message += ' (' + top_msg.replace(/^.*@ ?/, '') + ')';
+    } catch(e) {
+      // Oh well, it was worth a shot!
     }
-    var top_msg = st.splice(0, 1)[0];
-    message += ' (' + top_msg.replace(/^.*@ ?/, '') + ')';
   }
 
   if (typeof(console) != 'undefined') {
@@ -173,7 +177,12 @@ Dygraph.removeEvent = function addEvent(elem, type, fn) {
   if (elem.removeEventListener) {
     elem.removeEventListener(type, fn, false);
   } else {
-    elem.detachEvent('on'+type, elem[type+fn]);
+    try {
+      elem.detachEvent('on'+type, elem[type+fn]);
+    } catch(e) {
+      // We only detach event listeners on a "best effort" basis in IE. See:
+      // http://stackoverflow.com/questions/2553632/detachevent-not-working-with-named-inline-functions
+    }
     elem[type+fn] = null;
   }
 };
@@ -681,64 +690,60 @@ Dygraph.isAndroid = function() {
   return (/Android/).test(navigator.userAgent);
 };
 
+Dygraph.Iterator = function(array, start, length, predicate) {
+  start = start || 0;
+  length = length || array.length;
+  this.hasNext = true; // Use to identify if there's another element.
+  this.peek = null; // Use for look-ahead
+  this.start_ = start;
+  this.array_ = array;
+  this.predicate_ = predicate;
+  this.end_ = Math.min(array.length, start + length);
+  this.nextIdx_ = start - 1; // use -1 so initial advance works.
+  this.next(); // ignoring result.
+};
+
+Dygraph.Iterator.prototype.next = function() {
+  if (!this.hasNext) {
+    return null;
+  }
+  var obj = this.peek;
+
+  var nextIdx = this.nextIdx_ + 1;
+  var found = false;
+  while (nextIdx < this.end_) {
+    if (!this.predicate_ || this.predicate_(this.array_, nextIdx)) {
+      this.peek = this.array_[nextIdx];
+      found = true;
+      break;
+    }
+    nextIdx++;
+  }
+  this.nextIdx_ = nextIdx;
+  if (!found) {
+    this.hasNext = false;
+    this.peek = null;
+  }
+  return obj;
+};
+
 /**
  * @private
  * Returns a new iterator over array, between indexes start and 
  * start + length, and only returns entries that pass the accept function
  *
  * @param array the array to iterate over.
- * @param start the first index to iterate over
+ * @param start the first index to iterate over, 0 if absent.
  * @param length the number of elements in the array to iterate over.
  * This, along with start, defines a slice of the array, and so length
  * doesn't imply the number of elements in the iterator when accept
- * doesn't always accept all values.
+ * doesn't always accept all values. array.length when absent.
  * @param predicate a function that takes parameters array and idx, which
  * returns true when the element should be returned. If omitted, all
  * elements are accepted.
- *
- * TODO(konigsberg): add default vlues to start and length.
  */
 Dygraph.createIterator = function(array, start, length, predicate) {
-  var iter = new function() {
-    this.end_ = Math.min(array.length, start + length);
-    this.nextIdx_ = start - 1; // use -1 so initial call to advance works.
-    this.hasNext_ = true;
-    this.peek_ = null;
-    var self = this;
-
-    this.hasNext = function() {
-      return self.hasNext_;
-    }
-
-    this.next = function() {
-      if (self.hasNext_) {
-        var obj = self.peek_;
-        self.advance_();
-        return obj;
-      }
-      return null;
-    }
-    this.peek = function() {
-      return self.peek_;
-    }
-    this.advance_ = function() {
-      var nextIdx = self.nextIdx_;
-      nextIdx++;
-      while(nextIdx < self.end_) {
-        if (!predicate || predicate(array, nextIdx)) {
-          self.peek_ = array[nextIdx];
-          self.nextIdx_ = nextIdx;
-          return;
-        }
-        nextIdx++;
-      }
-      self.nextIdx_ = nextIdx;
-      self.hasNext_ = false;
-      self.peek_ = null;
-    }
-  };
-  iter.advance_();
-  return iter;
+  return new Dygraph.Iterator(array, start, length, predicate);
 };
 
 /**
@@ -944,7 +949,7 @@ Dygraph.regularShape_ = function(
   }
   ctx.fill();
   ctx.stroke();
-}
+};
 
 Dygraph.shapeFunction_ = function(sides, rotationRadians, delta) {
   return function(g, name, ctx, cx, cy, color, radius) {
@@ -956,7 +961,7 @@ Dygraph.shapeFunction_ = function(sides, rotationRadians, delta) {
 
 Dygraph.DrawPolygon_ = function(sides, rotationRadians, ctx, cx, cy, color, radius, delta) {
   new Dygraph.RegularShape_(sides, rotationRadians, delta).draw(ctx, cx, cy, radius);
-}
+};
 
 Dygraph.Circles = {
   DEFAULT : function(g, name, ctx, canvasx, canvasy, color, radius) {
@@ -1010,3 +1015,68 @@ Dygraph.Circles = {
     ctx.stroke();
   }
 };
+
+/**
+ * To create a "drag" interaction, you typically register a mousedown event
+ * handler on the element where the drag begins. In that handler, you register a
+ * mouseup handler on the window to determine when the mouse is released,
+ * wherever that release happens. This works well, except when the user releases
+ * the mouse over an off-domain iframe. In that case, the mouseup event is
+ * handled by the iframe and never bubbles up to the window handler.
+ *
+ * To deal with this issue, we cover iframes with high z-index divs to make sure
+ * they don't capture mouseup.
+ *
+ * Usage:
+ * element.addEventListener('mousedown', function() {
+ *   var tarper = new Dygraph.IFrameTarp();
+ *   tarper.cover();
+ *   var mouseUpHandler = function() {
+ *     ...
+ *     window.removeEventListener(mouseUpHandler);
+ *     tarper.uncover();
+ *   };
+ *   window.addEventListener('mouseup', mouseUpHandler);
+ * };
+ * 
+ *
+ * @constructor
+ */
+Dygraph.IFrameTarp = function() {
+  this.tarps = [];
+};
+
+/**
+ * Find all the iframes in the document and cover them with high z-index
+ * transparent divs.
+ */
+Dygraph.IFrameTarp.prototype.cover = function() {
+  var iframes = document.getElementsByTagName("iframe");
+  for (var i = 0; i < iframes.length; i++) {
+    var iframe = iframes[i];
+    var x = Dygraph.findPosX(iframe),
+        y = Dygraph.findPosY(iframe),
+        width = iframe.offsetWidth,
+        height = iframe.offsetHeight;
+
+    var div = document.createElement("div");
+    div.style.position = "absolute";
+    div.style.left = x + 'px';
+    div.style.top = y + 'px';
+    div.style.width = width + 'px';
+    div.style.height = height + 'px';
+    div.style.zIndex = 999;
+    document.body.appendChild(div);
+    this.tarps.push(div);
+  }
+};
+
+/**
+ * Remove all the iframe covers. You should call this in a mouseup handler.
+ */
+Dygraph.IFrameTarp.prototype.uncover = function() {
+  for (var i = 0; i < this.tarps.length; i++) {
+    this.tarps[i].parentNode.removeChild(this.tarps[i]);
+  }
+  this.tarps = [];
+};