easy_menu 0.2.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e4f6990701058e22283c180fef8fe41a1ec80951
+  data.tar.gz: 28e9fc33e9e1e32424885884bf9967ba8cc48129
+SHA512:
+  metadata.gz: 6a2f590cdc0d64bbeb095272a4008cccb46925382564126dfe0d9b102becbd82a5600c13ae2b35495ebea4c6abfbdcd2723d03389f80a5a9ad4cbb4c7cc41b15
+  data.tar.gz: a6c806734115f44e2ceea6a437956c75b8948b1ec3c6b8e3b193b7273a78eef5db66db9dce63fe0d91f7cbc8293ed57bb2715920fe99c6bd1b95a37d423a40fa

data/Gemfile

@@ -0,0 +1,2 @@
+source "http://rubygems.org"
+gem "rails", "~> 3.1.0"

data/MIT-LICENSE

@@ -0,0 +1,19 @@
+Copyright (C) 2011 by Nicholas Jakobsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README

@@ -0,0 +1,4 @@
+# Easy Menu
+## Make menus the easy way
+
+Supports Prototype and Jquery

data/app/assets/javascripts/easy_menu_jquery.js

@@ -0,0 +1,59 @@
+$(document).ready(function() {
+    var menuBarRootSelector = '.menu_bar:not(.no_js) ';
+
+    // Because some browsers don't support submit buttons outside of forms triggering form submits,
+    // do it in javascript just to make sure it happens
+    $(document).on('click', 'input[type=submit][form]', function(){
+        if (form = document.getElementById(this.getAttribute('form'))) {
+            // If the form is already submitting, we want don't want to submit it again.
+            if ($(form).hasClass('submitting')) {
+                return false;
+            }
+
+            var tempCommit = $("<input type='submit' name='commit' style='display:none'>");
+            tempCommit.attr('value', $(this).attr('value'));
+            form.appendChild(tempCommit[0]);
+            tempCommit.click();
+            return false;
+        }
+    });
+    // Used by the above click handler to determine if the browser already submitted the form.
+    $('form').submit(function() {
+        $(this).addClass('submitting');
+    });
+
+    // Allow users to open an close menus by clicking
+    $(menuBarRootSelector + '.menu_bar_content.with_menu').removeClass('no_js');
+    $(menuBarRootSelector + '.menu_bar_content.with_menu .menu_bar_item').click(function(){
+        var mbc = $(this).closest('.menu_bar_content');
+        $(menuBarRootSelector + '.menu_bar_content.with_menu').not(mbc).removeClass('open');
+        mbc.toggleClass('open');
+    });
+
+    $('body').click(function(event){
+        if ($(event.target).closest('.menu_bar_content.with_menu .menu_bar_item').length > 0) { return } // Don't close the menus if the click came from a menu
+        $(menuBarRootSelector + '.menu_bar_content.with_menu.open').removeClass('open');
+    });
+
+    // Disable Elements with a disable condition when that condition is met
+    $(menuBarRootSelector + '.menu_bar_item[data-disable-event-element]').each(function(){
+        var mbi = $(this);
+        var observableElement = eval(mbi.getAttribute('data-disable-event-element'));
+        var event = mbi.getAttribute('data-disable-event');
+        var condition = mbi.getAttribute('data-disable-condition') || true;
+
+        var setState = function(){
+            if (eval(condition)){
+                mbi.addClass('disabled');
+            } else {
+                mbi.removeClass('disabled');
+            }
+        }
+
+        // Init the current state and bind the observer
+        if (observableElement && event){
+            setState();
+            observableElement.bind(event, setState);
+        }
+    });
+});

data/app/assets/javascripts/easy_menu_prototype.js

