Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support inline display of the dialog #100

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

support inline display of the dialog #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ee92fdf
support inline display of the dialog
tomasc Oct 23, 2015
52bc01f
make sure event is correctly unbound on both cancel & save
tomasc Oct 23, 2015
bc1c412
input type to number + bug fix
sebastianlyserena Oct 23, 2015
53ae033
if inline remove close event from parent
sebastianlyserena Oct 23, 2015
768d914
tap events only
tomasc Aug 25, 2016
b76fcea
Update recurring_select_helper.rb
tomasc Apr 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
40 changes: 25 additions & 15 deletions app/assets/javascripts/recurring_select_dialog.js.coffee.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,29 @@ window.RecurringSelectDialog =
class RecurringSelectDialog
constructor: (@recurring_selector) ->
@current_rule = @recurring_selector.recurring_select('current_rule')
@position = @recurring_selector.data('recurring-select-position')

@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

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()
Expand Down Expand Up @@ -49,9 +56,11 @@ 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')
$('body').off('click.recurring_select_cancel')

outerCancel: (event) =>
if $(event.target).hasClass("rs_dialog_holder")
Expand All @@ -61,15 +70,16 @@ 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 ===============================

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"
Expand Down Expand Up @@ -191,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")
Expand All @@ -213,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")
Expand Down Expand Up @@ -250,7 +260,7 @@ window.RecurringSelectDialog =
@current_rule.str = $.fn.recurring_select.texts["daily"]
@initDailyOptions()
@summaryUpdate()
@positionDialogVert()
@positionDialogVert() unless @position == 'inline'

intervalChanged: (event) =>
@current_rule.str = null
Expand Down Expand Up @@ -319,14 +329,14 @@ window.RecurringSelectDialog =
<div class='daily_options freq_option_section'>
<p>
#{$.fn.recurring_select.texts["every"]}
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_daily_interval' class='rs_daily_interval rs_interval' value='1' size='2' />
<input type='number' data-wrapper-class='ui-recurring-select' name='rs_daily_interval' class='rs_daily_interval rs_interval' value='1' size='2' />
#{$.fn.recurring_select.texts["days"]}
</p>
</div>
<div class='weekly_options freq_option_section'>
<p>
#{$.fn.recurring_select.texts["every"]}
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_weekly_interval' class='rs_weekly_interval rs_interval' value='1' size='2' />
<input type='number' data-wrapper-class='ui-recurring-select' name='rs_weekly_interval' class='rs_weekly_interval rs_interval' value='1' size='2' />
#{$.fn.recurring_select.texts["weeks_on"]}:
</p>
<div class='day_holder'>
Expand All @@ -342,7 +352,7 @@ window.RecurringSelectDialog =
<div class='monthly_options freq_option_section'>
<p>
#{$.fn.recurring_select.texts["every"]}
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_monthly_interval' class='rs_monthly_interval rs_interval' value='1' size='2' />
<input type='number' data-wrapper-class='ui-recurring-select' name='rs_monthly_interval' class='rs_monthly_interval rs_interval' value='1' size='2' />
#{$.fn.recurring_select.texts["months"]}:
</p>
<p class='monthly_rule_type'>
Expand All @@ -355,7 +365,7 @@ window.RecurringSelectDialog =
<div class='yearly_options freq_option_section'>
<p>
#{$.fn.recurring_select.texts["every"]}
<input type='text' data-wrapper-class='ui-recurring-select' name='rs_yearly_interval' class='rs_yearly_interval rs_interval' value='1' size='2' />
<input type='number' data-wrapper-class='ui-recurring-select' name='rs_yearly_interval' class='rs_yearly_interval rs_interval' value='1' size='2' />
#{$.fn.recurring_select.texts["years"]}
</p>
</div>
Expand Down
11 changes: 9 additions & 2 deletions app/assets/stylesheets/recurring_select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
Expand Down
2 changes: 1 addition & 1 deletion app/helpers/recurring_select_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down