Allow the dialog context to be changed by the embedding page. Using …

app/assets/javascripts/recurring_select.js.coffee

@@ -14,6 +14,10 @@ methods =
     @data 'initial-value-hash', @val()
     @data 'initial-value-str', $(@find("option").get()[@.prop("selectedIndex")]).text()
 
+  set_dialog_context: (open_in_selector, sizing_selector) ->
+    $.fn.recurring_select.options["dialogContext"]["open_in_selector"] = open_in_selector
+    $.fn.recurring_select.options["dialogContext"]["sizing_selector"] = sizing_selector
+
   changed: ->
     if @val() == "custom"
       methods.open_custom.apply(@)
@@ -75,7 +79,11 @@ $.fn.recurring_select = (method) ->
 
 $.fn.recurring_select.options = {
   monthly: {
-    show_week: [true, true, true, true, false, false]
+    show_week: [true, true, true, true, true, false]
+  }
+  dialogContext: {
+    open_in_selector : 'body'
+    sizing_selector  : window
   }
 }
 
@@ -101,5 +109,7 @@ $.fn.recurring_select.texts = {
   first_day_of_week: 0
   days_first_letter: ["S", "M", "T", "W", "T", "F", "S" ]
   order: ["1st", "2nd", "3rd", "4th", "5th", "Last"]
-  show_week: [true, true, true, true, false, false]
+  no_limit: "No Limit"
+  until: "Until"
+  count: "Count"
 }

app/assets/javascripts/recurring_select/fr.js.coffee

@@ -21,5 +21,4 @@ $.fn.recurring_select.texts = {
   first_day_of_week: 1
   days_first_letter: ["D", "L", "M", "M", "J", "V", "S" ]
   order: ["1er", "2ème", "3ème", "4ème", "5ème", "Dernier"]
-  show_week: [true, true, true, true, false, false]
-}
+}

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

@@ -11,26 +11,41 @@ window.RecurringSelectDialog =
     initDialogBox: ->
       $(".rs_dialog_holder").remove()
 
-      open_in = $("body")
+      selector = $.fn.recurring_select.options["dialogContext"]["open_in_selector"]
+      open_in = $(selector)
       open_in = $(".ui-page-active") if $(".ui-page-active").length
       open_in.append @template()
       @outer_holder = $(".rs_dialog_holder")
+      @outer_holder.css('z-index', @getMaxZindex(@outer_holder) + 1)
       @inner_holder = @outer_holder.find ".rs_dialog"
+      @inner_holder.css('z-index', @getMaxZindex(@inner_holder) + 1)
       @content = @outer_holder.find ".rs_dialog_content"
       @positionDialogVert(true)
       @mainEventInit()
       @freqInit()
+      @limitInit()
       @summaryInit()
       @outer_holder.trigger "recurring_select:dialog_opened"
       @freq_select.focus()
 
+    getMaxZindex: (target) =>
+      value = 0
+      while target.length && target[ 0 ] != document
+        position = target.css( "position" );
+        test = parseInt( target.css( 'zIndex' ), 10 )
+        if ( !isNaN( test ) && test > value )
+          value = test
+        target = target.parent();
+      return value
+
     positionDialogVert: (initial_positioning) =>
-      window_height = $(window).height()
-      window_width  = $(window).width()
+      selector = $.fn.recurring_select.options["dialogContext"]["sizing_selector"]
+      window_height = $(selector).height()
+      window_width  = $(selector).width()
       dialog_height = @content.outerHeight()
       if dialog_height < 80
         dialog_height = 80
-      margin_top = (window_height - dialog_height)/2 - 30
+      margin_top = (window_height - dialog_height)/2 - 10
       margin_top = 10 if margin_top < 10
       # if dialog_height > window_height - 20
       #   dialog_height = window_height - 20
