improved "advanced options" example so a single click will change to …

…a random tag color

index.html

@@ -918,7 +918,8 @@ <h2><a href='#section-advance-options'>Advance options</a></h2>
                     </p>
                     <p>
                         Each (valid) tag gets a random color, via the <code>transformTag</code> callback which modifies the tag's data object before creating the tag element.
-                        Another way of giving colors to tags is <a href='https://github.com/yairEO/tagify/issues/644'>discussed here</a>.
+                        Another way of giving colors to tags is <a href='https://github.com/yairEO/tagify/issues/644'>discussed here</a>.<br>
+                        Clicking a tag once will change its color.
                     </p>
                     <p>
                         HTML5 <code>pattern</code> attribute is automatically used to validate tags.<br>
@@ -931,11 +932,16 @@ <h2><a href='#section-advance-options'>Advance options</a></h2>
                         If there is no match for the typed text, a special dropdown item will be renderd using the optional <em>settings</em>: <code>templates.dropdownItemNoMatch</code>
                     </p>
                     <details>
-                      <summary></summary>
+                        <summary></summary>
                     <h3>HTML</h3>
 <pre class="language-markup"><code>&lt;input name='tags3' value='[{"value":"point"}, {"value":"soft"}]' pattern='^[A-Za-z_✲ ]{1,15}$'></code></pre>
                     <h3>JAVASCRIPT</h3>
                     <script>renderPRE(document.currentScript, "advance-options")</script>
+                    <h3>CSS</h3>
+                    <style contenteditable>.advance .tagify__tag{
+    --tag-hover: var(--tag-bg);
+}
+</style>
                     </details>
                 </aside>
                 <aside class='rightSide'>
@@ -944,7 +950,7 @@ <h3>JAVASCRIPT</h3>
                             <use class="logo-use" xlink:href="#codepen-logo"/>
                         </svg>
                     </a>
-                    <input name='tags3' value='[{"value":"point"}, {"value":"soft"}]' pattern='^[A-Za-z_✲ ]{1,15}$'>
+                    <input name='tags3' class='advance' value='[{"value":"point"}, {"value":"soft"}]' pattern='^[A-Za-z_✲ ]{1,15}$'>
                 </aside>
             </section>
 
@@ -965,7 +971,7 @@ <h2><a href='#section-extra-properties'>Tags with properties</a></h2>
                         some attributes are in the specs and the made-up ones should technically be prefixed with <code>data-</code>.
                     </p>
                     <details>
-                      <summary></summary>
+                        <summary></summary>
                     <h3>HTML</h3>
                     <xmp><input name='tags3-1' class='countries' placeholder="Try to add tags from the list"></xmp>
                     <h3>Javascript</h3>
@@ -1568,7 +1574,7 @@ <h3>JAVASCRIPT</h3>
         delimiters          : ",| ",        // add new tags when a comma or a space character is entered
         keepInvalidTags     : true,         // do not remove invalid tags (but keep them marked as invalid)
         editTags            : {
-            clicks: 1,              // single click to edit a tag
+            clicks: 2,              // single click to edit a tag
             keepInvalid: false      // if after editing, tag is invalid, auto-revert
         },
         maxTags             : 6,
@@ -1606,10 +1612,11 @@ <h3>JAVASCRIPT</h3>
 }
 
 function transformTag( tagData ){
-    tagData.style = "--tag-bg:" + getRandomColor();
+    tagData.color = getRandomColor();
+    tagData.style = "--tag-bg:" + tagData.color;
 
     if( tagData.value.toLowerCase() == 'shit' )
-       tagData.value = 's✲✲t'
+        tagData.value = 's✲✲t'
 }
 
 tagify.on('add', function(e){
@@ -1620,6 +1627,28 @@ <h3>JAVASCRIPT</h3>
     console.log(e, e.detail);
 })
 
+var clickDebounce;
+
+tagify.on('click', function(e){
+    const {tag:tagElm, data:tagData} = e.detail;
+
+    // a delay is needed to distinguish between regular click and double-click.
+    // this allows enough time for a possible double-click, and noly fires if such
+    // did not occur.
+    clearTimeout(clickDebounce);
+    clickDebounce = setTimeout(() => {
+        tagData.color = getRandomColor();
+        tagData.style = "--tag-bg:" + tagData.color;
+        tagify.replaceTag(tagElm, tagData);
+    }, 200);
+})
+
+tagify.on('dblclick', function(e){
+    // when souble clicking, do not change the color of the tag
+    clearTimeout(clickDebounce);
+})
+
+
 })()
 </script>