From 24017f6ab3c7da4f8c9c4f40ebd806967d0d208d Mon Sep 17 00:00:00 2001 From: Kagol Date: Tue, 15 Mar 2022 16:47:29 +0800 Subject: [PATCH] fix: fix ls-lint/eslint/stylelint --- .husky/pre-commit | 2 +- .ls-lint.yml | 21 +- package.json | 10 +- .../color-alpha-slider/color-alpha-slider.tsx | 95 ++++---- .../color-hue-slider/color-hue-slider.tsx | 87 ++++---- .../color-palette/color-palette.tsx | 154 ++++++------- .../utils/{domDragger.ts => dom-dragger.ts} | 202 +++++++++--------- 7 files changed, 293 insertions(+), 278 deletions(-) rename packages/devui-vue/devui/color-picker/src/utils/{domDragger.ts => dom-dragger.ts} (60%) diff --git a/.husky/pre-commit b/.husky/pre-commit index 65d5bb7c48..91946a8077 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -npx @ls-lint/ls-lint && npx lint-staged +pnpx @ls-lint/ls-lint && pnpx lint-staged diff --git a/.ls-lint.yml b/.ls-lint.yml index 08f51be13a..132e970f4e 100644 --- a/.ls-lint.yml +++ b/.ls-lint.yml @@ -1,16 +1,25 @@ ls: - /{devui,src}/*: + /{packages}/*: .dir: kebab-case | regex:__[a-z0-9]+__ .scss: kebab-case .vue: kebab-case - .js: kebab-case - .ts: kebab-case - .tsx: kebab-case + .js: kebab-case | pointcase + .ts: kebab-case | pointcase + .tsx: kebab-case | pointcase .spec.ts: kebab-case .spec.tsx: kebab-case .route.ts: kebab-case .type.ts: kebab-case ignore: - - devui/style - - node_modules + # devui-cli + - packages/devui-cli/node_modules + # devui-theme + - packages/devui-theme/dist + - packages/devui-theme/node_modules + - packages/devui-theme/src/styles-var + # devui-vue + - packages/devui-vue/node_modules + - packages/devui-vue/build + - packages/devui-vue/docs + - packages/devui-vue/devui/style diff --git a/package.json b/package.json index 29a4b8b794..83bcc7622c 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,10 @@ "build:cli": "pnpm build --filter devui-cli", "prepare": "husky install", "precommit": "lint-staged", - "lint:fix": "eslint --fix \"packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}\"", - "stylelint": "stylelint --fix \"packages/**/{*.scss,*.css}\"", + "eslint": "eslint \"packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}\"", + "eslint:fix": "eslint --fix \"packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}\"", + "stylelint": "stylelint \"packages/**/{*.scss,*.css}\"", + "stylelint:fix": "stylelint --fix \"packages/**/{*.scss,*.css}\"", "test": "pnpm test --filter vue-devui" }, "devDependencies": { @@ -29,7 +31,7 @@ "stylelint-scss": "^3.20.1" }, "lint-staged": { - ".{js,ts,jsx,tsx,vue}": "eslint --fix", - ".{scss,css}": "stylelint --fix" + "packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx}": "eslint --fix", + "packages/**/{*.scss,*.css}": "stylelint --fix" } } diff --git a/packages/devui-vue/devui/color-picker/src/components/color-alpha-slider/color-alpha-slider.tsx b/packages/devui-vue/devui/color-picker/src/components/color-alpha-slider/color-alpha-slider.tsx index 3df8c6c99e..ac2147285e 100644 --- a/packages/devui-vue/devui/color-picker/src/components/color-alpha-slider/color-alpha-slider.tsx +++ b/packages/devui-vue/devui/color-picker/src/components/color-alpha-slider/color-alpha-slider.tsx @@ -1,79 +1,80 @@ -import { computed, defineComponent, ref, onMounted } from 'vue' -import { colorPickerAlphaSliderProps } from './color-picker-alpha-slider-types' -import { DOMUtils } from '../../utils/domDragger' -import { RGBtoCSS, fromHSVA } from '../../utils/color-utils' -import './color-alpha-slider.scss' +import { computed, defineComponent, ref, onMounted } from 'vue'; +import { colorPickerAlphaSliderProps } from './color-picker-alpha-slider-types'; +import { DOMUtils } from '../../utils/dom-dragger'; +import { RGBtoCSS, fromHSVA } from '../../utils/color-utils'; +import './color-alpha-slider.scss'; export default defineComponent({ name: 'ColorAlphaSlider', props: colorPickerAlphaSliderProps, emits: ['update:modelValue'], setup(props: colorPickerAlphaSliderProps, ctx) { - const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' } - const clickTransfrom = ref(DEFAULT_TRANSITION) - const barElement = ref(null) - const cursorElement = ref(null) - const onClickSider = (event: Event) => { - const target = event.target - if (target !== barElement.value) { - onMoveBar(event as MouseEvent) - } - } + const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' }; + const clickTransfrom = ref(DEFAULT_TRANSITION); + const barElement = ref(null); + const cursorElement = ref(null); const onMoveBar = (event: MouseEvent) => { - event.stopPropagation() + event.stopPropagation(); if (barElement.value && cursorElement.value) { - const rect = barElement.value.getBoundingClientRect() - const offsetWidth = cursorElement.value.offsetWidth - let left = event.clientX - rect.left - left = Math.max(offsetWidth / 2, left) - left = Math.min(left, rect.width - offsetWidth / 2) - const alpha = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 100) - ctx.emit('update:modelValue', fromHSVA({ ...props.modelValue.hsva, a: alpha / 100 })) + const rect = barElement.value.getBoundingClientRect(); + const offsetWidth = cursorElement.value.offsetWidth; + let left = event.clientX - rect.left; + left = Math.max(offsetWidth / 2, left); + left = Math.min(left, rect.width - offsetWidth / 2); + const alpha = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 100); + ctx.emit('update:modelValue', fromHSVA({ ...props.modelValue.hsva, a: alpha / 100 })); + } + }; + + const onClickSider = (event: Event) => { + const target = event.target; + if (target !== barElement.value) { + onMoveBar(event as MouseEvent); } - } + }; const getBackgroundStyle = computed(() => { return { background: `linear-gradient(to right, transparent , ${RGBtoCSS(props.modelValue.rgba)})` - } - }) + }; + }); const getCursorLeft = computed(() => { if (barElement.value && cursorElement.value) { - const alpha = props.modelValue.rgba.a - const rect = barElement.value.getBoundingClientRect() - const offsetWidth = cursorElement.value.offsetWidth - return Math.round(alpha * (rect.width - offsetWidth) + offsetWidth / 2) + const alpha = props.modelValue.rgba.a; + const rect = barElement.value.getBoundingClientRect(); + const offsetWidth = cursorElement.value.offsetWidth; + return Math.round(alpha * (rect.width - offsetWidth) + offsetWidth / 2); } - return 0 - }) + return 0; + }); const getCursorStyle = computed(() => { - const left = getCursorLeft.value + const left = getCursorLeft.value; return { left: left + 'px', top: 0, ...clickTransfrom.value - } - }) + }; + }); onMounted(() => { const dragConfig = { drag: (event: Event) => { - clickTransfrom.value = null - onMoveBar(event as MouseEvent) + clickTransfrom.value = null; + onMoveBar(event as MouseEvent); }, end: (event: Event) => { - clickTransfrom.value = DEFAULT_TRANSITION - onMoveBar(event as MouseEvent) + clickTransfrom.value = DEFAULT_TRANSITION; + onMoveBar(event as MouseEvent); } - } + }; if (barElement.value && cursorElement.value) { - DOMUtils.triggerDragEvent(barElement.value, dragConfig) + DOMUtils.triggerDragEvent(barElement.value, dragConfig); } - }) + }); const alphaClass = computed(() => { - return ['devui-color-picker-alpha-slider', 'transparent'] - }) + return ['devui-color-picker-alpha-slider', 'transparent']; + }); return () => { return (
@@ -92,7 +93,7 @@ export default defineComponent({
- ) - } + ); + }; } -}) +}); diff --git a/packages/devui-vue/devui/color-picker/src/components/color-hue-slider/color-hue-slider.tsx b/packages/devui-vue/devui/color-picker/src/components/color-hue-slider/color-hue-slider.tsx index 7f1e5dcd3b..6af6478596 100644 --- a/packages/devui-vue/devui/color-picker/src/components/color-hue-slider/color-hue-slider.tsx +++ b/packages/devui-vue/devui/color-picker/src/components/color-hue-slider/color-hue-slider.tsx @@ -1,53 +1,47 @@ -import { computed, defineComponent, ref, onMounted, watch } from 'vue' -import { colorPickerHueSliderProps } from './color-picker-hue-slider-types' -import { DOMUtils } from '../../utils/domDragger' -import { fromHSVA } from '../../utils/color-utils' -import './color-hue-slider.scss' +import { computed, defineComponent, ref, onMounted } from 'vue'; +import { colorPickerHueSliderProps } from './color-picker-hue-slider-types'; +import { DOMUtils } from '../../utils/dom-dragger'; +import { fromHSVA } from '../../utils/color-utils'; +import './color-hue-slider.scss'; export default defineComponent({ name: 'ColorHueSlider', props: colorPickerHueSliderProps, emits: ['update:modelValue'], setup(props, ctx) { - const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' } - const barElement = ref(null) - const cursorElement = ref(null) - const clickTransfrom = ref(DEFAULT_TRANSITION) + const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' }; + const barElement = ref(null); + const cursorElement = ref(null); + const clickTransfrom = ref(DEFAULT_TRANSITION); const getCursorLeft = () => { if (barElement.value && cursorElement.value) { - const rect = barElement.value.getBoundingClientRect() - const offsetWidth = cursorElement.value.offsetWidth + const rect = barElement.value.getBoundingClientRect(); + const offsetWidth = cursorElement.value.offsetWidth; if (props.modelValue.hue === 360) { - return rect.width - offsetWidth / 2 + return rect.width - offsetWidth / 2; } - return ((props.modelValue.hue % 360) * (rect.width - offsetWidth)) / 360 + offsetWidth / 2 + return ((props.modelValue.hue % 360) * (rect.width - offsetWidth)) / 360 + offsetWidth / 2; } - return 0 - } + return 0; + }; const getCursorStyle = computed(() => { - const left = getCursorLeft() + const left = getCursorLeft(); return { left: left + 'px', top: 0, ...clickTransfrom.value - } - }) - const onClickSider = (event: Event) => { - const target = event.target - if (target !== barElement.value) { - onMoveBar(event as MouseEvent) - } - } + }; + }); const onMoveBar = (event: MouseEvent) => { - event.stopPropagation() + event.stopPropagation(); if (barElement.value && cursorElement.value) { - const rect = barElement.value.getBoundingClientRect() - const offsetWidth = cursorElement.value.offsetWidth - let left = event.clientX - rect.left - left = Math.min(left, rect.width - offsetWidth / 2) - left = Math.max(offsetWidth / 2, left) - const hue = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 360) + const rect = barElement.value.getBoundingClientRect(); + const offsetWidth = cursorElement.value.offsetWidth; + let left = event.clientX - rect.left; + left = Math.min(left, rect.width - offsetWidth / 2); + left = Math.max(offsetWidth / 2, left); + const hue = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 360); ctx.emit( 'update:modelValue', fromHSVA({ @@ -56,26 +50,33 @@ export default defineComponent({ v: props.modelValue.hsva.v, a: props.modelValue.hsva.a }) - ) + ); } - } + }; + + const onClickSider = (event: Event) => { + const target = event.target; + if (target !== barElement.value) { + onMoveBar(event as MouseEvent); + } + }; onMounted(() => { const dragConfig = { drag: (event: Event) => { - clickTransfrom.value = null - onMoveBar(event as MouseEvent) + clickTransfrom.value = null; + onMoveBar(event as MouseEvent); }, end: (event: Event) => { - clickTransfrom.value = DEFAULT_TRANSITION - onMoveBar(event as MouseEvent) + clickTransfrom.value = DEFAULT_TRANSITION; + onMoveBar(event as MouseEvent); } - } + }; if (barElement.value && cursorElement.value) { - DOMUtils.triggerDragEvent(barElement.value, dragConfig) + DOMUtils.triggerDragEvent(barElement.value, dragConfig); } - }) + }); return () => { return (
@@ -89,7 +90,7 @@ export default defineComponent({
- ) - } + ); + }; } -}) +}); diff --git a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx index 882d8f8746..21d87b0fdb 100644 --- a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx +++ b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx @@ -1,87 +1,75 @@ -import { defineComponent, ref, onMounted, computed, getCurrentInstance, watch, inject } from 'vue' -import { DOMUtils } from '../../utils/domDragger' -import { fromHSVA } from '../../utils/color-utils' -import { clamp } from '../../utils/helpers' -import { colorPickerPaletteProps } from './color-picker-palette-types' -import { provideColorOptions } from '../../utils/color-utils-types' -import './color-palette.scss' +import { defineComponent, ref, onMounted, computed, getCurrentInstance, watch, inject } from 'vue'; +import { DOMUtils } from '../../utils/dom-dragger'; +import { fromHSVA } from '../../utils/color-utils'; +import { clamp } from '../../utils/helpers'; +import { colorPickerPaletteProps } from './color-picker-palette-types'; +import { provideColorOptions } from '../../utils/color-utils-types'; +import './color-palette.scss'; export default defineComponent({ name: 'ColorPallete', props: colorPickerPaletteProps, emits: ['update:modelValue', 'changeTextColor'], setup(props: colorPickerPaletteProps, ctx) { - const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' } - const dotSizeInject: provideColorOptions = inject('provideData') + const DEFAULT_TRANSITION = { transition: 'all 0.3s ease' }; + const dotSizeInject: provideColorOptions = inject('provideData'); - const clickTransfrom = ref(DEFAULT_TRANSITION) - const paletteElement = ref() - const canvasElement = ref() - const handlerElement = ref() - const paletteInstance = getCurrentInstance() + const clickTransfrom = ref(DEFAULT_TRANSITION); + const paletteElement = ref(); + const canvasElement = ref(); + const handlerElement = ref(); + const paletteInstance = getCurrentInstance(); - const cursorTop = ref(0) - const cursorLeft = ref(0) + const cursorTop = ref(0); + const cursorLeft = ref(0); const getDotStyle = computed(() => { return { width: `${dotSizeInject.dotSize}px`, height: `${dotSizeInject.dotSize}px`, transform: `translate(-${dotSizeInject.dotSize / 2}px, -${dotSizeInject.dotSize / 2}px)` - } - }) + }; + }); const getCursorStyle = computed(() => { return { top: cursorTop.value + 'px', left: cursorLeft.value + 'px', ...clickTransfrom.value - } - }) + }; + }); function renderCanvas() { - const canvas = canvasElement.value.getContext('2d') - const parentWidth = paletteElement.value.offsetWidth - canvasElement.value.width = parentWidth - canvasElement.value.height = props.height - const saturationGradient = canvas.createLinearGradient(0, 0, parentWidth, 0) - saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white - saturationGradient.addColorStop(1, `hsla(${props.modelValue.hue}, 100%, 50%, 1)`) - canvas.fillStyle = saturationGradient - canvas.fillRect(0, 0, parentWidth, props.height) - const valueGradient = canvas.createLinearGradient(0, 0, 0, props.height) - valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent - valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black - canvas.fillStyle = valueGradient - canvas.fillRect(0, 0, parentWidth, props.height) - } - function clickPalette(event: Event) { - const target = event.target - if (target !== paletteElement.value) { - handleDrag(event as MouseEvent) - } + const canvas = canvasElement.value.getContext('2d'); + const parentWidth = paletteElement.value.offsetWidth; + canvasElement.value.width = parentWidth; + canvasElement.value.height = props.height; + const saturationGradient = canvas.createLinearGradient(0, 0, parentWidth, 0); + saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)'); // white + saturationGradient.addColorStop(1, `hsla(${props.modelValue.hue}, 100%, 50%, 1)`); + canvas.fillStyle = saturationGradient; + canvas.fillRect(0, 0, parentWidth, props.height); + const valueGradient = canvas.createLinearGradient(0, 0, 0, props.height); + valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)'); // transparent + valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)'); // black + canvas.fillStyle = valueGradient; + canvas.fillRect(0, 0, parentWidth, props.height); } - function updatePosition() { - if (paletteInstance) { - const parentWidth = paletteElement.value.offsetWidth - cursorLeft.value = Number(props.modelValue?.hsva.s) * parentWidth - cursorTop.value = (1 - Number(props.modelValue?.hsva.v)) * props.height - } - } - function handleDrag(event: any) { - const parentWidth = paletteElement.value.offsetWidth + + function handleDrag(event: MouseEvent) { + const parentWidth = paletteElement.value.offsetWidth; if (paletteInstance) { - const el = canvasElement.value - const rect = el?.getBoundingClientRect() - let left = event.clientX - rect.left - let top = event.clientY - rect.top - left = clamp(left, 0, parentWidth) - top = clamp(top, 0, props.height) - cursorLeft.value = left - cursorTop.value = top + const el = canvasElement.value; + const rect = el?.getBoundingClientRect(); + let left = event.clientX - rect.left; + let top = event.clientY - rect.top; + left = clamp(left, 0, parentWidth); + top = clamp(top, 0, props.height); + cursorLeft.value = left; + cursorTop.value = top; const isChangeTextColor = computed(() => { if (left > rect.width / 2 || top > rect.height / 2) { - return true + return true; } else { - return false + return false; } - }) + }); ctx.emit( 'update:modelValue', fromHSVA({ @@ -90,33 +78,47 @@ export default defineComponent({ v: 1 - clamp(event.clientY - rect.top, 0, rect.height) / rect.height, a: props.modelValue.alpha }) - ) - ctx.emit('changeTextColor', isChangeTextColor.value) + ); + ctx.emit('changeTextColor', isChangeTextColor.value); + } + } + + function clickPalette(event: Event) { + const target = event.target; + if (target !== paletteElement.value) { + handleDrag(event as MouseEvent); + } + } + function updatePosition() { + if (paletteInstance) { + const parentWidth = paletteElement.value.offsetWidth; + cursorLeft.value = Number(props.modelValue?.hsva.s) * parentWidth; + cursorTop.value = (1 - Number(props.modelValue?.hsva.v)) * props.height; } } onMounted(() => { - renderCanvas() + renderCanvas(); if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) { DOMUtils.triggerDragEvent(paletteInstance.vnode.el as HTMLElement, { drag: (event: Event) => { - clickTransfrom.value = null - handleDrag(event as MouseEvent) + clickTransfrom.value = null; + handleDrag(event as MouseEvent); }, end: (event) => { - clickTransfrom.value = DEFAULT_TRANSITION - handleDrag(event as MouseEvent) + clickTransfrom.value = DEFAULT_TRANSITION; + handleDrag(event as MouseEvent); } - }) - updatePosition() + }); + updatePosition(); } - }) + }); watch( () => props.modelValue, () => { - updatePosition() + updatePosition(); } - ) - ctx.expose({ renderCanvas }) + ); + ctx.expose({ renderCanvas }); return () => { return (
@@ -125,7 +127,7 @@ export default defineComponent({
- ) - } + ); + }; } -}) +}); diff --git a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts b/packages/devui-vue/devui/color-picker/src/utils/dom-dragger.ts similarity index 60% rename from packages/devui-vue/devui/color-picker/src/utils/domDragger.ts rename to packages/devui-vue/devui/color-picker/src/utils/dom-dragger.ts index 5e520c8073..eab8755caf 100644 --- a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts +++ b/packages/devui-vue/devui/color-picker/src/utils/dom-dragger.ts @@ -1,7 +1,7 @@ export const isObject = (val: unknown): val is Record => - val !== null && typeof val === 'object' + val !== null && typeof val === 'object'; -export const isString = (val: unknown): val is string => typeof val === 'string' +export const isString = (val: unknown): val is string => typeof val === 'string'; export const enum NodeType { ELEMENT_NODE = 1, @@ -15,16 +15,16 @@ export const enum NodeType { } export interface DragEventOptions { - drag?: (event: Event) => void - start?: (event: Event) => void - end?: (event: Event) => void + drag?: (event: Event) => void; + start?: (event: Event) => void; + end?: (event: Event) => void; } -export type ScrollElement = Element | Window +export type ScrollElement = Element | Window; export class DOMUtils { static isWindow(val: unknown): val is Window { - return val === window + return val === window; } /** @@ -43,7 +43,7 @@ export class DOMUtils { options: boolean | AddEventListenerOptions = false ): void { if (element && event && handler) { - element.addEventListener(event, handler, options) + element.addEventListener(event, handler, options); } } @@ -62,7 +62,7 @@ export class DOMUtils { options: boolean | EventListenerOptions = false ): void { if (element && event && handler) { - element.removeEventListener(event, handler, options) + element.removeEventListener(event, handler, options); } } @@ -73,46 +73,46 @@ export class DOMUtils { * @param options */ static triggerDragEvent(element: HTMLElement, options: DragEventOptions): void { - let isDragging = false + let isDragging = false; const moveFn = function (event: Event) { - options.drag?.(event) - } + options.drag?.(event); + }; const upFn = (event: Event) => { - DOMUtils.removeEventListener(document, 'mousemove', moveFn) - DOMUtils.removeEventListener(document, 'mouseup', upFn) - DOMUtils.removeEventListener(document, 'touchmove', moveFn) - DOMUtils.removeEventListener(document, 'touchend', upFn) - document.onselectstart = null - document.ondragstart = null - - isDragging = false - options.end?.(event) - } + DOMUtils.removeEventListener(document, 'mousemove', moveFn); + DOMUtils.removeEventListener(document, 'mouseup', upFn); + DOMUtils.removeEventListener(document, 'touchmove', moveFn); + DOMUtils.removeEventListener(document, 'touchend', upFn); + document.onselectstart = null; + document.ondragstart = null; + + isDragging = false; + options.end?.(event); + }; const downFn = (event: Event) => { - if (isDragging) return - document.onselectstart = () => false - document.ondragstart = () => false - DOMUtils.addEventListener(document, 'mousemove', moveFn) - DOMUtils.addEventListener(document, 'mouseup', upFn) - DOMUtils.addEventListener(document, 'touchmove', moveFn) - DOMUtils.addEventListener(document, 'touchend', upFn) - isDragging = true - - options.start?.(event) - } - DOMUtils.addEventListener(element, 'mousedown', downFn) - DOMUtils.addEventListener(element, 'touchstart', downFn) - return + if (isDragging) {return;} + document.onselectstart = () => false; + document.ondragstart = () => false; + DOMUtils.addEventListener(document, 'mousemove', moveFn); + DOMUtils.addEventListener(document, 'mouseup', upFn); + DOMUtils.addEventListener(document, 'touchmove', moveFn); + DOMUtils.addEventListener(document, 'touchend', upFn); + isDragging = true; + + options.start?.(event); + }; + DOMUtils.addEventListener(element, 'mousedown', downFn); + DOMUtils.addEventListener(element, 'touchstart', downFn); + return; } static getBoundingClientRect(element: HTMLElement): DOMRect | null { if (element && isObject(element) && element.nodeType === NodeType.ELEMENT_NODE) { - return element.getBoundingClientRect() + return element.getBoundingClientRect(); } - return null + return null; } /** @@ -128,9 +128,9 @@ export class DOMUtils { isString(className) && element.nodeType === NodeType.ELEMENT_NODE ) { - return element.classList.contains(className.trim()) + return element.classList.contains(className.trim()); } - return false + return false; } /** @@ -146,10 +146,10 @@ export class DOMUtils { isString(className) && element.nodeType === NodeType.ELEMENT_NODE ) { - className = className.trim() + className = className.trim(); if (!DOMUtils.hasClass(element, className)) { - const cl = element.className - element.className = cl ? cl + ' ' + className : className + const cl = element.className; + element.className = cl ? cl + ' ' + className : className; } } } @@ -168,15 +168,15 @@ export class DOMUtils { element.nodeType === NodeType.ELEMENT_NODE && typeof element.className === 'string' ) { - className = className.trim() - const classes = element.className.trim().split(' ') + className = className.trim(); + const classes = element.className.trim().split(' '); for (let i = classes.length - 1; i >= 0; i--) { - classes[i] = classes[i].trim() + classes[i] = classes[i].trim(); if (!classes[i] || classes[i] === className) { - classes.splice(i, 1) + classes.splice(i, 1); } } - element.className = classes.join(' ') + element.className = classes.join(' '); } } @@ -194,7 +194,7 @@ export class DOMUtils { isString(className) && element.nodeType === NodeType.ELEMENT_NODE ) { - element.classList.toggle(className, force) + element.classList.toggle(className, force); } } @@ -217,67 +217,67 @@ export class DOMUtils { isString(newClassName) && element.nodeType === NodeType.ELEMENT_NODE ) { - oldClassName = oldClassName.trim() - newClassName = newClassName.trim() - DOMUtils.removeClass(element, oldClassName) - DOMUtils.addClass(element, newClassName) + oldClassName = oldClassName.trim(); + newClassName = newClassName.trim(); + DOMUtils.removeClass(element, oldClassName); + DOMUtils.addClass(element, newClassName); } } static getScrollTop(el: ScrollElement): number { - const top = 'scrollTop' in el ? el.scrollTop : el.pageYOffset + const top = 'scrollTop' in el ? el.scrollTop : el.pageYOffset; // iOS scroll bounce cause minus scrollTop - return Math.max(top, 0) + return Math.max(top, 0); } static setScrollTop(el: ScrollElement, value: number): void { if ('scrollTop' in el) { - el.scrollTop = value + el.scrollTop = value; } else { - el.scrollTo(el.scrollX, value) + el.scrollTo(el.scrollX, value); } } static getRootScrollTop(): number { - return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 + return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; } static setRootScrollTop(value: number): void { - DOMUtils.setScrollTop(window, value) - DOMUtils.setScrollTop(document.body, value) + DOMUtils.setScrollTop(window, value); + DOMUtils.setScrollTop(document.body, value); } static getElementTop(el: ScrollElement, scroller?: HTMLElement): number { if (DOMUtils.isWindow(el)) { - return 0 + return 0; } - const scrollTop = scroller ? DOMUtils.getScrollTop(scroller) : DOMUtils.getRootScrollTop() - return el.getBoundingClientRect().top + scrollTop + const scrollTop = scroller ? DOMUtils.getScrollTop(scroller) : DOMUtils.getRootScrollTop(); + return el.getBoundingClientRect().top + scrollTop; } static getVisibleHeight(el: ScrollElement): number { if (DOMUtils.isWindow(el)) { - return el.innerHeight + return el.innerHeight; } - return el.getBoundingClientRect().height + return el.getBoundingClientRect().height; } static isHidden(el: HTMLElement): boolean { if (!el) { - return false + return false; } - const style = window.getComputedStyle(el) - const hidden = style.display === 'none' + const style = window.getComputedStyle(el); + const hidden = style.display === 'none'; // 在以下情况下，offsetParent返回null: // 1. 元素或其父元素的display属性设置为none. // 2. 元素的position属性设置为fixed - const parentHidden = el.offsetParent === null && style.position !== 'fixed' + const parentHidden = el.offsetParent === null && style.position !== 'fixed'; - return hidden || parentHidden + return hidden || parentHidden; } /** @@ -289,9 +289,9 @@ export class DOMUtils { static triggerEvent(el: Element, type: string): void { if ('createEvent' in document) { // modern browsers, IE9+ - const e = document.createEvent('HTMLEvents') - e.initEvent(type, false, true) - el.dispatchEvent(e) + const e = document.createEvent('HTMLEvents'); + e.initEvent(type, false, true); + el.dispatchEvent(e); } } @@ -301,50 +301,50 @@ export class DOMUtils { * @param event */ static calcAngle(element: HTMLElement, event: MouseEvent): number { - const rect = element.getBoundingClientRect() + const rect = element.getBoundingClientRect(); - const originX = rect.left + rect.width / 2 - const originY = rect.top + rect.height / 2 + const originX = rect.left + rect.width / 2; + const originY = rect.top + rect.height / 2; - //获得中心点和鼠标坐标连线，与y轴正半轴之间的夹角 - const x = Math.abs(originX - event.clientX) - const y = Math.abs(originY - event.clientY) - const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) - const cos = y / z - const rad = Math.acos(cos) //用反三角函数求弧度 - let angle = Math.floor(180 / (Math.PI / rad)) //将弧度转换成角度 + // 获得中心点和鼠标坐标连线，与y轴正半轴之间的夹角 + const x = Math.abs(originX - event.clientX); + const y = Math.abs(originY - event.clientY); + const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); + const cos = y / z; + const rad = Math.acos(cos); // 用反三角函数求弧度 + let angle = Math.floor(180 / (Math.PI / rad)); // 将弧度转换成角度 if (event.clientX > originX && event.clientY > originY) { - //鼠标在第四象限 - angle = 180 - angle + // 鼠标在第四象限 + angle = 180 - angle; } - if (event.clientX == originX && event.clientY > originY) { - //鼠标在y轴负方向上 - angle = 180 + if (event.clientX === originX && event.clientY > originY) { + // 鼠标在y轴负方向上 + angle = 180; } - if (event.clientX > originX && event.clientY == originY) { - //鼠标在x轴正方向上 - angle = 90 + if (event.clientX > originX && event.clientY === originY) { + // 鼠标在x轴正方向上 + angle = 90; } if (event.clientX < originX && event.clientY > originY) { - //鼠标在第三象限 - angle = 180 + angle + // 鼠标在第三象限 + angle = 180 + angle; } - if (event.clientX < originX && event.clientY == originY) { - //鼠标在x轴负方向 - angle = 270 + if (event.clientX < originX && event.clientY === originY) { + // 鼠标在x轴负方向 + angle = 270; } if (event.clientX < originX && event.clientY < originY) { - //鼠标在第二象限 - angle = 360 - angle + // 鼠标在第二象限 + angle = 360 - angle; } - return angle + return angle; } /** @@ -358,8 +358,8 @@ export class DOMUtils { parentElement?: HTMLElement ): E | null { if (parentElement) { - return parentElement.querySelector(selectors) + return parentElement.querySelector(selectors); } - return document.querySelector(selectors) + return document.querySelector(selectors); } }