Add preview and fullscreen as default

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/commands/main.js

@@ -81,6 +81,8 @@ define(function(require) {
 		defaultCommands['open-layers'] = require('./view/OpenLayers');
 		defaultCommands['open-sm'] = require('./view/OpenStyleManager');
 		defaultCommands['open-blocks'] = require('./view/OpenBlocks');
+		defaultCommands.fullscreen = require('./view/Fullscreen');
+		defaultCommands.preview = require('./view/Preview');
 		//this.defaultCommands['resize-comp'] 	= require('./view/ResizeComponent');
 
 		if(config.em)

src/commands/view/Fullscreen.js

@@ -0,0 +1,81 @@
+define(function() {
+
+		return {
+		  /**
+		   * Check if fullscreen mode is enabled
+		   * @return {Boolean}
+		   */
+		  isEnabled: function(){
+		    var d = document;
+		    if(d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement)
+		      return 1;
+		    else
+		      return 0;
+		  },
+
+		  /**
+		   * Enable fullscreen mode and return browser prefix
+		   * @param  {HTMLElement} el
+		   * @return {string}
+		   */
+		  enable: function(el){
+		    var pfx = '';
+		    if (el.requestFullscreen)
+		      el.requestFullscreen();
+		    else if (el.webkitRequestFullscreen) {
+		      pfx = 'webkit';
+		      el.webkitRequestFullscreen();
+		    }else if (el.mozRequestFullScreen) {
+		      pfx = 'moz';
+		      el.mozRequestFullScreen();
+		    }else if (el.msRequestFullscreen)
+		      el.msRequestFullscreen();
+		    else
+		      console.warn('Fullscreen not supported');
+		    return pfx;
+		  },
+
+		  /**
+		   * Disable fullscreen mode
+		   */
+		  disable: function(){
+		    var d = document;
+		    if (d.exitFullscreen)
+		      d.exitFullscreen();
+		    else if (d.webkitExitFullscreen)
+		      d.webkitExitFullscreen();
+		    else if (d.mozCancelFullScreen)
+		      d.mozCancelFullScreen();
+		    else if (d.msExitFullscreen)
+		      d.msExitFullscreen();
+		  },
+
+		  /**
+		   * Triggered when the state of the fullscreen is changed. Inside detects if
+		   * it's enabled
+		   * @param  {strinf} pfx Browser prefix
+		   * @param  {Event} e
+		  */
+		  fsChanged: function(pfx, e){
+		    var d = document;
+		    var ev = (pfx || '') + 'fullscreenchange';
+		    if(!this.isEnabled()){
+		      this.stop(null, this.sender);
+		      document.removeEventListener(ev, this.fsChanged);
+		    }
+		  },
+
+		  run:  function(editor, sender){
+		    this.sender = sender;
+		    var pfx = this.enable(editor.getContainer());
+		    this.fsChanged = this.fsChanged.bind(this, pfx);
+		    document.addEventListener(pfx + 'fullscreenchange', this.fsChanged);
+		  },
+
+		  stop: function(editor, sender){
+		    sender.set('active', false);
+		    this.disable();
+		  }
+
+		};
+	});

src/commands/view/Preview.js

@@ -0,0 +1,51 @@
+define(function() {
+
+		return {
+
+			getPanels: function(editor){
+				if(!this.panels)
+					this.panels = editor.Panels.getPanelsEl();
+				return this.panels;
+			},
+
+			run: function(editor, sender) {
+				if(sender)
+					sender.set('active',false);
+				editor.stopCommand('sw-visibility');
+				var that = this;
+				var panels = this.getPanels(editor);
+				var canvas = editor.Canvas.getElement();
+				var editorEl = editor.getEl();
+				var pfx = editor.Config.stylePrefix;
+				if(!this.helper) {
+					this.helper = document.createElement('span');
+					this.helper.className = pfx + 'off-prv fa fa-eye-slash';
+					editorEl.appendChild(this.helper);
+					this.helper.onclick = function(){
+						that.stop(editor);
+					};
+				}
+				this.helper.style.display = 'inline-block';
+
+				panels.style.display = 'none';
+				var canvasS = canvas.style;
+				canvasS.width = '100%';
+				canvasS.height = '100%';
+				canvasS.top = '0';
+				canvasS.left = '0';
+				canvasS.padding = '0';
+				canvasS.margin = '0';
+			},
+
+			stop: function(editor, sender) {
+				var panels = this.getPanels(editor);
+				editor.runCommand('sw-visibility');
+				panels.style.display = 'block';
+				var canvas = editor.Canvas.getElement();
+				canvas.setAttribute('style', '');
+				if(this.helper) {
+					this.helper.style.display = 'none';
+				}
+			}
+		};
+	});

src/editor/main.js

@@ -353,6 +353,15 @@ define(function (require){
 					return em.trigger(event);
 				},
 
+				/**
+				 * Returns editor element
+				 * @return {HTMLElement}
+				 * @private
+				 */
+				getEl: function(){
+					return editorView.el;
+				},
+
 				/**
 				 * Render editor
 				 * @return {HTMLElement}

src/editor/model/Editor.js

@@ -343,7 +343,9 @@ define([
 				pfx = cfg.stylePrefix || 'mdl-';
 				cfg.stylePrefix = this.config.stylePrefix + pfx;
 				this.modal = new ModalDialog(cfg);
-				this.modal.render().appendTo('body');
+				this.on('loaded', function(){
+					this.modal.render().appendTo(this.config.el || 'body');
+				}, this);
 				this.Dialog = this.modal;
 				this.set('Modal', this.modal);
 			},

src/panels/config/config.js

@@ -7,6 +7,7 @@ define(function () {
 	var ola = 'open-layers';
 	var obl = 'open-blocks';
 	var ful = 'fullscreen';
+	var prv = 'preview';
 
 	return {
 		stylePrefix: 'pn-',
@@ -36,11 +37,11 @@ define(function () {
 				command: swv,
 				context: swv,
 				attributes: { title: 'View components' },
-			},/*{
-				id: 'eye',
+			},{
+				id: prv,
 				className: 'fa fa-eye',
-				command: 'eye',
-				context: 'eye',
+				command: prv,
+				context: prv,
 				stopDefaultCommand: 1,
 				attributes: { title: 'Preview' },
 			},{
@@ -49,7 +50,7 @@ define(function () {
 				command: ful,
 				context: ful,
 				attributes: { title: 'Fullscreen' },
-			},*/{
+			},{
 				id: expt,
 				className: 'fa fa-code',
 				command: expt,

src/panels/main.js

@@ -79,6 +79,14 @@ define(function(require) {
 				return panels;
 			},
 
+			/**
+	  	 * Returns panels element
+	  	 * @return {HTMLElement}
+	  	 */
+	  	getPanelsEl: function(){
+				return PanelsViewObj.el;
+			},
+
 			/**
 			 * Add new panel to the collection
 			 * @param {Object|Panel} panel Object with right properties or an instance of Panel

src/style_manager/view/PropertyColorView.js

@@ -17,7 +17,9 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo
 				this.$colorPicker = $('<div>', {class: this.pfx + "color-picker"});
 				cpStyle = this.$colorPicker.get(0).style;
 				var that = this;
+				var el = this.target.config ? this.target.config.el : '';
 				this.$colorPicker.spectrum({
+					appendTo: el || 'body',
 					showPalette: true,
 					maxSelectionSize: 8,
 					palette: [],

styles/css/main.css

@@ -2631,10 +2631,10 @@ $fontColorActive: #4f8ef7;
 .wte-checker-bg, .checker-bg, .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); }
 
-.wte-bg-main, .wte-pn-panel, .wte-nv-item .wte-nv-title-c, .wte-sm-sector .wte-sm-colorp-c, .wte-clm-tags .wte-sm-colorp-c, .wte-mdl-dialog, #wte-rte-toolbar, .sp-container {
+.wte-bg-main, .wte-off-prv, .wte-pn-panel, .wte-nv-item .wte-nv-title-c, .wte-sm-sector .wte-sm-colorp-c, .wte-clm-tags .wte-sm-colorp-c, .wte-mdl-dialog, #wte-rte-toolbar, .sp-container {
   background-color: #444; }
 
-.wte-color-main, .wte-btn-prim, .wte-pn-panel, .wte-pn-btn, .wte-btnt, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field, .wte-sm-sector .wte-sm-stack #wte-sm-add, .wte-clm-tags .wte-sm-stack #wte-sm-add, .wte-mdl-dialog, #wte-rte-toolbar .wte-rte-btn {
+.wte-color-main, .wte-off-prv, .wte-btn-prim, .wte-pn-panel, .wte-pn-btn, .wte-btnt, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field, .wte-sm-sector .wte-sm-stack #wte-sm-add, .wte-clm-tags .wte-sm-stack #wte-sm-add, .wte-mdl-dialog, #wte-rte-toolbar .wte-rte-btn {
   color: #ddd; }
 
 .wte-color-active, .wte-pn-btn.wte-pn-active, .wte-btnt.wte-pn-active {
@@ -2645,6 +2645,12 @@ $fontColorActive: #4f8ef7;
   z-index: 10;
   width: auto; }
 
+.wte-off-prv {
+  position: relative;
+  z-index: 10;
+  padding: 5px;
+  cursor: pointer; }
+
 /********************* MAIN ************************/
 .clear {
   clear: both; }

styles/scss/main.scss

@@ -141,6 +141,15 @@ $fontV: 5;//random(1000)
   width: auto;
 }
 
+.#{$app-prefix}off-prv{
+  @extend .#{$app-prefix}color-main;
+  @extend .#{$app-prefix}bg-main;
+  position: relative;
+  z-index: 10;
+  padding: 5px;
+  cursor: pointer;
+}
+
 /********************* MAIN ************************/
 .clear{ clear:both }
 .no-select{