Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix weather icon flickering

Browse Source
This commit is contained in:
James Lyne 2020-12-20 16:01:15 +00:00
parent 655d104fbe
commit 7fd972b80f
2 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.d.ts vendored
View File

@ -2,3 +2,11 @@ declare module '*.svg' {
const content: any; const content: any;
export default content; export default content;
} }
interface BrowserSpriteSymbol {
id: string;
viewBox: string;
content: string;
node: SVGSymbolElement;
url: string;
}

52
src/leaflet/control/ClockControl.ts
View File

@ -42,6 +42,8 @@ export class ClockControl extends Control {
private _sun?: HTMLElement; private _sun?: HTMLElement;
private _moon?: HTMLElement; private _moon?: HTMLElement;
private _clock?: HTMLElement; private _clock?: HTMLElement;
private _currentMoonIcon?: BrowserSpriteSymbol;
private _currentSunIcon?: BrowserSpriteSymbol;
constructor(options: ClockControlOptions) { constructor(options: ClockControlOptions) {
super(Object.assign(options, {position: 'topcenter'})); super(Object.assign(options, {position: 'topcenter'}));
@ -122,33 +124,35 @@ export class ClockControl extends Control {
if (this.options.showWeather) { if (this.options.showWeather) {
if (worldState.thundering) { if (worldState.thundering) {
this._sun!.innerHTML = ` this._setSunIcon(sunStorm);
<svg class="svg-icon" viewBox="${sunStorm.viewBox}"> this._setMoonIcon(moonStorm);
<use xlink:href="${sunStorm.url}" />
</svg>`;
this._moon!.innerHTML = `
<svg class="svg-icon" viewBox="${moonStorm.viewBox}">
<use xlink:href="${moonStorm.url}" />
</svg>`;
} else if (worldState.raining) { } else if (worldState.raining) {
this._sun!.innerHTML = ` this._setSunIcon(sunRain);
<svg class="svg-icon" viewBox="${sunRain.viewBox}"> this._setMoonIcon(moonRain);
<use xlink:href="${sunRain.url}" />
</svg>`;
this._moon!.innerHTML = `
<svg class="svg-icon" viewBox="${moonRain.viewBox}">
<use xlink:href="${moonRain.url}" />
</svg>`;
} else { } else {
this._sun!.innerHTML = ` this._setSunIcon(sun);
<svg class="svg-icon" viewBox="${sun.viewBox}"> this._setMoonIcon(moon);
<use xlink:href="${sun.url}" />
</svg>`;
this._moon!.innerHTML = `
<svg class="svg-icon" viewBox="${moon.viewBox}">
<use xlink:href="${moon.url}" />
</svg>`;
} }
} }
} }
_setSunIcon(icon: BrowserSpriteSymbol) {
if(this._sun && this._currentSunIcon !== icon) {
this._sun!.innerHTML = `
<svg class="svg-icon" viewBox="${icon.viewBox}">
<use xlink:href="${icon.url}" />
</svg>`;
this._currentSunIcon = icon;
}
}
_setMoonIcon(icon: BrowserSpriteSymbol) {
if(this._moon && this._currentMoonIcon !== icon) {
this._moon!.innerHTML = `
<svg class="svg-icon" viewBox="${icon.viewBox}">
<use xlink:href="${icon.url}" />
</svg>`;
this._currentMoonIcon = icon;
}
}
} }