5.11.7

.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
 
 	},
 	parserOptions: {
-		ecmaVersion: 2021,
+		ecmaVersion: 2023,
 	},
 	plugins: [
 		'unicorn',

README.md

@@ -78,7 +78,7 @@ I've made several changes to this Weather Star 4000 simulation compared to the o
 * "Flavors" are not present in this simulation. Flavors refer to the order of the weather information that was shown on the original units. Instead, the order of the displays has been fixed and a checkboxes can be used to turn on and off individual displays. The travel forecast has been defaulted to off so only local information shows for new users.
 
 ## Sharing a permalink (bookmarking)
-Selected displays, the forecast city and widescreen setting are sticky from one session to the next. However if you would like to share your exact configuration or bookmark it click the "Copy Permalink" near the bottom of the page. A URL will be copied to your clipboard with all of you selected displays and location. You can then share this link or add it to your bookmarks.
+Selected displays, the forecast city and widescreen setting are sticky from one session to the next. However if you would like to share your exact configuration or bookmark it click the "Copy Permalink" (or get "Get Parmalink") near the bottom of the page. A URL will be copied to your clipboard with all of you selected displays and location (or copy it from the page if your browser doesn't support clipboard transfers directly). You can then share this link or add it to your bookmarks.
 
 ## Kiosk mode
 Kiosk mode can be activated by a checkbox on the page. Note that there is no way out of kiosk mode (except refresh or closing the browser), and the play/pause and other controls will not be available. This is deliberate as a browser's kiosk mode it intended not to be exited or significantly modified.
@@ -91,16 +91,15 @@ As time allows I will be working on the following enhancements.
 
 * Better error reporting when api.weather.gov is down (happens more often than you would think)
 
-And the following technical fixes.
-
-* Caching of the animated gifs, specifically after they are decompressed
-
 ## Community Notes
 
 Thanks to the WeatherStar community for providing these discussions to further extend your retro forecasts!
 
 * [Stream as FFMPEG](https://github.com/netbymatt/ws4kp/issues/37#issuecomment-2008491948)
 
+## Customization
+A hook is provided as `/server/scripts/custom.js` to allow customizations to your own fork of this project, without accidentally pushing your customizations back upstream to the git repository. An sample file is provided at `/server/scripts/custom.sample.js` and should be renamed to `custom.js` activate it.
+
 ## Issue reporting and feature requests
 
 Please do not report issues with api.weather.gov being down. It's a new service and not considered fully operational yet. Before reporting an issue or requesting a feature please consider that this is not intended to be a perfect recreation of the WeatherStar 4000, it's a best effort that fits within what's available from the API and within a web browser.

gulp/publish-frontend.mjs

@@ -1,23 +1,26 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const gulp = require('gulp');
-const concat = require('gulp-concat');
-const terser = require('gulp-terser');
-const ejs = require('gulp-ejs');
-const rename = require('gulp-rename');
-const htmlmin = require('gulp-htmlmin');
-const del = require('del');
-const s3Upload = require('gulp-s3-upload');
-const webpack = require('webpack-stream');
-const TerserPlugin = require('terser-webpack-plugin');
-const path = require('path');
-
-const clean = () => del(['./dist**']);
+import {
+	src, dest, series, parallel,
+} from 'gulp';
+import concat from 'gulp-concat';
+import terser from 'gulp-terser';
+import ejs from 'gulp-ejs';
+import rename from 'gulp-rename';
+import htmlmin from 'gulp-htmlmin';
+import { deleteAsync } from 'del';
+import s3Upload from 'gulp-s3-upload';
+import webpack from 'webpack-stream';
+import TerserPlugin from 'terser-webpack-plugin';
+import { readFile } from 'fs/promises';
 
 // get cloudfront
-const AWS = require('aws-sdk');
+import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
 
-AWS.config.update({ region: 'us-east-1' });
-const cloudfront = new AWS.CloudFront({ apiVersion: '2020-01-01' });
+const clean = () => deleteAsync(['./dist**']);
+
+const cloudfront = new CloudFrontClient({ region: 'us-east-1' });
+
+const RESOURCES_PATH = './dist/resources';
 
 const jsSourcesData = [
 	'server/scripts/data/travelcities.js',
@@ -33,7 +36,7 @@ const webpackOptions = {
 		filename: 'ws.min.js',
 	},
 	resolve: {
-		roots: [path.resolve(__dirname, './')],
+		roots: ['./'],
 	},
 	optimization: {
 		minimize: true,
@@ -51,10 +54,10 @@ const webpackOptions = {
 	},
 };
 
-gulp.task('compress_js_data', () => gulp.src(jsSourcesData)
+const compressJsData = () => src(jsSourcesData)
 	.pipe(concat('data.min.js'))
 	.pipe(terser())
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(dest(RESOURCES_PATH));
 
 const jsVendorSources = [
 	'server/scripts/vendor/auto/jquery.js',
@@ -64,10 +67,10 @@ const jsVendorSources = [
 	'server/scripts/vendor/auto/suncalc.js',
 ];
 
-gulp.task('compress_js_vendor', () => gulp.src(jsVendorSources)
+const compressJsVendor = () => src(jsVendorSources)
 	.pipe(concat('vendor.min.js'))
 	.pipe(terser())
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(dest(RESOURCES_PATH));
 
 const mjsSources = [
 	'server/scripts/modules/currentweatherscroll.mjs',
@@ -87,39 +90,40 @@ const mjsSources = [
 	'server/scripts/index.mjs',
 ];
 
-gulp.task('build_js', () => gulp.src(mjsSources)
+const buildJs = () => src(mjsSources)
 	.pipe(webpack(webpackOptions))
-	.pipe(gulp.dest('dist/resources')));
+	.pipe(dest(RESOURCES_PATH));
 
 const cssSources = [
 	'server/styles/main.css',
 ];
-gulp.task('copy_css', () => gulp.src(cssSources)
+const copyCss = () => src(cssSources)
 	.pipe(concat('ws.min.css'))
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(dest(RESOURCES_PATH));
 
 const htmlSources = [
 	'views/*.ejs',
 ];
-gulp.task('compress_html', () => {
-	// eslint-disable-next-line global-require
-	const { version } = require('../package.json');
-	return gulp.src(htmlSources)
+const compressHtml = async () => {
+	const packageJson = await readFile('package.json');
+	const { version } = JSON.parse(packageJson);
+
+	return src(htmlSources)
 		.pipe(ejs({
 			production: version,
 			version,
 		}))
 		.pipe(rename({ extname: '.html' }))
 		.pipe(htmlmin({ collapseWhitespace: true }))
-		.pipe(gulp.dest('./dist'));
-});
+		.pipe(dest('./dist'));
+};
 
 const otherFiles = [
 	'server/robots.txt',
 	'server/manifest.json',
 ];
-gulp.task('copy_other_files', () => gulp.src(otherFiles, { base: 'server/' })
-	.pipe(gulp.dest('./dist')));
+const copyOtherFiles = () => src(otherFiles, { base: 'server/' })
+	.pipe(dest('./dist'));
 
 const s3 = s3Upload({
 	useIAM: true,
@@ -130,7 +134,7 @@ const uploadSources = [
 	'dist/**',
 	'!dist/**/*.map',
 ];
-gulp.task('upload', () => gulp.src(uploadSources, { base: './dist' })
+const upload = () => src(uploadSources, { base: './dist' })
 	.pipe(s3({
 		Bucket: 'weatherstar',
 		StorageClass: 'STANDARD',
@@ -140,21 +144,21 @@ gulp.task('upload', () => gulp.src(uploadSources, { base: './dist' })
 				return 'max-age=2592000'; // 1 month
 			},
 		},
-	})));
+	}));
 
 const imageSources = [
 	'server/fonts/**',
 	'server/images/**',
 ];
-gulp.task('upload_images', () => gulp.src(imageSources, { base: './server' })
+const uploadImages = () => src(imageSources, { base: './server', encoding: false })
 	.pipe(
 		s3({
 			Bucket: 'weatherstar',
 			StorageClass: 'STANDARD',
 		}),
-	));
+	);
 
-gulp.task('invalidate', async () => cloudfront.createInvalidation({
+const invalidate = () => cloudfront.send(new CreateInvalidationCommand({
 	DistributionId: 'E9171A4KV8KCW',
 	InvalidationBatch: {
 		CallerReference: (new Date()).toLocaleString(),
@@ -163,10 +167,12 @@ gulp.task('invalidate', async () => cloudfront.createInvalidation({
 			Items: ['/*'],
 		},
 	},
-}).promise());
+}));
 
-gulp.task('build-dist', gulp.series(clean, gulp.parallel('build_js', 'compress_js_data', 'compress_js_vendor', 'copy_css', 'compress_html', 'copy_other_files')));
+const buildDist = series(clean, parallel(buildJs, compressJsData, compressJsVendor, copyCss, compressHtml, copyOtherFiles));
 
 // upload_images could be in parallel with upload, but _images logs a lot and has little changes
 // by running upload last the majority of the changes will be at the bottom of the log for easy viewing
-module.exports = gulp.series('build-dist', 'upload_images', 'upload', 'invalidate');
+const publishFrontend = series(buildDist, uploadImages,	upload,	invalidate);
+
+export default publishFrontend;

gulp/update-vendor.mjs

@@ -1,12 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const gulp = require('gulp');
-const del = require('del');
-const rename = require('gulp-rename');
+import { src, series, dest } from 'gulp';
+import { deleteAsync } from 'del';
+import rename from 'gulp-rename';
 
-const clean = (cb) => {
-	del(['./server/scripts/vendor/auto/**']);
-	cb();
-};
+const clean = () => deleteAsync(['./server/scripts/vendor/auto/**']);
 
 const vendorFiles = [
 	'./node_modules/luxon/build/es6/luxon.js',
@@ -17,13 +14,15 @@ const vendorFiles = [
 	'./node_modules/swiped-events/src/swiped-events.js',
 ];
 
-const copy = () => gulp.src(vendorFiles)
+const copy = () => src(vendorFiles)
 	.pipe(rename((path) => {
 		path.dirname = path.dirname.toLowerCase();
 		path.basename = path.basename.toLowerCase();
 		path.extname = path.extname.toLowerCase();
 		if (path.basename === 'luxon') path.extname = '.mjs';
 	}))
-	.pipe(gulp.dest('./server/scripts/vendor/auto'));
+	.pipe(dest('./server/scripts/vendor/auto'));
 
-module.exports = gulp.series(clean, copy);
+const updateVendor = series(clean, copy);
+
+export default updateVendor;

gulpfile.js

@@ -1,4 +0,0 @@
-const gulp = require('gulp');
-
-gulp.task('update-vendor', require('./gulp/update-vendor'));
-gulp.task('publish-frontend', require('./gulp/publish-frontend'));

gulpfile.mjs

@@ -0,0 +1,7 @@
+import updateVendor from './gulp/update-vendor.mjs';
+import publishFrontend from './gulp/publish-frontend.mjs';
+
+export {
+	updateVendor,
+	publishFrontend,
+};

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.11.4",
+	"version": "5.11.7",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {
@@ -20,7 +20,7 @@
 	},
 	"homepage": "https://github.com/netbymatt/ws4kp#readme",
 	"devDependencies": {
-		"del": "^6.0.0",
+		"del": "^7.1.0",
 		"ejs": "^3.1.5",
 		"eslint": "^8.2.0",
 		"eslint-config-airbnb-base": "^15.0.0",
@@ -33,7 +33,6 @@
 		"gulp-ejs": "^5.1.0",
 		"gulp-htmlmin": "^5.0.1",
 		"gulp-rename": "^2.0.0",
-		"gulp-s3-upload": "^1.7.3",
 		"gulp-sass": "^5.1.0",
 		"gulp-terser": "^2.0.0",
 		"jquery": "^3.6.0",
@@ -45,5 +44,10 @@
 		"swiped-events": "^1.1.4",
 		"terser-webpack-plugin": "^5.3.6",
 		"webpack-stream": "^7.0.0"
+	},
+	"dependencies": {
+		"@aws-sdk/client-cloudfront": "^3.609.0",
+		"gulp-awspublish": "^8.0.0",
+		"gulp-s3-upload": "^1.7.3"
 	}
 }

server/scripts/custom.sample.js

@@ -0,0 +1,14 @@
+// this file is loaded by the main html page (when renamed to custom.js)
+// it is intended to allow for customizations that do not get published back to the git repo
+// for example, changing the logo
+
+// start running after all content is loaded
+document.addEventListener('DOMContentLoaded', () => {
+	// get all of the logo images
+	const logos = document.querySelectorAll('.logo img');
+	// loop through each logo
+	logos.forEach((elem) => {
+		// change the source
+		elem.src = 'my-custom-logo.gif';
+	});
+});

server/scripts/index.mjs

@@ -43,9 +43,12 @@ const init = () => {
 	btnGetGps.addEventListener('click', btnGetGpsClick);
 	if (!navigator.geolocation) btnGetGps.style.display = 'none';
 
-	document.querySelector('#divTwc').addEventListener('click', () => {
+	document.querySelector('#divTwc').addEventListener('mousemove', () => {
 		if (document.fullscreenElement) updateFullScreenNavigate();
 	});
+	// local change detection when exiting full screen via ESC key (or other non button click methods)
+	window.addEventListener('resize', fullScreenResizeCheck);
+	fullScreenResizeCheck.wasFull = false;
 
 	document.querySelector(TXT_ADDRESS_SELECTOR).addEventListener('keydown', (key) => { if (key.code === 'Enter') formSubmit(); });
 	document.querySelector('#btnGetLatLng').addEventListener('click', () => formSubmit());
@@ -189,7 +192,7 @@ const enterFullScreen = () => {
 
 	if (requestMethod) {
 		// Native full screen.
-		requestMethod.call(element, { navigationUI: 'hide' }); // https://bugs.chromium.org/p/chromium/issues/detail?id=933436#c7
+		requestMethod.call(element, { navigationUI: 'hide' });
 	} else {
 		// iOS doesn't support FullScreen API.
 		window.scrollTo(0, 0);
@@ -217,10 +220,15 @@ const exitFullscreen = () => {
 		document.msExitFullscreen();
 	}
 	resize();
+	exitFullScreenVisibilityChanges();
+};
+
+const exitFullScreenVisibilityChanges = () => {
 	// change hover text and image
 	const img = document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR);
 	img.src = 'images/nav/ic_fullscreen_white_24dp_2x.png';
 	img.title = 'Enter fullscreen';
+	document.querySelector('#divTwc').classList.remove('no-cursor');
 	const divTwcBottom = document.querySelector('#divTwcBottom');
 	divTwcBottom.classList.remove('hidden');
 	divTwcBottom.classList.add('visible');
@@ -228,7 +236,6 @@ const exitFullscreen = () => {
 
 const btnNavigateMenuClick = () => {
 	postMessage('navButton', 'menu');
-	updateFullScreenNavigate();
 	return false;
 };
 
@@ -261,21 +268,18 @@ const swipeCallBack = (direction) => {
 const btnNavigateRefreshClick = () => {
 	resetStatuses();
 	loadData();
-	updateFullScreenNavigate();
 
 	return false;
 };
 
 const btnNavigateNextClick = () => {
 	postMessage('navButton', 'next');
-	updateFullScreenNavigate();
 
 	return false;
 };
 
 const btnNavigatePreviousClick = () => {
 	postMessage('navButton', 'previous');
-	updateFullScreenNavigate();
 
 	return false;
 };
@@ -287,6 +291,7 @@ const updateFullScreenNavigate = () => {
 	const divTwcBottom = document.querySelector('#divTwcBottom');
 	divTwcBottom.classList.remove('hidden');
 	divTwcBottom.classList.add('visible');
+	document.querySelector('#divTwc').classList.remove('no-cursor');
 
 	if (navigateFadeIntervalId) {
 		clearTimeout(navigateFadeIntervalId);
@@ -297,6 +302,7 @@ const updateFullScreenNavigate = () => {
 		if (document.fullscreenElement) {
 			divTwcBottom.classList.remove('visible');
 			divTwcBottom.classList.add('hidden');
+			document.querySelector('#divTwc').classList.add('no-cursor');
 		}
 	}, 2000);
 };
@@ -348,7 +354,6 @@ const documentKeydown = (e) => {
 
 const btnNavigatePlayClick = () => {
 	postMessage('navButton', 'playToggle');
-	updateFullScreenNavigate();
 
 	return false;
 };
@@ -393,3 +398,18 @@ const btnGetGpsClick = async () => {
 		txtAddress.value = `${location.city}, ${location.state}`;
 	});
 };
+
+// check for change in full screen triggered by browser and run local functions
+const fullScreenResizeCheck = () => {
+	if (fullScreenResizeCheck.wasFull && !document.fullscreenElement) {
+		// leaving full screen
+		exitFullScreenVisibilityChanges();
+	}
+	if (!fullScreenResizeCheck.wasFull && document.fullscreenElement) {
+		// entering full screen
+		// can't do much here because a UI interaction is required to change the full screen div element
+	}
+
+	// store state of fullscreen element for next change detection
+	fullScreenResizeCheck.wasFull = !!document.fullscreenElement;
+};

server/scripts/modules/share.mjs

@@ -7,7 +7,13 @@ const specialMappings = {
 
 const init = () => {
 	// add action to existing link
-	document.querySelector('#share-link').addEventListener('click', createLink);
+	const shareLink = document.querySelector('#share-link');
+	shareLink.addEventListener('click', createLink);
+
+	// if navigator.clipboard does not exist, change text
+	if (!navigator?.clipboard) {
+		shareLink.textContent = 'Get Permalink';
+	}
 };
 
 const createLink = async (e) => {
@@ -33,10 +39,23 @@ const createLink = async (e) => {
 
 	const url = new URL(`?${queryString}`, document.location.href);
 
+	// send to proper function based on availability of clipboard
+	if (navigator?.clipboard) {
+		copyToClipboard(url);
+	} else {
+		writeLinkToPage(url);
+	}
+};
+
+const copyToClipboard = async (url) => {
 	try {
+		// write to clipboard
 		await navigator.clipboard.writeText(url.toString());
+		// alert user
 		const confirmSpan = document.querySelector('#share-link-copied');
 		confirmSpan.style.display = 'inline';
+
+		// hide confirm text after 5 seconds
 		setTimeout(() => {
 			confirmSpan.style.display = 'none';
 		}, 5000);
@@ -45,6 +64,18 @@ const createLink = async (e) => {
 	}
 };
 
+const writeLinkToPage = (url) => {
+	// get elements
+	const shareLinkInstructions = document.querySelector('#share-link-instructions');
+	const shareLinkUrl = shareLinkInstructions.querySelector('#share-link-url');
+	// populate url and display
+	shareLinkUrl.value = url;
+	shareLinkInstructions.style.display = 'inline';
+	// highlight for convenience
+	shareLinkUrl.focus();
+	shareLinkUrl.select();
+};
+
 const parseQueryString = () => {
 	// return memoized result
 	if (parseQueryString.params) return parseQueryString.params;

server/styles/scss/_page.scss

@@ -353,7 +353,8 @@ body {
 	margin-bottom: 15px;
 }
 
-#enabledDisplays, #settings {
+#enabledDisplays,
+#settings {
 	margin-bottom: 15px;
 	@include u.status-colors();
 
@@ -411,7 +412,12 @@ body {
 	align-items: center;
 	justify-content: center;
 	align-content: center;
+
+	&.no-cursor {
+		cursor: none;
+	}
 }
+
 .kiosk #divTwc {
 	justify-content: unset;
 }
@@ -447,10 +453,10 @@ body {
 .visible {
 	visibility: visible;
 	opacity: 1;
-	transition: opacity 1s linear;
+	transition: opacity 0.1s linear;
 }
 
-.hidden {
+#divTwc:fullscreen .hidden {
 	visibility: hidden;
 	opacity: 0;
 	transition: visibility 0s 1s, opacity 1s linear
@@ -728,7 +734,12 @@ body {
 	display: none;
 }
 
+#share-link-instructions {
+	display: none;
+}
+
 .kiosk {
+
 	#divQuery,
 	>.info,
 	>.heading,

views/index.ejs

@@ -45,7 +45,7 @@
   <script type="module" src="scripts/modules/radar.mjs"></script>
   <script type="module" src="scripts/modules/settings.mjs"></script>
 	<script type="module" src="scripts/index.mjs"></script>
-
+	<script type="text/javascript" src="scripts/custom.js"></script>
   <!-- data -->
   <script type="text/javascript" src="scripts/data/travelcities.js"></script>
   <script type="text/javascript" src="scripts/data/regionalcities.js"></script>
@@ -151,10 +151,16 @@
 	<div id='settings'>
 	</div>
 
+	<div class='heading'>Sharing</div>
 	<div class='info'>
 		<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
+		<div id="share-link-instructions">
+			Copy this long URL:
+			<input type='text' id="share-link-url"></div>
+		</div>
 	</div>
 
+	<div class='heading'>Forecast Information</div>
   <div id="divInfo">
     Location: <span id="spanCity"></span> <span id="spanState"></span><br />
     Station Id: <span id="spanStationId"></span><br />