Fixing Message box character limit counter. (#52)

mchekin · Feb 15, 2020 · fbc6dc0 · fbc6dc0
1 parent c54928b
commit fbc6dc0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -106,14 +106,12 @@ img.profile-picture-nav {
 
 /* Message Textarea Counter */
 .chars-length {
-    /*background-color: whitesmoke;*/
+    display: block;
     font-size: 12px;
-    /*margin: 20px 0 0;*/
     padding: 5px 20px;
-    text-align: center;
-    position: absolute;
-    bottom: 55px;
-    right: 0px;
+    text-align: right;
+    position: relative;
+    width: 100%;
 }
 
 .warn {
@@ -269,4 +267,4 @@ img.profile-picture-nav {
     font-size: .700rem;
     line-height: .3;
     border-radius: .2rem;
-}
+}
diff --git a/public/js/vcountdown.js b/public/js/vcountdown.js
@@ -12,7 +12,7 @@
 }(this, function () {
     "use strict";
 
-    var VCountdown = function (options) {
+    let VCountdown = function (options) {
         if (!this || !(this instanceof VCountdown)) {
             return new VCountdown(options);
         }
@@ -32,33 +32,39 @@
     };
 
     VCountdown.prototype = {
+
         hasClass: function (el, name) {
             return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
         },
+
         addClass: function (el, name) {
             if (!this.hasClass(el, name)) {
                 el.className += (el.className ? ' ' : '') + name;
             }
         },
+
         removeClass: function (el, name) {
             if (this.hasClass(el, name)) {
                 el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
             }
         },
+
         createEls: function (name, props) {
-            var el = document.createElement(name), p;
+            let el = document.createElement(name), p;
             for (p in props) {
                 if (props.hasOwnProperty(p)) {
                     el[p] = props[p];
                 }
             }
             return el;
         },
+
         insertAfter: function (referenceNode, newNode) {
             referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
         },
+
         update: function () {
-            var target = this.target,
+            let target = this.target,
                 currentCount = target.value.length,
                 remaining    = this.maxChars - currentCount;
 
@@ -73,14 +79,16 @@
         setMaxChars: function () {
             this.target.setAttribute('maxlength', this.maxChars);
         },
+
         charsLen: function () {
-            var span = this.createEls('span', {className: 'chars-length'});
-            span.innerHTML = this.maxChars;
+            let element = this.createEls('div', {className: 'chars-length'});
+            element.innerHTML = this.maxChars;
 
-            this.insertAfter(this.target, span);
+            this.insertAfter(this.target, element);
 
             this.update();
         },
+
         countdown: function () {
             this.setMaxChars();
             this.charsLen();
@@ -90,4 +98,4 @@
     };
 
     return VCountdown;
-}));
+}));