Proposal: Add On This Day Widget

Gruntfile.js

@@ -485,6 +485,7 @@ module.exports = function(grunt) {
 					[ WORKING_DIR + 'wp-admin/js/media-upload.js' ]: [ './src/js/_enqueues/admin/media-upload.js' ],
 					[ WORKING_DIR + 'wp-admin/js/media.js' ]: [ './src/js/_enqueues/admin/media.js' ],
 					[ WORKING_DIR + 'wp-admin/js/nav-menu.js' ]: [ './src/js/_enqueues/lib/nav-menu.js' ],
+					[ WORKING_DIR + 'wp-admin/js/on-this-day.js' ]: [ './src/js/_enqueues/admin/on-this-day.js' ],
 					[ WORKING_DIR + 'wp-admin/js/password-strength-meter.js' ]: [ './src/js/_enqueues/wp/password-strength-meter.js' ],
 					[ WORKING_DIR + 'wp-admin/js/password-toggle.js' ]: [ './src/js/_enqueues/admin/password-toggle.js' ],
 					[ WORKING_DIR + 'wp-admin/js/plugin-install.js' ]: [ './src/js/_enqueues/admin/plugin-install.js' ],
@@ -1236,6 +1237,7 @@ module.exports = function(grunt) {
 					'src/wp-admin/js/media-upload.js': 'src/js/_enqueues/admin/media-upload.js',
 					'src/wp-admin/js/media.js': 'src/js/_enqueues/admin/media.js',
 					'src/wp-admin/js/nav-menu.js': 'src/js/_enqueues/lib/nav-menu.js',
+					'src/wp-admin/js/on-this-day.js': 'src/js/_enqueues/admin/on-this-day.js',
 					'src/wp-admin/js/password-strength-meter.js': 'src/js/_enqueues/wp/password-strength-meter.js',
 					'src/wp-admin/js/plugin-install.js': 'src/js/_enqueues/admin/plugin-install.js',
 					'src/wp-admin/js/post.js': 'src/js/_enqueues/admin/post.js',

src/js/_enqueues/admin/on-this-day.js

@@ -0,0 +1,133 @@
+/**
+ * @output wp-admin/js/on-this-day.js
+ */
+
+( function( $ ) {
+	function flashState( $button, message ) {
+		var original = $button.data( 'otdShareLabel' ) || $button.text();
+
+		$button.text( message ).addClass( 'is-copied' );
+
+		window.setTimeout( function() {
+			$button.text( original ).removeClass( 'is-copied' );
+		}, 2000 );
+	}
+
+	function legacyCopy( text ) {
+		var $textarea = $( '<textarea readonly></textarea>' )
+			.val( text )
+			.css( {
+				position: 'absolute',
+				left: '-9999px'
+			} )
+			.appendTo( 'body' );
+
+		$textarea[0].select();
+
+		try {
+			document.execCommand( 'copy' );
+		} catch ( error ) {}
+
+		$textarea.remove();
+	}
+
+	function copyShareUrl( $button, url ) {
+		var success = $button.data( 'otdShareCopied' ) || 'Link copied!';
+
+		function done() {
+			flashState( $button, success );
+		}
+
+		if ( navigator.clipboard && navigator.clipboard.writeText ) {
+			navigator.clipboard.writeText( url ).then(
+				done,
+				function() {
+					legacyCopy( url );
+					done();
+				}
+			);
+			return;
+		}
+
+		legacyCopy( url );
+		done();
+	}
+
+	$( '.on-this-day-post-share' ).on( 'click', function( event ) {
+		var $button = $( this ),
+			url = $button.data( 'otdShareUrl' ),
+			shareData = {
+				title: $button.data( 'otdShareTitle' ) || document.title,
+				url: url
+			};
+
+		event.preventDefault();
+
+		if ( ! url ) {
+			return;
+		}
+
+		if (
+			navigator.share &&
+			( ! navigator.canShare || navigator.canShare( shareData ) )
+		) {
+			navigator.share( shareData ).then(
+				function() {
+					flashState( $button, $button.data( 'otdShareShared' ) || 'Shared!' );
+				},
+				function( error ) {
+					if ( ! error || 'AbortError' !== error.name ) {
+						copyShareUrl( $button, url );
+					}
+				}
+			);
+			return;
+		}
+
+		copyShareUrl( $button, url );
+	} );
+
+	function setupCarousel() {
+		var $root = $( this ),
+			$slides = $root.find( '.on-this-day-post' ),
+			$counter = $root.find( '.on-this-day-carousel-current' ),
+			current = Math.max( 0, $slides.index( $slides.filter( '.is-active' ) ) );
+
+		if ( $slides.length < 2 ) {
+			return;
+		}
+
+		function show( target ) {
+			current = ( ( target % $slides.length ) + $slides.length ) % $slides.length;
+
+			$slides
+				.removeClass( 'is-active' )
+				.attr( 'aria-hidden', 'true' )
+				.eq( current )
+				.addClass( 'is-active' )
+				.attr( 'aria-hidden', 'false' );
+			$counter.text( current + 1 );
+		}
+
+		$root.find( '.on-this-day-carousel-prev' ).on( 'click', function() {
+			show( current - 1 );
+		} );
+		$root.find( '.on-this-day-carousel-next' ).on( 'click', function() {
+			show( current + 1 );
+		} );
+
+		$root.on( 'keydown', function( event ) {
+			if ( 'ArrowLeft' === event.key ) {
+				show( current - 1 );
+			}
+
+			if ( 'ArrowRight' === event.key ) {
+				show( current + 1 );
+			}
+		} );
+
+		show( current );
+	}
+
+	$( '.on-this-day-carousel' ).each( setupCarousel );
+}( jQuery ) );