too fast to read, slow it down

Update the script to build the css and minimize it to work with the files checked in

.gitattributes

@@ -1,4 +1,5 @@
 *.js text eol=lf
+*.mjs text eol=lf
 *.ejs text eol=lf
 *.html text eol=lf
 *.json text eol=lf

package.json

@@ -1,11 +1,11 @@
 {
 	"name": "ws4kp",
-	"version": "5.9.11",
+	"version": "5.9.12",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"build:css": "sass ./server/styles/scss/style.scss ./server/styles/compiled.css",
+		"build:css": "sass --style=compressed ./server/styles/scss/main.scss ./server/styles/main.css",
 		"lint": "eslint ./server/scripts/**/*.mjs",
 		"lint:fix": "eslint --fix ./server/scripts/**/*.mjs"
 	},
@@ -25,7 +25,7 @@
 		"eslint": "^8.21.0",
 		"eslint-config-airbnb-base": "^15.0.0",
 		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-sonarjs": "^0.19.0",
+		"eslint-plugin-sonarjs": "^0.21.0",
 		"eslint-plugin-unicorn": "^46.0.0",
 		"express": "^4.17.1",
 		"gulp": "^4.0.2",

server/scripts/modules/currentweather.mjs

@@ -186,14 +186,15 @@ const parseData = (data) => {
 
 	// convert to us units
 	data.Temperature = celsiusToFahrenheit(data.Temperature);
-	data.TemperatureUnit = 'F';
+	// HACK
+	// data.TemperatureUnit = 'F';
 	data.DewPoint = celsiusToFahrenheit(data.DewPoint);
 	data.Ceiling = Math.round(metersToFeet(data.Ceiling) / 100) * 100;
-	data.CeilingUnit = 'ft.';
+	// data.CeilingUnit = 'ft.';
 	data.Visibility = kilometersToMiles(observations.visibility.value / 1000);
-	data.VisibilityUnit = ' mi.';
+	// data.VisibilityUnit = ' mi.';
 	data.WindSpeed = kphToMph(data.WindSpeed);
-	data.WindUnit = 'MPH';
+	// data.WindUnit = 'MPH';
 	data.Pressure = pascalToInHg(data.Pressure).toFixed(2);
 	data.HeatIndex = celsiusToFahrenheit(data.HeatIndex);
 	data.WindChill = celsiusToFahrenheit(data.WindChill);

server/scripts/modules/extendedforecast.mjs

@@ -26,7 +26,7 @@ class ExtendedForecast extends WeatherDisplay {
 		try {
 			forecast = await json(weatherParameters.forecast, {
 				data: {
-					units: 'us',
+					units: 'si',
 				},
 				retryCount: 3,
 				stillWaiting: () => this.stillWaiting(),

server/scripts/modules/latestobservations.mjs

@@ -64,8 +64,9 @@ class LatestObservations extends WeatherDisplay {
 		// sort array by station name
 		const sortedConditions = conditions.sort((a, b) => ((a.Name < b.Name) ? -1 : 1));
 
-		this.elem.querySelector('.column-headers .temp.english').classList.add('show');
+		//this.elem.querySelector('.column-headers .temp.english').classList.add('show');
-		this.elem.querySelector('.column-headers .temp.metric').classList.remove('show');
+		//this.elem.querySelector('.column-headers .temp.metric').classList.remove('show');
+		this.elem.querySelector('.column-headers .temp.metric').classList.add('show');
 
 		const lines = sortedConditions.map((condition) => {
 			const windDirection = directionToNSEW(condition.windDirection.value);

server/scripts/modules/localforecast.mjs

@@ -44,7 +44,7 @@ class LocalForecast extends WeatherDisplay {
 		forecastsElem.append(...templates);
 
 		// increase each forecast height to a multiple of container height
-		this.pageHeight = forecastsElem.parentNode.getBoundingClientRect().height;
+		this.pageHeight = forecastsElem.parentNode.scrollHeight;
 		templates.forEach((forecast) => {
 			const newHeight = Math.ceil(forecast.scrollHeight / this.pageHeight) * this.pageHeight;
 			forecast.style.height = `${newHeight}px`;
@@ -61,7 +61,7 @@ class LocalForecast extends WeatherDisplay {
 		try {
 			return await json(weatherParameters.forecast, {
 				data: {
-					units: 'us',
+					units: 'si',
 				},
 				retryCount: 3,
 				stillWaiting: () => this.stillWaiting(),

server/scripts/modules/regionalforecast.mjs

@@ -80,7 +80,7 @@ class RegionalForecast extends WeatherDisplay {
 				// start off the observation task
 				const observationPromise = utils.getRegionalObservation(point, city);
 
-				const forecast = await json(`https://api.weather.gov/gridpoints/${point.wfo}/${point.x},${point.y}/forecast`);
+				const forecast = await json(`https://api.weather.gov/gridpoints/${point.wfo}/${point.x},${point.y}/forecast?units=si`);
 
 				// get XY on map for city
 				const cityXY = utils.getXYForCity(city, minMaxLatLon.maxLat, minMaxLatLon.minLon, weatherParameters.state);

server/scripts/modules/utils/units.mjs

@@ -3,9 +3,10 @@
 const round2 = (value, decimals) => Math.trunc(value * 10 ** decimals) / 10 ** decimals;
 
 const kphToMph = (Kph) => Math.round(Kph / 1.609_34);
-const celsiusToFahrenheit = (Celsius) => Math.round((Celsius * 9) / 5 + 32);
+// HACK!
-const kilometersToMiles = (Kilometers) => Math.round(Kilometers / 1.609_34);
+const celsiusToFahrenheit = (Celsius) => Celsius; // Math.round((Celsius * 9) / 5 + 32);
-const metersToFeet = (Meters) => Math.round(Meters / 0.3048);
+const kilometersToMiles = (Kilometers) => Kilometers; // Math.round(Kilometers / 1.609_34);
+const metersToFeet = (Meters) => Meters; // Math.round(Meters / 0.3048);
 const pascalToInHg = (Pascal) => round2(Pascal * 0.000_295_3, 2);
 
 export {

server/scripts/modules/weatherdisplay.mjs

@@ -25,7 +25,7 @@ class WeatherDisplay {
 		this.timing = {
 			totalScreens: 1,
 			baseDelay: 9000, // 5 seconds
-			delay: 1, // 1*1second = 1 second total display time
+			delay: 2, // 1*1second = 1 second total display time
 		};
 		this.navBaseCount = 0;
 		this.screenIndex = -1;	// special starting condition

server/scripts/vendor/auto/swiped-events.js

@@ -46,12 +46,20 @@
         // if the user released on a different target, cancel!
         if (startEl !== e.target) return;
 
-        var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20px
+        var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20 units
+        var swipeUnit = getNearestAttribute(startEl, 'data-swipe-unit', 'px'); // default px
         var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10);    // default 500ms
         var timeDiff = Date.now() - timeDown;
         var eventType = '';
         var changedTouches = e.changedTouches || e.touches || [];
 
+        if (swipeUnit === 'vh') {
+            swipeThreshold = Math.round((swipeThreshold / 100) * document.documentElement.clientHeight); // get percentage of viewport height in pixels
+        }
+        if (swipeUnit === 'vw') {
+            swipeThreshold = Math.round((swipeThreshold / 100) * document.documentElement.clientWidth); // get percentage of viewport height in pixels
+        }
+
         if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
             if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {
                 if (xDiff > 0) {
@@ -139,7 +147,7 @@
      */
     function getNearestAttribute(el, attributeName, defaultValue) {
 
-        // walk up the dom tree looking for data-action and data-trigger
+        // walk up the dom tree looking for attributeName
         while (el && el !== document.documentElement) {
 
             var attributeValue = el.getAttribute(attributeName);

ws4kp.code-workspace

@@ -52,5 +52,6 @@
 			"editor.defaultFormatter": "j69.ejs-beautify"
 		},
 		"files.exclude": {},
+		"files.eol": "\n",
 	},
 }