record_select_navigator.js

$(document).ready(function(){
  var dataChanged = false;
  // record if form values ever change.
  $(":input").change(function () {
    dataChanged = true;
  });
  
  var $record_nav = $('select.record-nav');
  if ($record_nav.length > 0){
    $record_nav.each(function(){
      // set record select input to the correct value incase it's auto-filled by the browser.
      var $elm = $(this);
      $elm.val($elm.attr('data-current-page-id'));
    });

    $record_nav.delayedObserver(1, function(elm, value){
      var message = "It looks like you've changed this record. " +
                    "Would you like to save before leaving, leave without saving, or stay here?";
      var newLocation = function(){
        // Are we on an edit page? This allows us to navigate from edit pages
        // to other edit pages. Or from viewing a record to viewing another
        // record. But not moving from edit to view or view to edit.
        if (window.location.href.match(/edit\/?$/)){
          return "/records/"+value+'/edit';
        } else {
          return "/records/"+value;
        }
      };
      if (value != elm.attr('data-current-page-id')) {
        if (!dataChanged){
          // If the user hasn't made any changes to the inputs on the page we
          // just change location.
          window.location.href = newLocation();
        } else {
          // If the user has made changes to the inputs on the page we ask
          // if they want to leave, stay or save and leave.
          Boxy.ask(message, ["Save", "Leave", "Cancel"], function(answer) {
            switch (answer){
              case 'Save':
                // This adds a form element that returns the id of the record we
                // want to navigate to the server. So after the server saves
                // the record it can redirect us to the correct page.
                var input_html = '<input type="hidden" name="redirect_to_record_id" value="'+value+'" />';
                $('form.record_type:first').append(input_html).submit();
                break;
              case 'Leave':
                window.location.href = newLocation();
                break;
              default:
                break;
            }
          });
        }
      }
      stopSpinner();
    });
  }
});

/*
*
* jRails form observer plugin
* version 0.2
* <aaron@ennerchi.com> | http://www.ennerchi.com
*
*/
(function($) {
	$.extend({ // Translate field to event
		fieldEvent: function(el, obs) {
			var field = el[0] || el, e = 'change';
			if (field.type == 'radio' || field.type == 'checkbox') e = 'click';
			else if (obs && (field.type == 'text' || field.type == 'textarea' || field.type == 'password')) e = 'keyup';
			return e;
		}
	});
	$.fn.extend({ // Delayed observer for fields and forms
		delayedObserver: function(delay, callback){
			var el = $(this);
			if (typeof window.delayedObserverStack == 'undefined') window.delayedObserverStack = [];
			if (typeof window.delayedObserverCallback == 'undefined') {
				window.delayedObserverCallback = function(stackPos) {
					var observed = window.delayedObserverStack[stackPos];
					if (observed.timer) clearTimeout(observed.timer);
					observed.timer = setTimeout(function(){
						observed.timer = null;
						observed.callback(observed.obj, observed.obj.formVal());
					}, observed.delay * 1000);
					observed.oldVal = observed.obj.formVal();
				};
			}
			window.delayedObserverStack.push({
				obj: el, timer: null, delay: delay,
				oldVal: el.formVal(), callback: callback
			});
			var stackPos = window.delayedObserverStack.length-1;
			if (el[0].tagName == 'FORM') {
				$(':input', el).each(function(){
					var field = $(this);
					field.bind($.fieldEvent(field, delay), function(){
						var observed = window.delayedObserverStack[stackPos];
						if (observed.obj.formVal() == observed.oldVal) return;
						else window.delayedObserverCallback(stackPos);
					});
				});
			} else {
				el.bind($.fieldEvent(el, delay), function(){
					var observed = window.delayedObserverStack[stackPos];
					if (observed.obj.formVal() == observed.oldVal) return;
					else window.delayedObserverCallback(stackPos);
				});
			};
		},
		formVal: function() { // Gets form values
			var el = this[0];
			if(el.tagName == 'FORM') return this.serialize();
			if(el.type == 'checkbox' || el.type == 'radio') return this.filter('input:checked').val() || '';
			else return this.val();
		}
	});
})(jQuery);