From 31c16b00ca47a08c794eeb1127c5209b72c989c3 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Mon, 8 Nov 2021 09:36:22 +0700 Subject: [PATCH] Docs: Modal --- docs/js/modal.js | 4 +--- docs/js/modal.min.js | 2 +- docs/modal.html | 9 ++++++++- docs/src/modal.html | 25 ++++++++++++++++++++++++- 4 files changed, 34 insertions(+), 6 deletions(-) diff --git a/docs/js/modal.js b/docs/js/modal.js index 769c4419..cc7a5e90 100644 --- a/docs/js/modal.js +++ b/docs/js/modal.js @@ -26,11 +26,9 @@ const isModalOpen = modal => { // Open modal const openModal = modal => { - setTimeout(() => { - visibleModal = modal; - }, 100); document.documentElement.classList.add(isOpenClass, openingClass); setTimeout(() => { + visibleModal = modal; document.documentElement.classList.remove(openingClass); }, 200); modal.setAttribute('open', true); diff --git a/docs/js/modal.min.js b/docs/js/modal.min.js index acf2d706..dc792360 100644 --- a/docs/js/modal.min.js +++ b/docs/js/modal.min.js @@ -1 +1 @@ -"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){setTimeout(function(){visibleModal=e},100),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){document.documentElement.classList.remove(openingClass)},200),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),e.removeAttribute("open")},200)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}); \ No newline at end of file +"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){visibleModal=e,document.documentElement.classList.remove(openingClass)},200),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),e.removeAttribute("open")},200)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}); \ No newline at end of file diff --git a/docs/modal.html b/docs/modal.html index 0f03a5e4..ecf39f76 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -62,4 +62,11 @@ </a> </footer> </article> -</dialog>

As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 \ No newline at end of file +</dialog>

Pico does not include JavaScript code. You will need to implement your JS to interact with modals.

As a starting point, you can look at the JavaScript used in this documentation: js/modal.js.

To make a modal appear, add the open attribute to the <dialog> container.

<!-- Open modal-->
+<dialog open>
+</dialog>
+
+<!-- Modal closed -->
+<dialog>
+</dialog>
+

Utilities

Modals come with 3 utility classes.

<html class="modal-is-open"> blurs the background and blocks any scrolling and interactions below the modal.

<html class="modal-is-opening"> brings an opening animation.

<html class="modal-is-closing"> brings a closing animation.

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 \ No newline at end of file diff --git a/docs/src/modal.html b/docs/src/modal.html index c6afd51b..f56c1e67 100644 --- a/docs/src/modal.html +++ b/docs/src/modal.html @@ -138,7 +138,30 @@ -

As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.

+

Pico does not include JavaScript code. You will need to implement your JS to interact with modals.

+ +

As a starting point, you can look at the JavaScript used in this documentation: js/modal.js.

+ +

To make a modal appear, add the open attribute to the <dialog> container.

+ +
<!-- Open modal-->
+<dialog open>
+</dialog>
+
+<!-- Modal closed -->
+<dialog>
+</dialog>
+
+ +

Utilities

+ +

Modals come with 3 utility classes.

+ +

<html class="modal-is-open"> blurs the background and blocks any scrolling and interactions below the modal.

+ +

<html class="modal-is-opening"> brings an opening animation.

+ +

<html class="modal-is-closing"> brings a closing animation.