diff --git a/README.md b/README.md index 715c8e5..44e5bc0 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ * Weather * Bookmarks * Latest YouTube videos from specific channels +* Clock * Calendar * Stocks * iframe diff --git a/docs/configuration.md b/docs/configuration.md index a88f811..5e317a8 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -17,6 +17,7 @@ - [Repository](#repository) - [Bookmarks](#bookmarks) - [Calendar](#calendar) + - [Clock](#clock) - [Stocks](#stocks) - [Twitch Channels](#twitch-channels) - [Twitch Top Games](#twitch-top-games) @@ -34,6 +35,7 @@ pages: columns: - size: small widgets: + - type: clock - type: calendar - type: rss @@ -963,6 +965,19 @@ Whether to open the link in the same tab or a new one. Whether to hide the colored arrow on each link. +### Clock +Display a clock showing the current time. + +Example: + +```yaml +- type: clock +``` + +Preview: + +![](images/clock-widget-preview.png) + ### Calendar Display a calendar. diff --git a/docs/images/clock-widget-preview.png b/docs/images/clock-widget-preview.png new file mode 100644 index 0000000..346a6ed Binary files /dev/null and b/docs/images/clock-widget-preview.png differ diff --git a/internal/assets/static/main.js b/internal/assets/static/main.js index fcc2043..e5287c0 100644 --- a/internal/assets/static/main.js +++ b/internal/assets/static/main.js @@ -341,6 +341,20 @@ function afterContentReady(callback) { contentReadyCallbacks.push(callback); } +function updateClocks(elements, formatter) { + const currentDate = new Date(); + for (const elem of elements) { + elem.textContent = formatter.format(currentDate); + } +} + +function setupClocks() { + const clockFormatter = new Intl.DateTimeFormat(undefined, {minute: "numeric", hour: "numeric"}); + const elements = document.getElementsByClassName("glance-clock"); + updateClocks(elements, clockFormatter) + setInterval(() => {updateClocks(elements, clockFormatter)}, 1000); +} + async function setupPage() { const pageElement = document.getElementById("page"); const pageContentElement = document.getElementById("page-content"); @@ -349,6 +363,7 @@ async function setupPage() { pageContentElement.innerHTML = pageContent; try { + setupClocks() setupCarousels(); setupCollapsibleLists(); setupCollapsibleGrids(); diff --git a/internal/assets/templates.go b/internal/assets/templates.go index b8aa6ae..8dff7c0 100644 --- a/internal/assets/templates.go +++ b/internal/assets/templates.go @@ -15,6 +15,7 @@ var ( PageTemplate = compileTemplate("page.html", "document.html", "page-style-overrides.gotmpl") PageContentTemplate = compileTemplate("content.html") CalendarTemplate = compileTemplate("calendar.html", "widget-base.html") + ClockTemplate = compileTemplate("clock.html", "widget-base.html") BookmarksTemplate = compileTemplate("bookmarks.html", "widget-base.html") IFrameTemplate = compileTemplate("iframe.html", "widget-base.html") WeatherTemplate = compileTemplate("weather.html", "widget-base.html") diff --git a/internal/assets/templates/clock.html b/internal/assets/templates/clock.html new file mode 100644 index 0000000..5116782 --- /dev/null +++ b/internal/assets/templates/clock.html @@ -0,0 +1,5 @@ +{{ template "widget-base.html" . }} + +{{ define "widget-content" }} +
+{{ end }} diff --git a/internal/widget/clock.go b/internal/widget/clock.go new file mode 100644 index 0000000..efb2c8e --- /dev/null +++ b/internal/widget/clock.go @@ -0,0 +1,23 @@ +package widget + +import ( + "context" + "html/template" + + "github.com/glanceapp/glance/internal/assets" +) + +type Clock struct { + widgetBase `yaml:",inline"` +} + +func (widget *Clock) Initialize() error { + widget.withTitle("Clock").withError(nil) + return nil +} + +func (widget *Clock) Update(ctx context.Context) {} + +func (widget *Clock) Render() template.HTML { + return widget.render(widget, assets.ClockTemplate) +} diff --git a/internal/widget/widget.go b/internal/widget/widget.go index 3707b7e..934a92e 100644 --- a/internal/widget/widget.go +++ b/internal/widget/widget.go @@ -19,6 +19,8 @@ func New(widgetType string) (Widget, error) { switch widgetType { case "calendar": return &Calendar{}, nil + case "clock": + return &Clock{}, nil case "weather": return &Weather{}, nil case "bookmarks":