Automatically load last viewed (and not closed) file via localStorage

This commit is contained in:
Daniel Perna 2018-01-31 00:24:23 +01:00
parent 31bb476a4e
commit 0eb2fd3ab0
3 changed files with 181 additions and 12 deletions

View file

@ -1,6 +1,7 @@
Version 0.2.6 (2018-) Version 0.2.6 (2018-)
- Displaying current filename in title (Issue #76) @danielperna84 - Displaying current filename in title (Issue #76) @danielperna84
- Added menu item to open configurator in new tab (Issue #76) @danielperna84 - Added menu item to open configurator in new tab (Issue #76) @danielperna84
- Automatically load last viewed (and not closed) file via localStorage @danielperna84
Version 0.2.5 (2018-01-27) Version 0.2.5 (2018-01-27)
- Added warning-logs for access failure @danielperna84 - Added warning-logs for access failure @danielperna84

View file

@ -631,7 +631,7 @@ INDEX = Template(r"""<!DOCTYPE html>
</header> </header>
<main> <main>
<ul id="dropdown_menu" class="dropdown-content z-depth-4"> <ul id="dropdown_menu" class="dropdown-content z-depth-4">
<li><a onclick="window.open(window.location.href, '_blank');">New tab</a></li> <li><a onclick="localStorage.setItem('new_tab', true);window.open(window.location.href, '_blank');">New tab</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a class="modal-trigger" target="_blank" href="#modal_components">Components</a></li> <li><a class="modal-trigger" target="_blank" href="#modal_components">Components</a></li>
<li><a class="modal-trigger" target="_blank" href="#modal_icons">Material Icons</a></li> <li><a class="modal-trigger" target="_blank" href="#modal_icons">Material Icons</a></li>
@ -649,7 +649,7 @@ INDEX = Template(r"""<!DOCTYPE html>
<li><a class="modal-trigger" href="#modal_exec_command">Execute shell command</a></li> <li><a class="modal-trigger" href="#modal_exec_command">Execute shell command</a></li>
</ul> </ul>
<ul id="dropdown_menu_mobile" class="dropdown-content z-depth-4"> <ul id="dropdown_menu_mobile" class="dropdown-content z-depth-4">
<li><a onclick="window.open(window.location.href, '_blank');">New tab</a></li> <li><a onclick="localStorage.setItem('new_tab', true);window.open(window.location.href, '_blank');">New tab</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a target="_blank" href="https://home-assistant.io/help/">Help</a></li> <li><a target="_blank" href="https://home-assistant.io/help/">Help</a></li>
<li><a target="_blank" href="https://home-assistant.io/components/">Components</a></li> <li><a target="_blank" href="https://home-assistant.io/components/">Components</a></li>
@ -1276,7 +1276,7 @@ INDEX = Template(r"""<!DOCTYPE html>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a class=" modal-action modal-close waves-effect waves-red btn-flat light-blue-text">No</a> <a class=" modal-action modal-close waves-effect waves-red btn-flat light-blue-text">No</a>
<a onclick="document.getElementById('currentfile').value='';editor.getSession().setValue('');$('.markdirty').each(function(i, o){o.classList.remove('red');});document.title = 'HASS Configurator';" class="modal-action modal-close waves-effect waves-green btn-flat light-blue-text">Yes</a> <a onclick="closefile()" class="modal-action modal-close waves-effect waves-green btn-flat light-blue-text">Yes</a>
</div> </div>
</div> </div>
<div id="modal_delete" class="modal"> <div id="modal_delete" class="modal">
@ -2065,6 +2065,64 @@ INDEX = Template(r"""<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var global_current_filepath = null;
var global_current_filename = null;
function got_focus_or_visibility() {
if (global_current_filename && global_current_filepath) {
// The globals are set, set the localStorage to those values
var current_file = {current_filepath: global_current_filepath,
current_filename: global_current_filename}
localStorage.setItem('current_file', JSON.stringify(current_file));
}
else {
// This tab had no prior file opened, clearing from localStorage
localStorage.removeItem('current_file');
}
}
window.onfocus = function() {
console.log("got focus");
got_focus_or_visibility();
}
//window.onblur = function() {
// console.log("lost focus");
//}
// Got this from here: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
}
else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
}
else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
if (document[hidden]) {
// We're doing nothing when the tab gets out of vision
}
else {
// We're doing this if the tab becomes visible
got_focus_or_visibility();
}
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") {
console.log("This requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
}
else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
$(document).ready(function () { $(document).ready(function () {
$('select').material_select(); $('select').material_select();
$('.modal').modal(); $('.modal').modal();
@ -2102,9 +2160,18 @@ INDEX = Template(r"""<!DOCTYPE html>
<script type="text/javascript"> <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){ document.addEventListener("DOMContentLoaded", function(){
$('.preloader-background').delay(800).fadeOut('slow'); $('.preloader-background').delay(800).fadeOut('slow');
$('.preloader-wrapper') $('.preloader-wrapper').delay(800).fadeOut('slow');
.delay(800) if (!localStorage.getItem("new_tab")) {
.fadeOut('slow'); var old_file = localStorage.getItem("current_file");
if (old_file) {
old_file = JSON.parse(old_file);
loadfile(old_file.current_filepath, old_file.current_filename);
}
}
else {
localStorage.removeItem("current_file");
}
localStorage.removeItem("new_tab");
}); });
</script> </script>
<script> <script>
@ -2427,11 +2494,28 @@ INDEX = Template(r"""<!DOCTYPE html>
$('.markdirty').each(function(i, o){o.classList.remove('red');}); $('.markdirty').each(function(i, o){o.classList.remove('red');});
$('.hidesave').css('opacity', 0); $('.hidesave').css('opacity', 0);
document.title = filenameonly + " - HASS Configurator"; document.title = filenameonly + " - HASS Configurator";
global_current_filepath = filepath;
global_current_filename = filenameonly;
var current_file = {current_filepath: global_current_filepath,
current_filename: global_current_filename}
localStorage.setItem('current_file', JSON.stringify(current_file));
check_lint(); check_lint();
}); });
} }
} }
function closefile() {
document.getElementById('currentfile').value='';
editor.getSession().setValue('');
$('.markdirty').each(function(i, o) {
o.classList.remove('red');
});
localStorage.removeItem('current_file');
global_current_filepath = null;
global_current_filename = null;
document.title = 'HASS Configurator';
}
function check_config() { function check_config() {
$.get("api/check_config", function (resp) { $.get("api/check_config", function (resp) {
if (resp.length == 0) { if (resp.length == 0) {

View file

@ -547,7 +547,7 @@
</header> </header>
<main> <main>
<ul id="dropdown_menu" class="dropdown-content z-depth-4"> <ul id="dropdown_menu" class="dropdown-content z-depth-4">
<li><a onclick="window.open(window.location.href, '_blank');">New tab</a></li> <li><a onclick="localStorage.setItem('new_tab', true);window.open(window.location.href, '_blank');">New tab</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a class="modal-trigger" target="_blank" href="#modal_components">Components</a></li> <li><a class="modal-trigger" target="_blank" href="#modal_components">Components</a></li>
<li><a class="modal-trigger" target="_blank" href="#modal_icons">Material Icons</a></li> <li><a class="modal-trigger" target="_blank" href="#modal_icons">Material Icons</a></li>
@ -565,7 +565,7 @@
<li><a class="modal-trigger" href="#modal_exec_command">Execute shell command</a></li> <li><a class="modal-trigger" href="#modal_exec_command">Execute shell command</a></li>
</ul> </ul>
<ul id="dropdown_menu_mobile" class="dropdown-content z-depth-4"> <ul id="dropdown_menu_mobile" class="dropdown-content z-depth-4">
<li><a onclick="window.open(window.location.href, '_blank');">New tab</a></li> <li><a onclick="localStorage.setItem('new_tab', true);window.open(window.location.href, '_blank');">New tab</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a target="_blank" href="https://home-assistant.io/help/">Help</a></li> <li><a target="_blank" href="https://home-assistant.io/help/">Help</a></li>
<li><a target="_blank" href="https://home-assistant.io/components/">Components</a></li> <li><a target="_blank" href="https://home-assistant.io/components/">Components</a></li>
@ -1192,7 +1192,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a class=" modal-action modal-close waves-effect waves-red btn-flat light-blue-text">No</a> <a class=" modal-action modal-close waves-effect waves-red btn-flat light-blue-text">No</a>
<a onclick="document.getElementById('currentfile').value='';editor.getSession().setValue('');$('.markdirty').each(function(i, o){o.classList.remove('red');});document.title = 'HASS Configurator';" class="modal-action modal-close waves-effect waves-green btn-flat light-blue-text">Yes</a> <a onclick="closefile()" class="modal-action modal-close waves-effect waves-green btn-flat light-blue-text">Yes</a>
</div> </div>
</div> </div>
<div id="modal_delete" class="modal"> <div id="modal_delete" class="modal">
@ -1981,6 +1981,64 @@
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var global_current_filepath = null;
var global_current_filename = null;
function got_focus_or_visibility() {
if (global_current_filename && global_current_filepath) {
// The globals are set, set the localStorage to those values
var current_file = {current_filepath: global_current_filepath,
current_filename: global_current_filename}
localStorage.setItem('current_file', JSON.stringify(current_file));
}
else {
// This tab had no prior file opened, clearing from localStorage
localStorage.removeItem('current_file');
}
}
window.onfocus = function() {
console.log("got focus");
got_focus_or_visibility();
}
//window.onblur = function() {
// console.log("lost focus");
//}
// Got this from here: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
}
else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
}
else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
if (document[hidden]) {
// We're doing nothing when the tab gets out of vision
}
else {
// We're doing this if the tab becomes visible
got_focus_or_visibility();
}
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") {
console.log("This requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
}
else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
$(document).ready(function () { $(document).ready(function () {
$('select').material_select(); $('select').material_select();
$('.modal').modal(); $('.modal').modal();
@ -2018,9 +2076,18 @@
<script type="text/javascript"> <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){ document.addEventListener("DOMContentLoaded", function(){
$('.preloader-background').delay(800).fadeOut('slow'); $('.preloader-background').delay(800).fadeOut('slow');
$('.preloader-wrapper') $('.preloader-wrapper').delay(800).fadeOut('slow');
.delay(800) if (!localStorage.getItem("new_tab")) {
.fadeOut('slow'); var old_file = localStorage.getItem("current_file");
if (old_file) {
old_file = JSON.parse(old_file);
loadfile(old_file.current_filepath, old_file.current_filename);
}
}
else {
localStorage.removeItem("current_file");
}
localStorage.removeItem("new_tab");
}); });
</script> </script>
<script> <script>
@ -2343,11 +2410,28 @@
$('.markdirty').each(function(i, o){o.classList.remove('red');}); $('.markdirty').each(function(i, o){o.classList.remove('red');});
$('.hidesave').css('opacity', 0); $('.hidesave').css('opacity', 0);
document.title = filenameonly + " - HASS Configurator"; document.title = filenameonly + " - HASS Configurator";
global_current_filepath = filepath;
global_current_filename = filenameonly;
var current_file = {current_filepath: global_current_filepath,
current_filename: global_current_filename}
localStorage.setItem('current_file', JSON.stringify(current_file));
check_lint(); check_lint();
}); });
} }
} }
function closefile() {
document.getElementById('currentfile').value='';
editor.getSession().setValue('');
$('.markdirty').each(function(i, o) {
o.classList.remove('red');
});
localStorage.removeItem('current_file');
global_current_filepath = null;
global_current_filename = null;
document.title = 'HASS Configurator';
}
function check_config() { function check_config() {
$.get("api/check_config", function (resp) { $.get("api/check_config", function (resp) {
if (resp.length == 0) { if (resp.length == 0) {