Skip to content

Commit 9681c66

Browse files
committed
1 parent 0c7b2cd commit 9681c66

File tree

6 files changed

+104
-47
lines changed

6 files changed

+104
-47
lines changed

app/assets/images/ice_cube_select/cancel.png

100755100644
-176 Bytes
Loading

app/assets/javascripts/ice_cube_select.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
},
2020
changed: function() {
2121
if (this.val() === "custom") {
22-
return methods.open_custom.apply(this);
22+
methods.open_custom.apply(this);
23+
return setModalTabbing();
2324
} else {
2425
return methods.set_initial_values.apply(this);
2526
}
@@ -69,6 +70,23 @@
6970
new_option.val(new_rule_json);
7071
return new_option.insertBefore(separator);
7172
},
73+
setModalTabbing: function() {
74+
var tabbables;
75+
tabbables = $('#ice_cube_select_modal').find(':tabbable');
76+
$('#ice_cube_select_modal').off('keydown').on('keydown', function(e) {
77+
var x;
78+
var x;
79+
if ($(e.target).is(tabbables.first()) && e.which === 9 && e.shiftKey) {
80+
e.preventDefault();
81+
x = tabbables.last();
82+
x.focus();
83+
} else if ($(e.target).is(tabbables.last()) && e.which === 9 && !e.shiftKey) {
84+
e.preventDefault();
85+
x = tabbables.first();
86+
x.focus();
87+
}
88+
});
89+
};
7290
methods: function() {
7391
return methods;
7492
}

app/assets/javascripts/ice_cube_select_dialog.js.erb

Lines changed: 58 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@
3030

3131
IceCubeSelectDialog.prototype.initDialogBox = function() {
3232
var open_in;
33-
$(".rs_dialog_holder").remove();
33+
$(".ice_cube_select_dialog_holder").remove();
3434
open_in = $("body");
3535
if ($(".ui-page-active").length) {
3636
open_in = $(".ui-page-active");
3737
}
3838
open_in.append(this.template());
39-
this.outer_holder = $(".rs_dialog_holder");
40-
this.inner_holder = this.outer_holder.find(".rs_dialog");
41-
this.content = this.outer_holder.find(".rs_dialog_content");
39+
this.outer_holder = $(".ice_cube_select_dialog_holder");
40+
this.inner_holder = this.outer_holder.find(".ice_cube_select_dialog");
41+
this.content = this.outer_holder.find(".ice_cube_select_dialog_content");
4242
this.positionDialogVert(true);
4343
this.mainEventInit();
4444
this.freqInit();
@@ -47,6 +47,35 @@
4747
return this.freq_select.focus();
4848
};
4949

50+
IceCubeSelectDialog.prototype.ordinal_suffix_of = function(i) {
51+
var j, k;
52+
j = i % 10;
53+
k = i % 100;
54+
if (j === 1 && k !== 11) {
55+
return i + 'st';
56+
}
57+
if (j === 2 && k !== 12) {
58+
return i + 'nd';
59+
}
60+
if (j === 3 && k !== 13) {
61+
return i + 'rd';
62+
}
63+
return i + 'th';
64+
};
65+
66+
IceCubeSelectDialog.prototype.full_string_weekday = function(num) {
67+
var weekday;
68+
weekday = new Array(7);
69+
weekday[0] = 'Sunday';
70+
weekday[1] = 'Monday';
71+
weekday[2] = 'Tuesday';
72+
weekday[3] = 'Wednesday';
73+
weekday[4] = 'Thursday';
74+
weekday[5] = 'Friday';
75+
weekday[6] = 'Saturday';
76+
return weekday[num];
77+
};
78+
5079
IceCubeSelectDialog.prototype.positionDialogVert = function(initial_positioning) {
5180
var dialog_height, margin_top, new_style_hash, window_height, window_width;
5281
window_height = $(window).height();
@@ -86,7 +115,7 @@
86115
};
87116

