Show unload alert with only unsaved changes. Close #24

bower.json

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

package.json

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

src/editor/config/config.js

@@ -2,88 +2,91 @@ define(function () {
 	var blkStyle = '.blk-row::after{ content: ""; clear: both; display: block;} .blk-row{padding: 10px;}';
 	return {
 
-		// Style prefix
-		stylePrefix: 'gjs-',
+    // Style prefix
+    stylePrefix: 'gjs-',
 
-		//TEMP
-		components: '',
+    //TEMP
+    components: '',
 
-		// Enable/Disable possibility to copy(ctrl + c) & paste(ctrl + v) components
-		copyPaste: true,
+    // Enable/Disable possibility to copy(ctrl + c) & paste(ctrl + v) components
+    copyPaste: true,
 
-		// Enable/Disable undo manager
-		undoManager: true,
+    // Show an alert before unload the page with unsaved changes
+    noticeOnUnload: true,
 
-		// Height for the editor container
-		height: '900px',
+    // Enable/Disable undo manager
+    undoManager: true,
 
-		// Width for the editor container
-		width: '100%',
+    // Height for the editor container
+    height: '900px',
 
-		// CSS that could only be seen (for instance, inside the code viewer)
-		protectedCss: '*{box-sizing: border-box;}body{margin:0;height:auto;background:#fff}#wrapper{min-height:100%; overflow:auto}',
+    // Width for the editor container
+    width: '100%',
 
-		// CSS for the iframe which containing the canvas, useful if you need to custom something inside
-		// (eg. the style of the selected component)
-		canvasCss: '',
+    // CSS that could only be seen (for instance, inside the code viewer)
+    protectedCss: '*{box-sizing: border-box;}body{margin:0;height:auto;background:#fff}#wrapper{min-height:100%; overflow:auto}',
 
-		// Default command
-		defaultCommand: 'select-comp',
+    // CSS for the iframe which containing the canvas, useful if you need to custom something inside
+    // (eg. the style of the selected component)
+    canvasCss: '',
 
-		// Show a toolbar when the component is selected
-		showToolbar: 1,
+    // Default command
+    defaultCommand: 'select-comp',
 
-		// Allow script tag importing
-		allowScripts: 0,
+    // Show a toolbar when the component is selected
+    showToolbar: 1,
 
-		// If true render a select of available devices
-		showDevices: 1,
+    // Allow script tag importing
+    allowScripts: 0,
 
-		// When enabled, on device change media rules won't be created
-		devicePreviewMode: 0,
+    // If true render a select of available devices
+    showDevices: 1,
 
-		// This option makes available custom component types also for loaded
-		// elements inside canvas
-		loadCompsOnRender: 1,
+    // When enabled, on device change media rules won't be created
+    devicePreviewMode: 0,
 
-		// Dom element
-		el: '',
+    // This option makes available custom component types also for loaded
+    // elements inside canvas
+    loadCompsOnRender: 1,
 
-		//Configurations for Asset Manager
-		assetManager: {},
+    // Dom element
+    el: '',
 
-		//Configurations for Canvas
-		canvas: {},
+    //Configurations for Asset Manager
+    assetManager: {},
 
-		//Configurations for Layers
-		layers: {},
+    //Configurations for Canvas
+    canvas: {},
 
-		//Configurations for Storage Manager
-		storageManager: {},
+    //Configurations for Layers
+    layers: {},
 
-		//Configurations for Rich Text Editor
-		rte: {},
+    //Configurations for Storage Manager
+    storageManager: {},
 
-		//Configurations for DomComponents
-		domComponents: {},
+    //Configurations for Rich Text Editor
+    rte: {},
 
-		//Configurations for Modal Dialog
-		modal: {},
+    //Configurations for DomComponents
+    domComponents: {},
 
-		//Configurations for Code Manager
-		codeManager: {},
+    //Configurations for Modal Dialog
+    modal: {},
 
-		//Configurations for Panels
-		panels: {},
+    //Configurations for Code Manager
+    codeManager: {},
 
-		//Configurations for Commands
-		commands: {},
+    //Configurations for Panels
+    panels: {},
 
-		//Configurations for Css Composer
-		cssComposer: {},
+    //Configurations for Commands
+    commands: {},
 
-		//Configurations for Selector Manager
-		selectorManager: {},
+    //Configurations for Css Composer
+    cssComposer: {},
+
+    //Configurations for Selector Manager
+    selectorManager: {},
 
 		//Configurations for Device Manager
 		deviceManager: {

src/editor/model/Editor.js

@@ -39,8 +39,23 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
 				this.initUndoManager(); // Is already called (inside components and css composer)
 
 				this.on('change:selectedComponent', this.componentSelected, this);
+        this.on('change:changesCount', this.updateBeforeUnload, this);
 			},
 
+      /**
+       * Set the alert before unload in case it's requested
+       * and there are unsaved changes
+       */
+      updateBeforeUnload: function() {
+        var changes = this.get('changesCount');
+
+        if (this.config.noticeOnUnload && changes) {
+          window.onbeforeunload = function(e) { return 1;};
+        } else {
+          window.onbeforeunload = null;
+        }
+      },
+
 			/**
 			 * Load generic module
 			 * @param {String} moduleName Module name

src/grapesjs/config/config.js

@@ -22,9 +22,6 @@ define(function () {
     // Enable/Disable undo manager
     undoManager: true,
 
-    // Show an alert before unload the page
-    noticeOnUnload: true,
-
     // Storage Manager
     storageManager: {},
 
@@ -34,4 +31,4 @@ define(function () {
     // Custom options for plugins
     pluginsOpts: {}
   };
-});
+});

src/grapesjs/main.js

@@ -47,11 +47,6 @@ define(function (require) {
         if(!els)
           throw new Error("'container' is required");
 
-        if(c.noticeOnUnload)
-          window.onbeforeunload = function(e) {
-            return 1;
-          };
-
         c.el = document.querySelector(els);
         var editor = new Editor(c).init();