180 lines
4.1 KiB
JavaScript
180 lines
4.1 KiB
JavaScript
/* exported ampPostMetaBox */
|
|
|
|
/**
|
|
* AMP Post Meta Box.
|
|
*
|
|
* @todo Rename this to be just the ampEditPostScreen?
|
|
*
|
|
* @since 0.6
|
|
*/
|
|
var ampPostMetaBox = ( function( $ ) { // eslint-disable-line no-unused-vars
|
|
'use strict';
|
|
|
|
var component = {
|
|
|
|
/**
|
|
* Holds data.
|
|
*
|
|
* @since 0.6
|
|
*/
|
|
data: {
|
|
canonical: false, // Overridden by amp_is_canonical().
|
|
previewLink: '',
|
|
enabled: true, // Overridden by post_supports_amp( $post ).
|
|
canSupport: true, // Overridden by count( AMP_Post_Type_Support::get_support_errors( $post ) ) === 0.
|
|
statusInputName: '',
|
|
l10n: {
|
|
ampPreviewBtnLabel: ''
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggle animation speed.
|
|
*
|
|
* @since 0.6
|
|
*/
|
|
toggleSpeed: 200,
|
|
|
|
/**
|
|
* Core preview button selector.
|
|
*
|
|
* @since 0.6
|
|
*/
|
|
previewBtnSelector: '#post-preview',
|
|
|
|
/**
|
|
* AMP preview button selector.
|
|
*
|
|
* @since 0.6
|
|
*/
|
|
ampPreviewBtnSelector: '#amp-post-preview'
|
|
};
|
|
|
|
/**
|
|
* Boot plugin.
|
|
*
|
|
* @since 0.6
|
|
* @param {Object} data Object data.
|
|
* @return {void}
|
|
*/
|
|
component.boot = function boot( data ) {
|
|
component.data = data;
|
|
$( document ).ready( function() {
|
|
component.statusRadioInputs = $( '[name="' + component.data.statusInputName + '"]' );
|
|
if ( component.data.enabled && ! component.data.canonical ) {
|
|
component.addPreviewButton();
|
|
}
|
|
component.listen();
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* Events listener.
|
|
*
|
|
* @since 0.6
|
|
* @return {void}
|
|
*/
|
|
component.listen = function listen() {
|
|
$( component.ampPreviewBtnSelector ).on( 'click.amp-post-preview', function( e ) {
|
|
e.preventDefault();
|
|
component.onAmpPreviewButtonClick();
|
|
} );
|
|
|
|
component.statusRadioInputs.prop( 'disabled', true ); // Prevent cementing setting default status as overridden status.
|
|
$( '.edit-amp-status, [href="#amp_status"]' ).click( function( e ) {
|
|
e.preventDefault();
|
|
component.statusRadioInputs.prop( 'disabled', false );
|
|
component.toggleAmpStatus( $( e.target ) );
|
|
} );
|
|
|
|
$( '#submitpost input[type="submit"]' ).on( 'click', function() {
|
|
$( component.ampPreviewBtnSelector ).addClass( 'disabled' );
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* Add AMP Preview button.
|
|
*
|
|
* @since 0.6
|
|
* @return {void}
|
|
*/
|
|
component.addPreviewButton = function addPreviewButton() {
|
|
var previewBtn = $( component.previewBtnSelector );
|
|
previewBtn
|
|
.clone()
|
|
.insertAfter( previewBtn )
|
|
.prop( {
|
|
href: component.data.previewLink,
|
|
id: component.ampPreviewBtnSelector.replace( '#', '' )
|
|
} )
|
|
.text( component.data.l10n.ampPreviewBtnLabel )
|
|
.parent()
|
|
.addClass( 'has-amp-preview' );
|
|
};
|
|
|
|
/**
|
|
* AMP Preview button click handler.
|
|
*
|
|
* We trigger the Core preview link for events propagation purposes.
|
|
*
|
|
* @since 0.6
|
|
* @return {void}
|
|
*/
|
|
component.onAmpPreviewButtonClick = function onAmpPreviewButtonClick() {
|
|
var $input;
|
|
|
|
// Flag the AMP preview referer.
|
|
$input = $( '<input>' )
|
|
.prop( {
|
|
type: 'hidden',
|
|
name: 'amp-preview',
|
|
value: 'do-preview'
|
|
} )
|
|
.insertAfter( component.ampPreviewBtnSelector );
|
|
|
|
// Trigger Core preview button and remove AMP flag.
|
|
$( component.previewBtnSelector ).click();
|
|
$input.remove();
|
|
};
|
|
|
|
/**
|
|
* Add AMP status toggle.
|
|
*
|
|
* @since 0.6
|
|
* @param {Object} $target Event target.
|
|
* @return {void}
|
|
*/
|
|
component.toggleAmpStatus = function toggleAmpStatus( $target ) {
|
|
var $container = $( '#amp-status-select' ),
|
|
status = $container.data( 'amp-status' ),
|
|
$checked,
|
|
editAmpStatus = $( '.edit-amp-status' );
|
|
|
|
// Don't modify status on cancel button click.
|
|
if ( ! $target.hasClass( 'button-cancel' ) ) {
|
|
status = component.statusRadioInputs.filter( ':checked' ).val();
|
|
}
|
|
|
|
$checked = $( '#amp-status-' + status );
|
|
|
|
// Toggle elements.
|
|
editAmpStatus.fadeToggle( component.toggleSpeed, function() {
|
|
if ( editAmpStatus.is( ':visible' ) ) {
|
|
editAmpStatus.focus();
|
|
} else {
|
|
$container.find( 'input[type="radio"]' ).first().focus();
|
|
}
|
|
} );
|
|
$container.slideToggle( component.toggleSpeed );
|
|
|
|
// Update status.
|
|
if ( component.data.canSupport ) {
|
|
$container.data( 'amp-status', status );
|
|
$checked.prop( 'checked', true );
|
|
$( '.amp-status-text' ).text( $checked.next().text() );
|
|
}
|
|
};
|
|
|
|
return component;
|
|
}( window.jQuery ) );
|