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

client/tags: make implications yellow

This commit is contained in:
rr- 2016-07-30 12:57:34 +02:00
parent e4954140f8
commit af455b901f
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/css/colors.styl
View File

@ -28,9 +28,11 @@ $button-enabled-text-color = white
$button-enabled-background-color = $main-color
$button-disabled-text-color = #666
$button-disabled-background-color = #CCC
$default-tag-category-background-color = $active-tab-background-color
$new-tag-background-color = #DFC
$new-tag-text-color = black
$default-tag-category-background-color = $active-tab-background-color
$implied-tag-background-color = #FFC
$implied-tag-text-color = black
$duplicate-tag-background-color = #FDC
$duplicate-tag-text-color = black
$note-overlay-background-color = rgba(255, 255, 255, 0.3)

3
client/css/forms.styl
View File

@ -174,6 +174,9 @@ 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

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

@ -10,6 +10,10 @@ const TagAutoCompleteControl = require('./tag_auto_complete_control.js');
const KEY_SPACE = 32;
const KEY_RETURN = 13;
const SOURCE_INIT = 'init';
const SOURCE_IMPLICATION = 'implication';
const SOURCE_USER_INPUT = 'user-input';
class TagInputControl extends events.EventTarget {
constructor(sourceInputNode) {
super();
@ -34,7 +38,7 @@ class TagInputControl extends events.EventTarget {
},
confirm: text => {
this._tagInputNode.value = '';
this.addTag(text, true);
this.addTag(text, SOURCE_USER_INPUT);
},
verticalShift: -2,
});
@ -57,7 +61,7 @@ class TagInputControl extends events.EventTarget {
this.addEventListener('remove', e => this._evtTagRemoved(e));
// add existing tags
this.addMultipleTags(this._sourceInputNode.value, false);
this.addMultipleTags(this._sourceInputNode.value, SOURCE_INIT);
}
isTaggedWith(tagName) {
@ -66,13 +70,13 @@ class TagInputControl extends events.EventTarget {
.includes(tagName.toLowerCase());
}
addMultipleTags(text, addImplications) {
addMultipleTags(text, source) {
for (let tagName of text.split(/\s+/).filter(word => word).reverse()) {
this.addTag(tagName, addImplications);
this.addTag(tagName, source);
}
}
addTag(tagName, addImplications) {
addTag(tagName, source) {
tagName = tags.getOriginalTagName(tagName);
if (!tagName) {
@ -85,15 +89,16 @@ class TagInputControl extends events.EventTarget {
this.dispatchEvent(new CustomEvent('add', {
detail: {
tagName: tagName,
source: source,
},
}));
this.dispatchEvent(new CustomEvent('change'));
// XXX: perhaps we should aggregate suggestions from all implications
// for call to the _suggestRelations
if (addImplications) {
if ([SOURCE_USER_INPUT, SOURCE_IMPLICATION].includes(source)) {
for (let otherTagName of tags.getAllImplications(tagName)) {
this.addTag(otherTagName, true, false);
this.addTag(otherTagName, SOURCE_IMPLICATION);
}
}
}
@ -130,6 +135,9 @@ class TagInputControl extends events.EventTarget {
if (!tags.getTagByName(tagName)) {
listItemNode.classList.add('new');
}
if (e.detail.source === SOURCE_IMPLICATION) {
listItemNode.classList.add('implication');
}
this._tagListNode.prependChild(listItemNode);
}
}
@ -173,7 +181,7 @@ class TagInputControl extends events.EventTarget {
_addTagsFromInput(text) {
this._hideAutoComplete();
this.addMultipleTags(text, true);
this.addMultipleTags(text, SOURCE_USER_INPUT);
this._tagInputNode.value = '';
// TODO: suggest relations!
}