diff --git a/extensions/web-time/manifest.json b/extensions/web-time/manifest.json new file mode 100644 index 0000000..9bed4b7 --- /dev/null +++ b/extensions/web-time/manifest.json @@ -0,0 +1,7 @@ +{ + "name": "Web Time", + "description": "Display date and time", + "dependencies": ["web-base"], + "version": "1.0", + "script": "../web-base/web-ext.lua" +} \ No newline at end of file diff --git a/extensions/web-time/web-time.js b/extensions/web-time/web-time.js new file mode 100644 index 0000000..82fd375 --- /dev/null +++ b/extensions/web-time/web-time.js @@ -0,0 +1,47 @@ +define(['./web-time.xml'], function(timeTemplate) { + + var timeVue = new Vue({ + template: timeTemplate, + data: { + date: '', + time: '', + timer: null + }, + methods: { + onShow: function() { + var self = this; + var date = new Date(); + self.refresh(date); + var ms = 1000 - (date.getTime() % 1000); + setTimeout(function() { + self.refresh(new Date()); + self.registerTimer(1000); + }, ms); + }, + onHide: function() { + this.clearTimer(); + }, + refresh: function(date) { + //console.info('refresh at ' + date.toISOString()); + this.date = date.toLocaleDateString(undefined, {dateStyle: 'full'}); + this.time = date.toLocaleTimeString(undefined, {timeStyle: 'short'}); + }, + registerTimer: function(ms) { + var self = this; + this.clearTimer(); + this.timer = setInterval(function() { + self.refresh(new Date()); + }, ms || 60000); + }, + clearTimer: function() { + if (this.timer !== null) { + clearInterval(this.timer); + this.timer = null; + } + } + } + }); + + addPageComponent(timeVue, 'fa-clock'); + +}); diff --git a/extensions/web-time/web-time.xml b/extensions/web-time/web-time.xml new file mode 100644 index 0000000..3f009c6 --- /dev/null +++ b/extensions/web-time/web-time.xml @@ -0,0 +1,8 @@ + + +
+

{{ date }}

+

{{ time }}

+
+
+
\ No newline at end of file