From 7a7c60bd43af43d28c82808d3b0e39f7c201d69e Mon Sep 17 00:00:00 2001 From: hom3mad3 <8156337+hom3mad3@users.noreply.github.com> Date: Thu, 4 Jul 2024 18:55:28 +0200 Subject: [PATCH] fix small spacing issues with poll --- changelog/_5587.md | 8 ++ meinberlin/apps/contrib/assets/dropdown.js | 82 +++++++++----- .../includes/item_detail_dropdown.html | 6 +- .../apps/users/assets/user_indicator.js | 63 ----------- .../meinberlin_users/user_indicator.html | 104 +++++++++--------- meinberlin/assets/js/app.js | 5 +- .../scss/components_user_facing/_a4-poll.scss | 19 ++-- .../components_user_facing/_dropdown.scss | 71 ++++++++---- .../_user_indicator.scss | 32 +----- 9 files changed, 182 insertions(+), 208 deletions(-) create mode 100644 changelog/_5587.md delete mode 100644 meinberlin/apps/users/assets/user_indicator.js diff --git a/changelog/_5587.md b/changelog/_5587.md new file mode 100644 index 0000000000..2edd98b0ed --- /dev/null +++ b/changelog/_5587.md @@ -0,0 +1,8 @@ + +### Changed + +- unify dropdown and refactor following files: dropdown.js, _dropdown.scss, item_detail_dropdown.html, user_indicator.html, _user_indicator.scss + +### Removed +- deleted user_indicator.js +- unused select_dropdown.scss \ No newline at end of file diff --git a/meinberlin/apps/contrib/assets/dropdown.js b/meinberlin/apps/contrib/assets/dropdown.js index 46996324d3..5a42c155fd 100644 --- a/meinberlin/apps/contrib/assets/dropdown.js +++ b/meinberlin/apps/contrib/assets/dropdown.js @@ -1,41 +1,65 @@ -const Dropdown = { - toggleDropdown (event) { - const dropdown = event.currentTarget.parentNode - const isOpen = dropdown.getAttribute('aria-expanded') === 'true' +class Dropdown { + constructor (container) { + this.container = container + this.trigger = container.querySelector('[data-dropdown-trigger]') + this.dropdown = container.querySelector('[data-dropdown-menu]') + this.closeTimeout = null - dropdown.setAttribute('aria-expanded', !isOpen) + this.init() + } - const menu = dropdown.querySelector('.dropdown__menu') - menu.classList.toggle('dropdown__menu--show', !isOpen) + init () { + this.trigger.addEventListener('click', (event) => this.toggleDropdown(event)) + this.dropdown.addEventListener('keyup', (event) => this.handleKeyup(event)) + this.dropdown.addEventListener('focusout', (event) => this.handleFocusout(event)) + } - if (!isOpen) { - const menu = dropdown.querySelector('.dropdown__menu') - menu.firstElementChild.focus() + toggleDropdown (event) { + event.preventDefault() + if (this.container.classList.contains('dropdown--open')) { + this.closeDropdown() + } else { + this.openDropdown() } - }, + } + + openDropdown () { + this.container.classList.add('dropdown--open') + this.trigger.setAttribute('aria-expanded', true) + document.addEventListener('click', this.outsideClickListener) + } closeDropdown (event) { - const dropdowns = document.querySelectorAll('.js-dropdown') - dropdowns.forEach(function (dropdown) { - const isOpen = dropdown.getAttribute('aria-expanded') === 'true' - if (isOpen && !dropdown.contains(event.target)) { - dropdown.setAttribute('aria-expanded', 'false') - const menu = dropdown.querySelector('.dropdown__menu') - menu.classList.remove('dropdown__menu--show') - } - }) - }, + if (event) event.stopPropagation() + document.removeEventListener('click', this.outsideClickListener) + this.container.classList.remove('dropdown--open') + this.trigger.setAttribute('aria-expanded', false) + clearTimeout(this.closeTimeout) + } - init () { - const dropdowns = document.querySelectorAll('.js-dropdown') - if (dropdowns.length > 0) { - dropdowns.forEach(function (button) { - button.addEventListener('click', Dropdown.toggleDropdown) - }) + handleKeyup (event) { + if (event.keyCode === 27) { + this.closeDropdown() + this.trigger.focus() + } + } + + handleFocusout (event) { + this.closeTimeout = setTimeout(() => { + if (!this.dropdown.contains(event.relatedTarget)) { + this.closeDropdown() + } + }, 10) + } - document.addEventListener('click', Dropdown.closeDropdown) + outsideClickListener = (event) => { + if (!this.container.contains(event.target) && event.target !== this.close) { + this.closeDropdown() } } } -export default Dropdown +document.addEventListener('DOMContentLoaded', () => { + const dropdowns = document.querySelectorAll('[data-dropdown]') + dropdowns.forEach(dropdown => new Dropdown(dropdown)) +}) diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/item_detail_dropdown.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/item_detail_dropdown.html index 0169680faf..eba50bbe25 100644 --- a/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/item_detail_dropdown.html +++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/item_detail_dropdown.html @@ -1,10 +1,10 @@ {% load i18n item_tags contrib_tags moderatorremark_tags react_reports %} -
- -