75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
/**
|
|
* EasyCard Component
|
|
* <easy-card title="Card Title">
|
|
* <p>Put any content here: text, images, lists, etc.</p>
|
|
* </easy-card>
|
|
*/
|
|
|
|
class EasyCard extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
const shadow = this.attachShadow({mode: 'open'});
|
|
|
|
// Create card container
|
|
this.card = document.createElement('div');
|
|
this.card.classList.add('easy-card');
|
|
|
|
// Create content container
|
|
this.content = document.createElement('div');
|
|
this.content.classList.add('easy-card-content');
|
|
|
|
// Styles
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.easy-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
font-family: Arial, sans-serif;
|
|
max-width: 400px;
|
|
margin: 8px 0;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.easy-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
|
|
}
|
|
.easy-card-title {
|
|
margin: 0 0 8px 0;
|
|
font-size: 1.2em;
|
|
color: #333;
|
|
}
|
|
.easy-card-content {
|
|
font-size: 1em;
|
|
color: #555;
|
|
}
|
|
`;
|
|
|
|
shadow.appendChild(style);
|
|
shadow.appendChild(this.card);
|
|
}
|
|
|
|
connectedCallback() {
|
|
// Add title if provided
|
|
const titleText = this.getAttribute('title');
|
|
if (titleText) {
|
|
const title = document.createElement('h3');
|
|
title.classList.add('easy-card-title');
|
|
title.textContent = titleText;
|
|
this.card.appendChild(title);
|
|
}
|
|
|
|
// Move all light DOM content to the shadow DOM content container
|
|
const contentNodes = Array.from(this.childNodes);
|
|
contentNodes.forEach(node => {
|
|
this.content.appendChild(node.cloneNode(true));
|
|
});
|
|
|
|
this.card.appendChild(this.content);
|
|
}
|
|
}
|
|
|
|
customElements.define('easy-card', EasyCard);
|