Initial Commit
Base files and version 1 of code.
This commit is contained in:
Caleb Braaten
commit
efb9fcbb61
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
51
README.md
Normal file
51
README.md
Normal file
@ -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
|
||||
|
||||
|
||||
|
||||
**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
|
||||
<form is="spa-form" data-callback="myCallbackFunction" action="/endpoint" >
|
||||
```
|
||||
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
|
||||
<script src="./spa-form.js"></script>
|
||||
```
|
||||
|
||||
### 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/)
|
||||
129
demo.html
Normal file
129
demo.html
Normal file
@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Feedback | spa-form Demo</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Open Sans', arial, sans-serif!important;
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0096dc+0,2989d8+13,a641a1+100 */
|
||||
background: #0096dc;
|
||||
}
|
||||
form {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 70px;
|
||||
border-radius: 25px;
|
||||
background-color: white;
|
||||
padding: 65px;
|
||||
}
|
||||
input[type=submit], button{
|
||||
font-family: 'Open Sans', arial, sans-serif!important;
|
||||
background-image: none;
|
||||
background-color: #0096dc;
|
||||
background-size: 100% 200%;
|
||||
text-shadow: none;
|
||||
border: 0;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
color: #ffffff!important;
|
||||
cursor: pointer;
|
||||
padding: 8px 15px 8px;
|
||||
-webkit-transition: background .2s ease-out;
|
||||
-moz-transition: background .2s ease-out;
|
||||
-ie-transition: background .2s ease-out;
|
||||
-o-transition: background .2s ease-out;
|
||||
transition: background .2s ease-out;
|
||||
width: 50%;
|
||||
font-size: 1em;
|
||||
}
|
||||
input[type=submit]:hover, button:hover {
|
||||
background-color: #a641a1;
|
||||
}
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
line-height: 30px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label text {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
.modal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
top: 150px;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
text-align: center;
|
||||
max-width: 300px;
|
||||
border-radius: 25px;
|
||||
background-color: rgb(220, 233, 253);
|
||||
padding: 50px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
visibility: hidden;
|
||||
transition: visibility 0s lineaer 0.1s, opacity 0.3s ease;
|
||||
}
|
||||
.modal.open {
|
||||
background-color: aliceblue;
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.modal button{
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form is='spa-form' data-callback="myCallbackFunction" id='myForm' retainOnSubmit
|
||||
action="https://api.cbraaten.dev/returnQueryAsJSON" >
|
||||
|
||||
<label for="userName"><b>Name: </b></label>
|
||||
<input type="text" placeholder="Name" name="userName" autocomplete="yes" required>
|
||||
|
||||
<label for="email"><b>Email: </b></label>
|
||||
<input type="email" placeholder="Enter Email" name="email" autocomplete="yes" required>
|
||||
|
||||
<label for="message"><b>Feedback</b></label>
|
||||
<textarea form="myForm" placeholder="Your Feedback..." name="message" required></textarea>
|
||||
|
||||
<input type="submit">
|
||||
</form>
|
||||
<div id="modal" class="modal"></div>
|
||||
</body>
|
||||
|
||||
<script src="./spa-form.js"></script>
|
||||
|
||||
<script>
|
||||
function myCallbackFunction(formData){
|
||||
const modal = document.getElementById("modal");
|
||||
modal.innerHTML = `
|
||||
<p>Thank you <b>${formData.userName}</b> for submitting the following feedback: </p>
|
||||
<p><em>${formData.message}</em></p>
|
||||
<p>We will followup with you at the email address <b>${formData.email}</b></p>
|
||||
<button onclick="hideModal()">Exit</button>
|
||||
`;
|
||||
|
||||
modal.className += " open";
|
||||
}
|
||||
|
||||
function hideModal(){
|
||||
const modal = document.getElementById("modal");
|
||||
modal.className = "modal";
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
BIN
example.gif
Normal file
BIN
example.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
27
package.json
Normal file
27
package.json
Normal file
@ -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"
|
||||
}
|
||||
28
spa-form.js
Normal file
28
spa-form.js
Normal file
@ -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'});
|
||||
Loading…
Reference in New Issue
Block a user