mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-02-05 05:17:51 +08:00
moved tags edit popup code to its own module #495
This commit is contained in:
Jack
parent
6ce58a61aa
commit
6d0d027aa9
3 changed files with 158 additions and 152 deletions
|
|
@ -143,6 +143,7 @@ const refactoredSrc = [
|
|||
"./src/js/simple-popups.js",
|
||||
"./src/js/settings.js",
|
||||
"./src/js/popups/result-tags-popup.js",
|
||||
"./src/js/popups/edit-tags-popup.js",
|
||||
];
|
||||
|
||||
//legacy files
|
||||
|
|
|
|||
153
src/js/popups/edit-tags-popup.js
Normal file
153
src/js/popups/edit-tags-popup.js
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import * as ResultTagsPopup from "./result-tags-popup";
|
||||
import * as ResultFilters from "./result-filters";
|
||||
import * as Loader from "./loader";
|
||||
import * as DB from "./db";
|
||||
import * as CloudFunctions from "./cloud-functions";
|
||||
import * as Notifications from "./notifications";
|
||||
import * as Settings from "./settings";
|
||||
|
||||
export function show(action, id, name) {
|
||||
if (action === "add") {
|
||||
$("#tagsWrapper #tagsEdit").attr("action", "add");
|
||||
$("#tagsWrapper #tagsEdit .title").html("Add new tag");
|
||||
$("#tagsWrapper #tagsEdit .button").html(`<i class="fas fa-plus"></i>`);
|
||||
$("#tagsWrapper #tagsEdit input").val("");
|
||||
$("#tagsWrapper #tagsEdit input").removeClass("hidden");
|
||||
} else if (action === "edit") {
|
||||
$("#tagsWrapper #tagsEdit").attr("action", "edit");
|
||||
$("#tagsWrapper #tagsEdit").attr("tagid", id);
|
||||
$("#tagsWrapper #tagsEdit .title").html("Edit tag name");
|
||||
$("#tagsWrapper #tagsEdit .button").html(`<i class="fas fa-pen"></i>`);
|
||||
$("#tagsWrapper #tagsEdit input").val(name);
|
||||
$("#tagsWrapper #tagsEdit input").removeClass("hidden");
|
||||
} else if (action === "remove") {
|
||||
$("#tagsWrapper #tagsEdit").attr("action", "remove");
|
||||
$("#tagsWrapper #tagsEdit").attr("tagid", id);
|
||||
$("#tagsWrapper #tagsEdit .title").html("Remove tag " + name);
|
||||
$("#tagsWrapper #tagsEdit .button").html(`<i class="fas fa-check"></i>`);
|
||||
$("#tagsWrapper #tagsEdit input").addClass("hidden");
|
||||
}
|
||||
|
||||
if ($("#tagsWrapper").hasClass("hidden")) {
|
||||
$("#tagsWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden")
|
||||
.animate({ opacity: 1 }, 100, () => {
|
||||
$("#tagsWrapper #tagsEdit input").focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function hide() {
|
||||
if (!$("#tagsWrapper").hasClass("hidden")) {
|
||||
$("#tagsWrapper #tagsEdit").attr("action", "");
|
||||
$("#tagsWrapper #tagsEdit").attr("tagid", "");
|
||||
$("#tagsWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
100,
|
||||
() => {
|
||||
$("#tagsWrapper").addClass("hidden");
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function apply() {
|
||||
let action = $("#tagsWrapper #tagsEdit").attr("action");
|
||||
let inputVal = $("#tagsWrapper #tagsEdit input").val();
|
||||
let tagid = $("#tagsWrapper #tagsEdit").attr("tagid");
|
||||
hide();
|
||||
if (action === "add") {
|
||||
Loader.show();
|
||||
CloudFunctions.addTag({
|
||||
uid: firebase.auth().currentUser.uid,
|
||||
name: inputVal,
|
||||
}).then((e) => {
|
||||
Loader.hide();
|
||||
let status = e.data.resultCode;
|
||||
if (status === 1) {
|
||||
Notifications.add("Tag added", 1, 2);
|
||||
DB.getSnapshot().tags.push({
|
||||
name: inputVal,
|
||||
id: e.data.id,
|
||||
});
|
||||
ResultTagsPopup.updateButtons();
|
||||
Settings.update();
|
||||
ResultFilters.updateTags();
|
||||
} else if (status === -1) {
|
||||
Notifications.add("Invalid tag name", 0);
|
||||
} else if (status < -1) {
|
||||
Notifications.add("Unknown error: " + e.data.message, -1);
|
||||
}
|
||||
});
|
||||
} else if (action === "edit") {
|
||||
Loader.show();
|
||||
CloudFunctions.editTag({
|
||||
uid: firebase.auth().currentUser.uid,
|
||||
name: inputVal,
|
||||
tagid: tagid,
|
||||
}).then((e) => {
|
||||
Loader.hide();
|
||||
let status = e.data.resultCode;
|
||||
if (status === 1) {
|
||||
Notifications.add("Tag updated", 1);
|
||||
DB.getSnapshot().tags.forEach((tag) => {
|
||||
if (tag.id === tagid) {
|
||||
tag.name = inputVal;
|
||||
}
|
||||
});
|
||||
ResultTagsPopup.updateButtons();
|
||||
Settings.update();
|
||||
ResultFilters.updateTags();
|
||||
} else if (status === -1) {
|
||||
Notifications.add("Invalid tag name", 0);
|
||||
} else if (status < -1) {
|
||||
Notifications.add("Unknown error: " + e.data.message, -1);
|
||||
}
|
||||
});
|
||||
} else if (action === "remove") {
|
||||
Loader.show();
|
||||
CloudFunctions.removeTag({
|
||||
uid: firebase.auth().currentUser.uid,
|
||||
tagid: tagid,
|
||||
}).then((e) => {
|
||||
Loader.hide();
|
||||
let status = e.data.resultCode;
|
||||
if (status === 1) {
|
||||
Notifications.add("Tag removed", 1);
|
||||
DB.getSnapshot().tags.forEach((tag, index) => {
|
||||
if (tag.id === tagid) {
|
||||
DB.getSnapshot().tags.splice(index, 1);
|
||||
}
|
||||
});
|
||||
ResultTagsPopup.updateButtons();
|
||||
Settings.update();
|
||||
ResultFilters.updateTags();
|
||||
} else if (status < -1) {
|
||||
Notifications.add("Unknown error: " + e.data.message, -1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$("#tagsWrapper").click((e) => {
|
||||
if ($(e.target).attr("id") === "tagsWrapper") {
|
||||
hide();
|
||||
}
|
||||
});
|
||||
|
||||
$("#tagsWrapper #tagsEdit .button").click(() => {
|
||||
apply();
|
||||
});
|
||||
|
||||
$("#tagsWrapper #tagsEdit input").keypress((e) => {
|
||||
if (e.keyCode == 13) {
|
||||
apply();
|
||||
}
|
||||
});
|
||||
|
|
@ -15,8 +15,7 @@ import * as UI from "./ui";
|
|||
import * as ChartController from "./chart-controller";
|
||||
import * as TagController from "./tag-controller";
|
||||
import * as SimplePopups from "./simple-popups";
|
||||
import * as ResultTagsPopup from "./result-tags-popup";
|
||||
import * as ResultFilters from "./result-filters";
|
||||
import * as EditTagsPopup from "./edit-tags-popup";
|
||||
|
||||
class SettingsGroup {
|
||||
constructor(
|
||||
|
|
@ -947,7 +946,7 @@ $(document).on(
|
|||
);
|
||||
|
||||
$(document).on("click", ".pageSettings .section.tags .addTagButton", (e) => {
|
||||
showEditTags("add");
|
||||
EditTagsPopup.show("add");
|
||||
});
|
||||
|
||||
$(document).on(
|
||||
|
|
@ -967,7 +966,7 @@ $(document).on(
|
|||
(e) => {
|
||||
let tagid = $(e.currentTarget).parent(".tag").attr("id");
|
||||
let name = $(e.currentTarget).siblings(".title").text();
|
||||
showEditTags("edit", tagid, name);
|
||||
EditTagsPopup.show("edit", tagid, name);
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -977,7 +976,7 @@ $(document).on(
|
|||
(e) => {
|
||||
let tagid = $(e.currentTarget).parent(".tag").attr("id");
|
||||
let name = $(e.currentTarget).siblings(".title").text();
|
||||
showEditTags("remove", tagid, name);
|
||||
EditTagsPopup.show("remove", tagid, name);
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -1185,150 +1184,3 @@ $(".pageSettings .sectionGroupTitle").click((e) => {
|
|||
);
|
||||
}
|
||||
});
|
||||
|
||||
//mode to module when possible
|
||||
function showEditTags(action, id, name) {
|
||||
if (action === "add") {
|
||||
$("#tagsWrapper #tagsEdit").attr("action", "add");
|
||||
$("#tagsWrapper #tagsEdit .title").html("Add new tag");
|
||||
$("#tagsWrapper #tagsEdit .button").html(`<i class="fas fa-plus"></i>`);
|
||||
$("#tagsWrapper #tagsEdit input").val("");
|
||||
$("#tagsWrapper #tagsEdit input").removeClass("hidden");
|
||||
} else if (action === "edit") {
|
||||
$("#tagsWrapper #tagsEdit").attr("action", "edit");
|
||||
$("#tagsWrapper #tagsEdit").attr("tagid", id);
|
||||
$("#tagsWrapper #tagsEdit .title").html("Edit tag name");
|
||||
$("#tagsWrapper #tagsEdit .button").html(`<i class="fas fa-pen"></i>`);
|
||||
$("#tagsWrapper #tagsEdit input").val(name);
|
||||
$("#tagsWrapper #tagsEdit input").removeClass("hidden");
|
||||
} else if (action === "remove") {
|
||||
$("#tagsWrapper #tagsEdit").attr("action", "remove");
|
||||
$("#tagsWrapper #tagsEdit").attr("tagid", id);
|
||||
$("#tagsWrapper #tagsEdit .title").html("Remove tag " + name);
|
||||
$("#tagsWrapper #tagsEdit .button").html(`<i class="fas fa-check"></i>`);
|
||||
$("#tagsWrapper #tagsEdit input").addClass("hidden");
|
||||
}
|
||||
|
||||
if ($("#tagsWrapper").hasClass("hidden")) {
|
||||
$("#tagsWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden")
|
||||
.animate({ opacity: 1 }, 100, () => {
|
||||
$("#tagsWrapper #tagsEdit input").focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function hideEditTags() {
|
||||
if (!$("#tagsWrapper").hasClass("hidden")) {
|
||||
$("#tagsWrapper #tagsEdit").attr("action", "");
|
||||
$("#tagsWrapper #tagsEdit").attr("tagid", "");
|
||||
$("#tagsWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
100,
|
||||
() => {
|
||||
$("#tagsWrapper").addClass("hidden");
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$("#tagsWrapper").click((e) => {
|
||||
if ($(e.target).attr("id") === "tagsWrapper") {
|
||||
hideEditTags();
|
||||
}
|
||||
});
|
||||
|
||||
$("#tagsWrapper #tagsEdit .button").click(() => {
|
||||
tagsEdit();
|
||||
});
|
||||
|
||||
$("#tagsWrapper #tagsEdit input").keypress((e) => {
|
||||
if (e.keyCode == 13) {
|
||||
tagsEdit();
|
||||
}
|
||||
});
|
||||
|
||||
function tagsEdit() {
|
||||
let action = $("#tagsWrapper #tagsEdit").attr("action");
|
||||
let inputVal = $("#tagsWrapper #tagsEdit input").val();
|
||||
let tagid = $("#tagsWrapper #tagsEdit").attr("tagid");
|
||||
hideEditTags();
|
||||
if (action === "add") {
|
||||
Loader.show();
|
||||
CloudFunctions.addTag({
|
||||
uid: firebase.auth().currentUser.uid,
|
||||
name: inputVal,
|
||||
}).then((e) => {
|
||||
Loader.hide();
|
||||
let status = e.data.resultCode;
|
||||
if (status === 1) {
|
||||
Notifications.add("Tag added", 1, 2);
|
||||
DB.getSnapshot().tags.push({
|
||||
name: inputVal,
|
||||
id: e.data.id,
|
||||
});
|
||||
ResultTagsPopup.updateButtons();
|
||||
update();
|
||||
ResultFilters.updateTags();
|
||||
} else if (status === -1) {
|
||||
Notifications.add("Invalid tag name", 0);
|
||||
} else if (status < -1) {
|
||||
Notifications.add("Unknown error: " + e.data.message, -1);
|
||||
}
|
||||
});
|
||||
} else if (action === "edit") {
|
||||
Loader.show();
|
||||
CloudFunctions.editTag({
|
||||
uid: firebase.auth().currentUser.uid,
|
||||
name: inputVal,
|
||||
tagid: tagid,
|
||||
}).then((e) => {
|
||||
Loader.hide();
|
||||
let status = e.data.resultCode;
|
||||
if (status === 1) {
|
||||
Notifications.add("Tag updated", 1);
|
||||
DB.getSnapshot().tags.forEach((tag) => {
|
||||
if (tag.id === tagid) {
|
||||
tag.name = inputVal;
|
||||
}
|
||||
});
|
||||
ResultTagsPopup.updateButtons();
|
||||
update();
|
||||
ResultFilters.updateTags();
|
||||
} else if (status === -1) {
|
||||
Notifications.add("Invalid tag name", 0);
|
||||
} else if (status < -1) {
|
||||
Notifications.add("Unknown error: " + e.data.message, -1);
|
||||
}
|
||||
});
|
||||
} else if (action === "remove") {
|
||||
Loader.show();
|
||||
CloudFunctions.removeTag({
|
||||
uid: firebase.auth().currentUser.uid,
|
||||
tagid: tagid,
|
||||
}).then((e) => {
|
||||
Loader.hide();
|
||||
let status = e.data.resultCode;
|
||||
if (status === 1) {
|
||||
Notifications.add("Tag removed", 1);
|
||||
DB.getSnapshot().tags.forEach((tag, index) => {
|
||||
if (tag.id === tagid) {
|
||||
DB.getSnapshot().tags.splice(index, 1);
|
||||
}
|
||||
});
|
||||
ResultTagsPopup.updateButtons();
|
||||
update();
|
||||
ResultFilters.updateTags();
|
||||
} else if (status < -1) {
|
||||
Notifications.add("Unknown error: " + e.data.message, -1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue