romo 0.10.0 → 0.11.0

data/Gemfile

@@ -7,7 +7,7 @@ gem 'pry', "~> 0.9.0"
 
 gem 'rack'
 gem "deas",         "~> 0.27"
-gem "dassets",      '~> 0.9'
+gem "dassets",      '~> 0.11'
 gem "dassets-sass", "~> 0.3"
 gem "dassets-erb",  "~> 0.1"
 gem "kramdown",     "~> 1.4"

data/assets/css/romo/_mixins.scss

@@ -145,6 +145,8 @@
 @mixin text-border-base($i:"") { color: $baseBorderColor #{$i}; }
 @mixin text-border-alt($i:"")  { color: $altBorderColor #{$i}; }
 
+@mixin text-disabled($i:"") { color: $disabledColor #{$i}; }
+
 @mixin text-base($i:"")       { color: $baseText #{$i}; }
 @mixin text-base-hover($i:"") { color: $baseTextHover #{$i}; }
 @mixin bg-base($i:"")         { background-color: $baseBackground #{$i}; }

data/assets/css/romo/base.scss

@@ -224,6 +224,7 @@ h3 { @include text1; }
 
 .romo-text-border-base { @include text-border-base(!important); }
 .romo-text-border-alt  { @include text-border-alt(!important); }
+.romo-text-disabled    { @include text-disabled(!important); }
 .romo-text-base        { @include text-base(!important); }
 .romo-text-alt         { @include text-alt(!important); }
 .romo-text-muted       { @include text-muted(!important); }

data/assets/js/romo/dropdown.js

@@ -7,7 +7,7 @@ $.fn.romoDropdown = function() {
 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.popupElem.appendTo(this.elem.closest(this.elem.data('romo-dropdown-append-to-closest') || 'body'));
   this.doSetPopupZIndex(this.elem);
   this.bodyElem = this.popupElem.find('> .romo-dropdown-body');
   this.contentElem = $();
@@ -45,8 +45,8 @@ var RomoDropdown = function(element) {
   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.doBindElemKeyUp();
 
   this.doInit();
   this.doInitBody();
@@ -61,6 +61,16 @@ RomoDropdown.prototype.doInit = function() {
 RomoDropdown.prototype.doInitBody = function() {
   this.doResetBody();
 
+  this.popupElem.on('modal:popupOpen', $.proxy(function(e) {
+    this.doUnBindWindowBodyClick();
+    this.doUnBindWindowBodyKeyUp();
+    this.doUnBindElemKeyUp();
+  }, this));
+  this.popupElem.on('modal:popupClose', $.proxy(function(e) {
+    this.doBindWindowBodyClick();
+    this.doBindWindowBodyKeyUp();
+    this.doBindElemKeyUp();
+  }, this));
   this.contentElem = this.bodyElem.find('.romo-dropdown-content').last();
   if (this.contentElem.size() === 0) {
     this.contentElem = this.bodyElem;
@@ -180,10 +190,13 @@ RomoDropdown.prototype.doPopupOpen = function() {
   // 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.doBindWindowBodyClick();
   }, this), 100);
-  $('body').on('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+
+  // bind "esc" keystroke to toggle close
+  this.doBindWindowBodyKeyUp();
+
+  // bind window resizes reposition dropdown
   $(window).on('resize', $.proxy(this.onResizeWindow, this));
 
   this.elem.trigger('dropdown:popupOpen', [this]);
@@ -205,9 +218,13 @@ RomoDropdown.prototype.onPopupClose = function(e) {
 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));
+  // unbind any event to close the popup when clicking away from it
+  this.doUnBindWindowBodyClick();
+
+  // unbind "esc" keystroke to toggle close
+  this.doUnBindWindowBodyKeyUp();
+
+  // unbind window resizes reposition dropdown
   $(window).off('resize', $.proxy(this.onResizeWindow, this));
 
   // clear the content elem markup if configured to
@@ -218,6 +235,16 @@ RomoDropdown.prototype.doPopupClose = function() {
   this.elem.trigger('dropdown:popupClose', [this]);
 }
 
+RomoDropdown.prototype.doBindElemKeyUp = function() {
+  this.elem.on('keyup', $.proxy(this.onElemKeyUp, this));
+  this.popupElem.on('keyup', $.proxy(this.onElemKeyUp, this));
+}
+
+RomoDropdown.prototype.doUnBindElemKeyUp = function() {
+  this.elem.off('keyup', $.proxy(this.onElemKeyUp, this));
+  this.popupElem.off('keyup', $.proxy(this.onElemKeyUp, this));
+}
+
 RomoDropdown.prototype.onElemKeyUp = function(e) {
   if (this.elem.hasClass('disabled') === false) {
     if (this.popupElem.hasClass('romo-dropdown-open')) {
@@ -234,6 +261,16 @@ RomoDropdown.prototype.onElemKeyUp = function(e) {
   return true;
 }
 
+RomoDropdown.prototype.doBindWindowBodyClick = function() {
+  $('body').on('click', $.proxy(this.onWindowBodyClick, this));
+  $('body').on('modal:mousemove', $.proxy(this.onWindowBodyClick, this));
+}
+
+RomoDropdown.prototype.doUnBindWindowBodyClick = function() {
+  $('body').off('click', $.proxy(this.onWindowBodyClick, this));
+  $('body').off('modal:mousemove', $.proxy(this.onWindowBodyClick, this));
+}
+
 RomoDropdown.prototype.onWindowBodyClick = function(e) {
   // if not clicked on the popup elem or the elem
   var target = $(e.target);
@@ -245,6 +282,14 @@ RomoDropdown.prototype.onWindowBodyClick = function(e) {
   return true;
 }
 
+RomoDropdown.prototype.doBindWindowBodyKeyUp = function() {
+  $('body').on('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+}
+
+RomoDropdown.prototype.doUnBindWindowBodyKeyUp = function() {
+  $('body').off('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+}
+
 RomoDropdown.prototype.onWindowBodyKeyUp = function(e) {
   if (e.keyCode === 27 /* Esc */) {
     this.doPopupClose();

data/assets/js/romo/indicator.js

@@ -31,12 +31,6 @@ var RomoIndicator = function(element) {
   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));
 
@@ -70,6 +64,13 @@ RomoIndicator.prototype.onStop = function(e) {
 }
 
 RomoIndicator.prototype.doStart = function() {
+  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]);
@@ -77,7 +78,17 @@ RomoIndicator.prototype.doStart = function() {
 
 RomoIndicator.prototype.doStop = function() {
   this.spinner.stop();
-  this.elem.html(this.elemHtml);
+  if (this.elemHtml !== undefined) {
+    this.elem.html(this.elemHtml);
+  }
+  this.elem.css({
+    'position': '',
+    'width':    '',
+    'height':   '',
+  });
+  if (this.elemStyle !== undefined) {
+    this.elem.attr('style', this.elemStyle);
+  }
   this.elem.trigger('indicator:stop', [this]);
 }
 

data/assets/js/romo/modal.js

@@ -7,7 +7,7 @@ $.fn.romoModal = function() {
 var RomoModal = function(element) {
   this.elem = $(element);
   this.popupElem = $('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>');
-  this.popupElem.appendTo('body');
+  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-modal-append-to-closest') || 'body'));
   this.bodyElem = this.popupElem.find('> .romo-modal-body');
   this.contentElem = $();
   this.closeElem = $();
@@ -33,6 +33,8 @@ var RomoModal = function(element) {
     this.doLoadBodyError(xhr);
   }, this));
 
+  this.doBindElemKeyUp();
+
   this.doInit();
   this.doInitBody();
 
@@ -158,11 +160,11 @@ RomoModal.prototype.doPopupOpen = function() {
   // 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));
+    this.doBindWindowBodyClick();
   }, this), 100);
 
   // bind "esc" keystroke to toggle close
-  $('body').on('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+  this.doBindWindowBodyKeyUp();
 
   // bind window resizes reposition modal
   $(window).on('resize', $.proxy(this.onResizeWindow, this));
@@ -187,10 +189,10 @@ RomoModal.prototype.doPopupClose = function() {
   this.popupElem.removeClass('romo-modal-open');
 
   // unbind any event to close the popup when clicking away from it
-  $('body').off('click', $.proxy(this.onWindowBodyClick, this));
+  this.doUnBindWindowBodyClick();
 
   // unbind "esc" keystroke to toggle close
-  $('body').off('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+  this.doUnBindWindowBodyKeyUp();
 
   // unbind window resizes reposition modal
   $(window).off('resize', $.proxy(this.onResizeWindow, this));
@@ -204,7 +206,6 @@ RomoModal.prototype.doPopupClose = function() {
 }
 
 RomoModal.prototype.onMouseDown = function(e) {
-  $('body').trigger('modal:mousedown');
   e.preventDefault();
   e.stopPropagation();
   this.doDragStart(e);
@@ -227,6 +228,7 @@ RomoModal.prototype.doDragStart = function(e) {
 }
 
 RomoModal.prototype.onMouseMove = function(e) {
+  $('body').trigger('modal:mousemove');
   e.preventDefault();
   e.stopPropagation();
   this.doDragMove(e.clientX, e.clientY);
@@ -262,6 +264,40 @@ RomoModal.prototype.doDragStop = function(e) {
   this.elem.trigger("modal:dragStop", [this]);
 }
 
+RomoModal.prototype.doBindElemKeyUp = function() {
+  this.elem.on('keyup', $.proxy(this.onElemKeyUp, this));
+  this.popupElem.on('keyup', $.proxy(this.onElemKeyUp, this));
+}
+
+RomoModal.prototype.doUnBindElemKeyUp = function() {
+  this.elem.off('keyup', $.proxy(this.onElemKeyUp, this));
+  this.popupElem.off('keyup', $.proxy(this.onElemKeyUp, this));
+}
+
+RomoModal.prototype.onElemKeyUp = function(e) {
+  if (this.elem.hasClass('disabled') === false) {
+    if (this.popupElem.hasClass('romo-modal-open')) {
+      if(e.keyCode === 27 /* Esc */ ) {
+        this.doPopupClose();
+        return false;
+      } else {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  }
+  return true;
+}
+
+RomoModal.prototype.doBindWindowBodyClick = function() {
+  $('body').on('click', $.proxy(this.onWindowBodyClick, this));
+}
+
+RomoModal.prototype.doUnBindWindowBodyClick = function() {
+  $('body').off('click', $.proxy(this.onWindowBodyClick, this));
+}
+
 RomoModal.prototype.onWindowBodyClick = function(e) {
   // if not clicked on the popup elem
   if (e !== undefined && $(e.target).parents('.romo-modal-popup').size() === 0) {
@@ -270,6 +306,14 @@ RomoModal.prototype.onWindowBodyClick = function(e) {
   return true;
 }
 
+RomoModal.prototype.doBindWindowBodyKeyUp = function() {
+  $('body').on('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+}
+
+RomoModal.prototype.doUnBindWindowBodyKeyUp = function() {
+  $('body').off('keyup', $.proxy(this.onWindowBodyKeyUp, this));
+}
+
 RomoModal.prototype.onWindowBodyKeyUp = function(e) {
   if (e.keyCode === 27 /* Esc */) {
     this.doPopupClose();

data/assets/js/romo/tooltip.js

@@ -7,7 +7,7 @@ $.fn.romoTooltip = function() {
 var RomoTooltip = function(element) {
   this.elem = $(element);
   this.popupElem = $('<div class="romo-tooltip-popup"><div class="romo-tooltip-arrow"></div><div class="romo-tooltip-body"></div></div>');
-  this.popupElem.appendTo('body');
+  this.popupElem.appendTo(this.elem.closest(this.elem.data('romo-tooltip-append-to-closest') || 'body'));
   this.doSetPopupZIndex(this.elem);
   this.arrowElem = this.popupElem.find('> .romo-tooltip-arrow');
   this.bodyElem = this.popupElem.find('> .romo-tooltip-body');
@@ -42,18 +42,17 @@ var RomoTooltip = function(element) {
   if (this.elem.data('romo-tooltip-style-class') !== undefined) {
     this.bodyElem.addClass(this.elem.data('romo-tooltip-style-class'));
   }
-  this.contentData = this.elem.data('romo-tooltip-content');
-  this.bodyElem.html(this.contentData || '');
 
   this.elem.on('mouseenter', $.proxy(this.onToggleEnter, this));
   this.elem.on('mouseleave', $.proxy(this.onToggleLeave, this));
   this.elem.on('tooltip:triggerPopupOpen', $.proxy(this.onPopupOpen, this));
   this.elem.on('tooltip:triggerPopupClose', $.proxy(this.onPopupClose, this));
+  this.elem.on('tooltip:triggerSetContent', $.proxy(this.onSetContent, this));
   $(window).on('resize', $.proxy(this.onResizeWindow, this))
 
   this.doInit();
   this.doInitBody();
-  if (this.contentData === undefined) {
+  if (this.elem.data('romo-tooltip-content') === undefined) {
     this.doBindInvoke();
   }
 
@@ -104,7 +103,7 @@ RomoTooltip.prototype.doBindInvoke = function() {
 }
 
 RomoTooltip.prototype.doLoadBodyStart = function() {
-  this.bodyElem.html('');
+  this._setBodyHtml('');
   this.doInitBody();
   this.doPlacePopupElem();
   this.elem.trigger('tooltip:loadBodyStart', [this]);
@@ -172,12 +171,14 @@ RomoTooltip.prototype.onPopupOpen = function(e) {
 RomoTooltip.prototype.doPopupOpen = function() {
   if (this.romoInvoke !== undefined) {
     this.romoInvoke.doInvoke();
+  } else {
+    this._setBodyHtml(this.elem.data('romo-tooltip-content'));
   }
   this.popupElem.addClass('romo-tooltip-open');
   this.doPlacePopupElem();
 
   if (this.elem.parents('.romo-modal-popup').size() !== 0) {
-    $('body').on('modal:mousedown',  $.proxy(this.onModalPopupChange, this));
+    $('body').on('modal:mousemove',  $.proxy(this.onModalPopupChange, this));
     $('body').on('modal:popupclose', $.proxy(this.onModalPopupChange, this));
   }
   $(window).on('resize', $.proxy(this.onResizeWindow, this));
@@ -199,7 +200,7 @@ RomoTooltip.prototype.doPopupClose = function() {
   this.popupElem.removeClass('romo-tooltip-open');
 
   if (this.elem.parents('.romo-modal-popup').size() !== 0) {
-    $('body').off('modal:mousedown',  $.proxy(this.onModalPopupChange, this));
+    $('body').off('modal:mousemove',  $.proxy(this.onModalPopupChange, this));
     $('body').off('modal:popupclose', $.proxy(this.onModalPopupChange, this));
   }
   $(window).off('resize', $.proxy(this.onResizeWindow, this));
@@ -214,6 +215,19 @@ RomoTooltip.prototype.onModalPopupChange = function(e) {
   return true;
 }
 
+RomoTooltip.prototype.onSetContent = function(e, value) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+  this.doSetContent(value);
+}
+
+RomoTooltip.prototype.doSetContent = function(value) {
+  this.elem.data('romo-tooltip-content', value);
+  this._setBodyHtml(this.elem.data('romo-tooltip-content'));
+  this.doPlacePopupElem();
+}
+
 RomoTooltip.prototype.onResizeWindow = function(e) {
   this.doPlacePopupElem();
   return true;
@@ -253,6 +267,12 @@ RomoTooltip.prototype.doSetPopupZIndex = function(relativeElem) {
   this.popupElem.css({'z-index': relativeZIndex + 1100}); // see z-index.css
 }
 
+// private
+
+RomoTooltip.prototype._setBodyHtml = function(content) {
+  this.bodyElem.html(content || '');
+}
+
 Romo.onInitUI(function(e) {
   Romo.initUIElems(e, '[data-romo-tooltip-auto="true"]').romoTooltip();
 });

data/lib/romo/dassets.rb

@@ -56,7 +56,7 @@ module Romo::Dassets
         'js/romo/modal_form.js',
         'js/romo/tooltip.js',
         'js/romo/indicator.js',
-        'js/romo/sortable.js',
+        'js/romo/sortable.js'
       ]
 
     end

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.10.0"
+  VERSION = "0.11.0"
 end

data/romo.gemspec

@@ -20,6 +20,6 @@ Gem::Specification.new do |gem|
   gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
   gem.require_paths = ["lib"]
 
-  gem.add_development_dependency("assert", ["~> 2.12"])
+  gem.add_development_dependency("assert", ["~> 2.15"])
 
 end

data/test/unit/dassets_tests.rb

@@ -58,7 +58,7 @@ module Romo::Dassets
         'js/romo/modal_form.js',
         'js/romo/tooltip.js',
         'js/romo/indicator.js',
-        'js/romo/sortable.js',
+        'js/romo/sortable.js'
       ]
       assert_equal exp_js_sources, Dassets.config.combinations['js/romo.js']
     end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  hash: 55
+  hash: 51
   prerelease: 
   segments: 
   - 0
-  - 10
+  - 11
   - 0
-  version: 0.10.0
+  version: 0.11.0
 platform: ruby
 authors: 
 - Kelly Redding
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2015-09-18 00:00:00 Z
+date: 2015-10-15 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   requirement: &id001 !ruby/object:Gem::Requirement 
@@ -24,11 +24,11 @@ dependencies:
     requirements: 
     - - ~>
       - !ruby/object:Gem::Version 
-        hash: 27
+        hash: 29
         segments: 
         - 2
-        - 12
-        version: "2.12"
+        - 15
+        version: "2.15"
   type: :development
   name: assert
   version_requirements: *id001