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

client/posts: add controls for reordering uploads

Browse source
This commit is contained in:
rr- 2016-08-24 12:59:48 +02:00
parent 280a55046a
commit 3da4c54030
3 changed files with 51 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/css/post-upload.styl
View file

@ -40,6 +40,7 @@
height: 7em
margin: 0.2em 1em 0 0
.remove
.controls
float: right
color: $inactive-link-color
a
color: $inactive-link-color

8
client/html/post_upload_row.tpl
View file

@ -1,7 +1,9 @@
<li class='uploadable'>
<a href class='remove'>
<i class='fa fa-remove'></i>
</a>
<div class='controls'>
<a href class='move-up'><i class='fa fa-chevron-up'></i></a>
<a href class='move-down'><i class='fa fa-chevron-down'></i></a>
<a href class='remove'><i class='fa fa-remove'></i></a>
</div>
<div class='thumbnail'>
<% if (['image'].includes(ctx.uploadable.type)) { %>

45
client/js/views/post_upload_view.js
View file

@ -200,6 +200,7 @@ class PostUploadView extends events.EventTarget {
uploadable.destroy();
uploadable.rowNode.parentNode.removeChild(uploadable.rowNode);
this._uploadables.delete(uploadable.key);
this._normalizeUploadablesOrder();
this._emit('change');
if (!this._uploadables.size) {
this._formNode.classList.add('inactive');
@ -224,6 +225,30 @@ class PostUploadView extends events.EventTarget {
this.removeUploadable(uploadable);
}
_evtMoveUpClick(e, uploadable) {
e.preventDefault();
let sortedUploadables = this._getSortedUploadables();
if (uploadable.order > 0) {
uploadable.order--;
const prevUploadable = sortedUploadables[uploadable.order];
prevUploadable.order++;
uploadable.rowNode.parentNode.insertBefore(
uploadable.rowNode, prevUploadable.rowNode);
}
}
_evtMoveDownClick(e, uploadable) {
e.preventDefault();
let sortedUploadables = this._getSortedUploadables();
if (uploadable.order + 1 < sortedUploadables.length) {
uploadable.order++;
const nextUploadable = sortedUploadables[uploadable.order];
nextUploadable.order--;
uploadable.rowNode.parentNode.insertBefore(
nextUploadable.rowNode, uploadable.rowNode);
}
}
_evtSafetyRadioboxChange(e, uploadable) {
uploadable.safety = e.target.value;
}
@ -232,12 +257,24 @@ class PostUploadView extends events.EventTarget {
uploadable.anonymous = e.target.checked;
}
_emit(eventType) {
_normalizeUploadablesOrder() {
let sortedUploadables = this._getSortedUploadables();
for (let i = 0; i < sortedUploadables.length; i++) {
sortedUploadables[i].order = i;
}
}
_getSortedUploadables() {
let sortedUploadables = [...this._uploadables.values()];
sortedUploadables.sort((a, b) => a.order - b.order);
return sortedUploadables;
}
_emit(eventType) {
this.dispatchEvent(
new CustomEvent(
eventType, {detail: {uploadables: sortedUploadables}}));
eventType,
{detail: {uploadables: this._getSortedUploadables()}}));
}
_createRowNode(uploadable) {
@ -258,6 +295,10 @@ class PostUploadView extends events.EventTarget {
rowNode.querySelector('a.remove').addEventListener(
'click', e => this._evtRemoveClick(e, uploadable));
rowNode.querySelector('a.move-up').addEventListener(
'click', e => this._evtMoveUpClick(e, uploadable));
rowNode.querySelector('a.move-down').addEventListener(
'click', e => this._evtMoveDownClick(e, uploadable));
uploadable.rowNode = rowNode;
}