From 81afd383fa35c7e68b5d2e0e98db693252b3b76e Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sat, 30 Jul 2016 16:44:27 +0200
Subject: [PATCH] client/tags: fade out tag colors after 2.5s

---
 client/css/forms.styl                   | 20 +++++++++++---------
 client/js/controls/tag_input_control.js | 16 ++++++++++++++++
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/client/css/forms.styl b/client/css/forms.styl
index 3916f63..a2988cf 100644
--- a/client/css/forms.styl
+++ b/client/css/forms.styl
@@ -174,15 +174,17 @@ input:disabled
     cursor: not-allowed
 
 div.tag-input
-    li.implication
-        background: $implied-tag-background-color
-        color: $implied-tag-text-color
-    li.new
-        background: $new-tag-background-color
-        color: $new-tag-text-color
-    li.duplicate
-        background: $duplicate-tag-background-color
-        color: $duplicate-tag-text-color
+    li
+        transition: background-color 0.5s linear
+        &.implication
+            background: $implied-tag-background-color
+            color: $implied-tag-text-color
+        &.new
+            background: $new-tag-background-color
+            color: $new-tag-text-color
+        &.duplicate
+            background: $duplicate-tag-background-color
+            color: $duplicate-tag-text-color
     ul
         margin-top: 0.2em
 
diff --git a/client/js/controls/tag_input_control.js b/client/js/controls/tag_input_control.js
index 521cfa1..1a103a2 100644
--- a/client/js/controls/tag_input_control.js
+++ b/client/js/controls/tag_input_control.js
@@ -14,6 +14,21 @@ const SOURCE_INIT = 'init';
 const SOURCE_IMPLICATION = 'implication';
 const SOURCE_USER_INPUT = 'user-input';
 
+function _fadeOutListItemNodeStatus(listItemNode) {
+    if (listItemNode.classList.length) {
+        if (listItemNode.fadeTimeout) {
+            window.clearTimeout(listItemNode.fadeTimeout);
+        }
+        listItemNode.fadeTimeout = window.setTimeout(() => {
+            while (listItemNode.classList.length) {
+                listItemNode.classList.remove(
+                    listItemNode.classList.item(0));
+            }
+            listItemNode.fadeTimeout = null;
+        }, 2500);
+    }
+}
+
 class TagInputControl extends events.EventTarget {
     constructor(sourceInputNode) {
         super();
@@ -140,6 +155,7 @@ class TagInputControl extends events.EventTarget {
             }
             this._tagListNode.prependChild(listItemNode);
         }
+        _fadeOutListItemNodeStatus(listItemNode);
     }
 
     _evtTagRemoved(e) {