diff --git a/src/panels/view/PanelView.js b/src/panels/view/PanelView.js index 6c1d5ff92..ee350aeff 100644 --- a/src/panels/view/PanelView.js +++ b/src/panels/view/PanelView.js @@ -68,6 +68,7 @@ module.exports = Backbone.View.extend({ bl: 0, br: 0, appendTo: this.el, + silentFrames: 1, prefix: editor.getConfig().stylePrefix, posFetcher: (el, { target }) => { const style = el.style; diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index a59cba4e1..a56acd278 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -1,4 +1,4 @@ -import { bindAll, defaults, isFunction } from 'underscore'; +import { bindAll, defaults, isFunction, each } from 'underscore'; import { on, off, normalizeFloat } from 'utils/mixins'; var defaultOpts = { @@ -38,6 +38,10 @@ var defaultOpts = { // from the current focused element (currently used only in SelectComponent) currentUnit: 1, + // With this option active the mousemove event won't be altered when + // the pointer comes over iframes + silentFrames: 0, + // Handlers tl: 1, // Top left tc: 1, // Top center @@ -137,6 +141,17 @@ class Resizer { this.onEnd = opts.onEnd; } + /** + * Toggle iframes pointer event + * @param {Boolean} silent If true, iframes will be silented + */ + toggleFrames(silent) { + if (this.opts.silentFrames) { + const frames = document.querySelectorAll('iframe'); + each(frames, frame => (frame.style.pointerEvents = silent ? 'none' : '')); + } + } + /** * Detects if the passed element is a resize handler * @param {HTMLElement} el @@ -221,9 +236,7 @@ class Resizer { */ start(e) { //Right or middel click - if (e.button !== 0) { - return; - } + if (e.button !== 0) return; e.preventDefault(); e.stopPropagation(); const el = this.el; @@ -257,6 +270,7 @@ class Resizer { on(doc, 'mouseup', this.stop); isFunction(this.onStart) && this.onStart(e, { docs: doc, config, el, resizer }); + this.toggleFrames(1); this.move(e); } @@ -308,6 +322,7 @@ class Resizer { off(doc, 'keydown', this.handleKeyDown); off(doc, 'mouseup', this.stop); this.updateRect(1); + this.toggleFrames(); isFunction(this.onEnd) && this.onEnd(e, { docs: doc, config }); }