$w.onReady(function () {
//DEFINE ACTIVE AND INACTIVE BUTTON COLORS 🤩
const blackColor = "#000000";
const textColorActive = "#FFFFFF";
const whiteColor = "#FFFFFF";
const textColorInactive = "#000000";
//ONCLICK FUNCTIONS FOR EACH BUTTONS. CHANGE STATE ✨
$w('#firstButton').onClick(() => {
$w('#stateElementId').changeState("firstState");
});
$w('#secondButton').onClick(() => {
$w('#stateElementId').changeState("secondState");
});
$w('#thirdButton').onClick(() => {
$w('#stateElementId').changeState("thirdState");
});
$w('#fourthButton').onClick(() => {
$w('#stateElementId').changeState("fourthState");
});
//CHANGE BUTTON COLORS IF THEY ARE ACTIVE OR NOT 🎉
$w("#stateElementId").onChange((event) => {
const buttonNames = ["first", "second", "third", "fourth"];
buttonNames.forEach(buttonName => {
let button = $w("#" + buttonName + "Button");
let state = buttonName + "State";
let line = $w("#" + buttonName + "Line");
if (event.target.currentState.id === state) {
button.style.backgroundColor = blackColor;
button.style.color = textColorActive;
line.show();
} else {
button.style.backgroundColor = whiteColor;
button.style.color = textColorInactive;
line.hide();
}
});
});
});
//Copied Code
import wixWindow from 'wix-window';
$w.onReady(() => {
$w("#copyButton").onClick(() => {
let textMessage = $w("#textInput").text;
wixWindow.copyToClipboard(textMessage)
.then(() => {
$w("#copyButton").disable();
$w("#copyButton").label = 'Copied!';
$w("#box22").show();
refresh(); //ADD YOUR TIMEOUT FUNCTION HERE AFTER THE COPY
});
});
//ADD TIMEOUT TO ENABLE AND CHANGE THE LABEL OF YOUR BUTTON AFTER 1 SECOND
//â–¶START
function refresh() {
if ($w("#copyButton").disable()) {
setTimeout(function () {
$w("#copyButton").enable();
$w("#copyButton").label = 'Copy Code';
$w("#box22").hide('fade');
}, 1000);
}
} //â–¶END
});