Merge pull request #12 from Nikschavan/issue-1

Toggle the search form on search icon click
brainstormforce · Aug 6, 2017 · 0960a6d · 0960a6d
2 parents 352c5fc + 122e00e
commit 0960a6d
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 33 deletions.
diff --git a/assets/css/customizer-search-admin.css b/assets/css/customizer-search-admin.css
@@ -4,17 +4,71 @@
 }
 
 .customizer-search-section {
-	padding: 10px;
+    padding: 10px;
 }
 
 .customizer-search-input {
-	width: 75%
+    width: 77%
 }
 
 .customizer-search-section {
-	padding: 10px;
+    padding: 10px;
 }
 
 .customize-pane-parent {
-	overflow: inherit;
+    overflow: inherit;
+}
+
+#customize-controls .customize-info .customize-search-toggle {
+    padding: 20px;
+}
+
+#customize-controls .customize-info .customize-search-toggle {
+    position: absolute;
+    bottom: 4px;
+    right: 1px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    box-shadow: none;
+    -webkit-appearance: none;
+    background: transparent;
+    color: #555d66;
+    border: none;
+}
+
+#customize-controls .customize-info .customize-search-toggle:before {
+    padding: 4px;
+}
+
+#customize-controls .customize-info .customize-search-toggle:before {
+    position: absolute;
+    top: 5px;
+    left: 6px;
+}
+
+#accordion-section-customizer-search {
+    margin-bottom: 0;
+    color: #555d66;
+    background: #fff;
+    padding: 12px 15px;
+    border-top: 1px solid #ddd;
+}
+
+#accordion-section-customizer-search .accordion-section-title:after {
+    content: none;
+}
+
+.customizer-search-section {
+    padding: 0;
+}
+
+.search-not-found {
+    height: 0;
+    transition: height 0.3s ease-in-out;
+}
+
+.search-found {
+    height: 100%;
+    transition: height 0.3s ease-in-out;
 }
diff --git a/assets/js/customizer-search-admin.js b/assets/js/customizer-search-admin.js
@@ -50,6 +50,10 @@
             $(document).on('click', '.clear-search', function (event) {
                 CustomizerSearchAdmin._clearSearch();
             });
+
+            $(document).on('click', '.customize-search-toggle', function (event) {
+                CustomizerSearchAdmin._display_search_form();
+            });
         },
 
         /**
@@ -60,7 +64,7 @@
          * @method _bind
          */
         _bind: function () {
-            wp.customize.previewer.targetWindow.bind($.proxy(this._showHeaderFooterMessage, this));
+            wp.customize.previewer.targetWindow.bind($.proxy(this._showSearchButtonToggle, this));
         },
 
         /**
@@ -69,16 +73,35 @@
          *
          * @since 1.0.0
          * @access private
-         * @method _showHeaderFooterMessage
+         * @method _showSearchButtonToggle
          */
-        _showHeaderFooterMessage: function () {
-            var template = wp.template('fl-theme-builder-header-footer-message');
+        _showSearchButtonToggle: function () {
+            var template = wp.template('search-button');
+            if ($('#customize-info .accordion-section-title .customize-search-toggle').length == 0) {
+                $('#customize-info .accordion-section-title').append(template());
+            }
 
-            if ($('#accordion-section-customizer-search').length == 0) {
-                $('#accordion-section-themes').after(template());
+            var template = wp.template('search-form');
+            if ($('#customize-info #accordion-section-customizer-search').length == 0) {
+                $('#customize-info .customize-panel-description').after(template());
             }
         },
 
+        _display_search_form: function () {
+
+            if ($('#accordion-section-customizer-search').hasClass('open')) {
+                $('#accordion-section-customizer-search').removeClass('open')
+                $('#accordion-section-customizer-search').slideUp('fast');
+            } else {
+                $('.customize-panel-description').removeClass('open');
+                $('.customize-panel-description').slideUp('fast');
+
+                $('#accordion-section-customizer-search').addClass('open');
+                $('#accordion-section-customizer-search').slideDown('fast');
+            }
+
+        },
+
         /**
          * Search for key inside an array.
          *

diff --git a/templates/admin-customize-js-templates.php b/templates/admin-customize-js-templates.php
@@ -8,34 +8,21 @@
 
 ?>
 
-<script type="text/html" id="tmpl-fl-theme-builder-header-footer-message">
-	<div id="accordion-section-customizer-search" style="display: block;">
-		<h3 class="customizer-search-section accordion-section-title">
+<script type="text/html" id="tmpl-search-button">
+
+	<button type="button" class="customize-search-toggle dashicons dashicons-search" aria-expanded="false"><span class="screen-reader-text">Search</span></button>
+
+</script>
+
+<script type="text/html" id="tmpl-search-form">
+	<div id="accordion-section-customizer-search" style="display: none;">
+		<h4 class="customizer-search-section accordion-section-title">
 			<span class="search-input"><?php _e( 'Search', 'customizer-search' ); ?></span>
 			<span class="search-field-wrapper">
 				<input type="text" placeholder="<?php _e( 'Search...', 'customizer-search' ); ?>" name="customizer-search-input" autofocus="autofocus" id="customizer-search-input" class="customizer-search-input">
 				<button type="button" class="button clear-search" tabindex="0"><?php _e( 'Clear', 'customizer-search' ); ?></button>
 			</span>
 
-		</h3>
+		</h4>
 	</div>
-	<style type="text/css">
-		#accordion-section-customizer-search {
-			margin-bottom: 0;
-		}
-
-		#accordion-section-customizer-search .accordion-section-title:after{
-			content: none;
-		}
-
-		.search-not-found {
-			height: 0;
-			transition: height 0.3s ease-in-out;
-		}
-
-		.search-found {
-			height: 100%;
-			transition: height 0.3s ease-in-out;
-		}
-	</style>
 </script>