From bb70a3b022bf974fdabc0dfab952f7f765bc3c39 Mon Sep 17 00:00:00 2001
From: Fabiano <fabianocarvalho15@gmail.com>
Date: Thu, 14 Jun 2018 12:58:33 -0300
Subject: [PATCH] Change banner to function and add js to display show and hide
 form.

---
 src/assets/js/js.js                 | 21 +++++++++++++++++++-
 src/functions.php                   | 30 +++++++++++++++++++++++++++++
 src/header.php                      |  5 +++++
 src/template-parts/bannerHeader.php | 17 ++++------------
 4 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/assets/js/js.js b/src/assets/js/js.js
index c42ab80..6ee72ad 100644
--- a/src/assets/js/js.js
+++ b/src/assets/js/js.js
@@ -52,6 +52,23 @@ jQuery(document).ready(function( $ ) {
         });
     });
     
+    $('.showInput').on('click', function(){
+        $('.tainacan-form-search').removeClass('d-none');
+        $('.tainacan-form-search').addClass('d-flex');
+        $(this).addClass('d-none');
+        $('.tainacan-form-search').animate({opacity: '1'}, "slow");
+        /* if($.trim($('.tainacan-input-search').val()).length){
+            $('#btn-reset').removeClass('d-none');
+        }else{
+            $('#btn-reset').addClass('d-none');
+        } */
+    });
+    $('.tainacan-input-search').on('blur', function(){
+        $('.tainacan-form-search').animate({opacity: '0'}, "slow", function(){
+            $('.showInput').removeClass('d-none');
+        });
+    });
+
     var config = {
         attributes: true,
         childList: true,
@@ -62,4 +79,6 @@ jQuery(document).ready(function( $ ) {
 
 });
 
-
+function showInput(){
+    this.removeClass = 'd-none';
+}
diff --git a/src/functions.php b/src/functions.php
index 104fb5d..e0d2b3d 100644
--- a/src/functions.php
+++ b/src/functions.php
@@ -167,6 +167,36 @@ function tainacan_get_logo() {
 	}
 }
 
+function tainacan_get_form_search(){
+    if(wp_is_mobile()){
+        $input = 'border-0';
+        $reset = 'border-0';
+        $submit = 'border-0';
+    }else{
+        $input = 'border-right-0 rounded-0';
+        $reset = 'border-left-0 border-right-0 rounded-0';
+        $submit = 'border border-left-0 rounded-0';
+    }
+
+    $form = '';
+    $form .= '<form class="tainacan-form-search d-none align-items-center">';
+        $form .= '<div id="test-form-search" class="d-flex justify-content-between">';
+            $form .= '<div id="input-search" class="w-100 pl-1">';
+                $form .= '<input class="form-control tainacan-input-search py-0 pr-0 '.$input.'" type="search" placeholder="Pesquisar no repositório" style="height:31px">';
+            $form .= '</div>';
+            if(wp_is_mobile()){
+                $form .= '<div id="btn-reset" class="d-none">';
+                    $form .= '<button type="reset" class="btn border bg-white tainacan-button-search '.$reset.'"><i class="mdi mdi-close"></i></button>';
+                $form .= '</div>';
+            }
+            $form .= '<div id="btn-submit" class="mr-1">';
+                $form .= '<button id="btn-submit-search" class="btn text-heavy-metal bg-white pl-0 pr-1 tainacan-button-search py-0 '.$submit.'"><i class="mdi mdi-magnify"></i></button>';
+            $form .= '</div>';
+        $form .= '</div>';
+    $form .= '</form>';
+    return $form;
+}
+
 /**
  * Change logo class function
  *
diff --git a/src/header.php b/src/header.php
index 4f7052e..69e3cd1 100644
--- a/src/header.php
+++ b/src/header.php
@@ -17,6 +17,11 @@
         <div class="container-fluid max-large px-0">
             <?php echo tainacan_get_logo(); ?>
             <div class="btn-group ml-auto"> 
+                <?php 
+                    if(!wp_is_mobile())
+                        echo tainacan_get_form_search();
+                ?>
+                <button class="btn btn-link text-heavy-metal px-1 showInput"><i class="mdi mdi-magnify"></i></button>
                 <button type="button" class="btn btn-link text-heavy-metal dropdown-toggle dropdown-toggle-split px-1 d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="mdi mdi-account-outline"></i><div class="d-none d-md-inline-flex px-1">User</div><span class="sr-only text-jelly-bean">Toggle Dropdown</span>
                 </button>
diff --git a/src/template-parts/bannerHeader.php b/src/template-parts/bannerHeader.php
index 5403013..9d1771e 100644
--- a/src/template-parts/bannerHeader.php
+++ b/src/template-parts/bannerHeader.php
@@ -1,16 +1,7 @@
-<form class="tainacan-form-search d-sm-none">
-    <div class="d-flex justify-content-between">
-        <div class="w-100 pt-1 mt-2 pl-1">
-            <input class="form-control h-75 tainacan-input-search py-0 border-0" type="search" placeholder="Pesquisar">
-        </div>
-        <div class="pt-1 mt-2 ml-1">
-            <button type="reset" class="btn h-75 pt-0 pr-0 border-0 bg-white tainacan-button-search" onclick=""><i class="mdi mdi-close"></i></button>
-        </div>
-        <div class="pt-1 mt-2 mx-1">
-            <button type="submit" class="btn h-75 pt-0 border-0 text-heavy-metal bg-white tainacan-button-search" onclick=""><i class="mdi mdi-magnify"></i></button>
-        </div>
-    </div>
-</form>
+<?php 
+    if(wp_is_mobile())
+        echo tainacan_get_form_search();
+?>
 
 <div <?php if ( get_header_image() ) : ?>class="page-header header-filter clear-filter page-height" style="background-image: url('<?php header_image(); ?>')"<?php else: ?>class="page-header header-filter clear-filter" style="background-image: url('<?php echo get_template_directory_uri() ?>/assets/images/capa.png')"<?php endif; ?>>
     <div class="container-fluid p-0 mb-5">