Add mastodon sharer with instance popup

assets/js/frontend.js

@@ -33,7 +33,7 @@ jQuery( function () {
 
 	jQuery( '.show-search' ).on( 'click', function () {
 		jQuery( '.topmenu .search input' ).toggleClass( 'active' );
-		jQuery( '.topmenu .search input' ).focus();
+		jQuery( '.topmenu .search input' ).trigger( 'focus' );
 	} );
 
 	jQuery( '.show-contrast' ).on( 'click', function () {
@@ -220,4 +220,5 @@ jQuery( function () {
 		}
 	} );
 } );
+
 /* eslint-enable no-undef */

assets/js/mastodon.js

@@ -0,0 +1,140 @@
+/* eslint-disable no-undef */
+'use strict';
+
+// based on https://github.com/Aly-ve/Mastodon-share-button
+
+const COOKIE_NAME = 'mastodon-instance-address';
+const URL_REGEX = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/;
+
+const msbConfig = {
+	openModal() {
+		jQuery( '#mastodonShareModal' ).modal( 'show' );
+	},
+	closeModal() {
+		jQuery( '#mastodonShareModal' ).modal( 'hide' );
+	},
+	addressFieldSelector: '#msb-address',
+	buttonModalSelector: '#msb-share',
+	memorizeFieldId: 'msb-memorize-instance',
+};
+
+/* Mastodon Share Modal */
+jQuery( '#mastodonShareModal' ).on( 'shown.bs.modal', function () {
+	jQuery( '#msb-address' ).trigger( 'focus' );
+} );
+
+function msbShareButtonAction( name, target ) {
+	let msbInstanceAddress = '';
+
+	msbInstanceAddress = msbGetCookie( 'mastodon-instance-address' );
+	if ( msbInstanceAddress.length > 0 ) {
+		window.open(
+			`${ msbInstanceAddress }/share?text=${ name }%20${ target }`,
+			`__blank`
+		);
+	} else if (
+		msbConfig &&
+		msbConfig.openModal &&
+		msbConfig.addressFieldSelector
+	) {
+		if ( document.querySelector( msbConfig.buttonModalSelector ) ) {
+			const bms = document.querySelector( msbConfig.buttonModalSelector );
+			bms.data = { target, name };
+			bms.addEventListener( 'click', () => msbOnShare(), false );
+		}
+		msbConfig.openModal( name, target );
+	}
+}
+
+function msbOnShare( _name, _target ) {
+	if (
+		msbConfig &&
+		msbConfig.addressFieldSelector &&
+		msbConfig.buttonModalSelector
+	) {
+		const name = !! _name
+			? _name
+			: document.querySelector( msbConfig.buttonModalSelector ).data.name;
+		const target = !! _target
+			? _target
+			: document.querySelector( msbConfig.buttonModalSelector ).data
+					.target;
+		let msbInstanceAddress = document.querySelector(
+			`${ msbConfig.addressFieldSelector }`
+		).value;
+
+		if ( ! msbInstanceAddress.startsWith( 'http' ) ) {
+			msbInstanceAddress = 'https://' + msbInstanceAddress;
+		}
+		if ( msbInstanceAddress.match( URL_REGEX ) ) {
+			if ( msbConfig.memorizeFieldId ) {
+				const msbMemorizeIsChecked = document.querySelector(
+					`#${ msbConfig.memorizeFieldId }`
+				).checked;
+				if (
+					msbConfig.memorizeFieldId &&
+					! msbGetCookie( COOKIE_NAME ).length > 0 &&
+					msbMemorizeIsChecked
+				) {
+					msbSetCookie( COOKIE_NAME, msbInstanceAddress, 7 );
+				}
+			}
+
+			window.open(
+				`${ msbInstanceAddress }/share?text=${ name }%20${ target }`,
+				`__blank`
+			);
+			if ( msbConfig && msbConfig.openModal && msbConfig.closeModal ) {
+				msbConfig.closeModal();
+			}
+		}
+	}
+}
+
+function msbGetCookie( cname ) {
+	const name = cname + '=';
+	const ca = document.cookie.split( ';' );
+	for ( let i = 0; i < ca.length; i++ ) {
+		let c = ca[ i ];
+		while ( c.charAt( 0 ) === ' ' ) {
+			c = c.substring( 1 );
+		}
+		if ( c.indexOf( name ) === 0 ) {
+			return c.substring( name.length, c.length );
+		}
+	}
+	return '';
+}
+
+function msbSetCookie( name, value, days ) {
+	const d = new Date();
+	d.setTime( d.getTime() + days * 86400000 );
+	const expires = 'expires=' + d.toUTCString();
+	document.cookie = `${ name }=${ value }; ${ expires }; path=/`;
+}
+
+( function () {
+	const msbButtons = document.querySelectorAll( '.mastodon-share-button' );
+
+	for ( let i = 0; i < msbButtons.length; i++ ) {
+		( function ( j ) {
+			const msbTarget = msbButtons[ j ].dataset.target;
+			let msbName = msbButtons[ j ].dataset.name;
+
+			// Replace hashtab by html code
+			msbName = msbName.replace( /#/g, '%23' );
+
+			/**
+			 * Set the listener in each button
+			 */
+			msbButtons[ j ].addEventListener(
+				'click',
+				() => {
+					msbShareButtonAction( msbName, msbTarget );
+				},
+				true
+			);
+		} )( i );
+	}
+} )();
+/* eslint-enable no-undef */

functions/options/class-sunflowersocialmediasettingspage.php

@@ -127,6 +127,15 @@ public function sunflower_social_media_page_init(): void {
 			array( 'sunflower_sharer_whatsapp', __( 'WhatsApp', 'sunflower' ) )
 		);
 
+		add_settings_field(
+			'sunflower_sharer_mastodon',
+			__( 'Mastodon', 'sunflower' ),
+			$this->sunflower_checkbox_callback( ... ),
+			'sunflower-setting-social-media-options',
+			'sunflower_social_media_sharers',
+			array( 'sunflower_sharer_mastodon', __( 'Mastodon', 'sunflower' ) )
+		);
+
 		add_settings_field(
 			'sunflower_sharer_mail',
 			__( 'mail', 'sunflower' ),

functions/s.php

@@ -136,17 +136,9 @@ function sunflower_scripts() {
 		wp_enqueue_script( 'comment-reply' );
 	}
 
-	wp_enqueue_script(
-		'popper',
-		get_template_directory_uri() . '/assets/vndr/@popperjs/core/dist/umd/popper.min.js',
-		array(),
-		SUNFLOWER_VERSION,
-		true
-	);
-
 	wp_enqueue_script(
 		'bootstrap',
-		get_template_directory_uri() . '/assets/vndr/bootstrap/dist/js/bootstrap.min.js',
+		get_template_directory_uri() . '/assets/vndr/bootstrap/dist/js/bootstrap.bundle.min.js',
 		array( 'jquery' ),
 		SUNFLOWER_VERSION,
 		true
@@ -201,6 +193,15 @@ function sunflower_scripts() {
 	wp_enqueue_style( 'lightbox', get_template_directory_uri() . '/assets/vndr/lightbox2/dist/css/lightbox.min.css', array(), '4.3.0' );
 	wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/assets/vndr/lightbox2/dist/js/lightbox.min.js', array( 'jquery' ), '3.3.0', true );
 	wp_enqueue_script( 'masonry', get_template_directory_uri() . '/assets/vndr/masonry-layout/dist/masonry.pkgd.min.js', array( 'masorny' ), '4.2.2', true );
+	if ( sunflower_get_setting( 'sunflower_sharer_mastodon' ) ) {
+		wp_enqueue_script(
+			'mastodon',
+			get_template_directory_uri() . '/assets/js/mastodon.js',
+			null,
+			SUNFLOWER_VERSION,
+			true
+		);
+	}
 }
 
 add_action( 'wp_enqueue_scripts', 'sunflower_scripts' );

inc/template-tags.php

@@ -129,6 +129,23 @@ function sunflower_the_social_media_sharers() {
 		);
 	}
 
+	if ( sunflower_get_setting( 'sunflower_sharer_mastodon' ) ) {
+		$sharer[] = sprintf(
+			'<div
+              class="mastodon-share-button sharer"
+              data-target="%1$s"
+              data-name="%2$s"
+              data-buttonstyle="fab fa-mastodon"
+              data-text="%3$s"
+			  title="%3$s"
+              >%4$s</div>',
+			get_permalink(),
+			rawurlencode( (string) get_the_title() ),
+			__( 'Share on Mastodon ', 'sunflower' ),
+			'<i class="fab fa-mastodon"></i>',
+		);
+	}
+
 	if ( sunflower_get_setting( 'sunflower_sharer_mail' ) ) {
 		$sharer[] = sprintf(
 			'<a href="MAILTO:?subject=%s&body=%s" target="_blank" title="%s" class="sharer"><i class="fas fa-envelope"></i></a>',