From 339dbe31dc830774e653c47c0e66d5e7aad17822 Mon Sep 17 00:00:00 2001 From: Rico Sonntag Date: Thu, 28 Dec 2023 10:28:53 +0100 Subject: [PATCH] Fix storing checkbox values in local storage --- resources/js/modules/lib/storage.js | 22 ++++++++--- resources/js/pedigree-chart-storage.min.js | 2 +- .../views/modules/components/checkbox.phtml | 39 +++++++++++++++++++ .../views/modules/pedigree-chart/chart.phtml | 12 ++---- .../pedigree-chart/form/generations.phtml | 1 - .../views/modules/pedigree-chart/page.phtml | 11 +++--- 6 files changed, 64 insertions(+), 23 deletions(-) create mode 100644 resources/views/modules/components/checkbox.phtml diff --git a/resources/js/modules/lib/storage.js b/resources/js/modules/lib/storage.js index 007cd52..d8a4a9a 100644 --- a/resources/js/modules/lib/storage.js +++ b/resources/js/modules/lib/storage.js @@ -1,5 +1,5 @@ /** - * This file is part of the package magicsunday/webtrees-pedigree-chart. + * This file is part of the package magicsunday/webtrees-descendants-chart. * * For the full copyright and license information, please read the * LICENSE file distributed with this source code. @@ -10,7 +10,7 @@ * * @author Rico Sonntag * @license https://opensource.org/licenses/GPL-3.0 GNU General Public License v3.0 - * @link https://github.com/magicsunday/webtrees-pedigree-chart/ + * @link https://github.com/magicsunday/webtrees-descendants-chart/ */ export class Storage { @@ -32,10 +32,16 @@ export class Storage */ register(name) { - let input = document.getElementById(name); + // Use "querySelector" here as the ID of a checkbox elements may additionally contain a hyphen and the value + let input = document.querySelector('[id^="' + name + '"]'); + + if (input === null) { + return; + } + let storedValue = this.read(name); - if (storedValue) { + if (storedValue !== null) { if (input.type && (input.type === "checkbox")) { input.checked = storedValue; } else { @@ -70,11 +76,15 @@ export class Storage * * @param {String} name The id or name of an HTML element * - * @returns {String|Boolean|Number} + * @returns {null|String|Boolean|Number} */ read(name) { - return this._storage[name]; + if (this._storage.hasOwnProperty(name)) { + return this._storage[name]; + } + + return null; } /** diff --git a/resources/js/pedigree-chart-storage.min.js b/resources/js/pedigree-chart-storage.min.js index f41c216..872989a 100644 --- a/resources/js/pedigree-chart-storage.min.js +++ b/resources/js/pedigree-chart-storage.min.js @@ -1 +1 @@ -var e,t;e=this,t=function(e){e.Storage=class{constructor(e){this._name=e,this._storage=JSON.parse(localStorage.getItem(this._name))||{}}register(e){let t=document.getElementById(e),s=this.read(e);s?t.type&&"checkbox"===t.type?t.checked=s:t.value=s:this.onInput(t),t.addEventListener("input",(e=>{this.onInput(e.target)}))}onInput(e){e.type&&"checkbox"===e.type?this.write(e.name,e.checked):this.write(e.name,e.value)}read(e){return this._storage[e]}write(e,t){this._storage[e]=t,localStorage.setItem(this._name,JSON.stringify(this._storage))}}},"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).WebtreesPedigreeChart={}); +var e,t;e=this,t=function(e){e.Storage=class{constructor(e){this._name=e,this._storage=JSON.parse(localStorage.getItem(this._name))||{}}register(e){let t=document.querySelector('[id^="'+e+'"]');if(null===t)return;let r=this.read(e);null!==r?t.type&&"checkbox"===t.type?t.checked=r:t.value=r:this.onInput(t),t.addEventListener("input",(e=>{this.onInput(e.target)}))}onInput(e){e.type&&"checkbox"===e.type?this.write(e.name,e.checked):this.write(e.name,e.value)}read(e){return this._storage.hasOwnProperty(e)?this._storage[e]:null}write(e,t){this._storage[e]=t,localStorage.setItem(this._name,JSON.stringify(this._storage))}}},"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).WebtreesPedigreeChart={}); diff --git a/resources/views/modules/components/checkbox.phtml b/resources/views/modules/components/checkbox.phtml new file mode 100644 index 0000000..15cfccf --- /dev/null +++ b/resources/views/modules/components/checkbox.phtml @@ -0,0 +1,39 @@ + + + + + $checked ?? null, + 'disabled' => $disabled ?? null, + 'id' => $id ?? null, + 'label' => $label, + 'name' => $name, + 'value' => $value ?? '1', + 'unchecked' => $unchecked, + ]) +?> diff --git a/resources/views/modules/pedigree-chart/chart.phtml b/resources/views/modules/pedigree-chart/chart.phtml index 00fbaa8..aef58f0 100644 --- a/resources/views/modules/pedigree-chart/chart.phtml +++ b/resources/views/modules/pedigree-chart/chart.phtml @@ -40,21 +40,15 @@ new WebtreesPedigreeChart.PedigreeChart( cssFiles: , get generations() { - return typeof generations !== "undefined" - ? generations - : getGenerations() ?> + return generations ?? getGenerations() ?> }, get showEmptyBoxes() { - return typeof showEmptyBoxes !== "undefined" - ? showEmptyBoxes - : getShowEmptyBoxes()) ?>; + return showEmptyBoxes ?? getShowEmptyBoxes()) ?>; }, get treeLayout() { - return typeof treeLayout !== "undefined" - ? treeLayout - : getLayout()) ?>; + return treeLayout ?? getLayout()) ?>; }, data: diff --git a/resources/views/modules/pedigree-chart/form/generations.phtml b/resources/views/modules/pedigree-chart/form/generations.phtml index fba163d..8a4efc2 100644 --- a/resources/views/modules/pedigree-chart/form/generations.phtml +++ b/resources/views/modules/pedigree-chart/form/generations.phtml @@ -24,7 +24,6 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
'generations', 'name' => 'generations', 'selected' => $configuration->getGenerations(), 'options' => $configuration->getGenerationsList(), diff --git a/resources/views/modules/pedigree-chart/page.phtml b/resources/views/modules/pedigree-chart/page.phtml index d9f72d7..2251739 100644 --- a/resources/views/modules/pedigree-chart/page.phtml +++ b/resources/views/modules/pedigree-chart/page.phtml @@ -41,7 +41,6 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
'xref', 'name' => 'xref', 'individual' => $individual, 'tree' => $tree, @@ -61,11 +60,11 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
'showEmptyBoxes', - 'name' => 'showEmptyBoxes', - 'label' => I18N::translate('Show empty boxes for missing individuals. Caution: May slow down your system!'), - 'checked' => $configuration->getShowEmptyBoxes(), + view($moduleName . '::modules/components/checkbox', [ + 'name' => 'showEmptyBoxes', + 'label' => I18N::translate('Show empty boxes for missing individuals. Caution: May slow down your system!'), + 'checked' => $configuration->getShowEmptyBoxes(), + 'unchecked' => '0', ]) ?>