duoyun-ui/elements/carousel.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _DuoyunCarouselElement_instances, _DuoyunCarouselElement_interval_get, _DuoyunCarouselElement_add, _DuoyunCarouselElement_timer, _DuoyunCarouselElement_isFirstRender, _DuoyunCarouselElement_waitLeave, _DuoyunCarouselElement_reset, _DuoyunCarouselElement_oMouseEnter, _DuoyunCarouselElement_clearTimer, _DuoyunCarouselElement_pageVisibleChange;
var DuoyunCarouselElement_1;
import { GemElement, html } from '@mantou/gem/lib/element';
import { adoptedStyle, customElement, property, numattribute, attribute, part, emitter, } from '@mantou/gem/lib/decorators';
import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { icons } from '../lib/icons';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import './use';
import './heading';
import './paragraph';
import './button';
import './more';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: block;
    width: 100%;
    aspect-ratio: 20 / 7;
    position: relative;
    color: ${theme.highlightColor};
  }
  .list,
  .item,
  .img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .item {
    list-style: none;
    position: relative;
    overflow: hidden;
  }
  [inert] {
    display: none;
  }
  .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;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    inset: 0;
    padding-inline: 4em;
    max-width: 35%;
    opacity: 0;
    animation-duration: 1.3s;
  }
  .img,
  .content {
    animation: fadeIn ${theme.timingEasingFunction} 0.667s both;
  }
  .paused :where(.img, .content) {
    animation-play-state: paused;
    animation-direction: reverse;
  }
  @keyframes fadeIn {
    0% {
      transform: translateX(calc(var(--direction) * 3em));
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  .tag {
    font-style: italic;
    padding: 0.2em 0.3em;
    margin-block-end: 0.5em;
    background: yellow;
    color: black;
  }
  .heading {
    margin-block-start: 0;
  }
  .item,
  .heading,
  .paragraph {
    color: inherit;
  }
  .action {
    font-weight: bold;
  }
  .forward {
    width: 1.2em;
  }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5em;
    display: flex;
    justify-content: center;
  }
  .circle {
    width: 0.5em;
    padding: 0.2em;
  }
  .circle::before {
    transform: scale(0.99);
    content: '';
    color: ${theme.highlightColor};
    display: block;
    aspect-ratio: 1;
    border: 1px solid;
    border-radius: 10em;
  }
  .circle:where(:hover)::before {
    background: ${theme.describeColor};
  }
  .current::before {
    background: currentColor;
  }
`);
/**
 * @customElement dy-carousel
 */
let DuoyunCarouselElement = DuoyunCarouselElement_1 = class DuoyunCarouselElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunCarouselElement_instances.add(this);
        this.state = {
            currentIndex: 0,
            direction: 1,
        };
        _DuoyunCarouselElement_add.set(this, (direction) => {
            var _a;
            const total = (_a = this.data) === null || _a === void 0 ? void 0 : _a.length;
            if (!total)
                return;
            this.setState({ currentIndex: (total + this.state.currentIndex + direction) % total, direction });
            __classPrivateFieldGet(this, _DuoyunCarouselElement_reset, "f").call(this);
        });
        _DuoyunCarouselElement_timer.set(this, 0);
        _DuoyunCarouselElement_isFirstRender.set(this, true);
        _DuoyunCarouselElement_waitLeave.set(this, Promise.resolve());
        _DuoyunCarouselElement_reset.set(this, () => {
            __classPrivateFieldGet(this, _DuoyunCarouselElement_clearTimer, "f").call(this);
            __classPrivateFieldSet(this, _DuoyunCarouselElement_timer, window.setTimeout(async () => {
                await __classPrivateFieldGet(this, _DuoyunCarouselElement_waitLeave, "f");
                __classPrivateFieldSet(this, _DuoyunCarouselElement_isFirstRender, false, "f");
                __classPrivateFieldGet(this, _DuoyunCarouselElement_add, "f").call(this, 1);
            }, __classPrivateFieldGet(this, _DuoyunCarouselElement_instances, "a", _DuoyunCarouselElement_interval_get)), "f");
        });
        _DuoyunCarouselElement_oMouseEnter.set(this, (evt) => {
            __classPrivateFieldSet(this, _DuoyunCarouselElement_waitLeave, new Promise((res) => {
                var _a;
                return (_a = evt.target) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseleave', () => res(), {
                    once: true,
                });
            }), "f");
        });
        _DuoyunCarouselElement_clearTimer.set(this, () => clearTimeout(__classPrivateFieldGet(this, _DuoyunCarouselElement_timer, "f")));
        _DuoyunCarouselElement_pageVisibleChange.set(this, () => {
            if (document.visibilityState === 'visible') {
                __classPrivateFieldGet(this, _DuoyunCarouselElement_reset, "f").call(this);
            }
            else {
                __classPrivateFieldGet(this, _DuoyunCarouselElement_clearTimer, "f").call(this);
            }
        });
        this.mounted = () => {
            __classPrivateFieldGet(this, _DuoyunCarouselElement_reset, "f").call(this);
            this.effect(() => this.change(this.state.currentIndex), () => [this.state.currentIndex]);
            document.addEventListener('visibilitychange', __classPrivateFieldGet(this, _DuoyunCarouselElement_pageVisibleChange, "f"));
            return () => {
                document.removeEventListener('visibilitychange', __classPrivateFieldGet(this, _DuoyunCarouselElement_pageVisibleChange, "f"));
                __classPrivateFieldGet(this, _DuoyunCarouselElement_clearTimer, "f").call(this);
            };
        };
        this.render = () => {
            var _a, _b;
            const { currentIndex, direction } = this.state;
            return html `
      <ul class="list" role="region">
        ${(_a = this.data) === null || _a === void 0 ? void 0 : _a.map(({ img, background = 'none', title, description, action, tag, onClick }, index) => html `
            ${currentIndex === index
                ? html `
                  <style>
                    :host {
                      background: ${background};
                    }
                  </style>
                `
                : ''}
            <li
              class=${classMap({ item: true, paused: __classPrivateFieldGet(this, _DuoyunCarouselElement_isFirstRender, "f") })}
              style=${styleMap({ '--direction': `${direction}` })}
              ?inert=${currentIndex !== index}
              @click=${onClick}
            >
              <img
                part=${DuoyunCarouselElement_1.img}
                class="img"
                alt=${title || ''}
                src=${img}
                crossorigin=${this.crossorigin}
              />
              <div class="content" part=${DuoyunCarouselElement_1.content} @mouseenter=${__classPrivateFieldGet(this, _DuoyunCarouselElement_oMouseEnter, "f")}>
                ${tag ? html `<div part=${DuoyunCarouselElement_1.tag} class="tag">${tag}</div>` : ''}
                <dy-heading part=${DuoyunCarouselElement_1.title} class="heading" lv="2">${title}</dy-heading>
                <dy-more expandless>
                  <dy-paragraph part=${DuoyunCarouselElement_1.description} class="paragraph">
                    ${description}
                  </dy-paragraph>
                </dy-more>
                ${action
                ? html `
                      <dy-button
                        class="action"
                        part=${DuoyunCarouselElement_1.button}
                        @click=${(evt) => {
                    if (action.handle) {
                        evt.stopPropagation();
                        action.handle();
                    }
                }}
                      >
                        ${action.text}
                        <dy-use class="forward" .element=${icons.forward}></dy-use>
                      </dy-button>
                    `
                : ''}
              </div>
            </li>
          `)}
      </ul>
      <div part=${DuoyunCarouselElement_1.nav} class="nav">
        ${(_b = this.data) === null || _b === void 0 ? void 0 : _b.map((_, index) => html `
            <div
              tabindex="0"
              role="button"
              @keydown=${commonHandle}
              @click=${() => this.jump(index)}
              class=${classMap({ circle: true, current: index === currentIndex })}
            ></div>
          `)}
      </div>
    `;
        };
        this.next = () => {
            __classPrivateFieldGet(this, _DuoyunCarouselElement_add, "f").call(this, 1);
        };
        this.prev = () => {
            __classPrivateFieldGet(this, _DuoyunCarouselElement_add, "f").call(this, -1);
        };
        this.jump = (index) => {
            this.setState({ currentIndex: index, direction: 1 });
            __classPrivateFieldGet(this, _DuoyunCarouselElement_reset, "f").call(this);
        };
    }
};
_DuoyunCarouselElement_add = new WeakMap(), _DuoyunCarouselElement_timer = new WeakMap(), _DuoyunCarouselElement_isFirstRender = new WeakMap(), _DuoyunCarouselElement_waitLeave = new WeakMap(), _DuoyunCarouselElement_reset = new WeakMap(), _DuoyunCarouselElement_oMouseEnter = new WeakMap(), _DuoyunCarouselElement_clearTimer = new WeakMap(), _DuoyunCarouselElement_pageVisibleChange = new WeakMap(), _DuoyunCarouselElement_instances = new WeakSet(), _DuoyunCarouselElement_interval_get = function _DuoyunCarouselElement_interval_get() {
    return this.interval || 3000;
};
__decorate([
    attribute
], DuoyunCarouselElement.prototype, "crossorigin", void 0);
__decorate([
    numattribute
], DuoyunCarouselElement.prototype, "interval", void 0);
__decorate([
    emitter
], DuoyunCarouselElement.prototype, "change", void 0);
__decorate([
    property
], DuoyunCarouselElement.prototype, "data", void 0);
__decorate([
    part
], DuoyunCarouselElement, "img", void 0);
__decorate([
    part
], DuoyunCarouselElement, "title", void 0);
__decorate([
    part
], DuoyunCarouselElement, "tag", void 0);
__decorate([
    part
], DuoyunCarouselElement, "content", void 0);
__decorate([
    part
], DuoyunCarouselElement, "button", void 0);
__decorate([
    part
], DuoyunCarouselElement, "description", void 0);
__decorate([
    part
], DuoyunCarouselElement, "nav", void 0);
DuoyunCarouselElement = DuoyunCarouselElement_1 = __decorate([
    customElement('dy-carousel'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunCarouselElement);
export { DuoyunCarouselElement };
//# sourceMappingURL=carousel.js.map