romo 0.19.10 → 0.20.0

data/assets/js/romo/sortable.js

@@ -1,97 +1,120 @@
-$.fn.romoSortable = function() {
-  return $.map(this, function(element) {
-    return new RomoSortable(element);
-  });
-}
-
-var RomoSortable = function(element) {
-  this.elem = $(element);
+var RomoSortable = RomoComponent(function(elem) {
+  this.elem = elem;
 
   this.draggableSelector = '[data-romo-sortable-item="true"]';
-  this.handleSelector = '[data-romo-sortable-handle="true"]';
+  this.handleSelector    = '[data-romo-sortable-handle="true"]';
 
-  this.draggedElem = this.draggedIndex = this.draggableSelected = null;
-  this.draggedOverElem = this.dragDirection = this.lastY = null;
+  this.draggedElem       = undefined;
+  this.draggedIndex      = undefined;
+  this.draggableSelected = undefined;
+  this.draggedOverElem   = undefined;
+  this.dragDirection     = undefined;
+  this.lastY             = undefined;
 
   this.doInit();
-  this.doBindDrag();
-  this.doInitPlaceholder();
-  this._resetGrabClasses();
+  this._bindElem();
+
+  Romo.trigger(this.elem, 'romoSortable:ready', [this]);
+});
 
-  this.elem.trigger('sortable:ready', [this]);
+RomoSortable.prototype.draggingClass = function() {
+  return Romo.data(this.elem, 'romo-sortable-dragging-class');
 }
 
-RomoSortable.prototype.doInit = function() {
-  // override as needed
+RomoSortable.prototype.dragOverClass = function() {
+  return Romo.data(this.elem, 'romo-sortable-dragover-class');
 }
 
-RomoSortable.prototype.doBindDrag = function() {
-  this.draggingClass    = this.elem.data('romo-sortable-dragging-class') || '';
-  this.dragOverClass    = this.elem.data('romo-sortable-dragover-class') || '';
-  this.placeholderClass = this.elem.data('romo-sortable-placeholder-class') || '';
+RomoSortable.prototype.placeholderClass = function() {
+  return Romo.data(this.elem, 'romo-sortable-placeholder-class');
+}
+
+// private
+
+RomoSortable.prototype._bindElem = function() {
+  this.draggableElems = [];
+  this._bindDraggableElems(Romo.find(this.elem, this.draggableSelector));
 
-  this.draggableElems = $();
-  this.doBindDraggableElems(this.elem.find(this.draggableSelector));
+  Romo.on(this.elem, 'romoSortable:bindDraggableElems', Romo.proxy(this._onBindDraggableElems, this));
 
-  this.elem.on('sortable:bindDraggableElems', $.proxy(this.onBindDraggableElems, this));
+  Romo.on(this.elem, 'dragenter', Romo.proxy(this._onDragEnter, this));
+  Romo.on(this.elem, 'dragover',  Romo.proxy(this._onDragOver,  this));
+  Romo.on(this.elem, 'dragend',   Romo.proxy(this._onDragEnd,   this));
+  Romo.on(this.elem, 'drop',      Romo.proxy(this._onDragDrop,  this));
 
-  this.elem.on('dragenter', $.proxy(this.onDragEnter, this));
-  this.elem.on('dragover',  $.proxy(this.onDragOver,  this));
-  this.elem.on('dragend',   $.proxy(this.onDragEnd,   this));
-  this.elem.on('drop',      $.proxy(this.onDragDrop,  this));
+  Romo.on(Romo.f('body')[0], 'mouseup', Romo.proxy(this._onWindowBodyMouseUp, this));
 
-  $('body').on('mouseup', $.proxy(this.onWindowBodyMouseUp, this));
+  this._bindPlaceholder();
+  this._resetGrabClasses();
 }
 
-RomoSortable.prototype.onBindDraggableElems = function(e, draggableElems) {
-  this.doBindDraggableElems(draggableElems);
+RomoSortable.prototype._bindPlaceholder = function() {
+  var tag = undefined;
+  try {
+    tag = this.draggableElems[0].tagName;
+  } catch(e) {
+    tag = /^ul|ol$/i.test(this.elem.tagName) ? 'li' : 'div';
+  }
+  this.placeholderElem = Romo.elems('<' + tag + '/>')[0];
+  if (this.placeholderClass() !== undefined) {
+    Romo.addClass(this.placeholderElem, this.placeholderClass());
+  }
+
+  Romo.on(this.placeholderElem, 'dragover', Romo.proxy(this._onDragOver, this));
+  Romo.on(this.placeholderElem, 'drop',     Romo.proxy(this._onDragDrop, this));
 }
 
-RomoSortable.prototype.doBindDraggableElems = function(draggableElems) {
-  draggableElems.prop('draggable', 'true');
+RomoSortable.prototype._bindDraggableElems = function(draggableElems) {
+  draggableElems.forEach(Romo.proxy(function(draggableElem) {
+    draggableElem.draggable = true;
 
-  draggableElems.on('dragstart',  $.proxy(this.onDragStart,          this));
-  draggableElems.on('dragenter',  $.proxy(this.onDragEnter,          this));
-  draggableElems.on('dragover',   $.proxy(this.onDragOver,           this));
-  draggableElems.on('dragend',    $.proxy(this.onDragEnd,            this));
-  draggableElems.on('drop',       $.proxy(this.onDragDrop,           this));
-  draggableElems.on('mousedown',  $.proxy(this.onDraggableMouseDown, this));
+    Romo.on(draggableElem, 'dragstart',  Romo.proxy(this._onDragStart,          this));
+    Romo.on(draggableElem, 'dragenter',  Romo.proxy(this._onDragEnter,          this));
+    Romo.on(draggableElem, 'dragover',   Romo.proxy(this._onDragOver,           this));
+    Romo.on(draggableElem, 'dragend',    Romo.proxy(this._onDragEnd,            this));
+    Romo.on(draggableElem, 'drop',       Romo.proxy(this._onDragDrop,           this));
+    Romo.on(draggableElem, 'mousedown',  Romo.proxy(this._onDraggableMouseDown, this));
 
-  var handleElems = draggableElems.find(this.handleSelector);
-  handleElems.on('mousedown', $.proxy(this.onHandleMouseDown, this));
+    var handleElem = Romo.find(draggableElem, this.handleSelector)[0];
+    Romo.on(handleElem, 'mousedown', Romo.proxy(this._onHandleMouseDown, this));
+  }, this));
 
-  this.draggableElems = this.draggableElems.add(draggableElems);
+  this.draggableElems = this.draggableElems.concat(draggableElems);
   this._resetGrabClasses();
 }
 
-RomoSortable.prototype.doInitPlaceholder = function() {
-  var tag;
-  try {
-    tag = this.draggableElems.get(0).tagName;
-  } catch(e) {
-    tag = /^ul|ol$/i.test(this.elem.tagName) ? 'li' : 'div';
-  }
-  this.placeholderElem = $('<' + tag + '/>');
-  this.placeholderElem.addClass(this.placeholderClass);
+RomoSortable.prototype._resetGrabClasses = function() {
+  this.draggableElems.forEach(Romo.proxy(function(draggableElem) {
+    handleElem = Romo.find(draggableElem, this.handleSelector)[0];
+    if(handleElem === undefined){ handleElem = draggableElem; }
+
+    Romo.addClass(handleElem, 'romo-sortable-grab');
+    Romo.removeClass(handleElem, 'romo-sortable-grabbing');
+  }, this));
+}
 
-  this.placeholderElem.on('dragover', $.proxy(this.onDragOver, this));
-  this.placeholderElem.on('drop',     $.proxy(this.onDragDrop, this));
+// event functions
+
+RomoSortable.prototype.romoEvFn._onBindDraggableElems = function(e, draggableElems) {
+  this._bindDraggableElems(draggableElems);
 }
 
-RomoSortable.prototype.onDragStart = function(e) {
+RomoSortable.prototype.romoEvFn._onDragStart = function(e) {
   if(!this.draggableSelected){ return false; }
 
   e.stopPropagation();
-  e.originalEvent.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.effectAllowed = 'move';
 
   // IE fix
   try {
     // FF fix, it won't drag without some data being set
-    e.originalEvent.dataTransfer.setData('text/plain', null);
+    e.dataTransfer.setData('text/plain', null);
   } catch(e) {}
 
-  this.draggedElem = $(e.target);
-  this.draggedElem.addClass(this.draggingClass);
+  this.draggedElem = e.target;
+  if (this.draggingClass() !== undefined) {
+    Romo.addClass(this.draggedElem, this.draggingClass());
+  }
 
   // we need to disable Romo's parentRemovedObserver mutation
   // observer which would remove any child elems (ie modal,
@@ -102,137 +125,148 @@ RomoSortable.prototype.onDragStart = function(e) {
   // the drag is finished.
   // we manually enable the mutation observer for the dragged
   // elem below after we do the `insertBefore` call.
-  this.draggedElem.data('romo-parent-removed-observer-disabled', true);
+  Romo.setData(this.draggedElem, 'romo-parent-removed-observer-disabled', true);
 
-  this.draggedIndex = this.draggedElem.index();
+  var elems = Romo.children(Romo.parent(this.draggedElem));
+  this.draggedIndex = elems.indexOf(this.draggedElem);
 
-  this.placeholderElem.css({ 'height': this.draggedElem.height() });
+  Romo.setStyle(this.placeholderElem, 'height', Romo.css(this.draggedElem, 'height'));
 
-  this.elem.trigger('sortable:dragStart', [this.draggedElem, this]);
+  Romo.trigger(this.elem, 'romoSortable:dragStart', [this.draggedElem, this]);
 }
 
-RomoSortable.prototype.onDragEnter = function(e) {
+RomoSortable.prototype.romoEvFn._onDragEnter = function(e) {
   e.preventDefault();
   e.stopPropagation();
 
   // return if event is fired on the placeholder
-  if(this.placeholderElem.get(0) === e.currentTarget){ return; }
+  if(this.placeholderElem === e.currentTarget){ return; }
 
-  this.placeholderElem.show();
-  this.draggedElem.hide();
+  Romo.show(this.placeholderElem);
+  Romo.hide(this.draggedElem);
 
   // if event is not fired on the sortable
-  var overSortableElem = this.elem.get(0) === e.currentTarget;
-  var clientX = e.originalEvent.clientX;
-  var clientY = e.originalEvent.clientY;
+  var overSortableElem = this.elem === e.currentTarget;
+  var clientX          = e.clientX;
+  var clientY          = e.clientY;
   if (!overSortableElem) {
     // if we are in the same elem and moving the same direction, exit out
-    var overSameElem = this.draggedOverElem &&
-                       this.draggedOverElem.get(0) === e.currentTarget;
+    var overSameElem  = this.draggedOverElem !== undefined &&
+                        this.draggedOverElem === e.currentTarget;
     var sameDirection = (this.dragDirection === 'down' && clientY > this.lastY) ||
                         (this.dragDirection === 'up'   && clientY < this.lastY);
     if(overSameElem && sameDirection){ return; }
 
     // remove dragged over classes from previous elem
-    if(this.draggedOverElem){ this.draggedOverElem.removeClass(this.dragOverClass); }
-    this.draggedOverElem = $(e.currentTarget);
-    this.lastY = clientY;
-    this.draggedOverElem.addClass(this.dragOverClass);
+    if(this.draggedOverElem !== undefined && this.dragOverClass() !== undefined) {
+      Romo.removeClass(this.draggedOverElem, this.dragOverClass());
+    }
+    this.draggedOverElem = e.currentTarget;
+    this.lastY           = clientY;
+    if (this.dragOverClass() !== undefined) {
+      Romo.addClass(this.draggedOverElem, this.dragOverClass());
+    }
 
     // insert the placeholder according to the dragging direction
-    if (this.placeholderElem.index() < this.draggedOverElem.index()) {
+    var elems = Romo.children(Romo.parent(this.placeholderElem));
+    var placeholderIndex = elems.indexOf(this.placeholderElem);
+
+    elems = Romo.children(Romo.parent(this.draggedOverElem));
+    var draggedOverIndex = elems.indexOf(this.draggedOverElem);
+
+    if (placeholderIndex < draggedOverIndex) {
       this.dragDirection = 'down';
     } else {
       this.dragDirection = 'up';
     }
+
     var insertMethod = this.dragDirection === 'down' ? 'after' : 'before';
-    this.draggedOverElem[insertMethod](this.placeholderElem);
+    Romo[insertMethod](this.draggedOverElem, this.placeholderElem);
   }
 
-  this.elem.trigger('sortable:dragMove', [clientX, clientY, this.draggedElem, this]);
+  Romo.trigger(this.elem, 'romoSortable:dragMove', [clientX, clientY, this.draggedElem, this]);
 }
 
-RomoSortable.prototype.onDragOver = function(e) {
+RomoSortable.prototype.romoEvFn._onDragOver = function(e) {
   // This is how you allow an element to receive a drop event.
   e.preventDefault();
   e.stopPropagation();
 }
 
-RomoSortable.prototype.onDragEnd = function(e) {
+RomoSortable.prototype.romoEvFn._onDragEnd = function(e) {
   e.stopPropagation();
   e.preventDefault();
 
-  if(!this.draggedElem){ return; }
+  if(this.draggedElem === undefined){ return; }
 
-  this.draggableElems.removeClass(this.dragOverClass);
-  this.draggedElem.removeClass(this.draggingClass);
-  this.draggedElem.show();
-  this.placeholderElem.hide();
+  if (this.dragOverClass() !== undefined) {
+    Romo.removeClass(this.draggableElems, this.dragOverClass());
+  }
+  if (this.draggingClass() !== undefined) {
+    Romo.removeClass(this.draggedElem, this.draggingClass());
+  }
+  Romo.show(this.draggedElem);
+  Romo.hide(this.placeholderElem);
   this._resetGrabClasses();
 
-  this.elem.trigger('sortable:dragStop', [this.draggedElem, this]);
+  Romo.trigger(this.elem, 'romoSortable:dragStop', [this.draggedElem, this]);
 
-  this.draggedElem = this.draggedIndex = this.draggableSelected = null;
-  this.draggedOverElem = this.dragDirection = this.lastY = null;
+  this.draggedElem       = undefined;
+  this.draggedIndex      = undefined;
+  this.draggableSelected = undefined;
+  this.draggedOverElem   = undefined;
+  this.dragDirection     = undefined;
+  this.lastY             = undefined;
 }
 
-RomoSortable.prototype.onDragDrop = function(e) {
+RomoSortable.prototype.romoEvFn._onDragDrop = function(e) {
   e.stopPropagation();
   e.preventDefault();
 
-  if(!this.draggedElem){ return; }
+  if(this.draggedElem === undefined){ return; }
 
-  this.draggedElem.insertBefore(this.placeholderElem);
-  this.draggedElem.show();
+  Romo.before(this.placeholderElem, this.draggedElem);
+  Romo.show(this.draggedElem);
 
   // manually enable Romo's parentRemovedObserver mutation
   // observer which resumes removing any child elems (ie modal,
   // dropdown, tooltip popups) like normal.
   // we have to put this in a timeout so the reactor loop has a
   // chance to run the mutation observer before we re-enable
-  setTimeout($.proxy(function() {
-    this.draggedElem.data('romo-parent-removed-observer-disabled', false);
-  }, this), 1);
+  Romo.pushFn(Romo.proxy(function() {
+    Romo.setData(this.draggedElem, 'romo-parent-removed-observer-disabled', false);
+  }, this));
 
-  var newIndex = this.draggedElem.index();
+  var elems    = Romo.children(Romo.parent(this.draggedElem));
+  var newIndex = elems.indexOf(this.draggedElem);
   if (newIndex !== this.draggedIndex) {
-    this.elem.trigger('sortable:change', [this.draggedElem, this]);
+    Romo.trigger(this.elem, 'romoSortable:change', [this.draggedElem, this]);
   }
-  this.elem.trigger('sortable:dragDrop', [this.draggedElem, this]);
+  Romo.trigger(this.elem, 'romoSortable:dragDrop', [this.draggedElem, this]);
 }
 
-RomoSortable.prototype.onDraggableMouseDown = function(e) {
+RomoSortable.prototype.romoEvFn._onDraggableMouseDown = function(e) {
   // if our draggable elem doesn't have a handle then it's draggable
-  var draggableElem = $(e.currentTarget);
-  if(draggableElem.find(this.handleSelector).size() === 0) {
-    draggableElem.removeClass('romo-sortable-grab');
-    draggableElem.addClass('romo-sortable-grabbing');
+  var draggableElem = e.currentTarget;
+  if(Romo.find(draggableElem, this.handleSelector).length === 0) {
+    Romo.removeClass(draggableElem, 'romo-sortable-grab');
+    Romo.addClass(draggableElem, 'romo-sortable-grabbing');
     this.draggableSelected = true;
   }
 }
 
-RomoSortable.prototype.onHandleMouseDown = function(e) {
+RomoSortable.prototype.romoEvFn._onHandleMouseDown = function(e) {
   this.draggableSelected = true;
-  var handleElem = $(e.currentTarget);
-  handleElem.removeClass('romo-sortable-grab');
-  handleElem.addClass('romo-sortable-grabbing');
+  var handleElem = e.currentTarget;
+  Romo.removeClass(handleElem, 'romo-sortable-grab');
+  Romo.addClass(handleElem, 'romo-sortable-grabbing');
 }
 
-RomoSortable.prototype.onWindowBodyMouseUp = function(e) {
+RomoSortable.prototype.romoEvFn._onWindowBodyMouseUp = function(e) {
   this.draggableSelected = false;
   this._resetGrabClasses();
 }
 
-RomoSortable.prototype._resetGrabClasses = function() {
-  this.draggableElems.each($.proxy(function(index, item) {
-    draggableElem = $(item);
-    handleElem = draggableElem.find(this.handleSelector);
-    if(handleElem.size() === 0){ handleElem = draggableElem; }
-    handleElem.addClass('romo-sortable-grab');
-    handleElem.removeClass('romo-sortable-grabbing');
-  }, this));
-}
+// init
 
-Romo.onInitUI(function(e) {
-  $(e.target).find('[data-romo-sortable-auto="true"]').romoSortable();
-});
+Romo.addElemsInitSelector('[data-romo-sortable-auto="true"]', RomoSortable);

data/assets/js/romo/{indicator.js → spinner.js}

@@ -1,113 +1,98 @@
 //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.elemStyle = this.elem.attr('style');
+var RomoSpinner = RomoComponent(function(elem) {
+  this.elem = elem;
 
   this.doInit();
+  this._bindElem();
 
-  this.elem.on('indicator:triggerStart', $.proxy(this.onStart, this));
-  this.elem.on('indicator:triggerStop', $.proxy(this.onStop, this));
-
-  if (this.elem.data('romo-indicator-stop-on-pageshow') !== false) {
-    $(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, basisSize) {
-  if (e !== undefined) {
-    e.preventDefault();
-  }
-
-  this.doStart(basisSize);
-}
-
-RomoIndicator.prototype.onStop = function(e) {
-  if (e !== undefined) {
-    e.preventDefault();
-  }
-
-  this.doStop();
-}
+  Romo.trigger(this.elem, 'romoSpinner:ready', [this]);
+});
 
-RomoIndicator.prototype.doStart = function(customBasisSize) {
-  var basisSize = customBasisSize;
-  if (basisSize === undefined) {
-    basisSize = this.elem.data('romo-indicator-basis-size');
-  }
-  if (basisSize === undefined) {
-    basisSize = Math.min(
-      parseInt(Romo.getComputedStyle(this.elem[0], "width")),
-      parseInt(Romo.getComputedStyle(this.elem[0], "height"))
-    )
-  }
+RomoSpinner.prototype.doStart = function(customBasisSize) {
+  var basisSize = (
+    customBasisSize                                 ||
+    Romo.data(this.elem, 'romo-spinner-basis-size') ||
+    Math.min(parseInt(Romo.css(this.elem, "width"), 10), parseInt(Romo.css(this.elem, "height"), 10))
+  );
 
   var spinnerOpts = {
-    lines: 11, // The number of lines to draw
-    width: 2, // The line thickness
-    length: parseInt(basisSize) / 4.5, // The length of each line
-    radius: parseInt(basisSize) / 5.5, // 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
+    lines:     11,                            // The number of lines to draw
+    width:     2,                             // The line thickness
+    length:    parseInt(basisSize, 10) / 4.5, // The length of each line
+    radius:    parseInt(basisSize, 10) / 5.5, // The radius of the inner circle
+    corners:   1,                             // Corner roundness (0..1)
+    rotate:    0,                             // The rotation offset
+    direction: 1,                             // 1: clockwise, -1: counterclockwise
+    color:     Romo.css(this.elem, '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.spinner = new Spinner(spinnerOpts);
 
-  this.elemHtml  = this.elem.html();
-  this.elemStyle = this.elem.attr('style');
-  this.elem.css({
-    'position': 'relative',
-    'width':    this.elem.css('width'),
-    'height':   this.elem.css('height'),
-  });
-  this.elem.html('');
-  this.spinner.spin(this.elem[0]);
-  this.elem.trigger('indicator:start', [this]);
+  this.elemHtml  = this.elem.innerHTML;
+  this.elemStyle = Romo.attr(this.elem, 'style');
+
+  Romo.setStyle(this.elem, 'position', 'relative');
+  Romo.setStyle(this.elem, 'width',    Romo.css(this.elem, 'width'));
+  Romo.setStyle(this.elem, 'height',   Romo.css(this.elem, 'height'));
+
+  Romo.updateHtml(this.elem, '');
+  this.spinner.spin(this.elem);
+
+  Romo.trigger(this.elem, 'romoSpinner:start', [this]);
 }
 
-RomoIndicator.prototype.doStop = function() {
+RomoSpinner.prototype.doStop = function() {
   if (this.spinner !== undefined) {
     this.spinner.stop();
     this.spinner = undefined;
   }
   if (this.elemHtml !== undefined) {
-    this.elem.html(this.elemHtml);
+    this.elem.innerHTML = this.elemHtml;
   }
-  this.elem.css({
-    'position': '',
-    'width':    '',
-    'height':   '',
-  });
+  Romo.rmStyle(this.elem, 'position');
+  Romo.rmStyle(this.elem, 'width');
+  Romo.rmStyle(this.elem, 'height');
+
   if (this.elemStyle !== undefined) {
-    this.elem.attr('style', this.elemStyle);
+    Romo.setAttr(this.elem, 'style', this.elemStyle);
   }
-  this.elem.trigger('indicator:stop', [this]);
+  Romo.trigger(this.elem, 'romoSpinner:stop', [this]);
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-indicator-auto="true"]').romoIndicator();
-});
+// private
+
+RomoSpinner.prototype._bindElem = function() {
+  this.elemStyle = Romo.attr(this.elem, 'style');
+
+  Romo.on(this.elem, 'romoSpinner:triggerStart', Romo.proxy(this._onStart, this));
+  Romo.on(this.elem, 'romoSpinner:triggerStop',  Romo.proxy(this._onStop,  this));
+
+  if (Romo.data(this.elem, 'romo-spinner-stop-on-pageshow') !== false) {
+    Romo.on(window, "pageshow", Romo.proxy(function(e) {
+      Romo.trigger(this.elem, 'romoSpinner:triggerStop');
+    }, this));
+  }
+}
+
+// event functions
+
+RomoSpinner.prototype.romoEvFn._onStart = function(e, basisSize) {
+  this.doStart(basisSize);
+}
+
+RomoSpinner.prototype.romoEvFn._onStop = function(e) {
+  this.doStop();
+}
+
+// init
+
+Romo.addElemsInitSelector('[data-romo-spinner-auto="true"]', RomoSpinner);