Skip to content

Commit

Permalink
add sub clocks (#222)
Browse files Browse the repository at this point in the history
  • Loading branch information
@laedit
laedit authored Aug 14, 2023
1 parent 225a8af commit e486f8c
Show file tree
Hide file tree
Showing 8 changed files with 237 additions and 19 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

### Added

- Additional clocks (Thanks [Jouke van der Maas](https://github.com/joukevandermaas)) [#213](https://github.com/laedit/new-tab-moment/issues/213)

## [0.12.1] - 2023-06-25

### Changed
Expand Down
15 changes: 15 additions & 0 deletions src/css/moment.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,21 @@ a {
display: none;
}

#subClocks {
font-weight: var(--font-weight-weather, 100);
font-size: .10em;
display: none;
margin: 20px 0;
}

#subClocks > div {
display: none;
}

#subClocks > div > div:nth-child(1) {
font-size: 1.5em;
}

@media only screen and (max-width: 700px) {
body {
font-size: 6em;
Expand Down
17 changes: 17 additions & 0 deletions src/moment.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,23 @@
<span id="date">
</span>
</section>
<section id="subClocks">
<div id="subClock1">
<div id="subClock1Time"></div>
<div id="subClock1TimeZone"></div>
<div id="subClock1Name"></div>
</div>
<div id="subClock2">
<div id="subClock2Time"></div>
<div id="subClock2TimeZone"></div>
<div id="subClock2Name"></div>
</div>
<div id="subClock3">
<div id="subClock3Time"></div>
<div id="subClock3TimeZone"></div>
<div id="subClock3Name"></div>
</div>
</section>
<section>
<div id="loader"><span>.</span><span>.</span><span>.</span></div>
<div id="weather">
Expand Down
83 changes: 72 additions & 11 deletions src/moment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@ let elementsMap: Record<string, HTMLElement>;
let interval: number;

function refresh(settings: Settings, language: string): void {
var dateTimeParts = new Intl.DateTimeFormat(language, {
let dateTimeFormatOptions: Intl.DateTimeFormatOptions = {
year: "numeric", month: "long", day: "numeric",
hour: "numeric", minute: "numeric", second: "numeric",
hour12: settings.clock === "12"
}).formatToParts(new Date());
};
const currentDate = new Date();
const dateTimeParts = new Intl.DateTimeFormat(language, dateTimeFormatOptions).formatToParts(currentDate);

const useLeadingZero = settings.leadingZero && settings.clock === "12";
let hour = dateTimeParts.find(part => part.type == 'hour')?.value!;
if (settings.leadingZero && settings.clock === "12" && hour.length === 1) {
if (useLeadingZero && hour.length === 1) {
hour = "0" + hour;
}
const timeText = settings.timePattern.replace("H", hour)
Expand All @@ -21,6 +24,21 @@ function refresh(settings: Settings, language: string): void {
.replace("Y", dateTimeParts.find(part => part.type == 'year')?.value!)
.replace("M", dateTimeParts.find(part => part.type == 'month')?.value!);
setValue(elementsMap.date, dateText);

// set sub clocks
if (settings.subClocks) {
for (let index = 0; index < settings.subClocks.length; index++) {
const subClock = settings.subClocks[index];

dateTimeFormatOptions.timeZone = subClock.timeZone;
const subClockParts = new Intl.DateTimeFormat(language, dateTimeFormatOptions).formatToParts(currentDate);
let hour = subClockParts.find(part => part.type == 'hour')?.value!;
if (useLeadingZero && hour.length === 1) {
hour = "0" + hour;
}
setValue(elementsMap[`subClock${index + 1}Time`], `${hour}:${subClockParts.find(part => part.type == 'minute')?.value!}`);
}
}
}

async function displayWeather({ measurementUnits, location, displayIcon, activateDebugMode, displayHumidity, displayPressure, displayWind, useFeelsLikeTemperature }: Settings, language: string): Promise<void> {
Expand Down Expand Up @@ -201,18 +219,60 @@ async function load(): Promise<void> {
windGustText: document.getElementById("wind-gust-text")!,
gust: document.getElementById("gust")!,
error: document.getElementById("error")!,
subClocks: document.getElementById("subClocks")!,
subClock1: document.getElementById("subClock1")!,
subClock1Time: document.getElementById("subClock1Time")!,
subClock1TimeZone: document.getElementById("subClock1TimeZone")!,
subClock1Name: document.getElementById("subClock1Name")!,
subClock2: document.getElementById("subClock2")!,
subClock2Time: document.getElementById("subClock2Time")!,
subClock2TimeZone: document.getElementById("subClock2TimeZone")!,
subClock2Name: document.getElementById("subClock2Name")!,
subClock3: document.getElementById("subClock3")!,
subClock3Time: document.getElementById("subClock3Time")!,
subClock3TimeZone: document.getElementById("subClock3TimeZone")!,
subClock3Name: document.getElementById("subClock3Name")!,
};
}

// apply style settings
setStyle(userSettings);

displaySubClocks(userSettings);

// display cog icon
displayOptionIcon(userSettings);

startTime(userSettings, language);

// get weather
displayWeather(userSettings, language);
}

// display cog icon
function displaySubClocks(userSettings: Settings) {
if (userSettings.subClocks && userSettings.subClocks.length > 0) {
elementsMap.subClocks.style.display = "grid";
elementsMap.subClocks.style.gridTemplateColumns = `repeat(${userSettings.subClocks.length}, 1fr)`;

for (let index = 0; index < userSettings.subClocks.length; index++) {
const subClock = userSettings.subClocks[index];

elementsMap[`subClock${index + 1}`].style.display = "block";
setValue(elementsMap[`subClock${index + 1}TimeZone`], subClock.displayTimeZone ? subClock.timeZone : '');
setValue(elementsMap[`subClock${index + 1}Name`], subClock.name);
}

if (userSettings.subClocks.length < 3) {
for (let index = userSettings.subClocks.length + 1; index < 4; index++) {
elementsMap[`subClock${index}`].style.display = "none";
setValue(elementsMap[`subClock${index}TimeZone`], '');
setValue(elementsMap[`subClock${index}Name`], '');
}
}
}
}

function displayOptionIcon(userSettings: Settings) {
if (userSettings.displayOptionsButton) {
let optionsLink = document.createElement("a");
optionsLink.setAttribute('id', 'options');
Expand All @@ -235,19 +295,20 @@ function isBackgroundDark(settings: Settings): boolean {
case 'light': return false;
case 'system': return window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
}
var rgbRegex = /^rgb\(([0-9]{1,3}),[ +]?([0-9]{1,3}),[ +]?([0-9]{1,3})\)$/;
var rgbMatch = document.documentElement.style.backgroundColor.match(rgbRegex)!;
var r = parseFloat(rgbMatch[1]);
var g = parseFloat(rgbMatch[2]);
var b = parseFloat(rgbMatch[3]);
const rgbRegex = /^rgb\(([0-9]{1,3}),[ +]?([0-9]{1,3}),[ +]?([0-9]{1,3})\)$/;
const rgbMatch = document.documentElement.style.backgroundColor.match(rgbRegex)!;
const r = parseFloat(rgbMatch[1]);
const g = parseFloat(rgbMatch[2]);
const b = parseFloat(rgbMatch[3]);

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
return luma < 128;
}

async function getSettings() {
async function getSettings(): Promise<Settings> {
return browser.storage.sync.get(defaultSettings);
}

browser.storage.onChanged.addListener(async () => load());

document.addEventListener("DOMContentLoaded", async () => load());
60 changes: 56 additions & 4 deletions src/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,63 @@ <h3>Appearance</h3>
</label>
</div>
</section>
<section>
<div class="input-group">
<h4>Additional clocks:</h4>
<h3>First</h3>
<label>
Time zone:
<select id="subClock1TimeZone">
<option value=""></option>
</select>
</label>
<label>
Display time zone:
<input type="checkbox" id="subClock1DisplayTimeZone" />
</label>
<label>
Name:
<input type="string" id="subClock1Name" />
</label>
<h3>Second</h3>
<label>
Time zone:
<select id="subClock2TimeZone">
<option value=""></option>
</select>
</label>
<label>
Display time zone:
<input type="checkbox" id="subClock2DisplayTimeZone" />
</label>
<label>
Name:
<input type="string" id="subClock2Name" />
</label>
<h3>Third</h3>
<label>
Time zone:
<select id="subClock3TimeZone">
<option value=""></option>
</select>
</label>
<label>
Display time zone:
<input type="checkbox" id="subClock3DisplayTimeZone" />
</label>
<label>
Name:
<input type="string" id="subClock3Name" />
</label>
</div>
</section>
<section>
<div class="input-group">
<label>
Display options button:
<input type="checkbox" id="displayOptionsButton" />
</label>
</div>
</section>
<section>
<div class="input-group">
Expand All @@ -98,6 +149,7 @@ <h4>Additional weather infos:</h4>
Display wind:
<input type="checkbox" id="displayWind" />
</label>
</div>
</section>
</section>

Expand Down Expand Up @@ -168,11 +220,11 @@ <h3>Debug mode</h3>
</section>
</form>
<dialog id="saveErrorDialog">
<p id="errorDetails"></p>
<div>
<p id="errorDetails"></p>
<div>
<button id="closeBtn">Close</button>
</div>
</dialog>
</div>
</dialog>
<div id="credits">
<h1>Credits</h1>
<p>
Expand Down
61 changes: 60 additions & 1 deletion src/options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,40 @@ function saveOptions(e: Event): void {
displayPressure: getInputValue("displayPressure") as boolean,
displayHumidity: getInputValue("displayHumidity") as boolean,
displayWind: getInputValue("displayWind") as boolean,
useFeelsLikeTemperature: getInputValue("useFeelsLikeTemperature") as boolean
useFeelsLikeTemperature: getInputValue("useFeelsLikeTemperature") as boolean,
subClocks: getSubClocks()
};

browser.storage.sync.set(settings).catch(displayError);

e.preventDefault();
}

function getSubClocks(): SubClock[] {
let subClocks: SubClock[] = [];

for (let index = 1; index < 4; index++) {
let subClock = getSubClock(index);
if (subClock !== undefined) {
subClocks.push(subClock);
}
}

return subClocks;
}

function getSubClock(index: number): SubClock | undefined {
let subClockTimeZone = getInputValue(`subClock${index}TimeZone`) as string;
if (subClockTimeZone) {
return {
timeZone: subClockTimeZone,
displayTimeZone: getInputValue(`subClock${index}DisplayTimeZone`) as boolean,
name: getInputValue(`subClock${index}Name`) as string
};
}
return undefined;
}

function restoreOptions(): void {
browser.storage.sync.get(defaultSettings)
.then(settings => {
Expand All @@ -87,10 +113,43 @@ function restoreOptions(): void {
setInputValue("displayWind", settings.displayWind);
setInputValue("useFeelsLikeTemperature", settings.useFeelsLikeTemperature);
colorSchemeOnChange(document.getElementById("colorScheme") as HTMLSelectElement);
restoreSubClocks(settings.subClocks);
})
.catch(displayError);
}

function restoreSubClocks(subClocks: SubClock[] | undefined) {

for (let index = 1; index < 4; index++) {
const timeZonesSelect = document.getElementById(`subClock${index}TimeZone`) as HTMLSelectElement;
if (typeof Intl.supportedValuesOf === "undefined") {
// method is supported
let option = document.createElement("option");
option.innerText = "Please update your browser to use this";
timeZonesSelect.append(option)
}
else {
Intl.supportedValuesOf('timeZone').map((timeZone: string) => {
let option = document.createElement("option");
option.value = timeZone;
option.innerText = timeZone;
timeZonesSelect.append(option)
});
}
setInputValue(`subClock${index}DisplayTimeZone`, true);
}

if (subClocks) {
subClocks.forEach((subClock, index) => {
console.debug(subClock);
console.debug(document.getElementById(`subClock${index + 1}TimeZone`));
setInputValue(`subClock${index + 1}TimeZone`, subClock.timeZone);
setInputValue(`subClock${index + 1}DisplayTimeZone`, subClock.displayTimeZone);
setInputValue(`subClock${index + 1}Name`, subClock.name);
});
}
}

function colorSchemeOnChange(elm: HTMLSelectElement) {
const value = elm.value as ColorScheme;
const enable = (value === "custom");
Expand Down
10 changes: 9 additions & 1 deletion src/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const defaultSettings: Settings = {
displayPressure: false,
displayHumidity: false,
displayWind: false,
useFeelsLikeTemperature: false
useFeelsLikeTemperature: false,
subClocks: undefined
};

type TempUnit = "celsius" | "fahrenheit";
Expand Down Expand Up @@ -47,4 +48,11 @@ type Settings = {
displayHumidity: boolean;
displayWind: boolean;
useFeelsLikeTemperature: boolean;
subClocks?: SubClock[];
};

type SubClock = {
timeZone: string;
displayTimeZone: boolean;
name: string;
}
Loading

0 comments on commit e486f8c

Please sign in to comment.