WIP: implement LIST checkbox filtering by tag see #514

Author: vincent-peugnet

app/class/Optlist.php

@@ -17,7 +17,7 @@ class Optlist extends Optcode
     protected bool $time = false;
     protected bool $author = false;
     protected bool $hidecurrent = false;
-    protected bool $tags = false;
+    protected bool $checkbox = false;
     protected string $style = self::LIST;
 
     public const LIST = 'list';
@@ -27,6 +27,8 @@ class Optlist extends Optcode
         self::CARD => self::CARD,
     ];
 
+    protected array $usefulltags = [];
+
     /**
      * @param array<string, mixed> $datas
      */
@@ -52,6 +54,9 @@ public function getcode(): string
      */
     public function listhtml(array $pagelist, Page $currentpage): string
     {
+        $pagecount = count($pagelist);
+        $html = '';
+
         if ($this->hidecurrent && key_exists($currentpage->id(), $pagelist)) {
             unset($pagelist[$currentpage->id()]);
         }
@@ -137,16 +142,63 @@ public function listhtml(array $pagelist, Page $currentpage): string
                     $thumbnail->setAttribute('alt', htmlspecialchars($page->title()));
                     $parent->appendChild($thumbnail);
                 }
+                if ($this->checkbox) {
+                    $tags = $page->tag();
+                    $this->addusefulltags($tags);
+                    foreach ($tags as $tag) {
+                        $parent->setAttribute("data-tag_$tag", '1');
+                    }
+                }
             }
-
             $dom->appendChild($ul);
 
-            return $dom->saveHTML($dom->documentElement);
+            if ($this->checkbox) {
+                $domform = new DOMDocument('1.0', 'UTF-8');
+                $form = $domform->createElement('form');
+                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";
+                    $input = $domform->createElement('input');
+                    $input->setAttribute('id', $id);
+                    $input->setAttribute('value', $tag);
+                    $input->setAttribute('type', 'checkbox');
+                    $label = $domform->createElement('label', $tag);
+                    $label->setAttribute('for', $id);
+                    $span->appendChild($input);
+                    $span->appendChild($label);
+                    $form->appendChild($span);
+                }
+                $domform->appendChild($form);
+                $html .= $domform->saveHTML($domform->documentElement);
+                $html .= "\n";
+            }
+
+            $html .= $dom->saveHTML($dom->documentElement);
+
+            return $html;
         } catch (DOMException $e) {
             throw new LogicException('bad DOM node used', 0, $e);
         }
     }
 
+    /**
+     * merge list of tags within the list of usefull tags.
+     * Tag names are stored as key and value count the time it's used.
+     */
+    private function addusefulltags(array $tags): void
+    {
+        foreach ($tags as $tag) {
+            if (key_exists($tag, $this->usefulltags)) {
+                $this->usefulltags[$tag] ++;
+            } else {
+                $this->usefulltags[$tag] = 1;
+            }
+        }
+    }
+
 
 
 
@@ -188,6 +240,11 @@ public function hidecurrent(): bool
         return $this->hidecurrent;
     }
 
+    public function checkbox(): bool
+    {
+        return $this->checkbox;
+    }
+
     public function style(): string
     {
         return $this->style;
@@ -231,7 +288,12 @@ public function sethidecurrent(bool $hidecurrent): void
         $this->hidecurrent = $hidecurrent;
     }
 
-    public function setstyle(string $style): void
+    public function setcheckbox($checkbox)
+    {
+        $this->checkbox = boolval($checkbox);
+    }
+
+    public function setstyle(string $style)
     {
         if (key_exists($style, self::STYLES)) {
             $this->style = $style;

app/class/Servicerender.php

@@ -49,6 +49,9 @@ abstract class Servicerender
     /** @var bool True if the page need post process */
     protected bool $postprocessaction = false;
 
+    /** @var bool True if the page need to join a JS checkbox file */
+    protected bool $checkboxjs = false;
+
     /**
      * @var Bookmark[]                      Associative array of Bookmarks using fullmatch as key
      * */
@@ -260,6 +263,10 @@ protected function gethead(): string
         } catch (RuntimeException $e) {
             Logger::warningex($e);
         }
+        if ($this->checkboxjs) {
+            $checkboxjs = Model::jspath() . 'pagecheckbox.bundle.js';
+            $head .= "<script type=\"module\" src=\"$checkboxjs\" async/></script>\n";
+        }
         if (!empty($this->page->javascript())) {
             $head .= "<script src=\"$renderpath$id.js\" async/></script>\n";
         }
@@ -707,6 +714,10 @@ protected function pageoptlist(string $text): string
 
                 $optlist->hydrate($options);
 
+                if ($optlist->checkbox()) {
+                    $this->checkboxjs = true;
+                }
+
                 $pagetable = $this->pagemanager->pagetable($this->pagemanager->pagelist(), $optlist);
                 $content = $optlist->listhtml($pagetable, $this->page);
                 $text = str_replace($match->fullmatch(), $content, $text);

src/pagecheckbox.js

@@ -0,0 +1,34 @@
+console.log('yoo');
+
+const formFilter = document.querySelector('form');
+
+function w_filterpagelist() {
+    let tagCheckboxesChecked = document.querySelectorAll(
+        'input[type="checkbox"]:checked'
+    );
+
+    let pages = document.querySelectorAll('.pagelist li');
+    let tagCount = tagCheckboxesChecked.length;
+
+    for (var li of pages) {
+        li.classList.remove('w_filter-or-out');
+        li.classList.remove('w_filter-and-out');
+        if (tagCount > 0) {
+            let counter = 0;
+            for (var tag of tagCheckboxesChecked) {
+                let dataAttr = 'data-tag_' + tag.value;
+                if (li.hasAttribute(dataAttr)) {
+                    counter++;
+                }
+            }
+            if (counter < 1) {
+                li.classList.add('w_filter-or-out');
+            }
+            if (counter !== tagCount) {
+                li.classList.add('w_filter-and-out');
+            }
+        }
+    }
+}
+
+formFilter.addEventListener('click', w_filterpagelist);