@claromentis/design-system
Version:
Claromentis Design System Component Library
231 lines (230 loc) • 6.91 kB
JavaScript
/**
* Submit the closest form in the given element's ancestry.
*
* @see https://github.com/ionic-team/ionic/blob/e5c8c10/core/src/components/button/button.tsx#L110-L131
* @param {HTMLElement} element - The element to submit a form for.
* @param {string} [type] - The type of form submission. `'reset'` or `'submit'`, defaults to `'submit'`.
* @param {string} [name] - The name of the button to use for the submission.
* @param {any} [value] - The value of the button to use for the submission.
* @return {void}
*/
export function submitClosestForm(element, type = 'submit', name, value) {
if (!element.ownerDocument) {
return;
}
// Find the closest form
const form = element.closest('form');
if (!form) {
return;
}
// Create a fake button element
const fakeButton = element.ownerDocument.createElement('button');
if (name != null) {
fakeButton.name = name;
}
if (value != null) {
fakeButton.value = value;
}
fakeButton.type = type;
fakeButton.style.display = 'none';
// Use the fake button element to submit the form
form.appendChild(fakeButton);
fakeButton.click();
fakeButton.remove();
}
/**
* Determine whether an element has a Shadow DOM.
*
* @see https://github.com/ionic-team/ionic/blob/f9483a0/core/src/utils/helpers.ts#L13-L15
* @param {HTMLElement} element - The element to detect Shadow DOM for.
* @return {boolean} - Whether the element has a Shadow DOM.
*/
export function hasShadowDom(element) {
return !!element.shadowRoot && !!element.attachShadow;
}
/**
* Propagate a focus event on a given element.
*
* @param {HTMLElement} element - The element to propagate the focus event on.
* @param {FocusEvent} event - The focus event to propagate.
*/
export function propagateFocusEvent(element, event) {
element.dispatchEvent(cloneFocusEvent(event));
}
/**
* Clone a focus event in a way that's compatible with Internet Explorer.
*
* @param {FocusEvent} event
* @return {FocusEvent}
*/
function cloneFocusEvent(event) {
if (typeof Event === 'function') {
return new FocusEvent(event.type, { relatedTarget: event.target });
}
// // IE
// let target = event.currentTarget as Element;
// let eventClone = target.ownerDocument.createEvent('FocusEvent');
// eventClone.initFocusEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, event.target);
//
// return eventClone;
}
/***
* Polyfill for IE11 missing NodeList.forEach
*/
export function NodeListForEachIe11() {
if ('NodeList' in window && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = function (callback, thisArg) {
thisArg = thisArg || window;
for (var i = 0; i < this.length; i++) {
callback.call(thisArg, this[i], i, this);
}
};
}
}
/**
* Finds the cla-label within cla-item
*
* @param {HTMLElement} componentEl
* @return {componentEl.label}
*/
export function findItemLabel(componentEl) {
const itemEl = componentEl.closest('cla-item');
if (itemEl) {
return itemEl.querySelector('cla-label');
}
return console.error('Error: Please wrap label and corresponding element within a <cla-item>. Refer to readme for details');
}
/**
* Is the cla-picker-group multiselectable or not
*
* @param {HTMLElement} componentEl
*
*
*/
export function pickerGroupMultiselect(componentEl) {
const pickerGroup = componentEl.closest('cla-picker-group');
if (pickerGroup === null) {
console.error('Error: Please use <cla-picker> within a <cla-picker-group>. Refer to readme for details');
return false;
}
return pickerGroup.getAttribute('multiselectable') === "true";
}
/**
* Is the cla-nav inline or block
*
* @param {HTMLElement} componentEl
*/
export function claNavInline(componentEl) {
const claNav = componentEl.closest('cla-nav');
return claNav.getAttribute('inline') === "true";
}
/**
* Is the cla-card-image aspect ratio fixed
*
* @param {HTMLElement} componentEl
*/
export function claImgFixed(componentEl) {
const claImg = componentEl.closest('cla-card-media');
return claImg.getAttribute('preserveaspect') === "true";
}
/***
* check if element is in the viewport
* @param {Element} elem
* @return {boolean} is the element within the viewport?
*/
export function isInViewport(elem) {
var bounding = elem.getBoundingClientRect();
return (bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth));
}
;
/***
* finds the pixel width of text
* @param {String} text
* @return {Integer}
*/
export function textWidth(text) {
const tempSpan = document.createElement('span');
tempSpan.innerHTML = text;
document.body.appendChild(tempSpan);
// Get the width of the span then remove it
const textWidth = tempSpan.offsetWidth;
tempSpan.remove();
return textWidth;
}
;
/***
* determines whether a colour value is light or dark
* @param HSL, HEX or RGB color
* @return {String}
*/
export function lightOrDark(color) {
// Variables for red, green, blue values
let r, g, b, hsp;
// Check the format of the color, HEX or RGB?
if (color.match(/^rgb/)) {
// If HEX --> store the red, green, blue values in separate variables
color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
r = color[1];
g = color[2];
b = color[3];
}
else if (color.match(/^hsl/)) {
let sep = color.indexOf(",") > -1 ? "," : " ";
color = color.substr(4).split(")")[0].split(sep);
let h = color[0], s = color[1].substr(0, color[1].length - 1) / 100, l = color[2].substr(0, color[2].length - 1) / 100, c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs((h / 60) % 2 - 1)), m = l - c / 2;
if (0 <= h && h < 60) {
r = c;
g = x;
b = 0;
}
else if (60 <= h && h < 120) {
r = x;
g = c;
b = 0;
}
else if (120 <= h && h < 180) {
r = 0;
g = c;
b = x;
}
else if (180 <= h && h < 240) {
r = 0;
g = x;
b = c;
}
else if (240 <= h && h < 300) {
r = x;
g = 0;
b = c;
}
else if (300 <= h && h < 360) {
r = c;
g = 0;
b = x;
}
r = Math.round((r + m) * 255);
g = Math.round((g + m) * 255);
b = Math.round((b + m) * 255);
}
else {
// If RGB --> Convert it to HEX: http://gist.github.com/983661
color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
r = color >> 16;
g = color >> 8 & 255;
b = color & 255;
}
// HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
hsp = Math.sqrt(0.299 * (r * r) +
0.587 * (g * g) +
0.114 * (b * b));
// Using the HSP value, determine whether the color is light or dark
if (hsp > 127.5) {
return 'light';
}
else {
return 'dark';
}
}