From d830ae3f95756fbab1ca16c9a66fe73b5bb655ac Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Fri, 27 Jan 2012 00:01:35 +0100 Subject: [PATCH] Replace usual file input by custom elements. --- 4chan_x.user.js | 39 +++++++++++++++++++++------------------ script.coffee | 35 ++++++++++++++++++++--------------- 2 files changed, 41 insertions(+), 33 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 366a4889c..3cc7aca0d 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -1235,7 +1235,6 @@ qr.replies[0].rm(); } qr.status(); - qr.resetFileInput(); if ((spoiler = $.id('spoiler')).checked) spoiler.click(); return qr.cleanError(); }, @@ -1367,10 +1366,8 @@ file = this.files[0]; if (file.size > this.max) { qr.error('File too large.'); - qr.resetFileInput(); } else if (-1 === qr.mimeTypes.indexOf(file.type)) { qr.error('Unsupported file type.'); - qr.resetFileInput(); } else { qr.selected.setFile(file); } @@ -1392,11 +1389,7 @@ new qr.reply(file); } } - $.addClass(qr.el, 'dump'); - if (this.multiple) return qr.resetFileInput(); - }, - resetFileInput: function() { - return $('[type=file]', qr.el).value = null; + return $.addClass(qr.el, 'dump'); }, replies: [], reply: (function() { @@ -1471,7 +1464,6 @@ _Class.prototype.rm = function() { var index, url; - qr.resetFileInput(); $.rm(this.el); index = qr.replies.indexOf(this); if (qr.replies.length === 1) { @@ -1576,7 +1568,7 @@ }); qr.mimeTypes = mimeTypes.split(', '); qr.spoiler = !!$('#com_submit + label'); - qr.el = ui.dialog('qr', 'top:0;right:0;', "
Quick Reply " + (g.REPLY ? '' : threads) + " x
+
"); + qr.el = ui.dialog('qr', 'top:0;right:0;', "
Quick Reply " + (g.REPLY ? '' : threads) + " x
+
"); if (!g.REPLY) { $.on($('select', qr.el), 'mousedown', function(e) { return e.stopPropagation(); @@ -1594,7 +1586,7 @@ $.on($('textarea', qr.el), 'change', function() { return qr.selected.el.lastChild.textContent = this.value; }); - $.on($('[type=file]', qr.el), 'change', qr.fileInput); + $.on($('#upfile', qr.el), 'change', qr.fileInput); $.on($('#spoiler', qr.el), 'change', function() { return $('input', qr.selected.el).click(); }); @@ -1741,11 +1733,10 @@ qr.cooldown.set(/sage/i.test(reply.email) ? 60 : 30); } if (conf['Persistent QR'] || qr.cooldown.auto) { - reply.rm(); + return reply.rm(); } else { - qr.close(); + return qr.close(); } - return qr.resetFileInput(); }, message: { init: function() { @@ -3659,12 +3650,24 @@ textarea.field {\ .field[name=captcha] {\ width: 100%;\ }\ -#qr [type=file] {\ - width: 75%;\ +#upfile {\ + position: absolute;\ + visibility: hidden;\ }\ -#qr [type=submit] {\ +#fileInfo {\ + box-sizing: border-box;\ + -moz-box-sizing: border-box;\ + display: inline-block;\ + overflow: hidden;\ + padding: 2px;\ + text-overflow: ellipsis;\ + white-space: nowrap;\ + width: 40%;\ +}\ +.button {\ + margin: 1px 0;\ padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */\ - width: 25%;\ + width: 30%;\ }\ \ .new {\ diff --git a/script.coffee b/script.coffee index 34172df5b..3e3c4c907 100644 --- a/script.coffee +++ b/script.coffee @@ -889,7 +889,6 @@ qr = for i in qr.replies qr.replies[0].rm() qr.status() - qr.resetFileInput() spoiler.click() if (spoiler = $.id 'spoiler').checked qr.cleanError() hide: -> @@ -1003,10 +1002,8 @@ qr = file = @files[0] if file.size > @max qr.error 'File too large.' - qr.resetFileInput() else if -1 is qr.mimeTypes.indexOf file.type qr.error 'Unsupported file type.' - qr.resetFileInput() else qr.selected.setFile file return @@ -1023,9 +1020,6 @@ qr = else new qr.reply file $.addClass qr.el, 'dump' - qr.resetFileInput() if @multiple # reset input - resetFileInput: -> - $('[type=file]', qr.el).value = null replies: [] reply: class @@ -1078,7 +1072,6 @@ qr = $("[name=#{data}]", qr.el).value = @[data] $('#spoiler', qr.el).checked = @spoiler rm: -> - qr.resetFileInput() $.rm @el index = qr.replies.indexOf @ if qr.replies.length is 1 @@ -1165,10 +1158,11 @@ qr =
-
+
-" + +" unless g.REPLY $.on $('select', qr.el), 'mousedown', (e) -> e.stopPropagation() $.on $('#autohide', qr.el), 'click', qr.toggleHide @@ -1177,7 +1171,7 @@ qr = $.on $('#addReply', qr.el), 'click', -> new qr.reply().select() $.on $('form', qr.el), 'submit', qr.submit $.on $('textarea', qr.el), 'change', -> qr.selected.el.lastChild.textContent = @value - $.on $('[type=file]', qr.el), 'change', qr.fileInput + $.on $('#upfile', qr.el), 'change', qr.fileInput $.on $('#spoiler', qr.el), 'change', -> $('input', qr.selected.el).click() new qr.reply().select() @@ -1324,7 +1318,6 @@ qr = reply.rm() else qr.close() - qr.resetFileInput() message: init: -> @@ -2897,12 +2890,24 @@ textarea.field { .field[name=captcha] { width: 100%; } -#qr [type=file] { - width: 75%; +#upfile { + position: absolute; + visibility: hidden; } -#qr [type=submit] { +#fileInfo { + box-sizing: border-box; + -moz-box-sizing: border-box; + display: inline-block; + overflow: hidden; + padding: 2px; + text-overflow: ellipsis; + white-space: nowrap; + width: 40%; +} +.button { + margin: 1px 0; padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */ - width: 25%; + width: 30%; } .new {