WiringEditor saved status indicator

Author: ericabouaf

VERSION.txt

@@ -7,7 +7,6 @@ not released yet
 
 Current:
 
-	* Layer.onChangeEvt (+implementation in WiringEditor for saved state)
 	* documentation for ajax controller, especially how to do REST
 
 	* BUG: jsBox: form values in input fields are overriden !!
@@ -33,10 +32,13 @@ Changeset:
 			* Gears (if no backend usable)
 			* Ajax adapter - configurable XHR calls. Can be configured to do REST or something else...
 		* propertiesFields default value (becomes optional)
+		* saved status indicator
 
-	* WireIt Guide
-	* Show only one scissor at a time
+	* WireIt Guide	
 	* InOutContainer
+
+	* Layer.onChangeEvt
+	* Show only one scissor at a time
 	* Spring Layout (experimental) (+examples)
 	* Wire mouse events (experimental) (+examples)
 	* Added drawing method 'bezierArrows' (experimental)

css/WireItEditor.css

@@ -62,6 +62,16 @@ body {
  background:transparent url(../images/icons/help.png) no-repeat scroll 10% 50%;
 }
 
+/**
+ * savedStatus
+ */
+div.savedStatus {
+	color:orange;
+	font-size:27pt;
+	left:650px;
+	position:absolute;
+	top:10px;
+}
 
 /**
  * LEFT

js/WiringEditor.js

@@ -124,6 +124,9 @@ WireIt.WiringEditor = function(options) {
     // Render buttons
     this.renderButtons();
 
+ 	 // Saved status
+	 this.renderSavedStatus();
+
     // Properties Form
     this.renderPropertiesForm();
 
@@ -209,6 +212,10 @@ WireIt.WiringEditor.prototype = {
        parentEl: YAHOO.util.Dom.get('propertiesForm'),
        fields: this.options.propertiesFields
     });
+
+	this.propertiesForm.updatedEvt.subscribe(function() {
+		this.markUnsaved();
+	}, this, true);
  },
 
  /**
@@ -286,6 +293,15 @@ WireIt.WiringEditor.prototype = {
     helpButton.on("click", this.onHelp, this, true);
  },
 
+	/**
+	 * @method renderSavedStatus
+	 */
+	renderSavedStatus: function() {
+		var top = Dom.get('top');
+		this.savedStatusEl = WireIt.cn('div', {className: 'savedStatus', title: 'Not saved'}, {display: 'none'}, "*");
+		top.appendChild(this.savedStatusEl);
+	},
+
  /**
   * save the current module
   * @method saveModule
@@ -315,17 +331,17 @@ WireIt.WiringEditor.prototype = {
   */
  saveModuleSuccess: function(o) {
 
-    this.alert("Saved !");
+	this.markSaved();
 
-	 //console.log(this.tempSavedWiring);
-	var name = this.tempSavedWiring.name;
-	
+   this.alert("Saved !");
+
+	/*var name = this.tempSavedWiring.name;	
 	if(this.modulesByName.hasOwnProperty(name) ) {
 		//console.log("already exists !");
 	}
 	else {
 		//console.log("new one !");
-	}
+	}*/
 
  },
 
@@ -358,7 +374,10 @@ WireIt.WiringEditor.prototype = {
 	this.preventLayerChangedEvent = true;
 
    this.layer.clear(); 
-   this.propertiesForm.clear();
+
+   this.propertiesForm.clear(false); // false to tell inputEx to NOT send the updatedEvt
+
+	this.markSaved();
 
 	this.preventLayerChangedEvent = false;
  },
@@ -547,7 +566,7 @@ WireIt.WiringEditor.prototype = {
     // TODO: check if current wiring is saved...
     this.layer.clear();
 
-    this.propertiesForm.setValue(wiring.properties);
+    this.propertiesForm.setValue(wiring.properties, false); // the false tells inputEx to NOT fire the updatedEvt
 
     if(lang.isArray(wiring.modules)) {
 
@@ -576,8 +595,9 @@ WireIt.WiringEditor.prototype = {
         }
      }
 
-
-	this.preventLayerChangedEvent = true;
+	this.markSaved();
+	
+	this.preventLayerChangedEvent = false;
 
   	}
   	catch(ex) {
@@ -606,20 +626,18 @@ WireIt.WiringEditor.prototype = {
 		}, this, true);
 	},
 
-
 	onLayerChanged: function() {
 		if(!this.preventLayerChangedEvent) {
-			//console.log("layer changed !");
 			this.markUnsaved();
 		}
 	},
 
 	markSaved: function() {
-		
+		this.savedStatusEl.style.display = 'none';
 	},
 
 	markUnsaved: function() {
-		
+		this.savedStatusEl.style.display = '';
 	},