initial
This commit is contained in:
@@ -0,0 +1,333 @@
|
||||
/* global jQuery, ajaxurl, inlineEditTest */
|
||||
|
||||
document
|
||||
.getElementById( 'show-modal-add-new' )
|
||||
?.addEventListener( 'click', () => {
|
||||
window.wpLink.open( 'input_hidden_internal_url' );
|
||||
} );
|
||||
|
||||
window.wp = window.wp || {};
|
||||
( function ( $, wp ) {
|
||||
window.inlineEditTest = {
|
||||
/**
|
||||
* Initializes the inline and bulk post editor.
|
||||
*
|
||||
* Binds event handlers to the Escape key to close the inline editor
|
||||
* and to the save and close buttons. Changes DOM to be ready for inline
|
||||
* editing. Adds event handler to bulk edit.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
init() {
|
||||
const t = this,
|
||||
qeRow = $( '#inline-edit' );
|
||||
|
||||
t.type = 'test';
|
||||
// Test ID prefix.
|
||||
t.what = '#test-';
|
||||
|
||||
/**
|
||||
* Binds the Escape key to revert the changes and close the quick editor.
|
||||
*
|
||||
* @return {boolean} The result of revert.
|
||||
*/
|
||||
qeRow.on( 'keyup', function ( e ) {
|
||||
// Revert changes if Escape key is pressed.
|
||||
if ( e.which === 27 ) {
|
||||
return inlineEditTest.revert();
|
||||
}
|
||||
} );
|
||||
|
||||
/**
|
||||
* Reverts changes and close the quick editor if the cancel button is clicked.
|
||||
*
|
||||
* @return {boolean} The result of revert.
|
||||
*/
|
||||
$( '.cancel', qeRow ).on( 'click', function () {
|
||||
return inlineEditTest.revert();
|
||||
} );
|
||||
|
||||
/**
|
||||
* Saves changes in the quick editor if the save(named: update) button is clicked.
|
||||
*
|
||||
* @return {boolean} The result of save.
|
||||
*/
|
||||
$( '.save', qeRow ).on( 'click', function () {
|
||||
return inlineEditTest.save( this );
|
||||
} );
|
||||
|
||||
/**
|
||||
* If Enter is pressed, and the target is not the cancel button, save the post.
|
||||
*
|
||||
* @return {boolean} The result of save.
|
||||
*/
|
||||
$( 'td', qeRow ).on( 'keydown', function ( e ) {
|
||||
if (
|
||||
e.which === 13 &&
|
||||
! e.shiftKey &&
|
||||
! $( e.target ).hasClass( 'cancel' )
|
||||
) {
|
||||
return inlineEditTest.save( this );
|
||||
}
|
||||
} );
|
||||
|
||||
/**
|
||||
* Binds click event to the .editinline button which opens the quick editor.
|
||||
*/
|
||||
$( '#the-list' ).on( 'click', '.editinline', function () {
|
||||
$( this ).attr( 'aria-expanded', 'true' );
|
||||
inlineEditTest.edit( this );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Adds onclick events to the apply buttons.
|
||||
*/
|
||||
$( '#doaction' ).on( 'click', function ( e ) {
|
||||
t.whichBulkButtonId = $( this ).attr( 'id' );
|
||||
const n = t.whichBulkButtonId.substr( 2 );
|
||||
|
||||
if ( 'edit' === $( 'select[name="' + n + '"]' ).val() ) {
|
||||
e.preventDefault();
|
||||
} else if (
|
||||
$( 'form#posts-filter tr.inline-editor' ).length > 0
|
||||
) {
|
||||
t.revert();
|
||||
}
|
||||
} );
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles the quick edit window, hiding it when it's active and showing it when
|
||||
* inactive.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @param {Object} el Element within a post table row.
|
||||
*/
|
||||
toggle( el ) {
|
||||
const t = this;
|
||||
// eslint-disable-next-line
|
||||
$( t.what + t.getId( el ) ).css( 'display' ) === 'none'
|
||||
? t.revert()
|
||||
: t.edit( el );
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates a quick edit window for the post that has been clicked.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @param {number|Object} id The ID of the clicked post or an element within a post
|
||||
* table row.
|
||||
* @return {boolean} Always returns false at the end of execution.
|
||||
*/
|
||||
edit( id ) {
|
||||
const t = this;
|
||||
t.revert();
|
||||
|
||||
if ( typeof id === 'object' ) {
|
||||
id = t.getId( id );
|
||||
}
|
||||
|
||||
// Add the new edit row with an extra blank row underneath to maintain zebra striping.
|
||||
const editRow = $( '#inline-edit' ).clone( true );
|
||||
$( 'td', editRow ).attr(
|
||||
'colspan',
|
||||
$( 'th:visible, td:visible', '.widefat:first thead' ).length
|
||||
);
|
||||
|
||||
// Remove the ID from the copied row and let the `for` attribute reference the hidden ID.
|
||||
$( 'td', editRow ).find( '#quick-edit-legend' ).removeAttr( 'id' );
|
||||
$( 'td', editRow )
|
||||
.find( 'p[id^="quick-edit-"]' )
|
||||
.removeAttr( 'id' );
|
||||
|
||||
$( t.what + id )
|
||||
.removeClass( 'is-expanded' )
|
||||
.hide()
|
||||
.after( editRow )
|
||||
.after( '<tr class="hidden"></tr>' );
|
||||
|
||||
// Populate fields in the quick edit window.
|
||||
const rowData = $( '#inline_' + id );
|
||||
const hideInputSelectorsText = $(
|
||||
'.hide_css_selectors',
|
||||
rowData
|
||||
).text();
|
||||
$( ':input[name="hide_css_selectors"]', editRow ).val(
|
||||
hideInputSelectorsText
|
||||
);
|
||||
|
||||
$( editRow )
|
||||
.attr( 'id', 'edit-' + id )
|
||||
.addClass( 'inline-editor' )
|
||||
.show();
|
||||
$( ':input[name="hide_css_selectors"]', editRow ).trigger(
|
||||
'focus'
|
||||
);
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Saves the changes made in the quick edit window to the post.
|
||||
* Ajax saving is only for Quick Edit and not for bulk edit.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @param {number} id The ID for the post that has been changed.
|
||||
* @return {boolean} False, so the form does not submit when pressing
|
||||
* Enter on a focused field.
|
||||
*/
|
||||
save( id ) {
|
||||
if ( typeof id === 'object' ) {
|
||||
id = this.getId( id );
|
||||
}
|
||||
|
||||
$( 'table.widefat .spinner' ).addClass( 'is-active' );
|
||||
|
||||
const params = {
|
||||
action: 'vrts_test_quick_edit_save',
|
||||
test_id: id,
|
||||
hide_css_selectors: $(
|
||||
'#edit-' + id + ' [name="hide_css_selectors"]'
|
||||
).val(),
|
||||
nonce: $( '#_vrts_test_quick_edit_nonce' ).val(),
|
||||
};
|
||||
|
||||
// Make Ajax request
|
||||
$.post(
|
||||
ajaxurl,
|
||||
params,
|
||||
function ( response ) {
|
||||
$( 'table.widefat .spinner' ).removeClass( 'is-active' );
|
||||
|
||||
// Work with the response.
|
||||
response = $.parseJSON( response );
|
||||
|
||||
if ( ! response.success ) {
|
||||
const $errorNotice = $(
|
||||
'#edit-' + id + ' .inline-edit-save .notice-error'
|
||||
);
|
||||
$errorNotice.removeClass( 'hidden' );
|
||||
$errorNotice.text( response.message );
|
||||
wp.a11y.speak( response.message );
|
||||
return;
|
||||
}
|
||||
|
||||
$( '#inline_' + id + ' .hide_css_selectors' ).text(
|
||||
response.hide_css_selectors
|
||||
);
|
||||
|
||||
// Hide the quick edit window.
|
||||
const $tableWideFat = $( '.widefat' );
|
||||
id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
|
||||
|
||||
if ( id ) {
|
||||
$( '.spinner', $tableWideFat ).removeClass(
|
||||
'is-active'
|
||||
);
|
||||
|
||||
// Remove both the inline-editor and its hidden tr siblings.
|
||||
$( '#' + id )
|
||||
.siblings( 'tr.hidden' )
|
||||
.addBack()
|
||||
.remove();
|
||||
id = id.substr( id.lastIndexOf( '-' ) + 1 );
|
||||
|
||||
// Show the post row and move focus back to the Quick Edit button.
|
||||
$( '#test-' + id )
|
||||
.fadeIn( 400 )
|
||||
.find( '.editinline' )
|
||||
.attr( 'aria-expanded', 'false' )
|
||||
.trigger( 'focus' );
|
||||
}
|
||||
|
||||
wp.a11y.speak( response.message );
|
||||
|
||||
// Update the snapshot column in the table and set the status of the snapshot.
|
||||
const snapshotStatus = response.snapshot_status;
|
||||
const $snapshotColumn = $(
|
||||
'#test-' + id + ' .base_screenshot_date'
|
||||
);
|
||||
if (
|
||||
null !== snapshotStatus &&
|
||||
undefined !== snapshotStatus &&
|
||||
'' !== snapshotStatus
|
||||
) {
|
||||
$snapshotColumn.text( snapshotStatus );
|
||||
}
|
||||
},
|
||||
'html'
|
||||
);
|
||||
|
||||
// Prevent submitting the form when pressing Enter on a focused field.
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Hides and empties the Quick Edit and/or Bulk Edit windows.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @return {boolean} Always returns false.
|
||||
*/
|
||||
revert() {
|
||||
const $tableWideFat = $( '.widefat' );
|
||||
let id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
|
||||
|
||||
if ( id ) {
|
||||
$( '.spinner', $tableWideFat ).removeClass( 'is-active' );
|
||||
|
||||
// Remove both the inline-editor and its hidden tr siblings.
|
||||
$( '#' + id )
|
||||
.siblings( 'tr.hidden' )
|
||||
.addBack()
|
||||
.remove();
|
||||
id = id.substr( id.lastIndexOf( '-' ) + 1 );
|
||||
|
||||
// Show the post row and move focus back to the Quick Edit button.
|
||||
$( this.what + id )
|
||||
.show()
|
||||
.find( '.editinline' )
|
||||
.attr( 'aria-expanded', 'false' )
|
||||
.trigger( 'focus' );
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the ID for a the post that you want to quick edit from the row in the quick
|
||||
* edit table.
|
||||
*
|
||||
* @since 2.7.0
|
||||
*
|
||||
* @memberof inlineEditTest
|
||||
*
|
||||
* @param {Object} o DOM row object to get the ID for.
|
||||
* @return {string} The post ID extracted from the table row in the object.
|
||||
*/
|
||||
getId( o ) {
|
||||
const id = $( o ).closest( 'tr' ).attr( 'id' ),
|
||||
parts = id.split( '-' );
|
||||
return parts[ parts.length - 1 ];
|
||||
},
|
||||
};
|
||||
|
||||
$( function () {
|
||||
if ( $( '.vrts-list-table-page' ).length ) {
|
||||
inlineEditTest.init();
|
||||
}
|
||||
} );
|
||||
} )( jQuery, window.wp );
|
||||
Reference in New Issue
Block a user