Merge branch 'develop'

greenpeace · Oct 11, 2019 · 54b0a4f · 54b0a4f
2 parents ef6813f + 8c183ba
commit 54b0a4f
Show file tree

Hide file tree

Showing 12 changed files with 427 additions and 283 deletions.
diff --git a/classes/class-p4ct-search.php b/classes/class-p4ct-search.php
@@ -617,23 +617,24 @@ protected function set_general_context( &$context ) {
 					'order' => 'DESC',
 				],
 			];
-
-			$context['strings'] = [
-				'issue'           => __( 'issue', 'gpea_theme' ),
-				'topic'           => __( 'topic', 'gpea_theme' ),
-				'posts'           => __( 'posts', 'gpea_theme' ),
-				'advanced_search' => __( 'advanced_search', 'gpea_theme' ),
-				'filters'         => __( 'filters', 'gpea_theme' ),
-				'none'            => __( 'None', 'gpea_theme' ),
-				'start_typing'    => __( 'Start typing', 'gpea_theme' ),
-				'search_label'  => __( 'Search', 'gpea_theme' ),
-				'reset_filters' => __( 'Reset Filters', 'gpea_theme' ),
-				'sort_by'       => __( 'Sort by', 'gpea_theme' ),
-				'nothing_found' => __( 'Nothing found, sorry.', 'gpea_theme' ),
-				'any'           => __( 'Any', 'gpea_theme' ),
-				'any_issue'     => __( 'Any issue', 'gpea_theme' ),
-				'any_topic'     => __( 'Any topic', 'gpea_theme' ),
-			];
+			$context['is_search_page'] = '1';
+
+			// $context['strings'] = [
+			// 	'issue'           => __( 'issue', 'gpea_theme' ),
+			// 	'topic'           => __( 'topic', 'gpea_theme' ),
+			// 	'posts'           => __( 'posts', 'gpea_theme' ),
+			// 	'advanced_search' => __( 'advanced_search', 'gpea_theme' ),
+			// 	'filters'         => __( 'filters', 'gpea_theme' ),
+			// 	'none'            => __( 'None', 'gpea_theme' ),
+			// 	'start_typing'    => __( 'Start typing', 'gpea_theme' ),
+			// 	'search_label'  => __( 'Search', 'gpea_theme' ),
+			// 	'reset_filters' => __( 'Reset Filters', 'gpea_theme' ),
+			// 	'sort_by'       => __( 'Sort by', 'gpea_theme' ),
+			// 	'nothing_found' => __( 'Nothing found, sorry.', 'gpea_theme' ),
+			// 	'any'           => __( 'Any', 'gpea_theme' ),
+			// 	'any_issue'     => __( 'Any issue', 'gpea_theme' ),
+			// 	'any_topic'     => __( 'Any topic', 'gpea_theme' ),
+			// ];
 
 			if ( $this->search_query ) {
 				$context['page_title'] = sprintf(
@@ -941,15 +942,16 @@ function( $issue ) {
 
 		/**
 		 * Load assets only on the search page.
+		 * Update 8/9/2019: on ALL pages -> moved to class-p4ct-site.php
 		 */
 		public function enqueue_public_assets() {
-			if ( is_search() ) {
-				$js_creation = filectime( get_stylesheet_directory() . '/static/js/search.js' );
+			// if ( is_search() ) {
+				// $js_creation = filectime( get_stylesheet_directory() . '/static/js/search.js' );
 
-				wp_register_script( 'search-script', get_stylesheet_directory_uri() . '/static/js/search.js', [], $js_creation, true );
-				wp_localize_script( 'search-script', 'localizations', $this->localizations );
-				wp_enqueue_script( 'search-script' );
-			}
+				// wp_register_script( 'search-script', get_stylesheet_directory_uri() . '/static/js/search.js', [], $js_creation, true );
+				// wp_localize_script( 'search-script', 'localizations', $this->localizations );
+				// wp_enqueue_script( 'search-script' );
+			// }
 		}
 	}
 }
diff --git a/classes/class-p4ct-site.php b/classes/class-p4ct-site.php
@@ -18,6 +18,8 @@ class P4CT_Site {
 	 */
 	protected $services;
 
+	const SHOW_SCROLL_TIMES     = 2;
+
 	/**
 	 * P4CT_Site constructor.
 	 *
@@ -87,7 +89,7 @@ protected function hooks() {
 		remove_action( 'wp_ajax_get_paged_posts', [ 'P4MT\P4_ElasticSearch', 'get_paged_posts' ] );
 		remove_action( 'wp_ajax_nopriv_get_paged_posts', [ 'P4MT\P4_ElasticSearch', 'get_paged_posts' ] );
 		add_action( 'wp_ajax_get_paged_posts', [ 'P4CT_ElasticSearch', 'get_paged_posts' ] );
-		add_action( 'wp_ajax_nopriv_get_paged_posts', [ 'P4CT_ElasticSearch', 'get_paged_posts' ] );		
+		add_action( 'wp_ajax_nopriv_get_paged_posts', [ 'P4CT_ElasticSearch', 'get_paged_posts' ] );
 
 	}
 
@@ -223,6 +225,25 @@ public function add_to_context( $context ) {
 			'my_preferences' => __( 'My Preferences', 'gpea_theme' ),
 		];
 
+		$context['search_strings'] = [
+			'issue'           => __( 'issue', 'gpea_theme' ),
+			'topic'           => __( 'topic', 'gpea_theme' ),
+			'posts'           => __( 'posts', 'gpea_theme' ),
+			'advanced_search' => __( 'advanced_search', 'gpea_theme' ),
+			'filters'         => __( 'filters', 'gpea_theme' ),
+			'none'            => __( 'None', 'gpea_theme' ),
+			'start_typing'    => __( 'Start typing', 'gpea_theme' ),
+			'search_label'  => __( 'Search', 'gpea_theme' ),
+			'reset_filters' => __( 'Reset Filters', 'gpea_theme' ),
+			'sort_by'       => __( 'Sort by', 'gpea_theme' ),
+			'nothing_found' => __( 'Nothing found, sorry.', 'gpea_theme' ),
+			'any'           => __( 'Any', 'gpea_theme' ),
+			'any_issue'     => __( 'Any issue', 'gpea_theme' ),
+			'any_topic'     => __( 'Any topic', 'gpea_theme' ),
+		];
+
+
+
 		return $context;
 	}
 
@@ -293,6 +314,7 @@ public function enqueue_admin_assets( $hook ) {
 	public function enqueue_public_assets( $hook ) {
 		$css_creation = filectime( get_stylesheet_directory() . '/static/css/style.css' );
 		$js_creation = filectime( get_stylesheet_directory() . '/static/js/script.js' );
+		$search_js_creation = filectime( get_stylesheet_directory() . '/static/js/search.js' );
 
 		$css_fonts = gpea_get_option( 'gpea_css_fonts' ) ? gpea_get_option( 'gpea_css_fonts' ) : 'hk-fonts.css';
 		wp_enqueue_style( 'child-style-fonts', get_stylesheet_directory_uri() . '/static/css/' . $css_fonts, [], $css_creation );
@@ -301,6 +323,13 @@ public function enqueue_public_assets( $hook ) {
 		wp_localize_script( 'child-script', 'localizations', [
 			'ajaxurl' => admin_url( 'admin-ajax.php' ),
 		]);
+
+		wp_register_script( 'search-script', get_stylesheet_directory_uri() . '/static/js/search.js', [], $search_js_creation, true );
+		wp_localize_script( 'search-script', 'localizations', [
+			'ajaxurl'           => admin_url( 'admin-ajax.php' ),
+			'show_scroll_times' => self::SHOW_SCROLL_TIMES,
+		] );
+		wp_enqueue_script( 'search-script' );
 	}
 
 	/**

diff --git a/frontend/js/components/dynamic-search.js b/frontend/js/components/dynamic-search.js
@@ -0,0 +1,28 @@
+const $ = jQuery;
+window.over_sb = null; // fix issue with jQuery autoComplete v1.0.7
+
+export default function() {
+  const $dynamicSearch = $('.dynamic-search');
+  const $dynamicSearchTrigger = $('.js-dynamic-search');
+  const $dynamicSearchClose = $('.js-close-dynamic-search');
+
+  $dynamicSearchTrigger.on('click', function(e) {
+    if ($dynamicSearch.length) {
+      $dynamicSearch.toggleClass('is-visible');
+      $(document.body).toggleClass('has-open-dynamic-search');
+    }
+
+    setTimeout(() => {
+      $('#search_input').focus();
+    }, 100);
+
+    e.preventDefault();
+  });
+
+  $dynamicSearchClose.on('click', function(e) {
+    $('#search_input').blur();
+    $dynamicSearch.removeClass('is-visible');
+    $(document.body).removeClass('has-open-dynamic-search');
+    e.preventDefault();
+  });
+}
diff --git a/frontend/js/index.js b/frontend/js/index.js
@@ -30,6 +30,7 @@ import parallax from './components/parallax';
 import scrollWay from './components/scroll-way';
 import articleList from './components/article-list';
 import facebookVideo from './components/facebook-video';
+import dynamicSearch from './components/dynamic-search';
 
 import petitionThankyou from './petition-thankyou';
 
@@ -97,6 +98,8 @@ document.addEventListener('DOMContentLoaded', function(event) {
 
   facebookVideo();
 
+  dynamicSearch();
+
   AOS.init({
     easing: 'ease-in-out-cubic',
     once: true,

diff --git a/frontend/scss/_general.scss b/frontend/scss/_general.scss
@@ -35,6 +35,10 @@ body {
       overflow: hidden;
     }
   }
+
+  &.has-open-dynamic-search {
+    overflow: hidden;
+  }
 }
 
 h1,

diff --git a/frontend/scss/_page-search.scss b/frontend/scss/_page-search.scss
@@ -1,4 +1,5 @@
-body.search {
+body.search,
+.dynamic-search {
   .live-search,
   .advanced-search {
     padding: 20px 0;
@@ -133,3 +134,61 @@ body.search {
     }
   }
 }
+
+.dynamic-search {
+  position: fixed;
+  top: 96px; // see _header.scss
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.7);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 200ms linear, visibility 0ms linear 240ms;
+
+  &.is-visible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 200ms linear, visibility 0ms linear 0ms;
+  }
+
+  @include greaterThan('sm') {
+    top: 50px; // see _header.scss
+  }
+
+  .live-search {
+    max-height: 100%;
+    // overflow-y: scroll;
+    overflow-y: auto;
+    transform: translateY(-20px);
+    transition: transform 140ms ease-in-out;
+
+    @include lessThan('sm') {
+      .ct-container {
+        position: relative;
+      }
+    }
+  }
+
+  &.is-visible .live-search {
+    transform: translateY(0);
+  }
+
+  .close-dynamic-search-button {
+    position: absolute;
+    top: 0px;
+    right: 20px;
+    margin: 0;
+    padding: 5px;
+    border: none;
+    background: transparent;
+    font-size: 24px;
+    z-index: 4;
+    cursor: pointer;
+
+    @include greaterThan('sm') {
+      top: 14px;
+    }
+  }
+}
diff --git a/static/css/style.css b/static/css/style.css
diff --git a/static/css/style.css.map b/static/css/style.css.map
diff --git a/static/js/script.js b/static/js/script.js
diff --git a/templates/blocks/section-live-search.twig b/templates/blocks/section-live-search.twig
@@ -0,0 +1,61 @@
+<section class="live-search">
+
+	<div class="ct-container">
+
+		{% if not is_search_page %}
+			<button class="close-dynamic-search-button js-close-dynamic-search" aria-label="Close dynamic search">
+				<span class="icon-close"></span>
+			</button>
+		{% endif %}
+
+		<h2 class="search-title">{{ search_strings.search_label }}</h2>
+
+		<!-- We also included results for: -->
+		<!-- Does this even work? -->
+		{% if ( corrected_term ) %}
+			{{ corrected_term }}
+		{% endif %}
+
+		<form
+				id="search_form_inner" role="search" action="{{ data_nav_bar.home_url }}">
+			<!-- Main search field -->
+			<div class="form-group search fluid">
+				<input id="search_input" class="search-autocomplete" type="search" name="s" placeholder="{{ search_strings.start_typing }}" value="{{ search_query|e('wp_kses_post')|raw }}">
+				<button class="button primary" type="submit">{{ search_strings.search_label }}</button>
+			</div>
+
+			<div class="lds-spinner">
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+			</div>
+		</form>
+
+		<div hidden id="ajax-search-issues" class="fade-out">
+			<h5>
+				{{ search_strings.issue }}
+			</h5>
+			<div class="results-list"></div>
+		</div>
+
+		<div hidden id="ajax-search-topics" class="fade-out">
+			<h5>{{ search_strings.topic }}</h5>
+			<div class="results-list"></div>
+		</div>
+
+		<div hidden id="ajax-search-posts" class="fade-out">
+			<h5>{{ search_strings.posts }}</h5>
+			<div class="results-list"></div>
+		</div>
+
+	</div>
+</section>