mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
Removed unused docs and docs/js files
This commit is contained in:
Yohn
parent
cd0d303cef
commit
3c52bb3c5f
4 changed files with 0 additions and 626 deletions
|
|
@ -1,486 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>Preview • Pico CSS</title>
|
||||
<meta name="description" content="A pure HTML example, without dependencies." />
|
||||
<!-- Backwards compatability -->
|
||||
<link rel="icon" sizes="16x16 24x24 32x32 64x64" href="favicon.ico">
|
||||
<!-- All other browsers -->
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<!-- Google Search and Android Chrome -->
|
||||
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
|
||||
<!-- iPhone -->
|
||||
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
|
||||
<!-- iPad Retina -->
|
||||
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
|
||||
<!-- Other iPads -->
|
||||
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="favicon-152x152.png">
|
||||
<!-- Web application manifest -->
|
||||
<link rel="manifest" href="manifest.json">
|
||||
|
||||
<!-- Pico.css -->
|
||||
<link rel="stylesheet" href="pico.css" id="theme-color-ss"/>
|
||||
<link rel="stylesheet" href="pico.colors.min.css" />
|
||||
|
||||
<!--
|
||||
Yohn's Simple CSS Class helpers
|
||||
I might add these to the main PicoCSS later
|
||||
-->
|
||||
<link rel="stylesheet" href="basics.css" />
|
||||
<style>
|
||||
:root {
|
||||
--pico-logo-wordmark: #fff;
|
||||
--pico-logo-small-sparkles: #ff9500;
|
||||
--pico-logo-big-sparkle: #ffbf00;
|
||||
|
||||
}
|
||||
|
||||
.three-columns {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row !important;
|
||||
min-width: 60vw !important;
|
||||
}
|
||||
.three-columns li {
|
||||
flex: 33%;
|
||||
}
|
||||
.two-columns {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row !important;
|
||||
min-width: 60vw !important;
|
||||
}
|
||||
|
||||
.two-columns li {
|
||||
flex: 40%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<main class="col-12">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="dropdown" open>
|
||||
<summary>Theme</summary>
|
||||
<ul class="three-columns">
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-red-550) !important;" data-theme="red" href="javascript:void(0);">Red</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-pink-550) !important;" data-theme="pink" href="javascript:void(0);">Pink</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-fuchsia-550) !important;" data-theme="fuchsia" href="javascript:void(0);">Fuchsia</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-purple-600) !important;" data-theme="purple" href="javascript:void(0);">Purple</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-violet-600) !important;" data-theme="violet" href="javascript:void(0);">Violet</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-indigo-600) !important;" data-theme="indigo" href="javascript:void(0);">Indigo</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-blue-550) !important;" data-theme="blue" href="javascript:void(0);">Blue</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-azure-550) !important;" data-theme="azure" href="javascript:void(0);">Azure</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-cyan-550) !important;" data-theme="cyan" href="javascript:void(0);">Cyan</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-jade-550) !important;" data-theme="jade" href="javascript:void(0);">Jade</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-green-500) !important;" data-theme="green" href="javascript:void(0);">Green</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-lime-200) !important;" data-theme="lime" href="javascript:void(0);">Lime</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-yellow-100) !important;" data-theme="yellow" href="javascript:void(0);">Yellow</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-amber-200) !important;" data-theme="amber" href="javascript:void(0);">Amber</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-pumpkin-350) !important;" data-theme="pumpkin" href="javascript:void(0);">Pumpkin</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-orange-500) !important;" data-theme="orange" href="javascript:void(0);">Orange</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-sand-200) !important;" data-theme="sand" href="javascript:void(0);">Sand</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-grey-300) !important;" data-theme="grey" href="javascript:void(0);">Grey</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-zinc-550) !important;" data-theme="zinc" href="javascript:void(0);">Zinc</a></li>
|
||||
<li><a class="change-theme" style="border:none; margin:1px; color:#000; background-color: var(--pico-color-slate-600) !important;" data-theme="slate" href="javascript:void(0);">Slate</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="dropdown">
|
||||
<summary>Layout</summary>
|
||||
<ul>
|
||||
<li><a href="#document">Document</a></li>
|
||||
<li><a href="#container">Container</a></li>
|
||||
<li><a href="#landmarks">Landmarks</a></li>
|
||||
<li><a href="#section">Section</a></li>
|
||||
<li><a href="#grid">Grid</a></li>
|
||||
<li><a href="#row">Row</a></li>
|
||||
<li><a href="#overflow-auto">Overflow Auto</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="dropdown">
|
||||
<summary role="button" class="secondary">Content</summary>
|
||||
<ul>
|
||||
<li><a href="#button">Button</a></li>
|
||||
<li><a href="#code">Code</a></li>
|
||||
<li><a href="#embedded">Embedded</a></li>
|
||||
<li><a href="#figure">Figure</a></li>
|
||||
<li><a href="#link">Link</a></li>
|
||||
<li><a href="#misc">Misc</a></li>
|
||||
<li><a href="#table">Table</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="dropdown">
|
||||
<summary role="button" class="contrast">Forms</summary>
|
||||
<ul dir="rtl">
|
||||
<li><a href="#basics.scss">Basics</a></li>
|
||||
<li><a href="#checkbox-radio-switch.scss">Checkbox Radio Switch</a></li>
|
||||
<li><a href="#floating.scss">Floating</a></li>
|
||||
<li><a href="#input-color.scss">Input Color</a></li>
|
||||
<li><a href="#input-date.scss">Input Date</a></li>
|
||||
<li><a href="#input-file.scss">Input File</a></li>
|
||||
<li><a href="#input-range.scss">Input Range</a></li>
|
||||
<li><a href="#input-search.scss">Input Search</a></li>
|
||||
<li><a href="#validation.scss">Validation</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="dropdown">
|
||||
<summary role="button">Components</summary>
|
||||
<ul dir="rtl" class="two-columns">
|
||||
<li><a href="#accordion">Accordion</a></li>
|
||||
<li><a href="#card">Card</a></li>
|
||||
<li><a href="#dropdown">Dropdown</a></li>
|
||||
<li><a href="#group">Group</a></li>
|
||||
<li><a href="#loading">Loading</a></li>
|
||||
<li><a href="#modal">Modal</a></li>
|
||||
<li><a href="#nav-hamburger">Nav Hamburger</a></li>
|
||||
<li><a href="#nav">Nav</a></li>
|
||||
<li><a href="#notification">Notification</a></li>
|
||||
<li><a href="#offcanvas">Offcanvas</a></li>
|
||||
<li><a href="#popover-toast">Popover Toast</a></li>
|
||||
<li><a href="#popover">Popover</a></li>
|
||||
<li><a href="#progress">Progress</a></li>
|
||||
<li><a href="#tab-region">Tab Region</a></li>
|
||||
<li><a href="#timeline">Timeline</a></li>
|
||||
<li><a href="#tooltip">Tooltip</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section id="layout">
|
||||
<h2 id="container">Container</h2>
|
||||
<p>Example of Container...</p>
|
||||
<h2 id="document">Document</h2>
|
||||
<p>Example of Document...</p>
|
||||
<h2 id="grid">Grid</h2>
|
||||
<p>Example of Grid...</p>
|
||||
<h2 id="landmarks">Landmarks</h2>
|
||||
<p>Example of Landmarks...</p>
|
||||
<h2 id="overflow-auto">Overflow Auto</h2>
|
||||
<p>Example of Overflow Auto...</p>
|
||||
<h2 id="row">Row</h2>
|
||||
<p>Example of Row...</p>
|
||||
<h2 id="section">Section</h2>
|
||||
<p>Example of Section...</p>
|
||||
</section>
|
||||
|
||||
<section id="content">
|
||||
|
||||
<article id="button">
|
||||
<header>
|
||||
<h2>Button</h2>
|
||||
</header>
|
||||
<button aria-busy="true">Button: Contrast adjusted</button>
|
||||
<button aria-busy="true" class="outline">Button: Contrast adjusted</button>
|
||||
<button aria-busy="true" class="contrast">Button: Contrast adjusted</button>
|
||||
<article aria-busy="true">Article</article>
|
||||
<button aria-busy="true" class="contrast">Button: Contrast adjusted</button>
|
||||
<article aria-busy="true" class="contrast">Article: Contrast not adjusted</article>
|
||||
<footer>
|
||||
<p>With and without classes versions.</p>
|
||||
</footer>
|
||||
</article>
|
||||
<h2 id="code">Code</h2>
|
||||
<p>Example of Code...</p>
|
||||
<h2 id="embedded">Embedded</h2>
|
||||
<p>Example of Embedded...</p>
|
||||
<h2 id="figure">Figure</h2>
|
||||
<p>Example of Figure...</p>
|
||||
<h2 id="link">Link</h2>
|
||||
<p>Example of Link...</p>
|
||||
<h2 id="misc">Misc</h2>
|
||||
<p>Example of Misc...</p>
|
||||
<h2 id="table">Table</h2>
|
||||
<p>Example of Table...</p>
|
||||
<h2 id="typography">Typography</h2>
|
||||
<p>Example of Typography...</p>
|
||||
</section>
|
||||
|
||||
<section id="forms">
|
||||
<h2 id="basics.scss">Basics</h2>
|
||||
<p>Example of Basics...</p>
|
||||
<h2 id="checkbox-radio-switch.scss">Checkbox Radio Switch</h2>
|
||||
<p>Example of Checkbox Radio Switch...</p>
|
||||
<h2 id="floating.scss">Floating</h2>
|
||||
<p>Example of Floating...</p>
|
||||
<h2 id="input-color.scss">Input Color</h2>
|
||||
<p>Example of Input Color...</p>
|
||||
<h2 id="input-date.scss">Input Date</h2>
|
||||
<p>Example of Input Date...</p>
|
||||
<h2 id="input-file.scss">Input File</h2>
|
||||
<p>Example of Input File...</p>
|
||||
<h2 id="input-range.scss">Input Range</h2>
|
||||
<p>Example of Input Range...</p>
|
||||
<h2 id="input-search.scss">Input Search</h2>
|
||||
<p>Example of Input Search...</p>
|
||||
<h2 id="validation.scss">Validation</h2>
|
||||
<p>Example of Validation...</p>
|
||||
</section>
|
||||
|
||||
<section id="components">
|
||||
<article id="accordion">
|
||||
<header>
|
||||
<h2>Accordion</h2>
|
||||
</header>
|
||||
<details>
|
||||
<summary role="button">Accordion Title</summary>
|
||||
<div class="accordion-content">
|
||||
<p>Your content goes here...</p>
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
<article id="card">
|
||||
<header>
|
||||
<h2>Card</h2>
|
||||
</header>
|
||||
<p>Example of Card...</p>
|
||||
</article>
|
||||
<article id="dropdown">
|
||||
<header>
|
||||
<h2>Dropdown</h2>
|
||||
</header>
|
||||
<h4>1. Basic Dropdown</h4>
|
||||
<p>This is a simple dropdown using the <code><details></code> element.</p>
|
||||
<details class="dropdown">
|
||||
<summary>Select an option</summary>
|
||||
<ul>
|
||||
<li><a href="#">Option 1</a></li>
|
||||
<li><a href="#">Option 2</a></li>
|
||||
<li><a href="#">Option 3</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<h4>2. Dropdown as a Button</h4>
|
||||
<p>This version uses a button to trigger the dropdown.</p>
|
||||
<details class="dropdown">
|
||||
<summary role="button">Dropdown Menu</summary>
|
||||
<ul>
|
||||
<li><a href="#">Item 1</a></li>
|
||||
<li><a href="#">Item 2</a></li>
|
||||
<li><a href="#">Item 3</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<h4>3. Dropdown with Icons</h4>
|
||||
<p>You can include icons for each option in the dropdown.</p>
|
||||
<details class="dropdown">
|
||||
<summary role="button">Select an option</summary>
|
||||
<ul>
|
||||
<li><a href="#"><img src="https://picsum.photos/25/26" alt="Icon 1"> Option 1</a></li>
|
||||
<li><a href="#"><img src="https://picsum.photos/26/25" alt="Icon 2"> Option 2</a></li>
|
||||
<li><a href="#"><img src="https://picsum.photos/25/25" alt="Icon 3"> Option 3</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<h4>4. Dropdown with Submenu</h4>
|
||||
<p>This example shows how to create a dropdown that includes a submenu.</p>
|
||||
<details class="dropdown">
|
||||
<summary role="button">Main Menu</summary>
|
||||
<ul>
|
||||
<li><a href="#">Option 1</a></li>
|
||||
<li>
|
||||
<details>
|
||||
<summary>Submenu</summary>
|
||||
<ul>
|
||||
<li><a href="#">Sub-option 1</a></li>
|
||||
<li><a href="#">Sub-option 2</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li><a href="#">Option 3</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<h4>5. Dropdown Inside Navigation</h4>
|
||||
<p>This example shows how to integrate the dropdown into a navigation bar.</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<details class="dropdown">
|
||||
<summary role="button">Menu</summary>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</article>
|
||||
<article id="group">
|
||||
<header>
|
||||
<h2>Group</h2>
|
||||
</header>
|
||||
<p>Example of Group...</p>
|
||||
</article>
|
||||
<article id="loading">
|
||||
<header>
|
||||
<h2>Loading</h2>
|
||||
</header>
|
||||
<p>Example of Loading...</p>
|
||||
</article>
|
||||
<article id="modal">
|
||||
<header>
|
||||
<h2>Modal</h2>
|
||||
</header>
|
||||
<button class="outline" data-target="modal-form-example" onclick="toggleModal(event)">
|
||||
Launch Modal Form
|
||||
</button>
|
||||
|
||||
<button data-target="modal-example" onclick="toggleModal(event)">
|
||||
Launch Regular Modal
|
||||
</button>
|
||||
</article>
|
||||
<article id="nav-hamburger">
|
||||
<header>
|
||||
<h2>Nav Hamburger</h2>
|
||||
</header>
|
||||
<p>Example of Nav Hamburger...</p>
|
||||
</article>
|
||||
<article id="nav">
|
||||
<header>
|
||||
<h2>Nav</h2>
|
||||
</header>
|
||||
<p>Example of Nav...</p>
|
||||
</article>
|
||||
<article id="notification">
|
||||
<header>
|
||||
<h2>Notification</h2>
|
||||
</header>
|
||||
<p>Example of Notification...</p>
|
||||
</article>
|
||||
<article id="offcanvas">
|
||||
<header>
|
||||
<h2>Offcanvas</h2>
|
||||
</header>
|
||||
<p>Example of Offcanvas...</p>
|
||||
</article>
|
||||
<article id="popover-toast">
|
||||
<header>
|
||||
<h2>Popover Toast</h2>
|
||||
</header>
|
||||
<p>Example of Popover Toast...</p>
|
||||
</article>
|
||||
<article id="popover">
|
||||
<header>
|
||||
<h2>Popover</h2>
|
||||
</header>
|
||||
<p>Example of Popover...</p>
|
||||
</article>
|
||||
<article id="progress">
|
||||
<header>
|
||||
<h2>Progress</h2>
|
||||
</header>
|
||||
<p>Example of Progress...</p>
|
||||
</article>
|
||||
<article id="tab-region">
|
||||
<header>
|
||||
<h2>Tab Region</h2>
|
||||
</header>
|
||||
<p>Example of Tab Region...</p>
|
||||
</article>
|
||||
<article id="timeline">
|
||||
<header>
|
||||
<h2>Timeline</h2>
|
||||
</header>
|
||||
<p>Example of Timeline...</p>
|
||||
</article>
|
||||
<article id="tooltip">
|
||||
<header>
|
||||
<h2>Tooltip</h2>
|
||||
</header>
|
||||
<div class="tooltip-container">
|
||||
<button class="tooltip-trigger" data-tooltip="This is the tooltip content" data-placement="top">Hover over
|
||||
me</button>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog id="modal-form-example">
|
||||
<article>
|
||||
<form action="javascript:void(0);" id="validate">
|
||||
<header>
|
||||
<button aria-label="Close" rel="prev" data-target="modal-form-example" onclick="toggleModal(event)"></button>
|
||||
<h2>Confirm Your Membership</h2>
|
||||
</header>
|
||||
<p>Thank you for signing up for a membership! Please review the membership details below:</p>
|
||||
<ul>
|
||||
<li>Membership: Individual</li>
|
||||
<li>Price: $10</li>
|
||||
</ul>
|
||||
<footer>
|
||||
<button role="button" class="secondary" data-target="modal-form-example" onclick="toggleModal(event)">Cancel</button>
|
||||
<button autofocus data-target="modal-form-example" onclick="toggleModal(event)">Confirm</button>
|
||||
</footer>
|
||||
</form>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<dialog id="modal-example">
|
||||
<article>
|
||||
<header>
|
||||
<button aria-label="Close" rel="prev" data-target="modal-example" onclick="toggleModal(event)"></button>
|
||||
<h2>Confirm Your Membership</h2>
|
||||
</header>
|
||||
<p>Thank you for signing up for a membership! Please review the membership details below:</p>
|
||||
<ul>
|
||||
<li>Membership: Individual</li>
|
||||
<li>Price: $10</li>
|
||||
</ul>
|
||||
<footer>
|
||||
<button role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</button>
|
||||
|
||||
<button autofocus data-target="modal-example" onclick="toggleModal(event)">Confirm</button>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<script src="js/MinimalThemeSwitcher.js"></script>
|
||||
<script src="js/Modal.js"></script>
|
||||
<script>
|
||||
// Function to change the theme
|
||||
function changeTheme(newTheme) {
|
||||
const linkElement = document.getElementById('theme-color-ss');
|
||||
if (linkElement) {
|
||||
linkElement.setAttribute('href', '../css/pico.' + newTheme + '.css');
|
||||
}
|
||||
}
|
||||
|
||||
// Adding click event listener to all elements with the "change-theme" class
|
||||
document.querySelectorAll('.change-theme').forEach(element => {
|
||||
element.addEventListener('click', function() {
|
||||
const newTheme = this.getAttribute('data-theme');
|
||||
changeTheme(newTheme);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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