element-plus/packages/utils/dom.ts

248 lines
5.8 KiB
TypeScript
Raw Normal View History

import { CSSProperties } from 'vue'
import isServer from './isServer'
import { camelize, isObject } from './util'
import type { Nullable } from './types'
/* istanbul ignore next */
const trim = function (s: string) {
return (s || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
}
/* istanbul ignore next */
export const on = function (
element: HTMLElement | Document | Window,
event: string,
handler: EventListenerOrEventListenerObject,
useCapture = false
): void {
if (element && event && handler) {
element?.addEventListener(event, handler, useCapture)
}
}
/* istanbul ignore next */
export const off = function (
element: HTMLElement | Document | Window,
event: string,
handler: EventListenerOrEventListenerObject,
useCapture = false
): void {
if (element && event && handler) {
element?.removeEventListener(event, handler, useCapture)
}
}
/* istanbul ignore next */
export const once = function (
el: HTMLElement,
event: string,
fn: EventListener
): void {
const listener = function (...args: unknown[]) {
if (fn) {
fn.apply(this, args)
}
off(el, event, listener)
}
on(el, event, listener)
}
/* istanbul ignore next */
export function hasClass(el: HTMLElement, cls: string): boolean {
if (!el || !cls) return false
if (cls.indexOf(' ') !== -1)
throw new Error('className should not contain space.')
if (el.classList) {
return el.classList.contains(cls)
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
}
}
/* istanbul ignore next */
export function addClass(el: HTMLElement, cls: string): void {
if (!el) return
let curClass = el.className
const classes = (cls || '').split(' ')
for (let i = 0, j = classes.length; i < j; i++) {
const clsName = classes[i]
if (!clsName) continue
if (el.classList) {
el.classList.add(clsName)
} else if (!hasClass(el, clsName)) {
curClass += ' ' + clsName
}
}
if (!el.classList) {
el.className = curClass
}
}
/* istanbul ignore next */
export function removeClass(el: HTMLElement, cls: string): void {
if (!el || !cls) return
const classes = cls.split(' ')
let curClass = ' ' + el.className + ' '
for (let i = 0, j = classes.length; i < j; i++) {
const clsName = classes[i]
if (!clsName) continue
if (el.classList) {
el.classList.remove(clsName)
} else if (hasClass(el, clsName)) {
curClass = curClass.replace(' ' + clsName + ' ', ' ')
}
}
if (!el.classList) {
el.className = trim(curClass)
}
}
/* istanbul ignore next */
// Here I want to use the type CSSProperties, but the definition for CSSProperties
// has { [index: number]: string } in its type annotation, which does not satisfy the method
2020-08-25 22:25:46 +08:00
// camelize(s: string)
// Same as the return type
export const getStyle = function (
element: HTMLElement,
styleName: string
): string {
if (isServer) return
if (!element || !styleName) return null
2020-08-25 22:25:46 +08:00
styleName = camelize(styleName)
if (styleName === 'float') {
styleName = 'cssFloat'
}
try {
2020-08-27 21:22:32 +08:00
const style = element.style[styleName]
if (style) return style
const computed = document.defaultView.getComputedStyle(element, '')
2020-08-27 21:22:32 +08:00
return computed ? computed[styleName] : ''
} catch (e) {
return element.style[styleName]
}
}
/* istanbul ignore next */
export function setStyle(
element: HTMLElement,
styleName: CSSProperties | string,
value?: string
): void {
if (!element || !styleName) return
if (isObject(styleName)) {
Object.keys(styleName).forEach((prop) => {
setStyle(element, prop, styleName[prop])
})
} else {
2020-08-25 22:25:46 +08:00
styleName = camelize(styleName)
element.style[styleName] = value
}
}
export function removeStyle(
element: HTMLElement,
style: CSSProperties | string
) {
if (!element || !style) return
if (isObject(style)) {
Object.keys(style).forEach((prop) => {
setStyle(element, prop, '')
})
} else {
setStyle(element, style, '')
}
}
export const isScroll = (
el: HTMLElement,
isVertical?: Nullable<boolean>
): RegExpMatchArray => {
if (isServer) return
2020-08-27 21:22:32 +08:00
const determinedDirection = isVertical === null || isVertical === undefined
const overflow = determinedDirection
2020-08-27 21:22:32 +08:00
? getStyle(el, 'overflow')
: isVertical
? getStyle(el, 'overflow-y')
: getStyle(el, 'overflow-x')
2021-07-05 09:16:00 +08:00
return overflow.match(/(scroll|auto|overlay)/)
}
export const getScrollContainer = (
el: HTMLElement,
isVertical?: Nullable<boolean>
): Window | HTMLElement => {
if (isServer) return
2020-09-07 16:48:11 +08:00
let parent: HTMLElement = el
while (parent) {
if ([window, document, document.documentElement].includes(parent)) {
return window
}
if (isScroll(parent, isVertical)) {
return parent
}
parent = parent.parentNode as HTMLElement
}
return parent
}
export const isInContainer = (
el: HTMLElement,
container: HTMLElement
): boolean => {
if (isServer || !el || !container) return false
const elRect = el.getBoundingClientRect()
let containerRect: Partial<DOMRect>
if (
[window, document, document.documentElement, null, undefined].includes(
container
)
) {
containerRect = {
top: 0,
right: window.innerWidth,
bottom: window.innerHeight,
left: 0,
}
} else {
containerRect = container.getBoundingClientRect()
}
return (
elRect.top < containerRect.bottom &&
elRect.bottom > containerRect.top &&
elRect.right > containerRect.left &&
elRect.left < containerRect.right
)
}
2020-09-07 16:48:11 +08:00
export const getOffsetTop = (el: HTMLElement) => {
let offset = 0
let parent = el
while (parent) {
offset += parent.offsetTop
parent = parent.offsetParent as HTMLElement
}
return offset
}
export const getOffsetTopDistance = (
el: HTMLElement,
containerEl: HTMLElement
) => {
2020-09-07 16:48:11 +08:00
return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl))
}
2020-10-30 23:26:33 +08:00
2020-09-14 10:03:33 +08:00
export const stop = (e: Event) => e.stopPropagation()