Pushing V1 of validate
Committing V1 of the validate plugin.
This commit is contained in:
parent
1ebbae9304
commit
cc85d858f3
313
ignite-html-validate.js
Normal file
313
ignite-html-validate.js
Normal file
@ -0,0 +1,313 @@
|
||||
import { IgniteTemplate } from "../ignite-html/ignite-template.js";
|
||||
import { IgniteProperty } from "../ignite-html/ignite-html.js";
|
||||
import { IgniteElement } from "../ignite-html/ignite-element.js";
|
||||
|
||||
/**
|
||||
* Creates and shows a notification element on a target element.
|
||||
* @param {HTMLElement} target Target element to show the notification on.
|
||||
* @param {string} type Type of notification to show (Error|Warning|Success|Info)
|
||||
* @param {string|Function|IgniteProperty} msg The message to show
|
||||
* @param {Number} duration The number of miliseconds to show the notification for.
|
||||
* @returns {HTMLElement} The created notification HTMLElement.
|
||||
*/
|
||||
function notify(target, type, msg, duration) {
|
||||
var color = "";
|
||||
if (type == "error") {
|
||||
color = "#ff7979";
|
||||
} else if (type == "warning") {
|
||||
color = "#ffc107";
|
||||
} else if (type == "info") {
|
||||
color = "#2980b9";
|
||||
} else if (type == "success") {
|
||||
color = "#10c469";
|
||||
}
|
||||
|
||||
if (target._validation && target._validation.isConnected) {
|
||||
target._validation.remove();
|
||||
}
|
||||
|
||||
var originalPosition = window.getComputedStyle(target.parentNode).position;
|
||||
target.parentNode.style.setProperty("position", "relative");
|
||||
|
||||
var notification = document.createElement("div");
|
||||
notification.classList.add("ignite-html-validate");
|
||||
notification.classList.add(type);
|
||||
notification.style.setProperty("left", "50%");
|
||||
notification.style.setProperty("position", "absolute");
|
||||
notification.style.setProperty("transform", "translate(-50%, 0)");
|
||||
notification.style.setProperty("display", "flex");
|
||||
notification.style.setProperty("align-items", "center");
|
||||
notification.style.setProperty("flex-direction", "column");
|
||||
notification.style.setProperty("z-index", 999999);
|
||||
notification.style.setProperty("width", "100%");
|
||||
|
||||
var pointer = document.createElement("div");
|
||||
pointer.classList.add("pointer");
|
||||
pointer.style.setProperty("width", 0);
|
||||
pointer.style.setProperty("height", 0);
|
||||
pointer.style.setProperty("background-color", "transparent");
|
||||
pointer.style.setProperty("border-left", "0.5em solid transparent");
|
||||
pointer.style.setProperty("border-right", "0.5em solid transparent");
|
||||
pointer.style.setProperty("border-bottom", `0.5em solid ${color}`);
|
||||
|
||||
var content = document.createElement("div");
|
||||
content.classList.add("content");
|
||||
content.style.setProperty("background-color", color);
|
||||
content.style.setProperty("padding", "0.5em");
|
||||
content.style.setProperty("border-radius", "0.5em");
|
||||
content.style.setProperty("box-shadow", "0 2px 2px rgba(0,0,0,0.4)");
|
||||
content.style.setProperty("color", "#fff");
|
||||
|
||||
if (msg instanceof Function) {
|
||||
content.innerHTML = msg();
|
||||
} else if (msg instanceof IgniteProperty) {
|
||||
content.innerHTML = msg.value;
|
||||
} else {
|
||||
content.innerHTML = msg.toString();
|
||||
}
|
||||
|
||||
notification.appendChild(pointer);
|
||||
notification.appendChild(content);
|
||||
|
||||
if (target.nextSibling) {
|
||||
target.parentNode.insertBefore(notification, target.nextSibling);
|
||||
} else {
|
||||
target.parentNode.appendChild(notification);
|
||||
}
|
||||
|
||||
target._validation = notification;
|
||||
|
||||
if (duration != -1) {
|
||||
setTimeout(() => {
|
||||
if (notification && notification.isConnected) {
|
||||
notification.remove();
|
||||
target._validation = null;
|
||||
}
|
||||
target.parentNode.style.setProperty("position", originalPosition);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
return notification;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows an error message on a given HTMLElement.
|
||||
* @param {string|Function} msg The error message to show.
|
||||
* @param {Number} duration The number of miliseconds to show the error. Default is 4000. -1 is infinite.
|
||||
* @returns {HTMLElement} The created notification HTMLElement.
|
||||
*/
|
||||
HTMLElement.prototype.error = function (msg, duration = 4000) {
|
||||
return notify(this, "error", msg, duration);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a warning message on a given HTMLElement.
|
||||
* @param {string|Function} msg The warning message to show.
|
||||
* @param {Number} duration The number of miliseconds to show the warning. Default is 4000. -1 is infinite.
|
||||
* @returns {HTMLElement} The created notification HTMLElement.
|
||||
*/
|
||||
HTMLElement.prototype.warning = function (msg, duration = 4000) {
|
||||
return notify(this, "warning", msg, duration);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a success message on a given HTMLElement.
|
||||
* @param {string|Function} msg The success message to show.
|
||||
* @param {Number} duration The number of miliseconds to show the notification. Default is 4000. -1 is infinite.
|
||||
* @returns {HTMLElement} The created notification HTMLElement.
|
||||
*/
|
||||
HTMLElement.prototype.success = function (msg, duration = 4000) {
|
||||
return notify(this, "success", msg, duration);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a info message on a given HTMLElement.
|
||||
* @param {string|Function} msg The info message to show.
|
||||
* @param {Number} duration The number of miliseconds to show the notification. Default is 4000. -1 is infinite.
|
||||
* @returns {HTMLElement} The created notification HTMLElement.
|
||||
*/
|
||||
HTMLElement.prototype.info = function (msg, duration = 4000) {
|
||||
notify(this, "info", msg, duration);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates an input when changed.
|
||||
* @param {Function|IgniteProperty} callback The callback function to invoke in order to validate changes to an input.
|
||||
* @example
|
||||
* .validate((value, error, warning, success, info) => {
|
||||
* if (value == null) {
|
||||
* error("Value cannot be null");
|
||||
* }
|
||||
* })
|
||||
* @returns {IgniteTemplate} This ignite template.
|
||||
*/
|
||||
IgniteTemplate.prototype.validate = function (callback) {
|
||||
//Setup the validators array if it doesn't exist.
|
||||
if (!this._validators) {
|
||||
this._validators = [];
|
||||
|
||||
//Setup an event for change to run the validators.
|
||||
this.on("change", () => {
|
||||
for (var i = 0; i < this._validators.length; i++) {
|
||||
if (!this._validators[i]()) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//Setup a constructor to create a validate function on the created element.
|
||||
this._constructors.push(() => this.element.validate = () => {
|
||||
for (var i = 0; i < this._validators.length; i++) {
|
||||
if (!this._validators[i]()) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
//Register a new validator
|
||||
this._validators.push(() => {
|
||||
//If the element already has a validation element remove it.
|
||||
if (this.element._validation && this.element._validation.isConnected) {
|
||||
this.element._validation.remove();
|
||||
this.element._validation = null;
|
||||
}
|
||||
|
||||
//Get the target from the callback.
|
||||
var target = callback;
|
||||
if (target instanceof IgniteProperty) {
|
||||
target = target.value;
|
||||
}
|
||||
|
||||
//Run the target to see if we passed validation.
|
||||
var error = false;
|
||||
target(
|
||||
this._elementValue,
|
||||
(msg, duration = 4000) => { notify(this.element, "error", msg, duration); error = true; },
|
||||
(msg, duration = 4000) => { notify(this.element, "warning", msg, duration); },
|
||||
(msg, duration = 4000) => { notify(this.element, "success", msg, duration); },
|
||||
(msg, duration = 4000) => { notify(this.element, "info", msg, duration); }
|
||||
);
|
||||
|
||||
return !error;
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validates an input to make sure it contains a valid email address.
|
||||
* @param {string|Function|IgniteProperty} msg The message to display when the email is incorrect. If null a default one will show.
|
||||
* @returns {IgniteTemplate} This ignite template.
|
||||
*/
|
||||
IgniteTemplate.prototype.validateEmail = function (msg) {
|
||||
return this.validate((value, error) => {
|
||||
if (!value || value.trim().length < 5) {
|
||||
return error(msg ? msg : `Email address too short.`);
|
||||
} else if (!value.includes('@')) {
|
||||
return error(msg ? msg : 'Email address missing @ symbol.');
|
||||
} else if (!value.includes('.')) {
|
||||
return error(msg ? msg : 'Email address missing domain.');
|
||||
} else if (value.length > 64) {
|
||||
return error(msg ? msg : 'Email address too long.');
|
||||
} else if (value.includes(' ')) {
|
||||
return error(msg ? msg : 'Email address cannot contain spaces.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates an input to make sure it contains a valid password.
|
||||
* @param {string|Function|IgniteProperty} msg The message to display when the email is incorrect. If null a default one will show.
|
||||
* @returns {IgniteTemplate} This ignite template.
|
||||
*/
|
||||
IgniteTemplate.prototype.validatePassword = function (msg) {
|
||||
return this.validate((value, error) => {
|
||||
if (!value || value.trim().length < 5) {
|
||||
return error(msg ? msg : `Password is too short.`);
|
||||
} else if (value.includes(' ')) {
|
||||
return error(msg ? msg : 'Password cannot contain spaces.');
|
||||
} else if (value.length > 64) {
|
||||
return error(msg ? msg : 'Password too long.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates an input to make sure it contains a min number of characters.
|
||||
* @param {Number} min The min number of characters the input can have.
|
||||
* @param {string|Function|IgniteProperty} msg The message to display when the input length is too short. If null a default one will show.
|
||||
* @returns {IgniteTemplate} This ignite template.
|
||||
*/
|
||||
IgniteTemplate.prototype.validateMin = function (min, msg) {
|
||||
return this.validate((value, error) => {
|
||||
if (!value || value.toString().trim().length < min) {
|
||||
return error(msg ? msg : `Input must contain at least ${min} character(s).`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates an input to make sure it contains a min number of characters.
|
||||
* @param {Number} max The max number of characters the input can have.
|
||||
* @param {string|Function|IgniteProperty} msg The message to display when the input length is too long. If null a default one will show.
|
||||
* @returns {IgniteTemplate} This ignite template.
|
||||
*/
|
||||
IgniteTemplate.prototype.validateMax = function (max, msg) {
|
||||
return this.validate((value, error) => {
|
||||
if (!value || value.toString().trim().length > max) {
|
||||
return error(msg ? msg : `Input must contain less than ${max} character(s).`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates an input to make sure it includes a string.
|
||||
* @param {string} str The string that the input must include.
|
||||
* @param {string|Function|IgniteProperty} msg The message to display when the input doesn't contain the string. If null a default one will show.
|
||||
* @returns {IgniteTemplate} This ignite template.
|
||||
*/
|
||||
IgniteTemplate.prototype.validateIncludes = function (str, msg) {
|
||||
return this.validate((value, error) => {
|
||||
if (!value || !value.toString().includes(str)) {
|
||||
return error(msg ? msg : `Input must contain ${str}.`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates an input to make sure it matches a given value.
|
||||
* @param {string|Function|IgniteProperty} compare The value to compare against the input.
|
||||
* @param {string|Function|IgniteProperty} msg The message to display when the input doesn't match. If null a default one will show.
|
||||
* @returns {IgniteTemplate} This ignite template.
|
||||
*/
|
||||
IgniteTemplate.prototype.validateMatches = function (compare, msg) {
|
||||
return this.validate((value, error) => {
|
||||
if (compare instanceof Function) {
|
||||
if (compare() != value) {
|
||||
return error(msg ? msg : `Input does not match: ${compare()}.`);
|
||||
}
|
||||
} else if (compare instanceof IgniteProperty) {
|
||||
if (compare.value != value) {
|
||||
return error(msg ? msg : `Input does not match: ${compare.value}.`);
|
||||
}
|
||||
} else if (value != compare) {
|
||||
return error(msg ? msg : `Input does not match: ${str}.`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates all the children of an element and returns if they are valid or not.
|
||||
* @returns {Boolean} Whether or not all the children of this element are valid.
|
||||
*/
|
||||
HTMLElement.prototype.validateAll = function () {
|
||||
var elements = this.getElementsByTagName("*");
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
if (elements[i].validate != undefined && !elements[i].validate()) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user