Skip to content

Add location reset button, focus on city input after clicking change #6815

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

Open
tibiii wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Add location reset button, focus on city input after clicking change #6815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
62 changes: 53 additions & 9 deletions src/js/_enqueues/wp/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ jQuery( function( $ ) {
.removeClass( 'hide-if-js' );

$container.on( 'click', '.community-events-toggle-location, .community-events-cancel', app.toggleLocationForm );
$container.on( 'click', '.community-events-location-clear', app.clearLocationForm );

/**
* Filters events based on entered location.
Expand Down Expand Up @@ -354,6 +355,37 @@ jQuery( function( $ ) {
app.initialized = true;
},

getRequestParams: function () {
var requestParams = {},initiatedBy;
requestParams._wpnonce = communityEventsData.nonce;
requestParams.timezone = window.Intl ? window.Intl.DateTimeFormat().resolvedOptions().timeZone : '';
initiatedBy = requestParams.location ? 'user' : 'app';
return {requestParams: requestParams,initiatedBy: initiatedBy};
},

clearLocationForm: function() {
var params = app.getRequestParams(),
requestParams= params.requestParams,
initiatedBy = params.initiatedBy,
$clearSpinner = $('.community-events-reset-spinner');

$clearSpinner.addClass( 'is-active' );

wp.ajax.post('clear-community-events', requestParams)
.done(function () {
app.getEvents();
})
.fail(function () {
app.renderEventsTemplate({
'location': false,
'events': [],
'error': true
}, initiatedBy);
});

$( '.community-events-reset-location' ).attr( 'aria-hidden', 'true' );
},

/**
* Toggles the visibility of the Edit Location form.
*
Expand All @@ -366,6 +398,7 @@ jQuery( function( $ ) {
*/
toggleLocationForm: function( action ) {
var $toggleButton = $( '.community-events-toggle-location' ),
$clearButton = $( '.community-events-clear-location' ),
$cancelButton = $( '.community-events-cancel' ),
$form = $( '.community-events-form' ),
$target = $();
Expand All @@ -384,6 +417,7 @@ jQuery( function( $ ) {
if ( 'hide' === action ) {
$toggleButton.attr( 'aria-expanded', 'false' );
$cancelButton.attr( 'aria-expanded', 'false' );
$clearButton.attr( 'aria-expanded', 'false' );
$form.attr( 'aria-hidden', 'true' );
/*
* If the Cancel button has been clicked, bring the focus back
Expand All @@ -396,7 +430,10 @@ jQuery( function( $ ) {
} else {
$toggleButton.attr( 'aria-expanded', 'true' );
$cancelButton.attr( 'aria-expanded', 'true' );
$clearButton.attr( 'aria-expanded', 'true' );
$form.attr( 'aria-hidden', 'false' );
$( '#community-events-location' ).val( '' );
$( '#community-events-location' ).focus();
}
},

Expand All @@ -410,15 +447,15 @@ jQuery( function( $ ) {
* @return {void}
*/
getEvents: function( requestParams ) {
var initiatedBy,
app = this,
$spinner = $( '.community-events-form' ).children( '.spinner' );
var app = this,
params = app.getRequestParams(),
initiatedBy = params.initiatedBy,
$spinner = $('.community-events-form').children('.spinner'),
$clearSpinner = $('.community-events-reset-spinner');

requestParams = requestParams || {};
requestParams._wpnonce = communityEventsData.nonce;
requestParams.timezone = window.Intl ? window.Intl.DateTimeFormat().resolvedOptions().timeZone : '';

initiatedBy = requestParams.location ? 'user' : 'app';
requestParams = requestParams || params.requestParams;
requestParams._wpnonce = params.requestParams._wpnonce;
requestParams.timezone= params.requestParams.timezone;

$spinner.addClass( 'is-active' );

Expand All @@ -442,6 +479,7 @@ jQuery( function( $ ) {
}
}
app.renderEventsTemplate( response, initiatedBy );
$clearSpinner.removeClass( 'is-active' );
})

.fail( function() {
Expand Down Expand Up @@ -469,6 +507,7 @@ jQuery( function( $ ) {
elementVisibility,
$toggleButton = $( '.community-events-toggle-location' ),
$locationMessage = $( '#community-events-location-message' ),
$clearButton = $( '.community-events-clear-location' ),
$results = $( '.community-events-results' );

templateParams.events = app.populateDynamicEventFields(
Expand All @@ -493,7 +532,8 @@ jQuery( function( $ ) {
'.community-events-could-not-locate' : false,
'#community-events-location-message' : false,
'.community-events-toggle-location' : false,
'.community-events-results' : false
'.community-events-results' : false,
'.community-events-reset-location' : false
};

/*
Expand All @@ -518,6 +558,7 @@ jQuery( function( $ ) {
elementVisibility['#community-events-location-message'] = true;
elementVisibility['.community-events-toggle-location'] = true;
elementVisibility['.community-events-results'] = true;
elementVisibility['.community-events-reset-location'] = false;

} else if ( templateParams.location.description ) {
template = wp.template( 'community-events-attend-event-near' );
Expand Down Expand Up @@ -545,6 +586,7 @@ jQuery( function( $ ) {
elementVisibility['#community-events-location-message'] = true;
elementVisibility['.community-events-toggle-location'] = true;
elementVisibility['.community-events-results'] = true;
elementVisibility['.community-events-reset-location'] = true;

} else if ( templateParams.unknownCity ) {
template = wp.template( 'community-events-could-not-locate' );
Expand Down Expand Up @@ -591,6 +633,7 @@ jQuery( function( $ ) {

elementVisibility['#community-events-location-message'] = true;
elementVisibility['.community-events-toggle-location'] = true;
elementVisibility['.community-events-reset-location'] = false;
}

// Set the visibility of toggleable elements.
Expand All @@ -599,6 +642,7 @@ jQuery( function( $ ) {
});

$toggleButton.attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] );
$clearButton.attr( 'aria-expanded', elementVisibility['.community-events-clear-location'] );

if ( templateParams.location && ( templateParams.location.ip || templateParams.location.latitude ) ) {
// Hide the form when there's a valid location.
Expand Down
1 change: 1 addition & 0 deletions src/wp-admin/admin-ajax.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
'oembed-cache',
'image-editor',
'delete-comment',
'clear-community-events',
'delete-tag',
'delete-link',
'delete-meta',
Expand Down
1 change: 1 addition & 0 deletions src/wp-admin/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,6 +469,7 @@
.community-events-errors [aria-hidden="true"],
.community-events-loading[aria-hidden="true"],
.community-events[aria-hidden="true"],
.community-events-reset-location[aria-hidden="true"],
.community-events form[aria-hidden="true"] {
display: none;
}
Expand Down
11 changes: 11 additions & 0 deletions src/wp-admin/includes/ajax-actions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,17 @@ function wp_ajax_autocomplete_user() {
wp_die( wp_json_encode( $return ) );
}


/**
* Handles Ajax requests for clearing community events
*/
function wp_ajax_clear_community_events() {
check_ajax_referer( 'community_events' );
$user_id = get_current_user_id();
delete_user_option( $user_id, 'community-events-location', true );
wp_send_json_success();
}

/**
* Handles Ajax requests for community events
*
Expand Down
20 changes: 16 additions & 4 deletions src/wp-admin/includes/dashboard.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1381,10 +1381,22 @@ function wp_print_community_events_markup() {
<p>
<span id="community-events-location-message"></span>

<button class="button-link community-events-toggle-location" aria-expanded="false">
<span class="dashicons dashicons-location" aria-hidden="true"></span>
<span class="community-events-location-edit"><?php _e( 'Select location' ); ?></span>
</button>
<span id="community-events-change-location" aria-hidden="true">
<button class="button-link community-events-toggle-location" aria-expanded="false">
<span class="dashicons dashicons-location" aria-hidden="true"></span>
<span class="community-events-location-edit"><?php _e( 'Select a location' ); ?></span>
</button>

<span class="community-events-reset-location" aria-hidden="true">
<?php _e( 'or' ); ?>

<button class="button-link community-events-location-clear">
<span><?php _e( 'reset to your location.' ); ?></span>
</button>
</span>

<span class="spinner community-events-reset-spinner"></span>
</span>
</p>

<form class="community-events-form" aria-hidden="true" action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" method="post">
Expand Down