Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autocomplete: Use script module and modern approaches #537

Draft
wants to merge 8 commits into
base: trunk
Choose a base branch
from
Draft

Autocomplete: Use script module and modern approaches #537

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8120761
Autocomplete script motules and modernize
sirreal Jul 29, 2024
2cb0f73
Try using awesomplete
sirreal Jul 29, 2024
f72adff
Migrate awesomplete to module
sirreal Jul 29, 2024
c72722e
Finish module rewrite
sirreal Jul 29, 2024
76c1c37
Fix lints
sirreal Jul 29, 2024
0ffce5b
This is a script module implementation with awesomplete
sirreal Jul 29, 2024
e383a37
Uncomment desired code
sirreal Jul 29, 2024
0aeae34
No schema for endpoint
sirreal Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 81 additions & 61 deletions source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,38 @@ public function __construct() {
* @access public
*/
public function init() {

add_action( 'wp_ajax_autocomplete', array( $this, 'autocomplete_data_update' ) );
add_action( 'wp_ajax_nopriv_autocomplete', array( $this, 'autocomplete_data_update' ) );
add_action(
'rest_api_init',
function () {
register_rest_route(
'wporg-developer/v1',
'/autocomplete',
array(
'methods' => 'POST',
'callback' => array( $this, 'autocomplete_rest_handler' ),
'permission_callback' => '__return_true',
'schema' => function () {
return array(
'html' => array(
'description' => 'The HTML to process.',
'type' => 'string',
'required' => true,
),
'quirksMode' => array(
'description' => 'Process the document in quirks mode.',
'type' => 'boolean',
),
);
},
sirreal marked this conversation as resolved.
Show resolved Hide resolved
)
);
}
);

// Enqueue scripts and styles.
add_action( 'wp_enqueue_scripts', array( $this, 'scripts_and_styles' ), 11 );
}


/**
* Enqueues scripts and styles.
*
Expand All @@ -37,97 +60,95 @@ public function init() {
public function scripts_and_styles() {

// Handbook searches don't have autocomplete.
if ( function_exists( 'wporg_is_handbook' ) && wporg_is_handbook() ) {
return;
}

/*if ( function_exists( 'wporg_is_handbook' ) && wporg_is_handbook() ) {*/
/* return;*/
/*}*/
/**/
sirreal marked this conversation as resolved.
Show resolved Hide resolved
wp_enqueue_style(
'awesomplete-css',
get_stylesheet_directory_uri() . '/stylesheets/awesomplete.css',
array(),
filemtime( dirname( __DIR__ ) . '/stylesheets/awesomplete.css' )
filemtime( get_stylesheet_directory() . '/stylesheets/awesomplete.css' )
);
wp_enqueue_style(
'autocomplete-css',
get_stylesheet_directory_uri() . '/stylesheets/autocomplete.css',
array(),
filemtime( dirname( __DIR__ ) . '/stylesheets/autocomplete.css' )
filemtime( get_stylesheet_directory() . '/stylesheets/autocomplete.css' )
);

wp_register_script(
'awesomplete',
get_stylesheet_directory_uri() . '/js/awesomplete.min.js',
wp_register_script_module(
'@wporg-developer/awesomplete',
get_stylesheet_directory_uri() . '/js/awesomplete.js',
array(),
filemtime( dirname( __DIR__ ) . '/js/awesomplete.min.js' ),
true
filemtime( get_stylesheet_directory() . '/js/awesomplete.js' )
);
wp_enqueue_script( 'awesomplete' );

wp_register_script( 'autocomplete', get_stylesheet_directory_uri() . '/js/autocomplete.js', array( 'awesomplete' ), filemtime( dirname( __DIR__ ) . '/js/autocomplete.js' ), true );
wp_localize_script(
'autocomplete',
'autocomplete',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'autocomplete_nonce' ),
'post_type' => get_post_type(),
)
wp_enqueue_script_module(
'@wporg-developer/autocomplete',
get_stylesheet_directory_uri() . '/js/autocomplete.js',
array( array( 'id' => '@wporg-developer/awesomplete', 'import' => 'dynamic' ) ),
filemtime( get_stylesheet_directory() . '/js/autocomplete.js' )
);

wp_enqueue_script( 'autocomplete' );
add_filter(
"script_module_data_@wporg-developer/autocomplete",
function ( $data ) {
return array_merge( $data, array(
'endpoint_url' => rest_url('wporg-developer/v1/autocomplete'),
'nonce' => wp_create_nonce( 'wporg/autocomplete' ),
) );
}
);
}

public function autocomplete_rest_handler( WP_REST_Request $request ) {
$req_json = $request->get_json_params();

/**
* Handles AJAX updates for the autocomplete list.
*
* @access public
*
* @return string JSON data
*/
public function autocomplete_data_update() {
$nonce_ok = wp_verify_nonce( $req_json['nonce'], 'wporg/autocomplete' );
if ( ! $nonce_ok ) {
return new WP_REST_Response( array( 'error' => __( 'Invalid nonce' ) ), 403 );
}

check_ajax_referer( 'autocomplete_nonce', 'nonce' );
// No search query.
$req_search = $req_json['search'] ?? '';
if ( '' === $req_search ) {
return new WP_REST_Response(
array( 'error' => __( 'Missing or invalid "s" search.', 'wporg' ) ),
400
);
}

$parser_post_types = DevHub\get_parsed_post_types();
$defaults = array(
's' => '',
'posts' => array(),
);

if ( ! ( isset( $_POST['data'] ) && $_POST['data'] ) ) {
wp_send_json_error( $defaults );
$req_post_types = $req_json['post_types'];
if ( ! is_array( $req_post_types ) ) {
$req_post_types = array();
} else {
$req_post_types = array_intersect( $parser_post_types, $req_post_types );
}

// Parse the search form fields.
wp_parse_str( $_POST['data'], $form_data );
$form_data = array_merge( $defaults, $form_data );

// No search query.
if ( empty( $form_data['s'] ) ) {
wp_send_json_error( $defaults );
if ( array() === $req_post_types ) {
$req_post_types = $parser_post_types;
}

$post_types = isset( $_POST['post_type'] ) && 'command' === $_POST['post_type'] ?
array( 'command' ) :
$parser_post_types;

$args = array(
'posts_per_page' => -1,
'post_type' => $post_types,
's' => $form_data['s'],
'post_type' => $req_post_types,
's' => $req_search,
'orderby' => '',
'search_orderby_title' => 1,
'order' => 'ASC',
'_autocomplete_search' => true,
);

$search = get_posts( $args );
$search_result = get_posts( $args );

if ( ! empty( $search ) ) {
if ( empty( $search_result ) ) {
return new WP_REST_Response( null, 200 );
} else {
$post_types_function_like = array( 'wp-parser-function', 'wp-parser-method' );

foreach ( $search as $post ) {
foreach ( $search_result as $post ) {
$permalink = get_permalink( $post->ID );
$title = $post->post_title;

Expand All @@ -139,13 +160,12 @@ public function autocomplete_data_update() {
$title = 'class ' . $title . ' {}';
}

$form_data['posts'][ $title ] = $permalink;
$request_data['posts'][ $title ] = $permalink;
}
}

wp_send_json_success( $form_data );
return new WP_REST_Response( $request_data, 200 );
}

}

$autocomplete = new DevHub_Search_Form_Autocomplete();
Loading
Loading