morethanwords
4 years ago
66 changed files with 834 additions and 678 deletions
@ -0,0 +1,142 @@ |
|||||||
|
// Thanks to https://stackoverflow.com/a/49349813
|
||||||
|
import { clamp } from "../helpers/number"; |
||||||
|
|
||||||
|
/** |
||||||
|
* Attibute modifier to create middle ellipsis |
||||||
|
* When the attribute value is left blank the ellipsis will be in the middle |
||||||
|
* When positive the attribute value will be used as a percentage |
||||||
|
* When negative the attribute value will be used as character index counted from the end |
||||||
|
* @example |
||||||
|
* <div data-middle-ellipsis>A Javascript solution to middle ellipsis</div> |
||||||
|
* <div data-middle-ellipsis="20">A Javascript solution to middle ellipsis</div> |
||||||
|
* <div data-middle-ellipsis="-3">A Javascript solution to middle ellipsis</div> |
||||||
|
*/ |
||||||
|
const attributeName = 'data-middle-ellipsis'; |
||||||
|
const ellipsis = '…'; |
||||||
|
const map: Map<HTMLElement, { |
||||||
|
text: string, |
||||||
|
textLength: number, |
||||||
|
from: number, |
||||||
|
multiplier: number, |
||||||
|
font: string, |
||||||
|
textWidth: number, |
||||||
|
elementWidth: number |
||||||
|
}> = new Map(); |
||||||
|
|
||||||
|
const testQueue: Set<HTMLElement> = new Set(); |
||||||
|
const fontFamily = 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif'; |
||||||
|
const fontSize = '16px'; |
||||||
|
let timeoutId: number; |
||||||
|
|
||||||
|
const setTestQueue = () => { |
||||||
|
cancelAnimationFrame(timeoutId); |
||||||
|
timeoutId = window.requestAnimationFrame(testQueueElements); |
||||||
|
}; |
||||||
|
|
||||||
|
const testQueueElements = () => { |
||||||
|
testQueue.forEach(testElement); |
||||||
|
testQueue.clear(); |
||||||
|
}; |
||||||
|
|
||||||
|
window.addEventListener('resize', () => { |
||||||
|
(Array.from(document.querySelectorAll(`[${attributeName}]`)) as HTMLElement[]).forEach(el => testQueue.add(el)); |
||||||
|
setTestQueue(); |
||||||
|
}, {capture: true, passive: true}); |
||||||
|
|
||||||
|
const testElement = (elm: HTMLElement) => { |
||||||
|
//const perf = performance.now();
|
||||||
|
// do not recalculate variables a second time
|
||||||
|
const mapped = map.get(elm); |
||||||
|
let {text, textLength, from, multiplier, font, textWidth, elementWidth} = mapped || {}; |
||||||
|
// first time
|
||||||
|
if(!mapped) { |
||||||
|
text = elm.textContent; |
||||||
|
textLength = text.length; |
||||||
|
from = parseFloat(elm.getAttribute(attributeName)) || 50; |
||||||
|
multiplier = from > 0 && from / 100; |
||||||
|
|
||||||
|
//const perf = performance.now();
|
||||||
|
font = `${elm.dataset.fontWeight || 400} ${fontSize} ${fontFamily}`; |
||||||
|
/* const computedStyle = window.getComputedStyle(elm, null); |
||||||
|
font = `${computedStyle.getPropertyValue('font-weight')} ${computedStyle.getPropertyValue('font-size')} ${computedStyle.getPropertyValue('font-family')}`; */ |
||||||
|
//console.log('testMiddleEllipsis get computed style:', performance.now() - perf, font);
|
||||||
|
|
||||||
|
textWidth = getTextWidth(text, font); |
||||||
|
//const perf = performance.now();
|
||||||
|
elementWidth = elm.offsetWidth; |
||||||
|
//console.log('testMiddleEllipsis get offsetWidth:', performance.now() - perf, font);
|
||||||
|
map.set(elm, {text, textLength, from, multiplier, font, textWidth, elementWidth}); |
||||||
|
} |
||||||
|
|
||||||
|
const {offsetWidth} = elm; |
||||||
|
const widthChanged = !mapped || elementWidth !== offsetWidth; |
||||||
|
mapped && widthChanged && (mapped.elementWidth = elementWidth = offsetWidth); |
||||||
|
|
||||||
|
if(widthChanged) { |
||||||
|
if(textWidth > elementWidth) { |
||||||
|
elm.setAttribute('title', text); |
||||||
|
let smallerText = text; |
||||||
|
let smallerWidth = elementWidth; |
||||||
|
while(smallerText.length > 3) { |
||||||
|
let smallerTextLength = smallerText.length; |
||||||
|
const half = multiplier && |
||||||
|
clamp(multiplier * smallerTextLength << 0, 1, smallerTextLength - 2) || |
||||||
|
Math.max(smallerTextLength + from - 1, 1); |
||||||
|
const half1 = smallerText.substr(0, half).replace(/\s*$/,''); |
||||||
|
const half2 = smallerText.substr(half + 1).replace(/^\s*/,''); |
||||||
|
smallerText = half1 + half2; |
||||||
|
smallerWidth = getTextWidth(smallerText + ellipsis, font); |
||||||
|
if(smallerWidth < elementWidth) { |
||||||
|
elm.textContent = half1 + ellipsis + half2; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
elm.removeAttribute('title'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//console.log('testMiddleEllipsis for element:', elm, performance.now() - perf);
|
||||||
|
}; |
||||||
|
|
||||||
|
let context: CanvasRenderingContext2D; |
||||||
|
/** |
||||||
|
* Get the text width |
||||||
|
* @param {string} text |
||||||
|
* @param {string} font |
||||||
|
*/ |
||||||
|
function getTextWidth(text: string, font: string) { |
||||||
|
//const perf = performance.now();
|
||||||
|
if(!context) { |
||||||
|
const canvas = document.createElement('canvas'); |
||||||
|
context = canvas.getContext('2d'); |
||||||
|
context.font = font; |
||||||
|
} |
||||||
|
|
||||||
|
//context.font = font;
|
||||||
|
const metrics = context.measureText(text); |
||||||
|
//console.log('getTextWidth perf:', performance.now() - perf);
|
||||||
|
return metrics.width; |
||||||
|
} |
||||||
|
|
||||||
|
export class MiddleEllipsisElement extends HTMLElement { |
||||||
|
constructor() { |
||||||
|
super(); |
||||||
|
|
||||||
|
if(this.getAttribute('data-middle-ellipsis') === null) { |
||||||
|
this.setAttribute('data-middle-ellipsis', ''); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
connectedCallback() { |
||||||
|
testQueue.add(this); |
||||||
|
setTestQueue(); |
||||||
|
//testElement(this);
|
||||||
|
} |
||||||
|
|
||||||
|
disconnectedCallback() { |
||||||
|
map.delete(this); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
customElements.define("middle-ellipsis-element", MiddleEllipsisElement); |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { copy } from "./object"; |
||||||
|
|
||||||
|
export function listMergeSorted(list1: any[] = [], list2: any[] = []) { |
||||||
|
const result = copy(list1); |
||||||
|
|
||||||
|
const minID = list1.length ? list1[list1.length - 1] : 0xFFFFFFFF; |
||||||
|
for(let i = 0; i < list2.length; i++) { |
||||||
|
if(list2[i] < minID) { |
||||||
|
result.push(list2[i]); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
export const accumulate = (arr: number[], initialValue: number) => arr.reduce((acc, value) => acc + value, initialValue); |
||||||
@ -0,0 +1,332 @@ |
|||||||
|
/* export function isInDOM(element: Element, parentNode?: HTMLElement): boolean { |
||||||
|
if(!element) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
parentNode = parentNode || document.body; |
||||||
|
if(element == parentNode) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
return isInDOM(element.parentNode as HTMLElement, parentNode); |
||||||
|
} */ |
||||||
|
export function isInDOM(element: Element): boolean { |
||||||
|
return element?.isConnected; |
||||||
|
} |
||||||
|
|
||||||
|
/* export function checkDragEvent(e: any) { |
||||||
|
if(!e || e.target && (e.target.tagName == 'IMG' || e.target.tagName == 'A')) return false |
||||||
|
if(e.dataTransfer && e.dataTransfer.types) { |
||||||
|
for(var i = 0; i < e.dataTransfer.types.length; i++) { |
||||||
|
if(e.dataTransfer.types[i] == 'Files') { |
||||||
|
return true; |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
return false; |
||||||
|
} */ |
||||||
|
|
||||||
|
export function cancelEvent(event: Event) { |
||||||
|
event = event || window.event; |
||||||
|
if(event) { |
||||||
|
// @ts-ignore
|
||||||
|
event = event.originalEvent || event; |
||||||
|
|
||||||
|
try { |
||||||
|
if(event.stopPropagation) event.stopPropagation(); |
||||||
|
if(event.preventDefault) event.preventDefault(); |
||||||
|
event.returnValue = false; |
||||||
|
event.cancelBubble = true; |
||||||
|
} catch(err) {} |
||||||
|
} |
||||||
|
|
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
export function getRichValue(field: any) { |
||||||
|
if(!field) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
var lines: string[] = []; |
||||||
|
var line: string[] = []; |
||||||
|
|
||||||
|
getRichElementValue(field, lines, line); |
||||||
|
if (line.length) { |
||||||
|
lines.push(line.join('')); |
||||||
|
} |
||||||
|
|
||||||
|
var value = lines.join('\n'); |
||||||
|
value = value.replace(/\u00A0/g, ' '); |
||||||
|
|
||||||
|
return value; |
||||||
|
} |
||||||
|
|
||||||
|
export function placeCaretAtEnd(el: HTMLElement) { |
||||||
|
el.focus(); |
||||||
|
if(typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { |
||||||
|
var range = document.createRange(); |
||||||
|
range.selectNodeContents(el); |
||||||
|
range.collapse(false); |
||||||
|
var sel = window.getSelection(); |
||||||
|
sel.removeAllRanges(); |
||||||
|
sel.addRange(range); |
||||||
|
// @ts-ignore
|
||||||
|
} else if(typeof document.body.createTextRange != "undefined") { |
||||||
|
// @ts-ignore
|
||||||
|
var textRange = document.body.createTextRange(); |
||||||
|
textRange.moveToElementText(el); |
||||||
|
textRange.collapse(false); |
||||||
|
textRange.select(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function getRichElementValue(node: any, lines: string[], line: string[], selNode?: Node, selOffset?: number) { |
||||||
|
if(node.nodeType == 3) { // TEXT
|
||||||
|
if(selNode === node) { |
||||||
|
var value = node.nodeValue |
||||||
|
line.push(value.substr(0, selOffset) + '\x01' + value.substr(selOffset)) |
||||||
|
} else { |
||||||
|
line.push(node.nodeValue) |
||||||
|
} |
||||||
|
return |
||||||
|
} |
||||||
|
if (node.nodeType != 1) { // NON-ELEMENT
|
||||||
|
return |
||||||
|
} |
||||||
|
var isSelected = (selNode === node) |
||||||
|
var isBlock = node.tagName == 'DIV' || node.tagName == 'P' |
||||||
|
var curChild |
||||||
|
if(isBlock && line.length || node.tagName == 'BR') { |
||||||
|
lines.push(line.join('')) |
||||||
|
line.splice(0, line.length) |
||||||
|
} else if(node.tagName == 'IMG') { |
||||||
|
if(node.alt) { |
||||||
|
line.push(node.alt); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(isSelected && !selOffset) { |
||||||
|
line.push('\x01'); |
||||||
|
} |
||||||
|
|
||||||
|
var curChild = node.firstChild; |
||||||
|
while(curChild) { |
||||||
|
getRichElementValue(curChild, lines, line, selNode, selOffset); |
||||||
|
curChild = curChild.nextSibling; |
||||||
|
} |
||||||
|
|
||||||
|
if(isSelected && selOffset) { |
||||||
|
line.push('\x01'); |
||||||
|
} |
||||||
|
|
||||||
|
if(isBlock && line.length) { |
||||||
|
lines.push(line.join('')); |
||||||
|
line.splice(0, line.length); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* if (Config.Modes.animations && |
||||||
|
typeof window.requestAnimationFrame == 'function') { |
||||||
|
window.onAnimationFrameCallback = function (cb) { |
||||||
|
return (function () { |
||||||
|
window.requestAnimationFrame(cb) |
||||||
|
}) |
||||||
|
} |
||||||
|
} else { |
||||||
|
window.onAnimationFrameCallback = function (cb) { |
||||||
|
return cb |
||||||
|
} |
||||||
|
} */ |
||||||
|
|
||||||
|
// generate a path's arc data parameter
|
||||||
|
// http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
|
||||||
|
var arcParameter = function(rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, x: number, y: number) { |
||||||
|
return [rx, ',', ry, ' ', |
||||||
|
xAxisRotation, ' ', |
||||||
|
largeArcFlag, ',', |
||||||
|
sweepFlag, ' ', |
||||||
|
x, ',', y ].join(''); |
||||||
|
}; |
||||||
|
|
||||||
|
export function generatePathData(x: number, y: number, width: number, height: number, tl: number, tr: number, br: number, bl: number) { |
||||||
|
const data: string[] = []; |
||||||
|
|
||||||
|
// start point in top-middle of the rectangle
|
||||||
|
data.push('M' + (x + width / 2) + ',' + y); |
||||||
|
|
||||||
|
// next we go to the right
|
||||||
|
data.push('H' + (x + width - tr)); |
||||||
|
|
||||||
|
if(tr > 0) { |
||||||
|
// now we draw the arc in the top-right corner
|
||||||
|
data.push('A' + arcParameter(tr, tr, 0, 0, 1, (x + width), (y + tr))); |
||||||
|
} |
||||||
|
|
||||||
|
// next we go down
|
||||||
|
data.push('V' + (y + height - br)); |
||||||
|
|
||||||
|
if(br > 0) { |
||||||
|
// now we draw the arc in the lower-right corner
|
||||||
|
data.push('A' + arcParameter(br, br, 0, 0, 1, (x + width - br), (y + height))); |
||||||
|
} |
||||||
|
|
||||||
|
// now we go to the left
|
||||||
|
data.push('H' + (x + bl)); |
||||||
|
|
||||||
|
if(bl > 0) { |
||||||
|
// now we draw the arc in the lower-left corner
|
||||||
|
data.push('A' + arcParameter(bl, bl, 0, 0, 1, (x + 0), (y + height - bl))); |
||||||
|
} |
||||||
|
|
||||||
|
// next we go up
|
||||||
|
data.push('V' + (y + tl)); |
||||||
|
|
||||||
|
if(tl > 0) { |
||||||
|
// now we draw the arc in the top-left corner
|
||||||
|
data.push('A' + arcParameter(tl, tl, 0, 0, 1, (x + tl), (y + 0))); |
||||||
|
} |
||||||
|
|
||||||
|
// and we close the path
|
||||||
|
data.push('Z'); |
||||||
|
|
||||||
|
return data.join(' '); |
||||||
|
}; |
||||||
|
|
||||||
|
//export function findUpClassName<T>(el: any, className: string): T;
|
||||||
|
export function findUpClassName(el: any, className: string): HTMLElement { |
||||||
|
return el.closest('.' + className); |
||||||
|
/* if(el.classList.contains(className)) return el; // 03.02.2020 |
||||||
|
|
||||||
|
while(el.parentElement) { |
||||||
|
el = el.parentElement; |
||||||
|
if(el.classList.contains(className)) |
||||||
|
return el; |
||||||
|
} |
||||||
|
return null; */ |
||||||
|
} |
||||||
|
|
||||||
|
export function findUpTag(el: any, tag: string): HTMLElement { |
||||||
|
return el.closest(tag); |
||||||
|
/* if(el.tagName == tag) return el; // 03.02.2020 |
||||||
|
|
||||||
|
while(el.parentElement) { |
||||||
|
el = el.parentElement; |
||||||
|
if(el.tagName === tag) |
||||||
|
return el; |
||||||
|
} |
||||||
|
return null; */ |
||||||
|
} |
||||||
|
|
||||||
|
export function findUpAttribute(el: any, attribute: string): HTMLElement { |
||||||
|
return el.closest(`[${attribute}]`); |
||||||
|
/* if(el.getAttribute(attribute) != null) return el; // 03.02.2020 |
||||||
|
|
||||||
|
while(el.parentElement) { |
||||||
|
el = el.parentElement; |
||||||
|
if(el.getAttribute(attribute) != null) |
||||||
|
return el; |
||||||
|
} |
||||||
|
return null; */ |
||||||
|
} |
||||||
|
|
||||||
|
export function whichChild(elem: Node) { |
||||||
|
if(!elem.parentNode) { |
||||||
|
return -1; |
||||||
|
} |
||||||
|
|
||||||
|
let i = 0; |
||||||
|
// @ts-ignore
|
||||||
|
while((elem = elem.previousElementSibling) != null) ++i; |
||||||
|
return i; |
||||||
|
}; |
||||||
|
|
||||||
|
export function fillPropertyValue(str: string) { |
||||||
|
let splitted = str.split(' '); |
||||||
|
if(splitted.length != 4) { |
||||||
|
if(!splitted[0]) splitted[0] = '0px'; |
||||||
|
for(let i = splitted.length; i < 4; ++i) { |
||||||
|
splitted[i] = splitted[i % 2] || splitted[0] || '0px'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return splitted; |
||||||
|
} |
||||||
|
|
||||||
|
export function calcImageInBox(imageW: number, imageH: number, boxW: number, boxH: number, noZoom?: boolean) { |
||||||
|
if(imageW < boxW && imageH < boxH) { |
||||||
|
return {w: imageW, h: imageH}; |
||||||
|
} |
||||||
|
|
||||||
|
var boxedImageW = boxW; |
||||||
|
var boxedImageH = boxH; |
||||||
|
|
||||||
|
if((imageW / imageH) > (boxW / boxH)) { |
||||||
|
boxedImageH = (imageH * boxW / imageW) | 0; |
||||||
|
} else { |
||||||
|
boxedImageW = (imageW * boxH / imageH) | 0; |
||||||
|
if(boxedImageW > boxW) { |
||||||
|
boxedImageH = (boxedImageH * boxW / boxedImageW) | 0; |
||||||
|
boxedImageW = boxW; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// if (Config.Navigator.retina) {
|
||||||
|
// imageW = Math.floor(imageW / 2)
|
||||||
|
// imageH = Math.floor(imageH / 2)
|
||||||
|
// }
|
||||||
|
|
||||||
|
if(noZoom && boxedImageW >= imageW && boxedImageH >= imageH) { |
||||||
|
boxedImageW = imageW; |
||||||
|
boxedImageH = imageH; |
||||||
|
} |
||||||
|
|
||||||
|
return {w: boxedImageW, h: boxedImageH}; |
||||||
|
} |
||||||
|
|
||||||
|
export function positionElementByIndex(element: HTMLElement, container: HTMLElement, pos: number) { |
||||||
|
const prevPos = whichChild(element); |
||||||
|
|
||||||
|
if(prevPos == pos) { |
||||||
|
return false; |
||||||
|
} else if(prevPos != -1 && prevPos < pos) { // was higher
|
||||||
|
pos += 1; |
||||||
|
} |
||||||
|
|
||||||
|
if(container.childElementCount > pos) { |
||||||
|
container.insertBefore(element, container.children[pos]); |
||||||
|
} else { |
||||||
|
container.append(element); |
||||||
|
} |
||||||
|
|
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
export function cancelSelection() { |
||||||
|
if(window.getSelection) { |
||||||
|
if(window.getSelection().empty) { // Chrome
|
||||||
|
window.getSelection().empty(); |
||||||
|
} else if(window.getSelection().removeAllRanges) { // Firefox
|
||||||
|
window.getSelection().removeAllRanges(); |
||||||
|
} |
||||||
|
// @ts-ignore
|
||||||
|
} else if(document.selection) { // IE?
|
||||||
|
// @ts-ignore
|
||||||
|
document.selection.empty(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//(window as any).splitStringByLength = splitStringByLength;
|
||||||
|
|
||||||
|
export function getSelectedText(): string { |
||||||
|
if(window.getSelection) { |
||||||
|
return window.getSelection().toString(); |
||||||
|
// @ts-ignore
|
||||||
|
} else if(document.selection) { |
||||||
|
// @ts-ignore
|
||||||
|
return document.selection.createRange().text; |
||||||
|
} |
||||||
|
|
||||||
|
return ''; |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
export function numberWithCommas(x: number) { |
||||||
|
const parts = x.toString().split("."); |
||||||
|
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
||||||
|
return parts.join("."); |
||||||
|
} |
||||||
|
|
||||||
|
export function formatBytes(bytes: number, decimals = 2) { |
||||||
|
if (bytes === 0) return '0 Bytes'; |
||||||
|
|
||||||
|
const k = 1024; |
||||||
|
const dm = decimals < 0 ? 0 : decimals; |
||||||
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; |
||||||
|
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
||||||
|
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; |
||||||
|
} |
||||||
|
|
||||||
|
export function formatNumber(bytes: number, decimals = 2) { |
||||||
|
if(bytes === 0) return '0'; |
||||||
|
|
||||||
|
const k = 1000; |
||||||
|
const dm = decimals < 0 ? 0 : decimals; |
||||||
|
const sizes = ['', 'K', 'M', 'B', 'T']; |
||||||
|
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
||||||
|
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]; |
||||||
|
} |
||||||
|
|
||||||
|
export function clamp(v: number, min: number, max: number): number { |
||||||
|
return v < min ? min : ((v > max) ? max : v); |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,94 @@ |
|||||||
|
export function copy<T>(obj: T): T { |
||||||
|
//in case of premitives
|
||||||
|
if(obj === null || typeof(obj) !== "object") { |
||||||
|
return obj; |
||||||
|
} |
||||||
|
|
||||||
|
//date objects should be
|
||||||
|
if(obj instanceof Date) { |
||||||
|
return new Date(obj.getTime()) as any; |
||||||
|
} |
||||||
|
|
||||||
|
//handle Array
|
||||||
|
if(Array.isArray(obj)) { |
||||||
|
const clonedArr: T = obj.map(el => copy(el)) as any as T; |
||||||
|
return clonedArr; |
||||||
|
} |
||||||
|
|
||||||
|
//lastly, handle objects
|
||||||
|
// @ts-ignore
|
||||||
|
let clonedObj = new obj.constructor(); |
||||||
|
for(var prop in obj){ |
||||||
|
if(obj.hasOwnProperty(prop)) { |
||||||
|
clonedObj[prop] = copy(obj[prop]); |
||||||
|
} |
||||||
|
} |
||||||
|
return clonedObj; |
||||||
|
} |
||||||
|
|
||||||
|
export function deepEqual(x: any, y: any): boolean { |
||||||
|
const ok = Object.keys, tx = typeof x, ty = typeof y; |
||||||
|
return x && y && tx === 'object' && tx === ty ? ( |
||||||
|
ok(x).length === ok(y).length && |
||||||
|
ok(x).every(key => deepEqual(x[key], y[key])) |
||||||
|
) : (x === y); |
||||||
|
} |
||||||
|
|
||||||
|
export function defineNotNumerableProperties(obj: {[key: string]: any}, names: string[]) { |
||||||
|
//const perf = performance.now();
|
||||||
|
const props = {writable: true, configurable: true}; |
||||||
|
const out: {[name: string]: typeof props} = {}; |
||||||
|
names.forEach(name => { |
||||||
|
if(obj[name] === undefined) { |
||||||
|
out[name] = props; |
||||||
|
} |
||||||
|
}); |
||||||
|
Object.defineProperties(obj, out); |
||||||
|
//console.log('defineNotNumerableProperties time:', performance.now() - perf);
|
||||||
|
} |
||||||
|
|
||||||
|
export function getObjectKeysAndSort(object: any, sort: 'asc' | 'desc' = 'asc') { |
||||||
|
const ids = Object.keys(object).map(i => +i); |
||||||
|
if(sort == 'asc') return ids.sort((a, b) => a - b); |
||||||
|
else return ids.sort((a, b) => b - a); |
||||||
|
} |
||||||
|
|
||||||
|
export function safeReplaceObject(wasObject: any, newObject: any) { |
||||||
|
for(var key in wasObject) { |
||||||
|
if(!newObject.hasOwnProperty(key) && key.charAt(0) != '$') { |
||||||
|
delete wasObject[key]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
for(var key in newObject) { |
||||||
|
//if (newObject.hasOwnProperty(key)) { // useless
|
||||||
|
wasObject[key] = newObject[key]; |
||||||
|
//}
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Will be used for FILE_REFERENCE_EXPIRED |
||||||
|
* @param key |
||||||
|
* @param wasObject |
||||||
|
* @param newObject |
||||||
|
*/ |
||||||
|
export function safeReplaceArrayInObject<K>(key: K, wasObject: any, newObject: any) { |
||||||
|
if('byteLength' in newObject[key]) { // Uint8Array
|
||||||
|
newObject[key] = [...newObject[key]]; |
||||||
|
} |
||||||
|
|
||||||
|
if(wasObject && wasObject[key] != newObject[key]) { |
||||||
|
wasObject[key].length = newObject[key].length; |
||||||
|
(newObject[key] as any[]).forEach((v, i) => { |
||||||
|
wasObject[key][i] = v; |
||||||
|
}); |
||||||
|
|
||||||
|
/* wasObject[key].set(newObject[key]); */ |
||||||
|
newObject[key] = wasObject[key]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function isObject(object: any) { |
||||||
|
return typeof(object) === 'object' && object !== null; |
||||||
|
} |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
/* export function stringMiddleOverflow(str: string, maxLength: number) { |
||||||
|
return str.length > maxLength ? str.slice(0, maxLength / 2 | 0) + '...' + str.slice(-Math.round(maxLength / 2)) : str; |
||||||
|
} */ |
||||||
|
|
||||||
|
export function limitSymbols(str: string, length: number, limitFrom = length + 10) { |
||||||
|
if(str.length > limitFrom) { |
||||||
|
str = str.slice(0, length).replace(/(\n|\s)+$/, '') + '...'; |
||||||
|
} |
||||||
|
|
||||||
|
return str; |
||||||
|
} |
||||||
|
|
||||||
|
// credits to https://github.com/sindresorhus/escape-string-regexp/blob/master/index.js
|
||||||
|
export function escapeRegExp(str: string) { |
||||||
|
return str |
||||||
|
.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&') |
||||||
|
.replace(/-/g, '\\x2d'); |
||||||
|
} |
||||||
|
|
||||||
|
export function encodeEntities(value: string) { |
||||||
|
return value.replace(/&/g, '&').replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, (value) => { |
||||||
|
var hi = value.charCodeAt(0); |
||||||
|
var low = value.charCodeAt(1); |
||||||
|
return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';'; |
||||||
|
}).replace(/([^\#-~| |!])/g, (value) => { // non-alphanumeric
|
||||||
|
return '&#' + value.charCodeAt(0) + ';'; |
||||||
|
}).replace(/</g, '<').replace(/>/g, '>'); |
||||||
|
} |
||||||
|
|
||||||
|
export function splitStringByLength(str: string, maxLength: number) { |
||||||
|
if(str.length < maxLength) return [str]; |
||||||
|
let length = 0, lastSliceStartIndex = 0, arrayIndex = 0; |
||||||
|
const delimiter = ' ';//'\n';
|
||||||
|
const out: string[] = []; |
||||||
|
|
||||||
|
const cut = (end?: number) => { |
||||||
|
let part = str.slice(lastSliceStartIndex, end); |
||||||
|
const _arrayIndex = arrayIndex++; |
||||||
|
if(part.length > maxLength) { |
||||||
|
let overflowPart = part.slice(maxLength); |
||||||
|
const splitted = splitStringByLength(overflowPart, maxLength); |
||||||
|
splitted.forEach(part => { |
||||||
|
out[arrayIndex++] = part; |
||||||
|
}); |
||||||
|
|
||||||
|
part = part.slice(0, maxLength); |
||||||
|
} |
||||||
|
|
||||||
|
lastSliceStartIndex = end; |
||||||
|
length = 0; |
||||||
|
out[_arrayIndex] = (out[_arrayIndex] || '') + part; |
||||||
|
}; |
||||||
|
|
||||||
|
let lastIndex = 0; |
||||||
|
do { |
||||||
|
let index = str.indexOf(delimiter, lastIndex); |
||||||
|
if(index === -1) { |
||||||
|
if(lastIndex != (str.length - 1)) { |
||||||
|
cut(); |
||||||
|
} |
||||||
|
|
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
index += delimiter.length; |
||||||
|
|
||||||
|
const partLength = index - lastIndex; |
||||||
|
if((length + partLength) > maxLength) { |
||||||
|
cut(length); |
||||||
|
} |
||||||
|
|
||||||
|
lastIndex = index; |
||||||
|
length += partLength; |
||||||
|
} while(true); |
||||||
|
|
||||||
|
return out; |
||||||
|
} |
||||||
@ -1,569 +0,0 @@ |
|||||||
import type { DownloadOptions } from "./mtproto/apiFileManager"; |
|
||||||
|
|
||||||
/* export function isInDOM(element: Element, parentNode?: HTMLElement): boolean { |
|
||||||
if(!element) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
parentNode = parentNode || document.body; |
|
||||||
if(element == parentNode) { |
|
||||||
return true; |
|
||||||
} |
|
||||||
return isInDOM(element.parentNode as HTMLElement, parentNode); |
|
||||||
} */ |
|
||||||
export function isInDOM(element: Element): boolean { |
|
||||||
return element?.isConnected; |
|
||||||
} |
|
||||||
|
|
||||||
/* export function checkDragEvent(e: any) { |
|
||||||
if(!e || e.target && (e.target.tagName == 'IMG' || e.target.tagName == 'A')) return false |
|
||||||
if(e.dataTransfer && e.dataTransfer.types) { |
|
||||||
for(var i = 0; i < e.dataTransfer.types.length; i++) { |
|
||||||
if(e.dataTransfer.types[i] == 'Files') { |
|
||||||
return true; |
|
||||||
} |
|
||||||
} |
|
||||||
} else { |
|
||||||
return true; |
|
||||||
} |
|
||||||
|
|
||||||
return false; |
|
||||||
} */ |
|
||||||
|
|
||||||
export function cancelEvent (event: Event) { |
|
||||||
event = event || window.event; |
|
||||||
if(event) { |
|
||||||
// @ts-ignore
|
|
||||||
event = event.originalEvent || event; |
|
||||||
|
|
||||||
try { |
|
||||||
if(event.stopPropagation) event.stopPropagation(); |
|
||||||
if(event.preventDefault) event.preventDefault(); |
|
||||||
event.returnValue = false; |
|
||||||
event.cancelBubble = true; |
|
||||||
} catch(err) {} |
|
||||||
} |
|
||||||
|
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
export function getRichValue(field: any) { |
|
||||||
if(!field) { |
|
||||||
return ''; |
|
||||||
} |
|
||||||
var lines: string[] = []; |
|
||||||
var line: string[] = []; |
|
||||||
|
|
||||||
getRichElementValue(field, lines, line); |
|
||||||
if (line.length) { |
|
||||||
lines.push(line.join('')); |
|
||||||
} |
|
||||||
|
|
||||||
var value = lines.join('\n'); |
|
||||||
value = value.replace(/\u00A0/g, ' '); |
|
||||||
|
|
||||||
return value; |
|
||||||
} |
|
||||||
|
|
||||||
export function placeCaretAtEnd(el: HTMLElement) { |
|
||||||
el.focus(); |
|
||||||
if(typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { |
|
||||||
var range = document.createRange(); |
|
||||||
range.selectNodeContents(el); |
|
||||||
range.collapse(false); |
|
||||||
var sel = window.getSelection(); |
|
||||||
sel.removeAllRanges(); |
|
||||||
sel.addRange(range); |
|
||||||
// @ts-ignore
|
|
||||||
} else if(typeof document.body.createTextRange != "undefined") { |
|
||||||
// @ts-ignore
|
|
||||||
var textRange = document.body.createTextRange(); |
|
||||||
textRange.moveToElementText(el); |
|
||||||
textRange.collapse(false); |
|
||||||
textRange.select(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export function getRichElementValue(node: any, lines: string[], line: string[], selNode?: Node, selOffset?: number) { |
|
||||||
if(node.nodeType == 3) { // TEXT
|
|
||||||
if(selNode === node) { |
|
||||||
var value = node.nodeValue |
|
||||||
line.push(value.substr(0, selOffset) + '\x01' + value.substr(selOffset)) |
|
||||||
} else { |
|
||||||
line.push(node.nodeValue) |
|
||||||
} |
|
||||||
return |
|
||||||
} |
|
||||||
if (node.nodeType != 1) { // NON-ELEMENT
|
|
||||||
return |
|
||||||
} |
|
||||||
var isSelected = (selNode === node) |
|
||||||
var isBlock = node.tagName == 'DIV' || node.tagName == 'P' |
|
||||||
var curChild |
|
||||||
if(isBlock && line.length || node.tagName == 'BR') { |
|
||||||
lines.push(line.join('')) |
|
||||||
line.splice(0, line.length) |
|
||||||
} else if(node.tagName == 'IMG') { |
|
||||||
if(node.alt) { |
|
||||||
line.push(node.alt); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if(isSelected && !selOffset) { |
|
||||||
line.push('\x01'); |
|
||||||
} |
|
||||||
|
|
||||||
var curChild = node.firstChild; |
|
||||||
while(curChild) { |
|
||||||
getRichElementValue(curChild, lines, line, selNode, selOffset); |
|
||||||
curChild = curChild.nextSibling; |
|
||||||
} |
|
||||||
|
|
||||||
if(isSelected && selOffset) { |
|
||||||
line.push('\x01'); |
|
||||||
} |
|
||||||
|
|
||||||
if(isBlock && line.length) { |
|
||||||
lines.push(line.join('')); |
|
||||||
line.splice(0, line.length); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* if (Config.Modes.animations && |
|
||||||
typeof window.requestAnimationFrame == 'function') { |
|
||||||
window.onAnimationFrameCallback = function (cb) { |
|
||||||
return (function () { |
|
||||||
window.requestAnimationFrame(cb) |
|
||||||
}) |
|
||||||
} |
|
||||||
} else { |
|
||||||
window.onAnimationFrameCallback = function (cb) { |
|
||||||
return cb |
|
||||||
} |
|
||||||
} */ |
|
||||||
|
|
||||||
// generate a path's arc data parameter
|
|
||||||
// http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
|
|
||||||
var arcParameter = function(rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, x: number, y: number) { |
|
||||||
return [rx, ',', ry, ' ', |
|
||||||
xAxisRotation, ' ', |
|
||||||
largeArcFlag, ',', |
|
||||||
sweepFlag, ' ', |
|
||||||
x, ',', y ].join(''); |
|
||||||
}; |
|
||||||
|
|
||||||
export function generatePathData(x: number, y: number, width: number, height: number, tl: number, tr: number, br: number, bl: number) { |
|
||||||
var data = []; |
|
||||||
|
|
||||||
// start point in top-middle of the rectangle
|
|
||||||
data.push('M' + (x + width / 2) + ',' + y); |
|
||||||
|
|
||||||
// next we go to the right
|
|
||||||
data.push('H' + (x + width - tr)); |
|
||||||
|
|
||||||
if (tr > 0) { |
|
||||||
// now we draw the arc in the top-right corner
|
|
||||||
data.push('A' + arcParameter(tr, tr, 0, 0, 1, (x + width), (y + tr))); |
|
||||||
} |
|
||||||
|
|
||||||
// next we go down
|
|
||||||
data.push('V' + (y + height - br)); |
|
||||||
|
|
||||||
if (br > 0) { |
|
||||||
// now we draw the arc in the lower-right corner
|
|
||||||
data.push('A' + arcParameter(br, br, 0, 0, 1, (x + width - br), (y + height))); |
|
||||||
} |
|
||||||
|
|
||||||
// now we go to the left
|
|
||||||
data.push('H' + (x + bl)); |
|
||||||
|
|
||||||
if (bl > 0) { |
|
||||||
// now we draw the arc in the lower-left corner
|
|
||||||
data.push('A' + arcParameter(bl, bl, 0, 0, 1, (x + 0), (y + height - bl))); |
|
||||||
} |
|
||||||
|
|
||||||
// next we go up
|
|
||||||
data.push('V' + (y + tl)); |
|
||||||
|
|
||||||
if (tl > 0) { |
|
||||||
// now we draw the arc in the top-left corner
|
|
||||||
data.push('A' + arcParameter(tl, tl, 0, 0, 1, (x + tl), (y + 0))); |
|
||||||
} |
|
||||||
|
|
||||||
// and we close the path
|
|
||||||
data.push('Z'); |
|
||||||
|
|
||||||
return data.join(' '); |
|
||||||
}; |
|
||||||
|
|
||||||
export function isObject(object: any) { |
|
||||||
return typeof(object) === 'object' && object !== null; |
|
||||||
} |
|
||||||
|
|
||||||
export function tsNow(seconds?: boolean) { |
|
||||||
var t = +new Date(); |
|
||||||
return seconds ? Math.floor(t / 1000) : t; |
|
||||||
} |
|
||||||
|
|
||||||
export function safeReplaceObject(wasObject: any, newObject: any) { |
|
||||||
for(var key in wasObject) { |
|
||||||
if(!newObject.hasOwnProperty(key) && key.charAt(0) != '$') { |
|
||||||
delete wasObject[key]; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
for(var key in newObject) { |
|
||||||
//if (newObject.hasOwnProperty(key)) { // useless
|
|
||||||
wasObject[key] = newObject[key]; |
|
||||||
//}
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Will be used for FILE_REFERENCE_EXPIRED |
|
||||||
* @param key |
|
||||||
* @param wasObject |
|
||||||
* @param newObject |
|
||||||
*/ |
|
||||||
export function safeReplaceArrayInObject<K>(key: K, wasObject: any, newObject: any) { |
|
||||||
if('byteLength' in newObject[key]) { // Uint8Array
|
|
||||||
newObject[key] = [...newObject[key]]; |
|
||||||
} |
|
||||||
|
|
||||||
if(wasObject && wasObject[key] != newObject[key]) { |
|
||||||
wasObject[key].length = newObject[key].length; |
|
||||||
(newObject[key] as any[]).forEach((v, i) => { |
|
||||||
wasObject[key][i] = v; |
|
||||||
}); |
|
||||||
|
|
||||||
/* wasObject[key].set(newObject[key]); */ |
|
||||||
newObject[key] = wasObject[key]; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export function limitSymbols(str: string, length: number, limitFrom = length + 10) { |
|
||||||
if(str.length > limitFrom) { |
|
||||||
str = str.slice(0, length).replace(/(\n|\s)+$/, '') + '...'; |
|
||||||
} |
|
||||||
|
|
||||||
return str; |
|
||||||
} |
|
||||||
|
|
||||||
export function numberWithCommas(x: number) { |
|
||||||
var parts = x.toString().split("."); |
|
||||||
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
|
||||||
return parts.join("."); |
|
||||||
} |
|
||||||
|
|
||||||
//export function findUpClassName<T>(el: any, className: string): T;
|
|
||||||
export function findUpClassName(el: any, className: string): HTMLElement { |
|
||||||
if(el.classList.contains(className)) return el; // 03.02.2020
|
|
||||||
|
|
||||||
while(el.parentElement) { |
|
||||||
el = el.parentElement; |
|
||||||
if(el.classList.contains(className)) |
|
||||||
return el; |
|
||||||
} |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
export function findUpTag(el: any, tag: string): HTMLElement { |
|
||||||
if(el.tagName == tag) return el; // 03.02.2020
|
|
||||||
|
|
||||||
while(el.parentElement) { |
|
||||||
el = el.parentElement; |
|
||||||
if(el.tagName === tag) |
|
||||||
return el; |
|
||||||
} |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
export function findUpAttribute(el: any, attribute: string): HTMLElement { |
|
||||||
if(el.getAttribute(attribute) != null) return el; // 03.02.2020
|
|
||||||
|
|
||||||
while(el.parentElement) { |
|
||||||
el = el.parentElement; |
|
||||||
if(el.getAttribute(attribute) != null) |
|
||||||
return el; |
|
||||||
} |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
export function getObjectKeysAndSort(object: any, sort: 'asc' | 'desc' = 'asc') { |
|
||||||
const ids = Object.keys(object).map(i => +i); |
|
||||||
if(sort == 'asc') return ids.sort((a, b) => a - b); |
|
||||||
else return ids.sort((a, b) => b - a); |
|
||||||
} |
|
||||||
|
|
||||||
export function whichChild(elem: Node) { |
|
||||||
if(!elem.parentNode) { |
|
||||||
return -1; |
|
||||||
} |
|
||||||
|
|
||||||
let i = 0; |
|
||||||
// @ts-ignore
|
|
||||||
while((elem = elem.previousElementSibling) != null) ++i; |
|
||||||
return i; |
|
||||||
}; |
|
||||||
|
|
||||||
export function copy<T>(obj: T): T { |
|
||||||
//in case of premitives
|
|
||||||
if(obj === null || typeof(obj) !== "object") { |
|
||||||
return obj; |
|
||||||
} |
|
||||||
|
|
||||||
//date objects should be
|
|
||||||
if(obj instanceof Date) { |
|
||||||
return new Date(obj.getTime()) as any; |
|
||||||
} |
|
||||||
|
|
||||||
//handle Array
|
|
||||||
if(Array.isArray(obj)){ |
|
||||||
var clonedArr: any = []; |
|
||||||
obj.forEach(function(element){ |
|
||||||
clonedArr.push(copy(element)) |
|
||||||
}); |
|
||||||
return clonedArr; |
|
||||||
} |
|
||||||
|
|
||||||
//lastly, handle objects
|
|
||||||
// @ts-ignore
|
|
||||||
let clonedObj = new obj.constructor(); |
|
||||||
for(var prop in obj){ |
|
||||||
if(obj.hasOwnProperty(prop)){ |
|
||||||
clonedObj[prop] = copy(obj[prop]); |
|
||||||
} |
|
||||||
} |
|
||||||
return clonedObj; |
|
||||||
} |
|
||||||
|
|
||||||
export function formatBytes(bytes: number, decimals = 2) { |
|
||||||
if (bytes === 0) return '0 Bytes'; |
|
||||||
|
|
||||||
const k = 1024; |
|
||||||
const dm = decimals < 0 ? 0 : decimals; |
|
||||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; |
|
||||||
|
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|
||||||
|
|
||||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; |
|
||||||
} |
|
||||||
|
|
||||||
export function formatNumber(bytes: number, decimals = 2) { |
|
||||||
if(bytes === 0) return '0'; |
|
||||||
|
|
||||||
const k = 1000; |
|
||||||
const dm = decimals < 0 ? 0 : decimals; |
|
||||||
const sizes = ['', 'K', 'M', 'B', 'T']; |
|
||||||
|
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|
||||||
|
|
||||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]; |
|
||||||
} |
|
||||||
|
|
||||||
export function deepEqual(x: any, y: any): boolean { |
|
||||||
const ok = Object.keys, tx = typeof x, ty = typeof y; |
|
||||||
return x && y && tx === 'object' && tx === ty ? ( |
|
||||||
ok(x).length === ok(y).length && |
|
||||||
ok(x).every(key => deepEqual(x[key], y[key])) |
|
||||||
) : (x === y); |
|
||||||
} |
|
||||||
|
|
||||||
export function listMergeSorted(list1: any, list2: any) { |
|
||||||
list1 = list1 || []; |
|
||||||
list2 = list2 || []; |
|
||||||
|
|
||||||
var result = copy(list1); |
|
||||||
|
|
||||||
var minID = list1.length ? list1[list1.length - 1] : 0xFFFFFFFF; |
|
||||||
for (var i = 0; i < list2.length; i++) { |
|
||||||
if (list2[i] < minID) { |
|
||||||
result.push(list2[i]); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return result; |
|
||||||
} |
|
||||||
|
|
||||||
// credits to https://github.com/sindresorhus/escape-string-regexp/blob/master/index.js
|
|
||||||
export function escapeRegExp(str: string) { |
|
||||||
return str |
|
||||||
.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&') |
|
||||||
.replace(/-/g, '\\x2d'); |
|
||||||
} |
|
||||||
|
|
||||||
export function encodeEntities(value: string) { |
|
||||||
return value.replace(/&/g, '&').replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, (value) => { |
|
||||||
var hi = value.charCodeAt(0); |
|
||||||
var low = value.charCodeAt(1); |
|
||||||
return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';'; |
|
||||||
}).replace(/([^\#-~| |!])/g, (value) => { // non-alphanumeric
|
|
||||||
return '&#' + value.charCodeAt(0) + ';'; |
|
||||||
}).replace(/</g, '<').replace(/>/g, '>'); |
|
||||||
} |
|
||||||
|
|
||||||
export function fillPropertyValue(str: string) { |
|
||||||
let splitted = str.split(' '); |
|
||||||
if(splitted.length != 4) { |
|
||||||
if(!splitted[0]) splitted[0] = '0px'; |
|
||||||
for(let i = splitted.length; i < 4; ++i) { |
|
||||||
splitted[i] = splitted[i % 2] || splitted[0] || '0px'; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return splitted; |
|
||||||
} |
|
||||||
|
|
||||||
export function calcImageInBox (imageW: number, imageH: number, boxW: number, boxH: number, noZoom?: boolean) { |
|
||||||
if(imageW < boxW && imageH < boxH) { |
|
||||||
return {w: imageW, h: imageH}; |
|
||||||
} |
|
||||||
|
|
||||||
var boxedImageW = boxW; |
|
||||||
var boxedImageH = boxH; |
|
||||||
|
|
||||||
if((imageW / imageH) > (boxW / boxH)) { |
|
||||||
boxedImageH = (imageH * boxW / imageW) | 0; |
|
||||||
} else { |
|
||||||
boxedImageW = (imageW * boxH / imageH) | 0; |
|
||||||
if(boxedImageW > boxW) { |
|
||||||
boxedImageH = (boxedImageH * boxW / boxedImageW) | 0; |
|
||||||
boxedImageW = boxW; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// if (Config.Navigator.retina) {
|
|
||||||
// imageW = Math.floor(imageW / 2)
|
|
||||||
// imageH = Math.floor(imageH / 2)
|
|
||||||
// }
|
|
||||||
|
|
||||||
if(noZoom && boxedImageW >= imageW && boxedImageH >= imageH) { |
|
||||||
boxedImageW = imageW; |
|
||||||
boxedImageH = imageH; |
|
||||||
} |
|
||||||
|
|
||||||
return {w: boxedImageW, h: boxedImageH}; |
|
||||||
} |
|
||||||
|
|
||||||
export function getEmojiToneIndex(input: string) { |
|
||||||
let match = input.match(/[\uDFFB-\uDFFF]/); |
|
||||||
return match ? 5 - (57343 - match[0].charCodeAt(0)) : 0; |
|
||||||
} |
|
||||||
|
|
||||||
export type FileURLType = 'photo' | 'thumb' | 'document' | 'stream' | 'download'; |
|
||||||
export function getFileURL(type: FileURLType, options: DownloadOptions) { |
|
||||||
//console.log('getFileURL', location);
|
|
||||||
//const perf = performance.now();
|
|
||||||
const encoded = encodeURIComponent(JSON.stringify(options)); |
|
||||||
//console.log('getFileURL encode:', performance.now() - perf, encoded);
|
|
||||||
|
|
||||||
return '/' + type + '/' + encoded; |
|
||||||
} |
|
||||||
|
|
||||||
export function positionElementByIndex(element: HTMLElement, container: HTMLElement, pos: number) { |
|
||||||
const prevPos = whichChild(element); |
|
||||||
|
|
||||||
if(prevPos == pos) { |
|
||||||
return false; |
|
||||||
} else if(prevPos != -1 && prevPos < pos) { // was higher
|
|
||||||
pos += 1; |
|
||||||
} |
|
||||||
|
|
||||||
if(container.childElementCount > pos) { |
|
||||||
container.insertBefore(element, container.children[pos]); |
|
||||||
} else { |
|
||||||
container.append(element); |
|
||||||
} |
|
||||||
|
|
||||||
return true; |
|
||||||
} |
|
||||||
|
|
||||||
export function splitStringByLength(str: string, maxLength: number) { |
|
||||||
if(str.length < maxLength) return [str]; |
|
||||||
let length = 0, lastSliceStartIndex = 0, arrayIndex = 0; |
|
||||||
const delimiter = ' ';//'\n';
|
|
||||||
const out: string[] = []; |
|
||||||
|
|
||||||
const cut = (end?: number) => { |
|
||||||
let part = str.slice(lastSliceStartIndex, end); |
|
||||||
const _arrayIndex = arrayIndex++; |
|
||||||
if(part.length > maxLength) { |
|
||||||
let overflowPart = part.slice(maxLength); |
|
||||||
const splitted = splitStringByLength(overflowPart, maxLength); |
|
||||||
splitted.forEach(part => { |
|
||||||
out[arrayIndex++] = part; |
|
||||||
}); |
|
||||||
|
|
||||||
part = part.slice(0, maxLength); |
|
||||||
} |
|
||||||
|
|
||||||
lastSliceStartIndex = end; |
|
||||||
length = 0; |
|
||||||
out[_arrayIndex] = (out[_arrayIndex] || '') + part; |
|
||||||
}; |
|
||||||
|
|
||||||
let lastIndex = 0; |
|
||||||
do { |
|
||||||
let index = str.indexOf(delimiter, lastIndex); |
|
||||||
if(index === -1) { |
|
||||||
if(lastIndex != (str.length - 1)) { |
|
||||||
cut(); |
|
||||||
} |
|
||||||
|
|
||||||
break; |
|
||||||
} |
|
||||||
|
|
||||||
index += delimiter.length; |
|
||||||
|
|
||||||
const partLength = index - lastIndex; |
|
||||||
if((length + partLength) > maxLength) { |
|
||||||
cut(length); |
|
||||||
} |
|
||||||
|
|
||||||
lastIndex = index; |
|
||||||
length += partLength; |
|
||||||
} while(true); |
|
||||||
|
|
||||||
return out; |
|
||||||
} |
|
||||||
|
|
||||||
export function defineNotNumerableProperties(obj: {[key: string]: any}, names: string[]) { |
|
||||||
//const perf = performance.now();
|
|
||||||
const props = {writable: true, configurable: true}; |
|
||||||
const out: {[name: string]: typeof props} = {}; |
|
||||||
names.forEach(name => { |
|
||||||
if(obj[name] === undefined) { |
|
||||||
out[name] = props; |
|
||||||
} |
|
||||||
}); |
|
||||||
Object.defineProperties(obj, out); |
|
||||||
//console.log('defineNotNumerableProperties time:', performance.now() - perf);
|
|
||||||
} |
|
||||||
|
|
||||||
export function cancelSelection() { |
|
||||||
if(window.getSelection) { |
|
||||||
if(window.getSelection().empty) { // Chrome
|
|
||||||
window.getSelection().empty(); |
|
||||||
} else if(window.getSelection().removeAllRanges) { // Firefox
|
|
||||||
window.getSelection().removeAllRanges(); |
|
||||||
} |
|
||||||
// @ts-ignore
|
|
||||||
} else if(document.selection) { // IE?
|
|
||||||
// @ts-ignore
|
|
||||||
document.selection.empty(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//(window as any).splitStringByLength = splitStringByLength;
|
|
||||||
|
|
||||||
export function getSelectedText(): string { |
|
||||||
if(window.getSelection) { |
|
||||||
return window.getSelection().toString(); |
|
||||||
// @ts-ignore
|
|
||||||
} else if(document.selection) { |
|
||||||
// @ts-ignore
|
|
||||||
return document.selection.createRange().text; |
|
||||||
} |
|
||||||
|
|
||||||
return ''; |
|
||||||
} |
|
||||||
Loading…
Reference in new issue