From 93bc7bfc1ea5a4c17acd92206dbe4869a5c5fac7 Mon Sep 17 00:00:00 2001 From: LebCit Date: Thu, 25 Jul 2019 06:09:36 +0300 Subject: [PATCH] Search Form Text & Icons --- assets/css/full-screen-morphing-search.css | 3 +- assets/js/customize-preview.js | 119 +++++++- assets/js/full-screen-morphing-search.js | 7 +- class-full-screen-morphing-search.php | 143 +++++---- functions-full-screen-morphing-search.php | 320 ++++++++++++++++++++- 5 files changed, 528 insertions(+), 64 deletions(-) diff --git a/assets/css/full-screen-morphing-search.css b/assets/css/full-screen-morphing-search.css index 8f1daf7..40fc42a 100644 --- a/assets/css/full-screen-morphing-search.css +++ b/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; } diff --git a/assets/js/customize-preview.js b/assets/js/customize-preview.js index 7e33b79..356b42b 100644 --- a/assets/js/customize-preview.js +++ b/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 + * 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 ); \ No newline at end of file diff --git a/assets/js/full-screen-morphing-search.js b/assets/js/full-screen-morphing-search.js index c3e0cd4..1e81894 100644 --- a/assets/js/full-screen-morphing-search.js +++ b/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 ); \ No newline at end of file diff --git a/class-full-screen-morphing-search.php b/class-full-screen-morphing-search.php index 5ccb069..d4c2c16 100644 --- a/class-full-screen-morphing-search.php +++ b/class-full-screen-morphing-search.php @@ -88,6 +88,7 @@ class Full_Screen_Morphing_Search { 'fsmsp_columns_hover_background_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_columns_hover_background_color'] ) ? $fsmsp_options['fsmsp_columns_hover_background_color'] : '#e4e4e5' ) ), 'fsmsp_links_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_links_color'] ) ? $fsmsp_options['fsmsp_links_color'] : '#b2b2b2' ) ), 'fsmsp_links_hover_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_links_hover_color'] ) ? $fsmsp_options['fsmsp_links_hover_color'] : '#ec5a62' ) ), + 'fsmsp_search_form_text' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_search_form_text'] ) ? $fsmsp_options['fsmsp_search_form_text'] : 'Search…' ) ), ) ); @@ -108,9 +109,7 @@ class Full_Screen_Morphing_Search {
-

Top Categories

+

Top Categories

