NoJS tag coloring

yadc/assets/js/taginput.js

@@ -88,7 +88,7 @@ taginputs.forEach(function (tinput) {
             let newtag = create_selection_tag(tagname)
             newtag.addEventListener('click', (event) => {
                 remove_selected(event.target.dataset.tagname)
-                // console.log(`Deselected: ${event.target.dataset.tagname}`)
+                event.preventDefault()
 
                 setTimeout(() => suggest_input.focus(), 2)
             })
@@ -131,12 +131,22 @@ taginputs.forEach(function (tinput) {
         //         add_selected(tag)
         //     })
         // }
-        let vals = suggest_input.value.split(' ')
-        // console.log(vals)
-        vals.forEach(tag => {
-            if (tag == '') return
-            add_selected(tag)
-        });
+        // let vals = suggest_input.value.split(' ')
+        // // console.log(vals)
+        // vals.forEach(tag => {
+        //     if (tag == '') return
+        //     add_selected(tag)
+        // });
+        // Not as clean, but well whatever
+        selected.querySelectorAll("a").forEach(element => {
+            element.addEventListener('click', (event) => {
+                remove_selected(event.target.dataset.tagname)
+                event.preventDefault()
+
+                setTimeout(() => suggest_input.focus(), 2)
+            })
+            hidden_addtag(element.dataset.tagname)
+        })
         suggest_input.removeAttribute('value') // Disable prefill by browser
 
         function select_suggestion(tagelement) {

yadc/bp/post.py

@@ -53,8 +53,12 @@ def posts(page):
 
     posts = posts_query.paginate(page, current_app.config.get('POSTS_PER_PAGE'))
     tags = tags_prepare(posts.items)
-
-    return render_template('post/index.html', posts=posts, tags=tags)
+    return render_template(
+        'post/index.html',
+        posts=posts,
+        tags=tags,
+        sel_tags=[tag for tag in tags if tag.content in f_tags]
+    )
 
 @bp.route('/show/<int:id>')
 def post_show(id):

yadc/static/all.js

@@ -176,7 +176,7 @@ taginputs.forEach(function (tinput) {
             let newtag = create_selection_tag(tagname)
             newtag.addEventListener('click', (event) => {
                 remove_selected(event.target.dataset.tagname)
-                // console.log(`Deselected: ${event.target.dataset.tagname}`)
+                event.preventDefault()
 
                 setTimeout(() => suggest_input.focus(), 2)
             })
@@ -219,12 +219,22 @@ taginputs.forEach(function (tinput) {
         //         add_selected(tag)
         //     })
         // }
-        let vals = suggest_input.value.split(' ')
-        // console.log(vals)
-        vals.forEach(tag => {
-            if (tag == '') return
-            add_selected(tag)
-        });
+        // let vals = suggest_input.value.split(' ')
+        // // console.log(vals)
+        // vals.forEach(tag => {
+        //     if (tag == '') return
+        //     add_selected(tag)
+        // });
+        // Not as clean, but well whatever
+        selected.querySelectorAll("a").forEach(element => {
+            element.addEventListener('click', (event) => {
+                remove_selected(event.target.dataset.tagname)
+                event.preventDefault()
+
+                setTimeout(() => suggest_input.focus(), 2)
+            })
+            hidden_addtag(element.dataset.tagname)
+        })
         suggest_input.removeAttribute('value') // Disable prefill by browser
 
         function select_suggestion(tagelement) {

yadc/templates/layout/base_sidebar_tags.html

@@ -26,10 +26,24 @@
             <!-- <input type="submit" value="Search"> -->
 
             <!-- <h3>Tags</h3> -->
-            <div class="tag-container tags-selected"></div>
+            <div class="tag-container tags-selected">
+                {% for tag in sel_tags %}
+                <a class="tagselected" data-tagname="{{ tag.content }}" href="{{ utils.tag_endpoint(tag.content) }}">
+                    <span class="tag-icon">
+                        <span class="fa fa-tag"></span>
+                    </span>
+                    <span class="content">{{ tag.content_deser }}</span>
+                    <span class="count">{{ tag.count }}</span>
+                    <span class="tag-right">
+                        <span class="fa fa-close close"></span>
+                    </span>
+                    {#<span class="post_ids">{{ tag.post_ids }}</span>#}
+                </a>
+                {% endfor %}
+            </div>
             <div class="tag-container tags-inpage">
                 {% for tag in tags %}
-                <a class="taginpage" data-tagname="{{ tag.content }}" href="{{ utils.tag_endpoint(tag.content) }}">
+                <a class="taginpage{%if tag in sel_tags%} tag_hide{%endif%}" data-tagname="{{ tag.content }}" href="{{ utils.tag_endpoint(tag.content) }}">
                     <span class="tag-icon">
                         <span class="fa fa-tag"></span>
                     </span>