@@ -0,0 +1,56 @@
+$(document).observe('dom:loaded', function() {
+    var menuBarRootSelector = '.menu_bar:not(.no_js) ';
+
+    // Because some browsers don't support submit buttons outside of forms triggering form submits,
+    // do it in javascript just to make sure it happens
+    Element.on(document.body, 'click', 'input[type=submit][form]', function(event){
+        var element = event.element();
+        if (form = document.getElementById(element.getAttribute('form'))) {
+            event.stop();
+            // If the form is already submitting, we want don't want to submit it again.
+            if ($(form).hasClassName('submitting')) {
+                return;
+            }
+
+            var tempCommit = new Element('input', {type:'submit', name:'commit', style:'display: none', 'value':element.getAttribute('value')});
+            form.appendChild(tempCommit[0]);
+            tempCommit.click();
+        }
+    });
+    // Used by the above click handler to determine if the browser already submitted the form.
+    $$('form').invoke('observe', 'submit', function(event) { event.element().addClassName('submitting') });
+
+    // Allow users to open an close menus by clicking
+    $$(menuBarRootSelector + '.menu_bar_content.with_menu').invoke('removeClassName', 'no_js');
+    $$(menuBarRootSelector + '.menu_bar_content.with_menu .menu_bar_item').invoke('observe', 'click', function(event){
+        var mbc = $(event.element()).up('.menu_bar_content');
+        $$('.menu_bar_content.with_menu').without(mbc).invoke('removeClassName', 'open');
+        mbc.toggleClassName('open');
+    });
+    Element.observe(document.body, 'click', function(event){
+        if (event.findElement('.menu_bar_content.with_menu .menu_bar_item')){ return }  // Don't close the menus if the click came from a menu trigger
+        $$(menuBarRootSelector + '.menu_bar_content.with_menu.open').invoke('removeClassName', 'open');
+    });
+
+    // Disable Elements with a disable condition when that condition is met
+    $$(menuBarRootSelector + '.menu_bar_item[data-disable-event-element]').each(function(element){
+        var mbi = $(element);
+        var observableElement = eval(mbi.getAttribute('data-disable-event-element'));
+        var event = mbi.getAttribute('data-disable-event');
+        var condition = mbi.getAttribute('data-disable-condition') || true;
+
+        function setState(){
+            if (eval(condition)){
+                mbi.addClassName('disabled');
+            } else {
+                mbi.removeClassName('disabled');
+            }
+        }
+
+        // Init the current state and bind the observer
+        if (observableElement && event){
+            setState();
+            $(observableElement).observe(event, setState);
+        }
+    });
+});

data/app/assets/stylesheets/_easy_menu_mixins.scss

