Subversion Repositories wimsdev

Rev

Rev 15641 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 15641 Rev 16395
Line 5... Line 5...
5 
!! each other line is an item of the dropdown button with format word1 link ; word2 linkname
 5 
!! each other line is an item of the dropdown button with format word1 link ; word2 linkname
6 
 
 6 
 
7 
!if $js_numberdropdownbutton_=$empty
 7 
!if $js_numberdropdownbutton_=$empty
8 
  !let js_numberdropdownbutton_=0
 8 
  !let js_numberdropdownbutton_=0
9 
  <style>
 9 
  <style>
10 
    a, .dropbtn {
 10 
    .grid_container{
11 
      display: inline-block;
 11 
      display: grid;
12 
      color: black;
 - 
 
13 
      text-align: center;
 - 
 
14 
      text-decoration: none;
 12 
      grid-template-columns: auto auto;
15 
    }
 13 
    }
16 
 
 - 
 
17 
    a:hover, .dropdown:hover .dropbtn {
 14 
    .grid_container>span{
18 
      background-color: #f9f9f9;
 15 
      padding: 2px;
19 
    }
 16 
    }
20 
 
 17 
 
- 
 
 18 
    /**
- 
 
 19 
     * Foundation for Sites
- 
 
 20 
     * Version 6.7.4
- 
 
 21 
     * https://get.foundation
- 
 
 22 
     * Licensed under MIT Open Source
- 
 
 23 
     */
- 
 
 24 
    /* Dropdown styles */
21 
    .dropdown-content {
 25 
    .dropdown-pane {
- 
 
 26 
      position: absolute;
- 
 
 27 
      z-index: 10;
22 
      display: none;
 28 
      display: none;
- 
 
 29 
      width: 300px;
- 
 
 30 
      padding: 1rem;
23 
      position: absolute;
 31 
      visibility: hidden;
- 
 
 32 
      border: 1px solid #cacaca;
- 
 
 33 
      border-radius: 0;
24 
      background-color: #f9f9f9;
 34 
      background-color: #fefefe;
- 
 
 35 
      font-size: 1rem;
25 
    }
 36 
    }
- 
 
 37 
    .dropdown-pane.is-opening {
- 
 
 38 
      display: block; }
- 
 
 39 
    .dropdown-pane.is-open {
- 
 
 40 
      display: block;
- 
 
 41 
      visibility: visible; }
26 
 
 42 
 
27 
    .dropdown-content a {
 43 
    .dropdown-pane.tiny  {width: 100px;}
28 
      color: black;
 - 
 
29 
      padding: 12px 16px;
 44 
    .dropdown-pane.small {width: 200px;}
30 
      text-decoration: none;
 45 
    .dropdown-pane.large {width: 400px;}
31 
      display: block;
 - 
 
32 
      text-align: left;
 - 
 
33 
    }
 - 
 
34 
 
 46 
 
35 
    .dropdown-content a:hover {background-color: #f1f1f1}
 47 
</style>
36 
 
 48 
 
37 
    .show {display:block;}
 - 
 
38 
</style>
 - 
 
39 
<script>
 - 
 
40 
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
 - 
 
41 
function myFunction(test) {
 - 
 
42 
    var dropdowns = document.getElementsByClassName("dropdown-content");
 - 
 
43 
    for (var d = 0; d < dropdowns.length; d++) {
 - 
 
44 
      var openDropdown = dropdowns[d];
 - 
 
45 
      if (openDropdown.classList.contains('show')) {
 - 
 
46 
        openDropdown.classList.remove('show');
 - 
 
47 
      }
 - 
 
48 
    }
 - 
 
49 
    document.getElementById(test).classList.toggle("show");
 - 
 
50 
}
 - 
 
51 
 
 - 
 
52 
// Close the dropdown if the user clicks outside of it
 - 
 
53 
window.onclick = function(e) {
 - 
 
54 
  if (!e.target.matches('.dropbtn')) {
 - 
 
55 
    var dropdowns = document.getElementsByClassName("dropdown-content");
 - 
 
56 
    for (var d = 0; d < dropdowns.length; d++) {
 - 
 
57 
      var openDropdown = dropdowns[d];
 - 
 
58 
      if (openDropdown.classList.contains('show')) {
 - 
 
59 
        openDropdown.classList.remove('show');
 - 
 
60 
      }
 - 
 
61 
    }
 - 
 
62 
  }
 - 
 
63 
}
 - 
 
64 
</script>
 - 
 
65 
!endif
 49 
!endif
66 
 
 50 
 
67 
!increase js_numberdropdownbutton_
 51 
!increase js_numberdropdownbutton_
68 
!let keyid_=!line 1 of $wims_read_parm
 52 
!let keyid_=!line 1 of $wims_read_parm
69 
!let keyname_=!line 2 of $wims_read_parm
 53 
!let keyname_=!line 2 of $wims_read_parm
70 
!let nb_=!linecnt $wims_read_parm
 54 
!let nb_=!linecnt $wims_read_parm
- 
 
 55 
 
- 
 
 56 
<button class="wims_button wims_secondary_button small" type="button" data-toggle="dropdown$keyid_">
- 
 
 57 
  $keyname_
- 
 
 58 
</button>
71 
<button class="dropdown">
 59 
<div class="dropdown-pane" id="dropdown$keyid_"
- 
 
 60 
     data-dropdown data-auto-focus="true"
72 
  <a href="javascript:void(0)" class="dropbtn" onclick='myFunction("$keyid_")'>$keyname_</a>
 61 
     data-position="bottom" data-alignment="right" >
73 
  <div class="dropdown-content" id="$keyid_">
 62 
  <div class="grid_container">
74 
    !for k_=3 to $nb_
 63 
  !for k_=3 to $nb_
75 
      !let l_=!line $k_ of $wims_read_parm
 64 
    !let l_=!line $k_ of $wims_read_parm
76 
      !let link_=!word 1 of $l_
 65 
    !let link_=!word 1 of $l_
77 
      !let name_=!word 2 to -1 of $l_
 66 
    !let name_=!word 2 to -1 of $l_
- 
 
 67 
    <span>
78 
      !href $link_ $name_
 68 
      !href $link_ $name_
- 
 
 69 
    </span>
79 
    !next k_
 70 
  !next k_
80 
  </div>
 71 
  </div>
81 
</button>
 72 
</div>
82 
 
 73