romo 0.0.1 → 0.1.0

data/assets/css/romo/select.scss

@@ -0,0 +1,89 @@
+@import 'css/romo/vars';
+@import 'css/romo/mixins';
+
+.romo-select-dropdown-options-parent {
+  display: none;
+}
+
+.romo-select-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-select {
+  min-width: 50px;
+  font-weight: normal;
+  text-align: left;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.romo-select:focus{ @include input-focus; }
+
+.romo-select:active,
+.romo-select.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-select-text {
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  width: 100%;
+}
+.romo-select-caret {
+  position: absolute;
+  right: 6px;
+  vertical-align: middle;
+}
+
+.romo-select-option-list {
+  cursor: pointer;
+  font-weight: normal;
+  padding: 4px 0;
+  @include user-select(none);
+
+  background-color: $inputBackground;
+  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: $inputHighlightBackround;
+  color: $inputBackground;
+}
+
+.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: $inputBackground;
+  color: $disabledColor;
+}

data/assets/css/romo/sortable.scss

@@ -0,0 +1,14 @@
+@import 'css/romo/mixins';
+
+[data-romo-sortable-item="true"] {
+  @include user-select(text);
+}
+
+.romo-sortable-grab {
+  @include cursor-grab;
+  @include user-select(none);
+}
+
+.romo-sortable-grabbing {
+  @include cursor-grabbing;
+}

data/assets/css/romo/table.scss

@@ -0,0 +1,99 @@
+@import 'css/romo/vars';
+@import 'css/romo/mixins';
+
+.romo-table { width: 100%; }
+
+.romo-table th,
+.romo-table td {
+  @include rm-pad;
+  @include align-left;
+  @include align-middle;
+  @include border1-bottom;
+}
+
+.romo-table th { @include font-weight(bold); }
+.romo-table thead th { @include align-bottom; }
+
+.romo-table-alt { @include bg-alt; }
+
+.romo-table-striped tbody > tr:nth-child(odd) { @include bg-striped; }
+.romo-table-striped.romo-table-striped-alt tbody > tr:nth-child(odd) { @include bg-base; }
+.romo-table-striped.romo-table-striped-alt { @include bg-striped; }
+
+.romo-table tr.romo-muted   { @include bg-muted; }
+.romo-table tr.romo-warning { @include bg-warning; }
+.romo-table tr.romo-error   { @include bg-error; }
+.romo-table tr.romo-info    { @include bg-info; }
+.romo-table tr.romo-success { @include bg-success; }
+.romo-table tr.romo-inverse { @include bg-inverse; }
+
+.romo-table-hover tbody tr:hover,
+.romo-table-hover.romo-table-alt tbody tr:hover { @include bg-hover; }
+
+.romo-table-hover tbody tr.romo-muted:hover   { @include bg-muted-hover; }
+.romo-table-hover tbody tr.romo-warning:hover { @include bg-warning-hover; }
+.romo-table-hover tbody tr.romo-error:hover   { @include bg-error-hover; }
+.romo-table-hover tbody tr.romo-info:hover    { @include bg-info-hover; }
+.romo-table-hover tbody tr.romo-success:hover { @include bg-success-hover; }
+.romo-table-hover tbody tr.romo-inverse:hover { @include bg-inverse-hover; }
+
+.romo-table-border,
+.romo-table-border0,
+.romo-table-border1,
+.romo-table-border2 { border-collapse: collapse; *border-collapse: collapse; }
+
+.romo-table-border,
+.romo-table-border1 { @include border1-top; @include border1-left; }
+.romo-table-border0 { @include border0-top; @include border0-left; }
+.romo-table-border2 { @include border2-top; @include border2-left; }
+
+.romo-table-border  th, .romo-table-border  td,
+.romo-table-border1 th, .romo-table-border1 td { @include border1-bottom; @include border1-right; }
+.romo-table-border0 th, .romo-table-border0 td { @include border0-bottom; @include border0-right; }
+.romo-table-border2 th, .romo-table-border2 td { @include border2-bottom; @include border2-right; }
+
+.romo-table-border-muted   { @include border-muted; }
+.romo-table-border-warning { @include border-warning; }
+.romo-table-border-error   { @include border-error; }
+.romo-table-border-info    { @include border-info; }
+.romo-table-border-success { @include border-success; }
+.romo-table-border-inverse { @include border-inverse; }
+.romo-table-border-alt     { @include border-alt; }
+
+.romo-table-border-muted   th, .romo-table-border-muted   td { @include border-muted; }
+.romo-table-border-warning th, .romo-table-border-warning td { @include border-warning; }
+.romo-table-border-error   th, .romo-table-border-error   td { @include border-error; }
+.romo-table-border-info    th, .romo-table-border-info    td { @include border-info; }
+.romo-table-border-success th, .romo-table-border-success td { @include border-success; }
+.romo-table-border-inverse th, .romo-table-border-inverse td { @include border-inverse; }
+.romo-table-border-alt     th, .romo-table-border-alt     td { @include border-alt; }
+
+.romo-table-pad    th, .romo-table-pad    td,
+.romo-table-pad1   th, .romo-table-pad1   td { @include pad1; }
+.romo-table-pad0   th, .romo-table-pad0   td { @include pad0; }
+.romo-table-pad2   th, .romo-table-pad2   td { @include pad2; }
+.romo-table-rm-pad th, .romo-table-rm-pad td { @include rm-pad; }
+
+.romo-table-pad-top    th, .romo-table-pad-top    td,
+.romo-table-pad1-top   th, .romo-table-pad1-top   td { @include pad1-top; }
+.romo-table-pad0-top   th, .romo-table-pad0-top   td { @include pad0-top; }
+.romo-table-pad2-top   th, .romo-table-pad2-top   td { @include pad2-top; }
+.romo-table-rm-pad-top th, .romo-table-rm-pad-top td { @include rm-pad-top; }
+
+.romo-table-pad-right    th, .romo-table-pad-right    td,
+.romo-table-pad1-right   th, .romo-table-pad1-right   td { @include pad1-right; }
+.romo-table-pad0-right   th, .romo-table-pad0-right   td { @include pad0-right; }
+.romo-table-pad2-right   th, .romo-table-pad2-right   td { @include pad2-right; }
+.romo-table-rm-pad-right th, .romo-table-rm-pad-right td { @include rm-pad-right; }
+
+.romo-table-pad-bottom    th, .romo-table-pad-bottom    td,
+.romo-table-pad1-bottom   th, .romo-table-pad1-bottom   td { @include pad1-bottom; }
+.romo-table-pad0-bottom   th, .romo-table-pad0-bottom   td { @include pad0-bottom; }
+.romo-table-pad2-bottom   th, .romo-table-pad2-bottom   td { @include pad2-bottom; }
+.romo-table-rm-pad-bottom th, .romo-table-rm-pad-bottom td { @include rm-pad-bottom; }
+
+.romo-table-pad-left    th, .romo-table-pad-left    td,
+.romo-table-pad1-left   th, .romo-table-pad1-left   td { @include pad1-left; }
+.romo-table-pad0-left   th, .romo-table-pad0-left   td { @include pad0-left; }
+.romo-table-pad2-left   th, .romo-table-pad2-left   td { @include pad2-left; }
+.romo-table-rm-pad-left th, .romo-table-rm-pad-left td { @include rm-pad-left; }

