From 7e4435d1c218b5343a0bdb6494d9f8d041cf50b6 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 11 Feb 2012 05:29:59 +0100 Subject: [PATCH] Drag replies in the dump list to reorder them. --- 4chan_x.user.js | 57 ++++++++++++++++++++++++++++++++++++++++++++----- changelog | 2 ++ script.coffee | 43 ++++++++++++++++++++++++++++++++----- 3 files changed, 92 insertions(+), 10 deletions(-) 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; }