flip-card-wc
Version:
Flip Card Web Component
3 lines (2 loc) • 4.78 kB
JavaScript
const i=document.createElement("template");i.innerHTML='\n<style>:host{display:block}.flip-card{position:relative;perspective:100rem}.flip-card,.flip-card__side{height:var(--flip-card-height,100px)}.flip-card__side{transition:all var(--flip-card-transition-duration,.8s) var(--flip-card-transition-timing-function,ease);position:absolute;top:0;left:0;width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--flip-card-border-radius,4px);overflow:hidden;box-shadow:var(--flip-card-box-shadow,0 15px 40px rgba(0,0,0,.15))}.flip-card__side--front{background-color:var(--flip-card-background-color-front,#fff)}.flip-card__side--back{background-color:var(--flip-card-background-color-back,#fff);transform:rotateY(180deg)}.flip-card:hover .flip-card__side--front.hover{transform:rotateY(-180deg)}.flip-card:hover .flip-card__side--back.hover{transform:rotateY(0)}.clicked--front{transform:rotateY(-180deg)}.clicked--back{transform:rotateY(0)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUNFLGFBQWdCLENBRWxCLFdBQ0UsaUJBQWtCLENBQ2xCLGtCQUN3QyxDQUN4Qyw0QkFEQSxvQ0FXNEUsQ0FWNUUsaUJBRUUsd0dBQTZHLENBQzdHLGlCQUFrQixDQUNsQixLQUFNLENBQ04sTUFBTyxDQUNQLFVBQVcsQ0FDWCxrQ0FBMkIsQ0FBM0IsMEJBQTJCLENBQzNCLGdEQUFrRCxDQUNsRCxlQUFnQixDQUNoQixrRUFBMEUsQ0FDMUUsd0JBQ0UsNkRBQWtFLENBQ3BFLHVCQUNFLDREQUErRCxDQUMvRCx5QkFBNEIsQ0FDaEMsK0NBQ0UsMEJBQTZCLENBQy9CLDhDQUNFLG9CQUF1QixDQUUzQixnQkFDRSwwQkFBNkIsQ0FFL0IsZUFDRSxvQkFBdUIiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOmhvc3Qge1xuICBkaXNwbGF5OiBibG9jazsgfVxuXG4uZmxpcC1jYXJkIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBwZXJzcGVjdGl2ZTogMTAwcmVtO1xuICBoZWlnaHQ6IHZhcigtLWZsaXAtY2FyZC1oZWlnaHQsIDEwMHB4KTsgfVxuICAuZmxpcC1jYXJkX19zaWRlIHtcbiAgICBoZWlnaHQ6IHZhcigtLWZsaXAtY2FyZC1oZWlnaHQsIDEwMHB4KTtcbiAgICB0cmFuc2l0aW9uOiBhbGwgdmFyKC0tZmxpcC1jYXJkLXRyYW5zaXRpb24tZHVyYXRpb24sIDgwMG1zKSB2YXIoLS1mbGlwLWNhcmQtdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb24sIGVhc2UpO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBiYWNrZmFjZS12aXNpYmlsaXR5OiBoaWRkZW47XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tZmxpcC1jYXJkLWJvcmRlci1yYWRpdXMsIDRweCk7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBib3gtc2hhZG93OiB2YXIoLS1mbGlwLWNhcmQtYm94LXNoYWRvdywgMCAxNXB4IDQwcHggcmdiYSgwLCAwLCAwLCAwLjE1KSk7IH1cbiAgICAuZmxpcC1jYXJkX19zaWRlLS1mcm9udCB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1mbGlwLWNhcmQtYmFja2dyb3VuZC1jb2xvci1mcm9udCwgd2hpdGUpOyB9XG4gICAgLmZsaXAtY2FyZF9fc2lkZS0tYmFjayB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1mbGlwLWNhcmQtYmFja2dyb3VuZC1jb2xvci1iYWNrLCB3aGl0ZSk7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZVkoMTgwZGVnKTsgfVxuICAuZmxpcC1jYXJkOmhvdmVyIC5mbGlwLWNhcmRfX3NpZGUtLWZyb250LmhvdmVyIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZVkoLTE4MGRlZyk7IH1cbiAgLmZsaXAtY2FyZDpob3ZlciAuZmxpcC1jYXJkX19zaWRlLS1iYWNrLmhvdmVyIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZVkoMCk7IH1cblxuLmNsaWNrZWQtLWZyb250IHtcbiAgdHJhbnNmb3JtOiByb3RhdGVZKC0xODBkZWcpOyB9XG5cbi5jbGlja2VkLS1iYWNrIHtcbiAgdHJhbnNmb3JtOiByb3RhdGVZKDApOyB9XG4iXX0= */</style>\n<div class="flip-card">\n <div class="flip-card__side flip-card__side--front">\n <div><slot name="front"></div>\n </div>\n <div class="flip-card__side flip-card__side--back">\n <div>\n <slot name="back">\n </div>\n </div>\n</div>\n\n';class t extends HTMLElement{constructor(){super(),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.appendChild(i.content.cloneNode(!0))}connectedCallback(){this.hasAttribute("variant")||(this.variant="hover"),this.attachEventListeners(),this._upgradeProperty("variant")}_upgradeProperty(i){if(this.hasOwnProperty(i)){let t=this[i];delete this[i],this[i]=t}}static get observedAttributes(){return["variant"]}attributeChangedCallback(i,t,a){t!==a&&this.attachEventListeners()}get variant(){return this.getAttribute("variant")}set variant(i){i&&this.setAttribute("variant",i)}attachEventListeners(){const i=this._shadowRoot.querySelector(".flip-card__side--front"),t=this._shadowRoot.querySelector(".flip-card__side--back");"click"===this.variant&&(i&&(i.style.cursor="pointer"),t&&(t.style.cursor="pointer"),null==i||i.classList.remove("hover"),null==t||t.classList.remove("hover"),null==i||i.addEventListener("click",(function(a){null==i||i.classList.add("clicked--front"),null==t||t.classList.add("clicked--back")})),null==t||t.addEventListener("click",(function(a){null==i||i.classList.remove("clicked--front"),null==t||t.classList.remove("clicked--back")}))),"hover"===this.variant&&(null==i||i.classList.add("hover"),null==i||i.classList.remove("clicked--front"),null==t||t.classList.add("hover"),null==t||t.classList.remove("clicked--back"))}}window.customElements.define("flip-card",t);
//# sourceMappingURL=flip-card-wc.min.js.map