From 0ab123cf6eefafa7a29cca057be547645a394e41 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Thu, 21 Jun 2012 21:34:49 +0200 Subject: [PATCH] QR character counter. Close #235. --- 4chan_x.user.js | 46 ++++++++++++++++++++++++++++++++++++---------- changelog | 2 ++ script.coffee | 46 ++++++++++++++++++++++++++++++++++++---------- 3 files changed, 74 insertions(+), 20 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 6cd5dbe51..c48abe147 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -1605,6 +1605,14 @@ ta.setSelectionRange(range, range); return $.event(ta, 'input', 'Event'); }, + characterCount: function() { + var count, counter; + counter = QR.charaCounter; + count = this.textLength; + counter.textContent = count; + counter.hidden = count < 1000; + return (count > 1500 ? $.addClass : $.rmClass)(counter, 'warning'); + }, drag: function(e) { var i; i = e.type === 'dragstart' ? 'off' : 'on'; @@ -1807,6 +1815,7 @@ data = _ref1[_i]; $("[name=" + data + "]", QR.el).value = this[data]; } + QR.characterCount.call($('textarea', QR.el)); return $('#spoiler', QR.el).checked = this.spoiler; }; @@ -1955,9 +1964,9 @@ ×\ \
\ -
\ +
\ \ -
\ +
\
\
\
\ @@ -1990,6 +1999,8 @@ QR.spoiler = !!$('input[name=spoiler]'); spoiler = $('#spoilerLabel', QR.el); spoiler.hidden = !QR.spoiler; + QR.charaCounter = $('#charCount', QR.el); + ta = $('textarea', QR.el); if (!g.REPLY) { threads = ''; _ref = $$('.thread'); @@ -2015,9 +2026,10 @@ return new QR.reply().select(); }); $.on($('form', QR.el), 'submit', QR.submit); - $.on($('textarea', QR.el), 'input', function() { + $.on(ta, 'input', function() { return QR.selected.el.lastChild.textContent = this.value; }); + $.on(ta, 'input', QR.characterCount); $.on(fileInput, 'change', QR.fileInput); $.on(fileInput, 'click', function(e) { if (e.shiftKey) { @@ -4745,7 +4757,7 @@ h1 {\ #qr > .move > span {\ float: right;\ }\ -#autohide, .close, #qr select, #dump, .remove, .captcha, #qr .warning {\ +#autohide, .close, #qr select, #dump, .remove, .captcha, #qr div.warning {\ cursor: pointer;\ }\ #qr select,\ @@ -4885,9 +4897,6 @@ h1 {\ -o-transition: color .25s, border .25s;\ transition: color .25s, border .25s;\ }\ -#qr .field:not(#dump) {\ - width: 30%;\ -}\ .field:-moz-placeholder,\ .field:hover:-moz-placeholder {\ color: #AAA;\ @@ -4897,11 +4906,28 @@ h1 {\ color: #000;\ outline: none;\ }\ -textarea.field {\ - min-height: 120px;\ +#qr > form > div:first-child > .field:not(#dump) {\ + width: 30%;\ }\ -#qr .field:only-child {\ +#qr textarea.field {\ display: -webkit-box;\ + min-height: 120px;\ + min-width: 100%;\ +}\ +#qr > form > div:nth-child(3) {\ + position: relative;\ +}\ +#charCount {\ + color: #000;\ + background: hsla(0, 0%, 100%, .5);\ + position: absolute;\ + top: 100%;\ + right: 0;\ +}\ +#charCount.warning {\ + color: red;\ +}\ +.captcha + div > .field {\ min-width: 100%;\ }\ .captcha {\ diff --git a/changelog b/changelog index 04f4fed15..64c3f88c2 100644 --- a/changelog +++ b/changelog @@ -1,4 +1,6 @@ master +- Mayhem + After 1000+ characters, a character counter will appear in the QR. 2.33.1 - Mayhem diff --git a/script.coffee b/script.coffee index e0c7b01cb..9150f8018 100644 --- a/script.coffee +++ b/script.coffee @@ -1196,6 +1196,13 @@ QR = # Fire the 'input' event $.event ta, 'input', 'Event' + characterCount: -> + counter = QR.charaCounter + count = @textLength + counter.textContent = count + counter.hidden = count < 1000 + (if count > 1500 then $.addClass else $.rmClass) counter, 'warning' + drag: (e) -> # Let it drag anything from the page. i = if e.type is 'dragstart' then 'off' else 'on' @@ -1360,6 +1367,7 @@ QR = # Load this reply's values. for data in ['name', 'email', 'sub', 'com'] $("[name=#{data}]", QR.el).value = @[data] + QR.characterCount.call $ 'textarea', QR.el $('#spoiler', QR.el).checked = @spoiler dragStart: -> $.addClass @, 'drag' @@ -1461,9 +1469,9 @@ QR = × -
+
-
+
@@ -1496,6 +1504,9 @@ QR = spoiler = $ '#spoilerLabel', QR.el spoiler.hidden = !QR.spoiler + QR.charaCounter = $ '#charCount', QR.el + ta = $ 'textarea', QR.el + unless g.REPLY # Make a list with visible threads and an option to create a new one. threads = '' @@ -1511,7 +1522,8 @@ QR = $.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), 'input', -> QR.selected.el.lastChild.textContent = @value + $.on ta, 'input', -> QR.selected.el.lastChild.textContent = @value + $.on ta, 'input', QR.characterCount $.on fileInput, 'change', QR.fileInput $.on fileInput, 'click', (e) -> if e.shiftKey then QR.selected.rmFile() or e.preventDefault() $.on spoiler.firstChild, 'change', -> $('input', QR.selected.el).click() @@ -3695,7 +3707,7 @@ h1 { #qr > .move > span { float: right; } -#autohide, .close, #qr select, #dump, .remove, .captcha, #qr .warning { +#autohide, .close, #qr select, #dump, .remove, .captcha, #qr div.warning { cursor: pointer; } #qr select, @@ -3835,9 +3847,6 @@ h1 { -o-transition: color .25s, border .25s; transition: color .25s, border .25s; } -#qr .field:not(#dump) { - width: 30%; -} .field:-moz-placeholder, .field:hover:-moz-placeholder { color: #AAA; @@ -3847,11 +3856,28 @@ h1 { color: #000; outline: none; } -textarea.field { - min-height: 120px; +#qr > form > div:first-child > .field:not(#dump) { + width: 30%; } -#qr .field:only-child { +#qr textarea.field { display: -webkit-box; + min-height: 120px; + min-width: 100%; +} +#qr > form > div:nth-child(3) { + position: relative; +} +#charCount { + color: #000; + background: hsla(0, 0%, 100%, .5); + position: absolute; + top: 100%; + right: 0; +} +#charCount.warning { + color: red; +} +.captcha + div > .field { min-width: 100%; } .captcha {