mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
Removed unused docs and docs/js files
This commit is contained in:
parent
cd0d303cef
commit
3c52bb3c5f
4 changed files with 0 additions and 626 deletions
|
@ -1,40 +0,0 @@
|
|||
/*
|
||||
* Accordion JavaScript Removed.
|
||||
*
|
||||
*/
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll('details').forEach(el => {
|
||||
let anim = null, opening = false, closing = false
|
||||
let summ = el.querySelector('summary')
|
||||
const runAnim = (height, targetHeight, callback) => {
|
||||
anim?.cancel()
|
||||
anim = el.animate({ height: [`${height}px`,`${targetHeight}px`] },{
|
||||
duration: 400,
|
||||
easing: 'ease-out'
|
||||
})
|
||||
anim.onfinish = () => {
|
||||
anim = null
|
||||
el.style.height = el.style.overflow = ''
|
||||
opening = closing = false
|
||||
callback?.()
|
||||
}
|
||||
}
|
||||
|
||||
summ.addEventListener('click', ev => {
|
||||
ev.preventDefault()
|
||||
el.style.overflow = 'hidden'
|
||||
|
||||
if(!el.open || closing) {
|
||||
el.style.height = `${el.offsetHeight}px`
|
||||
el.open = opening = true
|
||||
runAnim(el.offsetHeight, [...el.children].reduce((a,c) => a+c.offsetHeight, 0))
|
||||
anim.oncancel = () => opening = false
|
||||
} else if(el.open || opening) {
|
||||
closing = true
|
||||
runAnim(el.offsetHeight, summ.offsetHeight, () => el.open = false)
|
||||
anim.oncancel = () => closing = false
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
|
@ -1,20 +0,0 @@
|
|||
function showNotification(options = {}) {
|
||||
const dialog = document.querySelector("dialog[role='alert']");
|
||||
|
||||
if (options.text || typeof options === "string") {
|
||||
dialog.innerText = options.text || options;
|
||||
} else if (options.html) {
|
||||
dialog.innerHTML = options.html;
|
||||
}
|
||||
|
||||
dialog.showModal();
|
||||
|
||||
setTimeout(() => {
|
||||
dialog.close();
|
||||
}, options.delay || 3000);
|
||||
}
|
||||
|
||||
function closeNotification() {
|
||||
const dialog = document.querySelector("dialog[role='alert']");
|
||||
dialog.close();
|
||||
}
|
|
@ -1,80 +0,0 @@
|
|||
/**
|
||||
* Popover Toast
|
||||
*
|
||||
* Modified from https://mdn.github.io/dom-examples/popover-api/toast-popovers/
|
||||
* Modified by Yohn
|
||||
*/
|
||||
|
||||
const successToastBtn = document.getElementById("success-toast-btn");
|
||||
const failureToastBtn = document.getElementById("failure-toast-btn");
|
||||
const counter = document.querySelector("p");
|
||||
|
||||
function makeToast(result) {
|
||||
// Create an element and make it into a popover
|
||||
const popover = document.createElement("article");
|
||||
popover.popover = "manual";
|
||||
popover.classList.add("toast");
|
||||
popover.classList.add("newest");
|
||||
|
||||
let msg;
|
||||
|
||||
// Give the toast an appropriate text content, class for styling, and update
|
||||
// the relevant count, depending on whether it was a success or a failure
|
||||
if (result === "success") {
|
||||
msg = "Action was successful!";
|
||||
popover.classList.add("success");
|
||||
successCount++;
|
||||
} else if (result === "failure") {
|
||||
msg = "Action failed!";
|
||||
popover.classList.add("failure");
|
||||
failCount++;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
// Give the toast its text content, and add it to the DOM
|
||||
popover.textContent = msg;
|
||||
document.body.appendChild(popover);
|
||||
|
||||
// Show the popover
|
||||
popover.showPopover();
|
||||
|
||||
// Remove the toast again after 4 seconds
|
||||
setTimeout(() => {
|
||||
popover.hidePopover();
|
||||
popover.remove();
|
||||
}, 4000);
|
||||
|
||||
// When a new toast appears, run the movetoastsUp() function
|
||||
popover.addEventListener("toggle", (event) => {
|
||||
if (event.newState === "open") {
|
||||
moveToastsUp();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function moveToastsUp() {
|
||||
const toasts = document.querySelectorAll(".toast");
|
||||
|
||||
toasts.forEach((toast) => {
|
||||
// If the toast is the one that has just appeared, we don't want it to move up.
|
||||
if (toast.classList.contains("newest")) {
|
||||
toast.style.bottom = `5px`;
|
||||
toast.classList.remove("newest");
|
||||
} else {
|
||||
// Move up all the other toasts by 50px to make way for the new one
|
||||
const prevValue = toast.style.bottom.replace("px", "");
|
||||
const newValue = parseInt(prevValue) + 50;
|
||||
toast.style.bottom = `${newValue}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handlers to wire up the buttons to the makeToast() function
|
||||
successToastBtn.addEventListener("click", () => {
|
||||
makeToast("success");
|
||||
});
|
||||
|
||||
failureToastBtn.addEventListener("click", () => {
|
||||
makeToast("failure");
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue