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.
* Moving utils functions into the `recurring_select_dialog.js.erb` file.
  • Loading branch information
@davegudge
davegudge committed Aug 27, 2024
1 parent f4f2cb6 commit db83dfb
Show file tree
Hide file tree
Showing 2 changed files with 122 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
144 changes: 121 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,73 @@
//= require utils
//= require defaults
function css(el, styles) {
for (let rule in styles) {
el.style[rule] = styles[rule]
}
}

function trigger(el, eventName) {
el.dispatchEvent(new CustomEvent(eventName))
}

function isPlainObject(obj) {
return obj && obj.toString() === "[object Object]"
}

const eventHandlerRefsExpando = '__recurring_select_events'

function on(el, events, sel, handler) {
let eventHandler = sel
if (handler) {
eventHandler = (e) => {
if (e.target.matches(sel)) {
if (handler.call(this, e) === false) {
e.preventDefault()
e.stopPropagation()
}
}
}
}

el[eventHandlerRefsExpando] = el[eventHandlerRefsExpando] || []

events.trim().split(/ +/).forEach(type => {
el[eventHandlerRefsExpando].push([ type, eventHandler ])
el.addEventListener(type, eventHandler)
})
}

function off(el, events) {
const types = events.trim().split(/ +/)

el[eventHandlerRefsExpando] = (el[eventHandlerRefsExpando] || [])
.filter(([t, h], i) => {
if (types.includes(t)) {
el.removeEventListener(t, h)
return false
}
return true
})
}

function serialize(params, prefix) {
const query = Object.keys(params).map((key) => {
const value = params[key];

if (params.constructor === Array)
key = `${prefix}[]`;
else if (params.constructor === Object)
key = (prefix ? `${prefix}[${key}]` : key);

if (value === null)
return `${key}=`

if (typeof value === 'object')
return serialize(value, key);
else
return `${key}=${encodeURIComponent(value)}`;
});

return [].concat.apply([], query).join('&');
}

class RecurringSelectDialog {
constructor(recurring_selector) {
Expand Down Expand Up @@ -42,7 +110,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 +135,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 +159,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 +176,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 +190,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 +200,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 +212,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 +256,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 +267,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 +291,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 +326,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 +344,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 +510,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 db83dfb

Please sign in to comment.