multiple page list with tagcheck are allowed in page render

- If two LIST have exact same options, it still create a conflict.
- added classes to span and form to help select them. Ex: to hide a specific checkbox

Author: vincent-peugnet

app/class/Optlist.php

@@ -19,7 +19,7 @@ class Optlist extends Optcode
     protected bool $timemodif = false;
     protected bool $author = false;
     protected bool $hidecurrent = false;
-    protected bool $checkbox = false;
+    protected bool $tagcheck = false;
     protected string $style = self::LIST;
 
     public const LIST = 'list';
@@ -29,6 +29,7 @@ class Optlist extends Optcode
         self::CARD => self::CARD,
     ];
 
+    /** @var array<string, int> $usefulltags */
     protected array $usefulltags = [];
 
     /**
@@ -159,7 +160,7 @@ public function listhtml(array $pagelist, Page $currentpage): string
                     $thumbnail->setAttribute('alt', htmlspecialchars($page->title()));
                     $parent->appendChild($thumbnail);
                 }
-                if ($this->checkbox) {
+                if ($this->tagcheck) {
                     $tags = $page->tag();
                     $this->addusefulltags($tags);
                     foreach ($tags as $tag) {
@@ -169,15 +170,19 @@ public function listhtml(array $pagelist, Page $currentpage): string
             }
             $dom->appendChild($ul);
 
-            if ($this->checkbox) {
+            if ($this->tagcheck) {
+                $hash = crc32(serialize($this));
                 $domform = new DOMDocument('1.0', 'UTF-8');
                 $form = $domform->createElement('form');
+                $form->setAttribute('class', 'tagcheck');
+                $form->setAttribute('id', "tagcheck-$hash");
                 foreach ($this->usefulltags as $tag => $count) {
                     if ($count === $pagecount) {
                         continue; // skip this tag as it's used by all pages
                     }
                     $span = $domform->createElement('span');
-                    $id = "checkbox-tag_$tag";
+                    $span->setAttribute('class', "tag_$tag");
+                    $id = "tagcheck-$hash-tag_$tag";
                     $input = $domform->createElement('input');
                     $input->setAttribute('id', $id);
                     $input->setAttribute('value', $tag);
@@ -203,7 +208,9 @@ public function listhtml(array $pagelist, Page $currentpage): string
 
     /**
      * merge list of tags within the list of usefull tags.
-     * Tag names are stored as key and value count the time it's used.
+     * Tag name is key and value count the time it's used.
+     *
+     * @param string[] $tags
      */
     private function addusefulltags(array $tags): void
     {
@@ -267,9 +274,9 @@ public function hidecurrent(): bool
         return $this->hidecurrent;
     }
 
-    public function checkbox(): bool
+    public function tagcheck(): bool
     {
-        return $this->checkbox;
+        return $this->tagcheck;
     }
 
     public function style(): string
@@ -325,12 +332,12 @@ public function sethidecurrent(bool $hidecurrent): void
         $this->hidecurrent = $hidecurrent;
     }
 
-    public function setcheckbox($checkbox)
+    public function settagcheck(bool $tagcheck): void
     {
-        $this->checkbox = boolval($checkbox);
+        $this->tagcheck = $tagcheck;
     }
 
-    public function setstyle(string $style)
+    public function setstyle(string $style): void
     {
         if (key_exists($style, self::STYLES)) {
             $this->style = $style;

app/class/Servicerender.php

@@ -737,7 +737,7 @@ protected function pageoptlist(string $text): string
 
                 $optlist->hydrate($options);
 
-                if ($optlist->checkbox()) {
+                if ($optlist->tagcheck()) {
                     $this->checkboxjs = true;
                 }
 

src/pagecheckbox.js

@@ -1,13 +1,14 @@
-console.log('yoo');
+const formFilters = document.querySelectorAll('form');
 
-const formFilter = document.querySelector('form');
-
-function w_filterpagelist() {
+function filterpagelist(id) {
+    let idSelector = '#' + id;
     let tagCheckboxesChecked = document.querySelectorAll(
-        'input[type="checkbox"]:checked'
+        'form' + idSelector + ' input[type="checkbox"]:checked'
     );
 
-    let pages = document.querySelectorAll('.pagelist li');
+    let pages = document.querySelectorAll(
+        'form' + idSelector + ' + .pagelist li'
+    );
     let tagCount = tagCheckboxesChecked.length;
 
     for (var li of pages) {
@@ -31,4 +32,8 @@ function w_filterpagelist() {
     }
 }
 
-formFilter.addEventListener('click', w_filterpagelist);
+for (let formFilter of formFilters) {
+    formFilter.addEventListener('click', () => {
+        filterpagelist(formFilter.id);
+    });
+}