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.metric').classList.remove('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.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);
-const kilometersToMiles = (Kilometers) => Math.round(Kilometers / 1.609_34);
-const metersToFeet = (Meters) => Math.round(Meters / 0.3048);
+// HACK!
+const celsiusToFahrenheit = (Celsius) => Celsius; // Math.round((Celsius * 9) / 5 + 32);
+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

@@ -1,56 +1,57 @@
-{
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {
-		"search.exclude": {
-			"**/*.code-search": true,
-			"**/*.css": true,
-			"**/*.min.js": true,
-			"**/bower_components": true,
-			"**/node_modules": true,
-			"**/vendor": true,
-			"dist/**": true
-		},
-		"cSpell.enabled": true,
-		"cSpell.words": [
-			"'storm",
-			"arcgis",
-			"Battaglia",
-			"devbridge",
-			"gifs",
-			"ltrim",
-			"Noaa",
-			"nosleep",
-			"Pngs",
-			"PRECIP",
-			"rtrim",
-			"sonarjs",
-			"T",
-			"T'storm",
-			"uscomp",
-			"Visib",
-			"Waukegan"
-		],
-		"cSpell.ignorePaths": [
-			"**/package-lock.json",
-			"**/node_modules/**",
-			"**/vscode-extension/**",
-			"**/.git/objects/**",
-			".vscode",
-			".vscode-insiders",
-			"**/vendor/auto/**",
-			"**/twc3.js",
-		],
-		"editor.tabSize": 2,
-		"emmet.includeLanguages": {
-			"ejs": "html",
-		},
-		"[html]": {
-			"editor.defaultFormatter": "j69.ejs-beautify"
-		},
-		"files.exclude": {},
-	},
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"search.exclude": {
+			"**/*.code-search": true,
+			"**/*.css": true,
+			"**/*.min.js": true,
+			"**/bower_components": true,
+			"**/node_modules": true,
+			"**/vendor": true,
+			"dist/**": true
+		},
+		"cSpell.enabled": true,
+		"cSpell.words": [
+			"'storm",
+			"arcgis",
+			"Battaglia",
+			"devbridge",
+			"gifs",
+			"ltrim",
+			"Noaa",
+			"nosleep",
+			"Pngs",
+			"PRECIP",
+			"rtrim",
+			"sonarjs",
+			"T",
+			"T'storm",
+			"uscomp",
+			"Visib",
+			"Waukegan"
+		],
+		"cSpell.ignorePaths": [
+			"**/package-lock.json",
+			"**/node_modules/**",
+			"**/vscode-extension/**",
+			"**/.git/objects/**",
+			".vscode",
+			".vscode-insiders",
+			"**/vendor/auto/**",
+			"**/twc3.js",
+		],
+		"editor.tabSize": 2,
+		"emmet.includeLanguages": {
+			"ejs": "html",
+		},
+		"[html]": {
+			"editor.defaultFormatter": "j69.ejs-beautify"
+		},
+		"files.exclude": {},
+		"files.eol": "\n",
+	},
 }