romo 0.19.3 → 0.19.4

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA1: 
-  metadata.gz: 453dd6a22e154e5ce1632a27f69486fd706c47db
-  data.tar.gz: ada5144693043deaa1675bee74a8a5c81df4573b
 SHA512: 
-  metadata.gz: 51d1aff498ebbd3be8ab5ca7206cca0110ac06e94354b3f0e54dc07eab660b8001d253c3541426fd6401ce5ea6a4a8a80ef58912dad98b08a6007ddc9e465f18
-  data.tar.gz: 80d0ed512aa24f85c7109ee9e9997c16f5270492bcbb1f74a03a5f4720fb6dc2d0a93270dbf5d2b253d0603e525449ef5a8045f495b1c9a7d7afcad25fbfab35
+  metadata.gz: 05431cecaec71b465c4986bf8aa7df0e2a71c88a693c4d082f8937c0e562c351371e4dd45e945881297f2316a14498194969f712ceb6465cacc2532e03f78d7b
+  data.tar.gz: 85887b774157ab564966b5007f4f0f04c51140af7a3be6e792d01731793801a6177ffc2c20538fea6c6f63afcbd2f263e7d1789b0addd8344471f4da6180f28c
+SHA1: 
+  metadata.gz: b24ab8cacb24c8fa5e9a7a64854ee8eb9f85a5f1
+  data.tar.gz: 69de9ee98dabfef298bbe7b5e9fb1bf1339e133a

data/assets/css/romo/_mixins.scss

@@ -360,7 +360,7 @@
   @include box-shadow((inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)));
 }
 
