Improve iframe support

src/Interactable.js

@@ -52,12 +52,7 @@ class Interactable {
       win: _window,
     });
 
-    if (this._doc !== scope.document) {
-      scope.signals.fire('listen-to-document', {
-        doc: this._doc,
-        win: _window,
-      });
-    }
+    scope.addDocument( this._doc, _window );
 
     scope.interactables.push(this);
 

src/Interaction.js

@@ -242,7 +242,6 @@ class Interaction {
       // if interacting, fire a 'move-{action}' signal
       if (this.interacting()) {
         this.doMove(signalArg);
-        this.checkAndPreventDefault(event);
       }
 
       if (this.pointerWasMoved) {
@@ -251,6 +250,8 @@ class Interaction {
 
       signals.fire('move-done', signalArg);
     }
+
+    this.checkAndPreventDefault(event);
   }
 
   /*\
@@ -292,6 +293,8 @@ class Interaction {
 
   // End interact move events and stop auto-scroll unless simulation is running
   pointerUp (pointer, event, eventTarget, curEventTarget) {
+    this.checkAndPreventDefault(event);
+
     const pointerIndex = this.mouse? 0 : utils.indexOf(this.pointerIds, utils.getPointerId(pointer));
 
     clearTimeout(this.holdTimers[pointerIndex]);
@@ -340,7 +343,7 @@ class Interaction {
       });
     }
 
-    this.stop(event);
+    this.stop();
   }
 
   currentAction () {
@@ -351,21 +354,12 @@ class Interaction {
     return this._interacting;
   }
 
-  stop (event) {
+  stop () {
     signals.fire('stop', { interaction: this });
 
     if (this._interacting) {
       signals.fire('stop-active', { interaction: this });
-
-      // prevent Default only if were previously interacting
-      if (event && utils.isFunction(event.preventDefault)) {
-        this.checkAndPreventDefault(event);
-      }
-
-      signals.fire('stop-' + this.prepared.name, {
-        event,
-        interaction: this,
-      });
+      signals.fire('stop-' + this.prepared.name, { interaction: this });
     }
 
     this.target = this.element = null;
@@ -410,9 +404,9 @@ class Interaction {
   }
 
   checkAndPreventDefault (event) {
-    const setting = this.target && this.target.options.preventDefault;
+    const setting = this.target? this.target.options.preventDefault : 'never';
 
-    if (!this.target || setting === 'never') { return; }
+    if (setting === 'never') { return; }
 
     if (setting === 'always') {
       event.preventDefault();
@@ -421,27 +415,13 @@ class Interaction {
 
     // setting === 'auto'
 
-    // don't preventDefault on input elements
-    if (/^(input|select|textarea)$/i.test(event.target.nodeName)) {
-      return;
-    }
-
-    const actionOptions = this.target.options[this.prepared.name];
-
-    // Do not preventDefault on pointerdown if the prepared action is delayed
-    // or it is a drag and dragging can only start from a certain direction.
-    // This allows a touch to pan the viewport if the action doesn't actually
-    // start>
-    if (/down|start/i.test(event.type)
-        && ((this.prepared.name === 'drag' && actionOptions.startAxis !== 'xy')
-            || (actionOptions && actionOptions.delay > 0))) {
-
+    // don't preventDefault of pointerdown events
+    if (/down|start/i.test(event.type)) {
       return;
     }
 
-    // with manualStart, only preventDefault while interacting
-    if (actionOptions && actionOptions.manualStart
-        && !this.interacting()) {
+    // don't preventDefault on input elements
+    if (/^(input|select|textarea)$/i.test(event.target.nodeName)) {
       return;
     }
 
@@ -522,77 +502,60 @@ function doOnInteractions (method) {
   });
 }
 
-scope.signals.on('listen-to-document', function ({ doc, win }) {
-  const pEventTypes = browser.pEventTypes;
+// prevent native HTML5 drag on interact.js target elements
+function preventNativeDrag (event) {
+  for (const interaction of scope.interactions) {
 
-  // add delegate event listener
-  for (const eventType in scope.delegatedEvents) {
-    events.add(doc, eventType, events.delegateListener);
-    events.add(doc, eventType, events.delegateUseCapture, true);
-  }
+    if (interaction.element
+        && (interaction.element === event.target
+            || utils.nodeContains(interaction.element, event.target))) {
 
-  if (scope.PointerEvent) {
-    events.add(doc, pEventTypes.down  , listeners.pointerDown  );
-    events.add(doc, pEventTypes.move  , listeners.pointerMove  );
-    events.add(doc, pEventTypes.move  , listeners.pointerHover );
-    events.add(doc, pEventTypes.out   , listeners.pointerOut   );
-    events.add(doc, pEventTypes.up    , listeners.pointerUp    );
-    events.add(doc, pEventTypes.cancel, listeners.pointerUp    );
-  }
-  else {
-    events.add(doc, 'mousedown', listeners.pointerDown );
-    events.add(doc, 'mousemove', listeners.pointerMove );
-    events.add(doc, 'mousemove', listeners.pointerHover);
-    events.add(doc, 'mouseup'  , listeners.pointerUp   );
-    events.add(doc, 'mouseout' , listeners.pointerOut  );
-
-    events.add(doc, 'touchstart' , listeners.pointerDown  );
-    events.add(doc, 'touchmove'  , listeners.pointerMove  );
-    events.add(doc, 'touchend'   , listeners.pointerUp    );
-    events.add(doc, 'touchcancel', listeners.pointerUp    );
+      interaction.checkAndPreventDefault(event);
+      return;
+    }
   }
+}
 
-  events.add(win, 'blur', scope.endAllInteractions);
-
-  try {
-    if (win.frameElement) {
-      const parentDoc = win.frameElement.ownerDocument;
-      const parentWindow = parentDoc.defaultView;
+const docEvents = { /* 'eventType': listenerFunc */ };
+const pEventTypes = browser.pEventTypes;
 
