Browse Source

first commit

tags/0.1.0
Florian Bouillon 3 months ago
commit
b33b45ba80
7 changed files with 504 additions and 0 deletions
  1. +42
    -0
      FMInput.ts
  2. +272
    -0
      FormManager.ts
  3. +23
    -0
      Interfaces.ts
  4. +46
    -0
      modules/FMDatalistInput.ts
  5. +28
    -0
      modules/FMDateInput.ts
  6. +73
    -0
      modules/FMRepeatInput.ts
  7. +20
    -0
      package.json

+ 42
- 0
FMInput.ts View File

@@ -0,0 +1,42 @@
import FormManager from "./FormManager"

export default class FMInput {

element: HTMLInputElement
form: FormManager

constructor(element: HTMLElement, form: FormManager) {
this.element = element as HTMLInputElement
this.form = form
if (this.element.hasAttribute("data-default")) {
this.setValue(this.getDefault(this.element.dataset.default))
}
}

setValue(value: any) {
this.element.value = value
this.element.setAttribute("value", value)
}
getValue(): any {
return this.element.value
}

getDefault(args: string): any {
return args
}

getName(): string {
return this.element.getAttribute("name")
}

verify(): boolean {
let val: string = this.getValue()
if(val == "" && this.element.hasAttribute("required")) {
return false
}
if(this.element.dataset.regex !== undefined) {
return new RegExp(this.element.dataset.regex, 'g').test(val as string)
}
return true
}
}

+ 272
- 0
FormManager.ts View File

@@ -0,0 +1,272 @@
import { InputArrayInterface, FMAssignInterface } from './Interfaces';
import FMInput from "./FMInput"

/**
*
* `datalist` upgrade:
* the value submitted won't be the `value` attribute but the `data-value` attribute
* a `data-strict` attribute if set will return undefined if input value is not from data-value else it will return the input value if not foudn in options
* ex:
* ```html
* <input name="listing" list="list" data-strict/>
* <datalist id="list">
* <option data-value="value submitted" value="shown value">value subtitle</option>
* <option data-value="value submitted" value="shown valuee">value subtitle</option>
* <option data-value="value submitted" value="shown valueq">value subtitle</option>
* <option data-value="value submitted" value="shown valuea">value subtitle</option>
* </datalist>
* ```
* **ATTENTION if multiple `option` has the same `value` attribute the `data-value` will be the one of the first one**
*
*
* a `data-ignore` attribute:
* the input with the data-ignore won't send datas to server _still need the `name` attribute_
* awesome for usage with `data-autoset`
*
* a `data-regex` attribute:
* when the element is getting verified it will be passed through the regex
* ex:
* ```html
* <!-- value is set by the user -->
* <input type="text" value="00" data-regex="\d" />
* <!-- test passed form will submit -->
* <input type="text" value="O0" data-regex="\d" />
* <!-- error regex not corresponding form won't submit -->
* ```
* _please note that you still have to verify that server-side_
*
*
* a `data-default` attribute:
* if the value is not something controlable by html it will be set by here
* depending on the input type different defaults are possibles
* ex: `date` `datetime` `time` if it's set it will be the current time
* ```html
* <input type="date" name="date" data-default />
* <!-- will result if today was the 2019-08-26 in -->
* <input type="date" name="date" data-default value="2019-08-26"/>
* ```
*
*
* a `data-autoset` attribute:
* this attribute will change it's value regarding other inputs
* DON'T name any input `x` as it will break the repeat element
* (you SHOULD use `readonly` or `disabled` attribute with it)
* ex:
* ```html
* <input name="input"/>
* <input name="test" readonly data-autoset="testing-autoset-{input}"/>
* ```
* the test input should always contain `testing-autoset-(the value of input)
*
*
* a `repeat` type:
* container: `.form-manager-repeat`
* template (in container): `.form-manager-template`
* add button (in container): `.form-manager-add-button`
* delete button (in template): `.form-manager-delete-button`
*
* input MUST have data-name and not name attributes
* if the script detect `[x]` it will be replaced by `[${index}]`
* on item deletion all items are re-indexed
* if `data-default` or `data-autoset` contains `{x}` it will be replaced by `${index}`
*
* check if input has attribute `form` and that the value is the current form id
* if so add it to current form
* ```html
* <div class="fm-repeat" name="testName">
* <div class="fmr-template">
* <input data-input type="text"/>
* <!-- if there is only one input the name will be `testName[x]` -->
* <!-- if there is only multiple inputs the name will be `testName[x][index]` -->
* <div class="fmr-del">
* <button></button>
* </div>
* </div>
* <!-- future content position -->
* <div class="">
* <input data-input type="text"/>
* <div class="fmr-del">
* <button></button>
* </div>
* </div>
* <!-- future content position -->
* <div class="fmr-add">
* <button></button>
* </div>
* </div>
* ```
*/





