From 51c58db029e12fb1e61ae5058cc22b4fe21e112e Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Mon, 15 May 2023 15:30:46 +0300 Subject: [PATCH 1/9] Update events listeners for page specific scripts --- Guide/architecture.markdown | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Guide/architecture.markdown b/Guide/architecture.markdown index d997eb5c9..64ade70a8 100644 --- a/Guide/architecture.markdown +++ b/Guide/architecture.markdown @@ -114,7 +114,8 @@ Your global, non-page specific, JavaScript code can be placed in `app.js`. E.g. the `app.js` could look like this: ```javascript -$(function () { +$(document).on('ready turbolinks:load', function () { + // This is called on the first page load *and* also when the page is changed by turbolinks initNavbarEffects(); }); From 665d6ff17f4c919acedf49a19c42da04dc4ac960 Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Tue, 16 May 2023 09:59:20 +0300 Subject: [PATCH 2/9] Remove ihp:load --- Guide/architecture.markdown | 24 ++++++++++++++++++------ Guide/view.markdown | 4 ++-- lib/IHP/static/helpers.js | 7 ------- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/Guide/architecture.markdown b/Guide/architecture.markdown index 64ade70a8..ddda35c0d 100644 --- a/Guide/architecture.markdown +++ b/Guide/architecture.markdown @@ -115,13 +115,25 @@ E.g. the `app.js` could look like this: ```javascript $(document).on('ready turbolinks:load', function () { - // This is called on the first page load *and* also when the page is changed by turbolinks - initNavbarEffects(); -}); + // This is called on the first page load *and* also when the page is changed by turbolinks. -function initNavbarEffects() { - // ... -} + // We make sure also the bind our events only once, so if a user navigates to + // another page and back, we won't try to bind the same event twice. + // Init sortable. + document.querySelectorAll('.js-my-selector').forEach(function (elem) { + + // Check if the element is already initialized. + if (Boolean(elem.jsMySelectorInitialized) === false) { + + // Bind event handlers here. + // ... + + // Mark the element as initialized, so we won't bind the event handler twice. + elem.jsMySelectorInitialized = true; + } + }); + +}); ``` In your `Web.View.Layout` just import the `app.js`: diff --git a/Guide/view.markdown b/Guide/view.markdown index 722259d67..e4d57e1bf 100644 --- a/Guide/view.markdown +++ b/Guide/view.markdown @@ -367,11 +367,11 @@ We provide two custom events - `ihp:unload` that will fire on `beforeunload` and before [morphdom patches the page](#TurboLinks) ```javascript -document.addEventListener('ihp:load', () => { +$(document).on('ready turbolinks:load', () => { console.log('Page Loaded'); }); -document.addEventListener('ihp:unload', () => { +$(document).on('beforeunload', () => { console.log('Page Unloaded'); }); ``` diff --git a/lib/IHP/static/helpers.js b/lib/IHP/static/helpers.js index 3f7c204be..e6726298e 100644 --- a/lib/IHP/static/helpers.js +++ b/lib/IHP/static/helpers.js @@ -1,10 +1,3 @@ -var ihpLoadEvent = new Event('ihp:load'); -var ihpUnloadEvent = new Event('ihp:unload'); - -window.addEventListener('beforeunload', function () { - document.dispatchEvent(ihpUnloadEvent); -}); - document.addEventListener('DOMContentLoaded', function () { initDelete(); initDisableButtonsOnSubmit(); From 9bff9a8b7ffa0591b1455444b6ac2666c44a24fd Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Tue, 16 May 2023 10:00:57 +0300 Subject: [PATCH 3/9] Add note about use of jQuery --- Guide/view.markdown | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Guide/view.markdown b/Guide/view.markdown index e4d57e1bf..48a3cec1f 100644 --- a/Guide/view.markdown +++ b/Guide/view.markdown @@ -361,10 +361,7 @@ Preloading with InstantClick on hover will only happen with links that (So putting an anchor on a link, or explicitly setting the `data-turbolinks-preload` attribute to `false`, will let you selectively turn off preloading for that link.) -We provide two custom events - -- `ihp:load` that will trigger when `DOMContentLoaded` or `turbolinks:load` -- `ihp:unload` that will fire on `beforeunload` and before [morphdom patches the page](#TurboLinks) +Triggered events: ```javascript $(document).on('ready turbolinks:load', () => { @@ -376,6 +373,9 @@ $(document).on('beforeunload', () => { }); ``` +Note that when using jQuery there's a some difference from using `document.addEventListener`, which you can read about [here](https://api.jquery.com/ready/). +Notably the part about "If the DOM becomes ready and the browser fires `DOMContentLoaded` before the code calls `.ready( handler )`, the function handler will still be executed." + ## JSON Views that are rendered by calling the [`render`](https://ihp.digitallyinduced.com/api-docs/IHP-Controller-Render.html#v:render) function can also respond with JSON. From a6a6b0340c024d8e4246eba62fa449c84b0a0306 Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Tue, 16 May 2023 10:34:08 +0300 Subject: [PATCH 4/9] Remove reference to ihpLoadEvent --- lib/IHP/static/helpers.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lib/IHP/static/helpers.js b/lib/IHP/static/helpers.js index e6726298e..cc855b433 100644 --- a/lib/IHP/static/helpers.js +++ b/lib/IHP/static/helpers.js @@ -6,8 +6,6 @@ document.addEventListener('DOMContentLoaded', function () { initTime(); initDatePicker(); initFileUploadPreview(); - - document.dispatchEvent(ihpLoadEvent); }); document.addEventListener('turbolinks:load', function () { @@ -27,8 +25,6 @@ document.addEventListener('turbolinks:load', function () { }, 1); initDatePicker(); - - document.dispatchEvent(ihpLoadEvent); }); function initTime() { From e00af154115a0c2bbd1bda7ce2916d4eb6efd5b7 Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Tue, 16 May 2023 10:37:04 +0300 Subject: [PATCH 5/9] Remove ihpUnloadEvent --- lib/IHP/static/helpers.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/IHP/static/helpers.js b/lib/IHP/static/helpers.js index cc855b433..0bcb31ac7 100644 --- a/lib/IHP/static/helpers.js +++ b/lib/IHP/static/helpers.js @@ -406,8 +406,6 @@ window.transitionToNewPage = function (newHtml) { return; } - document.dispatchEvent(ihpUnloadEvent); - var isModalOpen = document.body.classList.contains('modal-open'); morphdom( document.body, From 8f1e32739990ac8c3ed1fc003bfb517d0f756cca Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Wed, 17 May 2023 19:28:37 +0300 Subject: [PATCH 6/9] Revert "Remove ihpUnloadEvent" This reverts commit e00af154115a0c2bbd1bda7ce2916d4eb6efd5b7. --- lib/IHP/static/helpers.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/IHP/static/helpers.js b/lib/IHP/static/helpers.js index 0bcb31ac7..cc855b433 100644 --- a/lib/IHP/static/helpers.js +++ b/lib/IHP/static/helpers.js @@ -406,6 +406,8 @@ window.transitionToNewPage = function (newHtml) { return; } + document.dispatchEvent(ihpUnloadEvent); + var isModalOpen = document.body.classList.contains('modal-open'); morphdom( document.body, From 7e79bda5a84cb2072d40082fde2373a04944e601 Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Wed, 17 May 2023 19:30:09 +0300 Subject: [PATCH 7/9] Revert "Remove reference to ihpLoadEvent" This reverts commit a6a6b0340c024d8e4246eba62fa449c84b0a0306. --- lib/IHP/static/helpers.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/IHP/static/helpers.js b/lib/IHP/static/helpers.js index cc855b433..e6726298e 100644 --- a/lib/IHP/static/helpers.js +++ b/lib/IHP/static/helpers.js @@ -6,6 +6,8 @@ document.addEventListener('DOMContentLoaded', function () { initTime(); initDatePicker(); initFileUploadPreview(); + + document.dispatchEvent(ihpLoadEvent); }); document.addEventListener('turbolinks:load', function () { @@ -25,6 +27,8 @@ document.addEventListener('turbolinks:load', function () { }, 1); initDatePicker(); + + document.dispatchEvent(ihpLoadEvent); }); function initTime() { From b5f59fbd832fa8e153459defe72ed426af9b6ef0 Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Wed, 17 May 2023 19:33:21 +0300 Subject: [PATCH 8/9] Revert remove ihp:load --- lib/IHP/static/helpers.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lib/IHP/static/helpers.js b/lib/IHP/static/helpers.js index e6726298e..3f7c204be 100644 --- a/lib/IHP/static/helpers.js +++ b/lib/IHP/static/helpers.js @@ -1,3 +1,10 @@ +var ihpLoadEvent = new Event('ihp:load'); +var ihpUnloadEvent = new Event('ihp:unload'); + +window.addEventListener('beforeunload', function () { + document.dispatchEvent(ihpUnloadEvent); +}); + document.addEventListener('DOMContentLoaded', function () { initDelete(); initDisableButtonsOnSubmit(); From 2fd1b5e1a3fe98ccdf3705a61a2629c428b11493 Mon Sep 17 00:00:00 2001 From: Amitai Burstein Date: Wed, 17 May 2023 19:36:05 +0300 Subject: [PATCH 9/9] Add ihp:unload docs back --- Guide/view.markdown | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Guide/view.markdown b/Guide/view.markdown index 48a3cec1f..5183c4e86 100644 --- a/Guide/view.markdown +++ b/Guide/view.markdown @@ -373,6 +373,8 @@ $(document).on('beforeunload', () => { }); ``` +There's also a custom event `ihp:unload` that will fire on `beforeunload` and before [morphdom patches the page](#TurboLinks) + Note that when using jQuery there's a some difference from using `document.addEventListener`, which you can read about [here](https://api.jquery.com/ready/). Notably the part about "If the DOM becomes ready and the browser fires `DOMContentLoaded` before the code calls `.ready( handler )`, the function handler will still be executed."