avalynx-form 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +4 -2
  2. package/dist/js/avalynx-form.esm.js +23 -4
  3. package/dist/js/avalynx-form.js +23 -4
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -42,7 +42,7 @@ Replace `path/to/avalynx-form.js` with the actual path to the file in your proje
42
42
  AvalynxForm is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
43
43
 
44
44
  ```html
45
- <script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.1/dist/js/avalynx-form.js"></script>
45
+ <script src="https://cdn.jsdelivr.net/npm/avalynx-form@1.0.3/dist/js/avalynx-form.js"></script>
46
46
  ```
47
47
 
48
48
  Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
@@ -108,7 +108,7 @@ Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxFo
108
108
  To use AvalynxForm in your project, include the AvalynxForm JavaScript file in your project and initialize the class with the appropriate selector.
109
109
 
110
110
  ```javascript
111
- new AvalynxForm("#myForm", {
111
+ new AvalynxForm("myForm", {
112
112
  apiParams: {
113
113
  extraData1: 'value1',
114
114
  extraData2: 'value2'
@@ -132,6 +132,8 @@ AvalynxForm allows the following options for customization:
132
132
  - `loader`: (object) An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
133
133
  - `onSuccess`: (function) A callback function to be executed when the form submission is successful (default: `null`).
134
134
  - `onError`: (function) A callback function to be executed when the form submission fails (default: `null`).
135
+ - `onBeforeSubmit`: (function) A callback function to be executed before the form submission (default: `null`).
136
+ - `onAfterSubmit`: (function) A callback function to be executed after the form submission (default: `null`).
135
137
 
136
138
  ## Contributing
137
139
 
package/dist/js/avalynx-form.esm.js CHANGED
@@ -3,12 +3,12 @@
3
3
  *
4
4
  * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 1.0.0
6
+ * @version 1.0.3
7
7
  * @license MIT
8
- * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
8
+ * @author https://github.com/avalynx/avalynx-form/graphs/contributors
9
9
  * @website https://github.com/avalynx/
10
- * @repository https://github.com/avalynx/avalynx-datatable.git
11
- * @bugs https://github.com/avalynx/avalynx-datatable/issues
10
+ * @repository https://github.com/avalynx/avalynx-form.git
11
+ * @bugs https://github.com/avalynx/avalynx-form/issues
12
12
  *
13
13
  * @param {string} id - The ID of the element to attach the form to.
14
14
  * @param {object} options - An object containing the following keys:
@@ -16,6 +16,8 @@
16
16
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
17
17
  * @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default: `null`).
18
18
  * @param {function} options.onError - A callback function to be executed when the form submission fails (default: `null`).
19
+ * @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default: `null`).
20
+ * @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default: `null`).
19
21
  *
20
22
  */
21
23
 
@@ -28,12 +30,17 @@ export class AvalynxForm {
28
30
  console.error("AvalynxForm: Element with id '" + id + "' not found");
29
31
  return;
30
32
  }
33
+ if (options === null || typeof options !== 'object') {
34
+ options = {};
35
+ }
31
36
  this.id = id;
32
37
  this.options = {
33
38
  apiParams: {},
34
39
  loader: null,
35
40
  onSuccess: null,
36
41
  onError: null,
42
+ onBeforeSubmit: null,
43
+ onAfterSubmit: null,
37
44
  ...options
38
45
  };
39
46
  this.init();
@@ -52,6 +59,12 @@ export class AvalynxForm {
52
59
  }
53
60
 
54
61
  async sendAjaxRequest() {
62
+ if (this.options.onBeforeSubmit) {
63
+ const result = this.options.onBeforeSubmit(this.form);
64
+ if (result === false) {
65
+ return;
66
+ }
67
+ }
55
68
  const action = this.form.action;
56
69
  const method = this.form.method.toUpperCase();
57
70
 
@@ -78,6 +91,9 @@ export class AvalynxForm {
78
91
  this.handleResponse(result);
79
92
  } catch (error) {
80
93
  console.error('Error during AJAX request:', error);
94
+ if (this.options.onError) {
95
+ this.options.onError(error);
96
+ }
81
97
  } finally {
82
98
  if (this.options.loader === null) {
83
99
  const overlay = document.getElementById(`${this.id}-overlay`);
@@ -87,6 +103,9 @@ export class AvalynxForm {
87
103
  } else {
88
104
  this.options.loader.load = false;
89
105
  }
106
+ if (this.options.onAfterSubmit) {
107
+ this.options.onAfterSubmit(this.form);
108
+ }
90
109
  }
91
110
  }
92
111
 
package/dist/js/avalynx-form.js CHANGED
@@ -3,12 +3,12 @@
3
3
  *
4
4
  * AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
5
5
  *
6
- * @version 1.0.0
6
+ * @version 1.0.3
7
7
  * @license MIT
8
- * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
8
+ * @author https://github.com/avalynx/avalynx-form/graphs/contributors
9
9
  * @website https://github.com/avalynx/
10
- * @repository https://github.com/avalynx/avalynx-datatable.git
11
- * @bugs https://github.com/avalynx/avalynx-datatable/issues
10
+ * @repository https://github.com/avalynx/avalynx-form.git
11
+ * @bugs https://github.com/avalynx/avalynx-form/issues
12
12
  *
13
13
  * @param {string} id - The ID of the element to attach the form to.
14
14
  * @param {object} options - An object containing the following keys:
@@ -16,6 +16,8 @@
16
16
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
17
17
  * @param {function} options.onSuccess - A callback function to be executed when the form submission is successful (default: `null`).
18
18
  * @param {function} options.onError - A callback function to be executed when the form submission fails (default: `null`).
19
+ * @param {function} options.onBeforeSubmit - A callback function to be executed before the form submission (default: `null`).
20
+ * @param {function} options.onAfterSubmit - A callback function to be executed after the form submission (default: `null`).
19
21
  *
20
22
  */
21
23
 
@@ -26,12 +28,17 @@ class AvalynxForm {
26
28
  console.error("AvalynxForm: Element with id '" + id + "' not found");
27
29
  return;
28
30
  }
31
+ if (options === null || typeof options !== 'object') {
32
+ options = {};
33
+ }
29
34
  this.id = id;
30
35
  this.options = {
31
36
  apiParams: {},
32
37
  loader: null,
33
38
  onSuccess: null,
34
39
  onError: null,
40
+ onBeforeSubmit: null,
41
+ onAfterSubmit: null,
35
42
  ...options
36
43
  };
37
44
  this.init();
@@ -50,6 +57,12 @@ class AvalynxForm {
50
57
  }
51
58
 
52
59
  async sendAjaxRequest() {
60
+ if (this.options.onBeforeSubmit) {
61
+ const result = this.options.onBeforeSubmit(this.form);
62
+ if (result === false) {
63
+ return;
64
+ }
65
+ }
53
66
  const action = this.form.action;
54
67
  const method = this.form.method.toUpperCase();
55
68
 
@@ -76,6 +89,9 @@ class AvalynxForm {
76
89
  this.handleResponse(result);
77
90
  } catch (error) {
78
91
  console.error('Error during AJAX request:', error);
92
+ if (this.options.onError) {
93
+ this.options.onError(error);
94
+ }
79
95
  } finally {
80
96
  if (this.options.loader === null) {
81
97
  const overlay = document.getElementById(`${this.id}-overlay`);
@@ -85,6 +101,9 @@ class AvalynxForm {
85
101
  } else {
86
102
  this.options.loader.load = false;
87
103
  }
104
+ if (this.options.onAfterSubmit) {
105
+ this.options.onAfterSubmit(this.form);
106
+ }
88
107
  }
89
108
  }
90
109
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "avalynx-form",
3
3
  "title": "AvalynxForm",
4
4
  "description": "AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
5
- "version": "1.0.1",
5
+ "version": "1.0.3",
6
6
  "license": "MIT",
7
7
  "main": "dist/js/avalynx-form.js",
8
8
  "module": "dist/js/avalynx-form.esm.js",