From 53dc2d6cd3e2cb5502a4237da2cc45f59b259b76 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Thu, 19 Jan 2012 02:14:44 +0100 Subject: [PATCH] Get image spoiler support done. --- 4chan_x.user.js | 43 ++++++++++++++++++++++++++++++++++--------- script.coffee | 42 +++++++++++++++++++++++++++++++++--------- 2 files changed, 67 insertions(+), 18 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 10bb62808..57ad75ef0 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -1201,6 +1201,7 @@ qr = { init: function() { if (!$('form[name=post]')) return; + qr.spoiler = !!$('#com_submit + label'); g.callbacks.push(function(root) { return $.on($('.quotejs + .quotejs', root), 'click', qr.quote); }); @@ -1221,7 +1222,7 @@ } }, close: function() { - var i, _i, _len, _ref; + var i, spoiler, _i, _len, _ref; qr.el.hidden = true; d.activeElement.blur(); $.removeClass(qr.el, 'dump'); @@ -1231,6 +1232,7 @@ qr.replies[0].rm(); } qr.resetFileInput(); + if ((spoiler = $.id('spoiler')).checked) spoiler.click(); return qr.cleanError(); }, hide: function() { @@ -1328,12 +1330,12 @@ function _Class(file) { var previous, _ref, _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; + _ref = (previous = qr.replies[qr.replies.length - 1]) ? [previous.name, /^sage$/.test(previous.email) ? null : previous.email, conf['Remember Subject'] ? previous.sub : null, conf['Remember Spoiler'] ? previous.spoiler : false] : [$.get("qr_name", null), $.get("qr_email", null), conf['Remember Subject'] ? $.get("qr_sub", null) : null, false], this.name = _ref[0], this.email = _ref[1], this.sub = _ref[2], this.spoiler = _ref[3]; this.el = $.el('a', { className: 'preview', href: 'javascript:;', - innerHTML: 'x' + innerHTML: "x" }); $.on(this.el, 'click', function() { return _this.select(); @@ -1342,6 +1344,15 @@ e.stopPropagation(); return _this.rm(); }); + $.on($('label', this.el), 'click', function(e) { + return e.stopPropagation(); + }); + $.on($('input', this.el), 'change', function(e) { + _this.spoiler = e.target.checked; + if (_this.el.id === 'selected') { + return $.id('spoiler').checked = _this.spoiler; + } + }); if (file) this.setFile(file); $.before($('#addReply', qr.el), this.el); qr.replies.push(this); @@ -1355,6 +1366,7 @@ this.el.style.backgroundImage = null; return; } + if (qr.spoiler) $('label', this.el).hidden = false; url = window.URL || window.webkitURL; url.revokeObjectURL(this.url); this.url = url.createObjectURL(file); @@ -1362,17 +1374,16 @@ }; _Class.prototype.select = function() { - var data, _i, _len, _ref, _ref2, _results; + var data, _i, _len, _ref, _ref2; if ((_ref = qr.selected) != null) _ref.el.id = null; qr.selected = this; this.el.id = 'selected'; _ref2 = ['name', 'email', 'sub', 'com']; - _results = []; for (_i = 0, _len = _ref2.length; _i < _len; _i++) { data = _ref2[_i]; - _results.push($("[name=" + data + "]", qr.el).value = this[data]); + $("[name=" + data + "]", qr.el).value = this[data]; } - return _results; + return $('#spoiler', qr.el).checked = this.spoiler; }; _Class.prototype.rm = function() { @@ -1415,7 +1426,7 @@ } }); qr.mimeTypes = mimeTypes.split(', '); - qr.el = ui.dialog('qr', 'top:0;right:0;', "
Quick Reply " + (g.REPLY ? '' : threads) + " x
+
"); + qr.el = ui.dialog('qr', 'top:0;right:0;', "
Quick Reply " + (g.REPLY ? '' : threads) + " x
+
Spoiler Image?
"); if (!g.REPLY) { $.on($('select', qr.el), 'mousedown', function(e) { return e.stopPropagation(); @@ -1434,6 +1445,9 @@ return qr.selected.el.lastChild.textContent = this.value; }); $.on($('[type=file]', qr.el), 'change', qr.fileInput); + $.on($('#spoiler', qr.el), 'change', function() { + return $('input', qr.selected.el).click(); + }); new qr.reply().select(); _ref2 = ['name', 'email', 'sub', 'com']; for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) { @@ -3144,7 +3158,7 @@ a[href="javascript:;"] {\ background: -o-linear-gradient(#CCC, #DDD);\ background: linear-gradient(#CCC, #DDD);\ }\ -#qr:not(.dump) output {\ +#qr:not(.dump) output, .dump > form > label {\ display: none;\ }\ #replies {\ @@ -3174,6 +3188,7 @@ a[href="javascript:;"] {\ margin: 5px; padding: 2px;\ opacity: .5;\ overflow: hidden;\ + position: relative;\ text-shadow: 0 1px 1px #000;\ -webkit-transition: opacity .25s;\ -moz-transition: opacity .25s;\ @@ -3198,6 +3213,16 @@ a[href="javascript:;"] {\ .remove:hover::after {\ content: " Remove";\ }\ +.preview > label {\ + background: rgba(0,0,0,.5);\ + color: #FFF;\ + right: 0; bottom: 0; left: 0;\ + position: absolute;\ + text-align: center;\ +}\ +.preview > label > input {\ + margin: 0;\ +}\ #addReply {\ color: #333;\ font-size: 3.5em;\ diff --git a/script.coffee b/script.coffee index 70af28c81..23df051ef 100644 --- a/script.coffee +++ b/script.coffee @@ -875,6 +875,7 @@ nav = qr = init: -> return unless $ 'form[name=post]' + qr.spoiler = !!$ '#com_submit + label' g.callbacks.push (root) -> $.on $('.quotejs + .quotejs', root), 'click', qr.quote if conf['Persistent QR'] @@ -897,6 +898,7 @@ qr = for i in qr.replies qr.replies[0].rm() qr.resetFileInput() + spoiler.click() if (spoiler = $.id 'spoiler').checked qr.cleanError() hide: -> if $.id('autohide').checked @@ -978,41 +980,49 @@ qr = resetFileInput: -> $('[type=file]', qr.el).value = null - replies: [] reply: class constructor: (file) -> # set values, or null, to avoid 'undefined' values in inputs - [@name, @email, @sub] = + @com = null + [@name, @email, @sub, @spoiler] = if previous = qr.replies[qr.replies.length-1] [ previous.name, if /^sage$/.test(previous.email) then null else previous.email, - if conf['Remember Subject'] then previous.sub else null + if conf['Remember Subject'] then previous.sub else null, + if conf['Remember Spoiler'] then previous.spoiler else false ] else [ $.get("qr_name", null), $.get("qr_email", null), - if conf['Remember Subject'] then $.get("qr_sub", null) else null + if conf['Remember Subject'] then $.get("qr_sub", null) else null, + false ] - @com = null + @el = $.el 'a', className: 'preview' href: 'javascript:;' - innerHTML: 'x' - $.on @el, 'click', => @select() - $.on $('.remove', @el), 'click', (e) => + innerHTML: "x" + $.on @el, 'click', => @select() + $.on $('.remove', @el), 'click', (e) => e.stopPropagation() @rm() + $.on $('label', @el), 'click', (e) -> e.stopPropagation() + $.on $('input', @el), 'change', (e) => + @spoiler = e.target.checked + $.id('spoiler').checked = @spoiler if @el.id is 'selected' @setFile file if file $.before $('#addReply', qr.el), @el + qr.replies.push @ setFile: (@file) -> @el.title = file.name if file.type is 'application/pdf' @el.style.backgroundImage = null return + $('label', @el).hidden = false if qr.spoiler url = window.URL or window.webkitURL url.revokeObjectURL @url @url = url.createObjectURL file @@ -1023,6 +1033,7 @@ qr = @el.id = 'selected' for data in ['name', 'email', 'sub', 'com'] $("[name=#{data}]", qr.el).value = @[data] + $('#spoiler', qr.el).checked = @spoiler rm: -> $.rm @el index = qr.replies.indexOf @ @@ -1065,6 +1076,7 @@ qr =
+ Spoiler Image?
" unless g.REPLY @@ -1076,6 +1088,7 @@ qr = $.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 $('#spoiler', qr.el), 'change', -> $('input', qr.selected.el).click() new qr.reply().select() # save selected reply's data @@ -2489,7 +2502,7 @@ a[href="javascript:;"] { background: -o-linear-gradient(#CCC, #DDD); background: linear-gradient(#CCC, #DDD); } -#qr:not(.dump) output { +#qr:not(.dump) output, .dump > form > label { display: none; } #replies { @@ -2519,6 +2532,7 @@ a[href="javascript:;"] { margin: 5px; padding: 2px; opacity: .5; overflow: hidden; + position: relative; text-shadow: 0 1px 1px #000; -webkit-transition: opacity .25s; -moz-transition: opacity .25s; @@ -2543,6 +2557,16 @@ a[href="javascript:;"] { .remove:hover::after { content: " Remove"; } +.preview > label { + background: rgba(0,0,0,.5); + color: #FFF; + right: 0; bottom: 0; left: 0; + position: absolute; + text-align: center; +} +.preview > label > input { + margin: 0; +} #addReply { color: #333; font-size: 3.5em;