From 09c0d7b795b7457c7f21efcca5ddacdfd5663318 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Tue, 17 Jan 2012 06:02:53 +0100 Subject: [PATCH] Display comment previews. --- 4chan_x.user.js | 17 ++++++++++++----- script.coffee | 30 +++++++++++++++++++++--------- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index c51e00546..556dc1129 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -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: 'x' + }); $.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;', "
Quick Reply " + (g.REPLY ? '' : threads) + " ⨯
    +
"); + 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(); @@ -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']; diff --git a/script.coffee b/script.coffee index 2b2308bd6..eb9488b9c 100644 --- a/script.coffee +++ b/script.coffee @@ -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: 'x' $.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 {
Quick Reply - #{if g.REPLY then '' else threads} ⨯ + #{if g.REPLY then '' else threads} x
@@ -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()