76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
// Written by retoor@molodetz.nl
|
|
|
|
// This JavaScript class defines a custom HTML element <fancy-button>, which creates a styled, clickable button element with customizable size, text, and URL redirect functionality.
|
|
|
|
// MIT License
|
|
|
|
class FancyButton extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this.url = null;
|
|
this.type = "button";
|
|
this.value = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.container = document.createElement("span");
|
|
let size = this.getAttribute("size");
|
|
console.info({ GG: size });
|
|
size = size === "auto" ? "1%" : "33%";
|
|
|
|
this.styleElement = document.createElement("style");
|
|
this.styleElement.innerHTML = `
|
|
:root {
|
|
width: 100%;
|
|
--width: 100%;
|
|
}
|
|
button {
|
|
width: var(--width);
|
|
min-width: ${size};
|
|
padding: 10px;
|
|
background-color: #f05a28;
|
|
border: none;
|
|
border-radius: 5px;
|
|
color: white;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
border: 1px solid #f05a28;
|
|
}
|
|
button:hover {
|
|
color: #EFEFEF;
|
|
background-color: #e04924;
|
|
border: 1px solid #efefef;
|
|
}
|
|
`;
|
|
|
|
this.container.appendChild(this.styleElement);
|
|
this.buttonElement = document.createElement("button");
|
|
this.container.appendChild(this.buttonElement);
|
|
this.shadowRoot.appendChild(this.container);
|
|
|
|
this.url = this.getAttribute("url");
|
|
|
|
this.value = this.getAttribute("value");
|
|
this.buttonElement.appendChild(
|
|
document.createTextNode(this.getAttribute("text")),
|
|
);
|
|
this.buttonElement.addEventListener("click", () => {
|
|
if (this.url == "submit") {
|
|
this.closest("form").submit();
|
|
return;
|
|
}
|
|
|
|
if (this.url === "/back" || this.url === "/back/") {
|
|
window.history.back();
|
|
} else if (this.url) {
|
|
window.location = this.url;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define("fancy-button", FancyButton);
|