Search Form Text & Icons

assets/css/full-screen-morphing-search.css

@@ -297,7 +297,8 @@ input[type="search"] { /* reset normalize */
 
 .dummy-media-object img {
 	display: inline-block;
-	width: 50px;	
+	width: 50px;
+	height: 50px;
 	margin: 0 10px 0 0;
 	vertical-align: middle;
 }

assets/js/customize-preview.js

@@ -59,7 +59,7 @@
 			$( 'div.dummy-media-object' ).css( 'background', newval );
 			$( 'div.dummy-media-object' ).mouseout( function() {
 				$(this).css( 'background', newval );
-			});
+			} );
 		} );
 	} );
 
@@ -68,7 +68,7 @@
 		value.bind( function( newval ) {
 			$( 'div.dummy-media-object' ).mouseover( function() {
 				$(this).css( 'background', newval );
-			});
+			} );
 		} );
 	} );
 
@@ -78,7 +78,7 @@
 			$( '.dummy-media-object h3 a' ).css( 'color', newval );
 			$( 'div.dummy-media-object' ).mouseout( function() {
 				$(this).find( 'h3 a' ).css( 'color', newval );
-			});
+			} );
 		} );
 	} );
 
@@ -87,8 +87,119 @@
 		value.bind( function( newval ) {
 			$( 'div.dummy-media-object' ).mouseover( function() {
 				$(this).find( 'h3 a' ).css( 'color', newval );
-			});
+			} );
 		} );
 	} );
 
