back round 0 view raw

appview: ui: close nav dropdowns when clicking outside of them #471

merged

opened by

samuel.fm 4 months ago targeting master from samuel.fm/core: samuel/close-dropdown-on-click

adds a little bit of javascript to close dropdowns in the topbar when clicking outside of them

I just added it as an inline <script> tag, I hope that's ok - I don't see any javascript files to put it in

options

unified split

Changed files

+13 -2

appview

pages

templates

layouts

topbar.html

+13 -2

appview/pages/templates/layouts/topbar.html

···

       24
        
       {{ end }}

     

       25
        
       

     

       26
        
       {{ define "newButton" }}

     

       27
       -
       <details class="relative inline-block text-left">

     

       28
        
           <summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">

     

       29
        
             {{ i "plus" "w-4 h-4" }} new

     

       30
        
           </summary>

     
···

       42
        
       {{ end }}

     

       43
        
       

     

       44
        
       {{ define "dropDown" }}

     

       45
       -
       <details class="relative inline-block text-left">

     

       46
        
           <summary

     

       47
        
               class="cursor-pointer list-none flex items-center"

     

       48
        
           >

     
···

       66
        
               </a>

     

       67
        
           </div>

     

       68
        
       </details>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       69
        
       {{ end }}

···

       24
        
       {{ end }}

     

       25
        
       

     

       26
        
       {{ define "newButton" }}

     

       27
       +
       <details class="relative inline-block text-left nav-dropdown">

     

       28
        
           <summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">

     

       29
        
             {{ i "plus" "w-4 h-4" }} new

     

       30
        
           </summary>

     
···

       42
        
       {{ end }}

     

       43
        
       

     

       44
        
       {{ define "dropDown" }}

     

       45
       +
       <details class="relative inline-block text-left nav-dropdown">

     

       46
        
           <summary

     

       47
        
               class="cursor-pointer list-none flex items-center"

     

       48
        
           >

     
···

       66
        
               </a>

     

       67
        
           </div>

     

       68
        
       </details>

     

       69
       +
       

     

       70
       +
       <script>

     

       71
       +
       document.addEventListener('click', function(event) {

     

       72
       +
           const dropdowns = document.querySelectorAll('.nav-dropdown');

     

       73
       +
           dropdowns.forEach(function(dropdown) {

     

       74
       +
               if (!dropdown.contains(event.target)) {

     

       75
       +
                   dropdown.removeAttribute('open');

     

       76
       +
               }

     

       77
       +
           });

     

       78
       +
       });

     

       79
       +
       </script>

     

       80
        
       {{ end }}