From 5333c185a26d799c6507220303cb5ef883b44992 Mon Sep 17 00:00:00 2001
From: vincent-peugnet <vincent-peugnet@riseup.net>
Date: Sun, 25 Feb 2024 23:03:37 +0100
Subject: [PATCH] use Tagify in edit view close #394

for a smoother tag experience !
---
 app/class/Controllerpage.php          |   8 ++
 app/view/templates/edit.php           |   7 +-
 app/view/templates/editleftbar.php    |   2 +-
 assets/css/base.css                   |  10 ++-
 assets/css/edit.css                   |  42 +++++++++++
 assets/css/theme/audrey-s-book.css    |  11 +--
 assets/css/theme/blue-whale.css       |   5 +-
 assets/css/theme/dark-doriphore.css   |   2 +-
 assets/css/theme/default.css          |   2 +-
 assets/css/theme/funky-freddy.css     |   2 +-
 assets/css/theme/fuzzy-flamingo.css   |   4 +-
 assets/css/theme/industrial-dream.css |   4 +-
 package-lock.json                     | 101 ++++++++++++++++++++++++++
 package.json                          |   1 +
 src/edit.js                           |  58 ++++++++++++++-
 15 files changed, 233 insertions(+), 26 deletions(-)

diff --git a/app/class/Controllerpage.php b/app/class/Controllerpage.php
index 282497b9..7b7acdc8 100644
--- a/app/class/Controllerpage.php
+++ b/app/class/Controllerpage.php
@@ -234,6 +234,14 @@ public function edit($page)
                 exit;
             }
 
+            $servicetags = new Servicetags();
+
+            try {
+                $datas['taglist'] = $servicetags->taglist();
+            } catch (Filesystemexception $e) {
+                Logger::errorex($e);
+            }
+
             $datas['faviconlist'] = $this->mediamanager->listfavicon();
             $datas['thumbnaillist'] = $this->mediamanager->listthumbnail();
             $datas['pagelist'] = $this->pagemanager->list();
diff --git a/app/view/templates/edit.php b/app/view/templates/edit.php
index 59200da5..afeb157d 100644
--- a/app/view/templates/edit.php
+++ b/app/view/templates/edit.php
@@ -1,6 +1,10 @@
 <?php
 
-$this->layout('layout', ['title' => '✏ '.$page->title(), 'stylesheets' => [$css . 'edit.css', Wcms\Model::jspath() . 'edit.bundle.css'], 'favicon' => $page->favicon()]) ?>
+$this->layout('layout', ['title' => '✏ '.$page->title(), 'stylesheets' => [
+    Wcms\Model::jspath() . 'edit.bundle.css',
+    $css . 'edit.css',
+    $css . 'tagcolors.css'
+], 'favicon' => $page->favicon()]) ?>
 
 
 
@@ -33,6 +37,7 @@
     const pageid = '<?= $this->e($page->id()) ?>';
     let pagetitle = '<?= $this->e($page->title()) ?>';
     let theme = '<?= $this->e($workspace->highlighttheme()) ?>';
+    const taglist = <?= json_encode($taglist) ?>;
 </script>
 <script type="module" src="<?= Wcms\Model::jspath() ?>edit.bundle.js" async></script>
 
diff --git a/app/view/templates/editleftbar.php b/app/view/templates/editleftbar.php
index a99f9ed7..97705807 100644
--- a/app/view/templates/editleftbar.php
+++ b/app/view/templates/editleftbar.php
@@ -21,7 +21,7 @@ class="toggle"
             <label for="description">Description :</label>
             <input type="text" name="description" id="description" value="<?= $page->description(); ?>" form="update">
             <label for="tag">Tag(s) :</label>
-            <input type="text" name="tag" id="tag" value="<?= $page->tag('string'); ?>" form="update">
+            <input type="text" name="tag" class="field" id="tag" value="<?= $page->tag('string'); ?>" form="update">
             <label for="secure">Privacy level :</label>
             <select name="secure" id="secure" form="update">
                 <option value="0" <?= $page->secure() == Wcms\Page::PUBLIC ? 'selected' : '' ?>>public</option>
diff --git a/assets/css/base.css b/assets/css/base.css
index 069295c4..21340971 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -8,6 +8,10 @@
     color: var(--outline-color);
 }
 
