1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
/**
* Quick Tag
*/
import store from './utils/store';
import { $, $$, toggleEl, onLeftClick } from './utils/dom';
import { fetchJson, handleError } from './utils/requests';
const imageQueueStorage = 'quickTagQueue';
const currentTagStorage = 'quickTagName';
function currentQueue() { return store.get(imageQueueStorage) || []; }
function currentTags() { return store.get(currentTagStorage) || ''; }
function getTagButton() { return $('.js-quick-tag'); }
function setTagButton(text) { $('.js-quick-tag--submit span').textContent = text; }
function toggleActiveState() {
toggleEl($('.js-quick-tag'),
$('.js-quick-tag--abort'),
$('.js-quick-tag--submit'));
setTagButton(`Submit (${currentTags()})`);
$$('.media-box__header').forEach(el => el.classList.toggle('media-box__header--unselected'));
$$('.media-box__header').forEach(el => el.classList.remove('media-box__header--selected'));
currentQueue().forEach(id => $$(`.media-box[data-post-id="${id}"] > .media-box__header`).forEach(el => el.classList.add('media-box__header--selected')));
}
function activate() {
store.set(currentTagStorage, window.prompt('A comma-delimited list of tags you want to add:'));
if (currentTags()) toggleActiveState();
}
function reset() {
store.remove(currentTagStorage);
store.remove(imageQueueStorage);
toggleActiveState();
}
function submit() {
setTagButton(`Wait... (${currentTags()})`);
fetchJson('PUT', '/admin/batch/tags', {
tags: currentTags(),
post_ids: currentQueue(),
})
.then(handleError)
.then(r => r.json())
.then(data => {
if (data.failed.length) window.alert(`Failed to add tags to the images with these IDs: ${data.failed}`);
reset();
});
}
function modifyImageQueue(mediaBox) {
if (currentTags()) {
const postId = mediaBox.dataset.postId,
queue = currentQueue(),
isSelected = queue.includes(postId);
isSelected ? queue.splice(queue.indexOf(postId), 1)
: queue.push(postId);
$$(`.media-box[data-post-id="${postId}"] > .media-box__header`).forEach(el => el.classList.toggle('media-box__header--selected'));
store.set(imageQueueStorage, queue);
}
}
function clickHandler(event) {
const targets = {
'.js-quick-tag': activate,
'.js-quick-tag--abort': reset,
'.js-quick-tag--submit': submit,
'.media-box': modifyImageQueue,
};
for (const target in targets) {
if (event.target && event.target.closest(target)) {
targets[target](event.target.closest(target));
currentTags() && event.preventDefault();
}
}
}
function setupQuickTag() {
if (getTagButton() && currentTags()) toggleActiveState();
if (getTagButton()) onLeftClick(clickHandler);
}
export { setupQuickTag };
|
