Subversion Repositories wimsdev

Rev

Rev 16395 | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. !! put a dropdown button with list of link in a menu
  2. !! wims_read_parm is :
  3. !! line 1 name of the button
  4. !! line 2 id of the button
  5. !! each other line is an item of the dropdown button with format word1 link ; word2 linkname
  6.  
  7. !if $js_numberdropdownbutton_=$empty
  8.   !let js_numberdropdownbutton_=0
  9.   <style>
  10.     .grid_container{
  11.       display: grid;
  12.       grid-template-columns: auto auto;
  13.     }
  14.     .grid_container>span{
  15.       padding: 2px;
  16.     }
  17.     .dropdown.wims_secondary_button:after{
  18.       border-color: #000 transparent transparent;
  19.      top: 0;
  20.     }
  21.  
  22.     /**
  23.      * Foundation for Sites
  24.      * Dropdown button
  25.      */
  26.     button.dropdown:after {
  27.       display: block;
  28.       width: 0;
  29.       height: 0;
  30.       border-style: solid;
  31.       border-width: 0.4em;
  32.       content: '';
  33.       border-bottom-width: 0;
  34.       border-color: #fefefe transparent transparent;
  35.      position: relative;
  36.       top: 0.4em;
  37.       display: inline-block;
  38.       float: right;
  39.       margin-left: 1em;
  40.     }
  41.  
  42.     /**
  43.      * Foundation for Sites
  44.      * Version 6.7.4
  45.      * https://get.foundation
  46.      * Licensed under MIT Open Source
  47.      */
  48.     /* Dropdown styles */
  49.     .dropdown-pane {
  50.       position: absolute;
  51.       z-index: 10;
  52.       display: none;
  53.       width: 300px;
  54.       padding: 1rem;
  55.       visibility: hidden;
  56.       border: 1px solid #cacaca;
  57.      border-radius: 0;
  58.       background-color: #fefefe;
  59.      font-size: 1rem;
  60.     }
  61.     .dropdown-pane.is-opening {
  62.       display: block; }
  63.     .dropdown-pane.is-open {
  64.       display: block;
  65.       visibility: visible; }
  66.  
  67.     .dropdown-pane.tiny  {width: 100px;}
  68.     .dropdown-pane.small {width: 200px;}
  69.     .dropdown-pane.large {width: 400px;}
  70.  
  71. </style>
  72.  
  73. !endif
  74.  
  75. !increase js_numberdropdownbutton_
  76. !let keyid_=!line 1 of $wims_read_parm
  77. !let keyname_=!line 2 of $wims_read_parm
  78. !let nb_=!linecnt $wims_read_parm
  79.  
  80. !! @See https://get.foundation/sites/docs/dropdown.html for data-options
  81. <button class="wims_button wims_secondary_button small dropdown" type="button"
  82.         data-toggle="dropdown$keyid_">
  83.   $keyname_
  84. </button>
  85. <div class="dropdown-pane" id="dropdown$keyid_"
  86.      data-dropdown data-auto-focus="true"
  87.      data-position="bottom" data-alignment="right"
  88.      data-close-on-click="true" >
  89.   <div class="grid_container">
  90.   !for k_=3 to $nb_
  91.     !let l_=!line $k_ of $wims_read_parm
  92.     !let link_=!word 1 of $l_
  93.     !let name_=!word 2 to -1 of $l_
  94.     <span>
  95.       !href $link_ $name_
  96.     </span>
  97.   !next k_
  98.   </div>
  99. </div>
  100.  
  101.