romo 0.0.1 → 0.1.0

data/assets/js/romo/dropdown.js

@@ -0,0 +1,309 @@
+$.fn.romoDropdown = function() {
+  return $.map(this, function(element) {
+    return new RomoDropdown(element);
+  });
+}
+
+var RomoDropdown = function(element) {
+  this.elem = $(element);
+  this.popupElem = $('<div class="romo-dropdown-popup"><div class="romo-dropdown-body"></div></div>');
+  this.popupElem.appendTo('body');
+  this.doSetPopupZIndex(this.elem);
+  this.bodyElem = this.popupElem.find('> .romo-dropdown-body');
+  this.contentElem = $();
+  this.romoInvoke = this.elem.romoInvoke()[0];
+
+  var positionData = this._parsePositionData(this.elem.data('romo-dropdown-position'));
+  this.popupPosition  = positionData.position  || 'bottom';
+  this.popupAlignment = positionData.alignment || 'left';
+  this.popupElem.attr('data-romo-dropdown-position',  this.popupPosition);
+  this.popupElem.attr('data-romo-dropdown-alignment', this.popupAlignment);
+  this.popupElem.attr('data-romo-dropdown-fixed', this.elem.data('romo-dropdown-fixed'));
+  // don't propagate click events on the popup elem.  this prevents the popup
+  // from closing when clicked (see body click event bind on popup open)
+  this.popupElem.on('click', function(e) {
+    if (e !== undefined) {
+      e.stopPropagation();
+    }
+  })
+
+  if (this.elem.data('romo-dropdown-style-class') !== undefined) {
+    this.bodyElem.addClass(this.elem.data('romo-dropdown-style-class'));
+  }
+
+  this.elem.unbind('click');
+  this.elem.on('click', $.proxy(this.onToggleClick, this));
+  this.elem.on('dropdown:triggerToggle', $.proxy(this.onToggleClick, this));
+  this.elem.on('dropdown:triggerPopupOpen', $.proxy(this.onPopupOpen, this));
+  this.elem.on('dropdown:triggerPopupClose', $.proxy(this.onPopupClose, this));
+  this.elem.on('invoke:loadStart', $.proxy(function(e, invoke) {
+    this.doLoadBodyStart();
+  }, this));
+  this.elem.on('invoke:loadSuccess', $.proxy(function(e, data, invoke) {
+    this.doLoadBodySuccess(data);
+  }, this));
+  this.elem.on('invoke:loadError', $.proxy(function(e, xhr, invoke) {
+    this.doLoadBodyError(xhr);
+  }, this));
+  this.elem.on('keyup', $.proxy(this.onElemKeyUp, this));
+  this.popupElem.on('keyup', $.proxy(this.onElemKeyUp, this));
+
+  this.doInit();
+  this.doInitBody();
+
+  this.elem.trigger('dropdown:ready', [this]);
+}
+
+RomoDropdown.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoDropdown.prototype.doInitBody = function() {
+  this.doResetBody();
+
+  this.contentElem = this.bodyElem.find('.romo-dropdown-content').last();
+  if (this.contentElem.size() === 0) {
+    this.contentElem = this.bodyElem;
+  }
+  this.closeElem = this.popupElem.find('[data-romo-dropdown-close="true"]');
+
+  this.contentElem.css({
+    'min-height': this.elem.data('romo-dropdown-min-height'),
+    'height':     this.elem.data('romo-dropdown-height'),
+    'overflow-x': this.elem.data('romo-dropdown-overflow-x') || 'auto',
+    'overflow-y': this.elem.data('romo-dropdown-overflow-y') || 'auto'
+  });
+
+  if (this.elem.data('romo-dropdown-max-height') === undefined) {
+    this.elem.attr('data-romo-dropdown-max-height', 'detect');
+  }
+  if (this.elem.data('romo-dropdown-max-height') !== 'detect') {
+    this.contentElem.css({
+      'max-height': this.elem.data('romo-dropdown-max-height')
+    });
+  }
+
+  if (this.elem.data('romo-dropdown-width') === 'elem') {
+    this.popupElem.css({
+      'width': this.elem.css('width')
+    });
+  } else {
+    this.contentElem.css({
+      'min-width':  this.elem.data('romo-dropdown-min-width'),
+      'max-width':  this.elem.data('romo-dropdown-max-width'),
+      'width':      this.elem.data('romo-dropdown-width')
+    });
+  }
+
+  this.closeElem.unbind('click');
+  this.closeElem.on('click', $.proxy(this.onPopupClose, this));
+}
+
+RomoDropdown.prototype.doResetBody = function() {
+  this.contentElem.css({
+    'min-width':  '',
+    'max-width':  '',
+    'width':      '',
+    'min-height': '',
+    'max-height': '',
+    'height':     '',
+    'overflow-x': '',
+    'overflow-y': ''
+  });
+}
+
+RomoDropdown.prototype.doLoadBodyStart = function() {
+  this.bodyElem.html('');
+  this.doInitBody();
+  this.doPlacePopupElem();
+  this.elem.trigger('dropdown:loadBodyStart', [this]);
+}
+
+RomoDropdown.prototype.doLoadBodySuccess = function(data) {
+  Romo.initHtml(this.bodyElem, data);
+  this.doInitBody();
+  this.doPlacePopupElem();
+  this.elem.trigger('dropdown:loadBodySuccess', [data, this]);
+}
+
+RomoDropdown.prototype.doLoadBodyError = function(xhr) {
+  this.elem.trigger('dropdown:loadBodyError', [xhr, this]);
+}
+
+RomoDropdown.prototype.onToggleClick = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false &&
+      this.elem.data('romo-dropdown-disable-toggle') !== true) {
+    this.doToggle();
+    return true;
+  }
+  return false;
+}
+
+RomoDropdown.prototype.doToggle = function() {
+  if (this.popupElem.hasClass('romo-dropdown-open')) {
+    setTimeout($.proxy(function() {
+      this.doPopupClose();
+    }, this), 100);
+  } else {
+    setTimeout($.proxy(function() {
+      this.doPopupOpen();
+    }, this), 100);
+  }
+  this.elem.trigger('dropdown:toggle', [this]);
+}
+
+RomoDropdown.prototype.onPopupOpen = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false &&
+      this.popupElem.hasClass('romo-dropdown-open') === false) {
+    setTimeout($.proxy(function() {
+      this.doPopupOpen();
+    }, this), 100);
+  }
+}
+
+RomoDropdown.prototype.doPopupOpen = function() {
+  this.romoInvoke.doInvoke();
+  this.popupElem.addClass('romo-dropdown-open');
+  this.doPlacePopupElem();
+
+  // bind an event to close the popup when clicking away from the
+  // popup.  Bind on a timeout to allow time for any toggle
+  // click event to propagate.  If no timeout, we'll bind this
+  // event, then the toggle click will propagate which will call
+  // this event and immediately close the popup.
+  setTimeout($.proxy(function() {
+    $('body').on('click', $.proxy(this.onWindowBodyClick, this));
+    $('body').on('modal:mousedown', $.proxy(this.onWindowBodyClick, this));
+  }, this), 100);
+  $('body').on('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+  $(window).on('resize', $.proxy(this.onResizeWindow, this));
+
+  this.elem.trigger('dropdown:popupOpen', [this]);
+}
+
+RomoDropdown.prototype.onPopupClose = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false &&
+      this.popupElem.hasClass('romo-dropdown-open') === true) {
+    setTimeout($.proxy(function() {
+      this.doPopupClose();
+    }, this), 100);
+  }
+}
+
+RomoDropdown.prototype.doPopupClose = function() {
+  this.popupElem.removeClass('romo-dropdown-open');
+
+  $('body').off('click', $.proxy(this.onWindowBodyClick, this));
+  $('body').off('modal:mousedown', $.proxy(this.onWindowBodyClick, this));
+  $('body').off('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+  $(window).off('resize', $.proxy(this.onResizeWindow, this));
+
+  this.elem.trigger('dropdown:popupClose', [this]);
+}
+
+RomoDropdown.prototype.onElemKeyUp = function(e) {
+  if (this.elem.hasClass('disabled') === false) {
+    if (this.popupElem.hasClass('romo-dropdown-open')) {
+      if(e.keyCode === 27 /* Esc */ ) {
+        this.doPopupClose();
+        return false;
+      } else {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  }
+  return true;
+}
+
+RomoDropdown.prototype.onWindowBodyClick = function(e) {
+  // if not clicked on the popup elem or the elem
+  var target = $(e.target);
+  if (e !== undefined &&
+      target.parents('.romo-dropdown-popup').size() === 0 &&
+      target.closest(this.elem).size() === 0) {
+    this.doPopupClose();
+  }
+  return true;
+}
+
+RomoDropdown.prototype.onWindowBodyKeyUp = function(e) {
+  if (e.keyCode === 27 /* Esc */) {
+    this.doPopupClose();
+  }
+  return true;
+}
+
+RomoDropdown.prototype.onResizeWindow = function(e) {
+  this.doPlacePopupElem();
+  return true;
+}
+
+RomoDropdown.prototype.doPlacePopupElem = function() {
+  if (this.elem.parents('.romo-modal-popup').size() !== 0) {
+    this.popupElem.css({'position': 'fixed'});
+  }
+
+  var pos = $.extend({}, this.elem[0].getBoundingClientRect(), this.elem.offset());
+  var w = this.popupElem[0].offsetWidth;
+  var h = this.popupElem[0].offsetHeight;
+  var pad = 2;
+  var offset = {};
+
+  switch (this.popupPosition) {
+    case 'top':
+      $.extend(offset, { top: pos.top - h - pad });
+      break;
+    case 'bottom':
+      $.extend(offset, { top: pos.top + pos.height + pad });
+      break;
+  }
+  switch (this.popupAlignment) {
+    case 'left':
+      $.extend(offset, { left: pos.left });
+      break;
+    case 'right':
+      $.extend(offset, { left: pos.right - w });
+      break;
+  }
+
+  this.popupElem.offset(offset);
+
+  if (this.elem.data('romo-dropdown-max-height') === 'detect') {
+    var pad = this.elem.data('romo-dropdown-max-height-detect-pad') || 10;
+    var contentTop = this.contentElem[0].getBoundingClientRect().top;
+    var contentBottom = this.contentElem[0].getBoundingClientRect().bottom;
+    var bodyBottom = this.bodyElem[0].getBoundingClientRect().bottom;
+    var padBottom = bodyBottom - contentBottom;
+
+    var maxHeight = $(window).height() - contentTop - padBottom - pad;
+    this.contentElem.css({'max-height': maxHeight.toString() + 'px'});
+  }
+}
+
+RomoDropdown.prototype.doSetPopupZIndex = function(relativeElem) {
+  var relativeZIndex = Romo.parseZIndex(relativeElem);
+  this.popupElem.css({'z-index': relativeZIndex + 1200}); // see z-index.css
+}
+
+RomoDropdown.prototype._parsePositionData = function(posString) {
+  var posData = (posString || '').split(',');
+  return { position: posData[0], alignment: posData[1] };
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-dropdown-auto="true"]').romoDropdown();
+});

data/assets/js/romo/dropdown_form.js

@@ -0,0 +1,92 @@
+$.fn.romoDropdownForm = function() {
+  return $.map(this, function(element) {
+    return new RomoDropdownForm(element);
+  });
+}
+
+var RomoDropdownForm = function(element) {
+  this.elem = $(element);
+
+  this.dropdown = this.elem.romoDropdown()[0];
+  this.doBindDropdown();
+
+  this.form = undefined;
+  this.elem.on('dropdownForm:form:triggerSubmit', $.proxy(function(e) {
+    if (this.form != undefined) {
+      this.form.elem.trigger('form:triggerSubmit', []);
+    }
+  }, this));
+  this.doBindForm();
+  this.elem.on('dropdown:loadBodySuccess', $.proxy(function(e, data, dropdown) {
+    this.doBindForm();
+  }, this));
+
+  this.doInit();
+  this.elem.trigger('dropdownForm:ready', [this]);
+}
+
+RomoDropdownForm.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoDropdownForm.prototype.doBindDropdown = function() {
+  this.elem.on('dropdown:ready', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownForm:dropdown:ready', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:toggle', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownForm:dropdown:toggle', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:popupOpen', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownForm:dropdown:popupOpen', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:popupClose', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownForm:dropdown:popupClose', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:loadBodyStart', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownForm:dropdown:loadBodyStart', [dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:loadBodySuccess', $.proxy(function(e, data, dropdown) {
+    this.elem.trigger('dropdownForm:dropdown:loadBodySuccess', [data, dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:loadBodyError', $.proxy(function(e, xhr, dropdown) {
+    this.elem.trigger('dropdownForm:dropdown:loadBodyError', [xhr, dropdown, this]);
+  }, this));
+  this.elem.on('dropdown:dismiss', $.proxy(function(e, dropdown) {
+    this.elem.trigger('dropdownForm:dropdown:dismiss', [dropdown, this]);
+  }, this));
+}
+
+RomoDropdownForm.prototype.doBindForm = function() {
+  var formElem = this.dropdown.popupElem.find('[data-romo-form-auto="dropdownForm"]');
+
+  formElem.on('form:clearMsgs', $.proxy(function(e, form) {
+    this.elem.trigger('dropdownForm:form:clearMsgs', [form, this]);
+  }, this));
+  formElem.on('form:ready', $.proxy(function(e, form) {
+    this.elem.trigger('dropdownForm:form:ready', [form, this]);
+  }, this));
+  formElem.on('form:beforeSubmit', $.proxy(function(e, form) {
+    this.elem.trigger('dropdownForm:form:beforeSubmit', [form, this]);
+  }, this));
+  formElem.on('form:submitSuccess', $.proxy(function(e, data, form) {
+    this.elem.trigger('dropdownForm:form:submitSuccess', [data, form, this]);
+  }, this));
+  formElem.on('form:submitInvalidMsgs', $.proxy(function(e, msgs, xhr, form) {
+    this.elem.trigger('dropdownForm:form:submitInvalidMsgs', [msgs, xhr, form, this]);
+  }, this));
+  formElem.on('form:submitXhrError', $.proxy(function(e, xhr, form) {
+    this.elem.trigger('dropdownForm:form:submitXhrError', [xhr, form, this]);
+  }, this));
+  formElem.on('form:submitError', $.proxy(function(e, xhr, form) {
+    this.elem.trigger('dropdownForm:form:submitError', [xhr, form, this]);
+  }, this));
+
+  var submitElement = this.dropdown.popupElem.find('[data-romo-form-submit="true"]')[0];
+  var indicatorElements = this.dropdown.popupElem.find('[data-romo-indicator-auto="true"]');
+  this.form = formElem.romoForm(submitElement, indicatorElements)[0];
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-dropdownForm-auto="true"]').romoDropdownForm();
+});
+

data/assets/js/romo/form.js

@@ -0,0 +1,182 @@
+$.fn.romoForm = function(givenSubmitElement, givenIndicatorElements) {
+  return $.map(this, function(element) {
+    return new RomoForm(element, givenSubmitElement, givenIndicatorElements);
+  });
+}
+
+var RomoForm = function(element, givenSubmitElement, givenIndicatorElements) {
+  this.elem = $(element);
+  this.defaultSubmitElem = this.elem.find('button[type="submit"], input[type="submit"], [data-romo-form-submit="true"]');
+  this.submitElem = $(givenSubmitElement || this.defaultSubmitElem);
+  this.defaultIndicatorElems = this.elem.find('[data-romo-indicator-auto="true"]');
+  this.indicatorElems = $(givenIndicatorElements || this.defaultIndicatorElems);
+  this.changeSubmitElems = this.elem.find('[data-romo-form-change-submit="true"]');
+
+  this.elem.on('keypress', $.proxy(this.onFormKeyPress, this));
+  this.defaultSubmitElem.unbind('click');
+  this.submitElem.unbind('click');
+  this.submitElem.on('click', $.proxy(this.onSubmitClick, this));
+  this.changeSubmitElems.on('change', $.proxy(function(e) {
+    this.elem.trigger('form:triggerSubmit');
+  }, this));
+  this.elem.on('form:triggerSubmit', $.proxy(this.onSubmitClick, this));
+
+  if (this.elem.data('romo-form-reload-page') === true) {
+    this.elem.on('form:submitSuccess', function(e, data, form) {
+      Romo.reloadPage();
+    })
+  }
+
+  this.defaultListValuesDelim = ',';
+
+  this.removeEmptyGetParams = this.elem.data('romo-form-remove-empty-get-params')
+  if (this.removeEmptyGetParams === undefined) {
+    this.removeEmptyGetParams = true;
+  }
+
+  this.decodeParams = this.elem.data('romo-form-decode-params')
+  if (this.decodeParams === undefined) {
+    this.decodeParams = true;
+  }
+
+  this.doInit();
+  this.elem.trigger('form:clearMsgs', [this]);
+  this.elem.trigger('form:ready', [this]);
+}
+
+RomoForm.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoForm.prototype.onFormKeyPress = function(e) {
+  var target = $(e.target);
+
+  if(target.is(':not(TEXTAREA)') && e.which === 13 /* Enter */) {
+    e.preventDefault();
+    this.onSubmitClick();
+  }
+}
+
+RomoForm.prototype.onSubmitClick = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.submitElem.hasClass('disabled') === false) {
+    this.doSubmit();
+  }
+}
+
+RomoForm.prototype.doSubmit = function() {
+  this.elem.trigger('form:beforeSubmit', [this]);
+  this.indicatorElems.trigger('indicator:triggerStart');
+
+  if (this.elem.attr('method').toUpperCase() === 'GET') {
+    this._doGetSubmit();
+  } else {
+    this._doNonGetSubmit();
+  }
+}
+
+RomoForm.prototype.onSubmitSuccess = function(data, status, xhr) {
+  this.elem.trigger('form:clearMsgs');
+  this.elem.trigger('form:submitSuccess', [data, this]);
+}
+
+RomoForm.prototype.onSubmitError = function(xhr, errorType, error) {
+  this.elem.trigger('form:clearMsgs');
+
+  if(xhr.status === 422) {
+    this.elem.trigger('form:submitInvalidMsgs', [$.parseJSON(xhr.responseText), xhr, this]);
+  } else {
+    this.elem.trigger('form:submitXhrError', [xhr, this]);
+  }
+  this.elem.trigger('form:submitError', [xhr, this]);
+  this.indicatorElems.trigger('indicator:triggerStop');
+}
+
+RomoForm.prototype._doGetSubmit = function() {
+  var data = this._getSerializeObj();
+
+  if (this.elem.data('romo-form-redirect-page') === true) {
+    var paramString = Romo.param(data, {
+      removeEmpty:  this.removeEmptyGetParams,
+      decodeValues: this.decodeParams
+    });
+    if (paramString !== '') {
+      Romo.redirectPage(this.elem.attr('action') + '?' + paramString);
+    } else {
+      Romo.redirectPage(this.elem.attr('action'));
+    }
+
+  } else {
+    this._doAjaxSubmit(data, true);
+  }
+}
+
+RomoForm.prototype._doNonGetSubmit = function() {
+  this._doAjaxSubmit(this._getFormData(), false);
+}
+
+RomoForm.prototype._doAjaxSubmit = function(data, process) {
+  $.ajax({
+    url:         this.elem.attr('action'),
+    type:        this.elem.attr('method'),
+    dataType:    this._getXhrDataType(),
+    data:        data,
+    processData: process,
+    contentType: false,
+    success:     $.proxy(this.onSubmitSuccess, this),
+    error:       $.proxy(this.onSubmitError, this)
+  });
+}
+
+RomoForm.prototype._getFormData = function() {
+  var formData = new FormData();
+
+  $.each(this._getSerializeObj(), function(k, v){ formData.append(k, v) });
+  $.each(this.elem.find('INPUT[type="file"]'), function(i, fileInput) {
+    var attrName = $(fileInput).attr('name')
+    $.each(fileInput.files, function(i, file) { formData.append(attrName, file) });
+  });
+
+  return formData;
+}
+
+RomoForm.prototype._getSerializeObj = function() {
+  var listNamesDelims = this._getListValueInputNamesDelims();
+
+  return this.elem.serializeArray().reduce(function(prev, curr) {
+    if (listNamesDelims[curr.name] !== undefined) {
+      prev[curr.name] = $.map([prev[curr.name], curr.value], function(v) {
+        return v; // $.map removes null/undefined vals, this acts like a compact function
+      }).join(listNamesDelims[curr.name])
+    } else {
+      prev[curr.name] = curr.value;
+    }
+
+    return prev;
+  }, {});
+}
+
+RomoForm.prototype._getListValueInputNamesDelims = function() {
+  return $.map(this.elem.find('[data-romo-form-list-values="true"]'), function(item){
+    return item; // converts the collection to an array
+  }).reduce($.proxy(function(prev, curr) {
+    prev[$(curr).attr('name')] = $(curr).data('romo-form-list-values-delim') || this.defaultListValuesDelim;
+    return prev;
+  }, this), {});
+}
+
+RomoForm.prototype._getXhrDataType = function() {
+  if(this.elem.data('romo-form-xhr-data-type') !== undefined) {
+    return this.elem.data('romo-form-xhr-data-type');
+  } else {
+    return 'json';
+  }
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-form-auto="true"]').romoForm();
+});
+

