5.11.6

gulp/publish-frontend.js

@@ -14,10 +14,11 @@ const path = require('path');
 const clean = () => del(['./dist**']);
 
 // get cloudfront
-const AWS = require('aws-sdk');
+const { CloudFrontClient, CreateInvalidationCommand } = require('@aws-sdk/client-cloudfront');
 
-AWS.config.update({ region: 'us-east-1' });
-const cloudfront = new AWS.CloudFront({ apiVersion: '2020-01-01' });
+const cloudfront = new CloudFrontClient({ region: 'us-east-1' });
+
+const RESOURCES_PATH = './dist/resources';
 
 const jsSourcesData = [
 	'server/scripts/data/travelcities.js',
@@ -54,7 +55,7 @@ const webpackOptions = {
 gulp.task('compress_js_data', () => gulp.src(jsSourcesData)
 	.pipe(concat('data.min.js'))
 	.pipe(terser())
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(gulp.dest(RESOURCES_PATH)));
 
 const jsVendorSources = [
 	'server/scripts/vendor/auto/jquery.js',
@@ -67,7 +68,7 @@ const jsVendorSources = [
 gulp.task('compress_js_vendor', () => gulp.src(jsVendorSources)
 	.pipe(concat('vendor.min.js'))
 	.pipe(terser())
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(gulp.dest(RESOURCES_PATH)));
 
 const mjsSources = [
 	'server/scripts/modules/currentweatherscroll.mjs',
@@ -89,14 +90,14 @@ const mjsSources = [
 
 gulp.task('build_js', () => gulp.src(mjsSources)
 	.pipe(webpack(webpackOptions))
-	.pipe(gulp.dest('dist/resources')));
+	.pipe(gulp.dest(RESOURCES_PATH)));
 
 const cssSources = [
 	'server/styles/main.css',
 ];
 gulp.task('copy_css', () => gulp.src(cssSources)
 	.pipe(concat('ws.min.css'))
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(gulp.dest(RESOURCES_PATH)));
 
 const htmlSources = [
 	'views/*.ejs',
@@ -154,7 +155,7 @@ gulp.task('upload_images', () => gulp.src(imageSources, { base: './server', enco
 		}),
 	));
 
-gulp.task('invalidate', async () => cloudfront.createInvalidation({
+gulp.task('invalidate', async () => cloudfront.send(new CreateInvalidationCommand({
 	DistributionId: 'E9171A4KV8KCW',
 	InvalidationBatch: {
 		CallerReference: (new Date()).toLocaleString(),
@@ -163,7 +164,7 @@ gulp.task('invalidate', async () => cloudfront.createInvalidation({
 			Items: ['/*'],
 		},
 	},
-}).promise());
+}).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')));
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.11.5",
+	"version": "5.11.6",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {
@@ -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/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,6 +220,10 @@ 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';
@@ -228,7 +235,6 @@ const exitFullscreen = () => {
 
 const btnNavigateMenuClick = () => {
 	postMessage('navButton', 'menu');
-	updateFullScreenNavigate();
 	return false;
 };
 
@@ -261,21 +267,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;
 };
@@ -348,7 +351,6 @@ const documentKeydown = (e) => {
 
 const btnNavigatePlayClick = () => {
 	postMessage('navButton', 'playToggle');
-	updateFullScreenNavigate();
 
 	return false;
 };
@@ -393,3 +395,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/styles/scss/_page.scss

@@ -449,10 +449,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