remove lots of jquery
This commit is contained in:
Matt Walsh
parent
3e9aa97c7e
commit
d05d5d51ab
1
.vscode/launch.json
vendored
1
.vscode/launch.json
vendored
|
|
@ -14,6 +14,7 @@
|
|||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/*.min.js",
|
||||
"**/vendor/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/* globals NoSleep, states, navigation */
|
||||
$(() => {
|
||||
'use strict';
|
||||
/* globals NoSleep, states, navigation, UNITS */
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
index.init();
|
||||
});
|
||||
|
||||
|
|
@ -11,8 +12,6 @@ const index = (() => {
|
|||
const _AutoRefreshTotalIntervalMs = 600000; // 10 min.
|
||||
const _NoSleep = new NoSleep();
|
||||
|
||||
let divTwcBottom;
|
||||
|
||||
let _AutoSelectQuery = false;
|
||||
|
||||
let _LastUpdate = null;
|
||||
|
|
@ -22,26 +21,25 @@ const index = (() => {
|
|||
let _FullScreenOverride = false;
|
||||
|
||||
const init = () => {
|
||||
divTwcBottom = $('#divTwcBottom');
|
||||
$('#txtAddress').on('focus', (e) => {
|
||||
$(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.getElementById('txtAddress').addEventListener('focus', (e) => {
|
||||
e.target.select();
|
||||
});
|
||||
|
||||
$(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(); });
|
||||
$('.ToggleFullScreen').on('click', btnFullScreen_click);
|
||||
|
||||
|
||||
const categories = [
|
||||
'Land Features',
|
||||
|
|
@ -100,28 +98,29 @@ const index = (() => {
|
|||
const TwcQuery = localStorage.getItem('TwcQuery');
|
||||
if (TwcQuery) {
|
||||
_AutoSelectQuery = true;
|
||||
$('#txtAddress').val(TwcQuery)
|
||||
.blur()
|
||||
.focus();
|
||||
const txtAddress = document.getElementById('txtAddress');
|
||||
txtAddress.val(TwcQuery);
|
||||
txtAddress.blur();
|
||||
txtAddress.focus();
|
||||
}
|
||||
|
||||
const TwcPlay = localStorage.getItem('TwcPlay');
|
||||
if (TwcPlay === null || TwcPlay === 'true') postMessage('navButton', 'play');
|
||||
|
||||
$('#btnClearQuery').on('click', () => {
|
||||
$('#spanCity').text('');
|
||||
$('#spanState').text('');
|
||||
$('#spanStationId').text('');
|
||||
$('#spanRadarId').text('');
|
||||
$('#spanZoneId').text('');
|
||||
document.getElementById('btnClearQuery').addEventListener('click', () => {
|
||||
document.getElementById('spanCity').innerHTML = '';
|
||||
document.getElementById('spanState').innerHTML = '';
|
||||
document.getElementById('spanStationId').innerHTML = '';
|
||||
document.getElementById('spanRadarId').innerHTML = '';
|
||||
document.getElementById('spanZoneId').innerHTML = '';
|
||||
|
||||
localStorage.removeItem('TwcScrollText');
|
||||
localStorage.removeItem('TwcScrollTextChecked');
|
||||
|
||||
$('#chkAutoRefresh').prop('checked', 'checked');
|
||||
document.getElementById('chkAutoRefresh').checked = true;
|
||||
localStorage.removeItem('TwcAutoRefresh');
|
||||
|
||||
$('#radEnglish').prop('checked', 'checked');
|
||||
document.getElementById('radEnglish').checked = true;
|
||||
localStorage.removeItem('TwcUnits');
|
||||
|
||||
localStorage.removeItem('TwcPlay');
|
||||
|
|
@ -132,21 +131,16 @@ const index = (() => {
|
|||
|
||||
const TwcUnits = localStorage.getItem('TwcUnits');
|
||||
if (!TwcUnits || TwcUnits === 'ENGLISH') {
|
||||
$('#radEnglish').prop('checked', 'checked');
|
||||
document.getElementById('radEnglish').checked = true;
|
||||
} else if (TwcUnits === 'METRIC') {
|
||||
$('#radMetric').prop('checked', 'checked');
|
||||
document.getElementById('radMetric').checked = true;
|
||||
}
|
||||
|
||||
$('input[type=\'radio\'][name=\'radUnits\']').on('change', (e) => {
|
||||
const Units = $(e.target).val();
|
||||
e;
|
||||
localStorage.setItem('TwcUnits', Units);
|
||||
AssignLastUpdate();
|
||||
postMessage('units', Units);
|
||||
});
|
||||
document.getElementById('radEnglish').addEventListener('change', changeUnits);
|
||||
document.getElementById('radMetric').addEventListener('change', changeUnits);
|
||||
|
||||
$('#chkAutoRefresh').on('change', (e) => {
|
||||
const Checked = $(e.target).is(':checked');
|
||||
document.getElementById('chkAutoRefresh').addEventListener('change', (e) => {
|
||||
const Checked = e.target.checked;
|
||||
|
||||
if (_LastUpdate) {
|
||||
if (Checked) {
|
||||
|
|
@ -161,13 +155,21 @@ const index = (() => {
|
|||
|
||||
const TwcAutoRefresh = localStorage.getItem('TwcAutoRefresh');
|
||||
if (!TwcAutoRefresh || TwcAutoRefresh === 'true') {
|
||||
$('#chkAutoRefresh').prop('checked', 'checked');
|
||||
document.getElementById('chkAutoRefresh').checked = true;
|
||||
} 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) => {
|
||||
let request;
|
||||
|
||||
|
|
@ -200,7 +202,7 @@ const index = (() => {
|
|||
const latLon = {lat:Math.round2(geom.y, 4), lon:Math.round2(geom.x, 4)};
|
||||
LoadTwcData(latLon);
|
||||
// Save the query
|
||||
localStorage.setItem('TwcQuery', $('#txtAddress').val());
|
||||
localStorage.setItem('TwcQuery', document.getElementById('txtAddress').value);
|
||||
};
|
||||
|
||||
const btnFullScreen_click = () => {
|
||||
|
|
@ -235,7 +237,6 @@ const index = (() => {
|
|||
// iOS doesn't support FullScreen API.
|
||||
window.scrollTo(0, 0);
|
||||
_FullScreenOverride = true;
|
||||
$(window).resize();
|
||||
}
|
||||
|
||||
UpdateFullScreenNavigate();
|
||||
|
|
@ -246,7 +247,6 @@ const index = (() => {
|
|||
|
||||
if (_FullScreenOverride) {
|
||||
_FullScreenOverride = false;
|
||||
$(window).resize();
|
||||
}
|
||||
|
||||
if (document.exitFullscreen) {
|
||||
|
|
@ -275,18 +275,13 @@ const index = (() => {
|
|||
// if there's no data stop
|
||||
if (!latLon) return;
|
||||
|
||||
$('#txtAddress').blur();
|
||||
document.getElementById('txtAddress').blur();
|
||||
StopAutoRefreshTimer();
|
||||
_LastUpdate = null;
|
||||
AssignLastUpdate();
|
||||
|
||||
postMessage('latLon', latLon);
|
||||
|
||||
postMessage('units', $('input[type=\'radio\'][name=\'radUnits\']:checked').val());
|
||||
|
||||
const display = $('#display');
|
||||
display.on('keydown', document_keydown);
|
||||
|
||||
const SwipeCallBack = (event, direction) => {
|
||||
switch (direction) {
|
||||
case 'left':
|
||||
|
|
@ -300,19 +295,19 @@ const index = (() => {
|
|||
}
|
||||
};
|
||||
|
||||
display.swipe({
|
||||
//Generic swipe handler for all directions
|
||||
swipeRight: SwipeCallBack,
|
||||
swipeLeft: SwipeCallBack,
|
||||
});
|
||||
// display.swipe({
|
||||
// //Generic swipe handler for all directions
|
||||
// swipeRight: SwipeCallBack,
|
||||
// swipeLeft: SwipeCallBack,
|
||||
// });
|
||||
};
|
||||
|
||||
const AssignLastUpdate = () => {
|
||||
let LastUpdate = '(None)';
|
||||
|
||||
if (_LastUpdate) {
|
||||
switch ($('input[type=\'radio\'][name=\'radUnits\']:checked').val()) {
|
||||
case 'ENGLISH':
|
||||
switch (navigation.units()) {
|
||||
case UNITS.english:
|
||||
LastUpdate = _LastUpdate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short' });
|
||||
break;
|
||||
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 = () => {
|
||||
|
|
@ -350,8 +345,9 @@ const index = (() => {
|
|||
let _NavigateFadeIntervalId = null;
|
||||
|
||||
const UpdateFullScreenNavigate = () => {
|
||||
$(document.activeElement).blur();
|
||||
divTwcBottom.fadeIn2();
|
||||
document.activeElement.blur();
|
||||
document.getElementById('divTwcBottom').classList.remove('hidden');
|
||||
document.getElementById('divTwcBottom').classList.add('visible');
|
||||
|
||||
if (_NavigateFadeIntervalId) {
|
||||
clearTimeout(_NavigateFadeIntervalId);
|
||||
|
|
@ -360,7 +356,8 @@ const index = (() => {
|
|||
|
||||
_NavigateFadeIntervalId = setTimeout(() => {
|
||||
if (document.fullscreenElement) {
|
||||
divTwcBottom.fadeOut2();
|
||||
document.getElementById('divTwcBottom').classList.remove('visible');
|
||||
document.getElementById('divTwcBottom').classList.add('hidden');
|
||||
}
|
||||
|
||||
}, 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);
|
||||
|
||||
const btnNavigatePlay_click = () => {
|
||||
|
|
@ -463,7 +411,7 @@ const index = (() => {
|
|||
|
||||
// read and dispatch an event from the iframe
|
||||
const message = (data) => {
|
||||
// test for trust
|
||||
const playButton = document.getElementById('NavigatePlay');
|
||||
// dispatch event
|
||||
if (!data.type) return;
|
||||
switch (data.type) {
|
||||
|
|
@ -479,19 +427,15 @@ const index = (() => {
|
|||
case 'isPlaying':
|
||||
localStorage.setItem('TwcPlay', navigation.isPlaying());
|
||||
|
||||
|
||||
if (navigation.isPlaying()) {
|
||||
noSleepEnable();
|
||||
$('img[src=\'images/nav/ic_play_arrow_white_24dp_1x.png\']').attr('title', 'Pause');
|
||||
$('img[src=\'images/nav/ic_play_arrow_white_24dp_1x.png\']').attr('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');
|
||||
playButton.title = 'Pause';
|
||||
playButton.src = 'images/nav/ic_pause_white_24dp_1x.png';
|
||||
} else {
|
||||
noSleepDisable();
|
||||
|
||||
$('img[src=\'images/nav/ic_pause_white_24dp_1x.png\']').attr('title', 'Play');
|
||||
$('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');
|
||||
playButton.title = 'Play';
|
||||
playButton.src = 'images/nav/ic_play_arrow_white_24dp_1x.png';
|
||||
}
|
||||
break;
|
||||
|
||||
|
|
@ -524,7 +468,7 @@ const index = (() => {
|
|||
RemainingMs = 0;
|
||||
}
|
||||
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.
|
||||
if (_AutoRefreshCountMs >= _AutoRefreshTotalIntervalMs) LoadTwcData();
|
||||
|
|
@ -535,7 +479,7 @@ const index = (() => {
|
|||
const StopAutoRefreshTimer = () => {
|
||||
if (_AutoRefreshIntervalId) {
|
||||
window.clearInterval(_AutoRefreshIntervalId);
|
||||
$('#spanRefreshCountDown').html('--:--');
|
||||
document.getElementById('spanRefreshCountDown').innerHTML = '--:--';
|
||||
_AutoRefreshIntervalId = null;
|
||||
}
|
||||
};
|
||||
|
|
@ -571,9 +515,10 @@ const index = (() => {
|
|||
const Country = data.address.CountryCode;
|
||||
const TwcQuery = `${ZipCode}, ${City}, ${State}, ${Country}`;
|
||||
|
||||
$('#txtAddress').val(TwcQuery)
|
||||
.blur()
|
||||
.focus();
|
||||
const txtAddress = document.getElementById('txtAddress');
|
||||
txtAddress.value = TwcQuery;
|
||||
txtAddress.blur();
|
||||
txtAddress.focus();
|
||||
|
||||
// Save the query
|
||||
localStorage.setItem('TwcQuery', TwcQuery);
|
||||
|
|
@ -581,11 +526,11 @@ const index = (() => {
|
|||
|
||||
const populateWeatherParameters = (weatherParameters) => {
|
||||
|
||||
$('#spanCity').text(weatherParameters.city + ', ');
|
||||
$('#spanState').text(weatherParameters.state);
|
||||
$('#spanStationId').text(weatherParameters.stationId);
|
||||
$('#spanRadarId').text(weatherParameters.radarId);
|
||||
$('#spanZoneId').text(weatherParameters.zoneId);
|
||||
document.getElementById('spanCity').innerHTML = weatherParameters.city + ', ';
|
||||
document.getElementById('spanState').innerHTML = weatherParameters.state;
|
||||
document.getElementById('spanStationId').innerHTML = weatherParameters.stationId;
|
||||
document.getElementById('spanRadarId').innerHTML = weatherParameters.radarId;
|
||||
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
|
||||
|
|
|
|||
|
|
@ -58,10 +58,6 @@ input, button
|
|||
max-width: 640px;
|
||||
}
|
||||
|
||||
#divTwcMiddle
|
||||
{
|
||||
}
|
||||
|
||||
#divTwcLeft
|
||||
{
|
||||
display: none;
|
||||
|
|
@ -315,3 +311,19 @@ jsgif
|
|||
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
|
||||
}
|
||||
|
|
@ -86,16 +86,16 @@
|
|||
</div>
|
||||
<div id="divTwcBottom">
|
||||
<div id="divTwcBottomLeft">
|
||||
<a id="aMenuBottom" href="#" class="NavigateMenu"><img src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" /></a>
|
||||
<a id="aPreviousBottom" href="#" class="NavigatePrevious"><img src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" /></a>
|
||||
<a id="aNextBottom" href="#" class="NavigateNext"><img src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" /></a>
|
||||
<a id="aPlayBottom" href="#" class="NavigatePlay"><img src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" /></a>
|
||||
<img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" />
|
||||
<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" />
|
||||
<img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" />
|
||||
<img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" />
|
||||
</div>
|
||||
<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 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue