Issue #17 : Change logic for toggling link text.

Ryan Kienstra · Ryan Kienstra · commit 35d5bca1f03a · 2016-09-03T16:29:53.000-03:00
Using Weston's snippet, output link title in PHP, with localization.
And attach localized text 'Restore settting' to the link's data-text-restore attribute.
On clicking the link, call method changeLinkText.
This toggles the title to the other value stored in the data attribute.
And stores the old title in the data attribute, for the next time it's clicked.
diff --git a/js/customize-snapshots-admin.js b/js/customize-snapshots-admin.js
@@ -2,18 +2,16 @@
 	'use strict';
 
 	$( function() {
-		var component, linkSelector, linkText, linkActions, dataSlug, inputName;
+		var component, $linkToRemoveOrRestore, linkActions, dataSlug, inputName;
 
 		component = {};
-		linkSelector = '.snapshot-toggle-setting-removal';
-		linkText = [ 'Remove setting', 'Restore setting' ];
+		$linkToRemoveOrRestore = $( '.snapshot-toggle-setting-removal' );
 		linkActions = [ 'remove', 'restore' ];
 		dataSlug = 'cs-action';
 		inputName = 'customize_snapshot_remove_settings[]';
 
 		component.initializeLink = function() {
-			$( linkSelector ).text( linkText[ 0 ] )
-				.data( dataSlug, linkActions[ 0 ] );
+			$linkToRemoveOrRestore.data( dataSlug, linkActions[ 0 ] );
 		};
 
 		component.initializeLink();
@@ -35,9 +33,9 @@
 			$settingDisplay = component.getSettingDisplay( $link );
 			settingId = component.getSettingId( $link );
 
-			$link.text( linkText[ 1 ] )
-				.data( dataSlug, linkActions[ 1 ] )
+			$link.data( dataSlug, linkActions[ 1 ] )
 				.after( component.constructHiddenInputWithValue( settingId ) );
+			component.changeLinkText( $link );
 			$settingDisplay.removeAttr( 'open' )
 				.addClass( 'snapshot-setting-removed' );
 		};
@@ -58,13 +56,22 @@
 			.val( settingId );
 		};
 
+		component.changeLinkText = function( $link ) {
+			var oldLinkText, newLinkText;
+			oldLinkText = $link.text();
+			newLinkText = $link.data( 'text-restore' );
+
+			$link.data( 'text-restore', oldLinkText )
+				.text( newLinkText );
+		};
+
 		component.showSettingAndChangeLinkText = function( $link ) {
 			var $settingDisplay, settingId;
 			$settingDisplay = component.getSettingDisplay( $link );
 			settingId = component.getSettingId( $link );
 
-			$link.text( linkText[ 0 ] )
-				.data( dataSlug, linkActions[ 0 ] );
+			$link.data( dataSlug, linkActions[ 0 ] );
+			component.changeLinkText( $link );
 			component.removeHiddenInputWithValue( settingId );
 			$settingDisplay.removeClass( 'snapshot-setting-removed' );
 		};
@@ -73,7 +80,7 @@
 			$( 'input[name="' + inputName + '"][value="' + settingId + '"]' ).remove();
 		};
 
-		$( linkSelector ).on( 'click', function( event ) {
+		$linkToRemoveOrRestore.on( 'click', function( event ) {
 			var $clickedLink = $( this );
 
 			event.preventDefault();
diff --git a/php/class-post-type.php b/php/class-post-type.php
@@ -362,7 +362,7 @@ public function render_data_metabox( $post ) {
 			echo '<li>';
 			echo '<details open>';
 			echo '<summary><code>' . esc_html( $setting_id ) . '</code> ';
-			echo '<a href="#" id="' . esc_attr( $setting_id ) . '" class="snapshot-toggle-setting-removal remove"></a>';
+			echo '<a href="#" id="' . esc_attr( $setting_id ) . '" data-text-restore="' . esc_attr( 'Restore setting', 'customize-snapshots' ) . '" class="snapshot-toggle-setting-removal remove">' . esc_html( 'Remove setting', 'customize-snapshots' ) . '</a>';
 
 			// Show error message when there was a publishing error.
 			if ( isset( $setting_params['publish_error'] ) ) {
