Skip to content

Commit

Permalink
fix: Ensure import is used rater than require.
Browse files Browse the repository at this point in the history 
* Moving the default config into the `recurring_select_dialog.js.erb` file.
* Prefixing calls to utils.
  • Loading branch information
@davegudge
davegudge committed Aug 27, 2024
1 parent f4f2cb6 commit ece1a94
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 25 deletions.
3 changes: 1 addition & 2 deletions app/assets/javascripts/recurring_select.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
//= require recurring_select_dialog
//= require_self
import './recurring_select_dialog.js.erb';

document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("focusin", (e) => {
Expand Down
75 changes: 52 additions & 23 deletions app/assets/javascripts/recurring_select_dialog.js.erb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
//= require utils
//= require defaults
import utils from './utils';

class RecurringSelectDialog {
constructor(recurring_selector) {
Expand Down Expand Up @@ -42,7 +41,7 @@ class RecurringSelectDialog {
this.mainEventInit();
this.freqInit();
this.summaryInit();
trigger(this.outer_holder, "recurring_select:dialog_opened");
utils.trigger(this.outer_holder, "recurring_select:dialog_opened");
this.freq_select.focus();
}

Expand All @@ -67,11 +66,11 @@ class RecurringSelectDialog {

mainEventInit() {
// Tap hooks are for jQueryMobile
on(this.outer_holder, 'click tap', this.outerCancel);
on(this.content, 'click tap', 'h1 a', this.cancel);
utils.on(this.outer_holder, 'click tap', this.outerCancel);
utils.on(this.content, 'click tap', 'h1 a', this.cancel);
this.save_button = this.content.querySelector('input.rs_save')
on(this.save_button, "click tap", this.save)
on(this.content.querySelector('input.rs_cancel'), "click tap", this.cancel)
utils.on(this.save_button, "click tap", this.save)
utils.on(this.content.querySelector('input.rs_cancel'), "click tap", this.cancel)
}

freqInit() {
Expand All @@ -91,14 +90,14 @@ class RecurringSelectDialog {
this.initDailyOptions();
}
}
on(this.freq_select, "change", this.freqChanged);
utils.on(this.freq_select, "change", this.freqChanged);
}

initDailyOptions() {
const section = this.content.querySelector('.daily_options')
const interval_input = section.querySelector('.rs_daily_interval')
interval_input.value = this.current_rule.hash.interval
on(interval_input, "change keyup", this.intervalChanged);
utils.on(interval_input, "change keyup", this.intervalChanged);
section.style.display = 'block'
}

Expand All @@ -108,7 +107,7 @@ class RecurringSelectDialog {
// connect the interval field
const interval_input = section.querySelector('.rs_weekly_interval');
interval_input.value = this.current_rule.hash.interval
on(interval_input, "change keyup", this.intervalChanged);
utils.on(interval_input, "change keyup", this.intervalChanged);

// clear selected days
section.querySelectorAll(".day_holder a").forEach(el =>
Expand All @@ -122,8 +121,8 @@ class RecurringSelectDialog {
)
}

off(section, "click")
on(section, "click", ".day_holder a", this.daysChanged)
utils.off(section, "click")
utils.on(section, "click", ".day_holder a", this.daysChanged)

section.style.display = 'block'
}
Expand All @@ -132,7 +131,7 @@ class RecurringSelectDialog {
const section = this.content.querySelector('.monthly_options')
const interval_input = section.querySelector('.rs_monthly_interval')
interval_input.value = this.current_rule.hash.interval
on(interval_input, "change keyup", this.intervalChanged)
utils.on(interval_input, "change keyup", this.intervalChanged)

if (!this.current_rule.hash.validations) { this.current_rule.hash.validations = {} };
if (!this.current_rule.hash.validations.day_of_month) { this.current_rule.hash.validations.day_of_month = [] };
Expand All @@ -144,15 +143,15 @@ class RecurringSelectDialog {
section.querySelector(".monthly_rule_type_week").checked = in_week_mode
section.querySelector(".monthly_rule_type_day").checked = !in_week_mode;
this.toggle_month_view();
section.querySelectorAll("input[name=monthly_rule_type]").forEach((el) => on(el, "change", this.toggle_month_view))
section.querySelectorAll("input[name=monthly_rule_type]").forEach((el) => utils.on(el, "change", this.toggle_month_view))
section.style.display = 'block'
}

initYearlyOptions() {
const section = this.content.querySelector('.yearly_options');
const interval_input = section.querySelector('.rs_yearly_interval');
interval_input.value = this.current_rule.hash.interval
on(interval_input, "change keyup", this.intervalChanged)
utils.on(interval_input, "change keyup", this.intervalChanged)
section.style.display = 'block'
}

Expand Down Expand Up @@ -188,7 +187,7 @@ class RecurringSelectDialog {

const url = `<%= Rails.application.config.action_controller.relative_url_root %>/recurring_select/translate/${this.config.texts["locale_iso_code"]}`
const headers = { 'X-Requested-With' : 'XMLHttpRequest', 'Content-Type' : 'application/x-www-form-urlencoded' }
const body = serialize(this.current_rule.hash)
const body = utils.serialize(this.current_rule.hash)
console.log(this.current_rule.hash, body)

fetch(url, { method: "POST", body, headers })
Expand All @@ -199,7 +198,7 @@ class RecurringSelectDialog {
summaryFetchSuccess(data) {
this.current_rule.str = data
this.summaryUpdate()
css(this.content, { width: "auto" })
utils.css(this.content, { width: "auto" })
}

init_calendar_days(section) {
Expand All @@ -223,8 +222,8 @@ class RecurringSelectDialog {
end_of_month_link.classList.add("selected");
}

off(monthly_calendar, "click tap")
on(monthly_calendar, "click tap", "a", this.dateOfMonthChanged)
utils.off(monthly_calendar, "click tap")
utils.on(monthly_calendar, "click tap", "a", this.dateOfMonthChanged)
}

init_calendar_weeks(section) {
Expand Down Expand Up @@ -258,8 +257,8 @@ class RecurringSelectDialog {
})
})

off(monthly_calendar, "click tap")
on(monthly_calendar, "click tap", "a", this.weekOfMonthChanged)
utils.off(monthly_calendar, "click tap")
utils.on(monthly_calendar, "click tap", "a", this.weekOfMonthChanged)
}

toggle_month_view() {
Expand All @@ -276,7 +275,7 @@ class RecurringSelectDialog {
// ========================= Change callbacks ===============================

freqChanged() {
if (!isPlainObject(this.current_rule.hash)) { this.current_rule.hash = null; } // for custom values
if (!utilsisPlainObject(this.current_rule.hash)) { this.current_rule.hash = null; } // for custom values

if (!this.current_rule.hash) { this.current_rule.hash = {} };
this.current_rule.hash.interval = 1;
Expand Down Expand Up @@ -442,6 +441,36 @@ class RecurringSelectDialog {
}
}

RecurringSelectDialog.config = defaultConfig
RecurringSelectDialog.config = {
options: {
monthly: {
show_week: [true, true, true, true, false, false]
}
},
texts: {
locale_iso_code: "en",
repeat: "Repeat",
last_day: "Last Day",
frequency: "Frequency",
daily: "Daily",
weekly: "Weekly",
monthly: "Monthly",
yearly: "Yearly",
every: "Every",
days: "day(s)",
weeks_on: "week(s) on",
months: "month(s)",
years: "year(s)",
day_of_month: "Day of month",
day_of_week: "Day of week",
cancel: "Cancel",
ok: "OK",
summary: "Summary",
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]
}
}

window.RecurringSelectDialog = RecurringSelectDialog

0 comments on commit ece1a94

Please sign in to comment.