Add the possibility to interact with iframes in preview mode

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('<style>' + frameCss + protCss + '</style>');

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);
 			}
 		};
-	});
+	});

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;

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() {