diff --git a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb index baeccd6a..c05c9c2a 100644 --- a/app/assets/javascripts/recurring_select_dialog.js.coffee.erb +++ b/app/assets/javascripts/recurring_select_dialog.js.coffee.erb @@ -1,75 +1,61 @@ -window.RecurringSelectDialog = - class RecurringSelectDialog - constructor: (@recurring_selector) -> - @current_rule = @recurring_selector.recurring_select('current_rule') - @initDialogBox() +window.RecurringSelectComponent = + class RecurringSelectComponent + constructor: (@opts) -> + if @opts.value && @opts.value.val() + @current_rule = { hash : JSON.parse(@opts.value.val()) } + else + @current_rule = { hash: {}, str: '' } + + @render() if not @current_rule.hash? or not @current_rule.hash.rule_type? @freqChanged() - else - setTimeout @positionDialogVert, 10 # allow initial render - initDialogBox: -> - $(".rs_dialog_holder").remove() + render: -> + $(".recurring-component-container").remove() - open_in = $("body") - open_in = $(".ui-page-active") if $(".ui-page-active").length + open_in = $(@opts.container) open_in.append @template() - @outer_holder = $(".rs_dialog_holder") - @inner_holder = @outer_holder.find ".rs_dialog" - @content = @outer_holder.find ".rs_dialog_content" - @positionDialogVert(true) + @outer_holder = $(".recurring-component-container") + @content = @outer_holder.find ".recurring-component-content" + @content.hide() + @trigger = @outer_holder.find('.recurring-component-trigger-input') + @end_date_selects = @outer_holder.find('.recurring-component-end-date select') @mainEventInit() @freqInit() @summaryInit() - @outer_holder.trigger "recurring_select:dialog_opened" @freq_select.focus() - - positionDialogVert: (initial_positioning) => - window_height = $(window).height() - window_width = $(window).width() - dialog_height = @content.outerHeight() - if dialog_height < 80 - dialog_height = 80 - margin_top = (window_height - dialog_height)/2 - 30 - margin_top = 10 if margin_top < 10 - # if dialog_height > window_height - 20 - # dialog_height = window_height - 20 - - new_style_hash = - "margin-top" : margin_top+"px" - "min-height" : dialog_height+"px" - - if initial_positioning? - @inner_holder.css new_style_hash - @inner_holder.trigger "recurring_select:dialog_positioned" - else - @inner_holder.addClass "animated" - @inner_holder.animate new_style_hash, 200, => - @inner_holder.removeClass "animated" - @content.css {"width": "auto"} - @inner_holder.trigger "recurring_select:dialog_positioned" + @initUntilSelects() cancel: => @outer_holder.remove() - @recurring_selector.recurring_select('cancel') outerCancel: (event) => - if $(event.target).hasClass("rs_dialog_holder") + if $(event.target).hasClass("recurring-component-container") @cancel() save: => return if !@current_rule.str? - @outer_holder.remove() - @recurring_selector.recurring_select('save', @current_rule) - + @persistToForm() + + persistToForm: => + new_rule_hash_json = JSON.stringify(@current_rule.hash) + @opts.value.val(new_rule_hash_json) + + initUntilSelects: => + defaultDate = new Date + @outer_holder.find('.recurring-component-end-date-year').val(defaultDate.getFullYear()) + @outer_holder.find('.recurring-component-end-date-month').val(defaultDate.getMonth()) + @outer_holder.find('.recurring-component-end-date-day').val(defaultDate.getDate()) + @untilChanged() # ========================= 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 + @trigger.click( => @content.toggle() ) + @end_date_selects.on('change', @untilChanged) + freqInit: -> @freq_select = @outer_holder.find ".rs_frequency" @@ -148,18 +134,19 @@ window.RecurringSelectDialog = # ========================= render methods =============================== + update: => + @summaryUpdate() + summaryUpdate: (new_string) => @summary.width @content.width() if @current_rule.hash? && @current_rule.str? @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 @summary.find("span").html rule_str else @summary.addClass "fetching" - @save_button.addClass("disabled") @summary.find("span").html "" @summaryFetch() @@ -176,6 +163,7 @@ window.RecurringSelectDialog = @current_rule.str = data @summaryUpdate() @content.css {"width": "auto"} + @save() init_calendar_days: (section) => monthly_calendar = section.find(".rs_calendar_day") @@ -249,8 +237,6 @@ window.RecurringSelectDialog = @current_rule.hash.rule_type = "IceCube::DailyRule" @current_rule.str = $.fn.recurring_select.texts["daily"] @initDailyOptions() - @summaryUpdate() - @positionDialogVert() intervalChanged: (event) => @current_rule.str = null @@ -258,7 +244,17 @@ window.RecurringSelectDialog = @current_rule.hash.interval = parseInt($(event.currentTarget).val()) if @current_rule.hash.interval < 1 || isNaN(@current_rule.hash.interval) @current_rule.hash.interval = 1 - @summaryUpdate() + @update() + + untilChanged: () => + year = +@outer_holder.find('.recurring-component-end-date-year').val() + month = +@outer_holder.find('.recurring-component-end-date-month').val() + day = +@outer_holder.find('.recurring-component-end-date-day').val() + + @current_rule.str = null + @current_rule.hash ||= {} + @current_rule.hash.until = (new Date(year, month - 1, day + 1)).toISOString(); + @update() daysChanged: (event) => $(event.currentTarget).toggleClass("selected") @@ -267,7 +263,7 @@ window.RecurringSelectDialog = @current_rule.hash.validations = {} raw_days = @content.find(".day_holder a.selected").map -> parseInt($(this).data("value")) @current_rule.hash.validations.day = raw_days.get() - @summaryUpdate() + @update() false # this prevents default and propogation dateOfMonthChanged: (event) => @@ -280,7 +276,7 @@ window.RecurringSelectDialog = res @current_rule.hash.validations.day_of_week = {} @current_rule.hash.validations.day_of_month = raw_days.get() - @summaryUpdate() + @update() false weekOfMonthChanged: (event) => @@ -295,78 +291,138 @@ window.RecurringSelectDialog = instance = parseInt($(elm).attr("instance")) @current_rule.hash.validations.day_of_week[day] ||= [] @current_rule.hash.validations.day_of_week[day].push instance - @summaryUpdate() + @update() false # ========================= Change callbacks =============================== template: () -> str = " -
-
-
-

