meinberlin_contrib/includes/item_detail_dropdown.html: refactor dropdown

changelog/_8039.md

@@ -1,4 +1,9 @@
 ### Changed
 
 - Cleaned up `meinberlin_contrib/item_detail.html` and `components/_item_detail.scss`
-- Separated dropdown into `item_detail_dropdown.html` for further refactoring.
+- Separated dropdown into `item_detail_dropdown.html` for further refactoring.
+- Initialized `dropdown.scss` on style_user_facing and refactored old code.
+
+### Added
+
+- Created a new assets file `contrib/assets/dropdown.js` to handle generic dropdown functionality

meinberlin/apps/contrib/assets/dropdown.js

@@ -0,0 +1,42 @@
+const Dropdown = {
+  toggleDropdown (event) {
+    const dropdown = event.currentTarget.parentNode
+    const isOpen = dropdown.getAttribute('aria-expanded') === 'true'
+
+    dropdown.setAttribute('aria-expanded', !isOpen)
+
+    const menu = dropdown.querySelector('.dropdown__menu')
+    menu.classList.toggle('dropdown__menu--show', !isOpen)
+
+    if (!isOpen) {
+      const menu = dropdown.querySelector('.dropdown__menu')
+      menu.firstElementChild.focus()
+    }
+  },
+
+  // close dropdown when clicked outside
+  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')
+      }
+    })
+  },
+
+  init () {
+    const dropdowns = document.querySelectorAll('.js-dropdown')
+    if (dropdowns.length > 0) {
+      dropdowns.forEach(function (button) {
+        button.addEventListener('click', Dropdown.toggleDropdown)
+      })
+
+      document.addEventListener('click', Dropdown.closeDropdown)
+    }
+  }
+}
+
+export default Dropdown

meinberlin/assets/js/app.js

@@ -5,6 +5,7 @@ import 'select2' // used to select projects in containers
 import '../../apps/actions/assets/timestamps.js'
 import '../../apps/newsletters/assets/dynamic_fields.js'
 import '../../apps/users/assets/user_indicator.js'
+import Dropdown from '../../apps/contrib/assets/dropdown.js'
 
 // map search function
 import 'adhocracy4/adhocracy4/maps/static/a4maps/a4maps_address.js'
@@ -30,6 +31,8 @@ function init () {
       minimumResultsForSearch: -1
     })
   }
+
+  Dropdown.init()
 }
 
 document.addEventListener('DOMContentLoaded', init, false)

meinberlin/assets/scss/components_user_facing/_dropdown.scss

@@ -0,0 +1,46 @@
+.dropdown {
+    position: relative;
+}
+
+.dropdown__toggle {
+    i {
+        font-size: 1.25em;
+    }
+}
+
+.dropdown__menu {
+    position: absolute;
+    display: none;
+    right: 0;
+    white-space: nowrap;
+    border: 1px solid $text-color;
+    background-color: $white;
+    flex-direction: column;
+    justify-content: space-between;
+    box-shadow: 0 0 5px rgba(100, 100, 100, 0.5);
+
+    ul {
+        margin-bottom: 0;
+    }
+
+    @media print {
+        display: none;
+    }
+}
+
+.dropdown__item {
+    padding: 0.5 * $spacer $spacer;
+    margin-bottom: 0;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid;
+    }
+
+    a {
+        margin-bottom: 0;
+    }
+}
+
+.dropdown__menu--show {
+    display: block;
+}

meinberlin/assets/scss/style_user_facing.scss

@@ -59,6 +59,7 @@
 @import "components_user_facing/card";
 @import "components_user_facing/control-bar";
 @import "components_user_facing/a4-control-bar-search";
+@import "components_user_facing/dropdown";
 @import "components_user_facing/follow";
 @import "components_user_facing/herounit_image_with_aside";
 @import "components_user_facing/input";