Display comment previews.
This commit is contained in:
Nicolas Stepien
parent
5f27b620cd
commit
09c0d7b795
@ -1262,7 +1262,8 @@
|
||||
ta.value = ta.value.slice(0, caretPos) + text + ta.value.slice(ta.selectionEnd, ta.value.length);
|
||||
ta.focus();
|
||||
ta.selectionEnd = ta.selectionStart = caretPos + text.length;
|
||||
return qr.selected.com = ta.value;
|
||||
qr.selected.com = ta.value;
|
||||
return qr.selected.el.lastChild.textContent = ta.value;
|
||||
},
|
||||
fileDrop: function(e) {
|
||||
if (/TEXTAREA|INPUT/.test(e.target.nodeName)) return;
|
||||
@ -1316,7 +1317,10 @@
|
||||
_this = this;
|
||||
_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.el = $.el('li');
|
||||
this.el = $.el('li', {
|
||||
className: 'preview',
|
||||
innerHTML: '<a class=remove title=Remove>x</a><label hidden><input type=checkbox></label><span></span>'
|
||||
});
|
||||
$.on(this.el, 'click', function() {
|
||||
return _this.select();
|
||||
});
|
||||
@ -1335,8 +1339,8 @@
|
||||
return;
|
||||
}
|
||||
reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
return _this.el.style.backgroundImage = "url(" + e.target.result + ")";
|
||||
reader.onload = function() {
|
||||
return _this.el.style.backgroundImage = "url(" + reader.result + ")";
|
||||
};
|
||||
return reader.readAsDataURL(file);
|
||||
};
|
||||
@ -1382,7 +1386,7 @@
|
||||
}
|
||||
});
|
||||
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) output { display: none;}#replies { display: block; height: 100px; position: relative;}#replies > ol { top: 0; right: 0; bottom: 0; left: 0; margin: 0; padding: 0; overflow: hidden; position: absolute; white-space: nowrap;}#replies > ol:hover { overflow-x: auto;}#replies > ol > li { background-color: rgba(0,0,0,.5); background-position: 50% 20%; background-size: cover; border: 1px solid #000; box-sizing: border-box; color: #FFF; cursor: pointer; display: inline-block; height: 90px; width: 90px; margin: 5px; padding: 2px; opacity: .5; text-shadow: 0 1px 1px #000; -webkit-transition: opacity .25s; -moz-transition: opacity .25s; -o-transition: opacity .25s; transition: opacity .25s;}#replies > ol > li:hover { opacity: .9;}#replies > ol > li#selected { opacity: 1;}.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>");
|
||||
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;}#replies { display: block; height: 100px; position: relative;}#replies > ol { top: 0; right: 0; bottom: 0; left: 0; margin: 0; padding: 0; overflow: hidden; position: absolute; white-space: pre;}#replies > ol:hover { overflow-x: auto;}.preview { background-color: rgba(0,0,0,.2); background-position: 50% 20%; background-size: cover; border: 1px solid #000; box-sizing: border-box; color: #FFF; cursor: pointer; display: inline-block; height: 90px; width: 90px; margin: 5px; padding: 2px; opacity: .5; overflow: hidden; text-shadow: 0 1px 1px #000; -webkit-transition: opacity .25s; -moz-transition: opacity .25s; -o-transition: opacity .25s; transition: opacity .25s; vertical-align: top;}.preview:hover { opacity: .9;}.preview#selected { opacity: 1;}.remove { color: #C00; font-weight: 700; padding: 3px;}.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>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><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) {
|
||||
$.on($('select', qr.el), 'mousedown', function(e) {
|
||||
return e.stopPropagation();
|
||||
@ -1397,6 +1401,9 @@
|
||||
return new qr.reply().select();
|
||||
});
|
||||
$.on($('form', qr.el), 'submit', qr.submit);
|
||||
$.on($('textarea', qr.el), 'change', function() {
|
||||
return qr.selected.el.lastChild.textContent = this.value;
|
||||
});
|
||||
$.on($('[type=file]', qr.el), 'change', qr.fileInput);
|
||||
new qr.reply().select();
|
||||
_ref2 = ['name', 'email', 'sub', 'com'];
|
||||
|
||||
@ -933,6 +933,7 @@ qr =
|
||||
|
||||
# onchange event isn't triggered, save value
|
||||
qr.selected.com = ta.value
|
||||
qr.selected.el.lastChild.textContent = ta.value
|
||||
|
||||
fileDrop: (e) ->
|
||||
return if /TEXTAREA|INPUT/.test e.target.nodeName
|
||||
@ -972,6 +973,7 @@ qr =
|
||||
replies: []
|
||||
reply: class
|
||||
constructor: (file) ->
|
||||
# set values, or null, to avoid 'undefined' values in inputs
|
||||
[@name, @email, @sub] =
|
||||
if previous = qr.replies[qr.replies.length-1]
|
||||
[
|
||||
@ -986,7 +988,9 @@ qr =
|
||||
if conf['Remember Subject'] then $.get("qr_sub", null) else null
|
||||
]
|
||||
@com = null
|
||||
@el = $.el 'li'
|
||||
@el = $.el 'li',
|
||||
className: 'preview'
|
||||
innerHTML: '<a class=remove title=Remove>x</a><label hidden><input type=checkbox></label><span></span>'
|
||||
$.on @el, 'click', => @select()
|
||||
@setFile file if file
|
||||
$.before $('#addReply', qr.el), @el
|
||||
@ -997,8 +1001,7 @@ qr =
|
||||
@el.style.backgroundImage = null
|
||||
return
|
||||
reader = new FileReader()
|
||||
reader.onload = (e) =>
|
||||
@el.style.backgroundImage = "url(#{e.target.result})"
|
||||
reader.onload = => @el.style.backgroundImage = "url(#{reader.result})"
|
||||
reader.readAsDataURL file
|
||||
select: ->
|
||||
qr.selected?.el.id = null
|
||||
@ -1009,6 +1012,7 @@ qr =
|
||||
rm: ->
|
||||
# rm reply from qr.replies and the UI
|
||||
|
||||
|
||||
dialog: ->
|
||||
# create a new thread or select thread to reply to
|
||||
unless g.REPLY
|
||||
@ -1079,13 +1083,13 @@ qr =
|
||||
margin: 0; padding: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
}
|
||||
#replies > ol:hover {
|
||||
overflow-x: auto;
|
||||
}
|
||||
#replies > ol > li {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
.preview {
|
||||
background-color: rgba(0,0,0,.2);
|
||||
background-position: 50% 20%;
|
||||
background-size: cover;
|
||||
border: 1px solid #000;
|
||||
@ -1096,18 +1100,25 @@ qr =
|
||||
height: 90px; width: 90px;
|
||||
margin: 5px; padding: 2px;
|
||||
opacity: .5;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
-webkit-transition: opacity .25s;
|
||||
-moz-transition: opacity .25s;
|
||||
-o-transition: opacity .25s;
|
||||
transition: opacity .25s;
|
||||
vertical-align: top;
|
||||
}
|
||||
#replies > ol > li:hover {
|
||||
.preview:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
#replies > ol > li#selected {
|
||||
.preview#selected {
|
||||
opacity: 1;
|
||||
}
|
||||
.remove {
|
||||
color: #C00;
|
||||
font-weight: 700;
|
||||
padding: 3px;
|
||||
}
|
||||
.field {
|
||||
border: 1px solid #CCC;
|
||||
color: #333;
|
||||
@ -1155,7 +1166,7 @@ textarea.field {
|
||||
|
||||
<div class=move>
|
||||
Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide>
|
||||
<span>#{if g.REPLY then '' else threads} <a class=close>⨯</a></span>
|
||||
<span>#{if g.REPLY then '' else 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>
|
||||
@ -1173,6 +1184,7 @@ textarea.field {
|
||||
$.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 $('[type=file]', qr.el), 'change', qr.fileInput
|
||||
|
||||
new qr.reply().select()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user