commit efb9fcbb61727328682357711427677047e67c7b Author: Caleb Braaten Date: Wed Feb 12 07:42:16 2020 -0800 Initial Commit Base files and version 1 of code. diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..d9ffe6d --- /dev/null +++ b/README.md @@ -0,0 +1,51 @@ +A Utility web component to send form data to a callback function instead of HTTP endpoint + +# spa-form + +spa-form is a utility component that progressively enhances html forms from a Multi-Page App to a Single-Page App + +![Example gif](./example.gif) + +**Left Side:** +The *base behavior* where the HTML form uses its native behavior of sending the data to an endpoint and getting a response. The animation is showing a new page being loaded. + +**Right Side:** +The *enhanced behavior* where the HTML form instead passes the form data to a defined callback function as an object of key value pairs. The animation is showing the form data being passed to a developer defined callback function that activates the modal. + + +## Installation + +``` +npm install spa-form +``` + +## Usage +### Overview +Use as a normal form element and add the attribute `is="spa-form"` +```html +
+``` +Include a script tag that defines the component for the browser. If JS is not available then the form will continue working as normal and not be progressively enhanced into an SPA +```html + +``` + +### API (Attributes) + +| Attribute | Description | +| --------- | :---------- | +| Inherited Attributes | Everything that the form element has: [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) +| `data-callback` | The function name, located in the global scope, that should be called on form submit. It will receive the form fields as a JS Object where the name attributes are the key. | +| `retainOnSubmit` | Add as an attribute to stop the form from resetting to default values when submitted. | + + +## Demo +To try the demo file yourself and explore the API do the following steps. +1. Clone the Repo +2. Open the demo.html file in your browser. No web server needed! + +## Contributing +Feedback and pull requests are welcome! Please open issues so we can discuss any feature ideas or bugs found. + +## License +[MIT](https://choosealicense.com/licenses/mit/) \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..43cfd9b --- /dev/null +++ b/demo.html @@ -0,0 +1,129 @@ + + + + Feedback | spa-form Demo + + + + + + + + + + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/example.gif b/example.gif new file mode 100644 index 0000000..35ea0d8 Binary files /dev/null and b/example.gif differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..1729aaa --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "spa-form", + "version": "1.0.0", + "description": "A Utility web component to send form data to a callback function instead of HTTP endpoint", + "main": "spa-form.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/CalebBraaten/spa-form.git" + }, + "keywords": [ + "WebComponents", + "FunctionalWebComponent", + "VanillaJS", + "NoFramework", + "SPA", + "Components" + ], + "author": "Caleb Braaten", + "license": "MIT", + "bugs": { + "url": "https://github.com/CalebBraaten/spa-form/issues" + }, + "homepage": "https://github.com/CalebBraaten/spa-form#readme" +} diff --git a/spa-form.js b/spa-form.js new file mode 100644 index 0000000..2af5dca --- /dev/null +++ b/spa-form.js @@ -0,0 +1,28 @@ +class spaForm extends HTMLFormElement{ + constructor(){ + super(); + this.onsubmit = this.submit; + this.callback = this.getAttribute("data-callback"); + this.retainOnSubmit = this.getAttribute("retainOnSubmit") != null ? false : true; + } + + // Called on Submit + submit(event) { + event.preventDefault(); + let data = {}; + for(let i = 0; i < this.elements.length; i++){ + data[this.elements[i].getAttribute("name")] = this.elements[i].value; + } + if(this.retainOnSubmit){ + this.clearForm(); + } + // Make call to callback function + window[this.callback](data); + } + + clearForm(){ + this.reset(); + } +} + +customElements.define('spa-form', spaForm, {extends: 'form'}); \ No newline at end of file