Begins implementation of new search form.

src/assets/js/search-bar-redirect.js

@@ -0,0 +1,24 @@
+function onTainacanSearchSubmit($event) {
+	
+	if (document['tainacan-search-form']) {
+
+        if (document['tainacan-search-form'].archive && defined ( 'TAINACAN_VERSION' )) {
+            switch (document['tainacan-search-form'].archive.value) {
+                case 'tainacan-items':
+                    document['tainacan-search-form'].action = tainacan_plugin.theme_items_list_url + (document['tainacan-search-form'].s ? '?search=' + document['tainacan-search-form'].s.value : '');
+                    break;
+                case 'tainacan-collections':
+                    document['tainacan-search-form'].action = tainacan_plugin.theme_collection_list_url + (document['tainacan-search-form'].s ? '?s=' +  document['tainacan-search-form'].s.value : '');
+                    break;
+                case 'posts':
+                default:
+                    document['tainacan-search-form'].action = '/' + (document['tainacan-search-form'].s ? '?s=' +  document['tainacan-search-form'].s.value : '');
+            }
+        } else {
+            document['tainacan-search-form'].action = '/' + (document['tainacan-search-form'].s ? '?s=' +  document['tainacan-search-form'].s.value : '');
+        }
+    
+	    $event.preventDefault();
+    }
+	return true;
+}

src/assets/scss/_post.scss

@@ -866,7 +866,7 @@
                     h4,
                     label {
                         color: #454647;
-                        font-size: 0.875rem;
+                        font-size: 0.85rem;
                         font-weight: 500;
                         padding-right: 0.875rem;
                         width: 100%;

src/assets/scss/style.scss

@@ -263,16 +263,25 @@ nav{
             }
         }
     }