+	// FSMS Search Form Text.
+	wp.customize( 'fsmsp_options[fsmsp_search_form_text]', function( value ) {
+		value.bind( function( newval ) {
+			$( 'input.morphsearch-input' ).attr( 'placeholder', newval );
+		} );
+	} );
+
+	/**
+	 * MutationObserver to display the default placeholder text (search...),
+	 * when the user erases all charachters of his text in the FSMS Search Form Text option.
+	 */
+	let targetNodePhTxt = $( "input.morphsearch-input" )[0]; // Get the Node element.
+	let observerPhTxt = new MutationObserver( callbackPhTxt );
+	let obsConfigPhTxt = { attributes: true };
+	observerPhTxt.observe( targetNodePhTxt, obsConfigPhTxt );
+	function callbackPhTxt(mutations) {
+		mutations.forEach( function( mutation ) {
+			if ( mutation.target.placeholder.length == 0 ) {
+				$( '.morphsearch-form .morphsearch-input' ).attr( 'placeholder', fsmsp_cp.fsmsp_placeholder_text );
+			}
+		} );
+	}
+
+	/**
+	 * MutationObserver to prevent weird behaviour in Chrome and Edge, when input of text control option is clicked/focused.
+	 * Not needed but added to reflect same behaviour as on the live site (not Customizer preview).
+	 * When the overlay comes out, focus() on .morphsearch-input, then close it if we press on the Esc button.
+	 */
+	let targetNode = $( '#morphsearch' )[0]; // Get the Node element.
+	let observerNode = new MutationObserver( mutationNodeCallback );
+	let obsNodeConfig = { attributes: true };
+	observerNode.observe( targetNode, obsNodeConfig );
+	function mutationNodeCallback( mutations ) {
+		mutations.forEach( function( mutation ) {
+			if ( 'attributes' === mutation.type ) {
+				// This focus() will affect every input in a form[role=search] !
+				$( '.morphsearch-input' ).focus();
+				$( '.morphsearch' ).on( 'keydown', function( event ) {
+					if (event.keyCode === 27) {
+						// Remove the focus() first with blur() on every form[role=search] input !
+						$( 'form[role=search] input' ).blur();
+						// Close the overlay : $( '.morphsearch-close' ).click();
+						$( '.morphsearch' ).removeClass( 'open' );
+					}
+				} );
+			}
+		} );
+	}
+
+	/**
+	 * Following MutationObserver are to display the default icon for each column when no Icon/Image is provided.
+	 * This will take effect when the Remove button is clicked while in the Customizer preview.
+	 */
+
+	// 1- MutationObserver for article icon.
+	let targetObjArt = $( '.fsmsp-article-link' ); // Get the Object element NOT the Node.
+	let observerObjArt = new MutationObserver( callbackArt );
+	let obsConfigArt = { childList: true };
+	targetObjArt.each( function() {
+		/**
+		 * Using .each( function() { } ); since we have more than one object element matching our request.
+		 */
+		observerObjArt.observe( this, obsConfigArt );
+	} );
+	function callbackArt( mutationList ) {
+		mutationList.forEach( function( mutation ) {
+			if ( mutation.type == 'childList' ) {
+				/**
+				 * When <span class="customize-partial-edit-shortcut customize-partial-edit-shortcut-fsmsp_article_icon">
+				 * is the only child left (this is when we click on the remove button after adding a chosen image/icon),
+				 * we append the default article icon (fsmsp_cp.fsmsp_article_icon) to the targetObjArt.
+				 */
+				if ( mutation.target.childNodes.length == 1 ) {
+					targetObjArt.append( fsmsp_cp.fsmsp_article_icon );
+				}
+			}
+		} );
+	}
+	// 2- MutationObserver for category icon.
+	var targetObjCat = $( '.fsmsp-category-image' ); // Get the Object element NOT the Node.
+	var observerCat = new MutationObserver(callbackCategory);
+	var obsConfigCat = { childList: true };
+	targetObjCat.each( function() {
+		observerCat.observe(this, obsConfigCat);
+	} );
+	function callbackCategory( mutationList ) {
+		mutationList.forEach( function( mutation ) {
+			if ( mutation.type == 'childList' ) {
+				if ( mutation.target.childNodes.length == 1 ) {
+					targetObjCat.append( fsmsp_cp.fsmsp_category_icon );
+				}
+			}
+		} );
+	}
+	// 3- MutationObserver for tag icon.
+	var targetObjTag = $( '.fsmsp-tag-image' ); // Get the Object element NOT the Node.
+	var observerTag = new MutationObserver(callbackTag);
+	var obsConfigTag = { childList: true };
+	targetObjTag.each( function() {
+		observerTag.observe(this, obsConfigTag);
+	} );
+	function callbackTag( mutationList ) {
+		mutationList.forEach( function( mutation ) {
+			if ( mutation.type == 'childList' ) {
+				if ( mutation.target.childNodes.length == 1 ) {
+					targetObjTag.append( fsmsp_cp.fsmsp_tag_icon );
+				}
+			}
+		} );
+	}
+
 } )( jQuery );

assets/js/full-screen-morphing-search.js

@@ -23,7 +23,7 @@
 		 */
 		if (!fsmsp_vars.fsmsp_is_customize_preview) {
 			setTimeout(function () {
-				$('.morphsearch input.morphsearch-input').focus();
+				$('#morphsearch > form > input.morphsearch-input').focus();
 			}, 500);
 		}
 	} );
@@ -96,6 +96,9 @@
 		// Output fsmsp_links_color.
 		$( '.dummy-media-object h3 a' ).css( 'color', '#b2b2b2' );
 
+		// Output fsmsp_search_form_text.
+		$( 'form.morphsearch-form' ).children().first().attr( 'placeholder', 'Search...' );
+
 	} else {
 
 		$( '#morphsearch, div.morphsearch-content' ).css( 'background-color', fsmsp_vars.fsmsp_main_backgroung_color );
@@ -123,6 +126,8 @@
 
 		$( '.dummy-media-object h3 a' ).css( 'color', fsmsp_vars.fsmsp_links_color );
 
+		$( 'form.morphsearch-form' ).children().first().attr( 'placeholder', fsmsp_vars.fsmsp_search_form_text );
+
 	}
 
 } )( jQuery );