Merge pull request #11028 from Piccirello/webui-extract-localstorage

Extract WebUI localStorage access into class

src/webui/www/private/index.html

@@ -19,6 +19,7 @@
     <script src="scripts/lib/mootools-1.2-core-yc.js"></script>
     <script src="scripts/lib/mootools-1.2-more.js"></script>
     <script src="scripts/lib/mocha-0.9.6-yc.js"></script>
+    <script src="scripts/preferences.js"></script>
     <script src="scripts/mocha-init.js?locale=${LANG}&v=${CACHEID}"></script>
     <script src="scripts/lib/clipboard-2.0.0.min.js"></script>
     <script src="scripts/filesystem.js?v=${CACHEID}"></script>

src/webui/www/private/scripts/client.js

@@ -64,17 +64,17 @@ let tagList = {};
 let selectedTag = TAGS_ALL;
 let setTagFilter = function() {};
 
-let selected_filter = getLocalStorageItem('selected_filter', 'all');
+let selected_filter = LocalPreferences.get('selected_filter', 'all');
 let setFilter = function() {};
 let toggleFilterDisplay = function() {};
 
 const loadSelectedCategory = function() {
-    selected_category = getLocalStorageItem('selected_category', CATEGORIES_ALL);
+    selected_category = LocalPreferences.get('selected_category', CATEGORIES_ALL);
 };
 loadSelectedCategory();
 
 const loadSelectedTag = function() {
-    selectedTag = getLocalStorageItem('selected_tag', TAGS_ALL);
+    selectedTag = LocalPreferences.get('selected_tag', TAGS_ALL);
 };
 loadSelectedTag();
 