+:focus-visible {
+    outline: ridge 2px var(--outline-background-color);
+}
+
 body {
     margin: 0;
     height: 100%;
@@ -21,12 +25,12 @@ body {
     color: var(--text-color);
 }
 
-input, textarea, button, select {
+input, textarea, button, select, .field {
     border: none;
     accent-color: var(--main-color);
 }
 
-input, textarea {
+input, textarea, .field {
     color: var(--input-color)!important;
     border-color: var(--input-color);
     background-color: var(--input-background-color);
@@ -43,7 +47,7 @@ h1, h2 {
     background-color: var(--main-color);
 }
 
-a, button, input, select, textarea {
+a, button, input, select, textarea, .field {
     text-decoration: none;
     color: var(--text2-color);
 }
diff --git a/assets/css/edit.css b/assets/css/edit.css
index 1549c06d..f5b8f586 100644
--- a/assets/css/edit.css
+++ b/assets/css/edit.css
@@ -299,6 +299,48 @@ div#geomap {
     height: 250px;
 }
 
+/* __________ Tags _____________ */
+
+.tagify {
+    --tag-pad: 0 0;
+    --tag-text-color: inherit;
+    --tag-border-radius: 10px;
+    --tag-inset-shadow-size: 0;
+    --loader-size: 0;
+    --tags-focus-border-color: transparent;
+    display: block;
+}
+
+:root {
+	--tagify-dd-color-primary: var(--outline-background-color);
+	--tagify-dd-item-pad: 5px;
+	--tagify-dd-bg-color:  var(--input-background-color);
+}
+
+.tagify__tag {
+    border-radius: 10px;
+    padding-left: 4px;
+    padding-right: 0;
+    padding-bottom: 1px;
+    animation: none;
+}
+
+.tagify__tag__removeBtn {
+    color: inherit;
+    margin-left: 1px;
+}
+
+.tagify__dropdown span.tag {
+    border-radius: 10px;
+	padding: 1px 4px;
+}
+
+.tagify--focus {
+    outline: ridge 2px var(--outline-background-color)
+}
+
+
+
 
 @media (max-width: 550px) {
     .bar{
diff --git a/assets/css/theme/audrey-s-book.css b/assets/css/theme/audrey-s-book.css
index 6c33a392..93c6f3bd 100644
--- a/assets/css/theme/audrey-s-book.css
+++ b/assets/css/theme/audrey-s-book.css
@@ -17,13 +17,8 @@
     color-scheme: light;
 }
 
-body {
-    /* font-family: serif; */
-    /* font-size: 15.8px; */
-}
-
-input, button, select, textarea {
-    border-radius: 3px;
+input, button, select, textarea, .field {
+    border-radius: 4px;
 }
 
 .block {
@@ -37,4 +32,4 @@ input, button, select, textarea {
 
 .editor #editmain, .editor #editheader, .editor #editnav, .editor #editaside, .editor #editfooter  {
     font-family: serif;
-}
\ No newline at end of file
+}
diff --git a/assets/css/theme/blue-whale.css b/assets/css/theme/blue-whale.css
index ab85254a..99adeca4 100644
--- a/assets/css/theme/blue-whale.css
+++ b/assets/css/theme/blue-whale.css
@@ -17,7 +17,7 @@
     color-scheme: dark;
 }
 
-input, button, select, textarea, legend {
+input, button, select, textarea, legend, .field {
     border-radius: 10px;
 }
 
@@ -29,6 +29,3 @@ button, input[type="submit"] {
 .submenu, .block, nav.bar {
     border-radius: 0 0 10px 10px;
 }
-
-label.toogle {
-}
\ No newline at end of file
diff --git a/assets/css/theme/dark-doriphore.css b/assets/css/theme/dark-doriphore.css
index cd3ce037..1b06c0a3 100644
--- a/assets/css/theme/dark-doriphore.css
+++ b/assets/css/theme/dark-doriphore.css
@@ -17,7 +17,7 @@
     color-scheme: dark;
 }
 
-input, button, select, textarea, .submenu, .block, .bar {
+input, button, select, textarea, .field, .submenu, .block, .bar {
     border-radius: 0px;
     border: solid 1px;
 }
diff --git a/assets/css/theme/default.css b/assets/css/theme/default.css
index d5e0e560..51d5f7e6 100644
--- a/assets/css/theme/default.css
+++ b/assets/css/theme/default.css
@@ -17,7 +17,7 @@
     color-scheme: light;
 }
 
-input, button, select, textarea {
+input, button, select, textarea, .field {
     border-radius: 3px;
 }
 
diff --git a/assets/css/theme/funky-freddy.css b/assets/css/theme/funky-freddy.css
index e03905f2..d913d14b 100644
--- a/assets/css/theme/funky-freddy.css
+++ b/assets/css/theme/funky-freddy.css
@@ -17,7 +17,7 @@
     color-scheme: light;      
 }
 
-input, button, select, textarea {
+input, button, select, textarea, .field {
     border-radius: 5px;
 }
 
diff --git a/assets/css/theme/fuzzy-flamingo.css b/assets/css/theme/fuzzy-flamingo.css
index 6d2b9b1d..7a309385 100644
--- a/assets/css/theme/fuzzy-flamingo.css
+++ b/assets/css/theme/fuzzy-flamingo.css
@@ -17,7 +17,7 @@
     color-scheme: light;
 }
 
-input, button, select, textarea {
+input, button, select, textarea, .field {
     border-radius: 5px;
     border: solid 1px var(--secondary-background-color);
 }
@@ -37,4 +37,4 @@ input[type="submit"], button {
 
 main > * {
     padding: 5px;
-}
\ No newline at end of file
+}
diff --git a/assets/css/theme/industrial-dream.css b/assets/css/theme/industrial-dream.css
index ea32a493..8503dcd2 100644
--- a/assets/css/theme/industrial-dream.css
+++ b/assets/css/theme/industrial-dream.css
@@ -17,7 +17,7 @@
     color-scheme: light;
 }
 
-input, textarea {
+input, textarea, .field {
     border: inset 2px;
 }
 
@@ -44,4 +44,4 @@ h2, header {
 div.panel details {
     border: solid 1px;
     border-color: var(--tertiary-background-color)
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index ac9c7985..f356cf4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
             "name": "wcms",
             "license": "MIT",
             "dependencies": {
+                "@yaireo/tagify": "^4.21.1",
                 "codemirror": "^5.63.3",
                 "cytoscape": "^3.20.0",
                 "cytoscape-cose-bilkent": "^4.1.0",
@@ -490,6 +491,18 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@yaireo/tagify": {
+            "version": "4.21.1",
+            "resolved": "https://registry.npmjs.org/@yaireo/tagify/-/tagify-4.21.1.tgz",
+            "integrity": "sha512-5k/IJkMKHlIHpadt5EeEb+MtYPlbsrKFGnbAcQqgUnxhvmI8z3UcPCTW8AYTKpsxHNeJJUfOpDeLwc2d454mfg==",
+            "engines": {
+                "node": ">=14.20.0",
+                "npm": ">=8.0.0"
+            },
+            "peerDependencies": {
+                "prop-types": "^15.7.2"
+            }
+        },
         "node_modules/agent-base": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -617,6 +630,12 @@
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
             "dev": true
         },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+            "peer": true
+        },
         "node_modules/layout-base": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
@@ -632,6 +651,18 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
+        "node_modules/loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "peer": true,
+            "dependencies": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            },
+            "bin": {
+                "loose-envify": "cli.js"
+            }
+        },
         "node_modules/lru-cache": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -670,6 +701,15 @@
                 }
             }
         },
+        "node_modules/object-assign": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+            "peer": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/prettier": {
             "version": "1.19.1",
             "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
@@ -691,12 +731,29 @@
                 "node": ">=0.4.0"
             }
         },
