Grid Editing: Extract localStorage persistence into simple abstraction for demos.

Author: jzaefferer

grid-editing/editor.js

@@ -13,7 +13,12 @@ $.widget( "ui.editor", {
 	_create: function() {
 		this.inner = this.element.wrapInner("<div class='editor-wrapper'></div>").children();
 		this._bind({
-			click: "start"
+			click: function( event ) {
+				if (this.input.is(":visible")) {
+					return;
+				}
+				this.start( event );
+			}
 		});
 
 		this.input = this.inputWrapper = $( "<input>" );
@@ -24,13 +29,18 @@ $.widget( "ui.editor", {
 		}
 		this.inputWrapper.hide().appendTo( this.element )
 
-		this._bind( this.input, {
-			// TODO ignore clicks (=blur) on spinner controls
-			blur: function( event ) {
+		this._bind( this.inputWrapper, {
+			focusin: function() {
+				clearTimeout( this.timer );
+			},
+			focusout: function( event ) {
 				if (!this.input.is(":visible")) {
 					return;
 				}
-				this.submit( event );
+				var that = this;
+				this.timer = setTimeout( function() {
+					that.submit( event );
+				}, 100 );
 			},
 			keyup: function( event ) {
 				if ( event.keyCode === $.ui.keyCode.ENTER || event.keyCode === $.ui.keyCode.NUMPAD_ENTER ) {

grid-editing/grid.html

@@ -17,32 +17,13 @@
 	<script src="../grid-spf/grid.js"></script>
 	<script src="../grid-spf/pager.js"></script>
 	<script src="editor.js"></script>
+	<script src="localstore.js"></script>
 	<script>
-	var localStorageSupport = (function() {
-		try {
-			return !!localStorage.getItem;
-		} catch(e){
-			return false;
-		}
-	})();
-
-	var localDevelopers;
-	if ( localStorageSupport ) {
-		var item = localStorage.getItem( "grid-editing-developers" );
-		if ( item ) {
-			localDevelopers = JSON.parse( item );
-		}
-	}
-	if ( !localDevelopers ) {
-		$.ajax({
-			dataType: "json",
-			url: "../grid-spf/developers.json",
-			async: false,
-			success: function( result ) {
-				localDevelopers = result;
-			}
-		});
-	}
+	var store = $.demos.localstore( {
+		key: "grid-editing-developers",
+		initial: "../grid-spf/developers.json"
+	});
+	var localDevelopers = store.load();
 
 	$(function() {
 		var developers = $.ui.localDatasource({
@@ -51,15 +32,8 @@
 				limit: 8
 			}
 		});
-		developers.save = function( object ) {
-			if ( object ) {
-				console.log( "save update to " + object.firstName + " " + object.lastName );
-			} else {
-				console.log( "save all" );
-			}
-			if ( localStorageSupport ) {
-				localStorage.setItem( "grid-editing-developers", JSON.stringify( localDevelopers ) )
-			}
+		developers.save = function() {
+			store.save( localDevelopers );
 			return this;
 		}
 
@@ -70,13 +44,13 @@
 					var th = $( this ).parents( "table:first" ).find( "th" ).eq( this.cellIndex ),
 						field = th.data( "field" );
 					$( this ).editor({
-							type: th.data( "type" ),
-							submit: function( event, ui ) {
-								var object = $( this ).tmplItem().data;
-								object[field] = ui.value;
-								developers.save( object );
-							}
-						})
+						type: th.data( "type" ),
+						submit: function( event, ui ) {
+							var object = $( this ).tmplItem().data;
+							set(object, field, ui.value);
+							developers.save();
+						}
+					});
 				});
 			}
 		}).data("grid");
@@ -112,7 +86,7 @@
 			$.each( $( this ).serializeArray(), function( index, object ) {
 				set( developer, object.name, object.value );
 			});
-			developers.save( developer ).refresh();
+			developers.save().refresh();
 			editForm.hide();
 		});
 		grid.element.delegate( "button.edit", "click", function() {
@@ -144,8 +118,7 @@
 				country: "Unknown",
 				bitcoins: 0
 			});
-			developers.save();
-			developers.refresh();
+			developers.save().refresh();
 		});
 
 		developers.refresh();

grid-editing/localstore.js

@@ -0,0 +1,60 @@
+/*
+ * Little abstraction for localStorage access
+ *
+ * Depends on:
+ * widget
+ */
+(function( $ ) {
+
+var localStorageSupport = (function() {
+	try {
+		return !!localStorage.getItem;
+	} catch(e){
+		return false;
+	}
+})();
+
+$.widget( "demos.localstore", {
+	options: {
+		key: null,
+		initial: null
+	},
+	_create: function() {
+		if (this.options.key === null ) {
+			throw "need to configure a key";
+		}
+		if ( this._fresh() && $.type( this.options.initial ) === "string") {
+			var that = this;
+			$.ajax({
+				dataType: "json",
+				url: this.options.initial,
+				async: false,
+				success: function( result ) {
+					that.save( result );
+				}
+			});
+		}
+	},
+	_fresh: function() {
+		var stored = this.load();
+		return !stored || stored === this.options.initial;
+	},
+	load: function() {
+		var stored = localStorageSupport
+			? JSON.parse( localStorage.getItem( this.options.key ) )
+			: this.data;
+		if (!stored) {
+			return this.options.intial;
+		}
+		return stored;
+	},
+	save: function( data ) {
+		console.log("save", data)
+		localStorageSupport
+			? localStorage.setItem( this.options.key, JSON.stringify( data ) )
+			: this.data = data;
+	}
+});
+
+
+})( jQuery );