diff --git a/assets/css/amp-validation-error-taxonomy.css b/assets/css/amp-validation-error-taxonomy.css index cc6fa294636..3ac05a9613b 100644 --- a/assets/css/amp-validation-error-taxonomy.css +++ b/assets/css/amp-validation-error-taxonomy.css @@ -52,7 +52,7 @@ details[open] .details-attributes__summary { content: ""; } -details[open] .details-attributes__summary::after, +tr.expanded .details-attributes__summary::after, details.single-error-detail[open] .single-error-detail-summary::after { transform: rotate(180deg); } @@ -185,11 +185,16 @@ details.single-error-detail[open] .single-error-detail-summary::after { } body.taxonomy-amp_validation_error .wp-list-table .new th, -body.taxonomy-amp_validation_error .wp-list-table .new td { +body.taxonomy-amp_validation_error .wp-list-table .new td, +tr.expanded.new + tr > td:first-of-type, +body.post-type-amp_invalid_url .wp-list-table .new th, +body.post-type-amp_invalid_url .wp-list-table .new td { background-color: #fef7f1; } -body.taxonomy-amp_validation_error .wp-list-table .new th.check-column { +body.taxonomy-amp_validation_error .wp-list-table .new th.check-column, +tr.expanded.new + tr > td:first-of-type, +body.post-type-amp_invalid_url .wp-list-table .new th.check-column { border-left: 4px solid #d54e21; } diff --git a/assets/js/amp-invalid-url-post-edit-screen.js b/assets/js/amp-invalid-url-post-edit-screen.js index 5d5c86c1eec..4a56afeb0a1 100644 --- a/assets/js/amp-invalid-url-post-edit-screen.js +++ b/assets/js/amp-invalid-url-post-edit-screen.js @@ -1,9 +1,7 @@ /* exported ampInvalidUrlPostEditScreen */ -var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unused-vars - var component; - - component = { +const ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unused-vars + let component = { data: { l10n: { unsaved_changes: '', @@ -287,14 +285,32 @@ var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unuse * And sets this as the src of the status icon . */ component.handleStatusChange = function handleStatusChange() { - const onChange = function( event ) { + const setRowStatusClass = function( { row, select } ) { + const acceptedValue = 3; + const rejectedValue = 2; + const status = parseInt( select.options[ select.selectedIndex ].value ); + + row.classList.toggle( 'new', isNaN( status ) ); + row.classList.toggle( 'accepted', acceptedValue === status ); + row.classList.toggle( 'rejected', rejectedValue === status ); + }; + + const onChange = function( { event, row, select } ) { if ( event.target.matches( 'select' ) ) { component.updateSelectIcon( event.target ); + setRowStatusClass( { row, select } ); } }; - document.querySelectorAll( '.amp-validation-error-status' ).forEach( function( element ) { - element.addEventListener( 'change', onChange ); + document.querySelectorAll( 'tr[id^="tag-"]' ).forEach( function( row ) { + const select = row.querySelector( '.amp-validation-error-status' ); + + if ( select ) { + setRowStatusClass( { row, select } ); + select.addEventListener( 'change', function( event ) { + onChange( { event, row, select } ); + } ); + } } ); }; diff --git a/assets/js/amp-invalid-urls-index.js b/assets/js/amp-invalid-urls-index.js new file mode 100644 index 00000000000..49ff6b7d887 --- /dev/null +++ b/assets/js/amp-invalid-urls-index.js @@ -0,0 +1,34 @@ +/* exported ampInvalidUrlsIndex */ + +const ampInvalidUrlsIndex = ( function() { // eslint-disable-line no-unused-vars + let component = { + classes: {} + }; + + /** + * The class for the new status + * + * @type {string} + */ + component.classes.new = 'new'; + + /** + * Boot. + */ + component.boot = function boot() { + component.highlightRowsWithNewStatus(); + }; + + /** + * Highlight rows with new status. + */ + component.highlightRowsWithNewStatus = function highlightRowsWithNewStatus() { + document.querySelectorAll( 'tr[id^="post-"]' ).forEach( function( row ) { + if ( row.querySelector( 'span.status-text.' + component.classes.new ) ) { + row.classList.add( 'new' ); + } + } ); + }; + + return component; +}() ); diff --git a/assets/src/amp-validation-detail-toggle.js b/assets/src/amp-validation-detail-toggle.js index 2ce496b6608..ab5028b9a2d 100644 --- a/assets/src/amp-validation-detail-toggle.js +++ b/assets/src/amp-validation-detail-toggle.js @@ -14,7 +14,7 @@ const OPEN_CLASS = 'is-open'; * Adds detail toggle buttons to the header and footer rows of the validation error "details" column. * The buttons are added via JS because there's no easy way to append them to the heading of a sortable * table column via backend code. - * + * * @param {string} containerSelector Selector for elements that will have the button added. * @param {string} ariaLabel Screen reader label for the button. * @return {Array} Array of added buttons. @@ -61,6 +61,24 @@ function addToggleAllListener( { btn, toggleAllButtonSelector = null, targetDeta btn.addEventListener( 'click', onButtonClick ); } +/** + * Adds classes to the rows for the amp_validation_error term list table. + * + * This is needed because \WP_Terms_List_Table::single_row() does not allow for additional + * attributes to be added to the element. + */ +function addTermListTableRowClasses() { + const rows = [ ...document.querySelectorAll( '#the-list tr' ) ]; + rows.forEach( ( row ) => { + const statusText = row.querySelector( '.column-status > .status-text' ); + if ( statusText ) { + row.classList.toggle( 'new', statusText.classList.contains( 'new' ) ); + row.classList.toggle( 'accepted', statusText.classList.contains( 'accepted' ) ); + row.classList.toggle( 'rejected', statusText.classList.contains( 'rejected' ) ); + } + } ); +} + domReady( () => { addToggleButtons( 'th.column-details.manage-column', detailToggleBtnAriaLabel ) .forEach( ( btn ) => { @@ -79,4 +97,6 @@ domReady( () => { targetDetailsSelector: 'details.source' } ); } ); + + addTermListTableRowClasses(); } ); diff --git a/assets/src/amp-validation-error-detail-toggle.js b/assets/src/amp-validation-error-detail-toggle.js deleted file mode 100644 index d5ad388fbf8..00000000000 --- a/assets/src/amp-validation-error-detail-toggle.js +++ /dev/null @@ -1,89 +0,0 @@ -/** - * WordPress dependencies - */ -import domReady from '@wordpress/dom-ready'; - -/** - * Localized data - */ -import { btnAriaLabel } from 'amp-validation-i18n'; - -const OPEN_CLASS = 'is-open'; - -/** - * Adds detail toggle buttons to the header and footer rows of the validation error "details" column. - * The buttons are added via JS because there's no easy way to append them to the heading of a sortable - * table column via backend code. - */ -function addToggleButtons() { - const addButtons = ( th ) => { - const span = document.createElement( 'span' ); - span.classList.add( 'toggle-button-flex-container' ); - while ( th.firstChild ) { - span.appendChild( th.removeChild( th.firstChild ) ); - } - - const button = document.createElement( 'button' ); - button.setAttribute( 'aria-label', btnAriaLabel ); - button.setAttribute( 'type', 'button' ); - button.setAttribute( 'class', 'error-details-toggle' ); - span.appendChild( button ); - th.appendChild( span ); - }; - - [ ...document.querySelectorAll( 'th.column-details.manage-column' ) ].forEach( addButtons ); - [ ...document.querySelectorAll( 'th.manage-column.column-sources_with_invalid_output' ) ].forEach( addButtons ); -} - -/** - * Adds a listener toggling all details in the error type taxonomy details column. - */ -function addToggleListener() { - let open = false; - - const details = [ ...document.querySelectorAll( '.column-details details, .column-sources_with_invalid_output details' ) ]; - const toggleButtons = [ ...document.querySelectorAll( 'button.error-details-toggle' ) ]; - const onButtonClick = () => { - open = ! open; - toggleButtons.forEach( btn => { - btn.classList.toggle( OPEN_CLASS ); - } ); - details.forEach( detail => { - if ( open ) { - detail.setAttribute( 'open', true ); - } else { - detail.removeAttribute( 'open' ); - } - } ); - }; - - window.addEventListener( 'click', event => { - if ( toggleButtons.includes( event.target ) ) { - onButtonClick(); - } - } ); -} - -/** - * Adds classes to the rows for the amp_validation_error term list table. - * - * This is needed because \WP_Terms_List_Table::single_row() does not allow for additional - * attributes to be added to the element. - */ -function addTermListTableRowClasses() { - const rows = [ ...document.querySelectorAll( '#the-list > tr' ) ]; - rows.forEach( ( row ) => { - const statusText = row.querySelector( '.column-status > .status-text' ); - if ( statusText ) { - row.classList.toggle( 'new', statusText.classList.contains( 'new' ) ); - row.classList.toggle( 'accepted', statusText.classList.contains( 'accepted' ) ); - row.classList.toggle( 'rejected', statusText.classList.contains( 'rejected' ) ); - } - } ); -} - -domReady( () => { - addToggleButtons(); - addToggleListener(); - addTermListTableRowClasses(); -} ); diff --git a/includes/validation/class-amp-invalid-url-post-type.php b/includes/validation/class-amp-invalid-url-post-type.php index b5dc3a0a4f5..fb33bb01cdd 100644 --- a/includes/validation/class-amp-invalid-url-post-type.php +++ b/includes/validation/class-amp-invalid-url-post-type.php @@ -209,6 +209,21 @@ public static function add_admin_hooks() { public static function enqueue_post_list_screen_scripts() { $screen = get_current_screen(); + if ( 'edit-amp_invalid_url' === $screen->id && self::POST_TYPE_SLUG === $screen->post_type ) { + wp_enqueue_script( + 'amp-invalid-urls-index', + amp_get_asset_url( 'js/amp-invalid-urls-index.js' ), + array(), + AMP__VERSION, + true + ); + wp_add_inline_script( + 'amp-invalid-urls-index', + sprintf( 'document.addEventListener( "DOMContentLoaded", function() { ampInvalidUrlsIndex.boot(); } );' ), + 'after' + ); + } + // Enqueue this on both the 'Invalid URLs' page and the single URL page. if ( 'edit-amp_invalid_url' === $screen->id || self::POST_TYPE_SLUG === $screen->id ) { wp_enqueue_style(