-    .tainacan-search-form {
+    @keyframes searchFormAppear {
-        .form-control {
+        from {
-            height: 27px;
+            max-height: 0px;
-            font-size: 0.875rem;
+            max-height: 0vh;
-            font-weight: 400;
+            opacity: 0;
-            color: #898d8f;
+            width: 32px;
+            right: 0px;
+        }
+        to {
+            opacity: 1.0;
+            max-height: 400px;
+            max-height: 100vh;
+            width: 260px;
+            right: -4px;
         }
     }
     .tainacan-form-dropdown {
         #dropdownMenuLink {
+            padding-right: 0.25rem !important;
             &::after {
                 content: none;
             }
@@ -282,26 +291,64 @@ nav{
             .tainacan-icon-close { display: none; }
         }
         > .dropdown-menu {
-            top: calc(100% + 2px);
+            top: 0;
-            right: 0;
+            right: -4px;
-            width: 204px;
+            width: 260px;
-            height: 27px;
+            height: auto;
             padding: 0;
             left: inherit;
+            overflow: hidden;
+
             .input-group {
-                border: 0;
+                background: white;
+                padding: 0rem;
+                align-items: center;
+                height: 2.75rem;
             }
             .form-control {
+                height: 100%;
                 border-radius: 0;
                 font-size: 0.875rem;
                 font-weight: 400;
                 color: #898d8f;
+                padding-right: 2rem;
+
+                &:focus {
+                    color: #454647;
+                    box-shadow: none;
+                    border: 1px solid #555758 !important;
+                }
+            }
+            .search-controls {
+                background: #f2f2f2;
+                border-bottom: 1px solid #dee2e6;
+                border-left: 1px solid #dee2e6;
+                border-right: 1px solid #dee2e6;
+                padding: 0.75rem 0.875rem 0.125rem 0.875rem;
+                font-size: 0.75rem;
+                display: flex;
+                flex-direction: column;
+                label {
+                    white-space: nowrap;
+                    display: flex;
+                    input {
+                        margin-right: 0.5rem;
+                    }
+                }
+            }
+            &.show {
+               animation: searchFormAppear 0.4s ease;
             }
         }
 
         &.show {
+            .input-group-append { display: none !important; }
             .tainacan-icon-search { display: none; }
-            .tainacan-icon-close { display: block !important; }
+            .tainacan-icon-close {
+                position: relative;
+                z-index: 999999; 
+                display: block !important;
+            }
         }
     }
     .dropdown-item:hover {
@@ -316,7 +363,9 @@ nav{
 
                 > li{
                     &.menu-item {
-                        padding-left: 42px;
+                        @media screen and (min-width: 769px){
+                            padding-left: 42px;   
+                        }
 
                         a {
                             font-size: 0.875rem;
@@ -358,6 +407,7 @@ nav{
                         @media only screen and (max-width: 1024px) {
                             padding-right: 4.1666667%;
                             padding-right: 4.1666667vw;
+                            padding-left: 0;
                         }
                         @media only screen and (max-width: 768px) {
                             padding-right: 0;
@@ -383,8 +433,8 @@ nav{
             }
             @media only screen and (max-width: 768px) {
                 position: absolute;
-                top: 42px;
+                top: 48px;
-                right: 0;
+                right: -24px;
                 border: 1px solid #dbdbdb;
                 background-color: #fff;
                 z-index: 3;
@@ -471,9 +521,7 @@ nav{
         margin-right: 32px !important; 
     }
 
-    .tainacan-icon-menu,
+    .tainacan-icon {
-    .tainacan-icon-close {
-        margin-top: -4px;
         color: #01295C !important;
     }
 
@@ -493,69 +541,6 @@ nav{
     border-bottom: 1px solid #ededed !important;
 }
 
-.tainacan-search-form {
-    width: 32px;
-    height: 32px;
-    position: relative;
-
-    .input-group {
-        transition: all 0.35s, border-radius 0s;
-        width: 32px;
-        height: 32px;
-        cursor: pointer;
-        background-color: #fff;
-        position: absolute;
-        top: 0;
-        right: 0;
-        overflow: hidden;
-        border: 1px solid transparent;
-        //box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
-        //border-radius: 25px;
-        //border: 1px solid #ccc;
-        .form-control {
-            //margin-left: -25px;
-            border:none;
-            background: transparent;
-            box-shadow: none;
-            display:block;
-            padding: 1rem 2rem;
-            padding-left: 1rem;
-            &::-webkit-input-placeholder {
-                display: none;
-            }
-            &:-moz-placeholder {
-                /* Firefox 18- */
-                display: none;
-            }
-            &:-ms-input-placeholder {
-                display: none;
-            }
-        }
-        &:hover, &.hover {
-            width: 350px;
-            //border-radius: 25px 25px 25px 25px;
-            border: 1px solid #ccc;
-        }
-        .form-control-feedback {
-            position: absolute;
-            top: 0;
-            right: 0;
-            display: block;
-            width: 30px;
-            height: 30px;
-            text-align: center;
-            font-size: 1.1875rem;
-
-            &:before {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%,-50%);
-            }
-        }
-    }
-}
-
 
 .page-header {
     height: 200px;

src/functions.php

@@ -152,7 +152,7 @@ if ( ! function_exists( 'tainacan_setup' ) ) {
 		add_theme_support( 'custom-units' );
 		add_theme_support( 'editor-style' );
 		add_editor_style( 'editor-style.css' );
-		
+
 	}
 } // End if().
 add_action( 'after_setup_theme', 'tainacan_setup' );
@@ -191,12 +191,9 @@ add_action( 'admin_head', 'tainacan_customize_editor_css');
  * @param object $query The main WordPress query.
  */
 function tainacan_include_items_in_search_results( $query ) {
-
+	if ( $query->is_main_query() && $query->is_search() && ! is_admin()) {
-	if ( get_theme_mod( 'tainacan_search_include_items', false ) ) {	
+		$collections_post_types = \Tainacan\Repositories\Repository::get_collections_db_identifiers();
-		if ( $query->is_main_query() && $query->is_search() && ! is_admin() ) {
+		$query->set( 'post_type', array_merge( ['post'], $collections_post_types ) );
-			$collections_post_types = \Tainacan\Repositories\Repository::get_collections_db_identifiers();
-			$query->set( 'post_type', array_merge( ['post'], $collections_post_types ) );
-		}
 	}
 }
 add_action( 'pre_get_posts', 'tainacan_include_items_in_search_results' );

src/functions/enqueues.php

@@ -58,6 +58,7 @@ if ( ! function_exists( 'tainacan_enqueues' ) ) {
 			wp_register_script( 'tainacan_tainacanJS', get_template_directory_uri() . '/assets/js/js.js', '', TAINACAN_INTERFACE_VERSION, true );
 			wp_enqueue_script( 'tainacan_tainacanJS' );
 
+			wp_enqueue_script( 'tainacan_searchBarRedirect', get_template_directory_uri() . '/assets/js/search-bar-redirect.js', [] , TAINACAN_INTERFACE_VERSION, false );
 			wp_enqueue_script( 'tainacan_copyLink', get_template_directory_uri() . '/assets/js/copy-link.js', [] , TAINACAN_INTERFACE_VERSION, false );
 			wp_localize_script( 'tainacan_copyLink', 'tainacan_copyLinkVars', array(
 				'linkCopied' => __( 'Copied! Link sent to the transfer area.', 'tainacan-interface' )

src/header.php

@@ -19,9 +19,7 @@
 				<?php if ( has_nav_menu( 'navMenubelowHeader' ) ) : ?>
 					<nav class="navbar navbar-expand-md navbar-light px-0 menu-belowheader" role="navigation">
 						<div class="container-fluid max-large px-0 margin-one-column">
-							<!-- Brand and toggle get grouped for better mobile display -->	
+							<button class="navbar-toggler text-heavy-metal border-0 p-2 collapsed" type="button" data-toggle="collapse" data-target="#menubelowHeader" aria-controls="menubelowHeader" aria-expanded="false" aria-label="<?php _e('Open navigation menu', 'tainacan-interface') ?>">
-							<!-- <a class="navbar-brand d-md-none" href="#"></a> -->
-							<button class="navbar-toggler text-heavy-metal border-0 px-2 pt-2 collapsed" type="button" data-toggle="collapse" data-target="#menubelowHeader" aria-controls="menubelowHeader" aria-expanded="false" aria-label="Toggle navigation">
 								<span class="tainacan-icon tainacan-icon-menu"></span>
 								<span class="tainacan-icon tainacan-icon-close"></span>
 							</button>
@@ -43,19 +41,11 @@
 				<div class="btn-group" style="padding: 0.6rem 0rem;">
 				
 				<?php if (!get_theme_mod('tainacan_hide_search_input', false)) : ?>
-					<form class="form-horizontal my-2 my-md-0 tainacan-search-form d-none d-md-block" [formGroup]="searchForm" role="form" (keyup.enter)="onSubmit()" action="<?php echo esc_url( home_url( '/' ) ); ?>">
+					<div class="dropdown tainacan-form-dropdown">
-						<div class="input-group">
+						<button class="btn btn-link text-midnight-blue px-1 dropdown-toggle" type="button" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-							<input type="text" name="s" placeholder="<?php esc_attr_e( 'Search', 'tainacan-interface' ); ?>" class="form-control" formControlName="searchText" size="50">
-							<span class="text-midnight-blue input-group-btn icon form-control-feedback">
-								<i class="tainacan-icon tainacan-icon-search"></i>
-							</span>
-						</div>
-					</form>
-					<div class="dropdown tainacan-form-dropdown d-md-none">
-						<a class="btn btn-link text-midnight-blue px-1 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="tainacan-icon tainacan-icon-search"></i>
 							<i class="tainacan-icon tainacan-icon-close"></i>
-						</a>
+						</button>
 						<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
 							<?php get_search_form(); ?>
 						</div>

src/searchform.php

@@ -1,10 +1,44 @@
-<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
+<form role="search" method="post" name="tainacan-search-form" class="search-form" onsubmit="return onTainacanSearchSubmit()">
-	<div class="input-group border">
+	<div class="input-group">
-		<input class="form-control py-2 border-0" type="search" name="s" placeholder="<?php esc_attr_e( 'Search', 'tainacan-interface' ); ?>" id="tainacan-search">
+		<input class="form-control py-2" type="search" name="s" placeholder="<?php esc_attr_e( 'Search', 'tainacan-interface' ); ?>" id="tainacan-search">
 		<span class="input-group-append d-none d-md-block">
-			<button class="btn btn-outline-secondary border-0 border bg-white" type="submit">
+			<button class="btn btn-outline-secondary bg-white" type="submit">
 				<i class="tainacan-icon tainacan-icon-search" style="line-height: inherit;"></i>
 			</button>
 		</span>
 	</div>
+	<?php if ( defined ( 'TAINACAN_VERSION' ) ) : ?>
+		<div class="search-controls">
+
+			<label for="search-on-posts">
+				<input
+					type="radio" 
+					value="posts" 
+					name="archive"
+					checked="checked"
+					id="search-on-posts">
+				<?php _e( 'Site posts', 'tainacan-interface' ); ?>
+			</label>
+	
+			<label for="search-on-items">
+				<input
+					type="radio" 
+					value="tainacan-items" 
+					name="archive"
+					formaction="/items"
+					id="search-on-items">
+					<?php _e( 'Archive items', 'tainacan-interface' ); ?>
+			</label>
+
+			<label for="search-on-collections">
+				<input
+					type="radio" 
+					value="tainacan-collections" 
+					name="archive"
+					formaction="/collections"
+					id="search-on-collections">
+					<?php _e( 'Archive collections', 'tainacan-interface' ); ?>
+			</label>
+		</div>
+	<?php endif; ?>
 </form>