Improve front-end (i.e., Quicklink) JavaScript. #168

resources/js/frontend.js

@@ -0,0 +1,5 @@
+(function() {
+	'use strict';
+
+	window.MultilingualPress = window.MultilingualPress || {};
+})();

resources/js/frontend/quicklink.js

@@ -1,21 +1,27 @@
-;( function( $ ) {
-	"use strict";
+/* global MultilingualPress */
+(function() {
+	'use strict';
 
-	var mlp_quicklink = {
-		init: function() {
-			$( '#mlp_quicklink_container' ).on( 'submit', function() {
-				var $this = $( this );
-
-				$this.attr( 'method', 'get' );
-				document.location.href = $this.find( 'option:selected' ).val();
-
-				return false;
-			} );
+	var Quicklink = {
+		initialize: function() {
+			var form = document.getElementById( 'mlp-quicklink-form' );
+			if ( form ) {
+				form.onsubmit = Quicklink.submitForm;
+			}
+		},
+		submitForm: function( event ) {
+			var select = document.getElementById( 'mlp-quicklink-select' );
+			if ( select ) {
+				event.preventDefault();
+				document.location.href = Quicklink.getSelectValue( select );
+			}
+		},
+		getSelectValue: function( select ) {
+			return select.options[ select.selectedIndex ].value;
 		}
 	};
 
-	$( function() {
-		mlp_quicklink.init();
-	} );
+	Quicklink.initialize();
 
-} )( jQuery );
+	MultilingualPress.Quicklink = Quicklink;
+})();

src/assets/js/frontend.js

@@ -1,21 +1,33 @@
-;( function( $ ) {
-	"use strict";
+(function() {
+	'use strict';
 
-	var mlp_quicklink = {
-		init: function() {
-			$( '#mlp_quicklink_container' ).on( 'submit', function() {
-				var $this = $( this );
+	window.MultilingualPress = window.MultilingualPress || {};
+})();
 
-				$this.attr( 'method', 'get' );
-				document.location.href = $this.find( 'option:selected' ).val();
+/* global MultilingualPress */
+(function() {
+	'use strict';
 
-				return false;
-			} );
+	var Quicklink = {
+		initialize: function() {
+			var form = document.getElementById( 'mlp-quicklink-form' );
+			if ( form ) {
+				form.onsubmit = Quicklink.submitForm;
+			}
+		},
+		submitForm: function( event ) {
+			var select = document.getElementById( 'mlp-quicklink-select' );
+			if ( select ) {
+				event.preventDefault();
+				document.location.href = Quicklink.getSelectValue( select );
+			}
+		},
+		getSelectValue: function( select ) {
+			return select.options[ select.selectedIndex ].value;
 		}
 	};
 
-	$( function() {
-		mlp_quicklink.init();
-	} );
+	Quicklink.initialize();
 
-} )( jQuery );
+	MultilingualPress.Quicklink = Quicklink;
+})();

src/inc/Multilingual_Press.php

@@ -187,7 +187,7 @@ public function load_assets() {
 
 		$assets->add( 'mlp_admin_css', 'admin.css' );
 
-		$assets->add( 'mlp_frontend_js', 'frontend.js', array( 'jquery' ) );
+		$assets->add( 'mlp-frontend', 'frontend.js' );
 
 		$assets->add( 'mlp_frontend_css', 'frontend.css' );
 

src/inc/quicklink/Mlp_Quicklink.php

@@ -310,64 +310,70 @@ protected function to_html( array $translated, $position ) {
 	}
 
 	/**
-	 * Put list of translated posts into the fitting HTML container
+	 * Returns the remote post links in form of up to three link elements, or a select element for more than three
+	 * links.
 	 *
-	 * @since  1.0.4
 	 * @param  string $selections 'option' or 'a' elements.
-	 * @param  string $type 'links' or 'form'.
-	 * @param  array $translated Original array of translated posts, passed to the filter.
-	 * @param  string $position
+	 * @param  string $type       'links' or 'form'.
+	 * @param  array  $translated Original array of translated posts, passed to the filter.
+	 * @param  string $position   Quicklink position.
+	 *
 	 * @return string
 	 */
 	protected function get_html_container( $selections, $type, $translated, $position ) {
 
 		$class_inner = 'mlp_inner';
-		$label_text  = esc_html( _x( 'Read in:', 'Quicklink label', 'multilingualpress' ) );
-
-		if ( 'links' === $type ) {
 
-			$html = "<div class='$position mlp_quicklinks mlp_quicklinks_links'>
-				<div class='$class_inner'>
-					$label_text<br />
-					$selections
-				</div>
-			</div>";
+		$label_text = esc_html_x( 'Read in:', 'Quicklink label', 'multilingualpress' );
 
+		if ( 'links' === $type ) {
+			$html = <<<HTML
+<div class="$position mlp_quicklinks mlp_quicklinks_links">
+	<div class="$class_inner">
+		$label_text<br>
+		$selections
+	</div>
+</div>
+HTML;
 		} else {
+			$home_url = home_url();
+			$home_url = esc_attr( $home_url );
 
-			$action      = esc_attr( home_url() );
+			$select_id   = 'mlp-quicklink-select';
 			$select_name = 'mlp_quicklink_select';
-			$go_text     = esc_attr_x( 'Go', 'quicklink submit button', 'multilingualpress' );
-			$go_button   = '<input type="submit" value="' . $go_text . '">';
-			$html = "<form method='post' class='$position mlp_quicklinks mlp_quicklinks_form' action='$action'>
-				<div class='$class_inner'>
-					<label for='{$select_name}_id'>$label_text<br />
-					<select name='$select_name' id='{$select_name}_id' autocomplete='off'>
-						$selections
-					</select>
-					$go_button
-					</label>
-				</div>
-			</form>";
-
-			add_action(
-				'wp_print_footer_scripts',
-				array ( $this, 'print_form_script' )
-			);
+
+			$submit_text = esc_attr_x( 'Go', 'quicklink submit button', 'multilingualpress' );
+
+			$html = <<<HTML
+<form action="$home_url" method="post" class="$position mlp_quicklinks mlp_quicklinks_form" id="mlp-quicklink-form">
+	<div class="$class_inner">
+		<label for="$select_id">
+			$label_text<br>
+			<select name="$select_name" id="$select_id" autocomplete="off">
+				$selections
+			</select>
+			<input type="submit" value="$submit_text">
+		</label>
+	</div>
+</form>
+HTML;
+
+			wp_enqueue_script( 'mlp-frontend' );
 		}
 
-		// position at the bottom
-		if ( 'b' === $position[0] )
-			$html .= '<br class="clear" />';
+		// Positioned at the bottom.
+		if ( 'b' === $position[0] ) {
+			$html .= '<br class="clear">';
+		}
 
 		/**
-		 * Filter the quicklinks HTML.
+		 * Filters the quicklink HTML.
 		 *
 		 * @param string $html       HTML output.
-		 * @param string $type       Quicklinks type, 'links' or 'form'.
+		 * @param string $type       Quicklink type, 'links' or 'form'.
 		 * @param array  $translated Array of translated posts.
 		 * @param string $selections Selections, 'option' or 'a' elements.
-		 * @param string $position   Quicklinks position.
+		 * @param string $position   Quicklink position.
 		 *
 		 * @return string
 		 */
@@ -381,23 +387,6 @@ protected function get_html_container( $selections, $type, $translated, $positio
 		);
 	}
 
-	/**
-	 * Enhance form submission to avoid extra WP processing.
-	 *
-	 * @since	1.0.4
-	 */
-	public function print_form_script() {
-		?>
-<script>
-document.getElementById("mlp_quicklink_container").onsubmit = function() {
-	this.method = 'get';
-	var MLPselect = document.getElementById( "mlp_quicklink_select_id" );
-	document.location.href = MLPselect.options[MLPselect.selectedIndex].value;
-	return false;
-};</script>
-		<?php
-	}
-
 	/**
 	 * This is the callback of the metabox used to display
 	 * the modules options page form fields