diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl
index 538bc8c2..89e7ef48 100644
--- a/client/css/post-upload.styl
+++ b/client/css/post-upload.styl
@@ -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
diff --git a/client/html/post_upload_row.tpl b/client/html/post_upload_row.tpl
index e3361079..9c2bc64d 100644
--- a/client/html/post_upload_row.tpl
+++ b/client/html/post_upload_row.tpl
@@ -1,7 +1,9 @@
-
-
-
+
<% if (['image'].includes(ctx.uploadable.type)) { %>
diff --git a/client/js/views/post_upload_view.js b/client/js/views/post_upload_view.js
index 92ee81c1..211f8538 100644
--- a/client/js/views/post_upload_view.js
+++ b/client/js/views/post_upload_view.js
@@ -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;
}