| 
      
            Lines 2-24
          
      
      
        Link Here
      
     | 
  
        
          | 2 | 
          <!-- Begin Main page Resident Search Box -->  | 
          2 | 
          <!-- Begin Main page Resident Search Box -->  | 
        
        
          | 3 | 
           | 
          3 | 
           | 
        
        
          | 4 | 
          <div id="containersearch" class="fold">  | 
          4 | 
          <div id="containersearch" class="fold">  | 
        
          
            
              | 5 | 
                  [% IF (CAN_user_borrowers) %]  | 
              5 | 
               | 
            
            
              | 6 | 
                  <div id="checkout_search" class="residentsearch">  | 
              6 | 
                  [% INCLUDE 'patron-search-box.inc' %]  | 
            
            
              | 7 | 
                      <form action="/cgi-bin/koha/circ/circulation.pl" id="patronsearch" method="post">  | 
               | 
               | 
            
            
              | 8 | 
                          <input id="inputsearch"  class="inpu" type="text" autocomplete="off" placeholder="Enter patron card number or partial name"  />  | 
            
            
              | 9 | 
                          <input type="hidden" name="quicksearch" value="1" />  | 
            
            
              | 10 | 
                          <input value="" type="submit" id="submitsearch" />  | 
            
            
              | 11 | 
                      </form>  | 
            
            
              | 12 | 
                  </div>  | 
            
            
              | 13 | 
                  [% END %]  | 
            
        
          | 14 | 
           | 
          7 | 
           | 
        
        
          | 15 | 
              [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]  | 
          8 | 
              [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]  | 
        
        
          | 16 | 
              <div id="checkin_search" class="residentsearch">  | 
          9 | 
              <div id="checkin_search" class="residentsearch">  | 
        
        
          | 17 | 
                  <form action="/cgi-bin/koha/members/member.pl" id="patronsearch" method="post">  | 
          10 | 
                  <form action="/cgi-bin/koha/members/member.pl" id="patronsearch" method="post">  | 
        
        
          | 18 | 
                      [% IF ( PatronAutoComplete ) %]  | 
          11 | 
                      [% IF ( PatronAutoComplete ) %]  | 
        
        
          | 19 | 
                          <div class="autocomplete">  | 
          12 | 
                          <div class="autocomplete">  | 
        
          
            
              | 20 | 
                                      <input autocomplete="off" class="inpu" id="inputsearch" name="findborrower" class="head-searchbox" type="text" placeholder="Scan a barcode to check in" />  | 
              13 | 
                                  <input name="barcode" id="ret_barcode" class="head-searchbox" accesskey="r" type="text" placeholder="Scan a barcode to check in" />  | 
            
            
              | 21 | 
                                      <input value="" id="submitsearch" type="submit"/>  | 
              14 | 
                                  <input value="" id="submit" type="submit"/>  | 
            
        
          | 22 | 
           | 
          15 | 
           | 
        
        
          | 23 | 
                              [% IF ( stickyduedate ) %]  | 
          16 | 
                              [% IF ( stickyduedate ) %]  | 
        
        
          | 24 | 
                                  <input type="hidden" name="duedatespec" value="[% duedatespec | html %]" />  | 
          17 | 
                                  <input type="hidden" name="duedatespec" value="[% duedatespec | html %]" />  | 
        
  
    | 
      
            Lines 27-85
          
      
      
        Link Here
      
     | 
  
        
          | 27 | 
                          </div>  | 
          20 | 
                          </div>  | 
        
        
          | 28 | 
           | 
          21 | 
           | 
        
        
          | 29 | 
                      [% ELSE %]  | 
          22 | 
                      [% ELSE %]  | 
        
          
            
              | 30 | 
                              <input id="inputsearch" name="findborrower" class="inpu head-searchbox" type="text" autocomplete="off" placeholder=Scan a barcode to check in" />  | 
              23 | 
                              <input name="barcode" id="ret_barcode" class="head-searchbox" accesskey="r" type="text" placeholder="Scan a barcode to check in" />  | 
            
        
          | 31 | 
                          [% IF ( stickyduedate ) %]  | 
          24 | 
                          [% IF ( stickyduedate ) %]  | 
        
        
          | 32 | 
                          <input type="hidden" name="duedatespec" value="[% duedatespec | html %]" />  | 
          25 | 
                          <input type="hidden" name="duedatespec" value="[% duedatespec | html %]" />  | 
        
        
          | 33 | 
                          <input type="hidden" name="stickyduedate" value="[% stickyduedate | html %]" />  | 
          26 | 
                          <input type="hidden" name="stickyduedate" value="[% stickyduedate | html %]" />  | 
        
        
          | 34 | 
                          [% END %]  | 
          27 | 
                          [% END %]  | 
        
          
            
              | 35 | 
                              <input value="" id="submitsearch" type="submit" />  | 
              28 | 
                              <input value="" id="submit" type="submit" />  | 
            
        
          | 36 | 
                      [% END %]  | 
          29 | 
                      [% END %]  | 
        
        
          | 37 | 
                  </form>  | 
          30 | 
                  </form>  | 
        
        
          | 38 | 
              </div>  | 
          31 | 
              </div>  | 
        
        
          | 39 | 
           | 
          32 | 
           | 
        
        
          | 40 | 
              <div id="renew_search" class="residentsearch">  | 
          33 | 
              <div id="renew_search" class="residentsearch">  | 
        
          
            
              | 41 | 
                      <form method="post" action="/cgi-bin/koha/circ/returns.pl" autocomplete="off">  | 
              34 | 
                      <form method="post" action="/cgi-bin/koha/circ/renew.pl" autocomplete="off">  | 
            
            
              | 42 | 
                          <input name="barcode" id="inputsearch" class="inpu" accesskey="r" type="text" placeholder="Scan a barcode to renew" />  | 
              35 | 
                          <input name="barcode" id="ren_barcode" class="head-searchbox" accesskey="r" type="text" placeholder="Scan a barcode to renew" />  | 
            
            
              | 43 | 
                          <input value="" type="submit" id="submitsearch" />  | 
              36 | 
                          <input value="" type="submit" id="submit" />  | 
            
        
          | 44 | 
                  </form>  | 
          37 | 
                  </form>  | 
        
        
          | 45 | 
              </div>  | 
          38 | 
              </div>  | 
        
            
               | 
               | 
              39 | 
               | 
            
        
          | 46 | 
              <div id="search_search" class="residentsearch">  | 
          40 | 
              <div id="search_search" class="residentsearch">  | 
        
        
          | 47 | 
                  <form method="post" action="/cgi-bin/koha/circ/renew.pl" autocomplete="off">  | 
          41 | 
                  <form method="post" action="/cgi-bin/koha/circ/renew.pl" autocomplete="off">  | 
        
        
          | 48 | 
                      <input name="barcode" id="inputsearch" class="inpu" type="text" placeholder="Enter search keyords" />  | 
          42 | 
                      <input name="barcode" id="inputsearch" class="inpu" type="text" placeholder="Enter search keyords" />  | 
        
          
            
              | 49 | 
                          <input value="" type="submit" id="submitsearch" />  | 
              43 | 
                          <input value="" type="submit" id="submit" />  | 
            
        
          | 50 | 
                  </form>  | 
          44 | 
                  </form>  | 
        
        
          | 51 | 
              </div>  | 
          45 | 
              </div>  | 
        
        
          | 52 | 
              [% END %]  | 
          46 | 
              [% END %]  | 
        
        
          | 53 | 
           | 
          47 | 
           | 
        
          
            
              | 54 | 
                  [% IF ( CAN_user_catalogue ) %]  | 
              48 | 
                  [% INCLUDE 'catalogue-search-box.inc' %]  | 
            
            
              | 55 | 
                  <div id="search_search" class="residentsearch">  | 
               | 
               | 
            
            
              | 56 | 
                      <form method="post" action="/cgi-bin/koha/catalogue/search.pl" autocomplete="off" method="get" id="cat-search-block">  | 
            
            
              | 57 | 
                          [% IF ( Koha.Preference('IntranetCatalogSearchPulldown') ) %] | 
            
            
              | 58 | 
                                  [% INCLUDE 'search_indexes.inc' %]  | 
            
            
              | 59 | 
                              [% END %]  | 
            
            
              | 60 | 
                          <input name="barcode" class="inpu" id="inputsearch focus" type="text" placeholder="Enter search keyords" />  | 
            
            
              | 61 | 
                          <input value="" type="submit" id="submitsearch" />  | 
            
            
              | 62 | 
                      </form>  | 
            
            
              | 63 | 
                  </div>  | 
            
            
              | 64 | 
                  [% END %]  | 
            
        
          | 65 | 
           | 
          49 | 
           | 
        
          
            
              | 66 | 
                  <ul>  | 
              50 | 
                  <ul id="taille">  | 
            
            
              | 67 | 
                      <span id="buttonssearch">  | 
              51 | 
                      [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a id="icon_1" title="Check out" onclick="clique(this)" href="#circ_search" class="iconsearch"><i class="fa fa-upload"></i></a></li>[% END %]  | 
            
            
              | 68 | 
                         <span id="button_1" title="Check out" onclick="clique(this)" class="iconsearch"><i class="fa fa-upload"></i></span> <span id="button_2" title="Check in" onclick="clique(this)" class="iconsearch"><i class="fa fa-download"></i></span> <span id="icon_3" title="Renew" onclick="clique(this)" class="iconsearch"><i class="fa fa-retweet"></i></span> <span id="icon_4" title="Search catalog" onclick="clique(this)" class="iconsearch"><i class="fa fa-fw fa-search"></i></span>  | 
              52 | 
                      [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a id="icon_2" title="Check in" onclick="clique(this)" href="#checkin_search" class="iconsearch"><i class="fa fa-download"></i></a></li>[% END %]  | 
            
            
              | 69 | 
                          [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<span id="button_1" onclick="toggle(this)" class="buttonsearch" href="#circ_search">Check-out</span>[% END %]  | 
              53 | 
                      [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a id="icon_3" title="Renew" onclick="clique(this)" href="#renew_search" class="iconsearch"><i class="fa fa-retweet"></i></a></li>[% END %]  | 
            
            
              | 70 | 
                          [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<span id="button_2" onclick="toggle(this)" class="buttonsearch" href="#checkin_search">Check-in</span>[% END %]  | 
              54 | 
                      [% IF ( CAN_user_catalogue ) %]<li><a id="icon_4" title="Search catalog" onclick="clique(this)" href="#catalog_search" class="iconsearch"><i class="fa fa-fw fa-search"></i></a></li>[% END %]  | 
            
            
              | 71 | 
                          [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<span id="button_3" onclick="toggle(this)" class="buttonsearch" href="#renew_search">Renew</span>[% END %]  | 
              55 | 
               | 
            
            
              | 72 | 
                          [% IF ( CAN_user_catalogue ) %]<span id="button_5" onclick="toggle(this)" class="buttonsearch active" href="#catalog_search">Search catalog</span>[% END %]  | 
              56 | 
                      <span id="button_1" class="buttonsearch active">Check-out</span>  | 
            
            
              | 73 | 
                      </span>  | 
              57 | 
                      <span id="button_2" class="buttonsearch">Check-in</span>  | 
            
            
               | 
               | 
              58 | 
                      <span id="button_3" class="buttonsearch">Renew</span>  | 
            
            
              | 59 | 
                      <span id="button_5" class="buttonsearch active">Search catalog</span>  | 
            
        
          | 74 | 
              </ul>  | 
          60 | 
              </ul>  | 
        
        
          | 75 | 
          </div>  | 
          61 | 
          </div>  | 
        
        
          | 76 | 
           | 
          62 | 
           | 
        
        
          | 77 | 
          <script type="text/javascript">  | 
          63 | 
          <script type="text/javascript">  | 
        
        
          | 78 | 
              function focusInput(){ | 
          64 | 
              function focusInput(){ | 
        
          
            
              | 79 | 
                      document.getElementById('inputsearch').focus(); | 
              65 | 
                      document.getElementsByClassName('head-searchbox').focus(); | 
            
        
          | 80 | 
              }  | 
          66 | 
              }  | 
        
        
          | 81 | 
           | 
          67 | 
           | 
        
          
            
              | 82 | 
                  function toggle(elem){ | 
              68 | 
                  function toggle(elem){style="width: calc(301px);" | 
            
        
          | 83 | 
                  var buttonssearch = document.getElementsByClassName('active'); | 
          69 | 
                  var buttonssearch = document.getElementsByClassName('active'); | 
        
        
          | 84 | 
                  for (var i = buttonssearch.length - 1; i >= 0; i--) { | 
          70 | 
                  for (var i = buttonssearch.length - 1; i >= 0; i--) { | 
        
        
          | 85 | 
                      buttonssearch[i].classList.remove('active'); | 
          71 | 
                      buttonssearch[i].classList.remove('active'); | 
        
  
    | 
      
            Lines 90-107
          
      
      
        Link Here
      
     | 
  
        
          | 90 | 
                      fold();  | 
          76 | 
                      fold();  | 
        
        
          | 91 | 
                  }else{//Back | 
          77 | 
                  }else{//Back | 
        
        
          | 92 | 
                      document.getElementById('button_1').classList.add('active'); | 
          78 | 
                      document.getElementById('button_1').classList.add('active'); | 
        
          
            
              | 93 | 
                          document.getElementById('containersearch').classList.remove('fold'); | 
              79 | 
                          document.getElementById('header_search').classList.remove('fold'); | 
            
            
              | 94 | 
                          document.getElementById('inputsearch').style = ''; | 
              80 | 
                          document.getElementsByClassName('head-searchbox').style = ''; | 
            
        
          | 95 | 
                  }  | 
          81 | 
                  }  | 
        
        
          | 96 | 
           | 
          82 | 
           | 
        
        
          | 97 | 
                  focusInput();  | 
          83 | 
                  focusInput();  | 
        
        
          | 98 | 
              }  | 
          84 | 
              }  | 
        
        
          | 99 | 
           | 
          85 | 
           | 
        
            
              | 100 | 
               | 
               | 
               | 
            
        
          | 101 | 
              function clique(elem){ | 
          86 | 
              function clique(elem){ | 
        
        
          | 102 | 
                  var buttonssearch = document.getElementsByClassName('buttonsearch'); | 
          87 | 
                  var buttonssearch = document.getElementsByClassName('buttonsearch'); | 
        
        
          | 103 | 
                  var iconssearch = document.getElementsByClassName('iconsearch'); | 
          88 | 
                  var iconssearch = document.getElementsByClassName('iconsearch'); | 
        
          
            
              | 104 | 
                      var inputssearch = document.getElementsByClassName('inpu'); | 
              89 | 
                      var inputssearch = document.getElementsByClassName('head-searchbox'); | 
            
        
          | 105 | 
                  for (var i = buttonssearch.length - 1; i >= 0; i--) { | 
          90 | 
                  for (var i = buttonssearch.length - 1; i >= 0; i--) { | 
        
        
          | 106 | 
                      buttonssearch[i].classList.remove('active'); | 
          91 | 
                      buttonssearch[i].classList.remove('active'); | 
        
        
          | 107 | 
                      if (elem == iconssearch[i]){ | 
          92 | 
                      if (elem == iconssearch[i]){ | 
        
  
    | 
      
            Lines 114-138
          
      
      
        Link Here
      
     | 
  
        
          | 114 | 
           | 
          99 | 
           | 
        
        
          | 115 | 
                      if (elem == iconssearch[i]){ | 
          100 | 
                      if (elem == iconssearch[i]){ | 
        
        
          | 116 | 
                          inputssearch[i].classList.add('focus'); | 
          101 | 
                          inputssearch[i].classList.add('focus'); | 
        
            
               | 
               | 
              102 | 
               | 
            
            
              | 103 | 
                              taille(inputssearch[i])  | 
            
        
          | 117 | 
                      }  | 
          104 | 
                      }  | 
        
        
          | 118 | 
                  }  | 
          105 | 
                  }  | 
        
        
          | 119 | 
           | 
          106 | 
           | 
        
            
              | 120 | 
                      fold();  | 
               | 
               | 
            
        
          | 121 | 
                  focusInput();  | 
          107 | 
                  focusInput();  | 
        
            
               | 
               | 
              108 | 
                      fold();  | 
            
        
          | 122 | 
              }  | 
          109 | 
              }  | 
        
        
          | 123 | 
           | 
          110 | 
           | 
        
        
          | 124 | 
              function fold(){ | 
          111 | 
              function fold(){ | 
        
          
            
              | 125 | 
               | 
              112 | 
                      document.getElementById('header_search').classList.add('fold'); | 
            
            
              | 126 | 
                      document.getElementById('containersearch').classList.add('fold'); | 
              113 | 
                     // document.getElementsByClassName('head-searchbox').style = "width:calc(500px - 100px)"; | 
            
            
              | 127 | 
                      // document.getElementById('inputsearch').style = "width:calc(500px - 100px)"; | 
               | 
               | 
            
        
          | 128 | 
                  setTimeout(  | 
          114 | 
                  setTimeout(  | 
        
        
          | 129 | 
                      function(){ | 
          115 | 
                      function(){ | 
        
          
            
              | 130 | 
                              var offsetWidth = document.getElementById('buttonssearch').offsetWidth +5; | 
              116 | 
                              var offsetWidth = document.getElementById('taille').offsetWidth +5; | 
            
            
              | 131 | 
                              document.getElementById('inputsearch').style = "width:calc(500px - "+offsetWidth+"px)"; | 
              117 | 
                              document.getElementsByClassName('head-searchbox').style = "width:calc(500px - "+offsetWidth+"px)"; | 
            
        
          | 132 | 
                      }  | 
          118 | 
                      }  | 
        
        
          | 133 | 
                  , 250);  | 
          119 | 
                  , 250);  | 
        
        
          | 134 | 
              }  | 
          120 | 
              }  | 
        
        
          | 135 | 
           | 
          121 | 
           | 
        
            
               | 
               | 
              122 | 
                  function taille(el){ | 
            
            
              | 123 | 
                      var offsetWidth = document.getElementById('taille').offsetWidth +5; | 
            
            
              | 124 | 
                      el.style = "width:calc(500px - "+offsetWidth+"px)";  | 
            
            
              | 125 | 
                  }  | 
            
            
              | 126 | 
               | 
            
            
              | 127 | 
                  $('.btn').click(function(){ | 
            
            
              | 128 | 
                  if($(this).hasClass('active')){ | 
            
            
              | 129 | 
                      $(this).removeClass('active') | 
            
            
              | 130 | 
                  } else { | 
            
            
              | 131 | 
                      $(this).addClass('active') | 
            
            
              | 132 | 
                  }  | 
            
            
              | 133 | 
              });  | 
            
            
              | 134 | 
               | 
            
            
              | 135 | 
               | 
            
        
          | 136 | 
           | 
          136 | 
           | 
        
        
          | 137 | 
          </script>  | 
          137 | 
          </script>  | 
        
        
          | 138 | 
           | 
          138 | 
           |