otp-designer-jquery - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

package.json

 {
   "name": "otp-designer-jquery",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "OTP-designer-jquery: Create custom OTP code inputs effortlessly! This jQuery plugin enables designers and developers to design visually appealing, secure OTP code input fields. Enjoy seamless integration and built-in validation events, ensuring a delightful user experience. Simplify OTP input implementation with ease.",
@@ -44,2 +44,2 @@ "keywords": [
   }
-}
+}

README.md

@@ -56,3 +56,3 @@ # OTP Designer jQuery Plugin
 ```HTML
-    <script src="https://cdn.jsdelivr.net/gh/HichemTab-tech/OTP-designer-jquery@1.0.1/dist/otpdesigner.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/HichemTab-tech/OTP-designer-jquery@2.0.0/dist/otpdesigner.min.js"></script>
 ```
@@ -59,0 +59,0 @@

src/otpdesigner.js

@@ -24,3 +24,3 @@ export const otpdesigner = function (options = {}, ...args) {
                 for (let i = 0; i < code.length; i++) {
-                    $('#'+optInputId + (i) + "_" + data.idSuffix).val(code[i]);
+                    $('#'+optInputId + (i) + "_" + data.idSuffix).trigger('otp-written', [code[i]]);
                 }
@@ -32,3 +32,3 @@ collectOtpCode(data);
         focus: function (results, data) {
-            $('#'+optInputId + (data.settings.length - 1) + "_" + data.idSuffix).focus();
+            $('#'+optInputId + (data.settings.length - 1) + "_" + data.idSuffix).otpdesigner__toggleFocus__(true);
             return results;
@@ -77,7 +77,8 @@ },
             $(this).data('otpdesigner', data);
+            $(this).attr('data-otpdesigner-id', idSuffix);
 
-            let $inputsParent = $('<div class="inputs d-flex flex-row justify-content-center mt-2">');
-            $inputsParent.attr('id', 'otp_' + idSuffix);
+            let $fakeInputsParent = $('<div class="fake-inputs d-flex flex-row justify-content-center mt-2">');
+            $fakeInputsParent.attr('id', 'otp_' + idSuffix);
             if (settings.inputsParentClasses !== "") {
-                $inputsParent.addClass(settings.inputsParentClasses);
+                $fakeInputsParent.addClass(settings.inputsParentClasses);
             }
@@ -90,5 +91,51 @@
 
+            let $realInput = $('<textarea class="realInput" maxlength="2" tabindex="-1">-</textarea>');
+            $realInput.attr('id', 'otp_real_' + idSuffix);
+            $realInput.attr('name', 'otp_real_' + idSuffix);
+            $realInput.appendTo($fakeInputsParent);
+            $realInput.on('input', function () {
+                let a = getRealInputValue(data);
+                resetRealInput(data);
+                getFocusedFakeInput(data).trigger('otp-written', [a]);
+            });
+            $realInput.on('keydown', function (e) {
+                if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Tab") {
+                    e.preventDefault();
+                    let focusedInp = getFocusedFakeInput(data);
+                    let $inputs = $fakeInputsParent.find('.otp-fake-input');
+                    let index = $inputs.index(focusedInp);
+                    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+                        if (index > 0) $($inputs[index - 1]).otpdesigner__toggleFocus__(true);
+                    }
+                    else {
+                        if (index < $inputs.length - 1) $($inputs[index + 1]).otpdesigner__toggleFocus__(true);
+                    }
+                }
+            });
+            $realInput.on('paste', (event) => {
+                let pastedText = event.originalEvent.clipboardData.getData('text');
+                event.preventDefault();
+                let pastedTextParts = pastedText.split('');
+                pastedTextParts = pastedTextParts.filter(function (value) {
+                    return isAcceptedCharacter(value, settings.onlyNumbers);
+                });
+                pastedText = pastedTextParts.join('');
+                if (pastedText.length >= settings.length) {
+                    pastedText = pastedText.substring(0, settings.length);
+                    $('[data-otpdesigner-id="' + data.idSuffix + '"]').otpdesigner('set', pastedText);
+                }
+            });
+
             for (let i = 0; i < settings.length; i++) {
-                let $input = $('<input class="m-2 text-center form-control rounded otp-input" maxlength="1" />');
-                $input.attr('id', optInputId + (i) + "_" + idSuffix);
+                let $fakeInput = $('<div class="m-2 text-center form-control rounded otp-fake-input"><span class="otp-content"></span></div>');
+                $fakeInput.attr('id', optInputId + (i) + "_" + idSuffix);
+                $fakeInput[0].addEventListener('click', function () {
+                    if (!$(this).otpdesigner__isFocused__()) {
+                        $(this).otpdesigner__toggleFocus__(true);
+                    }
+                    else{
+                        toggleRealInputFocus(this, true);
+                    }
+                });
+
                 let type = "text";
@@ -99,15 +146,15 @@ if (settings.type === 'numeric') {
                 if (settings.inputsClasses !== "") {
-                    $input.addClass(settings.inputsClasses);
+                    $fakeInput.addClass(settings.inputsClasses);
                 }
-                $input.appendTo($inputsParent);
+                $fakeInput.appendTo($fakeInputsParent);
             }
-            $inputsParent.appendTo($parent);
-            let $inputs = $inputsParent.find('.otp-input');
+            $fakeInputsParent.appendTo($parent);
+            let $inputs = $fakeInputsParent.find('.otp-fake-input');
             $inputs.each(function (i) {
-                $inputs[i].addEventListener("keydown", function (event) {
-                    if (event.key === "Backspace") {
-                        $inputs[i].value = "";
-                        if (i !== 0) $inputs[i - 1].focus();
-                    } else if (event.key === "Enter" && i === $inputs.length - 1 && $inputs[i].value !== "") {
-                        event.preventDefault();
+                $($inputs[i]).off('otp-written');
+                $($inputs[i]).on("otp-written", function (event, value) {
+                    if (value === "Backspace") {
+                        $($inputs[i]).otpdesigner__fakeInputVal__("");
+                        if (i !== 0) $($inputs[i - 1]).otpdesigner__toggleFocus__(true);
+                    } else if (value === "Enter" && i === $inputs.length - 1 && $($inputs[i]).otpdesigner__fakeInputVal__() !== "") {
                         collectOtpCode(data, false);
@@ -120,23 +167,17 @@ if (settings.enterClicked != null) {
                     } else {
-                        if (event.keyCode > 95 && event.keyCode < 106) {
-                            $inputs[i].value = event.key;
-                            if (i !== $inputs.length - 1) $inputs[i + 1].focus();
-                            event.preventDefault();
-                        } else if (!settings.onlyNumbers && event.keyCode > 64 && event.keyCode < 91) {
-                            $inputs[i].value = String.fromCharCode(event.keyCode);
-                            if (i !== $inputs.length - 1) $inputs[i + 1].focus();
-                            event.preventDefault();
+                        if (isAcceptedCharacter(value, settings.onlyNumbers)) {
+                            value = value.toLowerCase();
+                            $($inputs[i]).otpdesigner__fakeInputVal__(value);
+                            if (i !== $inputs.length - 1) $($inputs[i + 1]).otpdesigner__toggleFocus__(true);
                         }
-                        else{
-                            event.preventDefault();
-                        }
                     }
-                    collectOtpCode(data);
+                    collectOtpCode(data, (i === $inputs.length - 1));
                 });
-                $inputs[i].addEventListener("focus", function () {
+                $($inputs[i]).off("focused");
+                $($inputs[i]).on("focused", function () {
                     if (!!$($inputs[i]).data('f')) return;
                     for (let j = 0; j < i; j++) {
-                        if ($inputs[j].value === "") {
+                        if ($($inputs[j]).otpdesigner__fakeInputVal__() === "") {
                             $($inputs[j]).data('f', "1");
-                            $($inputs[j]).focus();
+                            $($inputs[j]).otpdesigner__toggleFocus__(true);
                             $($inputs[j]).removeData('f');
@@ -167,6 +208,6 @@ break;
 let collectOtpCode = (data, typingDone = true) => {
-    let $inputs = $('#otp_' + data.idSuffix).find('.otp-input');
+    let $inputs = $('#otp_' + data.idSuffix).find('.otp-fake-input');
     let code = '';
     $inputs.each(function (i, e) {
-        code += $(e).val().trim();
+        code += $(e).otpdesigner__fakeInputVal__().trim();
     });
@@ -184,3 +225,91 @@ $('#otp_hidden_' + data.idSuffix).val(code);
     if (data.settings.enterClicked != null) return;
-    $('.otp-input:focus').blur();
-};
+    $('.otpdesigner__focus__').otpdesigner__toggleFocus__(false);
+};
+
+$(document)[0].addEventListener('click', function(event) {
+    let $target = $(event.target);
+    let focused = $('.otp-fake-input');
+    if(
+        !$target.closest('.otp-fake-input').length &&
+        focused.length !== 0 &&
+        focused.is(":visible")
+    ) {
+        focused.otpdesigner__toggleFocus__(false)
+    }
+});
+
+function onFakeInputFocused(ele) {
+    toggleRealInputFocus(ele, true);
+    $(ele).trigger('focused');
+}
+
+$.fn.otpdesigner__toggleFocus__ = function (toFocus = null) {
+    $(this).each(function () {
+        if (toFocus !== null) {
+            if (toFocus === true) {
+                $('.otpdesigner__focus__').removeClass('otpdesigner__focus__');
+                $(this).addClass('otpdesigner__focus__');
+                onFakeInputFocused(this);
+            }
+            else {
+                $(this).removeClass('otpdesigner__focus__');
+            }
+            return;
+        }
+        if ($(this).hasClass('otpdesigner__focus__')) {
+            $(this).removeClass('otpdesigner__focus__');
+        }
+        else {
+            $('.otpdesigner__focus__').removeClass('otpdesigner__focus__');
+            $(this).addClass('otpdesigner__focus__');
+            onFakeInputFocused(this);
+        }
+    });
+}
+
+function getFocusedFakeInput(data) {
+    return $('#otp_' + data.idSuffix).find('.otp-fake-input.otpdesigner__focus__');
+}
+
+$.fn.otpdesigner__isFocused__ = function () {
+    return $(this).hasClass('otpdesigner__focus__');
+}
+
+$.fn.otpdesigner__fakeInputVal__ = function (val = "RETURN_REQUESTED") {
+    if (val === "RETURN_REQUESTED") {
+        return $(this).find('.otp-content').html();
+    }
+    $(this).find('.otp-content').html(val);
+}
+
+function toggleRealInputFocus(fakeInput, toFocus) {
+    // noinspection JSCheckFunctionSignatures
+    let $realInput = $(fakeInput).parents('.fake-inputs').find('.realInput');
+    if (toFocus) {
+        $realInput.focus();
+        $realInput[0].setSelectionRange($realInput.val().length, $realInput.val().length);
+    }
+    else {
+        $realInput.blur();
+    }
+}
+
+function resetRealInput(data) {
+    let $realInput = $('#otp_' + data.idSuffix).find('.realInput');
+    $realInput.val("-");
+    $realInput[0].setSelectionRange($realInput.val().length, $realInput.val().length);
+}
+
+function getRealInputValue(data) {
+    let $realInput = $('#otp_' + data.idSuffix).find('.realInput');
+    if ($realInput.val() === "") return "Backspace";
+    else if ($realInput.val() === "-\n") return "Enter";
+    return $realInput.val().substring(1);
+}
+
+const isAcceptedCharacter = (char, onlyNumbers) => {
+    return (otpdesigner__alphabets__.includes(char) && !onlyNumbers) || otpdesigner__numbers__.includes(char);
+};
+
+const otpdesigner__alphabets__ = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split("");
+const otpdesigner__numbers__ = '0123456789'.split("");

webpack.config.js

@@ -10,3 +10,3 @@ // noinspection WebpackConfigHighlighting
     banner: `/*!
- * OTP-designer-jquery v1.0.0
+ * OTP-designer-jquery v2.0.0
  * (c) HichemTech
@@ -13,0 +13,0 @@ * Released under the MIT License.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29203

increased by23.97%

Lines of code

374

increased by54.55%

No dependency changes