recurring_select 3.0.1 → 4.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 823b393395bb4608d998ea0a5b8f9b38b985ae8ee91107523d5383aaa94a97ae
-  data.tar.gz: ecf294db986e90ea87ba5d2c6481053fbd466267a18949915201cdb04501774e
+  metadata.gz: 31e198de02d94e75927a32460fe0a56601c1da1f52b9df05d878ea7c2857d637
+  data.tar.gz: 351c9d4727459ffb8e5c58eb523a08123ca49b51de8d63fe1e66c13e85d04d87
 SHA512:
-  metadata.gz: 4870f4d76cc947ee2f20cdf3c917e05ddb804acae5a2852d4f0faf4576019f7f0656d8b70c7608b2a22b7487902da908f4c0d3d174cf768b42e0c4ab6f68314a
-  data.tar.gz: 3006029c17dab3353f0f89ba025996d280978e4e7fdf6cdf764dd67f930eac23f62f0da1877769df5d3adc5aa4616aa3f07dd15e67d4d4b750d794ea25bdde2a
+  metadata.gz: 9ba0419fbb294618ab4846ed4ce767c057e1574201852b8e61923bcf9889c493cd078db6ab08ea413bb117d92c525c05f39f35d8fe8c1978d8e7104673acda44
+  data.tar.gz: '093da6c4eaf8a91da28dce5ce12878670cd3455d2098e5b7ad50c8641dbf69936bd33cc7c0b47386220489ab3350f0ef66b3e30457e3bdbe86cd5722bd65253e'

data/README.md

@@ -26,6 +26,7 @@ gem 'recurring_select'
 - application.css: `//= require recurring_select`
 
 #### jQuery Mobile Interface:
+- application.js: `//= require jquery`
 - application.js: `//= require jquery-mobile-rs`
 - application.css: `//= require jquery-mobile-rs`
 
@@ -99,8 +100,8 @@ You have to translate JavaScript texts too by including the locale file in your
 
 For other languages include a JavaScript file like this:
 
