Auto-saving

autosave.js

// Usage:
// $(function() { $(document).autosave(); });

(function($) {

  // initialize the namespace with an empty timer
  $.autosave = { timer: null };

  // NOTE: all actionable methods below provide hooks that you can
  // bind to as needed (both before/after hooks are triggered)
  //
  // Example:
  // => $(document).bind('autosave:beforeSubmit', function() { ... });

  // extend the autosave namespace
  $.extend($.autosave, {

    // defaults
    settings: {
      // URL the autosaving gets submitted to
      url: '/projects/autosave',
      // how often we save
      delay: 60000,
      // the $.data() attr for submitted form fields
      dataAttr: 'autosave',
      // the DOM ID of the element to show the response
      notifyDomID: '#autosave-response',
      // fade the autosave response after this long
      notifyUIDelay: 10000
    },

    // starts the timer to periodically autosave
    // based on the specified delay in the settings
    watch: function() {
      $(document).trigger('autosave:beforeStart');
    	
      var watch = function() {
        $.autosave.submit()
        $.autosave.timer = setTimeout(watch, $.autosave.settings.delay);
      }
    	
      // triggers the initial recursion to start autosave
      $.autosave.timer = setTimeout(watch, $.autosave.settings.delay);
    	
      $(document).trigger('autosave:afterStart');
    },

    // allows the autosave to be turned off (or "paused")
    pause: function() {
      if ($.autosave.timer) {
        $(document).trigger('autosave:beforeStop');
    		
        clearTimeout($.autosave.timer);
        $.autosave.timer = null;
    		
        $(document).trigger('autosave:afterStop');
      }
    },

    // resumes autosave if it was off/paused
    resume: function() {
      $.autosave.watch();
    },

    notifyUI: function(msg) {
      var notifyElement = $($.autosave.settings.notifyDomID);

      if (notifyElement.length > 0) {
        notifyElement.show().text(msg).delay($.autosave.notifyUIDelay).fadeOut();
      }			
    },

    // does the actual autosaving
    submit: function() {
      $(document).trigger('autosave:beforeSubmit');

      // collect fields of the following example format:
      // => <input data-autosave="true" type="hidden" name="value_one" value="someValue" />
      var fields = $.autosave.settings.jqElement.find('input[data-' + $.autosave.settings.dataAttr + ']').clone();

      // we only want to submit if we have data to send off
      var shouldSubmit = fields.length > 0;

      if (shouldSubmit) {
        var form = $('<form />');
    		
        // add the fields to our form
        form.append(fields);

        // submit the data to the server
        $.ajax({
          url: $.autosave.settings.url,
          data: form.serialize(),
          dataType: 'POST',
          success: function() {
            $.autosave.notifyUI("Saved successfully just now");
          },
          error: function() {
            $.autosave.notifyUI("Something went wrong with autosaving");
          }
        });
      }
    	
      $(document).trigger('autosave:afterSubmit');
    }
  });

  // the plugin itself
  $.fn.autosave = function(config) {
    config = config || {};

    // grab the jQuery element the plugin was called on
    // (used to scope/gather form fields that need autosaving)
    config['jqElement'] = this;

    // override any defaults with custom config
    $.extend($.autosave.settings, config);

    // keep the jQuery chaining alive
    return this.each(function() {
      // trigger the first autosave and set the initial timer
      $.autosave.timer = setTimeout($.autosave.watch(), $.autosave.settings.delay);
    });
  }

})(jQuery);