@@ -70,6 +85,12 @@ window.RecurringSelectDialog =
       @content.on 'click tap', 'h1 a', @cancel
       @save_button = @content.find('input.rs_save').on "click tap", @save
       @content.find('input.rs_cancel').on "click tap", @cancel
+      @content.find('#count').on("change keyup", @countChanged);
+      @content.find('#count').on("click", @countSelect);
+      @content.find('#until').on("change keyup", @untilChanged);
+      @content.find('#until').on("click", @untilSelect);
+      @content.find('input:radio[name=limit]').on('change', @limitChanged);
+      $('input[type=date]').not('.hasDatepicker').datepicker();
 
     freqInit: ->
       @freq_select = @outer_holder.find ".rs_frequency"
@@ -87,6 +108,19 @@ window.RecurringSelectDialog =
           @initDailyOptions()
       @freq_select.on "change", @freqChanged
 
+    limitInit: ->
+      if @current_rule.hash?
+        if @current_rule.hash.until != null
+          @content.find('#until').val(@current_rule.hash.until)
+          @content.find('#radio_limit_until').prop('checked', true)
+        else if @current_rule.hash.count != null
+          @content.find('#count').val(@current_rule.hash.count)
+          @content.find('#radio_limit_count').prop('checked', true)
+        else
+          @content.find('#radio_limit_none').prop('checked', true)
+      else
+        @content.find('#radio_limit_none').prop('checked', true)
+
     initDailyOptions: ->
       section = @content.find('.daily_options')
       interval_input = section.find('.rs_daily_interval')
@@ -154,8 +188,7 @@ window.RecurringSelectDialog =
         @summary.removeClass "fetching"
         @save_button.removeClass("disabled")
         rule_str = @current_rule.str.replace("*", "")
-        if rule_str.length < 20
-          rule_str = "#{$.fn.recurring_select.texts["summary"]}: "+rule_str
+        rule_str = "#{$.fn.recurring_select.texts["summary"]}: "+rule_str
         @summary.find("span").html rule_str
       else
         @summary.addClass "fetching"
@@ -232,6 +265,7 @@ window.RecurringSelectDialog =
       @current_rule.hash.validations = null
       @content.find(".freq_option_section").hide();
       @content.find("input[type=radio], input[type=checkbox]").prop("checked", false)
+      @content.find("#radio_limit_none").prop("checked", true)  # put limit back to none though
       switch @freq_select.val()
         when "Weekly"
           @current_rule.hash.rule_type = "IceCube::WeeklyRule"
@@ -298,6 +332,50 @@ window.RecurringSelectDialog =
       @summaryUpdate()
       false
 
+    countUpdate: =>
+      if @content.find("input:radio[name=limit]:checked").val() != 'count'
+        # If count is no longer selected, but the hash is still set then clear the str to recalc it
+        if @current_rule.hash.count != null
+          @current_rule.str = null
+        @current_rule.hash.count = null
+        return
+      @current_rule.str = null
+      @current_rule.hash ||= {}
+      count = parseInt(@content.find("#count").val())
+      if !isNaN(count) && count != @current_rule.hash.count
+        @current_rule.hash.count = count;
+
+    countChanged: (event) =>
+      @content.find("#radio_limit_count").click()
+      @countUpdate()
+      @summaryUpdate()
+      false # this prevents default and propogation
+
+    untilUpdate: =>
+      if @content.find("input:radio[name=limit]:checked").val() != 'until'
+        # If until is no longer selected, but the hash is still set then clear the str to recalc it
+        if @current_rule.hash.until != null
+          @current_rule.str = null
+        @current_rule.hash.until = null
+        return
+      @current_rule.str = null
+      @current_rule.hash ||= {}
+      test = @content.find("#until").val()
+      if test != @current_rule.hash.until
+        @current_rule.hash.until = test
+
+    untilChanged: (event) =>
+      @content.find("#radio_limit_until").click()
+      @untilUpdate()
+      @summaryUpdate()
+      false # this prevents default and propogation
+
+    limitChanged: (event) =>
+      @countUpdate()
+      @untilUpdate()
+      @summaryUpdate()
+      false # this prevents default and propogation
+
 # ========================= Change callbacks ===============================
 
     template: () ->
