From 620fd458503d5ef89e54a4c71926ff7bbbb24d43 Mon Sep 17 00:00:00 2001 From: Ben Pate Date: Mon, 26 Oct 2020 13:06:17 -0600 Subject: [PATCH 1/3] Website: demo modal dialogs using UIKit This is my first try at doing this, so feedback is welcome. I can't get the SASS plugin working with eleventy, so I'm guessing about the global page CSS. It looks like the UIKit stylesheet may mess up the global look of the page. If this is a dealbreaker (or can't be fixed) then we may not be able to use this commit :( --- www/examples.md | 3 +- www/examples/modal-uikit.md | 136 ++++++++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 www/examples/modal-uikit.md diff --git a/www/examples.md b/www/examples.md index 640993d4..350ef2c6 100644 --- a/www/examples.md +++ b/www/examples.md @@ -21,5 +21,6 @@ You can copy and paste them and then adjust them for your needs. | [Active Search](/examples/active-search) | Demonstrates the active search box pattern | [Progress Bar](/examples/progress-bar) | Demonstrates a job-runner like progress bar | [Value Select](/examples/value-select) | Demonstrates making the values of a select dependent on another select -| [Dialogs](/examples/dialogs) | Demonstrates the prompt and confirm dialogs | [Animations](/examples/animations) | Demonstrates various animation techniques +| [Dialogs - Browser](/examples/dialogs) | Demonstrates the prompt and confirm dialogs +| [Dialogs - UIKIt](/examples/modal-uikit) | Demonstrates modal dialogs using UIKit diff --git a/www/examples/modal-uikit.md b/www/examples/modal-uikit.md new file mode 100644 index 00000000..825046c4 --- /dev/null +++ b/www/examples/modal-uikit.md @@ -0,0 +1,136 @@ +--- +layout: demo_layout.njk +--- + +## Modal Dialogs + +Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes. +This example shows how to use HTMX to display dynamic dialog using UIKit, and how to +trigger its animation styles with little or no Javascript. + +We start with a button that triggers the dialog, along with a DIV at the bottom of your +markup where the dialog will be loaded: + +This is an example of using HTMX to remotely load modal dialogs using UIKit. + +```html + + +
+``` + +This button uses a `GET` request to `/uikit-modal.html` when this button is clicked. The +contents of this file will be added to the DOM underneath the `#show-modals-here` DIV. + +We're replacing the standard UIKit Javascript library with a little bit of Hyperscript, +which triggers UIKit's smooth animations. It is delayed by 10ms so that UIKit's animations +will run correctly. + +Finally, the server responds with a slightly modified version of UIKit's standard modal + +```html + +``` + +Hyperscript on the button and the form trigger animations when this dialog is completed +or canceled. If you don't want to use Hyperscript, the modals will still work but UIKit's +fade in animations will not be triggered. + +Alternatively, you can add and remove these CSS classes without Hyperscript, by using in straight Javascript. +It's just a lot more code: + +```javascript + +// This triggers the fade-in animation when a modal dialog is loaded and displayed +window.document.getElementById("showButton").addEventListener("htmx:afterOnLoad", function() { + setTimeout(function(){ + window.document.getElementById("modal").classList.add("uk-open") + }, 10) +}) + + +// This triggers the fade-out animation when the modal is closed. +window.document.getElementById("cancelButton").addEventListener() +on click take .uk-open from #modal wait 200ms then remove #modal +``` + +The input issues a `POST` to `/search` on the `keyup` event and sets the body of the table to be the resulting content. + +We add the `delay:500ms` modifier to the trigger to delay sending the query until the user stops typing. Additionally, we add the `changed` modifier to the trigger to ensure we don't send new queries when the user doesn't change the value of the input (e.g. they hit an arrow key). + +Finally, we show an indicator when the search is in flight with the `hx-indicator` attribute. + +
+ +{% include demo_ui.html.liquid %} + + + + + From 223baa70d8d0b654739960fb186feb25d8796241 Mon Sep 17 00:00:00 2001 From: Ben Pate Date: Mon, 26 Oct 2020 13:54:13 -0600 Subject: [PATCH 2/3] Add Bootstrap demo to website --- www/examples.md | 1 + www/examples/modal-bootstrap.md | 125 ++++++++++++++++++++++++++++++++ 2 files changed, 126 insertions(+) create mode 100644 www/examples/modal-bootstrap.md diff --git a/www/examples.md b/www/examples.md index 640993d4..8b06d148 100644 --- a/www/examples.md +++ b/www/examples.md @@ -23,3 +23,4 @@ You can copy and paste them and then adjust them for your needs. | [Value Select](/examples/value-select) | Demonstrates making the values of a select dependent on another select | [Dialogs](/examples/dialogs) | Demonstrates the prompt and confirm dialogs | [Animations](/examples/animations) | Demonstrates various animation techniques +| [Dialogs - Bootstrap](/examples/modal-bootstrap) | Demonstrates modal dialogs using Bootstrap diff --git a/www/examples/modal-bootstrap.md b/www/examples/modal-bootstrap.md new file mode 100644 index 00000000..fd218e2f --- /dev/null +++ b/www/examples/modal-bootstrap.md @@ -0,0 +1,125 @@ +--- +layout: demo_layout.njk +--- + +## Modal Dialogs in Bootstrap + +Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes. +This example shows how to use HTMX to display dynamic dialog using Bootstrap, and how to +trigger its animation styles in Javascript. + +We start with a button that triggers the dialog, along with a DIV at the bottom of your +markup where the dialog will be loaded: + +```html + + +
+``` + +This button uses a `GET` request to `/modal` when this button is clicked. The +contents of this file will be added to the DOM underneath the `#show-modals-here` DIV. + +We're replacing Bootstrap's javascript widgets with a small bit of Hyperscript to provide +smooth animations when the dialog opens and closes. + +Finally, the server responds with a slightly modified version of Bootstrap's standard modal + +```html + + +``` + +We're replacing the standard Bootstrap Javascript library with a little bit of Javascript, +which triggers Bootstrap's smooth animations. + +```javascript +function closeModal() { + var container = document.getElementById("modals-here") + var backdrop = document.getElementById("modal-backdrop") + var modal = document.getElementById("modal") + + modal.classList.remove("show") + backdrop.classList.remove("show") + + setTimeout(function() { + container.removeChild(backdrop) + container.removeChild(modal) + }, 200) +} +``` + + +
+ +{% include demo_ui.html.liquid %} + + + + + + From 81bebb09562cfa0b71aa4cb66b57c202cdbfe1fe Mon Sep 17 00:00:00 2001 From: Ben Pate Date: Mon, 26 Oct 2020 13:59:03 -0600 Subject: [PATCH 3/3] Update modal-uikit.md - Fixed example code. - Removed incorrect copy-and-paste text --- www/examples/modal-uikit.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/www/examples/modal-uikit.md b/www/examples/modal-uikit.md index 825046c4..33a83be7 100644 --- a/www/examples/modal-uikit.md +++ b/www/examples/modal-uikit.md @@ -72,16 +72,15 @@ window.document.getElementById("showButton").addEventListener("htmx:afterOnLoad" // This triggers the fade-out animation when the modal is closed. -window.document.getElementById("cancelButton").addEventListener() -on click take .uk-open from #modal wait 200ms then remove #modal +window.document.getElementById("cancelButton").addEventListener("click", function() { + window.document.getElementById("modal").classList.remove("uk-open") + setTimeout(function(){ + window.document.getElementById("show-modals-here").innerHTML = "" + ,200 + }) +}) ``` -The input issues a `POST` to `/search` on the `keyup` event and sets the body of the table to be the resulting content. - -We add the `delay:500ms` modifier to the trigger to delay sending the query until the user stops typing. Additionally, we add the `changed` modifier to the trigger to ensure we don't send new queries when the user doesn't change the value of the input (e.g. they hit an arrow key). - -Finally, we show an indicator when the search is in flight with the `hx-indicator` attribute. -
{% include demo_ui.html.liquid %}