5.9.12

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/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`;

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",
+	},
 }