Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@neonjungle/birdseed
Advanced tools
@neonjungle/birdseed - npm Package Compare versions
Comparing version 0.3.0 to 0.3.1
| /** | ||
| * This class takes three elements, the form used for the requests, the target element to replace with the server response and the element to output server errors to. | ||
| * If the target is ommitted it's assumed the form itself is to be replaced. If the error element is ommitted then one is looked for in the form using the data-ajax-error attribute. | ||
| * Some assumptions are made about the data returned from the server, but we control this so it should be predictable. | ||
| */ | ||
| * This class takes three elements, the form used for the requests, the target element to replace with the server response and the element to output server errors to. | ||
| * If the target is ommitted it's assumed the form itself is to be replaced. If the error element is ommitted then one is looked for in the form using the data-ajax-error attribute. | ||
| * Some assumptions are made about the data returned from the server, but we control this so it should be predictable. | ||
| */ | ||
| export class AjaxForm { | ||
@@ -10,3 +10,8 @@ constructor(form, target, errorElement) { | ||
| this.target = target ? target : form; | ||
| this.errorElement = errorElement ? errorElement : form.querySelector('[data-ajax-error]'); | ||
| this.errorElement = errorElement | ||
| ? errorElement | ||
| : form.querySelector("[data-ajax-error]"); | ||
| this.submitButton = this.form.querySelector( | ||
| 'input[type="submit"], button[type="submit"]' | ||
| ); | ||
| this.setupListeners(); | ||
@@ -16,3 +21,3 @@ } | ||
| setupListeners() { | ||
| this.form.addEventListener('submit', (e) => { | ||
| this.form.addEventListener("submit", e => { | ||
| e.preventDefault(); | ||
@@ -24,3 +29,4 @@ this.fetchAndReplace(); | ||
| fetchAndReplace() { | ||
| this.target.classList.add('is-loading'); | ||
| this.beforeFetch(); | ||
| this.toggleSubmitButton(); | ||
| fetch(this.form.action, { | ||
@@ -33,17 +39,36 @@ method: this.form.method || "POST", | ||
| body: new FormData(this.form) | ||
| }).then(response => response.json()) | ||
| .then(responseJson => { | ||
| if(responseJson.success) { | ||
| this.replaceTarget(responseJson.payload); | ||
| } else { | ||
| this.handleError(responseJson.message); | ||
| } | ||
| this.target.classList.remove('is-loading'); | ||
| }).catch(e => { | ||
| this.handleError('Sorry there was an error, an administrator has been notified. Refresh the page and try again.'); | ||
| // We rethrow the errror so it can be picked up by bugsnag | ||
| throw e; | ||
| }); | ||
| }) | ||
| .then(response => response.json()) | ||
| .then(responseJson => { | ||
| if (responseJson.success) { | ||
| this.replaceTarget(responseJson.payload); | ||
| } else { | ||
| this.handleError(responseJson.message); | ||
| } | ||
| this.toggleSubmitButton(); | ||
| this.afterFetch(); | ||
| }) | ||
| .catch(e => { | ||
| this.handleError( | ||
| "Sorry there was an error, an administrator has been notified. Refresh the page and try again." | ||
| ); | ||
| // We rethrow the errror so it can be picked up by bugsnag | ||
| throw e; | ||
| }); | ||
| } | ||
| beforeFetch() { | ||
| this.target.classList.add("is-loading"); | ||
| } | ||
| afterFetch() { | ||
| this.target.classList.remove("is-loading"); | ||
| } | ||
| toggleSubmitButtonState() { | ||
| if (this.submitButton) { | ||
| this.submitButton.disabled = !this.submitButton.disabled; | ||
| } | ||
| } | ||
| replaceTarget(html) { | ||
@@ -54,7 +79,5 @@ this.target.innerHTML = html; | ||
| handleError(message) { | ||
| if(!this.errorElement) return; | ||
| if (!this.errorElement) return; | ||
| this.errorElement.innerText = message; | ||
| } | ||
| } |
| { | ||
| "name": "@neonjungle/birdseed", | ||
| "version": "0.3.0", | ||
| "version": "0.3.1", | ||
| "description": "Collection of handy utility methods for Neon Jungle", | ||
@@ -5,0 +5,0 @@ "main": "", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by2.17%
19234
- Lines of code
- increased by4.02%
569
No dependency changes