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

Start UI for replies list.

Browse Source
This commit is contained in:
Nicolas Stepien 2012-01-11 17:28:33 +01:00
parent d5df9b0714
commit 4263b25cc1
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
4chan_x.user.js
View File

@ -1301,7 +1301,7 @@
break; break;
} }
if (qr.replies.length === 1 && !qr.replies[0].file) { if (qr.replies.length === 1 && !qr.replies[0].file) {
qr.replies[0].file = file; qr.replies[0].setFile(file);
} else { } else {
new qr.reply(file); new qr.reply(file);
} }
@ -1313,16 +1313,27 @@
function _Class(file) { function _Class(file) {
var previous, _ref; var previous, _ref;
this.file = file;
_ref = (previous = qr.replies[qr.replies.length - 1]) ? [previous.name, /^sage$/.test(previous.email) ? null : previous.email, conf['Remember Subject'] ? previous.sub : null] : [$.get("qr_name", null), $.get("qr_email", null), conf['Remember Subject'] ? $.get("qr_sub", null) : null], this.name = _ref[0], this.email = _ref[1], this.sub = _ref[2]; _ref = (previous = qr.replies[qr.replies.length - 1]) ? [previous.name, /^sage$/.test(previous.email) ? null : previous.email, conf['Remember Subject'] ? previous.sub : null] : [$.get("qr_name", null), $.get("qr_email", null), conf['Remember Subject'] ? $.get("qr_sub", null) : null], this.name = _ref[0], this.email = _ref[1], this.sub = _ref[2];
this.com = null; this.com = null;
this.el = $.el('li', {
textContent: 'no file'
});
if (file) this.setFile(file);
$.before($('#addReply', qr.el), this.el);
qr.replies.push(this); qr.replies.push(this);
} }
_Class.prototype.setFile = function(file) {
this.file = file;
return this.el.textContent = this.file.fileName;
};
_Class.prototype.load = function() { _Class.prototype.load = function() {
var data; var data, _ref;
for (data in this) { for (data in this) {
if (data !== 'file') $("[name=" + data + "]", qr.el).value = this[data]; if ((_ref = $("[name=" + data + "]", qr.el)) != null) {
_ref.value = this[data];
}
} }
return log(this); return log(this);
}; };
@ -1354,7 +1365,7 @@
} }
}); });
qr.mimeTypes = mimeTypes.split(', '); qr.mimeTypes = mimeTypes.split(', ');
qr.el = ui.dialog('qr', 'top:0;right:0;', "<style>.autohide:not(:hover) > form { display: none;}#qr > .move { min-width: 300px; overflow: hidden; box-sizing: border-box; padding: 0 2px;}#qr > .move > span { float: right;}#autohide, #qr select, #dump, .captcha { cursor: pointer;}#qr select,#qr > form { margin: 0;}#dump { background: -webkit-linear-gradient(#EEE, #CCC); background: -moz-linear-gradient(#EEE, #CCC); background: -o-linear-gradient(#EEE, #CCC); background: linear-gradient(#EEE, #CCC); width: 10%;}#dump:hover, #dump:focus { background: -webkit-linear-gradient(#FFF, #DDD); background: -moz-linear-gradient(#FFF, #DDD); background: -o-linear-gradient(#FFF, #DDD); background: linear-gradient(#FFF, #DDD);}#dump:active, .dump #dump:not(:hover):not(:focus) { background: -webkit-linear-gradient(#CCC, #DDD); background: -moz-linear-gradient(#CCC, #DDD); background: -o-linear-gradient(#CCC, #DDD); background: linear-gradient(#CCC, #DDD);}#qr:not(.dump) #replies { display: none;}.field { border: 1px solid #CCC; color: #333; font: 13px sans-serif; margin: 0; padding: 2px 4px 3px; width: 30%; -webkit-transition: color .25s, border .25s; -moz-transition: color .25s, border .25s; -o-transition: color .25s, border .25s; transition: color .25s, border .25s;}.field:-moz-placeholder,.field:hover:-moz-placeholder { color: #AAA;}.field:hover, .field:focus { border-color: #999; color: #000; outline: none;}textarea.field { min-height: 120px; width: 100%;}.captcha { background: #FFF; text-align: center;}.captcha > img { height: 57px; width: 300px;}.field[name=captcha] { width: 100%;}#qr [type=file] { width: 80%;}#qr [type=submit] { padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */ width: 20%;}</style><div class=move> Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide> <span>" + (g.REPLY ? '' : threads) + " <a class=close>⨯</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> <div id=replies></div> <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div> <div class=captcha><img></div> <div><input name=captcha title=Verification placeholder=Verification class=field size=1></div> <div><input type=file name=upfile max=" + ($('[name=MAX_FILE_SIZE]').value) + " accept='" + mimeTypes + "' multiple><input type=submit value=" + (g.dead ? '404 disabled' : 'Submit') + "></div> <div class=error></div></form>"); qr.el = ui.dialog('qr', 'top:0;right:0;', "<style>.autohide:not(:hover) > form { display: none;}#qr > .move { min-width: 300px; overflow: hidden; box-sizing: border-box; padding: 0 2px;}#qr > .move > span { float: right;}#autohide, #qr select, #dump, .captcha { cursor: pointer;}#qr select,#qr > form { margin: 0;}#dump { background: -webkit-linear-gradient(#EEE, #CCC); background: -moz-linear-gradient(#EEE, #CCC); background: -o-linear-gradient(#EEE, #CCC); background: linear-gradient(#EEE, #CCC); width: 10%;}#dump:hover, #dump:focus { background: -webkit-linear-gradient(#FFF, #DDD); background: -moz-linear-gradient(#FFF, #DDD); background: -o-linear-gradient(#FFF, #DDD); background: linear-gradient(#FFF, #DDD);}#dump:active, .dump #dump:not(:hover):not(:focus) { background: -webkit-linear-gradient(#CCC, #DDD); background: -moz-linear-gradient(#CCC, #DDD); background: -o-linear-gradient(#CCC, #DDD); background: linear-gradient(#CCC, #DDD);}#qr:not(.dump) output { display: none;}.field { border: 1px solid #CCC; color: #333; font: 13px sans-serif; margin: 0; padding: 2px 4px 3px; width: 30%; -webkit-transition: color .25s, border .25s; -moz-transition: color .25s, border .25s; -o-transition: color .25s, border .25s; transition: color .25s, border .25s;}.field:-moz-placeholder,.field:hover:-moz-placeholder { color: #AAA;}.field:hover, .field:focus { border-color: #999; color: #000; outline: none;}textarea.field { min-height: 120px; width: 100%;}.captcha { background: #FFF; text-align: center;}.captcha > img { height: 57px; width: 300px;}.field[name=captcha] { width: 100%;}#qr [type=file] { width: 80%;}#qr [type=submit] { padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */ width: 20%;}</style><div class=move> Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide> <span>" + (g.REPLY ? '' : threads) + " <a class=close>⨯</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><ol><a id=addReply>+</a></ol></output> <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div> <div class=captcha><img></div> <div><input name=captcha title=Verification placeholder=Verification class=field size=1></div> <div><input type=file name=upfile max=" + ($('[name=MAX_FILE_SIZE]').value) + " accept='" + mimeTypes + "' multiple><input type=submit value=" + (g.dead ? '404 disabled' : 'Submit') + "></div> <div class=error></div></form>");
if (!g.REPLY) { if (!g.REPLY) {
$.on($('select', qr.el), 'mousedown', function(e) { $.on($('select', qr.el), 'mousedown', function(e) {
return e.stopPropagation(); return e.stopPropagation();
@ -1365,6 +1376,9 @@
$.on($('#dump', qr.el), 'click', function() { $.on($('#dump', qr.el), 'click', function() {
return qr.el.classList.toggle('dump'); return qr.el.classList.toggle('dump');
}); });
$.on($('#addReply', qr.el), 'click', function() {
return new qr.reply().load();
});
$.on($('form', qr.el), 'submit', qr.submit); $.on($('form', qr.el), 'submit', qr.submit);
$.on($('[type=file]', qr.el), 'change', qr.fileInput); $.on($('[type=file]', qr.el), 'change', qr.fileInput);
new qr.reply().load(); new qr.reply().load();

23
script.coffee
View File

@ -952,7 +952,7 @@ qr =
qr.error 'Unsupported file type.' qr.error 'Unsupported file type.'
else else
# set or modify selected reply's file # set or modify selected reply's file
# qr.replies[?].file = file # qr.replies[?].setFile file
return return
for file in @files for file in @files
if file.size > @max if file.size > @max
@ -963,14 +963,14 @@ qr =
break break
if qr.replies.length is 1 and not qr.replies[0].file if qr.replies.length is 1 and not qr.replies[0].file
# set initial reply's file # set initial reply's file
qr.replies[0].file = file qr.replies[0].setFile file
else else
new qr.reply file new qr.reply file
$.addClass qr.el, 'dump' $.addClass qr.el, 'dump'
replies: [] replies: []
reply: class reply: class
constructor: (@file) -> constructor: (file) ->
[@name, @email, @sub] = [@name, @email, @sub] =
if previous = qr.replies[qr.replies.length-1] if previous = qr.replies[qr.replies.length-1]
[ [
@ -985,10 +985,18 @@ qr =
if conf['Remember Subject'] then $.get("qr_sub", null) else null if conf['Remember Subject'] then $.get("qr_sub", null) else null
] ]
@com = null @com = null
@el = $.el 'li',
textContent: 'no file'
@setFile file if file
$.before $('#addReply', qr.el), @el
qr.replies.push @ qr.replies.push @
# set/rm this reply's file
setFile: (@file) ->
# update UI
@el.textContent = @file.fileName
load: -> load: ->
for data of @ for data of @
$("[name=#{data}]", qr.el).value = @[data] unless data is 'file' $("[name=#{data}]", qr.el)?.value = @[data]
# visual feedback in the list # visual feedback in the list
log @ log @
rm: -> rm: ->
@ -1052,7 +1060,7 @@ qr =
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) #replies { #qr:not(.dump) output {
display: none; display: none;
} }
.field { .field {
@ -1106,7 +1114,7 @@ textarea.field {
</div> </div>
<form> <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> <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>
<div id=replies></div> <output id=replies><ol><a id=addReply>+</a></ol></output>
<div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div> <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>
<div class=captcha><img></div> <div class=captcha><img></div>
<div><input name=captcha title=Verification placeholder=Verification class=field size=1></div> <div><input name=captcha title=Verification placeholder=Verification class=field size=1></div>
@ -1118,12 +1126,13 @@ textarea.field {
$.on $('#autohide', qr.el), 'click', qr.hide $.on $('#autohide', qr.el), 'click', qr.hide
$.on $('.close', qr.el), 'click', qr.close $.on $('.close', qr.el), 'click', qr.close
$.on $('#dump', qr.el), 'click', -> qr.el.classList.toggle 'dump' $.on $('#dump', qr.el), 'click', -> qr.el.classList.toggle 'dump'
$.on $('#addReply', qr.el), 'click', -> new qr.reply().load()
$.on $('form', qr.el), 'submit', qr.submit $.on $('form', qr.el), 'submit', qr.submit
$.on $('[type=file]', qr.el), 'change', qr.fileInput $.on $('[type=file]', qr.el), 'change', qr.fileInput
new qr.reply().load() new qr.reply().load()
# save selected reply's data
for input in ['name', 'email', 'sub', 'com'] for input in ['name', 'email', 'sub', 'com']
# save this reply's data
$.on $("[name=#{input}]", qr.el), 'change', -> # (getReply?)[@name] = @value $.on $("[name=#{input}]", qr.el), 'change', -> # (getReply?)[@name] = @value
# sync between tabs # sync between tabs
# $.on window, 'storage', (e) -> # $.on window, 'storage', (e) ->