88117
IceCubeSelectDialog.prototype.outerCancel = function(event) {
89-
if ($(event.target).hasClass("rs_dialog_holder")) {
118+
if ($(event.target).hasClass("ice_cube_select_dialog_holder")) {
90119
return this.cancel();
91120
}
92121
};
@@ -101,14 +130,14 @@
101130

102131
IceCubeSelectDialog.prototype.mainEventInit = function() {
103132
this.outer_holder.on('click tap', this.outerCancel);
104-
this.content.on('click tap', 'h1 a', this.cancel);
105-
this.save_button = this.content.find('input.rs_save').on("click tap", this.save);
106-
return this.content.find('input.rs_cancel').on("click tap", this.cancel);
133+
this.content.on('click tap', 'h4 a', this.cancel);
134+
this.save_button = this.content.find('input.ice_cube_select_save').on("click tap", this.save);
135+
return this.content.find('input.ice_cube_select_cancel').on("click tap", this.cancel);
107136
};
108137

109138
IceCubeSelectDialog.prototype.freqInit = function() {
110139
var rule_type;
111-
this.freq_select = this.outer_holder.find(".rs_frequency");
140+
this.freq_select = this.outer_holder.find(".ice_cube_select_frequency");
112141
if ((this.current_rule.hash != null) && ((rule_type = this.current_rule.hash.rule_type) != null)) {
113142
if (rule_type.search(/Weekly/) !== -1) {
114143
this.freq_select.prop('selectedIndex', 1);
@@ -129,7 +158,7 @@
129158
IceCubeSelectDialog.prototype.initDailyOptions = function() {
130159
var interval_input, section;
131160
section = this.content.find('.daily_options');
132-
interval_input = section.find('.rs_daily_interval');
161+
interval_input = section.find('.ice_cube_select_daily_interval');
133162
interval_input.val(this.current_rule.hash.interval);
134163
interval_input.on("change keyup", this.intervalChanged);
135164
return section.show();
@@ -138,7 +167,7 @@
138167
IceCubeSelectDialog.prototype.initWeeklyOptions = function() {
139168
var interval_input, section;
140169
section = this.content.find('.weekly_options');
141-
interval_input = section.find('.rs_weekly_interval');
170+
interval_input = section.find('.ice_cube_select_weekly_interval');
142171
interval_input.val(this.current_rule.hash.interval);
143172
interval_input.on("change keyup", this.intervalChanged);
144173
section.find(".day_holder a").each(function(index, element) {
@@ -156,7 +185,7 @@
156185
IceCubeSelectDialog.prototype.initMonthlyOptions = function() {
157186
var in_week_mode, interval_input, section, _base, _base1, _base2;
158187
section = this.content.find('.monthly_options');
159-
interval_input = section.find('.rs_monthly_interval');
188+
interval_input = section.find('.ice_cube_select_monthly_interval');
160189
interval_input.val(this.current_rule.hash.interval);
161190
interval_input.on("change keyup", this.intervalChanged);
162191
(_base = this.current_rule.hash).validations || (_base.validations = {});
@@ -175,14 +204,14 @@
175204
IceCubeSelectDialog.prototype.initYearlyOptions = function() {
176205
var interval_input, section;
177206
section = this.content.find('.yearly_options');
178-
interval_input = section.find('.rs_yearly_interval');
207+
interval_input = section.find('.ice_cube_select_yearly_interval');
179208
interval_input.val(this.current_rule.hash.interval);
180209
interval_input.on("change keyup", this.intervalChanged);
181210
return section.show();
182211
};
183212

184213
IceCubeSelectDialog.prototype.summaryInit = function() {
185-
this.summary = this.outer_holder.find(".rs_summary");
214+
this.summary = this.outer_holder.find(".ice_cube_select_summary");
186215
return this.summaryUpdate();
187216
};
188217

@@ -229,25 +258,29 @@
229258

230259
IceCubeSelectDialog.prototype.init_calendar_days = function(section) {
231260
var day_link, end_of_month_link, monthly_calendar, num, _i;
232-
monthly_calendar = section.find(".rs_calendar_day");
261+
monthly_calendar = section.find(".ice_cube_select_calendar_day");
233262
monthly_calendar.html("");
234263
for (num = _i = 1; _i <= 31; num = ++_i) {
235264
monthly_calendar.append((day_link = $(document.createElement("a")).text(num)));
265+
day_link.addClass("a_day")
266+
day_link.attr('aria-label', ordinal_suffix_of(num) + ' Day of Month' );
236267
if ($.inArray(num, this.current_rule.hash.validations.day_of_month) !== -1) {
237268
day_link.addClass("selected");
238269
}
239270
}
240271
monthly_calendar.append((end_of_month_link = $(document.createElement("a")).text($.fn.ice_cube_select.texts["last_day"])));
241272
end_of_month_link.addClass("end_of_month");
273+
end_of_month_link.attr('aria-label', ' Last Day of Month' );
242274
if ($.inArray(-1, this.current_rule.hash.validations.day_of_month) !== -1) {
243275
end_of_month_link.addClass("selected");
244276
}
245-
return monthly_calendar.find("a").on("click tap", this.dateOfMonthChanged);
277+
monthly_calendar.find("a").on("click tap", this.dateOfMonthChanged);
278+
return monthly_calendar.find("a").attr('href','');
246279
};
247280

248281
IceCubeSelectDialog.prototype.init_calendar_weeks = function(section) {
249282
var cell_str, day_link, day_of_week, index, monthly_calendar, num, row_labels, show_row, _i, _j, _len, _ref, _ref1, _ref2;
250-
monthly_calendar = section.find(".rs_calendar_week");
283+
monthly_calendar = section.find(".ice_cube_select_calendar_week");
251284
monthly_calendar.html("");
252285
row_labels = $.fn.ice_cube_select.texts["order"];
253286
show_row = $.fn.ice_cube_select.options["monthly"]["show_week"];
@@ -262,6 +295,8 @@
262295
day_link = $("<a>", {
263296
text: cell_str[day_of_week]
264297
});
298+
day_link.attr('href','');
299+
day_link.attr('aria-label', ordinal_suffix_of(num) + ' ' + full_string_weekday(day_of_week) );
265300
day_link.attr("day", day_of_week);
266301
day_link.attr("instance", num);
267302
monthly_calendar.append(day_link);
@@ -279,8 +314,8 @@
279314
IceCubeSelectDialog.prototype.toggle_month_view = function() {
280315
var week_mode;
281316
week_mode = this.content.find(".monthly_rule_type_week").prop("checked");
282-
this.content.find(".rs_calendar_week").toggle(week_mode);
283-
return this.content.find(".rs_calendar_day").toggle(!week_mode);
317+
this.content.find(".ice_cube_select_calendar_week").toggle(week_mode);
318+
return this.content.find(".ice_cube_select_calendar_day").toggle(!week_mode);
284319
};
285320

286321
IceCubeSelectDialog.prototype.freqChanged = function() {
@@ -351,7 +386,7 @@
351386
this.current_rule.str = null;
352387
(_base = this.current_rule).hash || (_base.hash = {});
353388
this.current_rule.hash.validations = {};
354-
raw_days = this.content.find(".monthly_options .rs_calendar_day a.selected").map(function() {
389+
raw_days = this.content.find(".monthly_options .ice_cube_select_calendar_day a.selected").map(function() {
355390
var res;
356391
res = $(this).text() === $.fn.ice_cube_select.texts["last_day"] ? -1 : parseInt($(this).text());
357392
return res;
@@ -370,7 +405,7 @@
370405
this.current_rule.hash.validations = {};
371406
this.current_rule.hash.validations.day_of_month = [];
372407
this.current_rule.hash.validations.day_of_week = {};
373-
this.content.find(".monthly_options .rs_calendar_week a.selected").each((function(_this) {
408+
this.content.find(".monthly_options .ice_cube_select_calendar_week a.selected").each((function(_this) {
374409
return function(index, elm) {
375410
var day, instance, _base1;
376411
day = parseInt($(elm).attr("day"));
@@ -385,12 +420,12 @@
385420

386421
IceCubeSelectDialog.prototype.template = function() {
387422
var day_of_week, str, _i, _ref, _ref1;
388-
str = "<div class='rs_dialog_holder'> <div class='rs_dialog'> <div class='rs_dialog_content'> <h1>" + $.fn.ice_cube_select.texts["repeat"] + " <a href='#' title='" + $.fn.ice_cube_select.texts["cancel"] + "' Alt='" + $.fn.ice_cube_select.texts["cancel"] + "'></a> </h1> <p class='frequency-select-wrapper'> <label for='rs_frequency'>" + $.fn.ice_cube_select.texts["frequency"] + ":</label> <select data-wrapper-class='ui-recurring-select' id='rs_frequency' class='rs_frequency' name='rs_frequency'> <option value='Daily'>" + $.fn.ice_cube_select.texts["daily"] + "</option> <option value='Weekly'>" + $.fn.ice_cube_select.texts["weekly"] + "</option> <option value='Monthly'>" + $.fn.ice_cube_select.texts["monthly"] + "</option> <option value='Yearly'>" + $.fn.ice_cube_select.texts["yearly"] + "</option> </select> </p> <div class='daily_options freq_option_section'> <p> " + $.fn.ice_cube_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' /> " + $.fn.ice_cube_select.texts["days"] + " </p> </div> <div class='weekly_options freq_option_section'> <p> " + $.fn.ice_cube_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' /> " + $.fn.ice_cube_select.texts["weeks_on"] + ": </p> <div class='day_holder'>";
423+
str = "<div id='ice_cube_select_modal' class='ice_cube_select_dialog_holder'> <div class='ice_cube_select_dialog'> <div class='ice_cube_select_dialog_content'> <h4>" + $.fn.ice_cube_select.texts["repeat"] + " <a href='#' id='ice_cube_select_cancel_button" title='" + $.fn.ice_cube_select.texts["cancel"] + "' Alt='" + $.fn.ice_cube_select.texts["cancel"] + "'></a> </h4> <p class='frequency-select-wrapper'> <label for='ice_cube_select_frequency'>" + $.fn.ice_cube_select.texts["frequency"] + ":</label> <select data-wrapper-class='ui-recurring-select' id='ice_cube_select_frequency' class='ice_cube_select_frequency' name='ice_cube_select_frequency'> <option value='Daily'>" + $.fn.ice_cube_select.texts["daily"] + "</option> <option value='Weekly'>" + $.fn.ice_cube_select.texts["weekly"] + "</option> <option value='Monthly'>" + $.fn.ice_cube_select.texts["monthly"] + "</option> <option value='Yearly'>" + $.fn.ice_cube_select.texts["yearly"] + "</option> </select> </p> <div class='daily_options freq_option_section'> <p> " + $.fn.ice_cube_select.texts["every"] + " <input type='text' data-wrapper-class='ui-recurring-select' name='ice_cube_select_daily_interval' class='ice_cube_select_daily_interval ice_cube_select_interval' value='1' size='2' title='Enter number of days to repeat' /> " + $.fn.ice_cube_select.texts["days"] + " </p> </div> <div class='weekly_options freq_option_section'> <p> " + $.fn.ice_cube_select.texts["every"] + " <input type='text' data-wrapper-class='ui-recurring-select' name='ice_cube_select_weekly_interval' class='ice_cube_select_weekly_interval ice_cube_select_interval' value='1' size='2' title='Enter number of weeks to repeat' /> " + $.fn.ice_cube_select.texts["weeks_on"] + ": </p> <div class='day_holder'>";
389424
for (day_of_week = _i = _ref = $.fn.ice_cube_select.texts["first_day_of_week"], _ref1 = 7 + $.fn.ice_cube_select.texts["first_day_of_week"]; _ref <= _ref1 ? _i < _ref1 : _i > _ref1; day_of_week = _ref <= _ref1 ? ++_i : --_i) {
390425
day_of_week = day_of_week % 7;
391426
str += "<a href='#' data-value='" + day_of_week + "'>" + $.fn.ice_cube_select.texts["days_first_letter"][day_of_week] + "</a>";
392427
}
393-
return str += "</div> <span style='clear:both; visibility:hidden; height:1px;'>.</span> </div> <div class='monthly_options freq_option_section'> <p> " + $.fn.ice_cube_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' /> " + $.fn.ice_cube_select.texts["months"] + ": </p> <p class='monthly_rule_type'> <span><label for='monthly_rule_type_day'>" + $.fn.ice_cube_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.ice_cube_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> </p> <p class='rs_calendar_day'></p> <p class='rs_calendar_week'></p> </div> <div class='yearly_options freq_option_section'> <p> " + $.fn.ice_cube_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' /> " + $.fn.ice_cube_select.texts["years"] + " </p> </div> <p class='rs_summary'> <span></span> </p> <div class='controls'> <input type='button' data-wrapper-class='ui-recurring-select' class='rs_save' value='" + $.fn.ice_cube_select.texts["ok"] + "' /> <input type='button' data-wrapper-class='ui-recurring-select' class='rs_cancel' value='" + $.fn.ice_cube_select.texts["cancel"] + "' /> </div> </div> </div> </div>";
428+
return str += "</div> <span style='clear:both; visibility:hidden; height:1px;'>.</span> </div> <div class='monthly_options freq_option_section'> <p> " + $.fn.ice_cube_select.texts["every"] + " <input type='text' data-wrapper-class='ui-recurring-select' name='ice_cube_select_monthly_interval' class='ice_cube_select_monthly_interval ice_cube_select_interval' value='1' size='2' title='Enter number of months to repeat' /> " + $.fn.ice_cube_select.texts["months"] + ": </p> <p class='monthly_rule_type'> <span><label for='monthly_rule_type_day'>" + $.fn.ice_cube_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.ice_cube_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> </p> <p class='ice_cube_select_calendar_day'></p> <p class='ice_cube_select_calendar_week'></p> </div> <div class='yearly_options freq_option_section'> <p> " + $.fn.ice_cube_select.texts["every"] + " <input type='text' data-wrapper-class='ui-recurring-select' name='ice_cube_select_yearly_interval' class='ice_cube_select_yearly_interval ice_cube_select_interval' value='1' size='2' title='Enter number of years to repeat' /> " + $.fn.ice_cube_select.texts["years"] + " </p> </div> <p class='ice_cube_select_summary'> <span></span> </p> <div class='controls'> <input type='button' data-wrapper-class='ui-recurring-select' id='ice_cube_select_save' class='ice_cube_select_save' value='" + $.fn.ice_cube_select.texts["ok"] + "' /> <input type='button' data-wrapper-class='ui-recurring-select' id='ice_cube_select_cancel' class='ice_cube_select_cancel' value='" + $.fn.ice_cube_select.texts["cancel"] + "' /> </div> </div> </div> </div>";
394429
};
395430

396431
return IceCubeSelectDialog;

app/assets/javascripts/jquery-mobile-rs.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
$(document).on("ice_cube_select:cancel ice_cube_select:save", ".ice_cube_select", function() {
44
return $(this).selectmenu('refresh');
55
});
6-
return $(document).on("ice_cube_select:dialog_opened", ".rs_dialog_holder", function() {
6+
return $(document).on("ice_cube_select:dialog_opened", ".ice_cube_select_dialog_holder", function() {
77
$(this).find("select").attr("data-theme", $('.ice_cube_select').data("theme")).attr("data-mini", true).selectmenu();
88
$(this).find("input[type=text]").textinput();
9-
return $(this).on("ice_cube_select:dialog_positioned", ".rs_dialog", function() {
9+
return $(this).on("ice_cube_select:dialog_positioned", ".ice_cube_select_dialog", function() {
1010
return $(this).css({
1111
"top": $(window).scrollTop() + "px"
1212
});

0 commit comments

Comments
 (0)