steve
/
mybuddy
mirror of https://github.com/snachodog/mybuddy.git
1
0
Fork 0
Code Issues 3 Packages Projects 1 Releases Wiki Activity

Completed decomposing the tags-editor in its own javascript file

This commit is contained in:
Paul Konstantin Gerke 2022-02-26 16:08:29 +01:00
parent 332a5999bc
commit 7baeb8a85b
1 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
babybuddy/static_src/js/tags_editor.js
View File

@ -82,17 +82,22 @@
const tag = this.prototype.cloneNode(true); const tag = this.prototype.cloneNode(true);
tag.classList.remove("prototype-tag"); tag.classList.remove("prototype-tag");
tag.classList.add("tag"); tag.classList.add("tag");
updateTag(tag, name, color, actionSymbol); this.updateTag(tag, name, color, actionSymbol);
return tag; return tag;
} }
insertTag(list, tag) { insertTag(list, tag) {
list.appendChild(tag); list.appendChild(tag);
this.callTagListUpdatedListeners();
} }
}; };
/**
* Handler for the edit field allowing to dynamically create new tags.
*/
class AddNewTagControl { class AddNewTagControl {
constructor(widget, taggingBase) { constructor(widget, taggingBase, onInsertNewTag) {
this.widget = widget;
this.taggingBase = taggingBase; this.taggingBase = taggingBase;
this.apiTagsUrl = widget.getAttribute('data-tags-url'); this.apiTagsUrl = widget.getAttribute('data-tags-url');
@ -102,12 +107,14 @@
this.addTagInput.value = ""; this.addTagInput.value = "";
this.addTagButton.addEventListener('click', () => this.createTagClicked); this.onInsertNewTag = onInsertNewTag;
this.addTagButton.addEventListener('click', () => this.onCreateTagClicked());
this.addTagInput.addEventListener('keydown', (e) => { this.addTagInput.addEventListener('keydown', (e) => {
const key = e.key.toLowerCase(); const key = e.key.toLowerCase();
if (key === "enter") { if (key === "enter") {
e.preventDefault(); e.preventDefault();
this.createTagClicked(); this.onCreateTagClicked();
} }
}); });
} }
@ -122,47 +129,38 @@
const tagName = this.addTagInput.value.trim(); const tagName = this.addTagInput.value.trim();
const uriTagName = encodeURIComponent(tagName); const uriTagName = encodeURIComponent(tagName);
function success() { const fail = (msg) => {
addTagInput.value = "";
}
function fail(msg) {
msg = msg || "Error creating tag"; msg = msg || "Error creating tag";
addTagInput.select() this.addTagInput.select();
// TODO: Replace with modal
alert(msg); alert(msg);
} };
if (!tagName) { if (!tagName) {
fail('Not a valid tag name'); fail('Not a valid tag name');
return; return;
} }
const addTag = (name, color) => {
const tag = this.taggingBase.createNewTag(name, color, "-");
this.addTagInput.value = "";
this.onInsertNewTag(tag);
};
const data = JSON.stringify({ const data = JSON.stringify({
'name': addTagInput.value 'name': this.addTagInput.value
}); });
doReq("GET", `${this.apiTagsUrl}?name=${uriTagName}`, null,
function addTag(name, color) {
const foundTag = widget.querySelector(`span[data-value="${name}"]`);
if (foundTag) {
foundTag.parentNode.removeChild(foundTag);
}
const tag = this.taggingBase.createNewTag(name, color, "-");
this.taggingBase.insertTag(currentTags, tag);
removeTagCallback(tag);
success();
}
doReq("GET", `${apiTagsUrl}?name=${uriTagName}`, null,
(text) => { (text) => {
const json = JSON.parse(text); const json = JSON.parse(text);
if (json.count) { if (json.count) {
const tagJson = json.results[0]; const tagJson = json.results[0];
addTag(tagJson.name, tagJson.color); addTag(tagJson.name, tagJson.color);
} else { } else {
doReq("POST", apiTagsUrl, data, doReq("POST", this.apiTagsUrl, data,
(text) => { (text) => {
const tagJson = JSON.parse(text); const tagJson = JSON.parse(text);
addTag(tagJson.name, tagJson.color); addTag(tagJson.name, tagJson.color);
@ -179,7 +177,7 @@
this.widget = tagEditorRoot; this.widget = tagEditorRoot;
this.taggingBase = new TaggingBase(this.widget); this.taggingBase = new TaggingBase(this.widget);
this.addTagControl = new AddNewTagControl( this.addTagControl = new AddNewTagControl(
this.widget, this.taggingBase this.widget, this.taggingBase, (t) => this.insertNewTag(t)
); );
this.currentTags = this.widget.querySelector('.current_tags'); this.currentTags = this.widget.querySelector('.current_tags');
@ -192,6 +190,23 @@
for (const tag of this.currentTags.querySelectorAll(".tag")) { for (const tag of this.currentTags.querySelectorAll(".tag")) {
this.configureRemoveTag(tag); this.configureRemoveTag(tag);
} }
this.updateInputList();
this.taggingBase.addTagListUpdatedListener(
() => this.updateInputList()
);
}
insertNewTag(tag) {
const name = tag.getAttribute("data-value");
const oldTag = this.widget.querySelector(`span[data-value="${name}"]`);
if (oldTag) {
oldTag.parentNode.removeChild(oldTag);
}
this.taggingBase.insertTag(this.currentTags, tag);
this.configureRemoveTag(tag);
} }
registerNewCallback(tag, newParent, onClicked) { registerNewCallback(tag, newParent, onClicked) {