From d642a07fa2db452b66c75ea928311d9581144190 Mon Sep 17 00:00:00 2001 From: Ellie-Brakoniecki <112866399+Ellie-Brakoniecki@users.noreply.github.com> Date: Fri, 14 Jul 2023 08:23:15 +0100 Subject: [PATCH 1/6] attach click event to links in nav bar so that it closes the nav bar & add ids to the navbar links --- gov_uk_dashboards/assets/mobile-nav.js | 19 +++++++++++++++++-- .../components/plotly/side_navbar.py | 6 ++++-- setup.py | 2 +- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/gov_uk_dashboards/assets/mobile-nav.js b/gov_uk_dashboards/assets/mobile-nav.js index 972463d..e6ecf0b 100644 --- a/gov_uk_dashboards/assets/mobile-nav.js +++ b/gov_uk_dashboards/assets/mobile-nav.js @@ -6,7 +6,7 @@ var mobileNav = null; * @type {boolean} */ var isOpen = false; - + if (typeof attachEventToDash !== 'undefined') { attachEventToDash('mobile-menu-btn', 'click', function () { if (mobileNav === null) { @@ -18,6 +18,21 @@ if (typeof attachEventToDash !== 'undefined') { mobileNav.style.display = isOpen ? 'none' : 'inline-block'; isOpen = !isOpen; }, false) + +// attach click events that close the menu to links in the nav menu +var numberOfLinks = 8; // ideally get dynamically but document.querySelectorAll and trying to match id before attaching event to Dash didn't work.. +for (var i = 0; i < numberOfLinks; i++) { + var linkId = 'nav-bar-link-' + i + '-mobile'; + attachEventToDash(linkId, 'click', function () { + if (mobileNav === null) { + mobileNav = document.getElementById('nav-section') + if (!mobileNav) { + return; + } + } + mobileNav.style.display = 'none'; + isOpen = false; + }, false); } /** @@ -46,4 +61,4 @@ window.addEventListener( } } }, 150) -); \ No newline at end of file +);} \ No newline at end of file diff --git a/gov_uk_dashboards/components/plotly/side_navbar.py b/gov_uk_dashboards/components/plotly/side_navbar.py index 66aa66e..5dc2ad2 100644 --- a/gov_uk_dashboards/components/plotly/side_navbar.py +++ b/gov_uk_dashboards/components/plotly/side_navbar.py @@ -20,15 +20,16 @@ def side_navbar( ) -def side_navbar_link(text, href): +def side_navbar_link(text, href, link_id): """A link to another dashboard""" return html.Li( dcc.Link(text, href=href, className="govuk-link govuk-link--no-visited-state"), className="moj-side-navigation__item govuk-!-margin-bottom-1", + id=link_id, ) -def side_navbar_link_active(text, href): +def side_navbar_link_active(text, href, link_id): """ A link to another dashboard that appears highlighted, suggesting to the user that they are already viewing the linked dashboard. @@ -39,4 +40,5 @@ def side_navbar_link_active(text, href): "moj-side-navigation__item moj-side-navigation__item--active " "govuk-!-margin-bottom-1" ), + id=link_id, ) diff --git a/setup.py b/setup.py index ed45ffb..748c165 100644 --- a/setup.py +++ b/setup.py @@ -10,7 +10,7 @@ author="Department for Levelling Up, Housing and Communities", description="Provides access to functionality common to creating a data dashboard.", name="gov_uk_dashboards", - version="9.13.4", + version="9.14.0", long_description=long_description, long_description_content_type="text/markdown", packages=find_packages(), From 2ece1bc1fae16ea20efd90322d50d7b8517e2852 Mon Sep 17 00:00:00 2001 From: Kate Riley Date: Fri, 14 Jul 2023 11:05:45 +0100 Subject: [PATCH 2/6] remove hard coding of number of links, replace with function --- gov_uk_dashboards/assets/mobile-nav.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/gov_uk_dashboards/assets/mobile-nav.js b/gov_uk_dashboards/assets/mobile-nav.js index e6ecf0b..2123ce2 100644 --- a/gov_uk_dashboards/assets/mobile-nav.js +++ b/gov_uk_dashboards/assets/mobile-nav.js @@ -20,8 +20,7 @@ if (typeof attachEventToDash !== 'undefined') { }, false) // attach click events that close the menu to links in the nav menu -var numberOfLinks = 8; // ideally get dynamically but document.querySelectorAll and trying to match id before attaching event to Dash didn't work.. -for (var i = 0; i < numberOfLinks; i++) { +for (var i = 0; i < getNumberOfLinks(); i++) { var linkId = 'nav-bar-link-' + i + '-mobile'; attachEventToDash(linkId, 'click', function () { if (mobileNav === null) { @@ -41,6 +40,11 @@ for (var i = 0; i < numberOfLinks; i++) { * @param {number} time * @returns */ + +function getNumberOfLinks() { + return document.getElementById('mobile-navigation-items').getElementsByTagName('A') +} + function debounce(func, time) { var time = time || 100; // 100 by default if no param var timer; From 39dd8a53df90e3fb2377c5a487af9e39415391f5 Mon Sep 17 00:00:00 2001 From: urquha Date: Fri, 14 Jul 2023 16:51:58 +0100 Subject: [PATCH 3/6] fixed links --- gov_uk_dashboards/assets/mobile-nav.js | 41 ++++++++++++-------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/gov_uk_dashboards/assets/mobile-nav.js b/gov_uk_dashboards/assets/mobile-nav.js index 2123ce2..3f718c7 100644 --- a/gov_uk_dashboards/assets/mobile-nav.js +++ b/gov_uk_dashboards/assets/mobile-nav.js @@ -19,30 +19,27 @@ if (typeof attachEventToDash !== 'undefined') { isOpen = !isOpen; }, false) -// attach click events that close the menu to links in the nav menu -for (var i = 0; i < getNumberOfLinks(); i++) { - var linkId = 'nav-bar-link-' + i + '-mobile'; - attachEventToDash(linkId, 'click', function () { - if (mobileNav === null) { - mobileNav = document.getElementById('nav-section') - if (!mobileNav) { - return; +// Wait until the 'mobile-navigation-items' element is loaded +var checkExist = setInterval(function() { + var element = document.getElementById('mobile-navigation-items'); + if (element) { + clearInterval(checkExist); + var links = element.getElementsByTagName('a'); + console.log(links) + attachEventsToLinks(links); + } +}, 100); + +function attachEventsToLinks(links) { + for (var i = 0; i < links.length; i++) { + var link = links[i]; + link.addEventListener('click', function() { + var mobileNav =document.getElementById('nav-section'); + if (mobileNav) { + mobileNav.style.display = 'none'; } - } - mobileNav.style.display = 'none'; - isOpen = false; }, false); -} - -/** - * - * @param {function} func - * @param {number} time - * @returns - */ - -function getNumberOfLinks() { - return document.getElementById('mobile-navigation-items').getElementsByTagName('A') + } } function debounce(func, time) { From 857f8bddd5d3784df719ec6a02d5635ae5ab7b6f Mon Sep 17 00:00:00 2001 From: Ellie-Brakoniecki <112866399+Ellie-Brakoniecki@users.noreply.github.com> Date: Mon, 17 Jul 2023 09:51:46 +0100 Subject: [PATCH 4/6] update the isOpen state to false when a link is clicked --- gov_uk_dashboards/assets/mobile-nav.js | 1 + 1 file changed, 1 insertion(+) diff --git a/gov_uk_dashboards/assets/mobile-nav.js b/gov_uk_dashboards/assets/mobile-nav.js index 3f718c7..dfc6ac7 100644 --- a/gov_uk_dashboards/assets/mobile-nav.js +++ b/gov_uk_dashboards/assets/mobile-nav.js @@ -37,6 +37,7 @@ function attachEventsToLinks(links) { var mobileNav =document.getElementById('nav-section'); if (mobileNav) { mobileNav.style.display = 'none'; + isOpen = false; } }, false); } From 7f27f039b180d44ba9e9049c66d798b75ca917da Mon Sep 17 00:00:00 2001 From: Ellie-Brakoniecki <112866399+Ellie-Brakoniecki@users.noreply.github.com> Date: Mon, 17 Jul 2023 09:55:29 +0100 Subject: [PATCH 5/6] remove giving side navbar links an id --- gov_uk_dashboards/components/plotly/side_navbar.py | 6 ++---- setup.py | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/gov_uk_dashboards/components/plotly/side_navbar.py b/gov_uk_dashboards/components/plotly/side_navbar.py index 5dc2ad2..66aa66e 100644 --- a/gov_uk_dashboards/components/plotly/side_navbar.py +++ b/gov_uk_dashboards/components/plotly/side_navbar.py @@ -20,16 +20,15 @@ def side_navbar( ) -def side_navbar_link(text, href, link_id): +def side_navbar_link(text, href): """A link to another dashboard""" return html.Li( dcc.Link(text, href=href, className="govuk-link govuk-link--no-visited-state"), className="moj-side-navigation__item govuk-!-margin-bottom-1", - id=link_id, ) -def side_navbar_link_active(text, href, link_id): +def side_navbar_link_active(text, href): """ A link to another dashboard that appears highlighted, suggesting to the user that they are already viewing the linked dashboard. @@ -40,5 +39,4 @@ def side_navbar_link_active(text, href, link_id): "moj-side-navigation__item moj-side-navigation__item--active " "govuk-!-margin-bottom-1" ), - id=link_id, ) diff --git a/setup.py b/setup.py index 748c165..2897042 100644 --- a/setup.py +++ b/setup.py @@ -10,7 +10,7 @@ author="Department for Levelling Up, Housing and Communities", description="Provides access to functionality common to creating a data dashboard.", name="gov_uk_dashboards", - version="9.14.0", + version="9.13.5", long_description=long_description, long_description_content_type="text/markdown", packages=find_packages(), From 96a7b36f8e08ade4964b05b9ee5ea2e7c236c126 Mon Sep 17 00:00:00 2001 From: Ellie-Brakoniecki <112866399+Ellie-Brakoniecki@users.noreply.github.com> Date: Mon, 17 Jul 2023 11:15:52 +0100 Subject: [PATCH 6/6] remove console log statements --- gov_uk_dashboards/assets/mobile-nav.js | 1 - 1 file changed, 1 deletion(-) diff --git a/gov_uk_dashboards/assets/mobile-nav.js b/gov_uk_dashboards/assets/mobile-nav.js index dfc6ac7..c7480f8 100644 --- a/gov_uk_dashboards/assets/mobile-nav.js +++ b/gov_uk_dashboards/assets/mobile-nav.js @@ -25,7 +25,6 @@ var checkExist = setInterval(function() { if (element) { clearInterval(checkExist); var links = element.getElementsByTagName('a'); - console.log(links) attachEventsToLinks(links); } }, 100);