rewrite login redirect setting's UI using select2 multiselect

If you're interested, you can see multiselect selection order issue here: select2/select2#3106 We don't use the solution there, since I couldn't find perfect solution there. So we built our solution to match our need.
mapsteps · Aug 3, 2021 · 781dc30 · 781dc30
1 parent dd0d164
commit 781dc30
Show file tree

Hide file tree

Showing 8 changed files with 500 additions and 98 deletions.
diff --git a/assets/js/settings.js b/assets/js/settings.js
@@ -1,9 +1,36 @@
+/**
+ * This module is intended to handle the settings page.
+ *
+ * @param {Object} $ jQuery object.
+ * @return {Object}
+ */
 (function ($) {
 
-	var customCSSFields = document.querySelectorAll('.udb-custom-css');
-	var colorFields = document.querySelectorAll('.udb-color-field');
+	// Run the module.
+	init();
+
+	/**
+	 * Initialize the module, call the main functions.
+	 *
+	 * This function is the only function that should be called on top level scope.
+	 * Other functions are called / hooked from this function.
+	 */
+	function init() {
+
+		setupCssFields();
+		setupColorFields();
+		setupTabsNavigation();
+
+	}
+
+	/**
+	 * Setup the CSS fields using CodeMirror.
+	 */
+	function setupCssFields() {
+
+		var customCSSFields = document.querySelectorAll('.udb-custom-css');
+		if (!customCSSFields.length) return;
 
-	if (customCSSFields.length) {
 		var editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
 
 		editorSettings.codemirror = _.extend(
@@ -19,9 +46,17 @@
 		[].slice.call(customCSSFields).forEach(function (el) {
 			wp.codeEditor.initialize(el, editorSettings);
 		});
+
 	}
 
-	if (colorFields.length) {
+	/**
+	 * Setup color picker fields.
+	 */
+	function setupColorFields() {
+
+		var colorFields = document.querySelectorAll('.udb-color-field');
+		if (!colorFields.length) return;
+
 		[].slice.call(colorFields).forEach(function (el) {
 			var opts = {
 				defaultColor: el.dataset.default,
@@ -33,53 +68,69 @@
 
 			$(el).wpColorPicker(opts);
 		});
+
 	}
 
-	var refererField = document.querySelector('[name="_wp_http_referer"]');
+	/**
+	 * Setup the tabs navigation for settings page.
+	 */
+	function setupTabsNavigation() {
+
+		$('.heatbox-tab-nav-item').on('click', function () {
+			$('.heatbox-tab-nav-item').removeClass('active');
+			$(this).addClass('active');
 
-	function setRefererValue(hash) {
-		if (!refererField) return;
-		var url;
+			var link = this.querySelector('a');
+			var hashValue = link.href.substring(link.href.indexOf('#') + 1);
 
-		if (refererField.value.includes('#')) {
-			url = refererField.value.split('#');
-			url = url[0];
+			setRefererValue(hashValue);
 
-			refererField.value = url + '#' + hash;
-		} else {
-			refererField.value = refererField.value + '#' + hash;
-		}
-	}
+			$('.udb-settings-form .heatbox-admin-panel').css('display', 'none');
+			$('.udb-settings-form .udb-' + hashValue + '-panel').css('display', 'block');
+		});
+
+		window.addEventListener('load', function () {
+			var hashValue = window.location.hash.substr(1);
+
+			if (!hashValue) {
+				hashValue = 'widgets';
+			}
 
-	$('.heatbox-tab-nav-item').on('click', function () {
-		$('.heatbox-tab-nav-item').removeClass('active');
-		$(this).addClass('active');
+			setRefererValue(hashValue);
 
-		var link = this.querySelector('a');
-		var hashValue = link.href.substring(link.href.indexOf('#') + 1);
+			$('.heatbox-tab-nav-item').removeClass('active');
+			$('.heatbox-tab-nav-item.' + hashValue + '-panel').addClass('active');
 
-		setRefererValue(hashValue);
+			$('.udb-settings-form .heatbox-admin-panel').css('display', 'none');
+			$('.udb-settings-form .udb-' + hashValue + '-panel').css('display', 'block');
+		});
 
-		$('.udb-settings-form .heatbox-admin-panel').css('display', 'none');
-		$('.udb-settings-form .udb-' + hashValue + '-panel').css('display', 'block');
-	});
+	}
 
-	window.addEventListener('load', function () {
 
-		var hashValue = window.location.hash.substr(1);
+	/**
+	 * Set referer value for the tabs navigation of settings page.
+	 * This is being used to preserve the active tab after saving the settings page.
+	 * 
+	 * @param {string} hashValue The hash value.
+	 */
+	function setRefererValue(hashValue) {
 
-		if (!hashValue) {
-			hashValue = 'widgets';
-		}
+		var refererField = document.querySelector('[name="_wp_http_referer"]');
+		if (!refererField) return;
+		var url;
 
-		setRefererValue(hashValue);
+		if (refererField.value.includes('#')) {
+			url = refererField.value.split('#');
+			url = url[0];
 
-		$('.heatbox-tab-nav-item').removeClass('active');
-		$('.heatbox-tab-nav-item.' + hashValue + '-panel').addClass('active');
+			refererField.value = url + '#' + hashValue;
+		} else {
+			refererField.value = refererField.value + '#' + hashValue;
+		}
 
-		$('.udb-settings-form .heatbox-admin-panel').css('display', 'none');
-		$('.udb-settings-form .udb-' + hashValue + '-panel').css('display', 'block');
+	}
 
-	});
+	return {};
 
 })(jQuery);
diff --git a/modules/login-url/assets/css/login-redirect.css b/modules/login-url/assets/css/login-redirect.css
@@ -0,0 +1,76 @@
+/* Select2 patch */
+.udb-login-redirect--field-wrapper {
+	max-width: 700px;
+}
+
+.udb-login-redirect--field-wrapper .select2-search--inline {
+	position: relative;
+	display: inline-block;
+	height: 30px;
+}
+
+.select2-container--default .select2-selection--multiple {
+	padding-bottom: 0;
+	padding-right: 0;
+}
+
+.select2-selection--multiple .select2-selection__choice__remove {
+	line-height: 1.2;
+}
+
+/* Repeater */
+.udb-login-redirect--repeater {
+	margin-top: 20px;
+}
+
+.udb-login-redirect--repeater-item {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	padding-top: 12px;
+	padding-bottom: 12px;
+	width: 100%;
+	max-width: 700px;
+	border-bottom: 1px solid #dedede;
+}
+
+.udb-login-redirect--repeater .udb-login-redirect--repeater-item:last-child {
+	border-bottom-width: 0;
+}
+
+.udb-login-redirect--field-label {
+	width: 22%;
+}
+
+.udb-login-redirect--field-control {
+	position: relative;
+	width: 78%;
+}
+
+.udb-login-redirect--field-control input {
+	width: 100%;
+}
+
+.udb-login-redirect--remove-field {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 50%;
+	right: -35px;
+	padding: 0;
+	width: 25px;
+	height: 25px;
+	background-color: #eee;
+	border-radius: 50%;
+	border-width: 0;
+	transform: translateY(-50%);
+	opacity: 0.7;
+	cursor: pointer;
+}
+
+.udb-login-redirect--remove-field:hover {
+	color: #fff;
+	background-color: red;
+	opacity: 1;
+}