+ mask valid/invalid css feedback

+ ssn mask

Author: leowebguy

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## 1.0.1 - 2022.11.28
+```
++ mask valid/invalid css feedback
++ ssn mask
+```
+
 ## 1.0.0 - 2022.11.28
-### Initial release
+Initial release
 

composer.json

@@ -6,9 +6,11 @@
     "masked",
     "fields",
     "mask",
-    "validation"
+    "formatting",
+    "validation",
+    "cp"
   ],
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "craft-plugin",
   "license": "MIT",
   "authors": [

src/Plugin.php

@@ -19,9 +19,6 @@
 use yii\base\Event;
 use craft\services\Fields;
 
-/*
- * Class MixManifest
- */
 class Plugin extends BasePlugin
 {
     // Properties

src/assets/Assets.php

@@ -20,6 +20,10 @@ public function init()
         $this->sourcePath = '@leowebguy/maskedfields/assets';
         $this->depends = [CpAsset::class];
 
+        $this->css = [
+            'css/cp.css'
+        ];
+
         $this->js = [
             'js/jquery.mask.min.js',
             'js/cp.js'

src/assets/css/cp.css

@@ -0,0 +1,34 @@
+.valid {
+    box-shadow: 0 0 1px 1px rgb(66, 185, 66, .65);
+    position: relative;
+}
+
+.glow-green {
+    -webkit-animation: glow-green 500ms linear;
+    -moz-animation: glow-green 500ms linear;
+    animation: glow-green 500ms linear;
+}
+
+@keyframes glow-green {
+    0% {
+        box-shadow: 0 0 2px 2px rgb(66, 185, 66, 1)
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgb(255, 255, 255, 0)
+    }
+}
+
+.glow-red {
+    -webkit-animation: glow-red 500ms linear;
+    -moz-animation: glow-red 500ms linear;
+    animation: glow-red 500ms linear;
+}
+
+@keyframes glow-red {
+    0% {
+        box-shadow: 0 0 2px 2px rgba(192, 13, 13, 1)
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgb(255, 255, 255, 0)
+    }
+}

src/assets/js/cp.js

@@ -1,15 +1,47 @@
 (($) => {
-    $('.date-mask').mask('00/00/0000', {placeholder: 'mm/dd/yyyy'})
-    $('.time-mask').mask('00:00:00', {placeholder: 'hh:mm:ss'})
-    $('.datetime-mask').mask('00/00/0000 00:00:00', {placeholder: 'mm/dd/yyyy hh:mm:ss'})
-    $('.cep-mask').mask('00000-000', {placeholder: '_____-___'})
-    $('.zip-mask').mask('00000', {placeholder: '_____'})
-    $('.phonebr-mask').mask('(00) 0000-0000', {placeholder: '(__) ____-____'})
-    $('.phoneus-mask').mask('(000) 000-0000', {placeholder: '(___) ___-____'})
-    $('.ip-mask').mask('099.099.099.099', {placeholder: '___.___.___.___'})
-    $('.cnpj-mask').mask('00.000.000/0000-00', {placeholder: '__.___.___/____-__', reverse: true})
-    $('.cpf-mask').mask('000.000.000-00', {placeholder: '___.___.___-__', reverse: true})
-    $('.itin-mask').mask('000-00-0000', {placeholder: '___-__-____', reverse: true})
-    $('.money-mask').mask('#.##0,00', {reverse: true})
-    $('.percent-mask').mask('##0,00%', {reverse: true})
+    const options = {
+        onComplete: (v, e, f) => {
+            // console.log('onComplete');
+            f.addClass('valid')
+        },
+        onKeyPress: (v, e, f, options) => {
+            if (!v) { return }
+            //console.log('A key was pressed!:', v, ' event: ', e, 'currentField: ', currentField, ' options: ', options)
+            //console.log('onKeyPress')
+            f.removeClass('valid')
+            f.addClass('glow-green')
+            setTimeout(() => {
+                f.removeClass('glow-green')
+            }, 500)
+        },
+        // onChange: (v, e, f) => {
+        //     console.log('onChange');
+        // },
+        onInvalid: (v, e, f, invalid, options) => {
+            if (!v) { return }
+            //var error = invalid[0]
+            //console.log('Digit: ', error.v, ' is invalid for the position: ', error.p, '. We expect something like: ', error.e)
+            //console.log('onInvalid')
+            f.removeClass('valid')
+            f.addClass('glow-red')
+            setTimeout(() => {
+                f.removeClass('glow-red')
+            }, 500)
+        }
+    }
+
+    $('.date-mask').mask('00/00/0000', {...options, placeholder: 'mm/dd/yyyy'}).keyup()
+    $('.time-mask').mask('00:00:00', {...options, placeholder: 'hh:mm:ss'}).keyup()
+    $('.datetime-mask').mask('00/00/0000 00:00:00', {...options, placeholder: 'mm/dd/yyyy hh:mm:ss'}).keyup()
+    $('.cep-mask').mask('00000-000', {...options, placeholder: '_____-___'}).keyup()
+    $('.zip-mask').mask('00000', {...options, placeholder: '_____'}).keyup()
+    $('.phonebr-mask').mask('(00) 0000-0000', {...options, placeholder: '(__) ____-____'}).keyup()
+    $('.phoneus-mask').mask('(000) 000-0000', {...options, placeholder: '(___) ___-____'}).keyup()
+    $('.ip-mask').mask('099.099.099.099', {...options, placeholder: '___.___.___.___'}).keyup()
+    $('.cnpj-mask').mask('00.000.000/0000-00', {...options, placeholder: '__.___.___/____-__', reverse: true}).keyup()
+    $('.cpf-mask').mask('000.000.000-00', {...options, placeholder: '___.___.___-__', reverse: true}).keyup()
+    $('.itin-mask').mask('000-00-0000', {...options, placeholder: '___-__-____', reverse: true}).keyup()
+    $('.ssn-mask').mask('000-00-0000', {...options, placeholder: '___-__-____', reverse: true}).keyup()
+    $('.money-mask').mask('#.##0,00', {...options, reverse: true}).keyup()
+    $('.percent-mask').mask('##0,00%', {...options, reverse: true}).keyup()
 })(jQuery)

src/fields/MaskedField.php

@@ -15,6 +15,9 @@
 use craft\base\PreviewableFieldInterface;
 use craft\fields\PlainText;
 
+/**
+ * @property-read null|string $settingsHtml
+ */
 class MaskedField extends PlainText implements PreviewableFieldInterface
 {
     // Public Methods
@@ -47,9 +50,10 @@ public function __construct(array $config = [])
             'zip' => 'Zip Code',
             'cep' => 'Cep',
             'ip' => 'IP',
+            'itin' => 'ITIN',
+            'ssn' => 'SSN',
             'cnpj' => 'CNPJ',
             'cpf' => 'CPF',
-            'itin' => 'ITIN',
         ];
 
         parent::__construct($config);
@@ -90,7 +94,7 @@ public function getSettingsHtml(): ?string
     /**
      * @inheritdoc
      */
-    public function getInputHtml(mixed $value, ElementInterface $element = null): string
+    public function getInputHtml(mixed $value, ?ElementInterface $element = null): string
     {
         $type = $this->type;