From 37dde3aaaabdf4da9ed213453e27b59a82fa1180 Mon Sep 17 00:00:00 2001 From: GuoJikun Date: Thu, 1 Dec 2022 17:34:06 +0800 Subject: [PATCH] =?UTF-8?q?WIP:=20=E4=BC=98=E5=8C=96=E8=BD=AE=E6=92=AD?= =?UTF-8?q?=E5=9B=BE=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ivy-carousel/ivy-carousel.css | 2 +- .../components/ivy-carousel/ivy-carousel.tsx | 87 ++++++++++--------- components/src/index.html | 33 +++---- components/src/utils/utils.ts | 58 ++++++++++++- 4 files changed, 114 insertions(+), 66 deletions(-) diff --git a/components/src/components/ivy-carousel/ivy-carousel.css b/components/src/components/ivy-carousel/ivy-carousel.css index 44486ca..74ac9b3 100644 --- a/components/src/components/ivy-carousel/ivy-carousel.css +++ b/components/src/components/ivy-carousel/ivy-carousel.css @@ -32,6 +32,6 @@ cursor: pointer; } -.indicator-item[active] { +.indicator-item[data-active] { background-color: #409eff; } diff --git a/components/src/components/ivy-carousel/ivy-carousel.tsx b/components/src/components/ivy-carousel/ivy-carousel.tsx index e403e88..fb7cb07 100644 --- a/components/src/components/ivy-carousel/ivy-carousel.tsx +++ b/components/src/components/ivy-carousel/ivy-carousel.tsx @@ -1,5 +1,5 @@ -import { Component, Host, h, Element, State, Prop, Watch } from '@stencil/core'; -import { getBrotherElements } from '../../utils/utils'; +import { Component, Host, h, Element, State, Prop, Watch, writeTask } from '@stencil/core'; +import { findElementsDownward, getBrotherElements } from '../../utils/utils'; @Component({ tag: 'ivy-carousel', @@ -8,6 +8,9 @@ import { getBrotherElements } from '../../utils/utils'; }) export class IvyCarousel { @Element() root: HTMLElement; + @State() slotEl: Element; + + @State() slotChildren: HTMLElement[] = []; @State() carouselItemList: NodeListOf; @@ -26,15 +29,15 @@ export class IvyCarousel { const className = target.getAttribute('class'); console.log(nodeName, className); if (nodeName === 'A' && className === 'indicator-item') { - const index = target.getAttribute('index'); + const index = target.getAttribute('data-index'); const wrap = this.root.shadowRoot.querySelector('.wrap'); const children = wrap.children; console.log(wrap, index, children); (wrap as any).style.transform = `translateX(-${(Number(index) / children.length) * 100}%)`; - target.setAttribute('active', ''); + target.setAttribute('data-active', ''); const itemList = getBrotherElements(target); itemList.forEach(c => { - c.removeAttribute('active'); + c.removeAttribute('data-active'); }); } } @@ -44,52 +47,54 @@ export class IvyCarousel {
- + (this.slotEl = el)}>
-
+
+ {this.slotChildren.map((_c, i) => { + if (Number(this.defaultActive) == i + 1) { + return ; + } else { + return ; + } + })} +
); } - componentDidLoad() { - const carouselItemList = this.root.querySelectorAll('ivy-carousel-item'); - const len = carouselItemList.length; - const firstChild: any = carouselItemList.item(0).cloneNode(true); - const lastChild: any = carouselItemList.item(len - 1).cloneNode(true); - console.log(carouselItemList, firstChild, lastChild); - const tmpBox = document.createElement('div'); - const itemFlex = (1 / (len + 2)) * 100; - firstChild.style.flex = `0 0 ${itemFlex}%`; - lastChild.style.flex = `0 0 ${itemFlex}%`; - tmpBox.appendChild(firstChild); - carouselItemList.forEach(c => { - c.style.flex = `0 0 ${itemFlex}%`; - tmpBox.appendChild(c); - }); - - tmpBox.appendChild(lastChild); - const wrap = this.root.shadowRoot.querySelector('.wrap'); - if (wrap) { - (wrap as any).style.width = `${(carouselItemList.length + 2) * 100}%`; - wrap.innerHTML = tmpBox.innerHTML; - (wrap as any).style.transform = `translateX(-${(Number(this.defaultActive) / (len + 2)) * 100}%)`; - } + componentWillLoad() { + writeTask(() => { + this.slotChildren = findElementsDownward(this.root, 'ivy-carousel-item'); + // this.slotChildren.forEach(c => { + // console.log(c.assignedSlot); + // }); + // const tmp = (this.slotEl as any).assignedElements(); + // console.log(tmp); + const carouselItemList = this.root.querySelectorAll('ivy-carousel-item'); + const len = carouselItemList.length; + const firstChild: any = carouselItemList.item(0).cloneNode(true); + const lastChild: any = carouselItemList.item(len - 1).cloneNode(true); + const tmpBox = document.createElement('div'); + const itemFlex = (1 / (len + 2)) * 100; + firstChild.style.flex = `0 0 ${itemFlex}%`; + lastChild.style.flex = `0 0 ${itemFlex}%`; + tmpBox.appendChild(firstChild); + carouselItemList.forEach(c => { + c.style.flex = `0 0 ${itemFlex}%`; + tmpBox.appendChild(c); + }); - const indicatorDefault = this.root.shadowRoot.querySelector('.indicator-default'); - if (indicatorDefault) { - let str = ''; - for (let i = 0; i < len; i++) { - if (Number(this.defaultActive) == i + 1) { - str += ``; - } else { - str += ``; - } + tmpBox.appendChild(lastChild); + const wrap = this.root.shadowRoot.querySelector('.wrap'); + if (wrap) { + (wrap as any).style.width = `${(carouselItemList.length + 2) * 100}%`; + wrap.innerHTML = tmpBox.innerHTML; + (wrap as any).style.transform = `translateX(-${(Number(this.defaultActive) / (len + 2)) * 100}%)`; } - indicatorDefault.innerHTML = str; - } + }); } } diff --git a/components/src/index.html b/components/src/index.html index 001234c..9b6a39d 100644 --- a/components/src/index.html +++ b/components/src/index.html @@ -54,27 +54,19 @@
- 更改进度条进度
-
- - - - +
+ +
+ + 1 + 2 + 3 + 4 +
-
- - - - -
-
- - - - -
+ diff --git a/components/src/utils/utils.ts b/components/src/utils/utils.ts index 9d0e4fa..0d2ce51 100644 --- a/components/src/utils/utils.ts +++ b/components/src/utils/utils.ts @@ -1,5 +1,10 @@ -export function format(first: string, middle: string, last: string): string { - return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''); +export type ScrollElement = HTMLElement | Window; + +const defaultRoot = window; + +function isElement(node: Element) { + const ELEMENT_NODE_TYPE = 1; + return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE; } /** @@ -152,6 +157,20 @@ export const findBrothersElements = (self: HTMLElement, nodeName: string, except return res; }; +/** + * 获取slot的子元素 + * @param slot slot 元素 + * @param tag 筛选的元素名称 + * @returns + */ +export const getAssignedElements = (slot: HTMLSlotElement, tag?: string) => { + const tmp = slot.assignedElements(); + if (tag) { + return tmp.filter(c => c.tagName.toLowerCase() === tag); + } + return tmp; +}; + /** * 颜色叠加 * @param {String} c1 颜色1-HEX格式 @@ -175,3 +194,38 @@ export const colorBlend = (c1: string, c2: string, ratio: number): string => { b = '' + (b || 0).toString(16); return `#${r}${g}${b}`; }; + +export const throttle = (func: Function, delay = 0, atLeast: number = 200) => { + let timer: any = null; + let lastRun = 0; + return (...args: any) => { + const now = +new Date(); + if (timer) { + clearTimeout(timer); + } + if (now - lastRun > atLeast) { + lastRun = now; + func.apply(this, args); + } else { + timer = setTimeout(() => { + func.apply(this, args); + }, delay); + } + }; +}; + +const overflowScrollReg = /scroll|auto/i; +// 获取滚动的父元素 +export function getScrollParent(el: Element, root: ScrollElement | undefined = defaultRoot) { + let node = el; + + while (node && node !== root && isElement(node)) { + const { overflowY } = window.getComputedStyle(node); + if (overflowScrollReg.test(overflowY)) { + return node; + } + node = node.parentNode as Element; + } + + return root; +} -- GitLab