From: Dan Vanderkam Date: Sun, 25 Oct 2015 04:29:38 +0000 (-0400) Subject: split out IFrameTarp X-Git-Tag: v2.0.0~36^2 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=2cfded32d5da38aad8d9617654569f3e3f1c420d;p=dygraphs.git split out IFrameTarp --- diff --git a/src/dygraph-utils.js b/src/dygraph-utils.js index 5ca8d67..c2ed9bb 100644 --- a/src/dygraph-utils.js +++ b/src/dygraph-utils.js @@ -918,72 +918,6 @@ export var Circles = { }; /** - * 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 utils.IFrameTarp(); - * tarper.cover(); - * var mouseUpHandler = function() { - * ... - * window.removeEventListener(mouseUpHandler); - * tarper.uncover(); - * }; - * window.addEventListener('mouseup', mouseUpHandler); - * }; - * - * @constructor - */ -export function IFrameTarp() { - /** @type {Array.} */ - this.tarps = []; -}; - -/** - * Find all the iframes in the document and cover them with high z-index - * transparent divs. - */ -IFrameTarp.prototype.cover = function() { - var iframes = document.getElementsByTagName("iframe"); - for (var i = 0; i < iframes.length; i++) { - var iframe = iframes[i]; - var pos = Dygraph.findPos(iframe), - x = pos.x, - y = pos.y, - 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. - */ -IFrameTarp.prototype.uncover = function() { - for (var i = 0; i < this.tarps.length; i++) { - this.tarps[i].parentNode.removeChild(this.tarps[i]); - } - this.tarps = []; -}; - -/** * Determine whether |data| is delimited by CR, CRLF, LF, LFCR. * @param {string} data * @return {?string} the delimiter that was detected (or null on failure). @@ -1028,7 +962,6 @@ export function isNodeContainedBy(containee, container) { return (containeeNode === container); }; - // This masks some numeric issues in older versions of Firefox, // where 1.0/Math.pow(10,2) != Math.pow(10,-2). /** @type {function(number,number):number} */ @@ -1042,7 +975,7 @@ export function pow(base, exp) { var RGBA_RE = /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*([01](?:\.\d+)?))?\)$/; /** - * Helper for Dygraph.toRGB_ which parses strings of the form: + * Helper for toRGB_ which parses strings of the form: * rgb(123, 45, 67) * rgba(123, 45, 67, 0.5) * @return parsed {r,g,b,a?} tuple or null. diff --git a/src/dygraph.js b/src/dygraph.js index 66ca381..d166f03 100644 --- a/src/dygraph.js +++ b/src/dygraph.js @@ -51,6 +51,7 @@ import * as DygraphTickers from './dygraph-tickers'; import * as utils from './dygraph-utils'; import DEFAULT_ATTRS from './dygraph-default-attrs'; import OPTIONS_REFERENCE from './dygraph-options-reference'; +import IFrameTarp from './iframe-tarp'; import DefaultHandler from './datahandler/default'; import ErrorBarsHandler from './datahandler/bars-error'; @@ -1149,7 +1150,7 @@ Dygraph.prototype.createDragInterface_ = function() { // We cover iframes during mouse interactions. See comments in // dygraph-utils.js for more info on why this is a good idea. - tarp: new utils.IFrameTarp(), + tarp: new IFrameTarp(), // contextB is the same thing as this context object but renamed. initializeMouseDown: function(event, g, contextB) { diff --git a/src/iframe-tarp.js b/src/iframe-tarp.js new file mode 100644 index 0000000..b6c3de1 --- /dev/null +++ b/src/iframe-tarp.js @@ -0,0 +1,67 @@ +/** + * 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 IFrameTarp(); + * tarper.cover(); + * var mouseUpHandler = function() { + * ... + * window.removeEventListener(mouseUpHandler); + * tarper.uncover(); + * }; + * window.addEventListener('mouseup', mouseUpHandler); + * }; + * + * @constructor + */ +function IFrameTarp() { + /** @type {Array.} */ + this.tarps = []; +}; + +/** + * Find all the iframes in the document and cover them with high z-index + * transparent divs. + */ +IFrameTarp.prototype.cover = function() { + var iframes = document.getElementsByTagName("iframe"); + for (var i = 0; i < iframes.length; i++) { + var iframe = iframes[i]; + var pos = utils.findPos(iframe), + x = pos.x, + y = pos.y, + 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. + */ +IFrameTarp.prototype.uncover = function() { + for (var i = 0; i < this.tarps.length; i++) { + this.tarps[i].parentNode.removeChild(this.tarps[i]); + } + this.tarps = []; +}; + +export default IFrameTarp; diff --git a/src/plugins/range-selector.js b/src/plugins/range-selector.js index 2090fae..ef3aedb 100644 --- a/src/plugins/range-selector.js +++ b/src/plugins/range-selector.js @@ -15,6 +15,7 @@ import * as utils from '../dygraph-utils'; import DygraphInteraction from '../dygraph-interaction-model'; +import IFrameTarp from '../iframe-tarp'; var rangeSelector = function() { this.hasTouchInterface_ = typeof(TouchEvent) != 'undefined'; @@ -256,7 +257,7 @@ rangeSelector.prototype.initInteraction_ = function() { // We cover iframes during mouse interactions. See comments in // dygraph-utils.js for more info on why this is a good idea. - var tarp = new utils.IFrameTarp(); + var tarp = new IFrameTarp(); // functions, defined below. Defining them this way (rather than with // "function foo() {...}" makes JSHint happy.