OrganonTweaks: enhance recurrence dialog -- Yes/No radios + [+7] factor button (JS); added asset , v1.3.0
This commit is contained in:
94
Asset/js/enhance-recurrence.js
Normal file
94
Asset/js/enhance-recurrence.js
Normal file
@@ -0,0 +1,94 @@
|
||||
/*
|
||||
* OrganonTweaks -- enhance Kanboard's native "Edit recurrence" dialog.
|
||||
*
|
||||
* That template (task_recurrence/edit.php) has no hook, so we transform the form in JS when
|
||||
* the modal opens:
|
||||
* 1. Replace the "Generate recurrent task" Yes/No dropdown with two radio buttons (one
|
||||
* click instead of open + select). The original <select> is kept, hidden, and stays in
|
||||
* sync, so the form still submits recurrence_status normally.
|
||||
* 2. Add a small [+7] button next to the "Factor" input that adds 7 (a week of days).
|
||||
*
|
||||
* Detection: the modal is injected into #modal-box dynamically, so we watch the document for
|
||||
* an un-enhanced recurrence form appearing. Loaded only when the setting is enabled.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function enhanceStatus(select) {
|
||||
var group = document.createElement("span");
|
||||
group.className = "ot-recurrence-status";
|
||||
|
||||
for (var i = 0; i < select.options.length; i++) {
|
||||
var opt = select.options[i];
|
||||
|
||||
var label = document.createElement("label");
|
||||
label.style.marginRight = "14px";
|
||||
label.style.cursor = "pointer";
|
||||
|
||||
var radio = document.createElement("input");
|
||||
radio.type = "radio";
|
||||
radio.name = "ot-recurrence-status";
|
||||
radio.value = opt.value;
|
||||
radio.checked = opt.value === select.value;
|
||||
radio.style.marginRight = "4px";
|
||||
radio.addEventListener("change", function () {
|
||||
if (this.checked) {
|
||||
select.value = this.value;
|
||||
select.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}
|
||||
});
|
||||
|
||||
label.appendChild(radio);
|
||||
label.appendChild(document.createTextNode(opt.text));
|
||||
group.appendChild(label);
|
||||
}
|
||||
|
||||
select.style.display = "none";
|
||||
select.parentNode.insertBefore(group, select.nextSibling);
|
||||
}
|
||||
|
||||
function enhanceFactor(input) {
|
||||
var btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "btn";
|
||||
btn.textContent = "+7";
|
||||
btn.title = "Add 7 (one week of days)";
|
||||
btn.style.marginLeft = "6px";
|
||||
btn.addEventListener("click", function () {
|
||||
input.value = (parseInt(input.value, 10) || 0) + 7;
|
||||
input.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
});
|
||||
|
||||
input.parentNode.insertBefore(btn, input.nextSibling);
|
||||
}
|
||||
|
||||
function enhance() {
|
||||
var select = document.querySelector('select[name="recurrence_status"]:not([data-ot-recurrence])');
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
|
||||
select.setAttribute("data-ot-recurrence", "1");
|
||||
enhanceStatus(select);
|
||||
|
||||
var factor = document.querySelector('input[name="recurrence_factor"]:not([data-ot-recurrence])');
|
||||
if (factor) {
|
||||
factor.setAttribute("data-ot-recurrence", "1");
|
||||
enhanceFactor(factor);
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
enhance();
|
||||
|
||||
if (window.MutationObserver) {
|
||||
new MutationObserver(enhance).observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user