romo 0.0.1 → 0.1.0

data/assets/js/romo/tooltip.js

@@ -0,0 +1,258 @@
+$.fn.romoTooltip = function() {
+  return $.map(this, function(element) {
+    return new RomoTooltip(element);
+  });
+}
+
+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.doSetPopupZIndex(this.elem);
+  this.arrowElem = this.popupElem.find('> .romo-tooltip-arrow');
+  this.bodyElem = this.popupElem.find('> .romo-tooltip-body');
+
+  this.hoverState = 'out';
+  this.delayEnter = 0;
+  this.delayLeave = 0;
+  if (this.elem.data('romo-tooltip-delay') !== undefined && this.elem.data('romo-tooltip-delay') !== '') {
+    this.delayEnter = this.elem.data('romo-tooltip-delay');
+    this.delayLeave = this.elem.data('romo-tooltip-delay');
+  }
+  if (this.elem.data('romo-tooltip-delay-enter') !== undefined && this.elem.data('romo-tooltip-delay-enter') !== '') {
+    this.delayEnter = this.elem.data('romo-tooltip-delay-enter');
+  }
+  if (this.elem.data('romo-tooltip-delay-leave') !== undefined && this.elem.data('romo-tooltip-delay-leave') !== '') {
+    this.delayLeave = this.elem.data('romo-tooltip-delay-leave');
+  }
+
+  this.popupPosition = this.elem.data('romo-tooltip-position') || 'top';
+  this.popupElem.attr('data-romo-tooltip-position', this.popupPosition);
+  this.popupAlignment = this.elem.data('romo-tooltip-alignment') || 'center';
+  this.popupElem.attr('data-romo-tooltip-alignment', this.popupAlignment);
+
+  // 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-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));
+  $(window).on('resize', $.proxy(this.onResizeWindow, this))
+
+  this.doInit();
+  this.doInitBody();
+  if (this.contentData === undefined) {
+    this.doBindInvoke();
+  }
+
+  this.elem.trigger('tooltip:ready', [this]);
+}
+
+RomoTooltip.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoTooltip.prototype.doInitBody = function() {
+  this.doResetBody();
+
+  this.bodyElem.css({
+    'min-width':  this.elem.data('romo-tooltip-min-width'),
+    'max-width':  this.elem.data('romo-tooltip-max-width'),
+    'width':      this.elem.data('romo-tooltip-width'),
+    'min-height': this.elem.data('romo-tooltip-min-height'),
+    'max-height': this.elem.data('romo-tooltip-max-height'),
+    'height':     this.elem.data('romo-tooltip-height')
+  });
+}
+
+RomoTooltip.prototype.doResetBody = function() {
+  this.bodyElem.css({
+    'min-width':  '',
+    'max-width':  '',
+    'width':      '',
+    'min-height': '',
+    'max-height': '',
+    'height':     '',
+  });
+}
+
+RomoTooltip.prototype.doBindInvoke = function() {
+  this.romoInvoke = this.elem.romoInvoke()[0];
+  this.romoInvoke.doUnBindInvoke(); // disable auto invoke on click
+
+  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));
+}
+
+RomoTooltip.prototype.doLoadBodyStart = function() {
+  this.bodyElem.html('');
+  this.doInitBody();
+  this.doPlacePopupElem();
+  this.elem.trigger('tooltip:loadBodyStart', [this]);
+}
+
+RomoTooltip.prototype.doLoadBodySuccess = function(data) {
+  Romo.initHtml(this.bodyElem, data);
+  this.doInitBody();
+  this.doPlacePopupElem();
+  this.elem.trigger('tooltip:loadBodySuccess', [data, this]);
+}
+
+RomoTooltip.prototype.doLoadBodyError = function(xhr) {
+  this.elem.trigger('tooltip:loadBodyError', [xhr, this]);
+}
+
+RomoTooltip.prototype.onToggleEnter = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  this.hoverState = 'in';
+  if (this.elem.hasClass('disabled') === false) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout($.proxy(function() {
+      if (this.hoverState ==='in') {
+        this.doPopupOpen();
+      }
+    }, this), this.delayEnter);
+  }
+}
+
+RomoTooltip.prototype.onToggleLeave = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  this.hoverState = 'out';
+  if (this.elem.hasClass('disabled') === false) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout($.proxy(function() {
+      if (this.hoverState === 'out') {
+        this.doPopupClose();
+      }
+    }, this), this.delayLeave);
+  }
+}
+
+RomoTooltip.prototype.onResizeWindow = function(e) {
+  if (this.elem.hasClass('disabled') === false && this.hoverState === 'in') {
+    this.doPlacePopupElem();
+  }
+}
+
+RomoTooltip.prototype.onPopupOpen = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false) {
+    this.doPopupOpen();
+  }
+}
+
+RomoTooltip.prototype.doPopupOpen = function() {
+  if (this.romoInvoke !== undefined) {
+    this.romoInvoke.doInvoke();
+  }
+  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:popupclose', $.proxy(this.onModalPopupChange, this));
+  }
+  $(window).on('resize', $.proxy(this.onResizeWindow, this));
+
+  this.elem.trigger('tooltip:popupOpen', [this]);
+}
+
+RomoTooltip.prototype.onPopupClose = function(e) {
+  if (e !== undefined) {
+    e.preventDefault();
+  }
+
+  if (this.elem.hasClass('disabled') === false) {
+    this.doPopupClose();
+  }
+}
+
+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:popupclose', $.proxy(this.onModalPopupChange, this));
+  }
+  $(window).off('resize', $.proxy(this.onResizeWindow, this));
+
+  this.elem.trigger('tooltip:popupClose', [this]);
+}
+
+RomoTooltip.prototype.onModalPopupChange = function(e) {
+  if (e !== undefined) {
+    this.doPopupClose();
+  }
+  return true;
+}
+
+RomoTooltip.prototype.onResizeWindow = function(e) {
+  this.doPlacePopupElem();
+  return true;
+}
+
+RomoTooltip.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 = 6 + 1; // arrow size + spacing
+  var offset = {};
+
+  switch (this.popupPosition) {
+    case 'top':
+      $.extend(offset, { top: pos.top - h - pad, left: pos.left + pos.width / 2 - w / 2 });
+      break;
+    case 'bottom':
+      $.extend(offset, { top: pos.top + pos.height + pad, left: pos.left + pos.width / 2 - w / 2 });
+      break;
+    case 'left':
+      $.extend(offset, { top: pos.top + pos.height / 2 - h / 2, left: pos.left - w - pad });
+      break;
+    case 'right':
+      $.extend(offset, { top: pos.top + pos.height / 2 - h / 2, left: pos.left + pos.width + pad });
+      break;
+  }
+
+  this.popupElem.offset(offset);
+}
+
+RomoTooltip.prototype.doSetPopupZIndex = function(relativeElem) {
+  var relativeZIndex = Romo.parseZIndex(relativeElem);
+  this.popupElem.css({'z-index': relativeZIndex + 1100}); // see z-index.css
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-tooltip-auto="true"]').romoTooltip();
+});