/**
* Manager for Forms
*
* @export
* @class FormManager
*/
export default class FormManager {

private inputs: InputArrayInterface = {}

private FMInputs: FMAssignInterface[] = []

private _form: HTMLFormElement
public set form(v : HTMLFormElement) {this._form = v}
public get form(): HTMLFormElement {return this._form}

/**
* Creates an instance of FormManager.
* @param {HTMLFormElement} form the form HTMLElement
* @memberof FormManager
*/
constructor(form: HTMLFormElement) {
this.form = form

//Prevent default submit action
form.onsubmit = (e) => {
e.preventDefault()
}

//assign default form field
this.assign({
input: FMInput
})

//Setup for basic items
this.setupInputs()
}

public assign(inter: FMAssignInterface) {
this.FMInputs.unshift(inter)
}

public setupInputs() {
this.form.querySelectorAll("[name]:not([data-name])").forEach((element: HTMLElement) => {
let el = this.getInit(element)
this.inputs[el.getName()] = el
});
}

public getInit(element: HTMLElement): FMInput {
inputsLoop: for (const input of this.FMInputs) {
if (input.classes != undefined) {
let tmpList: string[]
if (typeof input.classes == "object") tmpList = input.classes
if (typeof input.classes === "string") tmpList = [input.classes]
for (const classe of tmpList) {
if(!element.classList.contains(classe)) continue inputsLoop
}
}
if (input.attributes != undefined) {
let tmpList: string[]
if (typeof input.attributes == "object") tmpList = input.attributes
if (typeof input.attributes === "string") tmpList = [input.attributes]
for (const classe of tmpList) {
if(!element.hasAttribute(classe)) continue inputsLoop
}
}
if (input.type !== undefined) {
if(element.getAttribute("type") !== input.type) continue
}
if (input.tagName !== undefined) {
if (element.nodeName.toLowerCase() !== input.tagName.toLowerCase()) continue
}
return new (input.input)(element, this)
}
}

/**
* verify all the values
*
* @returns {boolean} if the requirements are correct or not
* @memberof FormManager
*/
public verify(): boolean {
for (const name in this.inputs) {
if (this.inputs.hasOwnProperty(name)) {
const input = this.inputs[name];
if(!input.verify()) return false
}
}
return true
}

/**
* submit the form to the `url`
*
* @param {string} url the url
* @param {(this: XMLHttpRequest, ev: ProgressEvent) => any} [callback] callback of event `loadend`
* @param {boolean} [verify=true] is the content verified beforehand (won't be sent if not correct)
* @returns {boolean} return if the content was sent or not
* @memberof FormManager
*/
public submit(url: string, callback?: (this: XMLHttpRequest, ev: ProgressEvent) => any, verify: boolean = true): boolean {
if (verify && !this.verify()) return false
let ajax = new XMLHttpRequest
ajax.open("POST", url, true)
ajax.setRequestHeader("Content-Type", "application/json")
if (callback != undefined) ajax.addEventListener("loadend", callback)
ajax.send(JSON.stringify(this.getJSON()))
return true
}

/**
* return the JSON `{key: value}` sequence
*
* @memberof FormManager
*/
public getJSON(): any {
const jsonObject:any = {}
for (const name in this.inputs) {
if (this.inputs.hasOwnProperty(name)) {
const input = this.inputs[name];
jsonObject[name] = input.getValue()
}
}
return jsonObject
}

public fillFromJSON(json: any) {
for (const key in json) {
if (json.hasOwnProperty(key)) {
const element = json[key];
if(this.inputs[key] !== undefined) this.inputs[key].setValue(element)
else console.warn(`${key} is not a valid input name`)
}
}
}

/**
* fill form from uri
* future parameter will be the `type` of source datas (`JSON`, `XML`)
*
* @param {string} uri the URI
* @memberof FormManager
*/
public fillFromURI(uri: string) {
let ajax = new XMLHttpRequest
ajax.open("GET", uri, true)
ajax.addEventListener("loadend", (e) => {
if (ajax.readyState === 4 && ajax.status === 200) {
let json = JSON.parse(ajax.responseText)
this.fillFromJSON(json)
}
})
ajax.send()
}

/**
* Clear the fields in the form
*
* @memberof FormManager
*/
public clear() {
this.form.querySelectorAll("[name]").forEach((el: HTMLInputElement) => {
el.value = ""
el.removeAttribute("value")
})
}
}

+ 23
- 0
Interfaces.ts View File

@@ -0,0 +1,23 @@
import FMInput from "./FMInput"

/**
* this interface is used for fetching and setting `name` to `FMInput` link
*
* @interface InputArrayInterface
*/
export interface InputArrayInterface {
[key:string]: FMInput
}

