479 lines
15 KiB
JavaScript
479 lines
15 KiB
JavaScript
/**
|
|
* Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings
|
|
* and other disasters.
|
|
*
|
|
* @author Alexander Kaupanin <kaupanin@gmail.com>
|
|
*/
|
|
|
|
//$.sisyphus().setOptions({timeout: 15})
|
|
( function( $ ) {
|
|
$.sisyphus = function() {
|
|
return Sisyphus.getInstance();
|
|
};
|
|
|
|
$.fn.sisyphus = function( options ) {
|
|
var sisyphus = Sisyphus.getInstance();
|
|
sisyphus.setOptions( options );
|
|
sisyphus.protect( this );
|
|
return sisyphus;
|
|
};
|
|
|
|
var browserStorage = {};
|
|
|
|
/**
|
|
* Check if local storage or other browser storage is available
|
|
*
|
|
* @return Boolean
|
|
*/
|
|
browserStorage.isAvailable = function() {
|
|
if ( typeof $.jStorage === "object" ) {
|
|
return true;
|
|
}
|
|
try {
|
|
return localStorage.getItem;
|
|
} catch ( e ) {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set data to browser storage
|
|
*
|
|
* @param [String] key
|
|
* @param [String] value
|
|
*
|
|
* @return Boolean
|
|
*/
|
|
browserStorage.set = function( key, value ) {
|
|
if ( typeof $.jStorage === "object" ) {
|
|
$.jStorage.set( key, value + "" );
|
|
} else {
|
|
try {
|
|
localStorage.setItem( key, value + "" );
|
|
} catch (e) {
|
|
//QUOTA_EXCEEDED_ERR
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get data from browser storage by specified key
|
|
*
|
|
* @param [String] key
|
|
*
|
|
* @return string
|
|
*/
|
|
browserStorage.get = function( key ) {
|
|
if ( typeof $.jStorage === "object" ) {
|
|
var result = $.jStorage.get( key );
|
|
return result ? result.toString() : result;
|
|
} else {
|
|
return localStorage.getItem( key );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Delete data from browser storage by specified key
|
|
*
|
|
* @param [String] key
|
|
*
|
|
* @return void
|
|
*/
|
|
browserStorage.remove = function( key ) {
|
|
if ( typeof $.jStorage === "object" ) {
|
|
$.jStorage.deleteKey( key );
|
|
} else {
|
|
localStorage.removeItem( key );
|
|
}
|
|
};
|
|
|
|
Sisyphus = ( function() {
|
|
var params = {
|
|
instantiated: null,
|
|
started: null
|
|
};
|
|
|
|
function init () {
|
|
|
|
return {
|
|
/**
|
|
* Set plugin initial options
|
|
*
|
|
* @param [Object] options
|
|
*
|
|
* @return void
|
|
*/
|
|
setInitialOptions: function ( options ) {
|
|
var defaults = {
|
|
excludeFields: [],
|
|
customKeyPrefix: "",
|
|
timeout: 0,
|
|
autoRelease: true,
|
|
name: null,
|
|
onSave: function() {},
|
|
onBeforeRestore: function() {},
|
|
onRestore: function() {},
|
|
onRelease: function() {}
|
|
};
|
|
this.options = this.options || $.extend( defaults, options );
|
|
this.browserStorage = browserStorage;
|
|
},
|
|
|
|
/**
|
|
* Set plugin options
|
|
*
|
|
* @param [Object] options
|
|
*
|
|
* @return void
|
|
*/
|
|
setOptions: function ( options ) {
|
|
this.options = this.options || this.setInitialOptions( options );
|
|
this.options = $.extend( this.options, options );
|
|
},
|
|
|
|
/**
|
|
* Protect specified forms, store it's fields data to local storage and restore them on page load
|
|
*
|
|
* @param [Object] targets forms object(s), result of jQuery selector
|
|
* @param Object options plugin options
|
|
*
|
|
* @return void
|
|
*/
|
|
protect: function( targets ) {
|
|
targets = targets || {};
|
|
var self = this;
|
|
this.targets = this.targets || [];
|
|
this.href = this.options.name || location.hostname + location.pathname + location.search + location.hash;
|
|
|
|
this.targets = $.merge( this.targets, targets );
|
|
this.targets = $.unique( this.targets );
|
|
this.targets = $( this.targets );
|
|
if ( ! this.browserStorage.isAvailable() ) {
|
|
return false;
|
|
}
|
|
|
|
self.restoreAllData();
|
|
if ( this.options.autoRelease ) {
|
|
self.bindReleaseData();
|
|
}
|
|
if ( ! params.started ) {
|
|
self.bindSaveData();
|
|
params.started = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Bind saving data
|
|
*
|
|
* @return void
|
|
*/
|
|
bindSaveData: function() {
|
|
var self = this;
|
|
|
|
if ( self.options.timeout ) {
|
|
self.saveDataByTimeout();
|
|
}
|
|
|
|
self.targets.each( function() {
|
|
var targetFormId = $( this ).attr( "id" );
|
|
var fieldsToProtect = $( this ).find( ":input" ).not( ":submit" ).not( ":reset" ).not( ":button" ).not( ":file" );
|
|
|
|
fieldsToProtect.each( function() {
|
|
if ( $.inArray( this, self.options.excludeFields ) !== -1 ) {
|
|
// Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
|
|
return true;
|
|
}
|
|
var field = $( this );
|
|
var prefix = self.href + targetFormId + field.attr( "name" ) + self.options.customKeyPrefix;
|
|
if ( field.is( ":text" ) || field.is( "textarea" ) ) {
|
|
if ( ! self.options.timeout ) {
|
|
self.bindSaveDataImmediately( field, prefix );
|
|
}
|
|
} else {
|
|
self.bindSaveDataOnChange( field, prefix );
|
|
}
|
|
} );
|
|
|
|
if ( typeof window.CKEDITOR !== 'undefined' ) {
|
|
CKEDITOR.on( 'instanceReady', function(ev) {
|
|
if ( $.inArray( ev.editor.element.$, fieldsToProtect ) ) {
|
|
ev.editor.on( 'change', function(eev) {
|
|
eev.editor.updateElement();
|
|
var element = eev.editor.element.$;
|
|
|
|
if ( typeof element.oninput === 'undefined' ) {
|
|
element.onpropertychange();
|
|
} else {
|
|
element.oninput();
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
}
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Save all protected forms data to Local Storage.
|
|
* Common method, necessary to not lead astray user firing 'data are saved' when select/checkbox/radio
|
|
* is changed and saved, while textfield data are saved only by timeout
|
|
*
|
|
* @return void
|
|
*/
|
|
saveAllData: function() {
|
|
var self = this;
|
|
|
|
self.targets.each( function() {
|
|
var targetFormId = $( this ).attr( "id" );
|
|
var fieldsToProtect = $( this ).find( ":input" ).not( ":submit" ).not( ":reset" ).not( ":button" ).not( ":file" );
|
|
|
|
fieldsToProtect.each( function() {
|
|
var field = $( this );
|
|
if ( $.inArray( this, self.options.excludeFields ) !== -1 || field.attr( "name" ) === undefined ) {
|
|
// Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
|
|
return true;
|
|
}
|
|
var prefix = self.href + targetFormId + field.attr( "name" ) + self.options.customKeyPrefix;
|
|
var value = field.val();
|
|
|
|
if ( field.is(":checkbox") ) {
|
|
if ( field.attr( "name" ).indexOf( "[" ) !== -1 ) {
|
|
value = [];
|
|
$( "[name='" + field.attr( "name" ) +"']:checked" ).each( function() {
|
|
value.push( $( this ).val() );
|
|
} );
|
|
} else {
|
|
value = field.is( ":checked" );
|
|
}
|
|
self.saveToBrowserStorage( prefix, value, false );
|
|
} else if ( field.is( ":radio" ) ) {
|
|
if ( field.is( ":checked" ) ) {
|
|
value = field.val();
|
|
self.saveToBrowserStorage( prefix, value, false );
|
|
}
|
|
} else {
|
|
self.saveToBrowserStorage( prefix, value, false );
|
|
}
|
|
} );
|
|
} );
|
|
if ( $.isFunction( self.options.onSave ) ) {
|
|
self.options.onSave.call();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Restore forms data from Local Storage
|
|
*
|
|
* @return void
|
|
*/
|
|
restoreAllData: function() {
|
|
var self = this;
|
|
var restored = false;
|
|
|
|
if ( $.isFunction( self.options.onBeforeRestore ) ) {
|
|
self.options.onBeforeRestore.call();
|
|
}
|
|
|
|
self.targets.each( function() {
|
|
var target = $( this );
|
|
var targetFormId = target.attr( "id" );
|
|
var fieldsToProtect = target.find( ":input" ).not( ":submit" ).not( ":reset" ).not( ":button" ).not( ":file" );
|
|
|
|
fieldsToProtect.each( function() {
|
|
|
|
if ( $.inArray( this, self.options.excludeFields ) !== -1 ) {
|
|
// Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
|
|
return true;
|
|
}
|
|
var field = $( this );
|
|
var prefix = self.href + targetFormId + field.attr( "name" ) + self.options.customKeyPrefix;
|
|
var resque = self.browserStorage.get( prefix );
|
|
if ( resque ) {
|
|
self.restoreFieldsData( field, resque );
|
|
restored = true;
|
|
}
|
|
} );
|
|
} );
|
|
|
|
if ( restored && $.isFunction( self.options.onRestore ) ) {
|
|
self.options.onRestore.call();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Restore form field data from local storage
|
|
*
|
|
* @param Object field jQuery form element object
|
|
* @param String resque previously stored fields data
|
|
*
|
|
* @return void
|
|
*/
|
|
restoreFieldsData: function( field, resque ) {
|
|
if ( field.attr( "name" ) === undefined ) {
|
|
return false;
|
|
}
|
|
if ( field.is( ":checkbox" ) && resque !== "false" && field.attr( "name" ).indexOf( "[" ) === -1 ) {
|
|
field.attr( "checked", "checked" );
|
|
} else if ( field.is( ":radio" ) ) {
|
|
if ( field.val() === resque ) {
|
|
field.attr( "checked", "checked" );
|
|
}
|
|
} else if ( field.attr( "name" ).indexOf( "[" ) === -1 ) {
|
|
field.val( resque );
|
|
} else {
|
|
resque = resque.split( "," );
|
|
field.val( resque );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Bind immediate saving (on typing/checking/changing) field data to local storage when user fills it
|
|
*
|
|
* @param Object field jQuery form element object
|
|
* @param String prefix prefix used as key to store data in local storage
|
|
*
|
|
* @return void
|
|
*/
|
|
bindSaveDataImmediately: function( field, prefix ) {
|
|
var self = this;
|
|
|
|
if ( typeof $.browser.msie === 'undefined' ) {
|
|
field.get(0).oninput = function() {
|
|
self.saveToBrowserStorage( prefix, field.val() );
|
|
};
|
|
} else {
|
|
field.get(0).onpropertychange = function() {
|
|
self.saveToBrowserStorage( prefix, field.val() );
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Save data to Local Storage and fire callback if defined
|
|
*
|
|
* @param String key
|
|
* @param String value
|
|
* @param Boolean [true] fireCallback
|
|
*
|
|
* @return void
|
|
*/
|
|
saveToBrowserStorage: function( key, value, fireCallback ) {
|
|
// if fireCallback is undefined it should be true
|
|
fireCallback = fireCallback === null ? true : fireCallback;
|
|
this.browserStorage.set( key, value );
|
|
if ( fireCallback && value !== "" && $.isFunction( this.options.onSave ) ) {
|
|
this.options.onSave.call();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Bind saving field data on change
|
|
*
|
|
* @param Object field jQuery form element object
|
|
* @param String prefix prefix used as key to store data in local storage
|
|
*
|
|
* @return void
|
|
*/
|
|
bindSaveDataOnChange: function( field, prefix ) {
|
|
var self = this;
|
|
field.change( function() {
|
|
self.saveAllData();
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Saving (by timeout) field data to local storage when user fills it
|
|
*
|
|
* @return void
|
|
*/
|
|
saveDataByTimeout: function() {
|
|
var self = this;
|
|
var targetForms = self.targets;
|
|
setTimeout( ( function( targetForms ) {
|
|
function timeout() {
|
|
self.saveAllData();
|
|
setTimeout( timeout, self.options.timeout * 1000 );
|
|
}
|
|
return timeout;
|
|
} )( targetForms ), self.options.timeout * 1000 );
|
|
},
|
|
|
|
/**
|
|
* Bind release form fields data from local storage on submit/reset form
|
|
*
|
|
* @return void
|
|
*/
|
|
bindReleaseData: function() {
|
|
var self = this;
|
|
self.targets.each( function( i ) {
|
|
var target = $( this );
|
|
var fieldsToProtect = target.find( ":input" ).not( ":submit" ).not( ":reset" ).not( ":button" ).not( ":file" );
|
|
var formId = target.attr( "id" );
|
|
$( this ).bind( "submit reset", function() {
|
|
self.releaseData( formId, fieldsToProtect );
|
|
} );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Manually release form fields
|
|
*
|
|
* @return void
|
|
*/
|
|
manuallyReleaseData: function() {
|
|
var self = this;
|
|
self.targets.each( function( i ) {
|
|
var target = $( this );
|
|
var fieldsToProtect = target.find( ":input" ).not( ":submit" ).not( ":reset" ).not( ":button" ).not( ":file" );
|
|
var formId = target.attr( "id" );
|
|
self.releaseData( formId, fieldsToProtect );
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Bind release form fields data from local storage on submit/resett form
|
|
*
|
|
* @param String targetFormId
|
|
* @param Object fieldsToProtect jQuery object contains form fields to protect
|
|
*
|
|
* @return void
|
|
*/
|
|
releaseData: function( targetFormId, fieldsToProtect ) {
|
|
var released = false;
|
|
var self = this;
|
|
fieldsToProtect.each( function() {
|
|
if ( $.inArray( this, self.options.excludeFields ) !== -1 ) {
|
|
// Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
|
|
return true;
|
|
}
|
|
var field = $( this );
|
|
var prefix = self.href + targetFormId + field.attr( "name" ) + self.options.customKeyPrefix;
|
|
self.browserStorage.remove( prefix );
|
|
released = true;
|
|
} );
|
|
|
|
if ( released && $.isFunction( self.options.onRelease ) ) {
|
|
self.options.onRelease.call();
|
|
}
|
|
}
|
|
|
|
};
|
|
}
|
|
|
|
return {
|
|
getInstance: function() {
|
|
if ( ! params.instantiated ) {
|
|
params.instantiated = init();
|
|
params.instantiated.setInitialOptions();
|
|
}
|
|
return params.instantiated;
|
|
},
|
|
|
|
free: function() {
|
|
params = {};
|
|
return null;
|
|
}
|
|
};
|
|
} )();
|
|
} )( jQuery );
|