name ] = $cat->count; - $cat_links[ $cat->name ] = get_category_link( $cat->term_id ); + $fsmsptc_counts = array(); + $fsmspcat_links = array(); + foreach ( (array) $fsmspcats as $fsmspcat ) { + $fsmsptc_counts[ $fsmspcat->name ] = $fsmspcat->count; + $fsmspcat_links[ $fsmspcat->name ] = get_category_link( $fsmspcat->term_id ); } - asort( $tc_counts ); - $tc_counts = array_reverse( $tc_counts, true ); - $i = 0; - foreach ( $tc_counts as $cat => $tc_count ) { + asort( $fsmsptc_counts ); + $fsmsptc_counts = array_reverse( $fsmsptc_counts, true ); + $i = 0; + foreach ( $fsmsptc_counts as $fsmspcat => $fsmsptc_count ) { $i++; - $cat_link = esc_url( $cat_links[ $cat ] ); - $cat = str_replace( ' ', ' ', esc_html( $cat ) ); + $fsmspcat_link = esc_url( $fsmspcat_links[ $fsmspcat ] ); + $fsmspcat = str_replace( ' ', ' ', esc_html( $fsmspcat ) ); if ( $i < 6 ) { ?> -
+
+ + '; + } else { + full_screen_morphing_search_category_icon(); + } + ?> + '; - print "

" . esc_html( $cat . ' (' . $tc_count . ')' ) . '

'; + print "

" . esc_html( $fsmspcat . ' (' . $fsmsptc_count . ')' ) . '

'; ?>
-

Top Tags

+

Top Tags

name ] = $tag->count; - $tag_links[ $tag->name ] = get_tag_link( $tag->term_id ); + $fsmsptt_counts = array(); + $fsmsptag_links = array(); + foreach ( (array) $fsmsptags as $fsmsptag ) { + $fsmsptt_counts[ $fsmsptag->name ] = $fsmsptag->count; + $fsmsptag_links[ $fsmsptag->name ] = get_tag_link( $fsmsptag->term_id ); } - asort( $tt_counts ); - $tt_counts = array_reverse( $tt_counts, true ); - $i = 0; - foreach ( $tt_counts as $tag => $tt_count ) { + asort( $fsmsptt_counts ); + $fsmsptt_counts = array_reverse( $fsmsptt_counts, true ); + $i = 0; + foreach ( $fsmsptt_counts as $fsmsptag => $fsmsptt_count ) { $i++; - $tag_link = esc_url( $tag_links[ $tag ] ); - $tag = str_replace( ' ', ' ', esc_html( $tag ) ); + $tag_link = esc_url( $fsmsptag_links[ $fsmsptag ] ); + $fsmsptag = str_replace( ' ', ' ', esc_html( $fsmsptag ) ); if ( $i < 6 ) { ?> -
+
+ '; - print "

" . esc_html( $tag . ' (' . $tt_count . ')' ) . '

'; + if ( empty( $fsmsp_options['fsmsp_tag_icon'] ) ) { + echo ''; + } else { + full_screen_morphing_search_tag_icon(); + } ?> -
+ + " . esc_html( $fsmsptag . ' (' . $fsmsptt_count . ')' ) . ''; + ?> +
array( 'post', 'page' ), 'post_status' => 'publish', 'posts_per_page' => -1, // all posts and pages. ); - $posts = get_posts( $fsmsac ); + $posts = get_posts( $fsmsp_ac ); if ( $posts ) : foreach ( $posts as $k => $post ) { - $source[ $k ]['ID'] = $post->ID; - $source[ $k ]['label'] = $post->post_title; // The name of the post. - $source[ $k ]['permalink'] = get_permalink( $post->ID ); + $source[ $k ]['ID'] = $post->ID; + $source[ $k ]['label'] = $post->post_title; // The name of the post. + $source[ $k ]['permalink'] = get_permalink( $post->ID ); } ?> @@ -250,7 +279,7 @@ class Full_Screen_Morphing_Search { }); '', 'fsmsp_category_icon' => '', 'fsmsp_tag_icon' => '', - 'fsmsp_placeholder_text' => esc_attr( 'Search …' ), + 'fsmsp_placeholder_text' => esc_attr( 'Search…' ), ) ); } @@ -382,5 +382,323 @@ function full_screen_morphing_search_customize_register( $wp_customize ) { ) ); + // Add Search Form Section. + $wp_customize->add_section( + 'fsmsp_search_form', + array( + 'title' => __( 'FSMS Search Form', 'full-screen-morphing-search' ), + 'priority' => 10, + 'panel' => 'fsmsp_panel', + ) + ); + + // ========================== + // = FSMS Search Form Text. = + // ========================== + $wp_customize->add_setting( + 'fsmsp_options[fsmsp_search_form_text]', + array( + 'default' => '', + 'sanitize_callback' => 'wp_filter_nohtml_kses', // Strips all HTML from a text string. + 'capability' => 'edit_theme_options', + 'type' => 'option', + 'transport' => 'postMessage', + ) + ); + + $wp_customize->add_control( + 'fsmsp_options[fsmsp_search_form_text]', + array( + 'label' => __( 'FSMS Search Form Text', 'full-screen-morphing-search' ), + 'description' => esc_attr__( 'Change the search form text. If leaved blank, it will return to original value !', 'full-screen-morphing-search' ), + 'section' => 'fsmsp_search_form', + 'settings' => 'fsmsp_options[fsmsp_search_form_text]', + 'type' => 'text', + 'input_attrs' => array( + 'placeholder' => __( 'Search…', 'full-screen-morphing-search' ), + ), + ) + ); + + // Add Icons Section. + $wp_customize->add_section( + 'fsmsp_icons', + array( + 'title' => __( 'FSMS Icons', 'full-screen-morphing-search' ), + 'priority' => 15, + 'panel' => 'fsmsp_panel', + ) + ); + + // ====================== + // = FSMS Article Icon. = + // ====================== + $wp_customize->add_setting( + 'fsmsp_options[fsmsp_article_icon]', + array( + 'default' => '', + 'type' => 'option', + 'transport' => 'postMessage', + 'sanitize_callback' => 'esc_url_raw', + ) + ); + + $wp_customize->add_control( + new WP_Customize_Image_Control( + $wp_customize, + 'fsmsp_options[fsmsp_article_icon]', + array( + 'label' => __( 'FSMS Article Icon', 'full-screen-morphing-search' ), + 'description' => esc_attr__( 'Change the article icon.', 'full-screen-morphing-search' ), + 'section' => 'fsmsp_icons', + 'settings' => 'fsmsp_options[fsmsp_article_icon]', + 'button_labels' => array( + 'select' => __( 'Select Article Icon' ), + 'change' => __( 'Change Article Icon' ), + 'remove' => __( 'Remove' ), + 'frame_title' => __( 'Select Article Icon' ), + 'frame_button' => __( 'Choose Article Icon' ), + ), + ) + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'fsmsp_options[fsmsp_article_icon]', + array( + 'selector' => 'div.dummy-media-object a.fsmsp-article-link', + 'settings' => array( 'fsmsp_options[fsmsp_article_icon]' ), + 'render_callback' => 'full_screen_morphing_search_article_icon', + ) + ); + + // ==================================== + // = FSMS Article Icon/Image Classes. = + // ==================================== + $wp_customize->add_setting( + 'fsmsp_options[fsmsp_article_i_classes]', + array( + 'default' => true, + 'type' => 'option', + 'transport' => 'postMessage', + 'sanitize_callback' => 'wp_validate_boolean', + ) + ); + + $wp_customize->add_control( + 'fsmsp_options[fsmsp_article_i_classes]', + array( + 'label' => __( 'Article Icon/Image Round or Not ?!', 'full-screen-morphing-search' ), + 'section' => 'fsmsp_icons', + 'settings' => 'fsmsp_options[fsmsp_article_i_classes]', + 'type' => 'checkbox', + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'fsmsp_options[fsmsp_article_i_classes]', + array( + 'selector' => 'div.dummy-media-object a.fsmsp-article-link', + 'settings' => array( 'fsmsp_options[fsmsp_article_i_classes]' ), + 'render_callback' => 'full_screen_morphing_search_article_icon', + ) + ); + + // ======================= + // = FSMS Category Icon. = + // ======================= + $wp_customize->add_setting( + 'fsmsp_options[fsmsp_category_icon]', + array( + 'default' => '', + 'type' => 'option', + 'transport' => 'postMessage', + 'sanitize_callback' => 'esc_url_raw', + ) + ); + + $wp_customize->add_control( + new WP_Customize_Image_Control( + $wp_customize, + 'fsmsp_options[fsmsp_category_icon]', + array( + 'label' => __( 'FSMS Category Icon', 'full-screen-morphing-search' ), + 'description' => esc_attr__( 'Change the category icon.', 'full-screen-morphing-search' ), + 'section' => 'fsmsp_icons', + 'settings' => 'fsmsp_options[fsmsp_category_icon]', + 'button_labels' => array( + 'select' => __( 'Select Category Icon' ), + 'change' => __( 'Change Category Icon' ), + 'remove' => __( 'Remove' ), + 'frame_title' => __( 'Select Category Icon' ), + 'frame_button' => __( 'Choose Category Icon' ), + ), + ) + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'fsmsp_options[fsmsp_category_icon]', + array( + 'selector' => 'span.fsmsp-category-image', + 'settings' => array( 'fsmsp_options[fsmsp_category_icon]' ), + 'render_callback' => 'full_screen_morphing_search_category_icon', + ) + ); + + // ===================================== + // = FSMS Category Icon/Image Classes. = + // ===================================== + $wp_customize->add_setting( + 'fsmsp_options[fsmsp_category_i_classes]', + array( + 'default' => true, + 'type' => 'option', + 'transport' => 'postMessage', + 'sanitize_callback' => 'wp_validate_boolean', + ) + ); + + $wp_customize->add_control( + 'fsmsp_options[fsmsp_category_i_classes]', + array( + 'label' => __( 'Category Icon/Image Round or Not ?!', 'full-screen-morphing-search' ), + 'section' => 'fsmsp_icons', + 'settings' => 'fsmsp_options[fsmsp_category_i_classes]', + 'type' => 'checkbox', + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'fsmsp_options[fsmsp_category_i_classes]', + array( + 'selector' => 'span.fsmsp-category-image', + 'settings' => array( 'fsmsp_options[fsmsp_category_i_classes]' ), + 'render_callback' => 'full_screen_morphing_search_category_icon', + ) + ); + + // ================== + // = FSMS Tag Icon. = + // ================== + $wp_customize->add_setting( + 'fsmsp_options[fsmsp_tag_icon]', + array( + 'default' => '', + 'type' => 'option', + 'transport' => 'postMessage', + 'sanitize_callback' => 'esc_url_raw', + ) + ); + + $wp_customize->add_control( + new WP_Customize_Image_Control( + $wp_customize, + 'fsmsp_options[fsmsp_tag_icon]', + array( + 'label' => __( 'FSMS Tag Icon', 'full-screen-morphing-search' ), + 'description' => esc_attr__( 'Change the tag icon.', 'full-screen-morphing-search' ), + 'section' => 'fsmsp_icons', + 'settings' => 'fsmsp_options[fsmsp_tag_icon]', + 'button_labels' => array( + 'select' => __( 'Select Tag Icon' ), + 'change' => __( 'Change Tag Icon' ), + 'remove' => __( 'Remove' ), + 'frame_title' => __( 'Select Tag Icon' ), + 'frame_button' => __( 'Choose Tag Icon' ), + ), + ) + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'fsmsp_options[fsmsp_tag_icon]', + array( + 'selector' => 'span.fsmsp-tag-image', + 'settings' => array( 'fsmsp_options[fsmsp_tag_icon]' ), + 'render_callback' => 'full_screen_morphing_search_tag_icon', + ) + ); + + // ================================ + // = FSMS Tag Icon/Image Classes. = + // ================================ + $wp_customize->add_setting( + 'fsmsp_options[fsmsp_tag_i_classes]', + array( + 'default' => true, + 'type' => 'option', + 'transport' => 'postMessage', + 'sanitize_callback' => 'wp_validate_boolean', + ) + ); + + $wp_customize->add_control( + 'fsmsp_options[fsmsp_tag_i_classes]', + array( + 'label' => __( 'Tag Icon/Image Round or Not ?!', 'full-screen-morphing-search' ), + 'section' => 'fsmsp_icons', + 'settings' => 'fsmsp_options[fsmsp_tag_i_classes]', + 'type' => 'checkbox', + ) + ); + + $wp_customize->selective_refresh->add_partial( + 'fsmsp_options[fsmsp_tag_i_classes]', + array( + 'selector' => 'span.fsmsp-tag-image', + 'settings' => array( 'fsmsp_options[fsmsp_tag_i_classes]' ), + 'render_callback' => 'full_screen_morphing_search_tag_icon', + ) + ); + } add_action( 'customize_register', 'full_screen_morphing_search_customize_register' ); + +/** + * Render article icon for the selective refresh partial. + */ +function full_screen_morphing_search_article_icon() { + $image_url = get_option( 'fsmsp_options' )['fsmsp_article_icon']; + $attachment_id = attachment_url_to_postid( $image_url ); // Tries to convert an attachment URL into a post ID. + $article_i_classes = get_option( 'fsmsp_options' )['fsmsp_article_i_classes']; + $classes; + if ( ! empty( $article_i_classes ) ) { + $classes = 'round fsmsp-article-icon'; + } else { + $classes = 'fsmsp-article-icon'; + } + echo wp_get_attachment_image( $attachment_id, 'thumbnail', '', array( 'class' => $classes ) ); // Get an HTML img element representing an image attachment. +} + +/** + * Render category icon for the selective refresh partial. + */ +function full_screen_morphing_search_category_icon() { + $imagecat_url = get_option( 'fsmsp_options' )['fsmsp_category_icon']; + $attachmentcat_id = attachment_url_to_postid( $imagecat_url ); + $category_i_classes = get_option( 'fsmsp_options' )['fsmsp_category_i_classes']; + $classes; + if ( ! empty( $category_i_classes ) ) { + $classes = 'round fsmsp-category-icon'; + } else { + $classes = 'fsmsp-category-icon'; + } + echo wp_get_attachment_image( $attachmentcat_id, 'thumbnail', '', array( 'class' => $classes ) ); +} + +/** + * Render tag icon for the selective refresh partial. + */ +function full_screen_morphing_search_tag_icon() { + $imagetag_url = get_option( 'fsmsp_options' )['fsmsp_tag_icon']; + $attachmenttag_id = attachment_url_to_postid( $imagetag_url ); + $tag_i_classes = get_option( 'fsmsp_options' )['fsmsp_tag_i_classes']; + $classes; + if ( ! empty( $tag_i_classes ) ) { + $classes = 'round fsmsp-tag-icon'; + } else { + $classes = 'fsmsp-tag-icon'; + } + echo wp_get_attachment_image( $attachmenttag_id, 'thumbnail', '', array( 'class' => $classes ) ); +}