diff --git a/4chan_x.user.js b/4chan_x.user.js
index 1523faecd..5c278cdb0 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -1431,6 +1431,7 @@
this.com = null;
this.el = $.el('a', {
className: 'preview',
+ draggable: true,
href: 'javascript:;',
innerHTML: 'x'
});
@@ -1452,6 +1453,12 @@
}
});
$.before($('#addReply', qr.el), this.el);
+ $.on(this.el, 'dragstart', this.dragStart);
+ $.on(this.el, 'dragenter', this.dragEnter);
+ $.on(this.el, 'dragleave', this.dragLeave);
+ $.on(this.el, 'dragover', this.dragOver);
+ $.on(this.el, 'dragend', this.dragEnd);
+ $.on(this.el, 'drop', this.drop);
qr.replies.push(this);
}
@@ -1486,6 +1493,39 @@
return $('#spoiler', qr.el).checked = this.spoiler;
};
+ _Class.prototype.dragStart = function() {
+ return $.addClass(this, 'drag');
+ };
+
+ _Class.prototype.dragEnter = function() {
+ return $.addClass(this, 'over');
+ };
+
+ _Class.prototype.dragLeave = function() {
+ return $.removeClass(this, 'over');
+ };
+
+ _Class.prototype.dragOver = function(e) {
+ e.preventDefault();
+ return e.dataTransfer.dropEffect = 'move';
+ };
+
+ _Class.prototype.drop = function() {
+ var el, index, reply;
+ el = $('.drag', this.parentNode);
+ index = function() {
+ return Array.prototype.slice.call(el.parentNode.children).indexOf(el);
+ };
+ reply = qr.replies.splice(index(), 1)[0];
+ $.before(this, el);
+ return qr.replies.splice(index(), 0, reply);
+ };
+
+ _Class.prototype.dragEnd = function() {
+ $.removeClass(this, 'drag');
+ return $.removeClass($('.over', this.parentNode), 'over');
+ };
+
_Class.prototype.rm = function() {
var index;
qr.resetFileInput();
@@ -3631,7 +3671,7 @@ a[href="javascript:;"] {\
#qr > .move > span {\
float: right;\
}\
-#autohide, .close, #qr select, #dump, .captcha, #qr .warning {\
+#autohide, .close, #qr select, #dump, .remove, .captcha, #qr .warning {\
cursor: pointer;\
}\
#qr select,\
@@ -3689,6 +3729,7 @@ a[href="javascript:;"] {\
border: 1px solid #666;\
box-sizing: border-box;\
-moz-box-sizing: border-box;\
+ cursor: move;\
display: inline-block;\
height: 90px; width: 90px;\
margin: 5px; padding: 2px;\
@@ -3696,10 +3737,10 @@ a[href="javascript:;"] {\
overflow: hidden;\
position: relative;\
text-shadow: 0 1px 1px #000;\
- -webkit-transition: opacity .25s;\
- -moz-transition: opacity .25s;\
- -o-transition: opacity .25s;\
- transition: opacity .25s;\
+ -webkit-transition: .25s ease-in-out;\
+ -moz-transition: .25s ease-in-out;\
+ -o-transition: .25s ease-in-out;\
+ transition: .25s ease-in-out;\
vertical-align: top;\
}\
.preview:hover, .preview:focus {\
@@ -3708,6 +3749,12 @@ a[href="javascript:;"] {\
.preview#selected {\
opacity: 1;\
}\
+.preview.drag {\
+ box-shadow: 0 0 10px rgba(0,0,0,.5);\
+}\
+.preview.over {\
+ border-color: #FFF;\
+}\
.preview > span {\
color: #FFF;\
}\
diff --git a/changelog b/changelog
index 9b939bd2b..7c67a7b62 100644
--- a/changelog
+++ b/changelog
@@ -1,4 +1,6 @@
master
+- Mayhem
+ You can now drag replies in the dump list to reorder them.
2.26.0
- desuwa
diff --git a/script.coffee b/script.coffee
index b9d692f04..20bb1f9fb 100644
--- a/script.coffee
+++ b/script.coffee
@@ -1077,6 +1077,7 @@ qr =
@el = $.el 'a',
className: 'preview'
+ draggable: true
href: 'javascript:;'
innerHTML: 'x'
$('input', @el).checked = @spoiler
@@ -1090,6 +1091,13 @@ qr =
$.id('spoiler').checked = @spoiler if @el.id is 'selected'
$.before $('#addReply', qr.el), @el
+ $.on @el, 'dragstart', @dragStart
+ $.on @el, 'dragenter', @dragEnter
+ $.on @el, 'dragleave', @dragLeave
+ $.on @el, 'dragover', @dragOver
+ $.on @el, 'dragend', @dragEnd
+ $.on @el, 'drop', @drop
+
qr.replies.push @
setFile: (@file) ->
@el.title = file.name
@@ -1113,6 +1121,24 @@ qr =
for data in ['name', 'email', 'sub', 'com']
$("[name=#{data}]", qr.el).value = @[data]
$('#spoiler', qr.el).checked = @spoiler
+ dragStart: ->
+ $.addClass @, 'drag'
+ dragEnter: ->
+ $.addClass @, 'over'
+ dragLeave: ->
+ $.removeClass @, 'over'
+ dragOver: (e) ->
+ e.preventDefault()
+ e.dataTransfer.dropEffect = 'move'
+ drop: ->
+ el = $ '.drag', @parentNode
+ index = -> Array::slice.call(el.parentNode.children).indexOf el
+ reply = qr.replies.splice(index(), 1)[0]
+ $.before @, el
+ qr.replies.splice index(), 0, reply
+ dragEnd: ->
+ $.removeClass @, 'drag'
+ $.removeClass $('.over', @parentNode), 'over'
rm: ->
qr.resetFileInput()
$.rm @el
@@ -2909,7 +2935,7 @@ a[href="javascript:;"] {
#qr > .move > span {
float: right;
}
-#autohide, .close, #qr select, #dump, .captcha, #qr .warning {
+#autohide, .close, #qr select, #dump, .remove, .captcha, #qr .warning {
cursor: pointer;
}
#qr select,
@@ -2967,6 +2993,7 @@ a[href="javascript:;"] {
border: 1px solid #666;
box-sizing: border-box;
-moz-box-sizing: border-box;
+ cursor: move;
display: inline-block;
height: 90px; width: 90px;
margin: 5px; padding: 2px;
@@ -2974,10 +3001,10 @@ a[href="javascript:;"] {
overflow: hidden;
position: relative;
text-shadow: 0 1px 1px #000;
- -webkit-transition: opacity .25s;
- -moz-transition: opacity .25s;
- -o-transition: opacity .25s;
- transition: opacity .25s;
+ -webkit-transition: .25s ease-in-out;
+ -moz-transition: .25s ease-in-out;
+ -o-transition: .25s ease-in-out;
+ transition: .25s ease-in-out;
vertical-align: top;
}
.preview:hover, .preview:focus {
@@ -2986,6 +3013,12 @@ a[href="javascript:;"] {
.preview#selected {
opacity: 1;
}
+.preview.drag {
+ box-shadow: 0 0 10px rgba(0,0,0,.5);
+}
+.preview.over {
+ border-color: #FFF;
+}
.preview > span {
color: #FFF;
}