Skip to content

Commit

Permalink
Show panel and section notifications when AMP is unavailable
Browse files Browse the repository at this point in the history
  • Loading branch information
@westonruter
westonruter authored and Thierry Muller committed Dec 13, 2017
1 parent d952ea8 commit d72dca3
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 21 deletions.
95 changes: 81 additions & 14 deletions assets/js/amp-customize-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@ var ampCustomizeControls = ( function( api, $ ) {

var component = {
data: {
query: 'amp'
queryVar: 'amp',
panelId: '',
ampUrl: '',
l10n: {
unavailableMessage: '',
unavailableLinkText: ''
}
},
tooltipTimeout: 5000,
tooltipVisible: new api.Value( false ),
Expand All @@ -27,7 +33,7 @@ var ampCustomizeControls = ( function( api, $ ) {
api.state.add( 'ampAvailable', new api.Value( false ) );

api.bind( 'ready', function() {
api.panel( 'amp_panel', component.panelReady );
api.panel( component.data.panelId, component.panelReady );
} );
};

Expand All @@ -39,10 +45,10 @@ var ampCustomizeControls = ( function( api, $ ) {
*/
component.isAmpUrl = function isAmpUrl( url ) {
var urlParser = document.createElement( 'a' ),
regexEndpoint = new RegExp( '\\/' + component.data.query + '\\/?$' );
regexEndpoint = new RegExp( '\\/' + component.data.queryVar + '\\/?$' );

urlParser.href = url;
if ( ! _.isUndefined( wp.customize.utils.parseQueryString( urlParser.search.substr( 1 ) )[ component.data.query ] ) ) {
if ( ! _.isUndefined( wp.customize.utils.parseQueryString( urlParser.search.substr( 1 ) )[ component.data.queryVar ] ) ) {
return true;
}
return regexEndpoint.test( urlParser.pathname );
Expand All @@ -56,15 +62,15 @@ var ampCustomizeControls = ( function( api, $ ) {
*/
component.unampifyUrl = function unampifyUrl( url ) {
var urlParser = document.createElement( 'a' ),
regexEndpoint = new RegExp( '\\/' + component.data.query + '\\/?$' ),
regexEndpoint = new RegExp( '\\/' + component.data.queryVar + '\\/?$' ),
params;

urlParser.href = url;
urlParser.pathname = urlParser.pathname.replace( regexEndpoint, '' );

if ( urlParser.search.length > 1 ) {
params = wp.customize.utils.parseQueryString( urlParser.search.substr( 1 ) );
delete params[ component.data.query ];
delete params[ component.data.queryVar ];
urlParser.search = $.param( params );
}

Expand All @@ -83,7 +89,7 @@ var ampCustomizeControls = ( function( api, $ ) {
if ( urlParser.search.length ) {
urlParser.search += '&';
}
urlParser.search += component.data.query + '=1';
urlParser.search += component.data.queryVar + '=1';
return urlParser.href;
};

Expand Down Expand Up @@ -131,17 +137,67 @@ var ampCustomizeControls = ( function( api, $ ) {
api.previewer.previewUrl.set( component.setCurrentAmpUrl( api.previewer.previewUrl.get() ) );
};

/**
* Enable AMP and navigate to the given URL.
*
* @param {string} url - URL.
* @returns {void}
*/
component.enableAndNavigateToUrl = function enableAndNavigateToUrl( url ) {
api.state( 'ampEnabled' ).set( true );
api.previewer.previewUrl.set( url );
};

/**
* Update panel notifications.
*
* @returns {void}
*/
component.updatePanelNotifications = function updatePanelNotifications() {
var panel = api.panel( component.data.panelId ), containers;
containers = panel.sections().concat( [ panel ] );
if ( api.state( 'ampAvailable' ).get() ) {
_.each( containers, function( container ) {
container.notifications.remove( 'amp_unavailable' );
} );
} else {
_.each( containers, function( container ) {
container.notifications.add( new api.Notification( 'amp_unavailable', {
message: component.data.l10n.unavailableMessage,
type: 'info',
linkText: component.data.l10n.unavailableLinkText,
url: component.data.ampUrl,
templateId: 'customize-amp-unavailable-notification',
render: function() {
var li = api.Notification.prototype.render.call( this );
li.find( 'a' ).on( 'click', function( event ) {
event.preventDefault();
component.enableAndNavigateToUrl( this.href );
} );
return li;
}
} ) );
} );
}
};

/**
* Hook up all AMP preview interactions once panel is ready.
*
* @param {wp.customize.Panel} panel The AMP panel.
* @return {void}
*/
component.panelReady = function panelReady( panel ) {
var ampToggleContainer = $( wp.template( 'customize-amp-enabled-toggle' )() ),
checkbox = ampToggleContainer.find( 'input[type=checkbox]' ),
tooltip = ampToggleContainer.find( '.tooltip' ),
tooltipLink = tooltip.find( 'a' );
var ampToggleContainer, checkbox, tooltip, tooltipLink;

ampToggleContainer = $( wp.template( 'customize-amp-enabled-toggle' )( {
message: component.data.l10n.unavailableMessage,
linkText: component.data.l10n.unavailableLinkText,
url: component.data.ampUrl
} ) );
checkbox = ampToggleContainer.find( 'input[type=checkbox]' );
tooltip = ampToggleContainer.find( '.tooltip' );
tooltipLink = tooltip.find( 'a' );

// AMP panel triggers the input toggle for AMP preview.
panel.expanded.bind( function( expanded ) {
Expand All @@ -150,13 +206,25 @@ var ampCustomizeControls = ( function( api, $ ) {
}
if ( api.state( 'ampAvailable' ).get() ) {
api.state( 'ampEnabled' ).set( panel.expanded.get() );
} else {
} else if ( ! panel.notifications ) {

/*
* This is only done if panel notifications aren't supported.
* If they are (as of 4.9) then a notification will be shown
* in the panel and its sections when AMP is not available.
*/
setTimeout( function() {
component.tooltipVisible.set( true );
}, 250 );
}
} );

if ( panel.notifications ) {
api.state( 'ampAvailable' ).bind( component.updatePanelNotifications );
component.updatePanelNotifications();
api.section.bind( 'add', component.updatePanelNotifications );
}

// Enable AMP toggle if available and mobile device selected.
api.previewedDevice.bind( function( device ) {
if ( api.state( 'ampAvailable' ).get() ) {
Expand Down Expand Up @@ -210,8 +278,7 @@ var ampCustomizeControls = ( function( api, $ ) {
// User clicked link within tooltip, go to linked post in preview.
tooltipLink.on( 'click', function( event ) {
event.preventDefault();
api.state( 'ampEnabled' ).set( true );
api.previewer.previewUrl.set( $( this ).prop( 'href' ) );
component.enableAndNavigateToUrl( this.href );
} );

// Toggle visibility of tooltip based on tooltipVisible state.
Expand Down
28 changes: 21 additions & 7 deletions includes/admin/class-amp-customizer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,13 @@ public function add_customizer_scripts() {

wp_add_inline_script( 'amp-customize-controls', sprintf( 'ampCustomizeControls.boot( %s );',
wp_json_encode( array(
'query' => AMP_QUERY_VAR,
'queryVar' => AMP_QUERY_VAR,
'panelId' => self::PANEL_ID,
'ampUrl' => amp_admin_get_preview_permalink(),
'l10n' => array(
'unavailableMessage' => __( 'AMP is not available for the page currently being previewed.', 'amp' ),
'unavailableLinkText' => __( 'Navigate to an AMP compatible page', 'amp' ),
),
) )
) );

Expand All @@ -154,7 +160,6 @@ public function add_customizer_scripts() {
do_action( 'amp_customizer_enqueue_scripts', $this->wp_customize );
}


/**
* Enqueues scripts used in both the AMP and non-AMP Customizer preview.
*
Expand Down Expand Up @@ -245,22 +250,31 @@ public function add_preview_scripts() {
* @since 0.6
*/
public function print_controls_templates() {
$url = amp_admin_get_preview_permalink();
?>
<script type="text/html" id="tmpl-customize-amp-enabled-toggle">
<div class="amp-toggle">
<# var elementIdPrefix = _.uniqueId( 'customize-amp-enabled-toggle' ); #>
<div id="{{ elementIdPrefix }}tooltip" aria-hidden="true" class="tooltip" role="tooltip">
<?php esc_html_e( 'This page is not compatible with AMP.', 'amp' ); ?>
<?php if ( $url ) : ?>
<a href="<?php echo esc_url( $url ); ?>"><?php esc_html_e( 'Navigate to an AMP compatible page', 'amp' ); ?></a>
<?php endif; ?>
{{ data.message }}
<# if ( data.url ) { #>
<a href="{{ data.url }}">{{ data.linkText }}</a>
<# } #>
</div>
<input id="{{ elementIdPrefix }}checkbox" type="checkbox" class="disabled" aria-describedby="{{ elementIdPrefix }}tooltip">
<span class="slider"></span>
<label for="{{ elementIdPrefix }}checkbox" class="screen-reader-text"><?php esc_html_e( 'AMP preview enabled', 'amp' ); ?></label>
</div>
</script>
<script type="text/html" id="tmpl-customize-amp-unavailable-notification">
<li class="notice notice-{{ data.type || 'info' }} {{ data.alt ? 'notice-alt' : '' }} {{ data.containerClasses || '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
<div class="notification-message">
{{ data.message }}
<# if ( data.url ) { #>
<a href="{{ data.url }}">{{ data.linkText }}</a>
<# } #>
</div>
</li>
</script>
<?php
}

Expand Down

0 comments on commit d72dca3

Please sign in to comment.