data/assets/css/romo/tabs.scss

@@ -0,0 +1,71 @@
+@import 'css/romo/vars';
+@import 'css/romo/mixins';
+
+/* tabs */
+
+.romo-tabs {
+  display: block;
+  @include list-unstyled;
+  @include clearfix;
+
+  border-bottom: $tabDividerSize solid $tabBackgroundActive;
+}
+
+.romo-tabs > li {
+  float: left;
+  @include rm-push;
+  @include rm-pad;
+}
+
+.romo-tabs-pull-left  > li { float: left; }
+.romo-tabs-pull-right > li { float: right; }
+
+.romo-tabs > li > a {
+  display: block;
+  cursor: pointer;
+
+  @include border1;
+  background-color: $tabBackground;
+  border-color: $tabBackground;
+  color: $tabColor;
+
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+    background-color: $tabBackgroundHover;
+    border-color: $tabBackgroundHover;
+  }
+}
+
+.romo-tabs > li.active > a {
+  background-color: $tabBackgroundActive;
+  border-color: $tabBackgroundActive;
+  color: $tabColorActive;
+}
+
+.romo-tabs > li.disabled a,
+.romo-tabs > li:disabled a {
+  color: $tabColorDisabled;
+  cursor: $notAllowedCursor;
+
+  &:hover,
+  &:focus {
+    background-color: $tabBackground;
+    border-color: $tabBackgroundHover;
+  }
+}
+
+.romo-tabs.romo-tabs-small > li > a,
+.romo-tabs.romo-tabs0 > li > a { @include font-size0; @include font-weight0; @include line-height0; @include button-pad0; }
+.romo-tabs > li > a,
+.romo-tabs.romo-tabs1 > li > a { @include font-size1; @include font-weight1; @include line-height1; @include button-pad1; }
+.romo-tabs.romo-tabs-large > li > a,
+.romo-tabs.romo-tabs2 > li > a { @include font-size2; @include font-weight2; @include line-height2; @include button-pad2; }
+.romo-tabs.romo-tabs3 > li > a { @include font-size3; @include font-weight3; @include line-height3; @include button-pad3; }
+
+.romo-tabs.romo-tabs-stacked { @include rm-border; }
+.romo-tabs.romo-tabs-stacked > li { float: none; }
+.romo-tabs.romo-tabs-stacked > li > a { @include border1; border-color: $baseBorderColor; }
+.romo-tabs.romo-tabs-stacked > li.active > a { border-color: $tabBackgroundActive; }
+.romo-tabs.romo-tabs-stacked > li:not(:last-child) > a { @include rm-border-bottom; }

