diff --git a/.github/workflows/coding-standards.yml b/.github/workflows/coding-standards.yml index 528847b8..180b4934 100644 --- a/.github/workflows/coding-standards.yml +++ b/.github/workflows/coding-standards.yml @@ -5,8 +5,8 @@ on: types: [ opened, synchronize ] jobs: - php: - name: PHP + phpcs: + name: phpcs runs-on: ubuntu-latest steps: diff --git a/assets/css/translation-events.css b/assets/css/translation-events.css index 80683a83..5c43f767 100644 --- a/assets/css/translation-events.css +++ b/assets/css/translation-events.css @@ -1,136 +1,135 @@ .translation-event-form label { - display: inline-block; - width: 140px; - vertical-align: top; + display: inline-block; + width: 140px; + vertical-align: top; } .translation-event-form #event-title, .translation-event-form #event-description { - width: 30%; + width: 30%; } .translation-event-form input[type="text"], .translation-event-form input[type="date"] { - width: 13%; + width: 13%; } .translation-event-form div { - margin-top: 1em; + margin-top: 1em; } .translation-event-form #submit-event { - margin-left: 10%; - width: 30%; - margin-top: 1em; - display: block; + margin-left: 10%; + width: 30%; + margin-top: 1em; + display: block; } .event-page-title { - border-bottom: #d9d8d8 thin solid; - padding-bottom: .5em; + border-bottom: #d9d8d8 thin solid; + padding-bottom: .5em; } .event-details-page { - border-bottom: #cfd4d4 thin solid; - width: 60%; - margin: 0 auto; + border-bottom: #cfd4d4 thin solid; + width: 60%; + margin: 0 auto; } .event-details-left { - width: 77%; - float: left; - border-right: #dadfdf thin solid; - margin-right: 1%; - padding-right: 1em; + width: 77%; + float: left; + border-right: #dadfdf thin solid; + margin-right: 1%; + padding-right: 1em; } .event-details-right { - width: 22%; - float: left; - padding: 1em; + width: 22%; + float: left; + padding: 1em; } .event-details-stats { - clear: both; - margin: 1em; + clear: both; + margin: 1em; } .event-details-stats table, .event-details-stats table td, .event-details-stats table th { - border: 0.2em solid var(--gp-color-primary); - padding: 1em; + border: 0.2em solid var(--gp-color-primary); + padding: 1em; } .event-details-stats-totals { - font-weight: bold; + font-weight: bold; } .hide-event-url { - display: none; + display: none; } .translation-event-form button.save-draft { - background: #fff; - color: var(--gp-color-btn-primary-bg); + background: #fff; + color: var(--gp-color-btn-primary-bg); } #event-url span { - width: 10%; - display: inline-block; + width: 10%; + display: inline-block; } span.event-list-date { - display: block; - color: #939393; - font-size: .9em; - font-weight: bold; + display: block; + color: #939393; + font-size: .9em; + font-weight: bold; } span.event-list-date.events-i-am-attending { - font-size: .8em; - font-weight: normal; + font-size: .8em; + font-weight: normal; } .event-list-item a{ - font-weight: bold; - font-size: 1.2em; + font-weight: bold; + font-size: 1.2em; } li.event-list-item { - list-style-type: none; + list-style-type: none; } li.event-list-item p { - margin-top: 0; - color: #5a5a5a; - font-size: .95em; + margin-top: 0; + color: #5a5a5a; + font-size: .95em; } h2.event_page_title { - border-bottom: #e0e0e0 thin solid; - padding-bottom: 0.5em; - font-weight: bold; + border-bottom: #e0e0e0 thin solid; + padding-bottom: 0.5em; + font-weight: bold; } .event-list-top-bar { - float: right; + float: right; } .event-list-nav li { - display: inline; - margin-right: 1em; + display: inline; + margin-right: 1em; } .event-left-col { - width: 70%; - float: left; + width: 70%; + float: left; } .event-right-col { - width: 25%; - float: left; - padding: 1em; - border-left: var(--wp--preset--color--cyan-bluish-gray) thin solid; + width: 25%; + float: left; + padding: 1em; + border-left: var(--wp--preset--color--cyan-bluish-gray) thin solid; } .event-attending-list { - list-style-type: none; - padding: 0; + list-style-type: none; + padding: 0; } .event-attending-list li { - margin-bottom: 1em; + margin-bottom: 1em; } .event-list-nav li a.button { - background-color: var(--gp-color-btn-primary-bg) !important; - color: #fff !important; + background-color: var(--gp-color-btn-primary-bg) !important; + color: #fff !important; } a.event-link-draft { - color:#80807f; + color:#80807f; } span.event-label-draft { - font-weight: 500; - color:#c05621; - border: 1px solid #c05621; - font-size: .7em; - margin-right: 0.3em; - width: 6em; - text-align: center; - padding: 0.2em 0.5em; - border-radius: 1em; - text-transform: capitalize; -} - + font-weight: 500; + color:#c05621; + border: 1px solid #c05621; + font-size: .7em; + margin-right: 0.3em; + width: 6em; + text-align: center; + padding: 0.2em 0.5em; + border-radius: 1em; + text-transform: capitalize; +} diff --git a/assets/js/translation-events.js b/assets/js/translation-events.js index 28b7bd4b..51e7fdcd 100644 --- a/assets/js/translation-events.js +++ b/assets/js/translation-events.js @@ -1,114 +1,154 @@ -( function( $, $gp ) { -jQuery(document).ready(function($) { - $gp.notices.init(); - if ( $('#event-timezone').length && ! $('#event-timezone').val() ) { - selectUserTimezone(); - } - validateEventDates(); - convertToUserLocalTime(); +( + function ( $, $gp ) { + jQuery( document ).ready( + function ( $ ) { + $gp.notices.init(); + const timezoneElement = $( '#event-timezone' ); + if ( timezoneElement.length && ! timezoneElement.val() ) { + selectUserTimezone(); + } + validateEventDates(); + convertToUserLocalTime(); - $('.submit-event').on('click', function(e) { - e.preventDefault(); - if ( $('#event-end').val() <= $('#event-start').val() ) { - $gp.notices.error( 'Event end date and time must be later than event start date and time.' ); - return; - } - var btnClicked = $(this).data('event-status'); - if ( btnClicked == 'publish' && '' == $('#event-id').val() ) { - var submitPrompt = 'Are you sure you want to publish this event?'; - if ( ! confirm( submitPrompt ) ) { - return; - } - } - $('#event-form-action').val( btnClicked ); - var $form = $('.translation-event-form'); - var $is_creation = $('#form-name').val() == 'create_event' ? true : false; + $( '.submit-event' ).on( + 'click', + function ( e ) { + e.preventDefault(); + handleSubmit(); + } + ); - $.ajax({ - type: 'POST', - url: $translation_event.url, - data:$form.serialize(), - success: function(response) { - if ( response.data.eventId ) { - history.replaceState('','', response.data.eventEditUrl) - $('#form-name').val('edit_event'); - $('.event-page-title').text('Edit Event'); - $('#event-id').val(response.data.eventId); - if( btnClicked == 'publish' ) { - $('button[data-event-status="draft"]').hide(); - $('button[data-event-status="publish"]').text('Update Event'); - } - if( btnClicked == 'draft' ) { - $('button[data-event-status="draft"]').text('Update Draft'); - } - $('#event-url').removeClass('hide-event-url').find('a').attr('href', response.data.eventUrl).text(response.data.eventUrl); - if ( $is_creation ) { - $('#delete-button').toggle(); - } - $gp.notices.success(response.data.message); - } - }, - error: function(error) { - $gp.notices.error(response.data.message); - } - }); - }); + $( '.delete-event' ).on( + 'click', + function ( e ) { + e.preventDefault(); + handleDelete() + } + ); + } + ); + + function handleSubmit() { + if ( $( '#event-end' ).val() <= $( '#event-start' ).val() ) { + $gp.notices.error( 'Event end date and time must be later than event start date and time.' ); + return; + } + const btnClicked = $( this ).data( 'event-status' ); + if ( btnClicked === 'publish' && '' === $( '#event-id' ).val() ) { + const submitPrompt = 'Are you sure you want to publish this event?'; + if ( ! confirm( submitPrompt ) ) { + return; + } + } + $( '#event-form-action' ).val( btnClicked ); + const $form = $( '.translation-event-form' ); + const $is_creation = $( '#form-name' ).val() === 'create_event'; - $('.delete-event').on('click', function(e) { - e.preventDefault(); + $.ajax( + { + type: 'POST', + url: $translation_event.url, + data:$form.serialize(), + success: function ( response ) { + if ( response.data.eventId ) { + history.replaceState( '', '', response.data.eventEditUrl ); + $( '#form-name' ).val( 'edit_event' ); + $( '.event-page-title' ).text( 'Edit Event' ); + $( '#event-id' ).val( response.data.eventId ); + if ( btnClicked === 'publish' ) { + $( 'button[data-event-status="draft"]' ).hide(); + $( 'button[data-event-status="publish"]' ).text( 'Update Event' ); + } + if ( btnClicked === 'draft' ) { + $( 'button[data-event-status="draft"]' ).text( 'Update Draft' ); + } + $( '#event-url' ).removeClass( 'hide-event-url' ).find( 'a' ).attr( 'href', response.data.eventUrl ).text( response.data.eventUrl ); + if ( $is_creation ) { + $( '#delete-button' ).toggle(); + } + $gp.notices.success( response.data.message ); + } + }, + error: function ( error ) { + $gp.notices.error( response.data.message ); + } + } + ); + } + + function handleDelete() { if ( ! confirm( 'Are you sure you want to delete this event?' ) ) { return; } - var $form = $('.translation-event-form'); - $('#form-name').val('delete_event'); - $('#event-form-action').val( 'delete' ); - $.ajax({ - type: 'POST', - url: $translation_event.url, - data:$form.serialize(), - success: function(response) { - window.location = response.data.eventDeleteUrl; - }, - error: function(error) { - $gp.notices.error(response.data.message); - }, - }); - }); - function validateEventDates() { - var startDateTimeInput = $('#event-start'); - var endDateTimeInput = $('#event-end'); - if ( ! startDateTimeInput.length || ! endDateTimeInput.length ) { - return; - } + const $form = $( '.translation-event-form' ); + $( '#form-name' ).val( 'delete_event' ); + $( '#event-form-action' ).val( 'delete' ); + $.ajax( + { + type: 'POST', + url: $translation_event.url, + data:$form.serialize(), + success: function ( response ) { + window.location = response.data.eventDeleteUrl; + }, + error: function ( error ) { + $gp.notices.error( response.data.message ); + }, + } + ); + } - startDateTimeInput.add(endDateTimeInput).on('input', function () { - endDateTimeInput.prop('min', startDateTimeInput.val()); - if (endDateTimeInput.val() < startDateTimeInput.val()) { - endDateTimeInput.val(startDateTimeInput.val()); - } - }); - } - function selectUserTimezone() { - document.querySelector(`#event-timezone option[value="${Intl.DateTimeFormat().resolvedOptions().timeZone}"]`).selected = true - } + function validateEventDates() { + const startDateTimeInput = $( '#event-start' ); + const endDateTimeInput = $( '#event-end' ); + if ( ! startDateTimeInput.length || ! endDateTimeInput.length ) { + return; + } - function convertToUserLocalTime() { - var timeElements = document.querySelectorAll('time.event-utc-time'); - if ( timeElements.length === 0 ) { - return; - } - timeElements.forEach(function(timeEl) { - var eventDateObj = new Date( timeEl.getAttribute('datetime') ); - var userTimezoneOffset = new Date().getTimezoneOffset(); - var userTimezoneOffsetMs = userTimezoneOffset * 60 * 1000; - var userLocalDateTime = new Date(eventDateObj.getTime() - userTimezoneOffsetMs); + startDateTimeInput.add( endDateTimeInput ).on( + 'input', + function () { + endDateTimeInput.prop( 'min', startDateTimeInput.val() ); + if (endDateTimeInput.val() < startDateTimeInput.val()) { + endDateTimeInput.val( startDateTimeInput.val() ); + } + } + ); + } + function selectUserTimezone() { + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + // phpcs:disable WordPress.WhiteSpace.OperatorSpacing.NoSpaceBefore + // phpcs:disable WordPress.WhiteSpace.OperatorSpacing.NoSpaceAfter + document.querySelector( `#event-timezone option[value="${timezone}"]` ).selected = true + // phpcs:enable + } - var options = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true, timeZoneName: 'short' }; + function convertToUserLocalTime() { + const timeElements = document.querySelectorAll( 'time.event-utc-time' ); + if ( timeElements.length === 0 ) { + return; + } + timeElements.forEach( + function ( timeEl ) { + const eventDateObj = new Date( timeEl.getAttribute( 'datetime' ) ); + const userTimezoneOffset = new Date().getTimezoneOffset(); + const userTimezoneOffsetMs = userTimezoneOffset * 60 * 1000; + const userLocalDateTime = new Date( eventDateObj.getTime() - userTimezoneOffsetMs ); - timeEl.textContent = userLocalDateTime.toLocaleString('en-US', options); - }); - } + const options = { + weekday: 'short', + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + hour12: true, + timeZoneName: 'short' + }; -}); -}( jQuery, $gp ) + timeEl.textContent = userLocalDateTime.toLocaleString( 'en-US', options ); + } + ); + } + }( jQuery, $gp ) ); diff --git a/phpcs.xml b/phpcs.xml index f4a862c2..c7904ecf 100644 --- a/phpcs.xml +++ b/phpcs.xml @@ -3,8 +3,9 @@ Coding standards - + + ./assets/ ./includes/ ./templates/ ./tests/ diff --git a/templates/events-user-created.php b/templates/events-user-created.php index fbf83e89..c945d322 100644 --- a/templates/events-user-created.php +++ b/templates/events-user-created.php @@ -31,7 +31,7 @@ -

+