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

Some reorganization in qr.dialog().

Browse Source
This commit is contained in:
Nicolas Stepien 2012-01-28 00:30:08 +01:00
parent 2541205e43
commit 7b2b76a00a
2 changed files with 88 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
4chan_x.user.js
View File

@ -229,7 +229,7 @@
el.innerHTML = html; el.innerHTML = html;
el.id = id; el.id = id;
el.style.cssText = (saved = localStorage["" + NAMESPACE + id + ".position"]) ? saved : position; el.style.cssText = (saved = localStorage["" + NAMESPACE + id + ".position"]) ? saved : position;
el.querySelector('div.move').addEventListener('mousedown', ui.dragstart, false); el.querySelector('.move').addEventListener('mousedown', ui.dragstart, false);
return el; return el;
}, },
dragstart: function(e) { dragstart: function(e) {
@ -1481,7 +1481,7 @@
init: function() { init: function() {
var _this = this; var _this = this;
this.img = $('.captcha > img', qr.el); this.img = $('.captcha > img', qr.el);
this.input = $('[name=captcha]', qr.el); this.input = $('[autocomplete]', qr.el);
this.challenge = $.id('recaptcha_challenge_field_holder'); this.challenge = $.id('recaptcha_challenge_field_holder');
$.on(this.img.parentNode, 'click', this.reload); $.on(this.img.parentNode, 'click', this.reload);
$.on(this.input, 'keydown', this.keydown); $.on(this.input, 'keydown', this.keydown);
@ -1541,7 +1541,39 @@
} }
}, },
dialog: function() { dialog: function() {
var input, mimeTypes, thread, threads, _i, _j, _len, _len2, _ref, _ref2; var fileInput, input, mimeTypes, spoiler, thread, threads, _i, _j, _len, _len2, _ref, _ref2;
qr.el = ui.dialog('qr', 'top:0;right:0;', '\
<div class=move>\
Quick Reply <input type=checkbox id=autohide title=Auto-hide>\
<span> <a class=close>x</a></span>\
</div>\
<form>\
<div><input id=dump class=field type=button title="Dump list" 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>\
<div id=replies><div><a id=addReply href=javascript:;>+</a></div></div>\
<div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>\
<div class=captcha title=Reload><img></div>\
<div><input title=Verification class=field autocomplete=off size=1></div>\
<div><input type=file multiple><input type=submit></div>\
<label id=spoilerLabel><input type=checkbox id=spoiler> Spoiler Image</label>\
<div class=warning></div>\
</form>');
mimeTypes = $('.rules').textContent.match(/: (.+) /)[1].toLowerCase().replace(/\w+/g, function(type) {
switch (type) {
case 'jpg':
return 'image/jpeg';
case 'pdf':
return 'application/pdf';
default:
return "image/" + type;
}
});
qr.mimeTypes = mimeTypes.split(', ');
fileInput = $('[type=file]', qr.el);
fileInput.max = $('[name=MAX_FILE_SIZE]').value;
fileInput.accept = mimeTypes;
qr.spoiler = !!$('#com_submit + label');
spoiler = $('#spoilerLabel', qr.el);
spoiler.hidden = !qr.spoiler;
if (!g.REPLY) { if (!g.REPLY) {
threads = '<option value=new>New thread</option>'; threads = '<option value=new>New thread</option>';
_ref = $$('.op'); _ref = $$('.op');
@ -1549,22 +1581,9 @@
thread = _ref[_i]; thread = _ref[_i];
threads += "<option value=" + thread.id + ">Thread " + thread.id + "</option>"; threads += "<option value=" + thread.id + ">Thread " + thread.id + "</option>";
} }
threads = "<select>" + threads + "</select>"; $.prepend($('.move > span', qr.el), $.el('select', {
} innerHTML: threads
mimeTypes = $('.rules').textContent.toLowerCase().match(/: (.+) /)[1].replace(/\w+/g, function(type) { }));
switch (type) {
case 'jpg':
return 'image/jpeg';
case 'pdf':
return 'application/pdf';
default:
return 'image/' + type;
}
});
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>");
if (!g.REPLY) {
$.on($('select', qr.el), 'mousedown', function(e) { $.on($('select', qr.el), 'mousedown', function(e) {
return e.stopPropagation(); return e.stopPropagation();
}); });
@ -1581,8 +1600,8 @@
$.on($('textarea', qr.el), 'change', function() { $.on($('textarea', qr.el), 'change', function() {
return qr.selected.el.lastChild.textContent = this.value; return qr.selected.el.lastChild.textContent = this.value;
}); });
$.on($('[type=file]', qr.el), 'change', qr.fileInput); $.on(fileInput, 'change', qr.fileInput);
$.on($('#spoiler', qr.el), 'change', function() { $.on(spoiler.firstChild, 'change', function() {
return $('input', qr.selected.el).click(); return $('input', qr.selected.el).click();
}); });
new qr.reply().select(); new qr.reply().select();
@ -3528,7 +3547,7 @@ a[href="javascript:;"] {\
background: -o-linear-gradient(#CCC, #DDD);\ background: -o-linear-gradient(#CCC, #DDD);\
background: linear-gradient(#CCC, #DDD);\ background: linear-gradient(#CCC, #DDD);\
}\ }\
#qr:not(.dump) output, .dump > form > label {\ #qr:not(.dump) #replies, .dump > form > label {\
display: none;\ display: none;\
}\ }\
#replies {\ #replies {\
@ -3642,7 +3661,7 @@ textarea.field {\
height: 57px;\ height: 57px;\
width: 300px;\ width: 300px;\
}\ }\
.field[name=captcha] {\ .field:only-child {\
width: 100%;\ width: 100%;\
}\ }\
#qr [type=file] {\ #qr [type=file] {\