-```coffeescript
-$.fn.recurring_select.texts = {
+```js
+RecurringSelectDialog.config.texts = {
   locale_iso_code: "fr"
   repeat: "Repeat"
   frequency: "Frequency"
@@ -125,8 +126,8 @@ $.fn.recurring_select.texts = {
 
 Options include:
 
-```coffeescript
-$.fn.recurring_select.options = {
+```js
+RecurringSelectDialog.config.options = {
   monthly: {
     show_week: [true, true, true, true, false, false] //display week 1, 2 .... Last
   }
@@ -135,13 +136,6 @@ $.fn.recurring_select.options = {
 
 ## Testing and Development
 
-The dummy app uses a [Postgres](http://postgresapp.com/) database `recurring_select_development`. To get setup:
-
-```console
-bundle
-rake db:create
-```
-
 Start the dummy server for clicking around the interface:
 
 ```console
@@ -151,8 +145,8 @@ rails s
 Tests can be ran against different versions of Rails like so:
 
 ```
-BUNDLE_GEMFILE=spec/gemfiles/Gemfile.rails-4.0.x bundle install
-BUNDLE_GEMFILE=spec/gemfiles/Gemfile.rails-4.0.x bundle exec rspec spec
+BUNDLE_GEMFILE=spec/gemfiles/rails-7 bundle install
+BUNDLE_GEMFILE=spec/gemfiles/rails-7 bundle exec rspec spec
 ```
 
 Feel free to open issues or send pull requests.

data/app/assets/javascripts/defaults.js

@@ -0,0 +1,31 @@
+const defaultConfig = {
+  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]
+  }
+}

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

@@ -0,0 +1,20 @@
+//= require recurring_select
+//= require_self
+
+const $ = jQuery
+
+$(function() {
+  $(document).on("recurring_select:cancel recurring_select:save", ".recurring_select", function() {
+    $(this).selectmenu('refresh');
+  });
+
+  $(document).on("recurring_select:dialog_opened", ".rs_dialog_holder", function() {
+    $(this).find("select").attr("data-theme", $('.recurring_select').data("theme")).attr("data-mini", true).selectmenu();
+    $(this).find("input[type=text]").textinput();
+
+    $(this).on("recurring_select:dialog_positioned", ".rs_dialog", function() {
+      $(this).css({
+        "top" : $(window).scrollTop()+"px"});
+    });
+  });
+});

data/app/assets/javascripts/recurring_select/{fr.js.coffee → fr.js}

@@ -1,4 +1,4 @@
-$.fn.recurring_select.texts = {
+RecurringSelectDialog.config.texts = {
   locale_iso_code: "fr"
   repeat: "Récurrence"
   last_day: "Dernier jour"
@@ -21,4 +21,4 @@ $.fn.recurring_select.texts = {
   days_first_letter: ["D", "L", "M", "M", "J", "V", "S" ]
   order: ["1er", "2ème", "3ème", "4ème", "5ème", "Dernier"]
   show_week: [true, true, true, true, false, false]
-}
+}

data/app/assets/javascripts/recurring_select.js

@@ -0,0 +1,96 @@
+//= require recurring_select_dialog
+//= require_self
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.addEventListener("focusin", (e) => {
+    if (e.target.matches(".recurring_select")) {
+      recurring_select.call(e.target, "set_initial_values")
+    }
+  })
+
+  document.addEventListener("input", (e) => {
+    if (e.target.matches(".recurring_select")) {
+      recurring_select.call(e.target, "changed")
+    }
+  })
+})
+
+const methods = {
+  set_initial_values() {
+    const str = this.querySelectorAll('option')[this.selectedIndex].textContent
+    this.setAttribute('data-initial-value-hash', this.value);
+    this.setAttribute('data-initial-value-str', str);
+  },
+
+  changed() {
+    if (this.value == "custom") {
+      methods.open.call(this);
+    } else {
+      methods.set_initial_values.call(this);
+    }
+  },
+
+  open() {
+    this.setAttribute("data-recurring-select-active", true);
+    new RecurringSelectDialog(this);
+    this.blur();
+  },
+
+  save(new_rule) {
+    this.querySelectorAll("option[data-custom]").forEach((el) => el.parentNode.removeChild(el) )
+    const new_json_val = JSON.stringify(new_rule.hash)
+
+    // TODO: check for matching name, and replace that value if found
+
+    const options = Array.from(this.querySelectorAll("option")).map(() => this.value)
+    if (!options.includes(new_json_val)) {
+      methods.insert_option.apply(this, [new_rule.str, new_json_val])
+    }
+
+    this.value = new_json_val
+    methods.set_initial_values.apply(this)
+    this.dispatchEvent(new CustomEvent("recurring_select:save"))
+  },
+
+  current_rule() {
+    return {
+      str: this.getAttribute("data-initial-value-str"),
+      hash: JSON.parse(this.getAttribute("data-initial-value-hash"))
+    };
+  },
+
+  cancel() {
+    this.value = this.getAttribute("data-initial-value-hash")
+    this.setAttribute("data-recurring-select-active", false);
+    this.dispatchEvent(new CustomEvent("recurring_select:cancel"))
+  },
+
+
+  insert_option(new_rule_str, new_rule_json) {
+    let separator = this.querySelectorAll("option[disabled]");
+    if (separator.length === 0) {
+      separator = this.querySelectorAll("option");
+    }
+    separator = separator[separator.length-1]
+
+    const new_option = document.createElement("option")
+    new_option.setAttribute("data-custom", true);
+
+    if (new_rule_str.substr(new_rule_str.length - 1) !== "*") {
+      new_rule_str+="*";
+    }
+
+    new_option.textContent = new_rule_str
+    new_option.value = new_rule_json
+    separator.parentNode.insertBefore(new_option, separator)
+  }
+};
+
+function recurring_select(method) {
+  this['recurring_select'] = this['recurring_select'] || recurring_select.bind(this)
+  if (method in methods) {
+    return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
+  } else {
+    throw new Error( `Method ${method} does not exist on recurring_select` );
+  }
+}

data/app/assets/javascripts/recurring_select_dialog.js.erb

@@ -0,0 +1,447 @@
+//= require utils
+//= require defaults
+
+class RecurringSelectDialog {
+  constructor(recurring_selector) {
+    this.config = this.constructor.config
+    this.cancel = this.cancel.bind(this);
+    this.outerCancel = this.outerCancel.bind(this);
+    this.save = this.save.bind(this);
+    this.summaryUpdate = this.summaryUpdate.bind(this);
+    this.summaryFetchSuccess = this.summaryFetchSuccess.bind(this);
+    this.init_calendar_days = this.init_calendar_days.bind(this);
+    this.init_calendar_weeks = this.init_calendar_weeks.bind(this);
+    this.toggle_month_view = this.toggle_month_view.bind(this);
+    this.freqChanged = this.freqChanged.bind(this);
+    this.intervalChanged = this.intervalChanged.bind(this);
+    this.daysChanged = this.daysChanged.bind(this);
+    this.dateOfMonthChanged = this.dateOfMonthChanged.bind(this);
+    this.weekOfMonthChanged = this.weekOfMonthChanged.bind(this);
+    this.recurring_selector = recurring_selector;
+    this.current_rule = this.recurring_selector.recurring_select('current_rule');
+    this.initDialogBox();
+    if ((this.current_rule.hash == null) || (this.current_rule.hash.rule_type == null)) {
+      this.freqChanged();
+    }
+  }
+
+  initDialogBox() {
+    document.querySelectorAll(".rs_dialog_holder").forEach(el => el.parentNode.removeChild(el))
+
+    const uiPage = document.querySelector('.ui-page-active')
+    const anchor = uiPage ? uiPage : document.body
+
+    const div = document.createElement("div")
+    div.innerHTML = this.template()
+    anchor.appendChild(div.children[0])
+
+    this.outer_holder = document.querySelector(".rs_dialog_holder");
+    this.inner_holder = this.outer_holder.querySelector(".rs_dialog");
+    this.content = this.outer_holder.querySelector(".rs_dialog_content");
+
+    this.mainEventInit();
+    this.freqInit();
+    this.summaryInit();
+    trigger(this.outer_holder, "recurring_select:dialog_opened");
+    this.freq_select.focus();
+  }
+
+  cancel() {
+    this.outer_holder.remove();
+    this.recurring_selector.recurring_select('cancel');
+  }
+
+  outerCancel(event) {
+    if (event.target.classList.contains("rs_dialog_holder")) {
+      this.cancel();
+    }
+  }
+
+  save() {
+    if ((this.current_rule.str == null)) { return; }
+    this.outer_holder.remove();
+    this.recurring_selector.recurring_select('save', this.current_rule);
+  }
+
+// ========================= Init Methods ===============================
+
+  mainEventInit() {
+    // Tap hooks are for jQueryMobile
+    on(this.outer_holder, 'click tap', this.outerCancel);
+    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)
+  }
+
+  freqInit() {
+    this.freq_select = this.outer_holder.querySelector(".rs_frequency");
+    const rule_type = this.current_rule.hash && this.current_rule.hash.rule_type
+    if (this.current_rule.hash != null && rule_type != null) {
+      if (rule_type.search(/Weekly/) !== -1) {
+        this.freq_select.selectedIndex = 1
+        this.initWeeklyOptions();
+      } else if (rule_type.search(/Monthly/) !== -1) {
+        this.freq_select.selectedIndex = 2
+        this.initMonthlyOptions();
+      } else if (rule_type.search(/Yearly/) !== -1) {
+        this.freq_select.selectedIndex = 3
+        this.initYearlyOptions();
+      } else {
+        this.initDailyOptions();
+      }
+    }
+    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);
+    section.style.display = 'block'
+  }
+
+  initWeeklyOptions() {
+    const section = this.content.querySelector('.weekly_options');
+
+    // 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);
+
+    // clear selected days
+    section.querySelectorAll(".day_holder a").forEach(el =>
+      el.classList.remove("selected")
+    )
+
+    // connect the day fields
+    if ((this.current_rule.hash.validations != null) && (this.current_rule.hash.validations.day != null)) {
+      Array.from(this.current_rule.hash.validations.day).forEach((val) =>
+        section.querySelector(".day_holder a[data-value='"+val+"']").classList.add("selected")
+      )
+    }
+
+    off(section, "click")
+    on(section, "click", ".day_holder a", this.daysChanged)
+
+    section.style.display = 'block'
+  }
+
+  initMonthlyOptions() {
+    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)
+
+    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 = [] };
+    if (!this.current_rule.hash.validations.day_of_week) { this.current_rule.hash.validations.day_of_week = {} };
+    this.init_calendar_days(section);
+    this.init_calendar_weeks(section);
+
+    const in_week_mode = Object.keys(this.current_rule.hash.validations.day_of_week).length > 0;
+    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.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)
+    section.style.display = 'block'
+  }
+
+
+  summaryInit() {
+    this.summary = this.outer_holder.querySelector(".rs_summary");
+    this.summaryUpdate();
+  }
+
+// ========================= render methods ===============================
+
+  summaryUpdate(new_string) {
+    // this.summary.style.width = `${this.content.getBoundingClientRect().width}px`;
+    if ((this.current_rule.hash != null) && (this.current_rule.str != null)) {
+      this.summary.classList.remove("fetching");
+      this.save_button.classList.remove("disabled");
+      let rule_str = this.current_rule.str.replace("*", "");
+      if (rule_str.length < 20) {
+        rule_str = `${this.config.texts["summary"]}: `+rule_str;
+      }
+      this.summary.querySelector("span").textContent = rule_str
+    } else {
+      this.summary.classList.add("fetching");
+      this.save_button.classList.add("disabled");
+      this.summary.querySelector("span").textContent = ""
+      this.summaryFetch();
+    }
+  }
+
+  summaryFetch() {
+    if (!(this.current_rule.hash != null && this.current_rule.hash.rule_type != null)) { return; }
+    this.current_rule.hash['week_start'] = this.config.texts["first_day_of_week"];
+
+    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)
+    console.log(this.current_rule.hash, body)
+
+    fetch(url, { method: "POST", body, headers })
+      .then(r => r.text())
+      .then(this.summaryFetchSuccess)
+  }
+
+  summaryFetchSuccess(data) {
+    this.current_rule.str = data
+    this.summaryUpdate()
+    css(this.content, { width: "auto" })
+  }
+
+  init_calendar_days(section) {
+    const monthly_calendar = section.querySelector(".rs_calendar_day");
+    monthly_calendar.innerHTML = "";
+    for (let num = 1; num <= 31; num++) {
+      const day_link = document.createElement("a")
+      day_link.innerText = num
+      monthly_calendar.appendChild(day_link)
+      if (Array.from(this.current_rule.hash.validations.day_of_month).includes(num)) {
+        day_link.classList.add("selected");
+      }
+    };
+
+    // add last day of month button
+    const end_of_month_link = document.createElement("a")
+    end_of_month_link.innerText = this.config.texts["last_day"]
+    monthly_calendar.appendChild(end_of_month_link);
+    end_of_month_link.classList.add("end_of_month");
+    if (Array.from(this.current_rule.hash.validations.day_of_month).includes(-1)) {
+      end_of_month_link.classList.add("selected");
+    }
+
+    off(monthly_calendar, "click tap")
+    on(monthly_calendar, "click tap", "a", this.dateOfMonthChanged)
+  }
+
+  init_calendar_weeks(section) {
+    const monthly_calendar = section.querySelector(".rs_calendar_week")
+    monthly_calendar.innerHTML = ""
+    const row_labels = this.config.texts["order"];
+    const show_row = this.config.options["monthly"]["show_week"];
+    const cell_str = this.config.texts["days_first_letter"];
+
+    const iterable = [1, 2, 3, 4, 5, -1]
+    for (let index = 0; index < iterable.length; index++) {
+      const num = iterable[index];
+      if (show_row[index]) {
+        const el = document.createElement("span")
+        el.innerText = row_labels[index]
+        monthly_calendar.appendChild(el);
+        for (let i = this.config.texts["first_day_of_week"], day_of_week = i, end = 7 + this.config.texts["first_day_of_week"], asc = this.config.texts["first_day_of_week"] <= end; asc ? i < end : i > end; asc ? i++ : i--, day_of_week = i) {
+          day_of_week = day_of_week % 7;
+          const day_link = document.createElement("a")
+          day_link.innerText = cell_str[day_of_week]
+          day_link.setAttribute("day", day_of_week);
+          day_link.setAttribute("instance", num);
+          monthly_calendar.appendChild(day_link);
+        };
+      }
+    };
+
+    Object.entries(this.current_rule.hash.validations.day_of_week).forEach(([key, value]) => {
+      Array.from(value).forEach((instance, index) => {
+        section.querySelector(`a[day='${key}'][instance='${instance}']`).classList.add("selected")
+      })
+    })
+
+    off(monthly_calendar, "click tap")
+    on(monthly_calendar, "click tap", "a", this.weekOfMonthChanged)
+  }
+
+  toggle_month_view() {
+    const week_mode = this.content.querySelector(".monthly_rule_type_week").checked
+    if (week_mode) {
+      this.content.querySelector(".rs_calendar_week").style.display = "block"
+      this.content.querySelector(".rs_calendar_day").style.display = "none"
+    } else {
+      this.content.querySelector(".rs_calendar_week").style.display = "none"
+      this.content.querySelector(".rs_calendar_day").style.display = "block"
+    }
+  }
+
+// ========================= Change callbacks ===============================
+
+  freqChanged() {
+    if (!isPlainObject(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;
+    this.current_rule.hash.until = null;
+    this.current_rule.hash.count = null;
+    this.current_rule.hash.validations = null;
+    this.content.querySelectorAll(".freq_option_section").forEach(el => el.style.display = 'none')
+    this.content.querySelector("input[type=radio], input[type=checkbox]").checked = false
+    switch (this.freq_select.value) {
+      case "Weekly":
+        this.current_rule.hash.rule_type = "IceCube::WeeklyRule";
+        this.current_rule.str = this.config.texts["weekly"];
+        this.initWeeklyOptions();
+        break
+      case "Monthly":
+        this.current_rule.hash.rule_type = "IceCube::MonthlyRule";
+        this.current_rule.str = this.config.texts["monthly"];
+        this.initMonthlyOptions();
+        break
+      case "Yearly":
+        this.current_rule.hash.rule_type = "IceCube::YearlyRule";
+        this.current_rule.str = this.config.texts["yearly"];
+        this.initYearlyOptions();
+        break
+      default:
+        this.current_rule.hash.rule_type = "IceCube::DailyRule";
+        this.current_rule.str = this.config.texts["daily"];
+        this.initDailyOptions();
+    };
+    this.summaryUpdate();
+  }
+
+  intervalChanged(event) {
+    this.current_rule.str = null;
+    if (!this.current_rule.hash) { this.current_rule.hash = {} };
+    this.current_rule.hash.interval = parseInt(event.currentTarget.value);
+    if ((this.current_rule.hash.interval < 1) || isNaN(this.current_rule.hash.interval)) {
+      this.current_rule.hash.interval = 1;
+    }
+    this.summaryUpdate();
+  }
+
+  daysChanged(event) {
+    event.target.classList.toggle("selected");
+    this.current_rule.str = null;
+    if (!this.current_rule.hash) { this.current_rule.hash = {} };
+    this.current_rule.hash.validations = {};
+    const raw_days = Array.from(this.content.querySelectorAll(".day_holder a.selected"))
+      .map(el => parseInt(el.dataset.value))
+    this.current_rule.hash.validations.day = raw_days
+    this.summaryUpdate();
+    return false;
+  }
+
+  dateOfMonthChanged(event) {
+    event.target.classList.toggle("selected");
+    this.current_rule.str = null;
+    if (!this.current_rule.hash) { this.current_rule.hash = {} };
+    this.current_rule.hash.validations = {};
+    const raw_days = Array.from(this.content.querySelectorAll(".monthly_options .rs_calendar_day a.selected"))
+      .map(el => {
+        return el.innerText === this.config.texts["last_day"] ? -1 : parseInt(el.innerText)
+      })
+    this.current_rule.hash.validations.day_of_week = {};
+    this.current_rule.hash.validations.day_of_month = raw_days;
+    this.summaryUpdate();
+    return false;
+  }
+
+  weekOfMonthChanged(event) {
+    event.target.classList.toggle("selected");
+    this.current_rule.str = null;
+    if (!this.current_rule.hash) { this.current_rule.hash = {} };
+    this.current_rule.hash.validations = {};
+    this.current_rule.hash.validations.day_of_month = [];
+    this.current_rule.hash.validations.day_of_week = {};
+    this.content.querySelectorAll(".monthly_options .rs_calendar_week a.selected")
+      .forEach((elm, index) => {
+        const day = parseInt(elm.getAttribute("day"));
+        const instance = parseInt(elm.getAttribute("instance"));
+        if (!this.current_rule.hash.validations.day_of_week[day]) { this.current_rule.hash.validations.day_of_week[day] = [] };
+        return this.current_rule.hash.validations.day_of_week[day].push(instance);
+      })
+    this.summaryUpdate();
+    return false;
+  }
+
+// ========================= Change callbacks ===============================
+
+  template() {
+    let str = `\
+    <div class='rs_dialog_holder'> \
+      <div class='rs_dialog'> \
+        <div class='rs_dialog_content'> \
+          <h1>${this.config.texts["repeat"]} <a href='javascript:void(0)' title='${this.config.texts["cancel"]}' alt='${this.config.texts["cancel"]}'></a> </h1> \
+          <p class='frequency-select-wrapper'> \
+            <label for='rs_frequency'>${this.config.texts["frequency"]}:</label> \
+            <select data-wrapper-class='ui-recurring-select' id='rs_frequency' class='rs_frequency' name='rs_frequency'> \
+              <option value='Daily'>${this.config.texts["daily"]}</option> \
+              <option value='Weekly'>${this.config.texts["weekly"]}</option> \
+              <option value='Monthly'>${this.config.texts["monthly"]}</option> \
+              <option value='Yearly'>${this.config.texts["yearly"]}</option> \
+            </select> \
+          </p> \
+          \
+          <div class='daily_options freq_option_section'> \
+            <p> \
+              ${this.config.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' /> \
+              ${this.config.texts["days"]} \
+            </p> \
+          </div> \
+          <div class='weekly_options freq_option_section'> \
+            <p> \
+              ${this.config.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' /> \
+              ${this.config.texts["weeks_on"]}: \
+            </p> \
+            <div class='day_holder'>\
+              `;
+              for (let i = this.config.texts["first_day_of_week"], day_of_week = i, end = 7 + this.config.texts["first_day_of_week"], asc = this.config.texts["first_day_of_week"] <= end; asc ? i < end : i > end; asc ? i++ : i--, day_of_week = i) {
+                day_of_week = day_of_week % 7;
+                str += `<a href='#' data-value='${day_of_week}'>${this.config.texts["days_first_letter"][day_of_week]}</a>`;
+              };
+
+              str += `\
+            </div> \
+            <span style='clear:both; visibility:hidden; height:1px;'>.</span> \
+          </div> \
+          <div class='monthly_options freq_option_section'> \
+            <p> \
+              ${this.config.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' /> \
+              ${this.config.texts["months"]}: \
+            </p> \
+            <p class='monthly_rule_type'> \
+              <span><label for='monthly_rule_type_day'>${this.config.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'>${this.config.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> \
+              ${this.config.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' /> \
+              ${this.config.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='${this.config.texts["ok"]}' /> \
+            <input type='button' data-wrapper-class='ui-recurring-select' class='rs_cancel' value='${this.config.texts["cancel"]}' /> \
+          </div> \
+        </div> \
+      </div> \
+    </div>\
+    `;
+
+    return str;
+  }
+}
+
+RecurringSelectDialog.config = defaultConfig
+
+window.RecurringSelectDialog = RecurringSelectDialog