-      events.add(parentDoc   , 'mouseup'      , listeners.pointerUp);
-      events.add(parentDoc   , 'touchend'     , listeners.pointerUp);
-      events.add(parentDoc   , 'touchcancel'  , listeners.pointerUp);
-      events.add(parentDoc   , 'pointerup'    , listeners.pointerUp);
-      events.add(parentDoc   , 'MSPointerUp'  , listeners.pointerUp);
-      events.add(parentWindow, 'blur'         , scope.endAllInteractions );
-    }
-  }
-  catch (error) {
-    scope.windowParentError = error;
-  }
+if (scope.PointerEvent) {
+  docEvents[pEventTypes.down  ] = listeners.pointerDown;
+  docEvents[pEventTypes.move  ] = listeners.pointerMove;
+  docEvents[pEventTypes.up    ] = listeners.pointerUp;
+  docEvents[pEventTypes.cancel] = listeners.pointerUp;
+}
+else {
+  docEvents.mousedown   = listeners.pointerDown;
+  docEvents.mousemove   = listeners.pointerMove;
+  docEvents.mouseup     = listeners.pointerUp;
+
+  docEvents.touchstart  = listeners.pointerDown;
+  docEvents.touchmove   = listeners.pointerMove;
+  docEvents.touchend    = listeners.pointerUp;
+  docEvents.touchcancel = listeners.pointerUp;
+}
 
-  // prevent native HTML5 drag on interact.js target elements
-  events.add(doc, 'dragstart', function (event) {
-    for (const interaction of scope.interactions) {
+docEvents.blur = scope.endAllInteractions;
+docEvents.dragstart = preventNativeDrag;
 
-      if (interaction.element
-          && (interaction.element === event.target
-              || utils.nodeContains(interaction.element, event.target))) {
+function onDocSignal ({ doc }, signalName) {
+  const eventMethod = signalName.indexOf('add') === 0
+    ? events.add : events.remove;
 
-        interaction.checkAndPreventDefault(event);
-        return;
-      }
-    }
-  });
+  // delegate event listener
+  for (const eventType in scope.delegatedEvents) {
+    eventMethod(doc, eventType, events.delegateListener);
+    eventMethod(doc, eventType, events.delegateUseCapture, true);
+  }
 
-  scope.documents.push(doc);
-  events.documents.push(doc);
-});
+  for (const eventType in docEvents) {
+    eventMethod(doc, eventType, docEvents[eventType]);
+  }
+}
 
