@skhemata/skhemata-crowdfunding-campaign
Version:
Skhemata Crowdfunding Campaign Web Component. This web component provides crowdfunding campaign functionality (reward/donation based) for a website.
100 lines (98 loc) • 3.2 kB
JavaScript
import { __decorate } from "tslib";
/* eslint-disable no-restricted-syntax */
/* eslint-disable lit-a11y/anchor-is-valid */
/* eslint-disable lit-a11y/click-events-have-key-events */
/* eslint-disable import/no-extraneous-dependencies */
import { html, css, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { Bulma } from '@skhemata/skhemata-css';
import { Menu } from '../components/Menu';
import { GlobalStyles } from '../styles/global';
export class CampaignHeader extends LitElement {
constructor() {
super(...arguments);
this.openStatus = false;
// async firstUpdated() {}
this.handleRewardOpen = () => {
this.openStatus = !this.openStatus;
};
}
static get scopedElements() {
return {
'menu-component': Menu,
};
}
updated() {
this.getCampaignMainImage();
}
getCampaignMainImage() {
if (this.campaign && this.campaign.files) {
for (const key in this.campaign.files) {
if (this.campaign.files[key].region_id === 3) {
this.campaignMainImage = `${this.apiUrl}/image/campaign_detail_large/${this.campaign.files[key].path_external}`;
}
}
}
}
render() {
var _a, _b;
console.log(this.campaign);
return html `
<div class="campaign-info-container has-background-grey-dark py-6">
<div
class="campaign-info is-flex is-justify-content-center is-align-items-center"
>
<div class="image-box">
<figure class="image is-96x96 is-flex">
<img
class="is-rounded"
src="${this.campaignMainImage ||
'https://via.placeholder.com/300'}"
alt="campaign avatar"
/>
</figure>
</div>
<div class="ml-4 has-text-white">
<h1 class="is-size-3 titleFont pb-5">${(_a = this.campaign) === null || _a === void 0 ? void 0 : _a.name}</h1>
<h2 class="is-size-5">${(_b = this.campaign) === null || _b === void 0 ? void 0 : _b.blurb}</h2>
</div>
</div>
</div>
`;
}
}
CampaignHeader.styles = [
Bulma,
GlobalStyles,
css `
/* .cardReward {
max-width: 300px;
margin: 0 auto;
} */
.image-box img {
border: 3px solid #f5f5f5;
}
`,
];
__decorate([
property({ type: Boolean })
], CampaignHeader.prototype, "openStatus", void 0);
__decorate([
property({ type: Object })
], CampaignHeader.prototype, "campaign", void 0);
__decorate([
property({ type: String, attribute: 'api_url' })
], CampaignHeader.prototype, "apiUrl", void 0);
__decorate([
property({ type: String })
], CampaignHeader.prototype, "campaignMainImage", void 0);
__decorate([
property({ type: String })
], CampaignHeader.prototype, "apiFull", void 0);
__decorate([
property({ type: Boolean })
], CampaignHeader.prototype, "authState", void 0);
__decorate([
property({ type: Function })
], CampaignHeader.prototype, "handleAuthStateChange", void 0);
//# sourceMappingURL=CampaignHeader.js.map