#{$.fn.recurring_select.texts["repeat"]}

-

- - +

+
+

+ + +

+
+
+

+ + +

+ +
+

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

- -
-

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

-
-
-

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

-
+
+
+

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

+
" for day_of_week in [$.fn.recurring_select.texts["first_day_of_week"]...(7 + $.fn.recurring_select.texts["first_day_of_week"])] day_of_week = day_of_week % 7 str += "#{$.fn.recurring_select.texts["days_first_letter"][day_of_week]}" str += " -
- . -
-
-

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

-

- - -

-

-

-
-

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

-
-

- + . +

+
+

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

+

+ + +

+

+

+
+
+

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

-
- - -
+

+ + + + + +

+

+ +

" diff --git a/app/assets/stylesheets/recurring_select.scss b/app/assets/stylesheets/recurring_select.scss index 4d5bd72f..5ca97e0a 100644 --- a/app/assets/stylesheets/recurring_select.scss +++ b/app/assets/stylesheets/recurring_select.scss @@ -2,7 +2,7 @@ /* -------- resets ---------------*/ -.rs_dialog_holder { font-size:14px; color:black; +.recurring-component-container { font-size:14px; color:black; a {color:black;} input[type=button] { font: small/normal Arial,sans-serif; @@ -20,7 +20,7 @@ } /*------- defaults ------------ */ -.rs_dialog_holder { font-family:helvetica, arial, 'san-serif'; color:#222; font-size:12px;} +.recurring-component-container { font-family:helvetica, arial, 'san-serif'; color:#222; font-size:12px;} /*------- specifics ------------ */ @@ -28,51 +28,49 @@ 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 { 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; - 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;} - } +.recurring-component-container { + + .recurring-component-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;} + } - p { padding:5px 0; margin:0; line-height: 14px; - label {margin-right:10px;} - } + p { padding:5px 0; margin:0; line-height: 14px; + label {margin-right:10px;} + } - a { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } + a { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } - .freq_option_section { display:none; - label { font-weight: bold; } - .rs_interval {width:30px; text-align:center; display: inline-block;} + .freq_option_section { display:none; + label { font-weight: bold; } + .rs_interval {width:30px; text-align:center; display: inline-block;} - .day_holder { border-left:1px solid #ccc; position:relative; margin-top:5px; height:26px; - a {display:block; padding:5px 7px; font-size:14px; border-style:solid; border-color:#ccc; border-width:1px 1px 1px 0px; float:left; text-decoration:none; font-weight:bold; @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.1)); background-color:#fff;; - &.selected {background-color:#89a; color:#fff; @include inset_shadows(1px, 1px, 2px, rgba(0,0,0,0.2)); @include gradiant(#9ab, #789); } - &:hover { cursor:pointer; background-color:#dde;} - } + .day_holder { border-left:1px solid #ccc; position:relative; margin-top:5px; height:26px; + a {display:block; padding:5px 7px; font-size:14px; border-style:solid; border-color:#ccc; border-width:1px 1px 1px 0px; float:left; text-decoration:none; font-weight:bold; @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.1)); background-color:#fff;; + &.selected {background-color:#89a; color:#fff; @include inset_shadows(1px, 1px, 2px, rgba(0,0,0,0.2)); @include gradiant(#9ab, #789); } + &:hover { cursor:pointer; background-color:#dde;} } + } - .rs_calendar_day, .rs_calendar_week { - width:155px; - a {display:inline-block; text-align:center; width:15px; padding:5px 3px; font-size:12px; border-style:solid; border-color:#ccc; border-width:1px 1px 1px 1px; margin:-1px 0 0 -1px; line-height:10px; background-color:#fff; font-weight:bold; - &.selected {background-color:#89a; color:#fff; @include gradiant(#9ab, #789); @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.2)); text-shadow:0 1px 1px #333;} - &:hover { cursor:pointer; background-color:#dde;} - } - a.end_of_month { width: 81px; } + .rs_calendar_day, .rs_calendar_week { + width:155px; + a {display:inline-block; text-align:center; width:15px; padding:5px 3px; font-size:12px; border-style:solid; border-color:#ccc; border-width:1px 1px 1px 1px; margin:-1px 0 0 -1px; line-height:10px; background-color:#fff; font-weight:bold; + &.selected {background-color:#89a; color:#fff; @include gradiant(#9ab, #789); @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.2)); text-shadow:0 1px 1px #333;} + &:hover { cursor:pointer; background-color:#dde;} } - .rs_calendar_week { - width: 191px; - span { - display: inline-block; - width: 35px; - } + a.end_of_month { width: 81px; } + } + .rs_calendar_week { + width: 191px; + span { + display: inline-block; + width: 35px; } + } - .monthly_rule_type { - span { - margin-right: 15px; - } + .monthly_rule_type { + span { + margin-right: 15px; } } diff --git a/spec/dummy/app/controllers/sample_controller.rb b/spec/dummy/app/controllers/sample_controller.rb index b0d3a678..ddf4f41c 100644 --- a/spec/dummy/app/controllers/sample_controller.rb +++ b/spec/dummy/app/controllers/sample_controller.rb @@ -3,4 +3,7 @@ class SampleController < ApplicationController def index end + def jt + end + end diff --git a/spec/dummy/app/models/fake_model.rb b/spec/dummy/app/models/fake_model.rb index 73ec77d4..b51df352 100644 --- a/spec/dummy/app/models/fake_model.rb +++ b/spec/dummy/app/models/fake_model.rb @@ -4,7 +4,8 @@ class FakeModel extend ActiveModel::Naming # include ActiveModel::MassAssignmentSecurity - attr_accessor :recurring_rules + attr_accessor :repeat_rule, :start_date, :end_date, + :start_time, :end_time def current_existing_rule IceCube::Rule.monthly.day_of_month(-1).to_hash diff --git a/spec/dummy/app/views/sample/jt.html.erb b/spec/dummy/app/views/sample/jt.html.erb new file mode 100644 index 00000000..b344ab92 --- /dev/null +++ b/spec/dummy/app/views/sample/jt.html.erb @@ -0,0 +1,40 @@ +<%= form_for FakeModel.new, :url => root_url do |f| %> + +

JobTeaser Availability Creator

+ +

+ <%= f.label :start_date, "Start date" %> + <%= f.date_select :start_date, input_html: {class: 'select2'} %> +

+

+ <%= f.label :start_time, "Start time" %> + <%= f.time_select :start_time, input_html: {class: 'select2'} %> +

+

+ <%= f.label :end_time, "End time" %> + <%= f.time_select :end_time, input_html: {class: 'select2'} %> +

+ +

+ <%= f.hidden_field :repeat_rule, class: 'appointment-system-repeat-rule-value', value: '' %> +

+ +

+ +

+ <%= f.submit %> +

+ + +<% end %> + + \ No newline at end of file diff --git a/spec/dummy/config/routes.rb b/spec/dummy/config/routes.rb index 0eae5fa1..bc6dbb7c 100644 --- a/spec/dummy/config/routes.rb +++ b/spec/dummy/config/routes.rb @@ -1,3 +1,5 @@ Dummy::Application.routes.draw do root to: 'sample#index' + + get '/jt', to: 'sample#jt' end