kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-08-21 04:45:17 +00:00
Code Issues Projects Releases Wiki Activity

Added a week section to the clock module

Browse Source
This commit is contained in:
Johan Hammar
2017-03-28 22:02:30 +02:00
parent e3456cb74f
commit f4509e24c6
6 changed files with 75 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
modules/default/clock/README.md
View File

@@ -30,6 +30,7 @@ The following properties can be configured:
| `showPeriodUpper` | Show the period (AM/PM) with 12 hour format as uppercase. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
| `clockBold` | Remove the colon and bold the minutes to make a more modern look. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
| `showDate` | Turn off or on the Date section. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
| `showWeek` | Turn off or on the Week section. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
| `dateFormat` | Configure the date format as you like. <br><br> **Possible values:** [Docs](http://momentjs.com/docs/#/displaying/format/) <br> **Default value:** `"dddd, LL"`
| `displayType` | Display a digital clock, analog clock, or both together. <br><br> **Possible values:** `digital`, `analog`, or `both` <br> **Default value:** `digital`
| `analogSize` | **Specific to the analog clock.** Defines how large the analog display is. <br><br> **Possible values:** A positive number of pixels` <br> **Default value:** `200px`

18
modules/default/clock/clock.js
View File

@@ -16,6 +16,7 @@ Module.register("clock",{
showPeriodUpper: false,
clockBold: false,
showDate: true,
showWeek: false,
dateFormat: "dddd, LL",
/* specific to the analog clock */
@@ -61,10 +62,12 @@ Module.register("clock",{
var timeWrapper = document.createElement("div");
var secondsWrapper = document.createElement("sup");
var periodWrapper = document.createElement("span");
var weekWrapper = document.createElement("div")
// Style Wrappers
dateWrapper.className = "date normal medium";
timeWrapper.className = "time bright large light";
secondsWrapper.className = "dimmed";
weekWrapper.className = "week dimmed medium"
// Set content of wrappers.
// The moment().format("h") method has a bug on the Raspberry Pi.
@@ -90,6 +93,9 @@ Module.register("clock",{
if(this.config.showDate){
dateWrapper.innerHTML = now.format(this.config.dateFormat);
}
if (this.config.showWeek) {
weekWrapper.innerHTML = this.translate("WEEK") + " " + now.week();
}
timeWrapper.innerHTML = timeString;
secondsWrapper.innerHTML = now.format("ss");
if (this.config.showPeriodUpper) {
@@ -172,16 +178,25 @@ Module.register("clock",{
// Display only a digital clock
wrapper.appendChild(dateWrapper);
wrapper.appendChild(timeWrapper);
wrapper.appendChild(weekWrapper);
} else if (this.config.displayType === "analog") {
// Display only an analog clock
dateWrapper.style.textAlign = "center";
dateWrapper.style.paddingBottom = "15px";
if (this.config.showWeek) {
weekWrapper.style.paddingBottom = "15px";
} else {
dateWrapper.style.paddingBottom = "15px";
}
if (this.config.analogShowDate === "top") {
wrapper.appendChild(dateWrapper);
wrapper.appendChild(weekWrapper);
wrapper.appendChild(clockCircle);
} else if (this.config.analogShowDate === "bottom") {
wrapper.appendChild(clockCircle);
wrapper.appendChild(dateWrapper);
wrapper.appendChild(weekWrapper);
} else {
wrapper.appendChild(clockCircle);
}
@@ -198,6 +213,7 @@ Module.register("clock",{
digitalWrapper.style.cssFloat = "none";
digitalWrapper.appendChild(dateWrapper);
digitalWrapper.appendChild(timeWrapper);
digitalWrapper.appendChild(weekWrapper);
var appendClocks = function(condition, pos1, pos2) {
var padding = [0,0,0,0];