data/assets/js/romo/indicator.js

@@ -0,0 +1,88 @@
+//fgnass.github.com/spin.js#v2.0.1
+!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define(b):a.Spinner=b()}(this,function(){"use strict";function a(a,b){var c,d=document.createElement(a||"div");for(c in b)d[c]=b[c];return d}function b(a){for(var b=1,c=arguments.length;c>b;b++)a.appendChild(arguments[b]);return a}function c(a,b,c,d){var e=["opacity",b,~~(100*a),c,d].join("-"),f=.01+c/d*100,g=Math.max(1-(1-a)/b*(100-f),a),h=j.substring(0,j.indexOf("Animation")).toLowerCase(),i=h&&"-"+h+"-"||"";return l[e]||(m.insertRule("@"+i+"keyframes "+e+"{0%{opacity:"+g+"}"+f+"%{opacity:"+a+"}"+(f+.01)+"%{opacity:1}"+(f+b)%100+"%{opacity:"+a+"}100%{opacity:"+g+"}}",m.cssRules.length),l[e]=1),e}function d(a,b){var c,d,e=a.style;for(b=b.charAt(0).toUpperCase()+b.slice(1),d=0;d<k.length;d++)if(c=k[d]+b,void 0!==e[c])return c;return void 0!==e[b]?b:void 0}function e(a,b){for(var c in b)a.style[d(a,c)||c]=b[c];return a}function f(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)void 0===a[d]&&(a[d]=c[d])}return a}function g(a,b){return"string"==typeof a?a:a[b%a.length]}function h(a){this.opts=f(a||{},h.defaults,n)}function i(){function c(b,c){return a("<"+b+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',c)}m.addRule(".spin-vml","behavior:url(#default#VML)"),h.prototype.lines=function(a,d){function f(){return e(c("group",{coordsize:k+" "+k,coordorigin:-j+" "+-j}),{width:k,height:k})}function h(a,h,i){b(m,b(e(f(),{rotation:360/d.lines*a+"deg",left:~~h}),b(e(c("roundrect",{arcsize:d.corners}),{width:j,height:d.width,left:d.radius,top:-d.width>>1,filter:i}),c("fill",{color:g(d.color,a),opacity:d.opacity}),c("stroke",{opacity:0}))))}var i,j=d.length+d.width,k=2*j,l=2*-(d.width+d.length)+"px",m=e(f(),{position:"absolute",top:l,left:l});if(d.shadow)for(i=1;i<=d.lines;i++)h(i,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(i=1;i<=d.lines;i++)h(i);return b(a,m)},h.prototype.opacity=function(a,b,c,d){var e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d<e.childNodes.length&&(e=e.childNodes[b+d],e=e&&e.firstChild,e=e&&e.firstChild,e&&(e.opacity=c))}}var j,k=["webkit","Moz","ms","O"],l={},m=function(){var c=a("style",{type:"text/css"});return b(document.getElementsByTagName("head")[0],c),c.sheet||c.styleSheet}(),n={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",position:"absolute"};h.defaults={},f(h.prototype,{spin:function(b){this.stop();{var c=this,d=c.opts,f=c.el=e(a(0,{className:d.className}),{position:d.position,width:0,zIndex:d.zIndex});d.radius+d.length+d.width}if(e(f,{left:d.left,top:d.top}),b&&b.insertBefore(f,b.firstChild||null),f.setAttribute("role","progressbar"),c.lines(f,c.opts),!j){var g,h=0,i=(d.lines-1)*(1-d.direction)/2,k=d.fps,l=k/d.speed,m=(1-d.opacity)/(l*d.trail/100),n=l/d.lines;!function o(){h++;for(var a=0;a<d.lines;a++)g=Math.max(1-(h+(d.lines-a)*n)%l*m,d.opacity),c.opacity(f,a*d.direction+i,g,d);c.timeout=c.el&&setTimeout(o,~~(1e3/k))}()}return c},stop:function(){var a=this.el;return a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=void 0),this},lines:function(d,f){function h(b,c){return e(a(),{position:"absolute",width:f.length+f.width+"px",height:f.width+"px",background:b,boxShadow:c,transformOrigin:"left",transform:"rotate("+~~(360/f.lines*k+f.rotate)+"deg) translate("+f.radius+"px,0)",borderRadius:(f.corners*f.width>>1)+"px"})}for(var i,k=0,l=(f.lines-1)*(1-f.direction)/2;k<f.lines;k++)i=e(a(),{position:"absolute",top:1+~(f.width/2)+"px",transform:f.hwaccel?"translate3d(0,0,0)":"",opacity:f.opacity,animation:j&&c(f.opacity,f.trail,l+k*f.direction,f.lines)+" "+1/f.speed+"s linear infinite"}),f.shadow&&b(i,e(h("#000","0 0 4px #000"),{top:"2px"})),b(d,b(i,h(g(f.color,k),"0 0 1px rgba(0,0,0,.1)")));return d},opacity:function(a,b,c){b<a.childNodes.length&&(a.childNodes[b].style.opacity=c)}});var o=e(a("group"),{behavior:"url(#default#VML)"});return!d(o,"transform")&&o.adj?i():j=d(o,"animation"),h});
+
+$.fn.romoIndicator = function() {
+  return $.map(this, function(element) {
+    return new RomoIndicator(element);
+  });
+}
+
+var RomoIndicator = function(element) {
+  this.elem = $(element);
+  this.spinnerOpts = {
+    lines: 11, // The number of lines to draw
+    width: 2, // The line thickness
+    length: parseInt(this.elem.css('font-size')) / 2, // The length of each line
+    radius: parseInt(this.elem.css('font-size')) / 3, // The radius of the inner circle
+    corners: 1, // Corner roundness (0..1)
+    rotate: 0, // The rotation offset
+    direction: 1, // 1: clockwise, -1: counterclockwise
+    color: this.elem.css('color'), // #rgb or #rrggbb or array of colors
+    speed: 1, // Rounds per second
+    trail: 60, // Afterglow percentage
+    shadow: false, // Whether to render a shadow
+    hwaccel: false, // Whether to use hardware acceleration
+    className: 'spinner', // The CSS class to assign to the spinner
+    zIndex: 1000, // The z-index (defaults to 2000000000)
+    top: '50%', // Top position relative to parent
+    left: '50%'// Left position relative to parent
+  };
+
+  this.doInit();
+  this.spinner = new Spinner(this.spinnerOpts);
+
+  this.elemHtml = this.elem.html();
+  this.elem.css({
+    'position': 'relative',
+    'width':    this.elem.css('width'),
+    'height':   this.elem.css('height'),
+  });
+  this.elem.on('indicator:triggerStart', $.proxy(this.onStart, this));
+  this.elem.on('indicator:triggerStop', $.proxy(this.onStop, this));
+
+  $(window).on("pageshow", $.proxy(function(e) {
+    this.elem.trigger('indicator:triggerStop');
+  }, this));
+
+  this.elem.trigger('indicator:ready', [this]);
+}
+
+RomoIndicator.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoIndicator.prototype.onStart = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false) {
+    this.doStart();
+  }
+}
+
+RomoIndicator.prototype.onStop = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false) {
+    this.doStop();
+  }
+}
+
+RomoIndicator.prototype.doStart = function() {
+  this.elem.html('');
+  this.spinner.spin(this.elem[0]);
+  this.elem.trigger('indicator:start', [this]);
+}
+
+RomoIndicator.prototype.doStop = function() {
+  this.spinner.stop();
+  this.elem.html(this.elemHtml);
+  this.elem.trigger('indicator:stop', [this]);
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-indicator-auto="true"]').romoIndicator();
+});