data/assets/css/romo/tooltip.scss

@@ -0,0 +1,89 @@
+@import 'css/romo/vars';
+@import 'css/romo/mixins';
+
+.romo-tooltip {
+  cursor: pointer;
+}
+
+.romo-tooltip-popup {
+  position: absolute;
+  float: left;
+  @include border1-radius;
+
+  white-space: normal;
+  text-align: center;
+
+  font-size: 11px;
+  line-height: 1.4;
+  font-weight: 300;
+}
+
+.romo-tooltip-popup:not([class*="romo-tooltip-open"]) {
+  display: none;
+}
+
+.romo-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.romo-tooltip-popup[data-romo-tooltip-position="top"] .romo-tooltip-arrow {
+  border-width: 6px 6px 0;
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+
+.romo-tooltip-popup[data-romo-tooltip-position="right"] .romo-tooltip-arrow {
+  border-width: 6px 6px 6px 0;
+  left: -6px;
+  top: 50%;
+  margin-top: -6px;
+}
+
+.romo-tooltip-popup[data-romo-tooltip-position="bottom"] .romo-tooltip-arrow {
+  border-width: 0 6px 6px;
+  top: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+
+.romo-tooltip-popup[data-romo-tooltip-position="left"] .romo-tooltip-arrow {
+  border-width: 6px 0 6px 6px;
+  right: -6px;
+  top: 50%;
+  margin-top: -6px;
+}
+
+.romo-tooltip-popup[data-romo-tooltip-alignment="left"]   { @include align-left; }
+.romo-tooltip-popup[data-romo-tooltip-alignment="center"] { @include align-center; }
+.romo-tooltip-popup[data-romo-tooltip-alignment="right"]  { @include align-right; }
+
+.romo-tooltip-body {
+  padding: 6px 8px;
+  overflow: hidden;
+}
+
+
+/* theme */
+
+.romo-tooltip-popup {
+  background-color: $tooltipBackground;
+  color: $tooltipColor;
+}
+
+.romo-tooltip-popup[data-romo-tooltip-position="top"] .romo-tooltip-arrow {
+  border-top-color: $tooltipBackground;
+}
+.romo-tooltip-popup[data-romo-tooltip-position="right"] .romo-tooltip-arrow {
+  border-right-color: $tooltipBackground;
+}
+.romo-tooltip-popup[data-romo-tooltip-position="bottom"] .romo-tooltip-arrow {
+  border-bottom-color: $tooltipBackground;
+}
+.romo-tooltip-popup[data-romo-tooltip-position="left"] .romo-tooltip-arrow {
+  border-left-color: $tooltipBackground;
+}

data/assets/css/romo/z_index.scss

@@ -0,0 +1,26 @@
+@import 'css/romo/vars';
+@import 'css/romo/mixins';
+
+.romo-tooltip-popup {
+  z-index: $tooltipZIndex;
+}
+.romo-tooltip-popup * {
+  z-index: inherit;
+}
+
+.romo-dropdown-popup {
+  z-index: $dropdownZIndex;
+}
+.romo-dropdown-popup * {
+  z-index: inherit;
+}
+
+// 1300 is reserved for app specific things like nav bars, etc
+// modals should appear on top of everything though
+
+.romo-modal-popup {
+  z-index: $modalZIndex;
+}
+.romo-modal-popup * {
+  z-index: inherit;
+}

data/assets/js/romo/base.js

@@ -0,0 +1,177 @@
+(function() {
+  var Romo = function() {
+    this._eventCallbacks = [];
+  }
+
+  Romo.prototype.doInit = function() {
+    $.each(this._eventCallbacks, function(idx, eventCallback) {
+      $('body').on(eventCallback.eventName, eventCallback.callback);
+    });
+
+    this.triggerInitUI($('body'));
+  }
+
+  // init UI
+
+  Romo.prototype.onInitUI = function(callback) {
+    this._addEventCallback('romo:initUI', callback);
+  }
+
+  Romo.prototype.triggerInitUI = function(elems) {
+    elems.trigger('romo:initUI');
+  }
+
+  Romo.prototype.initUIElems = function(e, selector) {
+    var elems = $(e.target).find(selector).get();
+    if ($(e.target).is(selector)) {
+      elems.push(e.target)
+    }
+    return $(elems);
+  }
+
+  Romo.prototype.initHtml = function(elem, data) {
+    var htmlElems = $(data)
+    elem.html(htmlElems);
+    this.triggerInitUI(htmlElems);
+    return htmlElems;
+  }
+
+  Romo.prototype.initReplace = function(elem, data) {
+    var replacementElem = $(data);
+    elem.replaceWith(replacementElem);
+    this.triggerInitUI(replacementElem);
+    return replacementElem;
+  }
+
+  Romo.prototype.initPrepend = function(elem, data) {
+    var prependedElem = $(data);
+    elem.prepend(prependedElem);
+    this.triggerInitUI(prependedElem);
+    return prependedElem;
+  }
+
+  Romo.prototype.initAppend = function(elem, data) {
+    var appendedElem = $(data);
+    elem.append(appendedElem);
+    this.triggerInitUI(appendedElem);
+    return appendedElem;
+  }
+
+  Romo.prototype.initBefore = function(elem, data) {
+    var insertedElem = $(data);
+    elem.before(insertedElem);
+    this.triggerInitUI(insertedElem);
+    return insertedElem;
+  }
+
+  Romo.prototype.initAfter = function(elem, data) {
+    var insertedElem = $(data);
+    elem.after(insertedElem);
+    this.triggerInitUI(insertedElem);
+    return insertedElem;
+  }
+
+  // page handling
+
+  Romo.prototype.reloadPage = function() {
+    window.location = window.location;
+  }
+
+  Romo.prototype.redirectPage = function(redirectUrl) {
+    window.location = redirectUrl;
+  }
+
+  // param serialization
+
+  Romo.prototype.param = function(data, opts) {
+    var paramData = $.extend({}, data);
+
+    if (opts && opts.removeEmpty) {
+      $.each(paramData, function(key, value) {
+        if (value === '') {
+          delete paramData[key];
+        }
+      })
+    }
+
+    var paramString = $.param(paramData);
+
+    if (opts && opts.decodeValues) {
+      paramString = this.decodeParam(paramString);
+    }
+
+    return paramString;
+  }
+
+  Romo.prototype.decodeParam = function(string) {
+    return this.decodeParamMap.reduce(function(prev, curr) {
+      return prev.replace(curr[0], curr[1]);
+    }, string);
+  }
+
+  Romo.prototype.decodeParamMap = [
+    [/%20/g, '+'],
+    [/%21/g, '!'],
+    [/%24/g, '$'],
+    [/%28/g, '('],
+    [/%29/g, ')'],
+    [/%2A/g, '*'],
+    [/%2B/g, '+'],
+    [/%2C/g, ','],
+    [/%2D/g, '-'],
+    [/%2E/g, '.'],
+    [/%2F/g, '/'],
+    [/%5B/g, '['],
+    [/%5C/g, '\\'],
+    [/%5D/g, ']'],
+    [/%3A/g, ':'],
+    [/%3C/g, '<'],
+    [/%3E/g, '>'],
+    [/%3F/g, '?'],
+    [/%40/g, '@'],
+    [/%5E/g, '^'],
+    [/%5F/g, '_'],
+    [/%60/g, '`'],
+    [/%7B/g, '{'],
+    [/%7C/g, '|'],
+    [/%7D/g, '}'],
+    [/%7E/g, '~']
+  ];
+
+  // style handling
+
+  Romo.prototype.parseZIndex = function(elem) {
+    // for the case where the browser doesn't suck and can read inherited z-index
+    var val = parseInt(elem.css('z-index'));
+    if (!isNaN(val)) {
+      return val;
+    }
+
+    // for the case where the browser sucks and can't read inherited z-index - we'll do it for you!
+    var parentIndexes = $.map(elem.parents(), function(item) {
+      return item; // converts the collection to an array
+    }).reduce($.proxy(function(prev, curr) {
+      var pval = parseInt($(curr).css('z-index'));
+      if (!isNaN(pval)) {
+        prev.push(pval);
+      }
+      return prev;
+    }, this), []);
+    parentIndexes.push(0); // in case z-index is 'auto' all the way up
+    return parentIndexes[0];
+  }
+
+  // private
+
+  Romo.prototype._addEventCallback = function(name, callback) {
+    this._eventCallbacks.push({ eventName: name, callback:  callback });
+  }
+
+  window.Romo = new Romo();
+})();
+
+$(function() {
+
+  Romo.doInit();
+
+})