85
script.coffee
View File

@ -136,7 +136,7 @@ ui =
el.innerHTML = html el.innerHTML = html
el.id = id el.id = id
el.style.cssText = if saved = localStorage["#{NAMESPACE}#{id}.position"] then saved else position el.style.cssText = if saved = localStorage["#{NAMESPACE}#{id}.position"] then saved else position
el.querySelector('div.move').addEventListener 'mousedown', ui.dragstart, false el.querySelector('.move').addEventListener 'mousedown', ui.dragstart, false
el el
dragstart: (e) -> dragstart: (e) ->
#prevent text selection #prevent text selection
@ -1090,7 +1090,7 @@ qr =
captcha: captcha:
init: -> init: ->
@img = $ '.captcha > img', qr.el @img = $ '.captcha > img', qr.el
@input = $ '[name=captcha]', qr.el @input = $ '[autocomplete]', qr.el
@challenge = $.id 'recaptcha_challenge_field_holder' @challenge = $.id 'recaptcha_challenge_field_holder'
$.on @img.parentNode, 'click', @reload $.on @img.parentNode, 'click', @reload
$.on @input, 'keydown', @keydown $.on @input, 'keydown', @keydown
@ -1136,48 +1136,55 @@ qr =
e.preventDefault() e.preventDefault()
dialog: -> dialog: ->
# create a new thread or select thread to reply to qr.el = ui.dialog 'qr', 'top:0;right:0;', '
unless g.REPLY <div class=move>
threads = '<option value=new>New thread</option>' Quick Reply <input type=checkbox id=autohide title=Auto-hide>
for thread in $$ '.op' <span> <a class=close>x</a></span>
threads += "<option value=#{thread.id}>Thread #{thread.id}</option>" </div>
threads = "<select>#{threads}</select>" <form>
# chose only supported files <div><input id=dump class=field type=button title="Dump list" 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>
mimeTypes = $('.rules').textContent.toLowerCase().match(/: (.+) /)[1].replace /\w+/g, (type) -> <div id=replies><div><a id=addReply href=javascript:;>+</a></div></div>
<div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>
<div class=captcha title=Reload><img></div>
<div><input title=Verification class=field autocomplete=off size=1></div>
<div><input type=file multiple><input type=submit></div>
<label id=spoilerLabel><input type=checkbox id=spoiler> Spoiler Image</label>
<div class=warning></div>
</form>'
# Allow only this board's supported files.
mimeTypes = $('.rules').textContent.match(/: (.+) /)[1].toLowerCase().replace /\w+/g, (type) ->
switch type switch type
when 'jpg' when 'jpg'
'image/jpeg' 'image/jpeg'
when 'pdf' when 'pdf'
'application/pdf' 'application/pdf'
else else
'image/' + type "image/#{type}"
qr.mimeTypes = mimeTypes.split ', ' qr.mimeTypes = mimeTypes.split ', '
qr.spoiler = !!$ '#com_submit + label' fileInput = $ '[type=file]', qr.el
qr.el = ui.dialog 'qr', 'top:0;right:0;', " fileInput.max = $('[name=MAX_FILE_SIZE]').value
<div class=move> fileInput.accept = mimeTypes
Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide>
<span>#{if g.REPLY then '' else threads} <a class=close>x</a></span> qr.spoiler = !!$ '#com_submit + label'
</div> spoiler = $ '#spoilerLabel', qr.el
<form> spoiler.hidden = !qr.spoiler
<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#{if qr.spoiler then '' else ' hidden'}><input type=checkbox id=spoiler> Spoiler Image</label>
<div class=warning></div>
</form>"
unless g.REPLY unless g.REPLY
$.on $('select', qr.el), 'mousedown', (e) -> e.stopPropagation() # Make a list with visible threads and an option to create a new one.
$.on $('#autohide', qr.el), 'change', qr.toggleHide threads = '<option value=new>New thread</option>'
$.on $('.close', qr.el), 'click', qr.close for thread in $$ '.op'
$.on $('#dump', qr.el), 'click', -> qr.el.classList.toggle 'dump' threads += "<option value=#{thread.id}>Thread #{thread.id}</option>"
$.on $('#addReply', qr.el), 'click', -> new qr.reply().select() $.prepend $('.move > span', qr.el), $.el 'select', innerHTML: threads
$.on $('form', qr.el), 'submit', qr.submit $.on $('select', qr.el), 'mousedown', (e) -> e.stopPropagation()
$.on $('textarea', qr.el), 'change', -> qr.selected.el.lastChild.textContent = @value $.on $('#autohide', qr.el), 'change', qr.toggleHide
$.on $('[type=file]', qr.el), 'change', qr.fileInput $.on $('.close', qr.el), 'click', qr.close
$.on $('#spoiler', qr.el), 'change', -> $('input', qr.selected.el).click() $.on $('#dump', qr.el), 'click', -> qr.el.classList.toggle 'dump'
$.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 fileInput, 'change', qr.fileInput
$.on spoiler.firstChild, 'change', -> $('input', qr.selected.el).click()
new qr.reply().select() new qr.reply().select()
# save selected reply's data # save selected reply's data
@ -2782,7 +2789,7 @@ a[href="javascript:;"] {
background: -o-linear-gradient(#CCC, #DDD); background: -o-linear-gradient(#CCC, #DDD);
background: linear-gradient(#CCC, #DDD); background: linear-gradient(#CCC, #DDD);
} }
#qr:not(.dump) output, .dump > form > label { #qr:not(.dump) #replies, .dump > form > label {
display: none; display: none;
} }
#replies { #replies {
@ -2896,7 +2903,7 @@ textarea.field {
height: 57px; height: 57px;
width: 300px; width: 300px;
} }
.field[name=captcha] { .field:only-child {
width: 100%; width: 100%;
} }
#qr [type=file] { #qr [type=file] {