data/lib/romo/dassets.rb

@@ -0,0 +1,64 @@
+require 'dassets'
+require 'dassets-sass'
+require 'dassets-erb'
+require 'romo'
+
+module Romo; end
+module Romo::Dassets
+
+  # TODO: this is a prototype - I'm not even sure how this API will shake out.
+  # eventually would have a gem, "romo-dassets", do this or something
+
+  def self.configure!
+    Dassets.configure do |c|
+      c.source Romo.gem_assets_path do |s|
+        s.filter{ |paths| paths.reject{ |p| File.basename(p) =~ /^_/ } }
+
+        s.engine 'erb', Dassets::Erb::Engine
+        s.engine 'scss', Dassets::Sass::Engine, {
+          :syntax => 'scss',
+          :output_style => 'compressed' # TODO: let them override output style
+        }
+      end
+
+      c.combination "css/romo.css", [
+        'css/romo/normalize.css',
+        'css/romo/base.css',
+        'css/romo/forms.css',
+        'css/romo/buttons.css',
+        'css/romo/labels.css',
+        'css/romo/tabs.css',
+        'css/romo/lists.css',
+        'css/romo/grid.css',
+        'css/romo/table.css',
+        'css/romo/grid_table.css',
+        'css/romo/dropdown.css',
+        'css/romo/modal.css',
+        'css/romo/select.css',
+        'css/romo/datepicker.css',
+        'css/romo/tooltip.css',
+        'css/romo/sortable.css',
+        'css/romo/z_index.css',
+      ]
+      c.combination "js/romo.js", [
+        'js/romo/base.js',
+        'js/romo/invoke.js',
+        'js/romo/form.js',
+        'js/romo/dropdown.js',
+        'js/romo/dropdown_form.js',
+        'js/romo/select_dropdown.js',
+        'js/romo/select.js',
+        'js/romo/datepicker.js',
+        'js/romo/inline.js',
+        'js/romo/inline_form.js',
+        'js/romo/modal.js',
+        'js/romo/modal_form.js',
+        'js/romo/tooltip.js',
+        'js/romo/indicator.js',
+        'js/romo/sortable.js',
+      ]
+
+    end
+  end
+
+end

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.0.1"
+  VERSION = "0.1.0"
 end

