X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=assets%2Fvintage%2Fjs%2Fbase.js;h=55f1c37dfb6811e181c07287619c8f4633bd27a3;hb=refs%2Fpull%2F1621%2Fhead;hp=9bcc96fb99f4335da1546ce03619243063e93eef;hpb=d78c23e00d3007c3fee8c3603acac00efc1ce14e;p=github%2Fshaarli%2FShaarli.git

diff --git a/assets/vintage/js/base.js b/assets/vintage/js/base.js
index 9bcc96fb..55f1c37d 100644
--- a/assets/vintage/js/base.js
+++ b/assets/vintage/js/base.js
@@ -1,32 +1,39 @@
-window.onload = function () {
-    var continent = document.getElementById('continent');
-    var city = document.getElementById('city');
-    if (continent != null && city != null) {
-        continent.addEventListener('change', function(event) {
-            hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
-        });
-        hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
-    }
-};
+import Awesomplete from 'awesomplete';
+import 'awesomplete/awesomplete.css';
 
-/**
- * Add the class 'hidden' to city options not attached to the current selected continent.
- *
- * @param cities           List of <option> elements
- * @param currentContinent Current selected continent
- * @param reset            Set to true to reset the selected value
- */
-function hideTimezoneCities(cities, currentContinent, reset = false) {
-    var first = true;
-    [].forEach.call(cities, function(option) {
-        if (option.getAttribute('data-continent') != currentContinent) {
-            option.className = 'hidden';
-        } else {
-            option.className = '';
-            if (reset === true && first === true) {
-                option.setAttribute('selected', 'selected');
-                first = false;
-            }
+(() => {
+  const autocompleteFields = document.querySelectorAll('input[data-multiple]');
+  const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]');
+  const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || ' ' : ' ';
+
+  [...autocompleteFields].forEach((autocompleteField) => {
+    const awesome = new Awesomplete(Awesomplete.$(autocompleteField));
+
+    // Tags are separated by separator
+    awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS(
+      text,
+      input.match(new RegExp(`[^${tagsSeparator}]*$`))[0],
+    );
+    // Insert new selected tag in the input
+    awesome.replace = (text) => {
+      const before = awesome.input.value.match(new RegExp(`^.+${tagsSeparator}+|`))[0];
+      awesome.input.value = `${before}${text}${tagsSeparator}`;
+    };
+    // Highlight found items
+    awesome.item = (text, input) => Awesomplete.ITEM(text, input.match(new RegExp(`[^${tagsSeparator}]*$`))[0]);
+
+    // Don't display already selected items
+    // WARNING: pseudo classes does not seem to work with string litterals...
+    const reg = new RegExp(`([^${tagsSeparator}]+)${tagsSeparator}`, 'g');
+    let match;
+    awesome.data = (item, input) => {
+      while ((match = reg.exec(input))) {
+        if (item === match[1]) {
+          return '';
         }
-    });
-}
+      }
+      return item;
+    };
+    awesome.minChars = 1;
+  });
+})();