[WIP] Feature/1753 search tab v2

assets/css/scss/admin-views.scss

@@ -90,7 +90,7 @@ $gv-overlay-index: 10000;
 		background-color: #FFF;
 
 		&:hover {
-			.gv-grid-row-actions {
+			> .gv-grid-row-actions {
 				display: flex;
 			}
 		}
@@ -309,6 +309,7 @@ $gv-overlay-index: 10000;
 
 #edit-active-fields,
 #single-active-fields,
+#search-advanced-active-fields,
 #directory-footer-widgets {
 	margin-bottom: 0;
 }
@@ -1600,7 +1601,7 @@ $dialog-button-padding: 5px;
 
 .gv-dialog {
 
-	&.ui-widget-content > div {
+	&.ui-widget-content > div:not(.ui-tooltip) {
 		padding-left: $dialog-padding;
 		padding-right: $dialog-padding;
 	}
@@ -2339,3 +2340,19 @@ $dialog-button-padding: 5px;
 .post-type-gravityview #post-body.columns-2 #postbox-container-1 {
 	clear: left;
 }
+
+/**
+ * Search Bar
+ */
+#search-view {
+	display: none ;
+	.gv-field-duplicate {
+		display: none;
+	}
+	.gv-add-field {
+		display: inline-block;
+	}
+	[data-search-fields] & {
+		display: block;
+	}
+}

assets/js/admin-grid.js

@@ -56,7 +56,7 @@
 					dataType: 'json'
 				} )
 					.always( () => {
-						$add_row.removeClass( 'open' )
+						$add_row.removeClass( 'open' );
 						$add_row.find( '.gv-toggle' ).attr( 'aria-expanded', false );
 					} )
 					.done( ( response => {

assets/js/admin-views.js

@@ -269,15 +269,7 @@
 				   of: window
 			   } );
 
-			   // If dialog width is greater than 95% of window width, set to 95% window width
-			   var window_width = vcfg.dialogWidth;
-			   var ninety_five_per = $( window ).width() * 0.95;
-
-			   if ( vcfg.dialogWidth > ninety_five_per ) {
-				   window_width = ninety_five_per;
-			   }
-
-			   $open_dialog.dialog( 'option', 'width', window_width );
+				$open_dialog.dialog( 'option', 'width', vcfg.getDialogWidth( $open_dialog ) );
 		   });
 
 
@@ -310,6 +302,34 @@
 		   $( 'div .gform-dropdown__trigger' ).on( 'click.gravityforms', vcfg.sendMergeTagValueToCodemirrorEditor );
 	   },
 
