From ee92fdf4b08b33d85b0e6b3e163f27c48230e213 Mon Sep 17 00:00:00 2001 From: Tomas Celizna Date: Fri, 23 Oct 2015 12:08:02 +0200 Subject: [PATCH 1/6] support inline display of the dialog --- README.md | 6 +++++ .../recurring_select_dialog.js.coffee.erb | 25 +++++++++++++++---- app/assets/stylesheets/recurring_select.scss | 11 ++++++-- 3 files changed, 35 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 8d526d9e..710a0f1d 100644 --- a/README.md +++ b/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 diff --git a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb index baeccd6a..b7174edc 100644 --- a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb +++ b/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 diff --git a/app/assets/stylesheets/recurring_select.scss b/app/assets/stylesheets/recurring_select.scss index 4d5bd72f..4c003e06 100644 --- a/app/assets/stylesheets/recurring_select.scss +++ b/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;} From 52bc01fbfaf273a8cfd71394ee14bf49fd471b93 Mon Sep 17 00:00:00 2001 From: Tomas Celizna Date: Fri, 23 Oct 2015 12:24:15 +0200 Subject: [PATCH 2/6] make sure event is correctly unbound on both cancel & save --- app/assets/javascripts/recurring_select_dialog.js.coffee.erb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb index b7174edc..f9034752 100644 --- a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb +++ b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb @@ -14,7 +14,6 @@ window.RecurringSelectDialog = $('body').on 'click.recurring_select_cancel', (e) => unless $(e.target).closest('.rs_dialog_content').length @cancel(e) - $('body').off('click.recurring_select_cancel') initDialogBox: -> @@ -67,6 +66,7 @@ window.RecurringSelectDialog = e.preventDefault() if e @outer_holder.remove() @recurring_selector.recurring_select('cancel') + $('body').off('click.recurring_select_cancel') outerCancel: (event) => if $(event.target).hasClass("rs_dialog_holder") @@ -76,6 +76,7 @@ window.RecurringSelectDialog = return if !@current_rule.str? @outer_holder.remove() @recurring_selector.recurring_select('save', @current_rule) + $('body').off('click.recurring_select_cancel') # ========================= Init Methods =============================== From bc1c4124f8ab54837a47be4b00efc25362ae81df Mon Sep 17 00:00:00 2001 From: Sebastian Ly Serena Date: Fri, 23 Oct 2015 14:09:03 +0200 Subject: [PATCH 3/6] input type to number + bug fix --- .../recurring_select_dialog.js.coffee.erb | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb index f9034752..e87e6199 100644 --- a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb +++ b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb @@ -2,7 +2,7 @@ window.RecurringSelectDialog = class RecurringSelectDialog constructor: (@recurring_selector) -> @current_rule = @recurring_selector.recurring_select('current_rule') - @position = @recurring_selector.data('recurring-select-position') ? 'fixed' + @position = @recurring_selector.data('recurring-select-position') @initDialogBox() if not @current_rule.hash? or not @current_rule.hash.rule_type? @@ -12,7 +12,7 @@ window.RecurringSelectDialog = if @position != 'fixed' $('body').on 'click.recurring_select_cancel', (e) => - unless $(e.target).closest('.rs_dialog_content').length + unless $(e.target).parent(@recurring_selector).length @cancel(e) @@ -335,14 +335,14 @@ window.RecurringSelectDialog =

#{$.fn.recurring_select.texts["every"]} - + #{$.fn.recurring_select.texts["days"]}

#{$.fn.recurring_select.texts["every"]} - + #{$.fn.recurring_select.texts["weeks_on"]}:

@@ -358,7 +358,7 @@ window.RecurringSelectDialog =

#{$.fn.recurring_select.texts["every"]} - + #{$.fn.recurring_select.texts["months"]}:

@@ -371,7 +371,7 @@ window.RecurringSelectDialog =

#{$.fn.recurring_select.texts["every"]} - + #{$.fn.recurring_select.texts["years"]}

From 53ae0332a4852665a3285203613b006c792364bd Mon Sep 17 00:00:00 2001 From: Sebastian Ly Serena Date: Fri, 23 Oct 2015 15:24:42 +0200 Subject: [PATCH 4/6] if inline remove close event from parent --- .../javascripts/recurring_select_dialog.js.coffee.erb | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb index e87e6199..199f0fa9 100644 --- a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb +++ b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb @@ -10,12 +10,6 @@ window.RecurringSelectDialog = else if @position != 'inline' setTimeout @positionDialogVert, 10 # allow initial render - if @position != 'fixed' - $('body').on 'click.recurring_select_cancel', (e) => - unless $(e.target).parent(@recurring_selector).length - @cancel(e) - - initDialogBox: -> $(".rs_dialog_holder").remove() From 768d914b3a1fc485d5d0a7b5bb91403cc99d0cb3 Mon Sep 17 00:00:00 2001 From: Tomas Celizna Date: Thu, 25 Aug 2016 21:32:28 +0200 Subject: [PATCH 5/6] tap events only no need for click when we have tap? --- .../recurring_select_dialog.js.coffee.erb | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb index 199f0fa9..fff9990b 100644 --- a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb +++ b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb @@ -76,10 +76,10 @@ window.RecurringSelectDialog = mainEventInit: -> # Tap hooks are for jQueryMobile - @outer_holder.on 'click tap', @outerCancel - @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 + @outer_holder.on 'tap', @outerCancel + @content.on 'tap', 'h1 a', @cancel + @save_button = @content.find('input.rs_save').on "tap", @save + @content.find('input.rs_cancel').on "tap", @cancel freqInit: -> @freq_select = @outer_holder.find ".rs_frequency" @@ -201,7 +201,7 @@ window.RecurringSelectDialog = if $.inArray(-1, @current_rule.hash.validations.day_of_month) != -1 end_of_month_link.addClass("selected") - monthly_calendar.find("a").on "click tap", @dateOfMonthChanged + monthly_calendar.find("a").on "tap", @dateOfMonthChanged init_calendar_weeks: (section) => monthly_calendar = section.find(".rs_calendar_week") @@ -223,7 +223,7 @@ window.RecurringSelectDialog = $.each @current_rule.hash.validations.day_of_week, (key, value) -> $.each value, (index, instance) -> section.find("a[day='#{key}'][instance='#{instance}']").addClass("selected") - monthly_calendar.find("a").on "click tap", @weekOfMonthChanged + monthly_calendar.find("a").on "tap", @weekOfMonthChanged toggle_month_view: => week_mode = @content.find(".monthly_rule_type_week").prop("checked") From b76fcea83bb8c47820bf6190c8cc79cd582e6d04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Celizna?= Date: Wed, 12 Apr 2017 09:29:02 -0400 Subject: [PATCH 6/6] Update recurring_select_helper.rb --- app/helpers/recurring_select_helper.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/helpers/recurring_select_helper.rb b/app/helpers/recurring_select_helper.rb index b4fc7e70..33ee216c 100644 --- a/app/helpers/recurring_select_helper.rb +++ b/app/helpers/recurring_select_helper.rb @@ -2,7 +2,7 @@ module RecurringSelectHelper module FormHelper - if Rails::VERSION::MAJOR == 4 + if Rails::VERSION::MAJOR == 4 || Rails::VERSION::MAJOR == 5 def select_recurring(object, method, default_schedules = nil, options = {}, html_options = {}) RecurringSelectTag.new(object, method, self, default_schedules, options, html_options).render end