Fix storing checkbox values in local storage

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 <[email protected]>
  * @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;
     }
 
     /**

resources/views/modules/components/checkbox.phtml

@@ -0,0 +1,39 @@
+<?php
+
+/**
+ * This file is part of the package magicsunday/webtrees-pedigree-chart.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE file distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+/**
+ * Extends the default checkbox component with a hidden input field used to submit a default value
+ * if the checkbox is not checked, otherwise the submitted form won't contain the checkbox value.
+ *
+ * @var bool|null   $checked
+ * @var bool|null   $disabled
+ * @var string|null $id
+ * @var string      $label
+ * @var string      $name
+ * @var string      $value
+ * @var string      $unchecked
+ */
+
+?>
+
+<input type="hidden" value="<?= e($unchecked) ?>" name="<?= e($name) ?>">
+
+<?=
+    view('components/checkbox', [
+        'checked'   => $checked ?? null,
+        'disabled'  => $disabled ?? null,
+        'id'        => $id ?? null,
+        'label'     => $label,
+        'name'      => $name,
+        'value'     => $value ?? '1',
+        'unchecked' => $unchecked,
+    ])
+?>

resources/views/modules/pedigree-chart/chart.phtml

@@ -40,21 +40,15 @@ new WebtreesPedigreeChart.PedigreeChart(
         cssFiles: <?= json_encode($exportStylesheets) ?>,
 
         get generations() {
-            return typeof generations !== "undefined"
-                ? generations
-                : <?= $configuration->getGenerations() ?>
+            return generations ?? <?= $configuration->getGenerations() ?>
         },
 
         get showEmptyBoxes() {
-            return typeof showEmptyBoxes !== "undefined"
-                ? showEmptyBoxes
-                : <?= json_encode($configuration->getShowEmptyBoxes()) ?>;
+            return showEmptyBoxes ?? <?= json_encode($configuration->getShowEmptyBoxes()) ?>;
         },
 
         get treeLayout() {
-            return typeof treeLayout !== "undefined"
-                ? treeLayout
-                : <?= json_encode($configuration->getLayout()) ?>;
+            return treeLayout ?? <?= json_encode($configuration->getLayout()) ?>;
         },
 
         data: <?= json_encode($data) ?>

resources/views/modules/pedigree-chart/form/generations.phtml

@@ -24,7 +24,6 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
     <div class="col-sm-9 wt-page-options-value">
         <?=
         view('components/select', [
-            'id'       => 'generations',
             'name'     => 'generations',
             'selected' => $configuration->getGenerations(),
             'options'  => $configuration->getGenerationsList(),

resources/views/modules/pedigree-chart/page.phtml

@@ -41,7 +41,6 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
             <div class="col-sm-9 wt-page-options-value">
                 <?=
                     view('components/select-individual', [
-                        'id'         => 'xref',
                         'name'       => 'xref',
                         'individual' => $individual,
                         'tree'       => $tree,
@@ -61,11 +60,11 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
                 </label>
                 <div class="col-sm-9 wt-page-options-value">
                     <?=
-                    view('components/checkbox', [
-                        'id'      => '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',
                     ])
                     ?>
                 </div>