#15 - enhancement - prevent input from exceeding configured character…

… limit
boldcommerce · Mar 2, 2018 · 84350e9 · 84350e9
1 parent cd58f47
commit 84350e9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/view/frontend/web/css/source/_module.less b/view/frontend/web/css/source/_module.less
@@ -1,6 +1,12 @@
 ._error {
-  .order-comment-form__characters {
-    color: @checkout-field-validation__border-color;
+  .order-comment-input {
+    outline: none;
+    border: 2px solid @checkout-field-validation__border-color;
+    &:focus {
+      outline: none;
+      border: 2px solid @checkout-field-validation__border-color;
+      box-shadow: 0 0 3px @checkout-field-validation__border-color;
+    }
   }
 }
 

diff --git a/view/frontend/web/js/view/checkout/order-comment-block.js b/view/frontend/web/js/view/checkout/order-comment-block.js
@@ -7,17 +7,49 @@ define(
     function ($, Component, ko) {
         'use strict';
 
+        ko.extenders.maxOrderCommentLength = function (target, maxLength) {
+            var timer;
+            var result = ko.computed({
+                read: target,
+                write: function (val) {
+                    if (maxLength > 0) {
+                        clearTimeout(timer);
+                        if (val.length > maxLength) {
+                            var limitedVal = val.substring(0, maxLength);
+                            if (target() === limitedVal) {
+                                target.notifySubscribers();
+                            } else {
+                                target(limitedVal);
+                            }
+                            result.css("_error");
+                            timer = setTimeout(function () { result.css(""); }, 800);
+                        } else {
+                            target(val);
+                            result.css("");
+                        }
+                    } else {
+                        target(val);
+                    }
+                }
+            }).extend({ notify: 'always' });
+            result.css = ko.observable();
+            result(target());
+            return result;
+        };
+
         return Component.extend({
             defaults: {
                 template: 'Bold_OrderComment/checkout/order-comment-block'
             },
             initialize: function() {
                 this._super();
                 var self = this;
-                this.comment = ko.observable("");
+                this.comment = ko.observable("").extend({maxOrderCommentLength: this.getMaxLength()});
+
                 this.remainingCharacters = ko.computed(function(){
                     return self.getMaxLength() - self.comment().length;
                 });
+
             },
             hasMaxLength: function() {
                 return window.checkoutConfig.max_length > 0;

diff --git a/view/frontend/web/template/checkout/form-content.html b/view/frontend/web/template/checkout/form-content.html
@@ -1,11 +1,11 @@
 <form class="form form-discount order-comment-form">
     <div class="payment-option-inner">
-        <div class="field" data-bind="css: { _error : remainingCharacters() < 0 && hasMaxLength()}">
+        <div class="field" data-bind="css: comment.css()">
             <label class="label">
                 <span data-bind="i18n: 'Enter comment'"></span>
             </label>
             <div class="control">
-                <textarea class="input-text order-comment" name="comment-code" rows="4" data-bind="value: comment,valueUpdate: 'afterkeydown',attr:{placeholder: $t('Enter your comment...')} " ></textarea>
+                <textarea class="input-text order-comment order-comment-input" name="comment-code" rows="4" data-bind="value: comment,valueUpdate: 'afterkeydown',attr:{placeholder: $t('Enter your comment...')} " ></textarea>
                 <p data-bind="if: hasMaxLength()">Remaining characters: <span class="order-comment-form__characters" data-bind="text: remainingCharacters"></span></p>
             </div>
         </div>