Replace hotwire with htmx
In the process, also improve the feedback from the import/add feed forms. I also replaced the frontend code to replace utc timestamps with local time strings with @hotwired/stimulus with vanilla js.
This commit is contained in:
@@ -1,9 +1,4 @@
|
||||
import { Application } from "@hotwired/stimulus";
|
||||
|
||||
import LocalTimeController from "./local_time_controller";
|
||||
|
||||
// import CSS so it gets named with a content hash that busts caches
|
||||
import "../css/styles.css";
|
||||
|
||||
window.Stimulus = Application.start();
|
||||
window.Stimulus.register("local-time", LocalTimeController);
|
||||
import "./localTimeController";
|
||||
|
||||
24
frontend/js/localTimeController.ts
Normal file
24
frontend/js/localTimeController.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
function convertTimeElements() {
|
||||
const timeElements = document.querySelectorAll('time.local-time');
|
||||
timeElements.forEach((element) => {
|
||||
const utcString = element.getAttribute("datetime");
|
||||
if (utcString) {
|
||||
const utcTime = new Date(utcString);
|
||||
element.textContent = utcTime.toLocaleDateString(window.navigator.language, {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
} else {
|
||||
console.error("Missing datetime attribute on time.local-time element", element);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
convertTimeElements();
|
||||
});
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', function() {
|
||||
convertTimeElements();
|
||||
});
|
||||
@@ -1,28 +0,0 @@
|
||||
import { Controller } from "@hotwired/stimulus";
|
||||
|
||||
// Replaces all UTC timestamps with time formated for the local timezone
|
||||
export default class extends Controller {
|
||||
connect() {
|
||||
this.renderLocalTime();
|
||||
}
|
||||
|
||||
renderLocalTime() {
|
||||
this.element.textContent = this.localTimeString;
|
||||
}
|
||||
|
||||
get localTimeString(): string {
|
||||
if (this.utcTime) {
|
||||
return this.utcTime.toLocaleDateString(window.navigator.language, {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
return "Unknown datetime"
|
||||
}
|
||||
|
||||
get utcTime(): Date | null {
|
||||
const utcString = this.element.getAttribute("datetime");
|
||||
return utcString ? new Date(utcString) : null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user