data/lib/romo.rb

@@ -1,4 +1,13 @@
 require "romo/version"
 
 module Romo
+
+  def self.gem_assets_path; self.gem_path.join('assets'); end
+
+  private
+
+  def self.gem_path
+    @gem_path ||= Pathname(Gem.loaded_specs['romo'].full_gem_path)
+  end
+
 end

data/romo.gemspec

@@ -13,11 +13,13 @@ Gem::Specification.new do |gem|
   gem.homepage    = "http://github.com/redding/romo"
   gem.license     = 'MIT'
 
-  gem.files         = `git ls-files`.split($/)
+  gem_files = `git ls-files`.split($/)
+  gem_files -= gem_files.grep(%r{^(gh-pages)/})
+  gem.files         = gem_files
   gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
   gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
   gem.require_paths = ["lib"]
 
-  gem.add_development_dependency("assert", ["~> 2.3"])
+  gem.add_development_dependency("assert", ["~> 2.12"])
 
 end

data/test/unit/dassets_tests.rb

@@ -0,0 +1,67 @@
+require 'assert'
+require 'romo/dassets'
+
+require 'dassets'
+require 'dassets-sass'
+require 'dassets-erb'
+
+module Romo::Dassets
+
+  class UnitTests < Assert::Context
+    desc "Romo::Dassets"
+    subject{ Romo::Dassets }
+
+    should "configure Romo with Dassets" do
+      subject.configure!
+
+      source = Dassets.config.sources.detect do |source|
+        source.path == Romo.gem_assets_path.to_s
+      end
+      assert source
+      assert_instance_of Dassets::Sass::Engine, source.engines["scss"]
+      assert_instance_of Dassets::Erb::Engine,  source.engines["erb"]
+
+      exp_css_sources = [
+        'css/romo/normalize.css',
+        'css/romo/base.css',
+        'css/romo/forms.css',
+        'css/romo/buttons.css',
+        'css/romo/labels.css',
+        'css/romo/tabs.css',
+        'css/romo/lists.css',
+        'css/romo/grid.css',
+        'css/romo/table.css',
+        'css/romo/grid_table.css',
+        'css/romo/dropdown.css',
+        'css/romo/modal.css',
+        'css/romo/select.css',
+        'css/romo/datepicker.css',
+        'css/romo/tooltip.css',
+        'css/romo/sortable.css',
+        'css/romo/z_index.css',
+      ]
+      assert_equal exp_css_sources, Dassets.config.combinations['css/romo.css']
+
+      exp_js_sources = [
+        'js/romo/base.js',
+        'js/romo/invoke.js',
+        'js/romo/form.js',
+        'js/romo/dropdown.js',
+        'js/romo/dropdown_form.js',
+        'js/romo/select_dropdown.js',
+        'js/romo/select.js',
+        'js/romo/datepicker.js',
+        'js/romo/inline.js',
+        'js/romo/inline_form.js',
+        'js/romo/modal.js',
+        'js/romo/modal_form.js',
+        'js/romo/tooltip.js',
+        'js/romo/indicator.js',
+        'js/romo/sortable.js',
+      ]
+      assert_equal exp_js_sources, Dassets.config.combinations['js/romo.js']
+    end
+
+  end
+
+end

