poe-custom-elements
Version:
Path of Exile custom elements
182 lines (180 loc) • 6.75 kB
JavaScript
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 __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { classMap } from 'lit/directives/class-map.js';
import { html, nothing, LitElement } from 'lit';
import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
import { customElement, property, state } from 'lit/decorators.js';
import { cardElementData } from './data.js';
import { styles } from './divination-card.styles.js';
import { basePath } from '../../lib/base_path.js';
/**
* @summary Divination Card
* @cssproperty --padding-inline - The inline padding to use for for element.
* @cssproperty --padding-block - The block padding to use for for element.
* @event navigate Event - Emits when on click of one of link elements.
*/
let DivinationCardElement = class DivinationCardElement extends LitElement {
constructor() {
super(...arguments);
this.name = '';
this.size = 'medium';
this.baseUrl = 'https://divicards-site.pages.dev';
this.href = '';
this.hrefPattern = '{{base}}/card/{{slug}}';
this.stackSize = 0;
this.flavourText = ``;
this.artFilename = '';
this.rewardHtml = '';
this.dropLevel = '';
this.slug = '';
}
#parseHrefPattern() {
return this.hrefPattern.replaceAll('{{base}}', this.baseUrl).replaceAll('{{slug}}', this.slug);
}
#getHref() {
if (this.href) {
return this.href;
}
return this.#parseHrefPattern();
}
willUpdate(changedProperties) {
this.style.setProperty('--divination-card-background-url', `url(${basePath()}/divination-card/cards/avif/divination-card.avif)`);
if (changedProperties.has('name')) {
const name = this.name === 'Fire of Unknown Origin' ? 'Fire Of Unknown Origin' : this.name;
const cardData = cardElementData.find(card => card.name === name);
if (cardData) {
this.stackSize = cardData.stackSize ?? 1;
this.flavourText = cardData.flavourText;
this.artFilename = cardData.artFilename;
this.rewardHtml = cardData.rewardHtml;
this.dropLevel = cardData.dropLevel.label;
this.slug = cardData.slug;
}
}
}
render() {
const href = this.#getHref();
return html `<div class="element">
<div
class=${classMap({
'divination-card': true,
[`divination-card--${this.size}`]: true,
})}
>
<a .ariaLabel=${this.name} class="link" =${this.#dispatchNavigate} href=${href}></a>
<div class="skeleton"></div>
<header
class=${classMap({
name: true,
[`name--${this.size}`]: true,
})}
>
<a =${this.#dispatchNavigate} href=${href}> ${this.name} </a>
</header>
<div class="imageWrapper">
<a .ariaLabel=${this.name} =${this.#dispatchNavigate} href=${href}>
<img
loading="lazy"
class="image"
width="100%"
src=${imageurl(this.artFilename)}
alt="card's image"
/>
</a>
</div>
<div
class=${classMap({
stackSize: true,
[`stackSize--${this.size}`]: this.size,
})}
>
${this.stackSize}
</div>
<div class="${classMap({ 'bottom-half': true, size25: this.size === 'small' })}">
${staticHtml `${unsafeStatic(this.rewardHtml)}`}
<div class="divider"></div>
<footer>
<p class="flavourText">${this.flavourText}</p>
</footer>
</div>
<div title="drop level" class="min-level">${this.dropLevel}</div>
<div class="boss">
<slot name="boss"> ${this.boss ? html `${this.boss}` : nothing} </slot>
</div>
</div>
</div>`;
}
#dispatchNavigate() {
this.dispatchEvent(new Event('navigate'));
}
static { this.styles = styles; }
};
__decorate([
property({ reflect: true }),
__metadata("design:type", String)
], DivinationCardElement.prototype, "name", void 0);
__decorate([
property({ reflect: true }),
__metadata("design:type", String)
], DivinationCardElement.prototype, "size", void 0);
__decorate([
property({ reflect: true }),
__metadata("design:type", String)
], DivinationCardElement.prototype, "boss", void 0);
__decorate([
property({ attribute: 'base-url' }),
__metadata("design:type", Object)
], DivinationCardElement.prototype, "baseUrl", void 0);
__decorate([
property({ reflect: true }),
__metadata("design:type", Object)
], DivinationCardElement.prototype, "href", void 0);
__decorate([
property({ reflect: true, attribute: 'href-pattern' }),
__metadata("design:type", Object)
], DivinationCardElement.prototype, "hrefPattern", void 0);
__decorate([
state(),
__metadata("design:type", Number)
], DivinationCardElement.prototype, "stackSize", void 0);
__decorate([
state(),
__metadata("design:type", Object)
], DivinationCardElement.prototype, "flavourText", void 0);
__decorate([
state(),
__metadata("design:type", Object)
], DivinationCardElement.prototype, "artFilename", void 0);
__decorate([
state(),
__metadata("design:type", Object)
], DivinationCardElement.prototype, "rewardHtml", void 0);
__decorate([
state(),
__metadata("design:type", Object)
], DivinationCardElement.prototype, "dropLevel", void 0);
__decorate([
state(),
__metadata("design:type", Object)
], DivinationCardElement.prototype, "slug", void 0);
DivinationCardElement = __decorate([
customElement('poe-divination-card')
], DivinationCardElement);
export { DivinationCardElement };
export const CARD_SIZE_VARIANTS = ['50', '75', 'small', 'medium', 'large'];
function imageurl(artFilename) {
if (!artFilename) {
// console.warn(`Divination Card. No artFilename ${this.name}`);
return '';
}
return `${basePath()}/divination-card/cards/avif/${artFilename}.avif`;
// return `https://web.poecdn.com/image/divination-card/${artFilename}.png`;
}
//# sourceMappingURL=poe-divination-card.js.map