support inline display of the dialog

Author: tomasc

README.md

@@ -52,6 +52,12 @@ Use :allow_blank for a "not recurring" option:
   f.select_recurring :current_existing_rule, nil, :allow_blank => true
 ```
 
+Use :data attribute to position the recurring select dialog inline (after the select input):
+
+```ruby
+  f.select_recurring :current_existing_rule, nil, { :allow_blank => true }, { data: { recurring_select_position: 'inline' } }
+```
+
 
 ### Additional Helpers
 

app/assets/javascripts/recurring_select_dialog.js.coffee.erb

@@ -2,22 +2,36 @@ window.RecurringSelectDialog =
   class RecurringSelectDialog
     constructor: (@recurring_selector) ->
       @current_rule = @recurring_selector.recurring_select('current_rule')
+      @position = @recurring_selector.data('recurring-select-position') ? 'fixed'
+
       @initDialogBox()
       if not @current_rule.hash? or not @current_rule.hash.rule_type?
         @freqChanged()
-      else
+      else if @position != 'inline'
         setTimeout @positionDialogVert, 10 # allow initial render
 
+      if @position != 'fixed'
+        $('body').on 'click.recurring_select_cancel', (e) =>
+          unless $(e.target).closest('.rs_dialog_content').length
+            @cancel(e)
+            $('body').off('click.recurring_select_cancel')
+
+
     initDialogBox: ->
       $(".rs_dialog_holder").remove()
 
-      open_in = $("body")
+      open_in = if @position == 'inline'
+        @recurring_selector.parent()
+      else
+        $("body")
+
       open_in = $(".ui-page-active") if $(".ui-page-active").length
       open_in.append @template()
       @outer_holder = $(".rs_dialog_holder")
+      @outer_holder.addClass @position
       @inner_holder = @outer_holder.find ".rs_dialog"
       @content = @outer_holder.find ".rs_dialog_content"
-      @positionDialogVert(true)
+      @positionDialogVert(true) unless @position == 'inline'
       @mainEventInit()
       @freqInit()
       @summaryInit()
@@ -49,7 +63,8 @@ window.RecurringSelectDialog =
           @content.css {"width": "auto"}
           @inner_holder.trigger "recurring_select:dialog_positioned"
 
-    cancel: =>
+    cancel: (e) =>
+      e.preventDefault() if e
       @outer_holder.remove()
       @recurring_selector.recurring_select('cancel')
 
@@ -250,7 +265,7 @@ window.RecurringSelectDialog =
           @current_rule.str = $.fn.recurring_select.texts["daily"]
           @initDailyOptions()
       @summaryUpdate()
-      @positionDialogVert()
+      @positionDialogVert() unless @position == 'inline'
 
     intervalChanged: (event) =>
       @current_rule.str = null

app/assets/stylesheets/recurring_select.scss

@@ -28,9 +28,16 @@ select {
   option.bold {font-weight:bold; color:red;}
 }
 
-.rs_dialog_holder { position:fixed; left:0px; right:0px; top:0px; bottom:0px; padding-left:50%; background-color:rgba(255,255,255,0.2); z-index:50;
+.rs_dialog_holder {
+  background-color:rgba(255,255,255,0.2);
+
+  &.fixed {
+    position:fixed; left:0px; right:0px; top:0px; bottom:0px; padding-left:50%; z-index:50;
+    .rs_dialog { margin-left:-125px; }
+  }
+
   .rs_dialog { background-color:#f6f6f6; border:1px solid #acacac; @include shadows(1px, 3px, 8px, rgba(0,0,0,0.25)); @include rounded_corners(7px);
-              display:inline-block; min-width:200px; margin-left:-125px; overflow:hidden; position:relative;
+              display:inline-block; min-width:200px; overflow:hidden; position:relative;
     .rs_dialog_content { padding:10px;
       h1 { font-size:16px; padding:0px; margin:0 0 10px 0;
         a {float:right; display:inline-block; height:16px; width:16px; background-image:image-url("recurring_select/cancel.png"); background-position:center; background-repeat:no-repeat;}