+        "node_modules/prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "peer": true,
+            "dependencies": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
             "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
             "dev": true
         },
+        "node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+            "peer": true
+        },
         "node_modules/semver": {
             "version": "7.5.0",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
@@ -1001,6 +1058,12 @@
                 "tslib": "^1.9.3"
             }
         },
+        "@yaireo/tagify": {
+            "version": "4.21.1",
+            "resolved": "https://registry.npmjs.org/@yaireo/tagify/-/tagify-4.21.1.tgz",
+            "integrity": "sha512-5k/IJkMKHlIHpadt5EeEb+MtYPlbsrKFGnbAcQqgUnxhvmI8z3UcPCTW8AYTKpsxHNeJJUfOpDeLwc2d454mfg==",
+            "requires": {}
+        },
         "agent-base": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -1101,6 +1164,12 @@
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
             "dev": true
         },
+        "js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+            "peer": true
+        },
         "layout-base": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
@@ -1116,6 +1185,15 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
+        "loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "peer": true,
+            "requires": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            }
+        },
         "lru-cache": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -1140,6 +1218,12 @@
                 "whatwg-url": "^5.0.0"
             }
         },
+        "object-assign": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+            "peer": true
+        },
         "prettier": {
             "version": "1.19.1",
             "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
@@ -1152,12 +1236,29 @@
             "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
             "dev": true
         },