-@mixin select-optgroup {
+@mixin input-option-list-optgroup {
   font-size: $fontSize0;
   line-height: $lineHeight0;
 
@@ -368,7 +368,7 @@
   color: $inputBgColor;
 }
 
-@mixin select-option {
+@mixin input-option-list-option {
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
   padding: 0 $spacingSize0;

data/assets/css/romo/forms.scss

@@ -29,7 +29,7 @@
   .romo-form input,
   .romo-form select,
   .romo-form textarea,
-  input.romo-select-dropdown-option-filter {
+  input.romo-option-list-dropdown-filter {
     font-size: 100%;
     @include rm-push;
     @include align-middle;
@@ -46,7 +46,7 @@
   }
 
   .romo-form input,
-  input.romo-select-dropdown-option-filter {
+  input.romo-option-list-dropdown-filter {
     *overflow: visible;
     line-height: normal;
   }
@@ -69,16 +69,16 @@
   .romo-form input[readonly],
   .romo-form select[readonly],
   .romo-form textarea[readonly],
-  input.romo-select-dropdown-option-filter[disabled],
-  input.romo-select-dropdown-option-filter[readonly] { cursor: $notAllowedCursor; }
+  input.romo-option-list-dropdown-filter[disabled],
+  input.romo-option-list-dropdown-filter[readonly] { cursor: $notAllowedCursor; }
 
   .romo-form select {
     font-weight: normal;
     background-color: $inputBgColor;
     @include border1;
   }
-  .romo-form select optgroup { @include select-optgroup; }
-  .romo-form select option { @include select-option; }
+  .romo-form select optgroup { @include input-option-list-optgroup; }
+  .romo-form select option   { @include input-option-list-option; }
 
   .romo-form textarea,
   .romo-form input[type="text"],
@@ -95,7 +95,7 @@
   .romo-form input[type="search"],
   .romo-form input[type="tel"],
   .romo-form input[type="color"],
-  input.romo-select-dropdown-option-filter {
+  input.romo-option-list-dropdown-filter {
     font-weight: normal;
     background-color: $inputBgColor;
     @include border1;
@@ -119,7 +119,7 @@
   .romo-form input[type="search"]::placeholder,
   .romo-form input[type="tel"]::placeholder,
   .romo-form input[type="color"]::placeholder,
-  input.romo-select-dropdown-option-filter::placeholder {
+  input.romo-option-list-dropdown-filter::placeholder {
     @include input-placeholder;
   }
   .romo-form textarea::-webkit-input-placeholder,                     /* Chrome/Opera/Safari */
@@ -137,7 +137,7 @@
   .romo-form input[type="search"]::-webkit-input-placeholder,
   .romo-form input[type="tel"]::-webkit-input-placeholder,
   .romo-form input[type="color"]::-webkit-input-placeholder,
-  input.romo-select-dropdown-option-filter::-webkit-input-placeholder {
+  input.romo-option-list-dropdown-filter::-webkit-input-placeholder {
     @include input-placeholder;
   }
   .romo-form textarea::-moz-placeholder,                              /* Firefox 19+ */
@@ -155,7 +155,7 @@
   .romo-form input[type="search"]::-moz-placeholder,
   .romo-form input[type="tel"]::-moz-placeholder,
   .romo-form input[type="color"]::-moz-placeholder,
-  input.romo-select-dropdown-option-filter::-moz-placeholder {
+  input.romo-option-list-dropdown-filter::-moz-placeholder {
     @include input-placeholder;
   }
   .romo-form textarea:-moz-placeholder,                               /* Firefox 18- */
@@ -173,7 +173,7 @@
   .romo-form input[type="search"]:-moz-placeholder,
   .romo-form input[type="tel"]:-moz-placeholder,
   .romo-form input[type="color"]:-moz-placeholder,
-  input.romo-select-dropdown-option-filter:-moz-placeholder {
+  input.romo-option-list-dropdown-filter:-moz-placeholder {
     @include input-placeholder;
   }
   .romo-form textarea:-ms-input-placeholder,                          /* IE 10+ */
@@ -191,7 +191,7 @@
   .romo-form input[type="search"]:-ms-input-placeholder,
   .romo-form input[type="tel"]:-ms-input-placeholder,
   .romo-form input[type="color"]:-ms-input-placeholder,
-  input.romo-select-dropdown-option-filter:-ms-input-placeholder {
+  input.romo-option-list-dropdown-filter:-ms-input-placeholder {
     @include input-placeholder;
   }
 
@@ -211,7 +211,7 @@
   .romo-form input[type="search"]:focus,
   .romo-form input[type="tel"]:focus,
   .romo-form input[type="color"]:focus,
-  input.romo-select-dropdown-option-filter:focus {
+  input.romo-option-list-dropdown-filter:focus {
     @include input-focus;
   }
 
@@ -221,8 +221,8 @@
   .romo-form input[readonly],
   .romo-form select[readonly],
   .romo-form textarea[readonly],
-  input.romo-select-dropdown-option-filter[disabled],
-  input.romo-select-dropdown-option-filter[readonly] { background-color: $inputDisabledColor; }
+  input.romo-option-list-dropdown-filter[disabled],
+  input.romo-option-list-dropdown-filter[readonly] { background-color: $inputDisabledColor; }
 
   .romo-form input[type="radio"][disabled],
   .romo-form input[type="checkbox"][disabled],
@@ -244,13 +244,13 @@
   .romo-form input[type="search"],
   .romo-form input[type="tel"],
   .romo-form input[type="color"],
-  input.romo-select-dropdown-option-filter {
+  input.romo-option-list-dropdown-filter {
     height: $inputHeight;
     line-height: $baseLineHeight;
     @include align-middle;
   }
 
-  input.romo-select-dropdown-option-filter {
+  input.romo-option-list-dropdown-filter {
     height: $inputFilterHeight;
   }
 
@@ -269,17 +269,23 @@
   .romo-form input[type="search"],
   .romo-form input[type="tel"],
   .romo-form input[type="color"],
-  input.romo-select-dropdown-option-filter {
+  input.romo-option-list-dropdown-filter {
     display: inline-block;
     padding: 4px 6px;
     color: $inputColor;
   }
 
-  input.romo-select-dropdown-option-filter {
+  input.romo-option-list-dropdown-filter {
     display: block;
     width: 100%;
   }
 
+  .romo-option-list-dropdown-filter-wrapper {
+    @include border1-bottom();
+    padding: 4px 0;
+    margin: 0 4px;
+  }
+
   .romo-form textarea,
   .romo-form select[multiple],
   .romo-form select[size] { height: auto; }
@@ -312,4 +318,51 @@
     @include align-middle;
   }
 
+  /* input option list (used by selects vie option list dropdown) */
+
+  .romo-input-option-list {
+    cursor: pointer;
+    font-weight: normal;
+    padding: 4px 0;
+    @include user-select(none);
+
+    background-color: $inputBgColor;
+    color: $inputColor;
+  }
+
+  .romo-input-option-list UL {
+    list-style: none outside none;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .romo-input-option-list UL.romo-option-list-optgroup LI {
+    padding-left: $spacingSize1;
+  }
+
+  .romo-input-option-list LI {
+    @include input-option-list-option;
+  }
+
+  .romo-input-option-list LI[data-romo-option-list-item="optgroup"] {
+    @include input-option-list-optgroup;
+  }
+
+  .romo-input-option-list LI.romo-option-list-dropdown-highlight {
+    background-color: $inputHighlightBgColor;
+    color: $inputBgColor;
+  }
+
+  .romo-input-option-list LI.disabled {
+    cursor: $notAllowedCursor;
+  }
+
+  .romo-input-option-list LI.disabled,
+  .romo-input-option-list LI.disabled.romo-option-list-dropdown-highlight {
+    background-color: $inputBgColor;
+    color: $disabledColor;
+  }
+
 }

data/assets/css/romo/picker.scss

@@ -0,0 +1,47 @@
+@import 'css/romo/vars';
+@import 'css/romo/mixins';
+
+.romo {
+
+  .romo-picker-wrapper {
+    display: inline-block;
+    text-align: left;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    cursor: pointer;
+    @include user-select(none);
+    position: relative;
+  }
+
+  .romo-picker {
+    min-width: 50px;
+    font-weight: normal;
+    text-align: left;
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  .romo-picker:focus,
+  .romo-picker.romo-picker-focus { @include input-focus; }
+
+  .romo-picker:active,
+  .romo-picker.active {
+    background-image: none;
+    outline: 0;
+    @include box-shadow((inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)));
+  }
+
+  .romo-picker-text {
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .romo-picker-caret {
+    display: inline-block;
+    position: absolute;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+}

data/assets/css/romo/select.scss

@@ -40,6 +40,7 @@
     display: inline-block;
     width: 100%;
   }
+
   .romo-select-caret {
     display: inline-block;
     position: absolute;
@@ -47,55 +48,4 @@
     cursor: pointer;
   }
 
-  .romo-select-dropdown-option-filter-wrapper {
-    @include border1-bottom();
-    padding: 4px 0;
-    margin: 0 4px;
-  }
-
-  .romo-select-option-list {
-    cursor: pointer;
-    font-weight: normal;
-    padding: 4px 0;
-    @include user-select(none);
-
-    background-color: $inputBgColor;
-    color: $inputColor;
-  }
-
-  .romo-select-option-list UL {
-    list-style: none outside none;
-    margin: 0;
-    padding: 0;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .romo-select-option-list UL.romo-select-optgroup LI {
-    padding-left: $spacingSize1;
-  }
-
-  .romo-select-option-list LI {
-    @include select-option;
-  }
-
-  .romo-select-option-list LI[data-romo-select-item="optgroup"] {
-    @include select-optgroup;
-  }
-
-  .romo-select-option-list LI.romo-select-highlight {
-    background-color: $inputHighlightBgColor;
-    color: $inputBgColor;
-  }
-
-  .romo-select-option-list LI.disabled {
-    cursor: $notAllowedCursor;
-  }
-
-  .romo-select-option-list LI.disabled,
-  .romo-select-option-list LI.disabled.romo-select-highlight {
-    background-color: $inputBgColor;
-    color: $disabledColor;
-  }
-
 }

data/assets/js/romo/indicator.js

@@ -8,29 +8,10 @@ $.fn.romoIndicator = function() {
 }
 
 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.elem      = $(element);
   this.elemStyle = this.elem.attr('style');
+
   this.doInit();
-  this.spinner = new Spinner(this.spinnerOpts);
 
   this.elem.on('indicator:triggerStart', $.proxy(this.onStart, this));
   this.elem.on('indicator:triggerStop', $.proxy(this.onStop, this));
@@ -48,12 +29,12 @@ RomoIndicator.prototype.doInit = function() {
   // override as needed
 }
 
-RomoIndicator.prototype.onStart = function(e) {
+RomoIndicator.prototype.onStart = function(e, basisSize) {
   if (e !== undefined) {
     e.preventDefault();
   }
 
-  this.doStart();
+  this.doStart(basisSize);
 }
 
 RomoIndicator.prototype.onStop = function(e) {
@@ -64,7 +45,38 @@ RomoIndicator.prototype.onStop = function(e) {
   this.doStop();
 }
 
-RomoIndicator.prototype.doStart = function() {
+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"))
+    )
+  }
+
+  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
+  };
+  this.spinner = new Spinner(spinnerOpts);
+
   this.elemHtml  = this.elem.html();
   this.elemStyle = this.elem.attr('style');
   this.elem.css({
@@ -78,7 +90,10 @@ RomoIndicator.prototype.doStart = function() {
 }
 
 RomoIndicator.prototype.doStop = function() {
-  this.spinner.stop();
+  if (this.spinner !== undefined) {
+    this.spinner.stop();
+    this.spinner = undefined;
+  }
   if (this.elemHtml !== undefined) {
     this.elem.html(this.elemHtml);
   }

data/assets/js/romo/indicator_text_input.js

@@ -12,7 +12,7 @@ var RomoIndicatorTextInput = function(element) {
   this.defaultIndicatorPosition  = 'right';
 
   this.doInit();
-  this.doBindElem();
+  this._bindElem();
 
   this.elem.trigger('indicatorTextInput:ready', [this]);
 }
@@ -21,7 +21,32 @@ RomoIndicatorTextInput.prototype.doInit = function() {
   // override as needed
 }
 
-RomoIndicatorTextInput.prototype.doBindElem = function() {
+RomoIndicatorTextInput.prototype.doEnable = function() {
+  this.elem.prop('disabled', false);
+  this.elem.removeClass('disabled');
+  this.indicatorElem.removeClass('disabled');
+}
+
+RomoIndicatorTextInput.prototype.doDisable = function() {
+  this.elem.prop('disabled', true);
+  this.elem.addClass('disabled');
+  this.indicatorElem.addClass('disabled');
+}
+
+RomoIndicatorTextInput.prototype.doShow = function() {
+  this._show(this.elem);
+  this._show(this.indicatorElem);
+  this._placeIndicatorElem();
+}
+
+RomoIndicatorTextInput.prototype.doHide = function() {
+  this._hide(this.elem);
+  this._hide(this.indicatorElem);
+}
+
+/* private */
+
+RomoIndicatorTextInput.prototype._bindElem = function() {
   var elemWrapper = $('<div class="romo-indicator-text-input-wrapper"></div>');
   elemWrapper.css({'display': (this.elem.data('romo-indicator-text-input-elem-display') || 'inline-block')});
   if (this.elem.data('romo-indicator-text-input-btn-group') === true) {
@@ -43,13 +68,28 @@ RomoIndicatorTextInput.prototype.doBindElem = function() {
   this.indicatorElem = $();
   var indicatorClass = this.elem.data('romo-indicator-text-input-indicator') || this.defaultIndicatorClass;
   if (indicatorClass !== undefined && indicatorClass !== 'none') {
-    this.indicatorElem = $('<i class="romo-indicator-text-input-indicator '+indicatorClass+'"></i>');
+    this.indicatorElem = $('<div class="romo-indicator-text-input-indicator"><div><i class="'+indicatorClass+'"></i></div></div>');
     this.elem.after(this.indicatorElem);
-    this.indicatorElem.on('click', $.proxy(this.onIndicatorClick, this));
-    this.doPlaceIndicatorElem();
+    this.indicatorElem.on('click', $.proxy(this._onIndicatorClick, this));
+    this._placeIndicatorElem();
+
+    this.indicatorIconContainerElem = this.indicatorElem.find('div');
+    if (this.elem.data('romo-indicator-text-input-indicator-basis-size') !== undefined) {
+      this.indicatorIconContainerElem.attr(
+        'data-romo-indicator-basis-size',
+        this.elem.data('romo-indicator-text-input-indicator-basis-size')
+      )
+    }
+    this.indicatorIconContainerElem.romoIndicator();
 
     this.elem.on('indicatorTextInput:triggerPlaceIndicator', $.proxy(function(e) {
-      this.doPlaceIndicatorElem();
+      this._placeIndicatorElem();
+    }, this));
+    this.elem.on('indicatorTextInput:triggerIndicatorStart', $.proxy(function(e, basisSize) {
+      this.indicatorIconContainerElem.trigger('indicator:triggerStart', [basisSize]);
+    }, this));
+    this.elem.on('indicatorTextInput:triggerIndicatorStop', $.proxy(function(e) {
+      this.indicatorIconContainerElem.trigger('indicator:triggerStop');
     }, this));
   }
 
@@ -67,7 +107,7 @@ RomoIndicatorTextInput.prototype.doBindElem = function() {
   }, this));
 }
 
-RomoIndicatorTextInput.prototype.doPlaceIndicatorElem = function() {
+RomoIndicatorTextInput.prototype._placeIndicatorElem = function() {
   if (this.indicatorElem !== undefined) {
     this.indicatorElem.css({'line-height': this.elem.css('height')});
     if (this.elem.prop('disabled') === true) {
@@ -92,30 +132,7 @@ RomoIndicatorTextInput.prototype.doPlaceIndicatorElem = function() {
   }
 }
 
-RomoIndicatorTextInput.prototype.doEnable = function() {
-  this.elem.prop('disabled', false);
-  this.elem.removeClass('disabled');
-  this.indicatorElem.removeClass('disabled');
-}
-
-RomoIndicatorTextInput.prototype.doDisable = function() {
-  this.elem.prop('disabled', true);
-  this.elem.addClass('disabled');
-  this.indicatorElem.addClass('disabled');
-}
-
-RomoIndicatorTextInput.prototype.doShow = function() {
-  this._show(this.elem);
-  this._show(this.indicatorElem);
-  this.doPlaceIndicatorElem();
-}
-
-RomoIndicatorTextInput.prototype.doHide = function() {
-  this._hide(this.elem);
-  this._hide(this.indicatorElem);
-}
-
-RomoIndicatorTextInput.prototype.onIndicatorClick = function(e) {
+RomoIndicatorTextInput.prototype._onIndicatorClick = function(e) {
   if (e !== undefined) {
     e.preventDefault();
     e.stopPropagation();