2 * To create a "drag" interaction, you typically register a mousedown event
3 * handler on the element where the drag begins. In that handler, you register a
4 * mouseup handler on the window to determine when the mouse is released,
5 * wherever that release happens. This works well, except when the user releases
6 * the mouse over an off-domain iframe. In that case, the mouseup event is
7 * handled by the iframe and never bubbles up to the window handler.
9 * To deal with this issue, we cover iframes with high z-index divs to make sure
10 * they don't capture mouseup.
13 * element.addEventListener('mousedown', function() {
14 * var tarper = new IFrameTarp();
16 * var mouseUpHandler = function() {
18 * window.removeEventListener(mouseUpHandler);
21 * window.addEventListener('mouseup', mouseUpHandler);
26 import * as utils from
'./dygraph-utils';
28 function IFrameTarp() {
29 /** @type {Array.<!HTMLDivElement>} */
34 * Find all the iframes in the document and cover them with high z-index
37 IFrameTarp
.prototype.cover
= function() {
38 var iframes
= document
.getElementsByTagName("iframe");
39 for (var i
= 0; i
< iframes
.length
; i
++) {
40 var iframe
= iframes
[i
];
41 var pos
= utils
.findPos(iframe
),
44 width
= iframe
.offsetWidth
,
45 height
= iframe
.offsetHeight
;
47 var div
= document
.createElement("div");
48 div
.style
.position
= "absolute";
49 div
.style
.left
= x
+ 'px';
50 div
.style
.top
= y
+ 'px';
51 div
.style
.width
= width
+ 'px';
52 div
.style
.height
= height
+ 'px';
53 div
.style
.zIndex
= 999;
54 document
.body
.appendChild(div
);
60 * Remove all the iframe covers. You should call this in a mouseup handler.
62 IFrameTarp
.prototype.uncover
= function() {
63 for (var i
= 0; i
< this.tarps
.length
; i
++) {
64 this.tarps
[i
].parentNode
.removeChild(this.tarps
[i
]);
69 export default IFrameTarp
;