+        "prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "peer": true,
+            "requires": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            }
+        },
         "proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
             "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
             "dev": true
         },
+        "react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+            "peer": true
+        },
         "semver": {
             "version": "7.5.0",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
diff --git a/package.json b/package.json
index f2cf01d9..cf74e7dd 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
     "repository": "github:vincent-peugnet/wcms",
     "license": "MIT",
     "dependencies": {
+        "@yaireo/tagify": "^4.21.1",
         "codemirror": "^5.63.3",
         "cytoscape": "^3.20.0",
         "cytoscape-cose-bilkent": "^4.1.0",
diff --git a/src/edit.js b/src/edit.js
index e143254e..ddc77b7a 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -14,6 +14,9 @@ import 'codemirror/addon/mode/overlay';
 import 'codemirror/addon/mode/simple';
 import 'codemirror/addon/selection/mark-selection';
 
+import Tagify from '@yaireo/tagify';
+import '@yaireo/tagify/dist/tagify.css';
+
 import 'leaflet/dist/leaflet.css';
 import icon from 'leaflet/dist/images/marker-icon.png';
 import icon_2x from 'leaflet/dist/images/marker-icon-2x.png';
@@ -21,6 +24,57 @@ import shadow from 'leaflet/dist/images/marker-shadow.png';
 import * as L from 'leaflet';
 import { initWorkspaceForm, submitHandler } from './fn/fn';
 
+/* ________________ TAGIFY  ________________ */
+
+/** @var {HTMLInputElement} */
+let inputTag = document.querySelector('input[name=tag]');
+
+let tagify = new Tagify(inputTag, {
+    originalInputValueFormat: valuesArr =>
+        valuesArr.map(item => item.value).join(', '),
+    pattern: /^[a-z0-9_-]{1,64}$/,
+    editTags: false,
+    whitelist: taglist,
+    dropdown: {
+        enabled: 0,
+        maxItems: 30,
+    },
+    templates: {
+        tag(tagData, tagify) {
+            return `<tag title="${tagData.title || tagData.value}"
+                    contenteditable='false'
+                    spellcheck='false'
+                    tabIndex="${this.settings.a11y.focusableTags ? 0 : -1}"
+                    class="${this.settings.classNames.tag} ${
+                tagData.class ? tagData.class : ''
+            } tag_${tagData.value}"
+                    ${this.getAttributes(tagData)}>
+            <x title='' class="${
+                this.settings.classNames.tagX
+            }" role='button' aria-label='remove tag'></x>
+            <div>
+                <span class="${this.settings.classNames.tagText}">${tagData[
+                this.settings.tagTextProp
+            ] || tagData.value}</span>
+            </div>
+          </tag>`;
+        },
+        dropdownItem(item) {
+            return `<div ${this.getAttributes(item)}
+                        class='${
+                            this.settings.classNames.dropdownItem
+                        } ${item.class || ''}'
+                        tabindex="0"
+                        role="option"
+                    >
+                        <span class="tag tag_${
+                            item.value
+                        }">${item.mappedValue || item.value}</span>
+                    </div>`;
+        },
+    },
+});
+
 /* ________________ LEAFLET ________________ */
 
 L.Icon.Default.prototype.options.iconUrl = icon;
@@ -237,8 +291,8 @@ function initForm() {
     form = document.getElementById('update');
     let inputs = form.elements;
     for (const input of inputs) {
-        input.oninput = changed;
-        input.oninput = changeHandler;
+        input.addEventListener('input', changeHandler);
+        input.addEventListener('change', changeHandler);
     }
 
     form.addEventListener('submit', function(event) {