@@ -0,0 +1,252 @@
+// VARIABLES
+$menu-bar-item-horizontal-padding: 7px;
+$menu-bar-item-height: 26px;
+$menu-bar-item-min-width: $menu-bar-item-height;
+$menu-bar-item-border-radius: 2px;
+$menu-bar-item-border-darken: .1;
+$menu-bar-item-border-shadow-darken: .3;
+$menu-bar-item-border-width: 1px;
+$menu-bar-item-border-colour: rgba(0,0,0, $menu-bar-item-border-darken);
+$menu-bar-item-border-shadow-colour: rgba(0,0,0, $menu-bar-item-border-shadow-darken);
+$menu-bar-item-light-colour: #FEFEFE;
+$menu-bar-item-dark-colour: #DDDEDE;
+$menu-bar-item-text-color: #333;
+$menu-bar-item-disabled-text-color: #999;
+$menu-bar-item-spacing: 10px;
+$menu-bar-height: 2*$menu-bar-item-border-width + $menu-bar-item-height;
+$menu-bar-font: bold 12px 'Arial', 'sans-serif';
+$menu-bar-separator-height: 26px;
+$menu-border-width: 1px;
+$menu-vertical-padding: 0.2em;
+$menu-item-vertical-padding: 0.4em;
+$menu-item-horizontal-padding: 2em;
+$menu-item-disabled-text-color: #AAA;
+// Make the button border appear even when in a group by popping the button up above its siblings
+$menu-bar-item-zindex: 1;
+$menu-bar-item-hover-zindex: 2;
+$menu-bar-item-pressed-zindex: 3;
+
+// HELPERS
+
+@mixin no-select{
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+@mixin no-drag{
+  -moz-user-drag: none;
+  -webkit-user-drag: none;
+  user-drag: none;
+}
+@mixin menu-bar-item-border-shadow-with-fallback($background-colour: $menu-bar-item-dark-colour){
+  border-bottom-color: darken($background-colour, percentage($menu-bar-item-border-shadow-darken)); // Fallback
+  border-bottom-color: $menu-bar-item-border-shadow-colour;
+}
+@mixin menu-bar-item-border-colour-with-fallback($background-colour: $menu-bar-item-dark-colour){
+  border-color: darken($background-colour, percentage($menu-bar-item-border-darken)); // Fallback
+  border-color: $menu-bar-item-border-colour;
+  @include menu-bar-item-border-shadow-with-fallback($background-colour);
+}
+@mixin menu-bar-item-border($background-colour: $menu-bar-item-dark-colour){
+  border: $menu-bar-item-border-width solid;
+  @include menu-bar-item-border-colour-with-fallback($background-colour);
+  border-radius: $menu-bar-item-border-radius;
+  -moz-transition: border-color 0.2s linear;
+  -webkit-transition: border-color 0.2s linear;
+
+}
+@mixin gradient($start, $end){
+  // IE 9+
+  background-image: data_url('image/svg+xml', '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
+    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#{$start}" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#{$end}" stop-opacity="1"/>
+    </linearGradient>
+    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
+  </svg>');
+
+  background-image: -moz-linear-gradient(top, $start 0%, $end 100%);
+  background-image: -webkit-linear-gradient(top, $start 0%, $end 100%);
+  background-image: linear-gradient(top, $start 0%, $end 100%);
+  background-repeat: no-repeat;
+}
+@mixin button_colour($light, $dark, $text-colour: white, $text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25), $shift: 15px){
+    color: $text-colour !important; // Make this important because host app may override hover colours, but we don't want to be affected
+    text-shadow: $text-shadow;
+    @include menu-bar-item-border($dark);
+
+    background-color: mix($light, $dark);
+
+    // Don't override the background if the browser doesn't support gradients otherwise the buttons will be too dark
+    &:not(oldbrowser){
+      @include gradient($light, $dark);
+      background-color: $dark;
+    }
+
+    &:hover:not(:active):not(.disabled):not(.selected){
+      -moz-transition: background-position 0.1s linear;
+      -webkit-transition: background-position 0.1s linear;
+      background-position: 0 (-$shift);
+    }
+}
+
+// STYLES
+@mixin menu_bar_item{
+  @include menu_bar_item_base;
+  @include menu_bar_item_hover;
+  @include menu_bar_item_pressed;
+
+  @include menu_bar_item_default_colour;
+  &.danger{  @include menu_bar_item_danger_colour  }
+  &.primary{ @include menu_bar_item_primary_colour }
+  &.info{    @include menu_bar_item_info_colour    }
+  &.success{ @include menu_bar_item_success_colour }
+  &.warning{ @include menu_bar_item_warning_colour }
+  &.inverse{ @include menu_bar_item_inverse_colour }
+
+  @include menu_bar_item_disabled;
+}
+
+@mixin menu_bar_item_base{
+  @include menu-bar-item-border;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); // Bevelled top edge
+  min-width: $menu-bar-item-min-width - 2*$menu-bar-item-horizontal-padding;
+  padding: 0 $menu-bar-item-horizontal-padding;
+  display: inline-block;
+  font: $menu-bar-font;
+  line-height: $menu-bar-item-height;
+  white-space: nowrap;
+  text-align: center;
+  cursor: pointer;
+
+  // Place the button above any nested menu
+  position: relative;
+  z-index: $menu-bar-item-zindex;
+
+  img{
+    vertical-align: middle;
+    position: relative;
+    bottom: 1px;
+  }
+
+  > a, > label{
+    cursor: pointer; // Override browser default on labels
+    text-decoration: none;
+    // Make the a fill the hoverable area of the button so clicking anywhere triggers the link
+    margin: -$menu-bar-item-horizontal-padding (-$menu-bar-item-horizontal-padding - $menu-bar-item-border-width);
+    padding: $menu-bar-item-horizontal-padding ($menu-bar-item-horizontal-padding + $menu-bar-item-border-width);
+  }
+  a:link, a:visited{
+    color: inherit;
+  }
+
+  // Hide the inputs without making them display none. IE doesn't click them if they are display none.
+  input[type='submit']{
+    position: absolute;
+    z-index: -1;
+    left: -9999px;
+  }
+}
+@mixin menu_bar_item_hover{
+  &:hover{
+    border-color: #888; // Fallback
+    border-color: rgba(0,0,0, $menu-bar-item-border-darken * 2);
+    border-bottom-color: rgba(0,0,0, $menu-bar-item-border-shadow-darken * 2);
+    z-index: $menu-bar-item-hover-zindex;
+    position: relative;
+  }
+}
+@mixin menu_bar_item_pressed{
+  &:active, &.selected{
+    border-color: #555; // Fallback
+    border-color: rgba(0,0,0, $menu-bar-item-border-darken * 2);
+    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.4) inset, 0 2px 2px rgba(0, 0, 0, .3) inset;
+    z-index: $menu-bar-item-pressed-zindex;
+    position: relative;
+  }
+}
+
+@mixin menu_bar_item_disabled{
+  &.disabled{
+    @include button_colour(#fefefe, #dddede, $menu-bar-item-disabled-text-color, 0 1px 1px rgba(255, 255, 255, 0.75));
+    cursor: default;
+  }
+}
+
+@mixin menu_bar_item_default_colour{
+  @include button_colour($menu-bar-item-light-colour, $menu-bar-item-dark-colour, $menu-bar-item-text-color, 0 1px 1px rgba(255, 255, 255, 0.75), 5px);
+}
+@mixin menu_bar_item_danger_colour{
+  @include button_colour(#EE5F5B, #BD362F);
+}
+@mixin menu_bar_item_primary_colour{
+  @include button_colour(#0088CC, #0055CC);
+}
+@mixin menu_bar_item_info_colour{
+  @include button_colour(#5BC0DE, #2F96B4);
+}
+@mixin menu_bar_item_success_colour{
+  @include button_colour(#62C462, #51A351);
+}
+@mixin menu_bar_item_warning_colour{
+  @include button_colour(#FBB450, #F89406);
+}
+@mixin menu_bar_item_inverse_colour{
+  @include button_colour(#555555, #222222);
+}
+
+@mixin text-field{
+  border-radius: $menu-bar-item-border-radius;
+  border: 1px solid #AAA;
+  height: $menu-bar-height;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding-left: $menu-bar-item-horizontal-padding; // Define individually so we don't override top padding. IE8 issue
+  padding-right: $menu-bar-item-horizontal-padding; // Define individually so we don't override top padding. IE8 issue
+}
+
+@mixin menu_item{
+  @include menu_item_base;
+  @include menu_item_hover;
+  @include menu_item_disabled;
+}
+
+@mixin menu_item_base{
+  white-space: nowrap;
+  font: $menu-bar-font;
+  padding: $menu-item-vertical-padding $menu-item-horizontal-padding;
+  cursor: pointer;
+
+  a {
+    color: $menu-bar-item-text-color;
+    padding: $menu-item-vertical-padding $menu-item-horizontal-padding;
+    margin: (-$menu-item-vertical-padding) (-$menu-item-horizontal-padding);
+    display: block;
+    text-decoration: none;
+  }
+}
+@mixin menu_item_hover {
+  &.selected a {
+    background: url("/assets/checkbox_selected.png") no-repeat 5px center;
+
+    &:hover {
+      background: url("/assets/checkbox_selected_hovered.png") no-repeat 5px center;
+    }
+  }
+  &:hover {
+    background: #08C;
+    color: white;
+
+    a {
+      color: inherit;
+    }
+  }
+}
+@mixin menu_item_disabled{
+  &.disabled, &.disabled a{
+    cursor: default;
+    color: $menu-item-disabled-text-color;
+  }
+}

data/app/assets/stylesheets/easy_menu.css.scss

@@ -0,0 +1,216 @@
+/*
+* This is a manifest file that'll automatically include all the stylesheets available in this directory
+* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+* the top of the compiled file, but it's generally better to create a new file per style scope.
+*= require_self
+*/
+
+@import 'easy_menu_mixins';
+
+// STYLES
+.menu_bar.default_theme{
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  height: $menu-bar-height;
+  position: relative;
+  z-index: 0; // Scope all positioned elements z-index within the menu so they don't move above or below other page elements, only each other
+
+  // MENU BAR_GROUP
+  .menu_bar_group{
+    padding: 0;
+
+    .menu_bar_content{
+      margin-left: -$menu-bar-item-spacing - $menu-bar-item-border-width;
+
+      .menu_bar_item{
+        border-radius: 0;
+      }
+    }
+
+    .menu_bar_content:first-child{
+      margin-left: 0;
+
+      .menu_bar_item{
+        border-top-left-radius: $menu-bar-item-border-radius;
+        border-bottom-left-radius: $menu-bar-item-border-radius;
+      }
+    }
+    .menu_bar_content:last-child{
+      margin-right: 0;
+
+      .menu_bar_item{
+        border-top-right-radius: $menu-bar-item-border-radius;
+        border-bottom-right-radius: $menu-bar-item-border-radius;
+      }
+    }
+
+  }
+
+  // MENU BAR CONTENT
+  .menu_bar_content{
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 $menu-bar-item-spacing 0 0;
+
+    // MENU BAR ITEMS
+    .menu_bar_item{
+      @include menu_bar_item;
+      @include no-select;
+      @include no-drag;
+    }
+
+    // MENU BAR SEPARATOR
+    .menu_bar_separator{
+      background-color: #AAA;
+      border-right: 1px solid #F7F7F7;
+      opacity: 0.5;
+      display: inline-block;
+      height: $menu-bar-separator-height;
+      padding-right: 1px;
+      vertical-align: middle;
+    }
+
+    // MENUS
+    .menu{
+      background: none repeat scroll 0 0 white;
+      @include menu-bar-item-border;
+      border-radius: 0 0 2px 2px;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+      list-style: none outside none;
+      margin-top: -$menu-border-width - $menu-bar-item-border-width; // Make the button appear to be part of the clicked trigger button
+      padding: $menu-vertical-padding 0;
+      position: absolute;
+      display: none;
+
+      .menu_content{
+        display: block;
+        padding: 0;
+        margin: 0;
+        position: relative;
+
+        .menu_item{
+          @include menu_item;
+        }
+        .menu_group_title{
+          @include menu_item_base;
+          background: none repeat scroll 0 0 #EEEEEE;
+          color: #888888;
+          font-weight: bold;
+          margin: $menu-item-vertical-padding 0;
+          white-space: nowrap;
+        }
+        .menu_group{
+          padding: 0;
+          margin: 0;
+        }
+
+        .menu_separator{
+          border-top: 1px solid #E0E0E0;
+          margin: $menu-item-vertical-padding 0;
+        }
+
+      }
+
+      // Subsequent menu groups
+      .menu_content + .menu_content .menu_group_title{
+        border-top: 1px solid #E0E0E0;
+        margin-top: $menu-item-vertical-padding;
+      }
+
+    }
+    &.with_menu {
+      .menu_bar_item .arrow{
+        background: url('/assets/arrows.png') center 87px;
+        display: inline-block;
+        margin-left: 3px;
+        height: 10px;
+        width: 10px;
+        vertical-align: middle;
+      }
+    }
+    &.with_menu.no_js:hover, &.with_menu.open{
+      .menu_bar_item {
+        background: white;
+        border-radius: 2px 2px 0 0;
+        @include menu-bar-item-border-colour-with-fallback;
+        border-bottom: none;
+        margin-bottom: $menu-bar-item-border-width; // Make up for the loss of border so the button doesn't shift
+        box-shadow: none;
+      }
+
+      z-index: $menu-bar-item-pressed-zindex + 2; // Position all the contents of this menu_content above any other menu bar item (the pressed item being the highest)
+      .menu {
+        display: block;
+      }
+    }
+
+    // Allow right alignment of buttons
+    &.right{
+      float: right;
+      margin: 0 0 0 $menu-bar-item-spacing;
+
+      .menu {
+        right: 0;
+      }
+    }
+
+    // CLICK BLOCKER (only appears if the element is disabled)
+    position: relative; // So click blocker can fill the button area
+    .disabled + .click_blocker{
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: $menu-bar-item-zindex + 3;
+    }
+
+    // INPUTS IN THE MENU
+    form{
+      display: inline-block;
+    }
+    input[type=search]{
+      @include text-field;
+      -webkit-appearance: textfield;
+      -webkit-padding-start: 0;
+      -webkit-padding-end: 0;
+    }
+    input[type=text]{
+      @include text-field;
+    }
+
+    .menu_bar_item{
+      input[type='checkbox']{
+        // Make input align properly when used in the menu bar, especially if used in a menu trigger in IE.
+        margin: 0;
+        display: inline-block;
+        vertical-align: top;
+        height: $menu-bar-item-height;
+      }
+      select{
+        @include menu_bar_item_base;
+        // @include menu_bar_item_hover;
+        height: $menu-bar-height;
+        font: $menu-bar-font;
+        padding: 0.4em;
+
+        option{
+          text-shadow: none;
+          padding: 0.4em;
+        }
+      }
+    }
+  }
+}
+.menu_bar.toggle_menu{
+  .menu_bar_content:first-child .menu_bar_item{
+    border-top-left-radius: 14px;
+    border-bottom-left-radius: 14px;
+  }
+  .menu_bar_content:last-child .menu_bar_item{
+    border-top-right-radius: 14px;
+    border-bottom-right-radius: 14px;
+  }
+}

data/app/helpers/menu_bar.rb

@@ -0,0 +1,310 @@
+# TODO make menu bar group an actual group instead of a state toggle
+class MenuBar
+  include EasyMenu::Helpers
+  include EasyMenu::Configuration
+
+  attr_reader :content
+
+  def initialize(template, options = {})
+    @template = template
+    @options = options.reverse_merge(:theme => config[:default_theme_class], :remove_dangling_separators => true)
+    config.merge! options[:config] if options[:config] # Allow per menu overriding of configuration
+    config[:template] = @template
+
+    @content = []
+
+    yield self if block_given?
+  end
+
+  def empty?
+    @content.blank?
+  end
+
+  def group(options = {})
+    initialize_options(options)
+
+    mbg = MenuBarGroup.new(@template, options.merge(@options.slice(:config)))
+    mbc = MenuBarContent.new(config, mbg, options[:menu_bar_content])
+
+    yield mbg if block_given?
+
+    @content << mbc
+
+    return mbg
+  end
+
+  def menu_bar_content(content = nil, options = {}, &block)
+    initialize_options(options)
+
+    if block_given?
+      options = content || options
+      content = block.call
+    end
+
+    mbc = MenuBarContent.new(config, content, options)
+    @content << mbc
+
+    return mbc
+  end
+
+  def menu_bar_item(content, options = {})
+    initialize_options(options)
+
+    raise if config[:template].is_a?(Hash) || config[:template].nil?
+
+    mbi = MenuBarItem.new config, content, options
+    @content << MenuBarContent.new(config, mbi, options[:menu_bar_content])
+
+    return mbi
+  end
+
+  def menu_bar_input(content, options = {})
+    initialize_options(options)
+
+    mbin = MenuBarInput.new config, content, options
+    mbi = MenuBarItem.new config, mbin, options[:menu_bar_item]
+    @content << MenuBarContent.new(config, mbi, options[:menu_bar_content])
+
+    return mbi
+  end
+
+  def menu(button_text, options = {})
+    initialize_options(options)
+
+    arrow = @template.content_tag(:span, '', :class => config[:menu_bar_item_arrow_class])
+
+    m = Menu.new(config, options)
+    mbt = MenuBarTrigger.new(config, button_text.html_safe + arrow, m, options[:menu_bar_item])
+
+    yield m if block_given?
+
+    # We give the menu bar content a special class so we can treat its contents differently than one without a menu inside
+    @content << MenuBarContent.new(config, mbt, merge_class(options[:menu_bar_content], config[:menu_bar_content_with_menu_class]))
+
+    return m
+  end
+
+  def separator(options = {})
+    s = @template.content_tag :div, '', :class => config[:menu_bar_separator_class]
+    @content << MenuBarContent.new(config, s, options.reverse_merge(:remove_if_dangling => @options[:remove_dangling_separators]))
+
+    return s
+  end
+
+  def to_s
+    @content.pop if @content.last && @content.last.options[:remove_if_dangling]
+    wrap_content(@content.join.html_safe)
+  end
+
+  private
+
+  def initialize_options(options)
+    options[:menu_bar_item] ||= {}
+    options[:menu_bar_content] ||= {}
+
+    # Alignment always lies with the content wrapper
+    options[:menu_bar_content][:align] = options.delete(:align)
+
+    return options
+  end
+
+  def html_options
+    html_opts = @options.slice(*html_option_keys)
+
+    # Set up the css class
+    merge_class(html_opts, css_class, @options[:theme])
+    merge_class(html_opts, 'no_js') if @options[:js] == false
+
+    return html_opts
+  end
+
+  # ABSTRACT CLASSES
+
+  class AbstractContent
+    include EasyMenu::Helpers
+
+    attr_reader :content, :config, :options
+    def initialize(config, content, options = {})
+      raise if config[:template].is_a?(Hash) || config[:template].nil?
+      @config = config
+      @template = config[:template]
+      @content = Array(content)
+      @options = options
+    end
+
+    def empty?
+      @content.join.blank?
+    end
+
+    def to_s
+      empty? ? '' : wrap_content(@content.join.html_safe) # Don't render anything if empty
+    end
+
+    private
+
+    def html_options
+      html_opts = @options.slice(*html_option_keys)
+      merge_class(html_opts, css_class, @options[:align])
+
+      return html_opts
+    end
+  end
+
+  class AbstractItem < AbstractContent
+    def selected(condition = :unset)
+      @options[:selected] = (condition == :unset ? true : condition)
+
+      return self
+    end
+
+    def disabled(*args)
+      @click_blocker_html_options = args.extract_options!
+      @options[:disabled] = args.present? ? args.first : true
+
+      return self
+    end
+
+    # Set the button up to disable when a particular DOM Event occurs
+    def disable_when(observable_dom_element, dom_event, js_condition, click_blocker_html_options = {})
+      @options[:disable_when] = {:element => observable_dom_element, :event => dom_event, :condition => js_condition}
+      @click_blocker_html_options = click_blocker_html_options
+      return self
+    end
+
+    private
+
+    def wrap_content(content)
+      output = super
+      output << @template.content_tag(:div, '', click_blocker_html_options) if @options[:disabled] || @options[:disable_when]
+
+      return output
+    end
+
+    def html_options
+      html_opts = @options.slice(*html_option_keys)
+
+      if @options[:disable_when]
+        html_opts[:'data-disable-event-element'] = @options[:disable_when][:element]
+        html_opts[:'data-disable-event'] = @options[:disable_when][:event]
+        html_opts[:'data-disable-condition'] = @options[:disable_when][:condition]
+      end
+
+      merge_class(html_opts, css_class)
+      merge_class(html_opts, config[:selected_class]) if @options[:selected]
+      merge_class(html_opts, config[:disabled_class]) if @options[:disabled]
+
+      return html_opts
+    end
+
+    def click_blocker_html_options
+      html_opts = @click_blocker_html_options
+      html_opts.reverse_merge! :title => @options[:title] # Default the title text to be the same as the unblocked title text
+
+      merge_class(html_opts, config[:click_blocker_class])
+
+      return html_opts
+    end
+  end
+
+  # CLASSES
+
+  class MenuBarGroup < MenuBar
+  end
+
+  class MenuBarContent < AbstractContent
+  end
+
+  class MenuBarItem < AbstractItem
+  end
+
+  class MenuBarTrigger < MenuBarItem
+    def initialize(config, content, menu, options)
+      @menu = menu
+      super(config, content, options)
+    end
+
+    # If the menu has no content, don't show the menu bar trigger
+    def empty?
+      @menu.empty?
+    end
+
+    def to_s
+      super + @menu.to_s
+    end
+  end
+
+  class MenuBarInput < AbstractContent
+  end
+
+  class Menu < AbstractContent
+    def initialize(config, options = {})
+      raise if config[:template].is_a?(Hash) || config[:template].nil?
+
+      @config = config
+      @template = config[:template]
+      @options = options
+      @content = []
+
+      yield self if block_given?
+    end
+
+    def group(title, options = {})
+      initialize_options(options)
+
+      mgt = @template.content_tag(config[:menu_group_title_element], title, merge_class(options[:menu_group_title], config[:menu_group_title_class]))
+      mg = MenuGroup.new(config, options)
+
+      yield mg if block_given?
+
+      @content << MenuContent.new(config, [mgt, mg], options[:menu_content])
+
+      return mg
+    end
+
+    def menu_content(content = nil, options = {}, &block)
+      initialize_options(options)
+
+      if block_given?
+        options = content || options
+        content = block.call
+      end
+
+      @content << MenuContent.new(config, content, options)
+    end
+
+    def menu_item(content, options = {})
+      initialize_options(options)
+
+      mi = MenuItem.new(config, content, options)
+      @content << MenuContent.new(config, mi, options[:menu_content])
+
+      return mi
+    end
+
+    def separator
+      s = @template.content_tag :div, '', :class => config[:menu_separator_class]
+      @content << MenuContent.new(config, s)
+
+      return s
+    end
+
+    private
+
+    def initialize_options(options)
+      options[:menu_item] ||= {}
+      options[:menu_content] ||= {}
+      options[:menu_group_title] ||= {}
+
+      return options
+    end
+  end
+
+  class MenuGroup < Menu
+  end
+
+  class MenuContent < AbstractContent
+  end
+
+  class MenuItem < AbstractItem
+  end
+end

data/app/helpers/menu_bar_helper.rb

@@ -0,0 +1,5 @@
+module MenuBarHelper
+  def menu_bar(*args, &block)
+    MenuBar.new(self, *args, &block)
+  end
+end

data/config/initializers/easy_menu_scss_extensions.rb

@@ -0,0 +1,21 @@
+require 'base64'
+
+# tools.ietf.org/html/rfc2397
+# developer.mozilla.org/en/data_URIs
+
+if defined?(Sass)
+  puts "Loading Easy Menu SCSS extensions"
+  module Sass::Script::Functions
+    def data_url(content_type, content)
+      outuri = "data:#{unquote(content_type)};base64,#{Base64.encode64(unquote(content).to_s.gsub(/\s*$\s*/,''))}"
+
+      # IE8 has a 32KiB limit on data uri
+      # en.wikipedia.org/wiki/Data_URI_scheme
+      if outuri.length > 32768
+        raise ArgumentError.new("Data URI is greater than 32KiB in size, that is the max size of data urls in IE8.")
+      end
+
+      Sass::Script::String.new("url('#{outuri}')")
+    end
+  end
+end

data/lib/easy_menu.rb

@@ -0,0 +1,7 @@
+module EasyMenu
+	require 'easy_menu_helpers'
+  require 'easy_menu_configuration'
+
+	class Engine < Rails::Engine
+	end
+end

data/lib/easy_menu_configuration.rb

@@ -0,0 +1,60 @@
+module EasyMenu
+  module Configuration
+    def self.included(base)
+      base.class_eval do
+        class_attribute :config
+        self.config = Hash.new{|hash, key| raise "#{key} has not been set in Easy Menu Configuration"}.merge(Default)
+      end
+    end
+
+    Default = {
+      # CLASSES
+
+      :default_theme_class              => 'default_theme',
+      :menu_bar_class                   => 'menu_bar',
+      :menu_bar_content_class           => 'menu_bar_content',
+      :menu_bar_group_class             => 'menu_bar_group',
+      :menu_bar_content_with_menu_class => 'with_menu no_js', # no_js class will be removed by browser if it has js, disabling the hover behaviour and enabling a click behaviour
+      :menu_bar_item_class              => 'menu_bar_item',
+      :menu_bar_item_arrow_class        => 'arrow',
+      :menu_bar_input_class             => 'menu_bar_input',
+      :menu_bar_separator_class         => 'menu_bar_separator',
+      :menu_bar_trigger_class           => :menu_bar_item, # This element is a menu item but behaves differently
+      :menu_class                       => 'menu',
+      :menu_content_class               => 'menu_content',
+      :menu_group_class                 => 'menu_group',
+      :menu_group_title_class           => 'menu_group_title',
+      :menu_item_class                  => 'menu_item',
+      :menu_separator_class             => 'menu_separator',
+      :click_blocker_class              => 'click_blocker',
+      :selected_class                   => 'selected',
+      :disabled_class                   => 'disabled',
+      :grouped_class                    => 'grouped',
+      :first_group_item_class           => 'first_group_item',
+      :last_group_item_class            => 'last_group_item',
+
+      # ELEMENTS
+      :menu_bar_element                 => :ul,
+      :menu_bar_group_element           => :ul,
+      :menu_bar_content_element         => :li,
+      :menu_bar_item_element            => :div,
+      :menu_bar_trigger_element         => :div,
+      :menu_bar_input_element           => :label,
+
+      :menu_element                     => :ul,
+      :menu_content_element             => :li,
+      :menu_group_title_element         => :div,
+      :menu_group_element               => :ul,
+      :menu_item_element                => :div
+    }
+
+    Bootstrap =  {
+      :menu_bar_content_with_menu_class => 'dropdown',
+      :menu_bar_item_arrow_class => 'caret',
+      :menu_class => 'dropdown-menu',
+      :menu_item_element => nil,
+      :menu_bar_trigger_element => :a,
+      :menu_bar_trigger_class => 'dropdown-toggle'
+    }
+  end
+end

data/lib/easy_menu_helpers.rb

@@ -0,0 +1,36 @@
+module EasyMenu
+	module Helpers
+  	HTML_OPTIONS = [:id, :class, :title, :style, :data]
+
+    # Determines the config name from the class name.
+    # e.g. MenuBar => 'menu_bar'
+    def config_name
+      self.class.name.demodulize.underscore
+    end
+
+    def css_class
+      config[:"#{config_name}_class"]
+    end
+
+    def wrapper_element
+      config[:"#{config_name}_element"]
+    end
+
+    def wrap_content(content)
+      if (wrapper_element)
+        @template.content_tag wrapper_element, content, html_options
+      else
+        content
+      end
+    end
+
+	  def merge_class(hash, *classes)
+	    hash[:class] = ([hash[:class]] + classes.flatten).select(&:present?).join(' ')
+	    return hash
+	  end
+
+	  def html_option_keys
+	    HTML_OPTIONS + @options.keys.select{|key| key.to_s.starts_with? 'data-'}
+	  end
+	end
+end

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification
+name: easy_menu
+version: !ruby/object:Gem::Version
+  version: 0.2.2
+platform: ruby
+authors:
+- Nicholas Jakobsen
+- Ryan Wallace
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-01-28 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.1'
+description: 
+email: 
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- MIT-LICENSE
+- README
+- app/assets/images/arrows.png
+- app/assets/images/checkbox_selected.png
+- app/assets/images/checkbox_selected_hovered.png
+- app/assets/javascripts/easy_menu_jquery.js
+- app/assets/javascripts/easy_menu_prototype.js
+- app/assets/stylesheets/_easy_menu_mixins.scss
+- app/assets/stylesheets/easy_menu.css.scss
+- app/helpers/menu_bar.rb
+- app/helpers/menu_bar_helper.rb
+- config/initializers/easy_menu_scss_extensions.rb
+- lib/easy_menu.rb
+- lib/easy_menu_configuration.rb
+- lib/easy_menu_helpers.rb
+homepage: 
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.1
+signing_key: 
+specification_version: 4
+summary: Simple menu bar dsl for Rails views
+test_files: []