Skip to content

Commit

Permalink
[duoyun-ui] Improve <dy-carousel>
Browse files Browse the repository at this point in the history
  • Loading branch information
mantou132 committed Dec 22, 2023
1 parent 6131b52 commit f6a72a8
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 34 deletions.
12 changes: 10 additions & 2 deletions packages/duoyun-ui/docs/en/02-elements/carousel.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,22 @@
"style": "width: 100%; color: white;",
"items": [
{
"img": "https://picsum.photos/800/600?grayscale",
"img": "https://picsum.photos/id/23/800/600?grayscale",
"title": "Title 1",
"background": "gray",
"description": "This is description section 1"
},
{
"img": "https://picsum.photos/800/601?grayscale",
"img": "https://picsum.photos/id/43/800/600?grayscale",
"title": "Title 2",
"background": "#dfdfdf",
"description": "This is description section 2"
},
{
"img": "https://picsum.photos/id/63/800/600?grayscale",
"title": "Title 3",
"background": "#dfdfdf",
"description": "This is description section 3"
}
]
}
Expand Down
12 changes: 10 additions & 2 deletions packages/duoyun-ui/docs/zh/02-elements/carousel.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,22 @@
"style": "width: 100%; color: white;",
"items": [
{
"img": "https://picsum.photos/800/600?grayscale",
"img": "https://picsum.photos/id/23/800/600?grayscale",
"title": "Title 1",
"background": "gray",
"description": "This is description section 1"
},
{
"img": "https://picsum.photos/800/601?grayscale",
"img": "https://picsum.photos/id/43/800/600?grayscale",
"title": "Title 2",
"background": "#dfdfdf",
"description": "This is description section 2"
},
{
"img": "https://picsum.photos/id/63/800/600?grayscale",
"title": "Title 3",
"background": "#dfdfdf",
"description": "This is description section 3"
}
]
}
Expand Down
49 changes: 27 additions & 22 deletions packages/duoyun-ui/src/elements/carousel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ const style = createCSSSheet(css`
aspect-ratio: 20 / 7;
position: relative;
color: ${theme.highlightColor};
/** use prevImg */
background-size: cover;
background-position: center;
}
.list,
.item,
Expand All @@ -49,10 +52,6 @@ const style = createCSSSheet(css`
.img {
position: absolute;
object-fit: cover;
--mask-range: 35%;
--m: linear-gradient(to right top, transparent, black var(--mask-range));
-webkit-mask-image: var(--m);
mask-image: var(--m);
}
.content {
position: absolute;
Expand All @@ -63,7 +62,6 @@ const style = createCSSSheet(css`
inset: 0;
padding-inline: 4em;
max-width: 35%;
opacity: 0;
animation-duration: 1.3s;
}
.img,
Expand All @@ -75,13 +73,10 @@ const style = createCSSSheet(css`
animation-direction: reverse;
}
@keyframes fadeIn {
0% {
from {
opacity: 0;
transform: translateX(calc(var(--direction) * 3em));
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.tag {
font-style: italic;
Expand Down Expand Up @@ -206,7 +201,6 @@ export class DuoyunCarouselElement extends GemElement<State> {
this.#clearTimer();
this.#timer = window.setTimeout(async () => {
await this.#waitLeave;
this.#isFirstRender = false;
this.#add(1);
}, this.#interval);
};
Expand All @@ -230,6 +224,19 @@ export class DuoyunCarouselElement extends GemElement<State> {
}
};

#prevImg?: string;
willMount() {
this.memo(
(_, oldDeps) => {
if (oldDeps) {
this.#prevImg = this.#items?.[oldDeps[0]]?.img;
this.#isFirstRender = false;
}
},
() => [this.state.currentIndex],
);
}

mounted = () => {
this.#reset();
this.effect(
Expand All @@ -245,19 +252,16 @@ export class DuoyunCarouselElement extends GemElement<State> {

render = () => {
const { currentIndex, direction } = this.state;

return html`
<style>
:host {
background-image: ${this.#prevImg ? `url(${this.#prevImg})` : 'none'};
}
</style>
<ul class="list" role="region">
${this.#items?.map(
({ img, background = 'none', title, description, action, tag, onClick }, index) => html`
${currentIndex === index
? html`
<style>
:host {
background: ${background};
}
</style>
`
: ''}
({ img, title, background, description, action, tag, onClick }, index) => html`
<li
class=${classMap({ item: true, paused: this.#isFirstRender })}
style=${styleMap({ '--direction': `${direction}` })}
Expand All @@ -267,6 +271,7 @@ export class DuoyunCarouselElement extends GemElement<State> {
<img
part=${DuoyunCarouselElement.img}
class="img"
style=${styleMap({ background })}
alt=${title || ''}
src=${img}
crossorigin=${this.crossorigin}
Expand Down Expand Up @@ -326,7 +331,7 @@ export class DuoyunCarouselElement extends GemElement<State> {
};

jump = (index: number) => {
this.setState({ currentIndex: index, direction: 1 });
this.setState({ currentIndex: index, direction: index > this.state.currentIndex ? 1 : -1 });
this.#reset();
};
}
12 changes: 8 additions & 4 deletions packages/duoyun-ui/src/elements/modal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ import './button';
import './divider';

const style = createCSSSheet(css`
/* modal 可能会在刷新前后保持打开 */
:host {
view-transition-name: dy-modal;
position: fixed;
z-index: ${theme.popupZIndex};
top: env(titlebar-area-height, var(--titlebar-area-height, 0px));
Expand Down Expand Up @@ -259,7 +261,7 @@ export class DuoyunModalElement extends GemElement {

willMount = () => {
this.memo(
() => (this.closing = !this.open),
(_, oldDeps) => oldDeps && (this.closing = !this.open),
() => [this.open],
);
};
Expand All @@ -268,11 +270,13 @@ export class DuoyunModalElement extends GemElement {

mounted = () => {
this.effect(
() => {
async () => {
if (this.open) {
!this.shadowRoot?.activeElement && this.focus();
} else {
this.#closeAnimate().finished.then(() => (this.closing = false));
} else if (this.closing) {
await this.#closeAnimate().finished;
this.closing = false;
this.update();
}
},
() => [this.open],
Expand Down
7 changes: 3 additions & 4 deletions packages/gem/src/lib/element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
* @helper
* 记录副作用回调和值,在 `constructor`/`mounted` 中使用
* 回调到返回值如果是函数将再卸载时执行
* 第一次执行时 `oldDeps` 为空
*
* ```js
* class App extends GemElement {
Expand All @@ -234,7 +235,6 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
const effectItem: EffectItem<T> = {
callback,
getDep,
values: undefined,
initialized: this.#isMounted,
inConstructor: (this as any)[constructorSymbol],
};
Expand All @@ -248,7 +248,8 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen

/**
* @helper
* 在 `render` 前执行回调,和 `effect` 一样接受依赖数组参数,在 `constructor`/`willMount` 中使用
* 在 `render` 前执行回调,和 `effect` 一样接受依赖数组参数,在 `constructor`/`willMount` 中使用;
* 第一次执行时 `oldDeps` 为空
*
* ```js
* class App extends GemElement {
Expand All @@ -265,8 +266,6 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
this.#memoList.push({
callback,
getDep,
// 这里为什么跟 effect 不同???
values: [Symbol()],
inConstructor: (this as any)[constructorSymbol],
});
};
Expand Down

0 comments on commit f6a72a8

Please sign in to comment.