-scope.signals.fire('listen-to-document', {
-  win: scope.window,
-  doc: scope.document,
-});
+scope.signals.on('add-document'   , onDocSignal);
+scope.signals.on('remove-document', onDocSignal);
 
 // Stop related interactions when an Interactable is unset
 Interactable.signals.on('unset', function ( {interactable} ) {

src/interact.js

@@ -362,6 +362,9 @@ interact.maxInteractions = function (newValue) {
   return scope.maxInteractions;
 };
 
+interact.addDocument    = scope.addDocument;
+interact.removeDocument = scope.removeDocument;
+
 scope.interact = interact;
 
 module.exports = interact;

src/legacyBrowsers.js

@@ -40,20 +40,28 @@ function onIE8Dblclick (event) {
 }
 
 if (browser.isIE8) {
-  scope.signals.on('listen-to-document', function ({ doc }) {
-    // For IE's lack of Event#preventDefault
-    events.add(doc, 'selectstart', function (event) {
-      for (const interaction of scope.interactions) {
-        if (interaction.interacting()) {
-          interaction.checkAndPreventDefault(event);
-        }
+  const selectFix = function (event) {
+    for (const interaction of scope.interactions) {
+      if (interaction.interacting()) {
+        interaction.checkAndPreventDefault(event);
       }
-    });
+    }
+  };
+
+  const onDocIE8 = function onDocIE8 ({ doc, win }, signalName) {
+    const eventMethod = signalName.indexOf('listen') === 0
+      ? events.add : events.remove;
+
+    // For IE's lack of Event#preventDefault
+    eventMethod(doc, 'selectstart', selectFix);
 
     if (scope.pointerEvents) {
-      events.add(doc, 'dblclick', onIE8Dblclick);
+      eventMethod(doc, 'dblclick', onIE8Dblclick);
     }
-  });
+  };
+
+  scope.signals.on('add-document'   , onDocIE8);
+  scope.signals.on('remove-document', onDocIE8);
 }
 
 module.exports = null;

src/scope.js

@@ -1,11 +1,11 @@
 const scope   = {};
 const utils   = require('./utils');
+const events  = require('./utils/events');
 const signals = require('./utils/Signals').new();
 
 scope.defaultOptions = require('./defaultOptions');
-scope.events         = require('./utils/events');
-
 scope.signals        = signals;
+scope.events         = events;
 
 utils.extend(scope, require('./utils/window'));
 utils.extend(scope, require('./utils/domObjects'));
@@ -61,12 +61,41 @@ scope.endAllInteractions = function (event) {
 
 scope.prefixedPropREs = utils.prefixedPropREs;
 
-scope.signals.on('listen-to-document', function ({ doc }) {
-  // if document is already known
-  if (utils.contains(scope.documents, doc)) {
-    // don't call any further signal listeners
-    return false;
+scope.addDocument = function (doc, win) {
+  // do nothing if document is already known
+  if (utils.contains(scope.documents, doc)) { return false; }
+
+  win = win || scope.getWindow(doc);
+
+  scope.documents.push(doc);
+  events.documents.push(doc);
+
+  // don't add an unload event for the main document
+  // so that the page may be cached in browser history
+  if (doc !== scope.document) {
+    events.add(win, 'unload', scope.onWindowUnload);
   }
-});
+
+  signals.fire('add-document', { doc, win });
+};
+
+scope.removeDocument = function (doc, win) {
+  const index = utils.indexOf(scope.documents, doc);
+
+  if (index === -1) { return false; }
+
+  win = win || scope.getWindow(doc);
+
+  events.remove(win, 'unload', scope.onWindowUnload);
+
+  scope.documents.splice(index, 1);
+  events.documents.splice(index, 1);
+
+  signals.fire('remove-document', { win, doc });
+};
+
+scope.onWindowUnload = function () {
+  scope.removeDocument(this.document, this);
+};
 
 module.exports = scope;