+		/**
+		 * Returns the width of the dialog, based on the window size and field type.
+		 *
+		 * @since TODO
+		 *
+		 * @param $dialog
+		 * @returns {number|int}
+		 */
+		getDialogWidth: function( $dialog ) {
+
+			var dialog_width = viewConfiguration.dialogWidth;
+
+			// If the dialog is for the Search Bar widget, make it wider.
+			if ( $dialog.parents( '[data-fieldid="search_bar"]' ).length > 0 ) {
+				dialog_width = 1200;
+			}
+
+			// If dialog width is greater than 95% of window width, set to 95% window width.
+			var ninety_five_per = $( window ).width() * 0.95;
+
+			// If the dialog is greater than 95% of the window, set it to 95% window width.
+			if ( dialog_width > ninety_five_per ) {
+				return ninety_five_per;
+			}
+
+			return dialog_width;
+		},
+
 	   getCookieVal: function ( cookie ) {
 		   if ( ! cookie || cookie === 'undefined' || 'false' === cookie ) {
 			   return false;
@@ -540,15 +560,18 @@
 
 			   case 'mouseup':
 
-				   if ( // If clicking inside the dialog or tooltip
-					   $( e.target ).parents( '.ui-dialog,.ui-tooltip' ).length ||
-
-					   // Or on the dialog or tooltip itself
-					   $( e.target ).is( '.ui-dialog,.ui-tooltip' ) ) {
+				   if ( $( e.target ).closest( '.ui-tooltip' ).length) {
+					   // If clicked inside a tooltip.
 					   close = false;
+				   } else if ( $( e.target ).closest( '.ui-dialog' ).length) {
+					   // If clicked inside a dialog.
+					   if (activeTooltips.length > 0) {
+						   // And there are tooltips active, close only those.
+						   close = 'tooltips';
+					   }
 				   }
 
-					   // For tooltips, clicking on anything outside of the tooltip
+				   // For tooltips, clicking on anything outside the tooltip
 				   // should close it. Not for dialogs.
 				   else if ( activeTooltips.length > 0 ) {
 					   close = true;
@@ -582,10 +605,12 @@
 		   if ( close ) {
 
 			   // Close all open tooltips
-			   activeTooltips.gvTooltip( "close" );
+			   activeTooltips.gvTooltip( 'close' );
 
 			   // Close all open dialogs
-			   $( ".ui-dialog:visible" ).find( '.ui-dialog-content' ).dialog( "close" );
+			   if ( close !== 'tooltips' ) {
+				   $( '.ui-dialog:visible' ).find( '.ui-dialog-content' ).dialog( 'close' );
+			   }
 
 			   // Prevent scrolling window on click close
 			   if ( return_false ) {
@@ -993,16 +1018,7 @@
 			   appendTo: thisDialog.parent(),
 			   draggable: false,
 			   resizable: false,
-			   width: function () {
-
-				   // If the window is wider than {vcfg.dialogWidth}px, use vcfg.dialogWidth
-				   if ( $( window ).width() > vcfg.dialogWidth ) {
-					   return vcfg.dialogWidth;
-				   }
-
-				   // Otherwise, return the window width, less 10px
-				   return $( window ).width() - 10;
-			   },
+			   width: vcfg.getDialogWidth( thisDialog ),
 			   open: function () {
 				   $( '<div class="gv-overlay" />' ).prependTo( '#wpwrap' );
 
@@ -1223,6 +1239,11 @@
 		*/
 	   setupFieldDetails: function ( dialog ) {
 
+			// Don't show field details in the search bar dialog.
+			if ( dialog.parents( "[data-fieldid=\"search_bar\"]" ).length ) {
+				return;
+			}
+
 		   // Add the details to the title bar
 		   $( '.gv-field-details--container', dialog ).insertAfter( '.ui-dialog-title:visible' );
 
@@ -2008,6 +2029,8 @@
 				   var templateId = $( '#gravityview_directory_template' ).val();
 
 				   switch ( $( this ).attr( 'data-objecttype' ) ) {
+					   case 'search':
+						   return $( '#available-search-active-fields' ).html();
 					   case 'field':
 						   // If in Single context, show fields available in single
 						   // If it Directory, same for directory
@@ -2062,7 +2085,6 @@
 					   );
 				   }
 			   },
-			   closeOnEscape: true,
 			   disabled: true, // Don't open on hover
 			   position: {
 				   my: "center bottom",
@@ -2558,10 +2580,10 @@
 			   revert: 75,
 			   connectWith: ".active-drop-field",
 			   start: function( event, ui ) {
-				   $( panel ).find( ".active-drop-container-field" ).addClass('is-receivable');
+				   $( document.body ).find( ".active-drop-container-field" ).addClass('is-receivable');
 			   },
 			   stop: function( event, ui ) {
-				   $( panel ).find( ".active-drop-container-field" ).removeClass('is-receivable');
+				   $( document.body ).find( ".active-drop-container-field" ).removeClass('is-receivable');
 			   },
 			   change: function( event, ui ) {
 				   vcfg.setUnsavedChanges( true );
@@ -2582,6 +2604,39 @@
 				   vcfg.toggleDropMessage();
 			   }
 		   } );
+
+		   // Search fields.
+		   $( panel ).find( ".active-drop-search" ).sortable( {
+			   placeholder: "fields-placeholder",
+			   items: '> .gv-fields',
+			   distance: 2,
+			   revert: 75,
+			   connectWith: ".active-drop-search",
+			   start: function( event, ui ) {
+				   $( document.body ).find( ".active-drop-container-search" ).addClass('is-receivable');
+			   },
+			   stop: function( event, ui ) {
+				   $( document.body ).find( ".active-drop-container-search" ).removeClass('is-receivable');
+			   },
+			   change: function( event, ui ) {
+				   vcfg.setUnsavedChanges( true );
+			   },
+			   receive: function ( event, ui ) {
+				   // Check if field comes from another active area and if so, update name attributes.
+				   if ( ui.item.find( ".gv-dialog-options" ).length > 0 ) {
+
+					   var sender_area = ui.sender.attr( 'data-areaid' ), receiver_area = $( this ).attr( 'data-areaid' );
+
+					   ui.item.find( '[name^="searchs[' + sender_area + ']"]' ).each( function () {
+						   var name = $( this ).attr( 'name' );
+						   $( this ).attr( 'name', name.replace( sender_area, receiver_area ) );
+					   } );
+
+				   }
+
+				   vcfg.toggleDropMessage();
+			   }
+		   } )
 	   },
 
 	   toggleDropMessage: function () {
@@ -2605,7 +2660,7 @@
 		   e.preventDefault();
 
 		   var vcfg = viewConfiguration;
-		   var area = $( e.currentTarget ).parents( ".active-drop" );
+		   var area = $( e.currentTarget ).parentsUntil( ".active-drop" ).parent();
 
 		   vcfg.setUnsavedChanges( true );
 
@@ -2616,7 +2671,7 @@
 			   return;
 		   }
 
-		   $( e.currentTarget ).parents( '.gv-fields' ).fadeOut( 'fast', function () {
+			$( e.currentTarget ).parentsUntil( '.gv-fields' ).parent().fadeOut( 'fast', function () {
 
 			   $( this ).remove();
 
@@ -2677,6 +2732,11 @@
 	   openFieldSettings: function ( e ) {
 		   e.preventDefault();
 
+		   // Don't open a dialog for search field settings.
+		   if ( $( e.currentTarget ).closest( '#search-active-fields' ).length ) {
+			   return;
+		   }
+
 		   var parent, vcfg = viewConfiguration;
 
 		   if ( $( e.currentTarget ).is( '.gv-fields' ) ) {

future/includes/class-gv-collection-field.php

@@ -11,7 +11,7 @@
  *
  * @implements Collection<Field>
  */
-class Field_Collection extends Collection {
+class Field_Collection extends Collection implements Collection_Position_Aware {
 
 	/**
 	 * Returns all the objects in this collection as an an array. Here for docBlock purposes only.

future/includes/class-gv-collection-widget.php

@@ -10,7 +10,7 @@
  * A collection of \GV\Widget objects.
  * @implements Collection<\GV\Widget>
  */
-class Widget_Collection extends Collection {
+class Widget_Collection extends Collection implements Collection_Position_Aware {
 	/**
 	 * Add a \GV\Widet to this collection.
 	 *

future/includes/class-gv-collection.php

@@ -1,4 +1,5 @@
 <?php
+
 namespace GV;
 
 /** If this file is called directly, abort. */
@@ -12,9 +13,9 @@
  */
 class Collection {
 	/**
-	 * @var array Main storage for objects in this collection.
+	 * @var array<T> Main storage for objects in this collection.
 	 */
-	private $storage = array();
+	protected $storage = [];
 
 	/**
 	 * Add an object to this collection.
@@ -37,7 +38,7 @@ public function add( $value ) {
 	 * @return void
 	 */
 	public function clear() {
-		$this->count() && ( $this->storage = array() );
+		$this->count() && ( $this->storage = [] );
 	}
 
 	/**
@@ -49,16 +50,16 @@ public function clear() {
 	 * @since 2.0
 	 * @return void
 	 */
-	public function merge( \GV\Collection $collection ) {
-		array_map( array( $this, 'add' ), $collection->all() );
+	public function merge( Collection $collection ) {
+		array_map( [ $this, 'add' ], $collection->all() );
 	}
 
 	/**
 	 * Returns all the objects in this collection as an an array.
 	 *
-	 * @api
 	 * @since 2.0
 	 * @return array<T> The objects in this collection.
+	 * @api
 	 */
 	public function all() {
 		return $this->storage;
@@ -67,9 +68,9 @@ public function all() {
 	/**
 	 * Get the last added object.
 	 *
-	 * @api
 	 * @since 2.0
 	 * @return T|null The last item in here, or null if there are none.
+	 * @api
 	 */
 	public function last() {
 		return end( $this->storage );
@@ -78,9 +79,9 @@ public function last() {
 	/**
 	 * Get the first added object.
 	 *
-	 * @api
 	 * @since 2.0
 	 * @return T|null The first item in here, or null if there are none.
+	 * @api
 	 */
 	public function first() {
 		return reset( $this->storage );
@@ -89,9 +90,9 @@ public function first() {
 	/**
 	 * Returns the count of the objects in this collection.
 	 *
-	 * @api
 	 * @since 2.0
 	 * @return int The size of this collection.
+	 * @api
 	 */
 	public function count() {
 		return count( $this->storage );

future/includes/class-gv-core.php

@@ -203,6 +203,7 @@ private function init() {
 		require_once $this->plugin->dir( 'future/includes/class-gv-field-internal.php' );
 
 		/** Get the collections ready. */
+		require_once $this->plugin->dir( 'future/includes/interface-gv-collection-position-aware.php' );
 		require_once $this->plugin->dir( 'future/includes/class-gv-collection.php' );
 		require_once $this->plugin->dir( 'future/includes/class-gv-collection-form.php' );
 		require_once $this->plugin->dir( 'future/includes/class-gv-collection-field.php' );