data/test/unit/romo_tests.rb

@@ -0,0 +1,21 @@
+require 'assert'
+require 'romo'
+
+module Romo
+
+  class UnitTests < Assert::Context
+    desc "Romo"
+    subject{ Romo }
+
+    should have_imeths :gem_assets_path
+
+    should "know its assets path based on the gem's path" do
+      spec = Gem::Specification.find_by_name('romo', Romo::VERSION)
+      expected = File.join(spec.gem_dir, 'assets')
+
+      assert_equal expected, subject.gem_assets_path.to_s
+    end
+
+  end
+
+end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  hash: 29
+  hash: 27
   prerelease: 
   segments: 
   - 0
-  - 0
   - 1
-  version: 0.0.1
+  - 0
+  version: 0.1.0
 platform: ruby
 authors: 
 - Kelly Redding
@@ -16,23 +16,23 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-11-20 00:00:00 Z
+date: 2014-11-07 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
-  name: assert
-  prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ~>
       - !ruby/object:Gem::Version 
-        hash: 5
+        hash: 27
         segments: 
         - 2
-        - 3
-        version: "2.3"
+        - 12
+        version: "2.12"
   type: :development
+  name: assert
   version_requirements: *id001
+  prerelease: false
 description: A UI Toolkit
 email: 
 - kelly@kellyredding.com
@@ -49,11 +49,50 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- assets/css/romo/_mixins.scss
+- assets/css/romo/_vars.scss
+- assets/css/romo/base.scss
+- assets/css/romo/buttons.scss
+- assets/css/romo/datepicker.scss
+- assets/css/romo/dropdown.scss
+- assets/css/romo/forms.scss
+- assets/css/romo/grid.scss
+- assets/css/romo/grid_table.scss
+- assets/css/romo/labels.scss
+- assets/css/romo/lists.scss
+- assets/css/romo/modal.scss
+- assets/css/romo/normalize.scss
+- assets/css/romo/select.scss
+- assets/css/romo/sortable.scss
+- assets/css/romo/table.scss
+- assets/css/romo/tabs.scss
+- assets/css/romo/tooltip.scss
+- assets/css/romo/z_index.scss
+- assets/js/romo/base.js
+- assets/js/romo/datepicker.js
+- assets/js/romo/dropdown.js
+- assets/js/romo/dropdown_form.js
+- assets/js/romo/form.js
+- assets/js/romo/indicator.js
+- assets/js/romo/inline.js
+- assets/js/romo/inline_form.js
+- assets/js/romo/invoke.js
+- assets/js/romo/modal.js
+- assets/js/romo/modal_form.js
+- assets/js/romo/select.js
+- assets/js/romo/select_dropdown.js
+- assets/js/romo/sortable.js
+- assets/js/romo/tooltip.js
 - lib/romo.rb
+- lib/romo/dassets.rb
 - lib/romo/version.rb
 - log/.gitkeep
 - romo.gemspec
 - test/helper.rb
+- test/support/.gitkeep
+- test/system/.gitkeep
+- test/unit/dassets_tests.rb
+- test/unit/romo_tests.rb
 - tmp/.gitkeep
 homepage: http://github.com/redding/romo
 licenses: 
@@ -84,9 +123,13 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.8.24
+rubygems_version: 1.8.25
 signing_key: 
 specification_version: 3
 summary: A UI Toolkit
 test_files: 
 - test/helper.rb
+- test/support/.gitkeep
+- test/system/.gitkeep
+- test/unit/dassets_tests.rb
+- test/unit/romo_tests.rb