shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added components, authentication and authorization

Browse Source
This commit is contained in:
shaamilahmed
2026-05-04 16:53:19 +05:00
parent 493cd71d17
commit fb1cb8e834
37 changed files with 3545 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Htmx.ApiDemo/wwwroot/js/components.js
+458
View File
@@ -0,0 +1,458 @@
/* ─────────────────────────────────────────────────────────────────────────
* components.js – client-side logic for htmx server-rendered components
* ───────────────────────────────────────────────────────────────────────── */
// ── Calendar ──────────────────────────────────────────────────────────────
(function () {
var MONTHS = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
function renderCalendar(root) {
var view = root.dataset.view || 'days';
var year = parseInt(root.dataset.year, 10);
var month = parseInt(root.dataset.month, 10);
var selD = parseInt(root.dataset.selDay, 10);
var selM = parseInt(root.dataset.selMonth, 10);
var selY = parseInt(root.dataset.selYear, 10);
var labelBtn = root.querySelector('.cal-month-label');
var grid = root.querySelector('.cal-grid');
var dowRow = root.querySelector('.cal-dow-row');
// ── Update header label based on view ──
if (view === 'days') {
labelBtn.textContent = MONTHS[month] + ' ' + year;
} else if (view === 'months') {
labelBtn.textContent = year;
} else { // years
var ds = Math.floor(year / 12) * 12;
labelBtn.textContent = ds + ' – ' + (ds + 11);
}
// Show DOW row only in day view
if (dowRow) dowRow.style.display = view === 'days' ? '' : 'none';
grid.innerHTML = '';
if (view === 'days') {
grid.style.gridTemplateColumns = ''; // let CSS class (grid-cols-7) take over
var firstDay = new Date(year, month, 1).getDay();
var daysInMonth = new Date(year, month + 1, 0).getDate();
for (var i = 0; i < firstDay; i++) {
grid.appendChild(document.createElement('div'));
}
for (var d = 1; d <= daysInMonth; d++) {
var btn = document.createElement('button');
btn.type = 'button';
btn.textContent = d;
btn.className = 'cal-day';
if (d === selD && month === selM && year === selY) {
btn.classList.add('cal-day-selected');
}
btn.dataset.date = year + '-'
+ String(month + 1).padStart(2, '0') + '-'
+ String(d).padStart(2, '0');
btn.addEventListener('click', (function (b, r) {
return function () {
var parts = b.dataset.date.split('-');
r.dataset.selYear = parts[0];
r.dataset.selMonth = parseInt(parts[1], 10) - 1;
r.dataset.selDay = parseInt(parts[2], 10);
r.querySelectorAll('.cal-day').forEach(function (el) {
el.classList.remove('cal-day-selected');
});
b.classList.add('cal-day-selected');
r.querySelector('.cal-hidden-input').value = b.dataset.date;
r.dispatchEvent(new CustomEvent('calendarChange', {
detail: { date: b.dataset.date },
bubbles: true
}));
};
})(btn, root));
grid.appendChild(btn);
}
} else if (view === 'months') {
grid.style.gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
MONTHS.forEach(function (name, i) {
var btn = document.createElement('button');
btn.type = 'button';
btn.textContent = name.slice(0, 3);
btn.className = 'cal-view-btn' + (i === month ? ' cal-view-btn-selected' : '');
btn.addEventListener('click', function () {
root.dataset.month = i;
root.dataset.view = 'days';
renderCalendar(root);
});
grid.appendChild(btn);
});
} else { // years
var decadeStart = Math.floor(year / 12) * 12;
grid.style.gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
for (var yi = 0; yi < 12; yi++) {
(function (y) {
var btn = document.createElement('button');
btn.type = 'button';
btn.textContent = y;
btn.className = 'cal-view-btn' + (y === year ? ' cal-view-btn-selected' : '');
btn.addEventListener('click', function () {
root.dataset.year = y;
root.dataset.view = 'months';
renderCalendar(root);
});
grid.appendChild(btn);
})(decadeStart + yi);
}
}
}
function initCalendar(root) {
root.querySelector('.cal-prev').addEventListener('click', function () {
var view = root.dataset.view || 'days';
var m = parseInt(root.dataset.month, 10);
var y = parseInt(root.dataset.year, 10);
if (view === 'days') {
if (m === 0) { m = 11; y--; } else { m--; }
root.dataset.month = m;
root.dataset.year = y;
} else if (view === 'months') {
root.dataset.year = y - 1;
} else { // years
root.dataset.year = Math.floor(y / 12) * 12 - 12;
}
renderCalendar(root);
});
root.querySelector('.cal-next').addEventListener('click', function () {
var view = root.dataset.view || 'days';
var m = parseInt(root.dataset.month, 10);
var y = parseInt(root.dataset.year, 10);
if (view === 'days') {
if (m === 11) { m = 0; y++; } else { m++; }
root.dataset.month = m;
root.dataset.year = y;
} else if (view === 'months') {
root.dataset.year = y + 1;
} else { // years
root.dataset.year = Math.floor(y / 12) * 12 + 12;
}
renderCalendar(root);
});
root.querySelector('.cal-month-label').addEventListener('click', function () {
var view = root.dataset.view || 'days';
if (view === 'days') root.dataset.view = 'months';
else if (view === 'months') root.dataset.view = 'years';
// already at years — nothing deeper
renderCalendar(root);
});
renderCalendar(root);
}
// Initialise all calendars on page load, and again after any htmx swap
function initAll() {
document.querySelectorAll('.calendar-root').forEach(initCalendar);
}
document.addEventListener('DOMContentLoaded', initAll);
document.addEventListener('htmx:afterSwap', initAll);
})();
// ── CalendarRange ─────────────────────────────────────────────────────────
(function () {
var MONTHS = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
function cmpDate(a, b) { return a < b ? -1 : a > b ? 1 : 0; }
function isBetween(d, start, end) {
return cmpDate(d, start) > 0 && cmpDate(d, end) < 0;
}
function toDateStr(year, month, day) {
return year + '-'
+ String(month + 1).padStart(2, '0') + '-'
+ String(day).padStart(2, '0');
}
function updateLabel(root) {
var lbl = root.querySelector('.calr-label');
if (!lbl) return;
var start = root.dataset.start;
var end = root.dataset.end;
if (start && end) { lbl.textContent = start + ' → ' + end; return; }
if (start) { lbl.textContent = start + ' → pick end date'; return; }
lbl.textContent = '';
}
// Only updates CSS classes on already-rendered buttons — no DOM destruction.
function updateHoverClasses(root, hoverDate) {
var start = root.dataset.start;
var end = root.dataset.end;
var rangeEnd = (start && !end && hoverDate && cmpDate(hoverDate, start) >= 0)
? hoverDate : end;
root.querySelectorAll('.calr-day').forEach(function (btn) {
var ds = btn.dataset.date;
var isStart = !!(start && ds === start);
var isEnd = !!(end && ds === end);
var isHoverEnd = !!(!end && start && hoverDate && ds === hoverDate
&& cmpDate(hoverDate, start) > 0);
var isMid = !!(start && rangeEnd && isBetween(ds, start, rangeEnd));
btn.classList.remove('calr-day-start', 'calr-day-end', 'calr-day-mid', 'calr-day-plain');
if (isStart) btn.classList.add('calr-day-start');
if (isEnd || isHoverEnd) btn.classList.add('calr-day-end');
if (isMid) btn.classList.add('calr-day-mid');
if (!isStart && !isEnd && !isHoverEnd && !isMid) btn.classList.add('calr-day-plain');
});
}
// Full re-render of the grid. Called on mount, click, and view changes.
function renderRange(root) {
var view = root.dataset.view || 'days';
var year = parseInt(root.dataset.year, 10);
var month = parseInt(root.dataset.month, 10);
var start = root.dataset.start || '';
var end = root.dataset.end || '';
var labelBtn = root.querySelector('.calr-month-label');
var grid = root.querySelector('.calr-grid');
var dowRow = root.querySelector('.cal-dow-row');
// ── Update header label ──
if (view === 'days') {
labelBtn.textContent = MONTHS[month] + ' ' + year;
} else if (view === 'months') {
labelBtn.textContent = year;
} else { // years
var ds = Math.floor(year / 12) * 12;
labelBtn.textContent = ds + ' – ' + (ds + 11);
}
if (dowRow) dowRow.style.display = view === 'days' ? '' : 'none';
grid.innerHTML = '';
// ── Clear event handlers (will be reassigned per view below) ──
grid.onmouseover = null;
grid.onmouseleave = null;
if (view === 'days') {
grid.style.gridTemplateColumns = '';
var firstDay = new Date(year, month, 1).getDay();
var daysInMonth = new Date(year, month + 1, 0).getDate();
for (var i = 0; i < firstDay; i++) {
grid.appendChild(document.createElement('div'));
}
for (var d = 1; d <= daysInMonth; d++) {
var dateStr = toDateStr(year, month, d);
var btn = document.createElement('button');
btn.type = 'button';
btn.textContent = d;
btn.dataset.date = dateStr;
var isStart = start && dateStr === start;
var isEnd = end && dateStr === end;
var isMid = start && end && isBetween(dateStr, start, end);
var cls = 'calr-day';
if (isStart) cls += ' calr-day-start';
else if (isEnd) cls += ' calr-day-end';
else if (isMid) cls += ' calr-day-mid';
else cls += ' calr-day-plain';
btn.className = cls;
grid.appendChild(btn);
}
// Click: update state → full re-render
grid.onclick = function (e) {
var btn = e.target.closest('.calr-day');
if (!btn) return;
var ds = btn.dataset.date;
var s = root.dataset.start;
var en = root.dataset.end;
if (!s || (s && en)) {
root.dataset.start = ds;
root.dataset.end = '';
} else {
if (cmpDate(ds, s) > 0) {
root.dataset.end = ds;
} else if (cmpDate(ds, s) < 0) {
root.dataset.start = ds;
root.dataset.end = '';
} else {
root.dataset.start = '';
root.dataset.end = '';
}
}
root.querySelector('.calr-hidden-start').value = root.dataset.start;
root.querySelector('.calr-hidden-end').value = root.dataset.end;
root.dispatchEvent(new CustomEvent('rangeChange', {
detail: { start: root.dataset.start, end: root.dataset.end },
bubbles: true
}));
renderRange(root);
updateLabel(root);
};
grid.onmouseover = function (e) {
var btn = e.target.closest('.calr-day');
if (!btn) return;
updateHoverClasses(root, btn.dataset.date);
};
grid.onmouseleave = function () {
updateHoverClasses(root, null);
};
} else if (view === 'months') {
grid.style.gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
MONTHS.forEach(function (name, i) {
var btn = document.createElement('button');
btn.type = 'button';
btn.textContent = name.slice(0, 3);
btn.className = 'cal-view-btn' + (i === month ? ' cal-view-btn-selected' : '');
btn.addEventListener('click', function () {
root.dataset.month = i;
root.dataset.view = 'days';
renderRange(root);
});
grid.appendChild(btn);
});
} else { // years
var decadeStart = Math.floor(year / 12) * 12;
grid.style.gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
for (var yi = 0; yi < 12; yi++) {
(function (y) {
var btn = document.createElement('button');
btn.type = 'button';
btn.textContent = y;
btn.className = 'cal-view-btn' + (y === year ? ' cal-view-btn-selected' : '');
btn.addEventListener('click', function () {
root.dataset.year = y;
root.dataset.view = 'months';
renderRange(root);
});
grid.appendChild(btn);
})(decadeStart + yi);
}
}
}
function initCalendarRange(root) {
root.querySelector('.calr-prev').addEventListener('click', function () {
var view = root.dataset.view || 'days';
var m = parseInt(root.dataset.month, 10);
var y = parseInt(root.dataset.year, 10);
if (view === 'days') {
if (m === 0) { m = 11; y--; } else { m--; }
root.dataset.month = m;
root.dataset.year = y;
} else if (view === 'months') {
root.dataset.year = y - 1;
} else { // years
root.dataset.year = Math.floor(y / 12) * 12 - 12;
}
renderRange(root);
});
root.querySelector('.calr-next').addEventListener('click', function () {
var view = root.dataset.view || 'days';
var m = parseInt(root.dataset.month, 10);
var y = parseInt(root.dataset.year, 10);
if (view === 'days') {
if (m === 11) { m = 0; y++; } else { m++; }
root.dataset.month = m;
root.dataset.year = y;
} else if (view === 'months') {
root.dataset.year = y + 1;
} else { // years
root.dataset.year = Math.floor(y / 12) * 12 + 12;
}
renderRange(root);
});
root.querySelector('.calr-month-label').addEventListener('click', function () {
var view = root.dataset.view || 'days';
if (view === 'days') root.dataset.view = 'months';
else if (view === 'months') root.dataset.view = 'years';
renderRange(root);
});
renderRange(root);
updateLabel(root);
}
function initAll() {
document.querySelectorAll('.calr-root').forEach(initCalendarRange);
}
document.addEventListener('DOMContentLoaded', initAll);
document.addEventListener('htmx:afterSwap', initAll);
})();
// ── TimePicker ────────────────────────────────────────────────────────────
(function () {
function syncTime(root) {
var h = parseInt(root.querySelector('.timepicker-hour').value, 10) || 0;
var m = parseInt(root.querySelector('.timepicker-minute').value, 10) || 0;
var use12h = root.dataset.use12h === 'true';
var h24 = h;
if (use12h) {
var ampmEl = root.querySelector('.timepicker-ampm');
var ampm = ampmEl ? ampmEl.value : 'AM';
if (ampm === 'PM') { h24 = h === 12 ? 12 : h + 12; }
else { h24 = h === 12 ? 0 : h; }
}
root.querySelector('.timepicker-hidden').value =
String(h24).padStart(2, '0') + ':' + String(m).padStart(2, '0');
}
function initTimePicker(root) {
var sync = syncTime.bind(null, root);
root.querySelector('.timepicker-hour').addEventListener('input', sync);
root.querySelector('.timepicker-minute').addEventListener('input', sync);
var ampmEl = root.querySelector('.timepicker-ampm');
if (ampmEl) ampmEl.addEventListener('change', sync);
sync();
}
function initAll() {
document.querySelectorAll('.timepicker-root').forEach(initTimePicker);
}
document.addEventListener('DOMContentLoaded', initAll);
document.addEventListener('htmx:afterSwap', initAll);
})();