Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace usual file input by custom elements.

Browse Source
This commit is contained in:
Nicolas Stepien 2012-01-27 00:01:35 +01:00
parent 5f1cc1d471
commit d830ae3f95
2 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
4chan_x.user.js
View File

@ -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;', "<div class=move> Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide> <span>" + (g.REPLY ? '' : threads) + " <a class=close>x</a></span></div><form> <div><input id=dump class=field type=button title='Dump mode' value=+><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div> <output id=replies><div><a id=addReply href=javascript:;>+</a></div></output> <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div> <div class=captcha title=Reload><img></div> <div><input name=captcha title=Verification class=field autocomplete=off size=1></div> <div><input type=file name=upfile max=" + ($('[name=MAX_FILE_SIZE]').value) + " accept='" + mimeTypes + "' multiple><input type=submit></div> <label id=spoilerLabel" + (qr.spoiler ? '' : ' hidden') + "><input type=checkbox id=spoiler> Spoiler Image</label> <div class=warning></div></form>");
qr.el = ui.dialog('qr', 'top:0;right:0;', "<div class=move> Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide> <span>" + (g.REPLY ? '' : threads) + " <a class=close>x</a></span></div><form> <div><input id=dump class=field type=button title='Dump mode' value=+><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div> <output id=replies><div><a id=addReply href=javascript:;>+</a></div></output> <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div> <div class=captcha title=Reload><img></div> <div><input name=captcha title=Verification class=field autocomplete=off size=1></div> <div><label for=upfile><input type=button value='Select Files' class=button></label><span id=fileInfo></span><input type=submit class=button></div> <label id=spoilerLabel" + (qr.spoiler ? '' : ' hidden') + "><input type=checkbox id=spoiler> Spoiler Image</label> <div class=warning></div></form><input type=file id=upfile tabindex=-1 max=" + ($('[name=MAX_FILE_SIZE]').value) + " accept='" + mimeTypes + "' multiple>");
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 {\

35
script.coffee
View File

@ -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 =
<div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>
<div class=captcha title=Reload><img></div>
<div><input name=captcha title=Verification class=field autocomplete=off size=1></div>
<div><input type=file name=upfile max=#{$('[name=MAX_FILE_SIZE]').value} accept='#{mimeTypes}' multiple><input type=submit></div>
<div><label for=upfile><input type=button value='Select Files' class=button></label><span id=fileInfo></span><input type=submit class=button></div>
<label id=spoilerLabel#{if qr.spoiler then '' else ' hidden'}><input type=checkbox id=spoiler> Spoiler Image</label>
<div class=warning></div>
</form>"
</form>
<input type=file id=upfile tabindex=-1 max=#{$('[name=MAX_FILE_SIZE]').value} accept='#{mimeTypes}' multiple>"
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 {