ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/posts: show tag/note counters in expanders

Browse source
This commit is contained in:
rr- 2016-08-23 23:09:07 +02:00
parent cc78766585
commit 7f4a2c1ceb
3 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/html/expander.tpl
View file

@ -1,7 +1,7 @@
<section class='expander'> <section class='expander'>
<header> <header>
<a href> <a href>
<%- ctx.title %> <span><%- ctx.title %></span>
<i class='fa fa-chevron-down'></i> <i class='fa fa-chevron-down'></i>
</a> </a>
</header> </header>

14
client/js/controls/expander_control.js
View file

@ -8,8 +8,8 @@ const views = require('../util/views.js');
const template = views.getTemplate('expander'); const template = views.getTemplate('expander');
class ExpanderControl { class ExpanderControl {
constructor(title, nodes) { constructor(name, title, nodes) {
this._title = title; this._name = name;
nodes = Array.from(nodes).filter(n => n); nodes = Array.from(nodes).filter(n => n);
if (!nodes.length) { if (!nodes.length) {
@ -33,12 +33,16 @@ class ExpanderControl {
expanderNode.classList.toggle( expanderNode.classList.toggle(
'collapsed', 'collapsed',
this._allStates[this._title] === undefined ? this._allStates[this._name] === undefined ?
false : false :
!this._allStates[this._title]); !this._allStates[this._name]);
this._syncIcon(); this._syncIcon();
} }
set title(newTitle) {
this._expanderNode.querySelector('header span').textContent = newTitle;
}
get _isOpened() { get _isOpened() {
return !this._expanderNode.classList.contains('collapsed'); return !this._expanderNode.classList.contains('collapsed');
} }
@ -53,7 +57,7 @@ class ExpanderControl {
_save() { _save() {
const newStates = Object.assign({}, this._allStates); const newStates = Object.assign({}, this._allStates);
newStates[this._title] = this._isOpened; newStates[this._name] = this._isOpened;
localStorage.setItem('expander', JSON.stringify(newStates)); localStorage.setItem('expander', JSON.stringify(newStates));
} }

39
client/js/controls/post_edit_sidebar_control.js
View file

@ -37,21 +37,28 @@ class PostEditSidebarControl extends events.EventTarget {
})); }));
new ExpanderControl( new ExpanderControl(
'post-info',
'Basic info', 'Basic info',
this._hostNode.querySelectorAll('.safety, .relations, .flags')); this._hostNode.querySelectorAll('.safety, .relations, .flags'));
new ExpanderControl( this._tagsExpander = new ExpanderControl(
'Tags', 'post-tags',
`Tags (${this._post.tags.length})`,
this._hostNode.querySelectorAll('.tags')); this._hostNode.querySelectorAll('.tags'));
new ExpanderControl( this._notesExpander = new ExpanderControl(
'post-notes',
'Notes', 'Notes',
this._hostNode.querySelectorAll('.notes')); this._hostNode.querySelectorAll('.notes'));
new ExpanderControl( new ExpanderControl(
'post-content',
'Content', 'Content',
this._hostNode.querySelectorAll('.post-content, .post-thumbnail')); this._hostNode.querySelectorAll('.post-content, .post-thumbnail'));
new ExpanderControl( new ExpanderControl(
'post-management',
'Management', 'Management',
this._hostNode.querySelectorAll('.management')); this._hostNode.querySelectorAll('.management'));
this._syncExpanderTitles();
if (this._formNode) { if (this._formNode) {
this._formNode.addEventListener('submit', e => this._evtSubmit(e)); this._formNode.addEventListener('submit', e => this._evtSubmit(e));
} }
@ -121,22 +128,36 @@ class PostEditSidebarControl extends events.EventTarget {
'input, textarea'); 'input, textarea');
for (let node of inputNodes) { for (let node of inputNodes) {
node.addEventListener( node.addEventListener(
'change', e => { 'change',
this.dispatchEvent(new CustomEvent('change')); e => this.dispatchEvent(new CustomEvent('change')));
});
} }
this._postNotesOverlayControl.addEventListener( this._postNotesOverlayControl.addEventListener(
'change', e => { 'change',
this.dispatchEvent(new CustomEvent('change')); e => this.dispatchEvent(new CustomEvent('change')));
});
} }
for (let eventType of ['add', 'remove']) {
this._post.notes.addEventListener(eventType, e => {
this._syncExpanderTitles();
});
}
this._tagControl.addEventListener('change', e => {
this._post.tags = this._tagControl.tags;
this._syncExpanderTitles();
});
if (this._noteTextareaNode) { if (this._noteTextareaNode) {
this._noteTextareaNode.addEventListener( this._noteTextareaNode.addEventListener(
'change', e => this._evtNoteTextChangeRequest(e)); 'change', e => this._evtNoteTextChangeRequest(e));
} }
} }
_syncExpanderTitles() {
this._notesExpander.title = `Notes (${this._post.notes.length})`;
this._tagsExpander.title = `Tags (${this._post.tags.length})`;
}
_evtPostContentChange(e) { _evtPostContentChange(e) {
this._contentFileDropper.reset(); this._contentFileDropper.reset();
} }