@creative-web-solution/front-library 7.1.41 → 7.1.43

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 7.1.43
+
+* [Validator]: Add max file size validation
+
+## 7.1.42
+
+* [Popin]: Add popin element in callback function param
+
 ## 7.1.41
 
 * [Validator]: Add feature to cancel validation on a field. Do not validate a disabled field.

package/Modules/Popin/Popin.ts

@@ -342,7 +342,7 @@ export default class Popin {
                             data => {
                                 const [ body, response ] = data;
                                 const isHttpError = response.status < 200 || response.status >= 300;
-                                const normResponse = this.#options.normalize( body, response, isHttpError );
+                                const normResponse = this.#options.normalize( body, response, isHttpError, this.#$popin );
 
                                 if ( normResponse.success ) {
                                     this.#setPopin( normResponse.data ).then( () => {
@@ -378,7 +378,7 @@ export default class Popin {
     #_loadLink = ( $link: HTMLAnchorElement ): Promise<void> => {
         return this.#_load(
             $link.href,
-            this.#options.setLinkResponseType( $link.href, $link ),
+            this.#options.setLinkResponseType( $link.href, $link, this.#$popin ),
         );
     }
 
@@ -387,7 +387,7 @@ export default class Popin {
         let validationResult;
 
         if ( this.#options.checkValidity ) {
-            validationResult = this.#options.checkValidity( $form );
+            validationResult = this.#options.checkValidity( $form, this.#$popin );
             if ( validationResult === false ) {
                 return Promise.reject();
             }
@@ -400,7 +400,7 @@ export default class Popin {
                     .then( () => {
                         return this.#_load(
                             $form.action,
-                            this.#options.setFormResponseType( $form ),
+                            this.#options.setFormResponseType( $form, this.#$popin ),
                             {
                                 "body": new FormData( $form ),
                                 "method": $form.method || 'POST'

package/Modules/Validator/MaxFileSize.ts

@@ -0,0 +1,30 @@
+import { addValidator } from './index';
+
+/**
+ * File size validation
+ */
+addValidator( 'maxfilesize', '[data-max-file-size]', ( $input, value, isLiveValidation ) => {
+    if (!($input as HTMLInputElement).files?.length) {
+        return Promise.resolve({
+            $input,
+            value,
+            "isValid": true,
+            "label": "maxfilesize",
+            isLiveValidation
+        });
+    }
+
+    const size = ($input as HTMLInputElement).files![0].size;
+    const maxSize = Number($input.getAttribute('data-max-file-size') ?? "0");
+    console.log({size, maxSize})
+    return Promise.resolve({
+        $input,
+        value,
+        "isValid": ($input as HTMLInputElement).files?.length === 0 ||
+                    size <= 0 ||
+                    maxSize <= 0 ||
+                    size <= maxSize,
+        "label": "maxfilesize",
+        isLiveValidation
+    });
+} );

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.41
+@version: 7.1.43
 
 
 ## Use

package/Types/Popin.d.ts

@@ -83,13 +83,13 @@ declare namespace FLib {
             onClose?:           ( $popin: HTMLElement ) => void;
             onLoad:             ( $popin: HTMLElement ) => Promise<void>;
             /** @defaultValue `() => 'text'` */
-            setLinkResponseType: ( url: string, $link: HTMLAnchorElement ) => ResponseType;
+            setLinkResponseType: ( url: string, $link: HTMLAnchorElement, $popin: HTMLElement ) => ResponseType;
             /** @defaultValue `() => 'text'` */
-            setFormResponseType: ( $form: HTMLElement ) => ResponseType;
+            setFormResponseType: ( $form: HTMLElement, $popin: HTMLElement ) => ResponseType;
             /** @defaultValue `() => true` */
-            checkValidity:       ( $form: HTMLElement ) => boolean | Promise<void>;
+            checkValidity:       ( $form: HTMLElement, $popin: HTMLElement ) => boolean | Promise<void>;
             /** @defaultValue `(body) => { return { success: true, data: body }`  */
-            normalize:           ( body, response, isHttpError: boolean ) => { success: boolean, data };
+            normalize:           ( body, response, isHttpError: boolean, $popin: HTMLElement ) => { success: boolean, data };
             /**
              * If false, ajax http error (404, 500, ...) should be handled in the normalize function
              * @defaultValue true

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.41",
+  "version": "7.1.43",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],