/**
* this interface is used when adding a new `FMInput` class to the FormManager
*
* @interface FMAssignInterface
*/
export interface FMAssignInterface {
input: typeof FMInput
classes?: string[] | string
attributes?: string[] | string
type?: string
tagName?: string
}

+ 46
- 0
modules/FMDatalistInput.ts View File

@@ -0,0 +1,46 @@
import { FMAssignInterface } from './../Interfaces';
import FormManager from "../FormManager"
import FMInput from "../FMInput"

/**
* the upgraded datalist element
* @priority 2
* @class FMDatalistInput
* @extends {FMInput}
*/
export default class FMDatalistInput extends FMInput {

datalist: HTMLDataListElement
isStrict: boolean

constructor(element: HTMLInputElement, form: FormManager) {
super(element, form)
this.isStrict = this.element.hasAttribute("data-strict")
let id = this.element.getAttribute("list")
let tmpDatalist = document.getElementById(id)
this.datalist = tmpDatalist !== undefined ? tmpDatalist as HTMLDataListElement : undefined
}

setValue(value: string) {
if (this.datalist) {
let option: HTMLOptionElement = this.datalist.querySelector(`[value="${value}"]`)
if (option || !this.isStrict) {
this.element.value = value
}
}
}

getValue(): string {
if (this.datalist) {
let option: HTMLOptionElement = this.datalist.querySelector(`[value="${this.element.value}"]`)
if (option) return option.dataset.value
}
return this.isStrict ? undefined : this.element.value
}
}

export const FMDatalistAssignement: FMAssignInterface = {
input: FMDatalistInput,
attributes: "list",
tagName: "input"
}

+ 28
- 0
modules/FMDateInput.ts View File

@@ -0,0 +1,28 @@
import { FMAssignInterface } from './../Interfaces';
import FMInput from "../FMInput"

/**
*
* @class FMDateInput
* @extends {FMInput}
*/
export default class FMDateInput extends FMInput {

setValue(value: Date) {
this.element.valueAsDate = value
}

getValue(): Date {
return this.element.valueAsDate
}

getDefault(args: string): Date {
return new Date
}
}

export const FMDateInputAssignement: FMAssignInterface = {
input: FMDateInput,
type: "date",
tagName: "input"
}

+ 73
- 0
modules/FMRepeatInput.ts View File

@@ -0,0 +1,73 @@
import { FMAssignInterface } from './../Interfaces';
import FormManager from "../FormManager"
import FMInput from "../FMInput"

/**
*
* @class FMRepeatInput
* @extends {FMInput}
*/
export default class FMRepeatInput extends FMInput {

constructor(element: HTMLDivElement, form: FormManager) {
super(element, form)

//fetch Template
let template: HTMLElement = element.querySelector(".fmr-template")
template.style.display = "none"

//fetch add button
let addBtn = element.querySelector(".fmr-add")
addBtn.addEventListener("click", () => {
let node = element.insertBefore(template.cloneNode(true), addBtn) as HTMLElement
node.classList.remove("fmr-template")
node.classList.add("fmr-element")
node.style.display = ""
let del = node.querySelector(".fmr-del")
del.addEventListener("click", () => {
node.remove()
})
})

}

loopInputs(): FMInput[][] {
let inputs: FMInput[][] = []
this.element.querySelectorAll(".fmr-element").forEach((pouet: HTMLElement) => {
let subElement: FMInput[] = []
pouet.querySelectorAll("[data-input]").forEach((localElement: HTMLElement) => {
subElement.push(this.form.getInit(localElement))
});
inputs.push(subElement)
})
return inputs
}

setValue(value: any[][]) {
for (const index in value) {
if (value.hasOwnProperty(index)) {
const element = value[index];
console.log(index,element, value)
}
}
}

getValue(): any[][] {
let values: any[][] = []
let elements = this.loopInputs()
for (const line of elements) {
let lineArray: any[] = []
for (const col of line) {
lineArray.push(col.getValue())
}
values.push(lineArray)
}
return values
}
}

export const FMRepeatInputAssignment: FMAssignInterface = {
input: FMRepeatInput,
classes: "fm-repeat",
tagName: "div"
}

+ 20
- 0
package.json View File

@@ -0,0 +1,20 @@
{
"name": "form-manager",
"version": "1.0.0",
"description": "A powerfull Form Manager",
"repository": {
"type": "git",
"url": "https://git.delta-wings.net/dzeio/FormManager"
},
"bugs": {
"url": "https://git.delta-wings.net/dzeio/FormManager/issues",
"email": "contact@delta-wings.net"
},
"author": {
"name": "Aviortheking",
"email": "florian.bouillon@delta-wings.net",
"url": "https://dze.io"
},
"license": "MIT",
"private": false
}

Loading…
Cancel
Save