@@ -115,8 +115,8 @@ window.addEvent('load', function() {
     const saveColumnSizes = function() {
         const filters_width = $('Filters').getSize().x;
         const properties_height_rel = $('propertiesPanel').getSize().y / Window.getSize().y;
-        localStorage.setItem('filters_width', filters_width);
+        LocalPreferences.set('filters_width', filters_width);
-        localStorage.setItem('properties_height_rel', properties_height_rel);
+        LocalPreferences.set('properties_height_rel', properties_height_rel);
     };
 
     window.addEvent('resize', function() {
@@ -133,7 +133,7 @@ window.addEvent('load', function() {
     MochaUI.Desktop.initialize();
 
     const buildTransfersTab = function() {
-        let filt_w = localStorage.getItem('filters_width');
+        let filt_w = LocalPreferences.get('filters_width');
         if ($defined(filt_w))
             filt_w = filt_w.toInt();
         else
@@ -169,7 +169,7 @@ window.addEvent('load', function() {
 
     setCategoryFilter = function(hash) {
         selected_category = hash;
-        localStorage.setItem('selected_category', selected_category);
+        LocalPreferences.set('selected_category', selected_category);
         highlightSelectedCategory();
         if (typeof torrentsTable.tableBody != 'undefined')
             updateMainData();
@@ -177,7 +177,7 @@ window.addEvent('load', function() {
 
     setTagFilter = function(hash) {
         selectedTag = hash.toString();
-        localStorage.setItem('selected_tag', selectedTag);
+        LocalPreferences.set('selected_tag', selectedTag);
         highlightSelectedTag();
         if (torrentsTable.tableBody !== undefined)
             updateMainData();
@@ -196,7 +196,7 @@ window.addEvent('load', function() {
         $("errored_filter").removeClass("selectedFilter");
         $(f + "_filter").addClass("selectedFilter");
         selected_filter = f;
-        localStorage.setItem('selected_filter', f);
+        LocalPreferences.set('selected_filter', f);
         // Reload torrents
         if (typeof torrentsTable.tableBody != 'undefined')
             updateMainData();
@@ -204,7 +204,7 @@ window.addEvent('load', function() {
 
     toggleFilterDisplay = function(filter) {
         const element = filter + "FilterList";
-        localStorage.setItem('filter_' + filter + "_collapsed", !$(element).hasClass("invisible"));
+        LocalPreferences.set('filter_' + filter + "_collapsed", !$(element).hasClass("invisible"));
         $(element).toggleClass("invisible")
         const parent = $(element).getParent(".filterWrapper");
         const toggleIcon = $(parent).getChildren(".filterTitle img");
@@ -234,8 +234,8 @@ window.addEvent('load', function() {
 
     // Show Top Toolbar is enabled by default
     let showTopToolbar = true;
-    if (localStorage.getItem('show_top_toolbar') !== null)
+    if (LocalPreferences.get('show_top_toolbar') !== null)
-        showTopToolbar = localStorage.getItem('show_top_toolbar') == "true";
+        showTopToolbar = LocalPreferences.get('show_top_toolbar') == "true";
     if (!showTopToolbar) {
         $('showTopToolbarLink').firstChild.style.opacity = '0';
         $('mochaToolbar').addClass('invisible');
@@ -243,19 +243,19 @@ window.addEvent('load', function() {
 
     // Show Status Bar is enabled by default
     let showStatusBar = true;
-    if (localStorage.getItem('show_status_bar') !== null)
+    if (LocalPreferences.get('show_status_bar') !== null)
-        showStatusBar = localStorage.getItem('show_status_bar') === "true";
+        showStatusBar = LocalPreferences.get('show_status_bar') === "true";
     if (!showStatusBar) {
         $('showStatusBarLink').firstChild.style.opacity = '0';
         $('desktopFooterWrapper').addClass('invisible');
     }
 
-    let speedInTitle = localStorage.getItem('speed_in_browser_title_bar') == "true";
+    let speedInTitle = LocalPreferences.get('speed_in_browser_title_bar') == "true";
     if (!speedInTitle)
         $('speedInBrowserTitleBarLink').firstChild.style.opacity = '0';
 
     // After showing/hiding the toolbar + status bar
-    let showSearchEngine = localStorage.getItem('show_search_engine') !== "false";
+    let showSearchEngine = LocalPreferences.get('show_search_engine') !== "false";
     if (!showSearchEngine) {
         // uncheck menu option
         $('showSearchEngineLink').firstChild.style.opacity = '0';
@@ -705,7 +705,7 @@ window.addEvent('load', function() {
 
     $('showTopToolbarLink').addEvent('click', function(e) {
         showTopToolbar = !showTopToolbar;
-        localStorage.setItem('show_top_toolbar', showTopToolbar.toString());
+        LocalPreferences.set('show_top_toolbar', showTopToolbar.toString());
         if (showTopToolbar) {
             $('showTopToolbarLink').firstChild.style.opacity = '1';
             $('mochaToolbar').removeClass('invisible');
@@ -719,7 +719,7 @@ window.addEvent('load', function() {
 
     $('showStatusBarLink').addEvent('click', function(e) {
         showStatusBar = !showStatusBar;
-        localStorage.setItem('show_status_bar', showStatusBar.toString());
+        LocalPreferences.set('show_status_bar', showStatusBar.toString());
         if (showStatusBar) {
             $('showStatusBarLink').firstChild.style.opacity = '1';
             $('desktopFooterWrapper').removeClass('invisible');
@@ -737,7 +737,7 @@ window.addEvent('load', function() {
 
     $('speedInBrowserTitleBarLink').addEvent('click', function(e) {
         speedInTitle = !speedInTitle;
-        localStorage.setItem('speed_in_browser_title_bar', speedInTitle.toString());
+        LocalPreferences.set('speed_in_browser_title_bar', speedInTitle.toString());
         if (speedInTitle)
             $('speedInBrowserTitleBarLink').firstChild.style.opacity = '1';
         else
@@ -747,7 +747,7 @@ window.addEvent('load', function() {
 
     $('showSearchEngineLink').addEvent('click', function(e) {
         showSearchEngine = !showSearchEngine;
-        localStorage.setItem('show_search_engine', showSearchEngine.toString());
+        LocalPreferences.set('show_search_engine', showSearchEngine.toString());
         if (showSearchEngine) {
             $('showSearchEngineLink').firstChild.style.opacity = '1';
             $('mainWindowTabs').removeClass('invisible');
@@ -853,7 +853,7 @@ window.addEvent('load', function() {
         onResize: saveColumnSizes,
         height: null
     });
-    let prop_h = localStorage.getItem('properties_height_rel');
+    let prop_h = LocalPreferences.get('properties_height_rel');
     if ($defined(prop_h))
         prop_h = prop_h.toFloat() * Window.getSize().y;
     else
@@ -895,7 +895,7 @@ window.addEvent('load', function() {
                 $('prop_general').removeClass("invisible");
                 hideFilesFilter();
                 updatePropertiesPanel();
-                localStorage.setItem('selected_tab', this.id);
+                LocalPreferences.set('selected_tab', this.id);
             });
 
             $('PropTrackersLink').addEvent('click', function(e) {
@@ -903,7 +903,7 @@ window.addEvent('load', function() {
                 $('prop_trackers').removeClass("invisible");
                 hideFilesFilter();
                 updatePropertiesPanel();
-                localStorage.setItem('selected_tab', this.id);
+                LocalPreferences.set('selected_tab', this.id);
             });
 
             $('PropPeersLink').addEvent('click', function(e) {
@@ -911,7 +911,7 @@ window.addEvent('load', function() {
                 $('prop_peers').removeClass("invisible");
                 hideFilesFilter();
                 updatePropertiesPanel();
-                localStorage.setItem('selected_tab', this.id);
+                LocalPreferences.set('selected_tab', this.id);
             });
 
             $('PropWebSeedsLink').addEvent('click', function(e) {
@@ -919,7 +919,7 @@ window.addEvent('load', function() {
                 $('prop_webseeds').removeClass("invisible");
                 hideFilesFilter();
                 updatePropertiesPanel();
-                localStorage.setItem('selected_tab', this.id);
+                LocalPreferences.set('selected_tab', this.id);
             });
 
             $('PropFilesLink').addEvent('click', function(e) {
@@ -927,7 +927,7 @@ window.addEvent('load', function() {
                 $('prop_files').removeClass("invisible");
                 showFilesFilter();
                 updatePropertiesPanel();
-                localStorage.setItem('selected_tab', this.id);
+                LocalPreferences.set('selected_tab', this.id);
             });
 
             $('propertiesPanel_collapseToggle').addEvent('click', function(e) {

src/webui/www/private/scripts/dynamicTable.js

@@ -50,8 +50,8 @@ const DynamicTable = new Class({
         this.selectedRows = [];
         this.columns = [];
         this.contextMenu = contextMenu;
-        this.sortedColumn = getLocalStorageItem('sorted_column_' + this.dynamicTableDivId, 0);
+        this.sortedColumn = LocalPreferences.get('sorted_column_' + this.dynamicTableDivId, 0);
-        this.reverseSort = getLocalStorageItem('reverse_sort_' + this.dynamicTableDivId, '0');
+        this.reverseSort = LocalPreferences.get('reverse_sort_' + this.dynamicTableDivId, '0');
         this.initColumns();
         this.loadColumnsOrder();
         this.updateTableHeaders();
@@ -214,15 +214,15 @@ const DynamicTable = new Class({
             resetElementBorderStyle(this.lastHoverTh);
             el.setStyle('background-color', '');
             if (this.currentHeaderAction === 'resize')
-                localStorage.setItem('column_' + this.resizeTh.columnName + '_width_' + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width);
+                LocalPreferences.set('column_' + this.resizeTh.columnName + '_width_' + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width);
             if ((this.currentHeaderAction === 'drag') && (el !== this.lastHoverTh)) {
                 this.saveColumnsOrder();
-                const val = localStorage.getItem('columns_order_' + this.dynamicTableDivId).split(',');
+                const val = LocalPreferences.get('columns_order_' + this.dynamicTableDivId).split(',');
                 val.erase(el.columnName);
                 let pos = val.indexOf(this.lastHoverTh.columnName);
                 if (this.dropSide === 'right') ++pos;
                 val.splice(pos, 0, el.columnName);
-                localStorage.setItem('columns_order_' + this.dynamicTableDivId, val.join(','));
+                LocalPreferences.set('columns_order_' + this.dynamicTableDivId, val.join(','));
                 this.loadColumnsOrder();
                 this.updateTableHeaders();
                 while (this.tableBody.firstChild)
@@ -283,7 +283,7 @@ const DynamicTable = new Class({
 
     showColumn: function(columnName, show) {
         this.columns[columnName].visible = show ? '1' : '0';
-        localStorage.setItem('column_' + columnName + '_visible_' + this.dynamicTableDivId, show ? '1' : '0');
+        LocalPreferences.set('column_' + columnName + '_visible_' + this.dynamicTableDivId, show ? '1' : '0');
         this.updateColumn(columnName);
     },
 
@@ -339,11 +339,11 @@ const DynamicTable = new Class({
         const column = {};
         column['name'] = name;
         column['title'] = name;
-        column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.dynamicTableDivId, defaultVisible ? '1' : '0');
+        column['visible'] = LocalPreferences.get('column_' + name + '_visible_' + this.dynamicTableDivId, defaultVisible ? '1' : '0');
         column['force_hide'] = false;
         column['caption'] = caption;
         column['style'] = style;
-        column['width'] = getLocalStorageItem('column_' + name + '_width_' + this.dynamicTableDivId, defaultWidth);
+        column['width'] = LocalPreferences.get('column_' + name + '_width_' + this.dynamicTableDivId, defaultWidth);
         column['dataProperties'] = [name];
         column['getRowValue'] = function(row, pos) {
             if (pos === undefined)
@@ -372,7 +372,7 @@ const DynamicTable = new Class({
 
     loadColumnsOrder: function() {
         const columnsOrder = [];
-        const val = localStorage.getItem('columns_order_' + this.dynamicTableDivId);
+        const val = LocalPreferences.get('columns_order_' + this.dynamicTableDivId);
         if (val === null || val === undefined) return;
         val.split(',').forEach(function(v) {
             if ((v in this.columns) && (!columnsOrder.contains(v)))
@@ -394,7 +394,7 @@ const DynamicTable = new Class({
                 val += ',';
             val += this.columns[i].name;
         }
-        localStorage.setItem('columns_order_' + this.dynamicTableDivId, val);
+        LocalPreferences.set('columns_order_' + this.dynamicTableDivId, val);
     },
 
     updateTableHeaders: function() {
@@ -456,7 +456,7 @@ const DynamicTable = new Class({
     },
 
     getSortedColumn: function() {
-        return localStorage.getItem('sorted_column_' + this.dynamicTableDivId);
+        return LocalPreferences.get('sorted_column_' + this.dynamicTableDivId);
     },
 
     setSortedColumn: function(column) {
@@ -471,8 +471,8 @@ const DynamicTable = new Class({
             this.reverseSort = this.reverseSort === '0' ? '1' : '0';
             this.setSortedColumnIcon(column, null, (this.reverseSort === '1'));
         }
-        localStorage.setItem('sorted_column_' + this.dynamicTableDivId, column);
+        LocalPreferences.set('sorted_column_' + this.dynamicTableDivId, column);
-        localStorage.setItem('reverse_sort_' + this.dynamicTableDivId, this.reverseSort);
+        LocalPreferences.set('reverse_sort_' + this.dynamicTableDivId, this.reverseSort);
         this.updateTable(false);
     },
 

src/webui/www/private/scripts/mocha-init.js

@@ -38,26 +38,7 @@
    ----------------------------------------------------------------- */
 'use strict';
 
-/* Define localStorage object for older browsers */
+const LocalPreferences = new LocalPreferencesClass();
-if (typeof localStorage == 'undefined') {
-    window['localStorage'] = {
-        getItem: function(name) {
-            return Cookie.read(name);
-        },
-        setItem: function(name, value) {
-            Cookie.write(name, value, {
-                duration: 365 * 10
-            });
-        }
-    };
-}
-
-function getLocalStorageItem(name, defaultVal) {
-    let val = localStorage.getItem(name);
-    if (val === null || val === undefined)
-        val = defaultVal;
-    return val;
-}
 
 let saveWindowSize = function() {};
 let loadWindowWidth = function() {};
@@ -107,16 +88,16 @@ let setQueuePositionFN = function() {};
 const initializeWindows = function() {
     saveWindowSize = function(windowId) {
         const size = $(windowId).getSize();
-        localStorage.setItem('window_' + windowId + '_width', size.x);
+        LocalPreferences.set('window_' + windowId + '_width', size.x);
-        localStorage.setItem('window_' + windowId + '_height', size.y);
+        LocalPreferences.set('window_' + windowId + '_height', size.y);
     };
 
     loadWindowWidth = function(windowId, defaultValue) {
-        return getLocalStorageItem('window_' + windowId + '_width', defaultValue);
+        return LocalPreferences.get('window_' + windowId + '_width', defaultValue);
     };
 
     loadWindowHeight = function(windowId, defaultValue) {
-        return getLocalStorageItem('window_' + windowId + '_height', defaultValue);
+        return LocalPreferences.get('window_' + windowId + '_height', defaultValue);
     };
 
     function addClickEvent(el, fn) {

src/webui/www/private/scripts/preferences.js

@@ -0,0 +1,47 @@
+/*
+ * Bittorrent Client using Qt and libtorrent.
+ * Copyright (C) 2019  Thomas Piccirello <thomas.piccirello@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * In addition, as a special exception, the copyright holders give permission to
+ * link this program with the OpenSSL project's "OpenSSL" library (or with
+ * modified versions of it that use the same license as the "OpenSSL" library),
+ * and distribute the linked executables. You must obey the GNU General Public
+ * License in all respects for all of the code used other than "OpenSSL".  If you
+ * modify file(s), you may extend this exception to your version of the file(s),
+ * but you are not obligated to do so. If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+'use strict';
+
+const LocalPreferencesClass = new Class({
+    get: function(key, defaultValue) {
+        const value = localStorage.getItem(key);
+        return ((value === null) && (defaultValue !== undefined))
+            ? defaultValue
+            : value;
+    },
+
+    set: function(key, value) {
+        try {
+            localStorage.setItem(key, value);
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+})

src/webui/www/private/views/filters.html

@@ -99,12 +99,12 @@
         }
     });
 
-    if (localStorage.getItem('filter_status_collapsed') === "true")
+    if (LocalPreferences.get('filter_status_collapsed') === "true")
         toggleFilterDisplay('status');
 
-    if (localStorage.getItem('filter_category_collapsed') === "true")
+    if (LocalPreferences.get('filter_category_collapsed') === "true")
         toggleFilterDisplay('category');
 
-    if (localStorage.getItem('filter_tag_collapsed') === "true")
+    if (LocalPreferences.get('filter_tag_collapsed') === "true")
         toggleFilterDisplay('tag');
 </script>

src/webui/www/private/views/properties.html

@@ -155,7 +155,7 @@
 <script>
     'use strict';
 
-    const selectedTab = $(getLocalStorageItem('selected_tab', 'PropGeneralLink'));
+    const selectedTab = $(LocalPreferences.get('selected_tab', 'PropGeneralLink'));
     if (selectedTab)
         selectedTab.click();
 </script>

src/webui/www/private/views/search.html

@@ -186,7 +186,7 @@
 
     const initSearchTab = function() {
         // load "Search in" preference from local storage
-        $('searchInTorrentName').set('value', (localStorage.getItem('search_in_filter') === "names") ? "names" : "everywhere");
+        $('searchInTorrentName').set('value', (LocalPreferences.get('search_in_filter') === "names") ? "names" : "everywhere");
         const searchResultsTableContextMenu = new ContextMenu({
             targets: '.searchTableRow',
             menu: 'searchResultsTableMenu',
@@ -520,9 +520,9 @@
 
     const searchInTorrentName = function() {
         if ($('searchInTorrentName').get('value') === "names")
-            localStorage.setItem('search_in_filter', "names");
+            LocalPreferences.set('search_in_filter', "names");
         else
-            localStorage.setItem('search_in_filter', "everywhere");
+            LocalPreferences.set('search_in_filter', "everywhere");
 
         searchFilterChanged();
     };

src/webui/www/webui.qrc

@@ -29,6 +29,7 @@
         <file>private/scripts/lib/mootools-1.2-more.js</file>
         <file>private/scripts/misc.js</file>
         <file>private/scripts/mocha-init.js</file>
+        <file>private/scripts/preferences.js</file>
         <file>private/scripts/progressbar.js</file>
         <file>private/scripts/prop-files.js</file>
         <file>private/scripts/prop-general.js</file>