lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

remove lots of jquery

Browse source
This commit is contained in:
Matt Walsh 2020-09-29 22:25:28 -05:00
parent 3e9aa97c7e
commit d05d5d51ab
4 changed files with 103 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.vscode/launch.json vendored
View file

@ -14,6 +14,7 @@
"skipFiles": [ "skipFiles": [
"<node_internals>/**", "<node_internals>/**",
"**/*.min.js", "**/*.min.js",
"**/vendor/**"
] ]
}, },
{ {

215
server/scripts/index.js
View file

@ -1,5 +1,6 @@
/* globals NoSleep, states, navigation */ 'use strict';
$(() => { /* globals NoSleep, states, navigation, UNITS */
document.addEventListener('DOMContentLoaded', () => {
index.init(); index.init();
}); });
@ -11,8 +12,6 @@ const index = (() => {
const _AutoRefreshTotalIntervalMs = 600000; // 10 min. const _AutoRefreshTotalIntervalMs = 600000; // 10 min.
const _NoSleep = new NoSleep(); const _NoSleep = new NoSleep();
let divTwcBottom;
let _AutoSelectQuery = false; let _AutoSelectQuery = false;
let _LastUpdate = null; let _LastUpdate = null;
@ -22,26 +21,25 @@ const index = (() => {
let _FullScreenOverride = false; let _FullScreenOverride = false;
const init = () => { const init = () => {
divTwcBottom = $('#divTwcBottom'); document.getElementById('txtAddress').addEventListener('focus', (e) => {
$('#txtAddress').on('focus', (e) => { e.target.select();
$(e.target).select();
}).focus();
$('.NavigateMenu').on('click', btnNavigateMenu_click);
$('.NavigateRefresh').on('click', btnNavigateRefresh_click);
$('.NavigateNext').on('click', btnNavigateNext_click);
$('.NavigatePrevious').on('click', btnNavigatePrevious_click);
$('.NavigatePlay').on('click', btnNavigatePlay_click);
$('#btnGetGps').on('click', btnGetGps_click);
$('#divTwc').on('click', (e) => {
if (document.fullscreenElement) UpdateFullScreenNavigate(e);
}); });
$(document).on('keydown', document_keydown); document.getElementById('NavigateMenu').addEventListener('click', btnNavigateMenu_click);
document.getElementById('NavigateRefresh').addEventListener('click', btnNavigateRefresh_click);
document.getElementById('NavigateNext').addEventListener('click', btnNavigateNext_click);
document.getElementById('NavigatePrevious').addEventListener('click', btnNavigatePrevious_click);
document.getElementById('NavigatePlay').addEventListener('click', btnNavigatePlay_click);
document.getElementById('ToggleFullScreen').addEventListener('click', btnFullScreen_click);
document.getElementById('btnGetGps').addEventListener('click', btnGetGps_click);
document.getElementById('divTwc').addEventListener('click', () => {
if (document.fullscreenElement) UpdateFullScreenNavigate();
});
document.addEventListener('keydown', document_keydown);
document.addEventListener('touchmove', e => { if (_FullScreenOverride) e.preventDefault(); }); document.addEventListener('touchmove', e => { if (_FullScreenOverride) e.preventDefault(); });
$('.ToggleFullScreen').on('click', btnFullScreen_click);
const categories = [ const categories = [
'Land Features', 'Land Features',
@ -100,28 +98,29 @@ const index = (() => {
const TwcQuery = localStorage.getItem('TwcQuery'); const TwcQuery = localStorage.getItem('TwcQuery');
if (TwcQuery) { if (TwcQuery) {
_AutoSelectQuery = true; _AutoSelectQuery = true;
$('#txtAddress').val(TwcQuery) const txtAddress = document.getElementById('txtAddress');
.blur() txtAddress.val(TwcQuery);
.focus(); txtAddress.blur();
txtAddress.focus();
} }
const TwcPlay = localStorage.getItem('TwcPlay'); const TwcPlay = localStorage.getItem('TwcPlay');
if (TwcPlay === null || TwcPlay === 'true') postMessage('navButton', 'play'); if (TwcPlay === null || TwcPlay === 'true') postMessage('navButton', 'play');
$('#btnClearQuery').on('click', () => { document.getElementById('btnClearQuery').addEventListener('click', () => {
$('#spanCity').text(''); document.getElementById('spanCity').innerHTML = '';
$('#spanState').text(''); document.getElementById('spanState').innerHTML = '';
$('#spanStationId').text(''); document.getElementById('spanStationId').innerHTML = '';
$('#spanRadarId').text(''); document.getElementById('spanRadarId').innerHTML = '';
$('#spanZoneId').text(''); document.getElementById('spanZoneId').innerHTML = '';
localStorage.removeItem('TwcScrollText'); localStorage.removeItem('TwcScrollText');
localStorage.removeItem('TwcScrollTextChecked'); localStorage.removeItem('TwcScrollTextChecked');
$('#chkAutoRefresh').prop('checked', 'checked'); document.getElementById('chkAutoRefresh').checked = true;
localStorage.removeItem('TwcAutoRefresh'); localStorage.removeItem('TwcAutoRefresh');
$('#radEnglish').prop('checked', 'checked'); document.getElementById('radEnglish').checked = true;
localStorage.removeItem('TwcUnits'); localStorage.removeItem('TwcUnits');
localStorage.removeItem('TwcPlay'); localStorage.removeItem('TwcPlay');
@ -132,21 +131,16 @@ const index = (() => {
const TwcUnits = localStorage.getItem('TwcUnits'); const TwcUnits = localStorage.getItem('TwcUnits');
if (!TwcUnits || TwcUnits === 'ENGLISH') { if (!TwcUnits || TwcUnits === 'ENGLISH') {
$('#radEnglish').prop('checked', 'checked'); document.getElementById('radEnglish').checked = true;
} else if (TwcUnits === 'METRIC') { } else if (TwcUnits === 'METRIC') {
$('#radMetric').prop('checked', 'checked'); document.getElementById('radMetric').checked = true;
} }
$('input[type=\'radio\'][name=\'radUnits\']').on('change', (e) => { document.getElementById('radEnglish').addEventListener('change', changeUnits);
const Units = $(e.target).val(); document.getElementById('radMetric').addEventListener('change', changeUnits);
e;
localStorage.setItem('TwcUnits', Units);
AssignLastUpdate();
postMessage('units', Units);
});
$('#chkAutoRefresh').on('change', (e) => { document.getElementById('chkAutoRefresh').addEventListener('change', (e) => {
const Checked = $(e.target).is(':checked'); const Checked = e.target.checked;
if (_LastUpdate) { if (_LastUpdate) {
if (Checked) { if (Checked) {
@ -161,13 +155,21 @@ const index = (() => {
const TwcAutoRefresh = localStorage.getItem('TwcAutoRefresh'); const TwcAutoRefresh = localStorage.getItem('TwcAutoRefresh');
if (!TwcAutoRefresh || TwcAutoRefresh === 'true') { if (!TwcAutoRefresh || TwcAutoRefresh === 'true') {
$('#chkAutoRefresh').prop('checked', 'checked'); document.getElementById('chkAutoRefresh').checked = true;
} else { } else {
$('#chkAutoRefresh').prop('checked', ''); document.getElementById('chkAutoRefresh').checked = false;
} }
}; };
const changeUnits = (e) => {
const Units = e.target.value;
e;
localStorage.setItem('TwcUnits', Units);
AssignLastUpdate();
postMessage('units', Units);
};
const autocompleteOnSelect = (suggestion) => { const autocompleteOnSelect = (suggestion) => {
let request; let request;
@ -200,7 +202,7 @@ const index = (() => {
const latLon = {lat:Math.round2(geom.y, 4), lon:Math.round2(geom.x, 4)}; const latLon = {lat:Math.round2(geom.y, 4), lon:Math.round2(geom.x, 4)};
LoadTwcData(latLon); LoadTwcData(latLon);
// Save the query // Save the query
localStorage.setItem('TwcQuery', $('#txtAddress').val()); localStorage.setItem('TwcQuery', document.getElementById('txtAddress').value);
}; };
const btnFullScreen_click = () => { const btnFullScreen_click = () => {
@ -235,7 +237,6 @@ const index = (() => {
// iOS doesn't support FullScreen API. // iOS doesn't support FullScreen API.
window.scrollTo(0, 0); window.scrollTo(0, 0);
_FullScreenOverride = true; _FullScreenOverride = true;
$(window).resize();
} }
UpdateFullScreenNavigate(); UpdateFullScreenNavigate();
@ -246,7 +247,6 @@ const index = (() => {
if (_FullScreenOverride) { if (_FullScreenOverride) {
_FullScreenOverride = false; _FullScreenOverride = false;
$(window).resize();
} }
if (document.exitFullscreen) { if (document.exitFullscreen) {
@ -275,18 +275,13 @@ const index = (() => {
// if there's no data stop // if there's no data stop
if (!latLon) return; if (!latLon) return;
$('#txtAddress').blur(); document.getElementById('txtAddress').blur();
StopAutoRefreshTimer(); StopAutoRefreshTimer();
_LastUpdate = null; _LastUpdate = null;
AssignLastUpdate(); AssignLastUpdate();
postMessage('latLon', latLon); postMessage('latLon', latLon);
postMessage('units', $('input[type=\'radio\'][name=\'radUnits\']:checked').val());
const display = $('#display');
display.on('keydown', document_keydown);
const SwipeCallBack = (event, direction) => { const SwipeCallBack = (event, direction) => {
switch (direction) { switch (direction) {
case 'left': case 'left':
@ -300,19 +295,19 @@ const index = (() => {
} }
}; };
display.swipe({ // display.swipe({
//Generic swipe handler for all directions // //Generic swipe handler for all directions
swipeRight: SwipeCallBack, // swipeRight: SwipeCallBack,
swipeLeft: SwipeCallBack, // swipeLeft: SwipeCallBack,
}); // });
}; };
const AssignLastUpdate = () => { const AssignLastUpdate = () => {
let LastUpdate = '(None)'; let LastUpdate = '(None)';
if (_LastUpdate) { if (_LastUpdate) {
switch ($('input[type=\'radio\'][name=\'radUnits\']:checked').val()) { switch (navigation.units()) {
case 'ENGLISH': case UNITS.english:
LastUpdate = _LastUpdate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short' }); LastUpdate = _LastUpdate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short' });
break; break;
default: default:
@ -321,9 +316,9 @@ const index = (() => {
} }
} }
$('#spanLastRefresh').html(LastUpdate); document.getElementById('spanLastRefresh').innerHTML = LastUpdate;
if (_LastUpdate && $('#chkAutoRefresh').is(':checked')) StartAutoRefreshTimer(); if (_LastUpdate && document.getElementById('chkAutoRefresh').checked) StartAutoRefreshTimer();
}; };
const btnNavigateRefresh_click = () => { const btnNavigateRefresh_click = () => {
@ -350,8 +345,9 @@ const index = (() => {
let _NavigateFadeIntervalId = null; let _NavigateFadeIntervalId = null;
const UpdateFullScreenNavigate = () => { const UpdateFullScreenNavigate = () => {
$(document.activeElement).blur(); document.activeElement.blur();
divTwcBottom.fadeIn2(); document.getElementById('divTwcBottom').classList.remove('hidden');
document.getElementById('divTwcBottom').classList.add('visible');
if (_NavigateFadeIntervalId) { if (_NavigateFadeIntervalId) {
clearTimeout(_NavigateFadeIntervalId); clearTimeout(_NavigateFadeIntervalId);
@ -360,7 +356,8 @@ const index = (() => {
_NavigateFadeIntervalId = setTimeout(() => { _NavigateFadeIntervalId = setTimeout(() => {
if (document.fullscreenElement) { if (document.fullscreenElement) {
divTwcBottom.fadeOut2(); document.getElementById('divTwcBottom').classList.remove('visible');
document.getElementById('divTwcBottom').classList.add('hidden');
} }
}, 2000); }, 2000);
@ -403,55 +400,6 @@ const index = (() => {
} }
}; };
$.fn.fadeIn2 = function () {
const _self = this;
let opacity = 0.0;
let IntervalId = null;
if (_self.css('opacity') !== '0') return;
_self.css('visibility', 'visible');
_self.css('opacity', '0.0');
IntervalId = window.setInterval(() => {
opacity += 0.1;
opacity = Math.round2(opacity, 1);
_self.css('opacity', opacity.toString());
if (opacity === 1.0) {
//_self.css("visibility", "");
_self.css('visibility', 'visible');
window.clearInterval(IntervalId);
}
}, 50);
return _self;
};
$.fn.fadeOut2 = function () {
const _self = this;
let opacity = 1.0;
let IntervalId = null;
if (_self.css('opacity') !== '1') return;
_self.css('visibility', 'visible');
_self.css('opacity', '1.0');
IntervalId = window.setInterval(() => {
opacity -= 0.2;
opacity = Math.round2(opacity, 1);
_self.css('opacity', opacity.toString());
if (opacity === 0) {
_self.css('visibility', 'hidden');
window.clearInterval(IntervalId);
}
}, 50);
return _self;
};
Math.round2 = (value, decimals) => Number(Math.round(value + 'e' + decimals) + 'e-' + decimals); Math.round2 = (value, decimals) => Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
const btnNavigatePlay_click = () => { const btnNavigatePlay_click = () => {
@ -463,7 +411,7 @@ const index = (() => {
// read and dispatch an event from the iframe // read and dispatch an event from the iframe
const message = (data) => { const message = (data) => {
// test for trust const playButton = document.getElementById('NavigatePlay');
// dispatch event // dispatch event
if (!data.type) return; if (!data.type) return;
switch (data.type) { switch (data.type) {
@ -479,19 +427,15 @@ const index = (() => {
case 'isPlaying': case 'isPlaying':
localStorage.setItem('TwcPlay', navigation.isPlaying()); localStorage.setItem('TwcPlay', navigation.isPlaying());
if (navigation.isPlaying()) { if (navigation.isPlaying()) {
noSleepEnable(); noSleepEnable();
$('img[src=\'images/nav/ic_play_arrow_white_24dp_1x.png\']').attr('title', 'Pause'); playButton.title = 'Pause';
$('img[src=\'images/nav/ic_play_arrow_white_24dp_1x.png\']').attr('src', 'images/nav/ic_pause_white_24dp_1x.png'); playButton.src = 'images/nav/ic_pause_white_24dp_1x.png';
$('img[src=\'images/nav/ic_play_arrow_white_24dp_2x.png\']').attr('title', 'Pause');
$('img[src=\'images/nav/ic_play_arrow_white_24dp_2x.png\']').attr('src', 'images/nav/ic_pause_white_24dp_2x.png');
} else { } else {
noSleepDisable(); noSleepDisable();
playButton.title = 'Play';
$('img[src=\'images/nav/ic_pause_white_24dp_1x.png\']').attr('title', 'Play'); playButton.src = 'images/nav/ic_play_arrow_white_24dp_1x.png';
$('img[src=\'images/nav/ic_pause_white_24dp_1x.png\']').attr('src', 'images/nav/ic_play_arrow_white_24dp_1x.png');
$('img[src=\'images/nav/ic_pause_white_24dp_2x.png\']').attr('title', 'Play');
$('img[src=\'images/nav/ic_pause_white_24dp_2x.png\']').attr('src', 'images/nav/ic_play_arrow_white_24dp_2x.png');
} }
break; break;
@ -524,7 +468,7 @@ const index = (() => {
RemainingMs = 0; RemainingMs = 0;
} }
const dt = new Date(RemainingMs); const dt = new Date(RemainingMs);
$('#spanRefreshCountDown').html((dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes()) + ':' + (dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds())); document.getElementById('spanRefreshCountDown').innerHTML = (dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes()) + ':' + (dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds());
// Time has elapsed. // Time has elapsed.
if (_AutoRefreshCountMs >= _AutoRefreshTotalIntervalMs) LoadTwcData(); if (_AutoRefreshCountMs >= _AutoRefreshTotalIntervalMs) LoadTwcData();
@ -535,7 +479,7 @@ const index = (() => {
const StopAutoRefreshTimer = () => { const StopAutoRefreshTimer = () => {
if (_AutoRefreshIntervalId) { if (_AutoRefreshIntervalId) {
window.clearInterval(_AutoRefreshIntervalId); window.clearInterval(_AutoRefreshIntervalId);
$('#spanRefreshCountDown').html('--:--'); document.getElementById('spanRefreshCountDown').innerHTML = '--:--';
_AutoRefreshIntervalId = null; _AutoRefreshIntervalId = null;
} }
}; };
@ -571,9 +515,10 @@ const index = (() => {
const Country = data.address.CountryCode; const Country = data.address.CountryCode;
const TwcQuery = `${ZipCode}, ${City}, ${State}, ${Country}`; const TwcQuery = `${ZipCode}, ${City}, ${State}, ${Country}`;
$('#txtAddress').val(TwcQuery) const txtAddress = document.getElementById('txtAddress');
.blur() txtAddress.value = TwcQuery;
.focus(); txtAddress.blur();
txtAddress.focus();
// Save the query // Save the query
localStorage.setItem('TwcQuery', TwcQuery); localStorage.setItem('TwcQuery', TwcQuery);
@ -581,11 +526,11 @@ const index = (() => {
const populateWeatherParameters = (weatherParameters) => { const populateWeatherParameters = (weatherParameters) => {
$('#spanCity').text(weatherParameters.city + ', '); document.getElementById('spanCity').innerHTML = weatherParameters.city + ', ';
$('#spanState').text(weatherParameters.state); document.getElementById('spanState').innerHTML = weatherParameters.state;
$('#spanStationId').text(weatherParameters.stationId); document.getElementById('spanStationId').innerHTML = weatherParameters.stationId;
$('#spanRadarId').text(weatherParameters.radarId); document.getElementById('spanRadarId').innerHTML = weatherParameters.radarId;
$('#spanZoneId').text(weatherParameters.zoneId); document.getElementById('spanZoneId').innerHTML = weatherParameters.zoneId;
}; };
// track state of nosleep locally to avoid a null case error when nosleep.disable is called without first calling .enable // track state of nosleep locally to avoid a null case error when nosleep.disable is called without first calling .enable

20
server/styles/index.css
View file

@ -58,10 +58,6 @@ input, button
max-width: 640px; max-width: 640px;
} }
#divTwcMiddle
{
}
#divTwcLeft #divTwcLeft
{ {
display: none; display: none;
@ -314,4 +310,20 @@ jsgif
max-height: 100vh; max-height: 100vh;
width: auto; width: auto;
} }
}
.navButton {
cursor: pointer;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 1s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear
} }

12
views/index.ejs
View file

@ -86,16 +86,16 @@
</div> </div>
<div id="divTwcBottom"> <div id="divTwcBottom">
<div id="divTwcBottomLeft"> <div id="divTwcBottomLeft">
<a id="aMenuBottom" href="#" class="NavigateMenu"><img src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" /></a> <img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" />
<a id="aPreviousBottom" href="#" class="NavigatePrevious"><img src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" /></a> <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" />
<a id="aNextBottom" href="#" class="NavigateNext"><img src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" /></a> <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" />
<a id="aPlayBottom" href="#" class="NavigatePlay"><img src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" /></a> <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" />
</div> </div>
<div id="divTwcBottomMiddle"> <div id="divTwcBottomMiddle">
<a id="aRefreshBottom" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" /></a> <img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" />
</div> </div>
<div id="divTwcBottomRight"> <div id="divTwcBottomRight">
<a id="aFullScreenBottom" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" /></a> <img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" />
</div> </div>
</div> </div>
</div> </div>