@@ -346,8 +424,8 @@ window.RecurringSelectDialog =
                 #{$.fn.recurring_select.texts["months"]}:
               </p>
               <p class='monthly_rule_type'>
-                <span><label for='monthly_rule_type_day'>#{$.fn.recurring_select.texts["day_of_month"]}</label><input type='radio' class='monthly_rule_type_day' name='monthly_rule_type' id='monthly_rule_type_day' value='true' /></span>
-                <span><label for='monthly_rule_type_week'>#{$.fn.recurring_select.texts["day_of_week"]}</label><input type='radio' class='monthly_rule_type_week' name='monthly_rule_type' id='monthly_rule_type_week' value='true' /></span>
+                <span><label for='monthly_rule_type_day'></label><input type='radio' class='monthly_rule_type_day' name='monthly_rule_type' id='monthly_rule_type_day' value='true' />#{$.fn.recurring_select.texts["day_of_month"]}</span>
+                <span><label for='monthly_rule_type_week'></label><input type='radio' class='monthly_rule_type_week' name='monthly_rule_type' id='monthly_rule_type_week' value='true' />#{$.fn.recurring_select.texts["day_of_week"]}</span>
               </p>
               <p class='rs_calendar_day'></p>
               <p class='rs_calendar_week'></p>
@@ -359,6 +437,11 @@ window.RecurringSelectDialog =
                 #{$.fn.recurring_select.texts["years"]}
               </p>
             </div>
+            <p> 
+              <span><input type='radio' name='limit' id='radio_limit_none' value='none' /><label for='none'>#{$.fn.recurring_select.texts["no_limit"]}</label></span> 
+              <span><input type='radio' name='limit' id='radio_limit_until' value='until' /><label for='until'>#{$.fn.recurring_select.texts["until"]}</label><input type='date' name='until' id='until' size='8' style='z-index: 2000;' /></span>
+              <span><input type='radio' name='limit' id='radio_limit_count' value='count' /><label for='count'>#{$.fn.recurring_select.texts["count"]}</label><input type='text' name='count' id='count' size='1' /></span> 
+            </p>
             <p class='rs_summary'>
               <span></span>
             </p>

app/assets/stylesheets/recurring_select.scss

@@ -28,7 +28,7 @@ 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 { 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 { 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;
     .rs_dialog_content { padding:10px;

lib/recurring_select.rb

@@ -4,6 +4,7 @@
 module RecurringSelect
 
   def self.dirty_hash_to_rule(params)
+    Rails.logger.info "RecurringSelect.dirty_hash_to_rule params: #{params}"
     if params.is_a? IceCube::Rule
       params
     else
@@ -12,8 +13,10 @@ def self.dirty_hash_to_rule(params)
         nil
       else
         params = params.symbolize_keys
-        rules_hash = filter_params(params)
-        IceCube::Rule.from_hash(rules_hash)
+        rules_hash = self.filter_params(params)
+        rule_str = IceCube::Rule.from_hash(rules_hash)
+        Rails.logger.info "RecurringSelect.dirty_hash_to_rule response: '#{rule_str}' for #{params.inspect}"
+        rule_str
       end
 
     end
@@ -45,6 +48,15 @@ def self.filter_params(params)
 
     params[:interval] = params[:interval].to_i if params[:interval]
     params[:week_start] = params[:week_start].to_i if params[:week_start]
+    params[:count] = params[:count].to_i if params[:count]
+    if params[:until]
+      p = Date.strptime(params[:until], '%m/%d/%Y') rescue nil
+      if p
+        params[:until] = p.to_s
+      else
+        params.delete(:until)
+      end
+    end
 
     params[:validations] ||= {}
     params[:validations].symbolize_keys!