QR character counter. Close #235.

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 @@
   <span> <a class=close title=Close>&times;</a></span>\
 </div>\
 <form>\
-  <div><input id=dump class=field type=button title="Dump list" 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 type=button title="Dump list" value=+ class=field><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><a id=addReply href=javascript:; title="Add a reply">+</a></div></div>\
-  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>\
+  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea><span id=charCount></span></div>\
   <div class=captcha title=Reload><img></div>\
   <div><input title=Verification class=field autocomplete=off size=1></div>\
   <div><input type=file title="Shift+Click to remove the selected file." multiple size=16><input type=submit></div>\
@@ -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 = '<option value=new>New thread</option>';
         _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 {\
+#qr > form > div:first-child > .field:not(#dump) {\
-  min-height: 120px;\
+  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 {\

changelog

@@ -1,4 +1,6 @@
 master
+- Mayhem
+  After 1000+ characters, a character counter will appear in the QR.
 
 2.33.1
 - Mayhem

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 =
   <span> <a class=close title=Close>&times;</a></span>
 </div>
 <form>
-  <div><input id=dump class=field type=button title="Dump list" 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 type=button title="Dump list" value=+ class=field><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><a id=addReply href=javascript:; title="Add a reply">+</a></div></div>
-  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>
+  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea><span id=charCount></span></div>
   <div class=captcha title=Reload><img></div>
   <div><input title=Verification class=field autocomplete=off size=1></div>
   <div><input type=file title="Shift+Click to remove the selected file." multiple size=16><input type=submit></div>
@@ -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 = '<option value=new>New thread</option>'
@@ -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 {
+#qr > form > div:first-child > .field:not(#dump) {
-  min-height: 120px;
+  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 {