Use ks-util for most utility functions. Fix up a few things left over from the previous refactoring.

Author: kshetline

package-lock.json

@@ -19,6 +19,7 @@
     "js-cookie": "^2.2.0",
     "ks-astronomy": "^1.0.1",
     "ks-date-time-zone": "^1.4.0",
+    "ks-util": "^1.2.0",
     "rxjs": "^6.2.1"
   },
   "devDependencies": {

package.json

@@ -6,4 +6,5 @@ export interface AppService {
   updateSettings(newSettings: Settings);
   forecastHasBeenUpdated(): void;
   updateSunriseAndSunset(rise: string, set: string);
+  updateMarqueeState(isScrolling: boolean);
 }

src/app.service.ts

@@ -20,15 +20,12 @@
 // Started by using https://codepen.io/dudleystorey/pen/HLBki, but this has grown and changed quite a bit from there.
 
 import { getDayOfWeek, KsDateTime, KsTimeZone } from 'ks-date-time-zone';
-import { isRaspbian } from './util';
+import { isIE, isRaspbian, padLeft } from 'ks-util';
 import { AppService } from './app.service';
+import * as $ from 'jquery';
 
 const SVC_NAMESPACE = 'http://www.w3.org/2000/svg';
 
-function pad(n) {
-  return (n < 10 ? '0' : '') + n;
-}
-
 const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
@@ -62,7 +59,7 @@ export class Clock {
   private _hideSeconds = false;
 
   public timezone = KsTimeZone.OS_ZONE;
-  public hasCompletingAnimation;
+  public hasCompletingAnimation = false;
 
   constructor(private appService: AppService) {
     this.secHand = document.getElementById('sec-hand');
@@ -83,6 +80,9 @@ export class Clock {
     this.hasBeginElement = !!this.sweep.beginElement;
 
     this.decorateClockFace();
+
+    if (isIE())
+      $('#clock-container').addClass('clock-container-ie-fix');
   }
 
   public start(): void {
@@ -212,11 +212,11 @@ export class Clock {
     const animationTime = (doMechanicalSecondHandEffect ? 200 : 0);
     const now = this.appService.getCurrentTime() + animationTime;
     const date = new KsDateTime(now, this.timezone);
-    const walltime = date.wallTime;
-    const secs = walltime.sec;
+    const wallTime = date.wallTime;
+    const secs = wallTime.sec;
     const secRotation = 6 * secs;
-    const mins = walltime.min;
-    const hour = walltime.hrs;
+    const mins = wallTime.min;
+    const hour = wallTime.hrs;
 
     if (doMechanicalSecondHandEffect)
       sweepSecondHand(this.lastSecRotation, secRotation);
@@ -225,15 +225,15 @@ export class Clock {
     this.lastSecRotation = secRotation;
     rotate(this.minHand, 6 * mins + 0.1 * secs);
     rotate(this.hourHand, 30 * (hour % 12) + mins / 2 + secs / 120);
-    setTimeout(() => this.tick(), 1000 - walltime.millis);
+    setTimeout(() => this.tick(), 1000 - wallTime.millis);
 
     setTimeout(() => {
-      const dayOfTheWeek = getDayOfWeek(walltime.n);
+      const dayOfTheWeek = getDayOfWeek(wallTime.n);
 
       this.dayOfWeekCaption.textContent = daysOfWeek[dayOfTheWeek].toUpperCase();
-      this.dateCaption.textContent = pad(walltime.d);
-      this.monthCaption.textContent = months[walltime.m - 1].toUpperCase();
-      this.yearCaption.textContent = walltime.y.toString();
+      this.dateCaption.textContent = padLeft(wallTime.d, 2, '0');
+      this.monthCaption.textContent = months[wallTime.m - 1].toUpperCase();
+      this.yearCaption.textContent = wallTime.y.toString();
       this.day2Caption.textContent = daysOfWeek[(dayOfTheWeek + 2) % 7];
       this.day3Caption.textContent = daysOfWeek[(dayOfTheWeek + 3) % 7];
       this.zoneCaption.textContent = this.timezone.zoneName + ' UTC' + KsTimeZone.formatUtcOffset(date.utcOffsetSeconds);
@@ -251,8 +251,8 @@ export class Clock {
       }
 
       this.timeCaption.textContent =
-        pad(displayHour) + ':' +
-        pad(mins) + (this._hideSeconds ? '' : ':' + pad(secs)) + suffix;
+        padLeft(displayHour, 2, '0') + ':' +
+        padLeft(mins, 2, '0') + (this._hideSeconds ? '' : ':' + padLeft(secs, 2, '0')) + suffix;
 
       if (mins !== this.lastMinute || this.lastTick + 60000 <= now) {
         this.appService.updateTime(hour, mins, this.lastMinute < 0);

src/clock.ts

@@ -25,19 +25,15 @@ import { getDateFromDayNumber_SGC, KsDateTime, KsTimeZone } from 'ks-date-time-z
 import * as $ from 'jquery';
 import { setSvgHref } from './util';
 import { AppService } from './app.service';
+import { padLeft } from 'ks-util';
 
 const solarSystem = new SolarSystem();
 const eventFinder = new EventFinder();
 const planets = [SUN, MOON, MERCURY, VENUS, MARS, JUPITER, SATURN];
 const planetIds = ['sun', 'moon', 'mercury', 'venus', 'mars', 'jupiter', 'saturn'];
-const planetElems: JQuery[] = [];
-
-function pad(n) {
-  return (n < 10 ? '0' : '') + n;
-}
 
 function getMoonPhaseIcon(phase: number) {
-  return `assets/moon/phase-${pad(Math.round(phase / 360 * 28) % 28)}.svg`;
+  return `assets/moon/phase-${padLeft(Math.round(phase / 360 * 28) % 28, 2, '0')}.svg`;
 }
 
 function formatTime(date: KsDateTime, amPm: boolean) {
@@ -53,7 +49,7 @@ function formatTime(date: KsDateTime, amPm: boolean) {
     suffix = (date.wallTime.hrs < 12 ? 'a' : 'p');
   }
 
-  return pad(hours) + ':' + pad(date.wallTime.min) + suffix;
+  return padLeft(hours, 2, '0') + ':' + padLeft(date.wallTime.min, 2, '0') + suffix;
 }
 
 export class Ephemeris {
@@ -63,12 +59,13 @@ export class Ephemeris {
   private sunsets: JQuery[] = [];
   private moons: JQuery[] = [];
   private phaseTimes: JQuery[] = [];
+  private planetElems: JQuery[] = [];
 
   private _hidePlanets = false;
 
   constructor(private appService: AppService) {
     planetIds.forEach((planet, index) => {
-      planetElems[index] = $('#' + planetIds[index]);
+      this.planetElems[index] = $('#' + planetIds[index]);
     });
 
     this.planetTracks = $('#planet-tracks');
@@ -114,7 +111,7 @@ export class Ephemeris {
     planets.forEach((planet, index) => {
       const eclipticLongitude = solarSystem.getEclipticPosition(planet, time_JDE).longitude.degrees;
       const altitude = solarSystem.getHorizontalPosition(planet, time_JDU, observer).altitude.degrees;
-      const elem = planetElems[index];
+      const elem = this.planetElems[index];
       let targetAltitude = -REFRACTION_AT_HORIZON;
 
       if (planet === SUN || planet === MOON)

src/ephemeris.ts

@@ -19,7 +19,8 @@
 
 import * as $ from 'jquery';
 import { KsDateTime, KsTimeZone } from 'ks-date-time-zone';
-import { getTextWidth, isEdge, isIE, isRaspbian, setSvgHref } from './util';
+import { getTextWidth, isEdge, isIE, isRaspbian } from 'ks-util';
+import { setSvgHref } from './util';
 import { AppService } from './app.service';
 
 interface CommonConditions {
@@ -143,7 +144,7 @@ export class Forecast {
     });
   }
 
-  public refreshForecastFromCache(): void {
+  public refreshFromCache(): void {
     if (this.lastForecastData)
       this.displayForecast(this.lastForecastData);
   }
@@ -421,11 +422,11 @@ export class Forecast {
     const offsetWidth = element.offsetWidth;
 
     if (textWidth + padding <= offsetWidth) {
-      // setMarqueeIsAnimated(false);
+      this.appService.updateMarqueeState(false);
       return;
     }
 
-    // setMarqueeIsAnimated(true);
+    this.appService.updateMarqueeState(true);
 
     if (this.animationStyleSheet.cssRules.length > 0)
       this.animationStyleSheet.deleteRule(0);

src/forecast.ts

@@ -23,7 +23,7 @@ import { Clock } from './clock';
 import { AppService } from './app.service';
 import { Forecast } from './forecast';
 import { KsDateTime, KsTimeZone } from 'ks-date-time-zone';
-import { isIE, setFullScreen } from './util';
+import { setFullScreen } from 'ks-util';
 import { Settings } from './settings';
 import { SettingsDialog } from './settings-dialog';
 import { Ephemeris } from './ephemeris';
@@ -62,7 +62,7 @@ export class AwClockApp implements AppService {
 
   private lastCursorMove = 0;
   private lastForecast = 0;
-  private lastTimezone = KsTimeZone.OS_ZONE;
+  private lastTimezone: KsTimeZone;
   private lastHour = -1;
   private frequent = false;
 
@@ -74,6 +74,7 @@ export class AwClockApp implements AppService {
     this.clock = new Clock(this);
     this.clock.amPm = this.settings.amPm;
     this.clock.hideSeconds = this.settings.hideSeconds;
+    this.lastTimezone = this.clock.timezone;
 
     this.forecast = new Forecast(this);
 
@@ -88,9 +89,6 @@ export class AwClockApp implements AppService {
     this.cityLabel = $('#city');
     this.dimmer = $('#dimmer');
 
-    if (isIE())
-      $('#clock-container').addClass('clock-container-ie-fix');
-
     this.cityLabel.text(this.settings.city);
 
     document.addEventListener('keypress', event => {
@@ -134,7 +132,7 @@ export class AwClockApp implements AppService {
     // If it's a new day, make sure we update the weather display to show the change of day,
     // even if we aren't polling for new weather data right now.
     if (hour < this.lastHour || hour === 0 && minute === 0)
-      this.forecast.refreshForecastFromCache();
+      this.forecast.refreshFromCache();
 
     if (this.indoor.available)
       this.indoor.update(this.settings.celsius);
@@ -179,14 +177,18 @@ export class AwClockApp implements AppService {
     this.cityLabel.text(newSettings.city);
     this.clock.amPm = newSettings.amPm;
     this.clock.hideSeconds = newSettings.hideSeconds;
-    // this.ephemeris.hidePlanets = newSettings.hidePlanets;
+    this.ephemeris.hidePlanets = newSettings.hidePlanets;
     this.clock.triggerRefresh();
   }
 
   public updateSunriseAndSunset(rise: string, set: string): void {
     this.updateDimming(this.getCurrentTime(), rise, set);
   }
 
+  public updateMarqueeState(isScrolling: boolean) {
+    this.clock.hasCompletingAnimation = isScrolling;
+  }
+
   private updateDimming(now: number, todayRise: string, todaySet: string): void {
     if (this.settings.dimming) {
       let start = this.settings.dimmingStart;

src/main.ts

@@ -18,7 +18,7 @@
 */
 
 import * as Cookies from 'js-cookie';
-import { toBoolean } from './util';
+import { toBoolean } from 'ks-util';
 
 export class Settings {
   latitude = 42.75;