diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 9c3f22f54..001078062 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -45,6 +45,7 @@ function(Backbone, FrameView) { '.' + this.ppfx + 'comp-selected{outline: 3px solid #3b97e3 !important}' + '.' + this.ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+ '.' + this.ppfx + 'freezed{opacity: 0.5; pointer-events: none}' + + '.' + this.ppfx + 'no-pointer{pointer-events: none}' + '.' + this.ppfx + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}'; if(protCss) body.append(''); diff --git a/src/commands/view/Preview.js b/src/commands/view/Preview.js index 3fd62cf68..add687a2e 100644 --- a/src/commands/view/Preview.js +++ b/src/commands/view/Preview.js @@ -8,6 +8,13 @@ define(function() { return this.panels; }, + tglPointers: function(editor, v) { + var elP = editor.Canvas.getBody().querySelectorAll('.' + this.ppfx + 'no-pointer'); + _.each(elP, function(item){ + item.style.pointerEvents = v ? '' : 'all'; + }); + }, + run: function(editor, sender) { if(sender) sender.set('active',false); @@ -26,6 +33,12 @@ define(function() { }; } this.helper.style.display = 'inline-block'; + this.tglPointers(editor); + + /* + editor.Canvas.getBody().querySelectorAll('.' + pfx + 'no-pointer').forEach(function(){ + this.style.pointerEvents = 'all'; + });*/ panels.style.display = 'none'; var canvasS = canvas.style; @@ -49,6 +62,7 @@ define(function() { this.helper.style.display = 'none'; } editor.trigger('change:canvasOffset'); + this.tglPointers(editor, 1); } }; - }); \ No newline at end of file + }); diff --git a/src/dom_components/view/ComponentMapView.js b/src/dom_components/view/ComponentMapView.js index f12bdac11..50ec496e7 100644 --- a/src/dom_components/view/ComponentMapView.js +++ b/src/dom_components/view/ComponentMapView.js @@ -40,9 +40,9 @@ define(['backbone', './ComponentImageView'], var ifrm = document.createElement("iframe"); ifrm.src = this.getMapUrl(); ifrm.frameBorder = 0; - ifrm.style.pointerEvents = 'none'; ifrm.style.height = '100%'; ifrm.style.width = '100%'; + ifrm.className = this.ppfx + 'no-pointer'; this.iframe = ifrm; } return this.iframe; diff --git a/src/dom_components/view/ComponentVideoView.js b/src/dom_components/view/ComponentVideoView.js index fe60fcdc7..156faf3f5 100644 --- a/src/dom_components/view/ComponentVideoView.js +++ b/src/dom_components/view/ComponentVideoView.js @@ -79,9 +79,7 @@ define(['backbone', './ComponentImageView'], renderSource: function() { var el = document.createElement('video'); el.src = this.model.get('src'); - el.style.pointerEvents = 'none'; - el.style.height = '100%'; - el.style.width = '100%'; + this.initVideoEl(el); return el; }, @@ -89,9 +87,7 @@ define(['backbone', './ComponentImageView'], var el = document.createElement('iframe'); el.src = this.model.getYoutubeSrc(); el.frameBorder = 0; - el.style.pointerEvents = 'none'; - el.style.height = '100%'; - el.style.width = '100%'; + this.initVideoEl(el); return el; }, @@ -99,10 +95,14 @@ define(['backbone', './ComponentImageView'], var el = document.createElement('iframe'); el.src = this.model.getVimeoSrc(); el.frameBorder = 0; - el.style.pointerEvents = 'none'; + this.initVideoEl(el); + return el; + }, + + initVideoEl: function(el){ + el.className = this.ppfx + 'no-pointer'; el.style.height = '100%'; el.style.width = '100%'; - return el; }, render: function() {