Accords-Library-Archive
/
gallery.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client/tags: fade out tag colors after 2.5s

This commit is contained in:
rr- 2016-07-30 16:44:27 +02:00
parent af455b901f
commit 81afd383fa
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/css/forms.styl
View File

@ -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

16
client/js/controls/tag_input_control.js
View File

@ -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) {