net.yadaframework.views.yada.js.yada.dialect.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of yadaweb Show documentation
Some useful tasks for the Yada Framework
The newest version!
// yada.dialect.js
// Yada Thymeleaf dialect support
// Depends on yada.ajax.js

(function( yada ) {
	"use strict";
	
	// Namespace trick explained here: http://stackoverflow.com/a/5947280/587641
	// For a public property or function, use "yada.xxx = ..."
	// For a private property use "const xxx = "
	// For a private function use "function xxx(..."
	
	/**
	 * Used by  to implement the suggestion list
	 * @param event the onkeyup KeyboardEvent
	 */		
	yada.suggestionList = function(event) {
		const input = event.target;
		const $input = $(input);
		const $dropdown = $input.closest(".dropdown");
		const inputValue = $.trim(input.value);
		const suggestionUrl = $input.attr("data-yadaSuggestionListUrl");
		const requestIdNameOverride = $input.attr("data-yadaSuggestionRequestIdNameOverride"); // Optional with precedence

		if ($dropdown.length==0) {
			console.error("Missing dropdown element around input tag - aborting suggestions");
			return;
		}
		
		// Arrow up/down moves to the suggestion list
		const key = event.key;
		if (key=="ArrowDown" || key=="ArrowUp") {
			// Move the focus to the suggestion list if any
			const $suggestionList = $(input).closest(".dropdown").find(".jsYadaSuggestionList:visible");
			const tot = $("a", $suggestionList).length;
			if (tot>0) {
				var toFocus = (key=="ArrowDown")? 0 : (tot-1);
				$("a", $suggestionList).get(toFocus).focus();
			}
			return;
		}
		
		if (yada.isAjaxTriggerKey(event)) {
			// Ajax call triggered, so no suggestion list must be returned
			// event.preventDefault(); WRONG because form submission prevention is handled in yada.enableAjaxInputs
			return;
		}
		
		// Otherwise, show the suggestion list
		const data = {
			prefix: inputValue
		} 
		
		yada.dequeueFunctionCall(input, function() {
			yada.ajax(suggestionUrl, data, function(responseText, responseHtml){
				const $newSuggestionList = responseHtml.find(".jsYadaSuggestionList");
				$dropdown.find(".jsYadaSuggestionList").replaceWith($newSuggestionList); 
				$("a", $newSuggestionList).click(function() {
					// Insert into the input field the suggested text when clicked
					const clickedValue = $(this).text();
					$input.val(clickedValue);
					// Also set the suggestionId and suggestionIdName attributes on the input for use on submission
					// See /YadaWeb/src/main/resources/net/yadaframework/views/yada/formfields/inputSuggestionFragment.html
					const yadaRequestData = input.yadaRequestData || {};
					const suggestionIdValue = $(this).attr("data-id");
					if (suggestionIdValue) {
						const suggestionIdname = requestIdNameOverride || $(this).attr("data-idname") || "id";
						yadaRequestData[suggestionIdname] = suggestionIdValue;
						input.yadaRequestData = yadaRequestData;
					}
					// Trigger a keyup event so that any char counter is changed and any ajax call is made
					var e = jQuery.Event("keyup");
					e.key = "Enter"
					$input.trigger(e); 
				});
				// Show or hide the suggestions if there are some or none
				const $toggler = $dropdown.find("div[data-bs-toggle=dropdown]");
				const dropdownApi = new bootstrap.Dropdown($toggler[0]);
				if ($("a", $newSuggestionList).length>0) {
					dropdownApi.show();
				} else {
					dropdownApi.hide();
				}
			}, null, null, true);
		}); // dequeueFunctionCall
	}

	yada.updateInputCounter = function($inputTag, $counterDiv) {
		const maxlength = $inputTag.attr("maxlength");
		var currentLength = $inputTag.val().length;
		if (maxlength==null) {
			console.error("Missing maxlength attribute on input tag with data-yadaTagId=" + $inputTag.attr("data-yadaTagId"));
			return;
		}
		$("span:first-child", $counterDiv).text(currentLength);
		$("span:last-child", $counterDiv).text(maxlength);
		$inputTag.on("input", function() {
			currentLength = this.value.length;
			$("span:first-child", $counterDiv).text(currentLength);
		});
	}

	yada.initYadaDialect = function() {
		// Change the numeric field using plus/minus buttons
		function changeNumericField($inputTag, valueToAdd) {
			const min = Number($inputTag.attr("min")||Number.MIN_SAFE_INTEGER);
			const max = Number($inputTag.attr("max")||Number.MAX_SAFE_INTEGER);
			var mousePressed = true;
			$(this).on("mouseup mouseleave mousedrag", function() {
				$(this).off("mouseup mouseleave mousedrag");
				mousePressed=false;
				const e = jQuery.Event("keyup");
				e.key = "Enter"
				$inputTag.trigger(e); 
			});
			function changeValue() {
				var value = Number($inputTag.val());
				if (valueToAdd>0 && value>max-valueToAdd) {
					return;
				}
				if (valueToAdd<0 && valuemax) {
					$inputTag.val(max);
					// Don't do this because we don't swallow the event: $inputTag.trigger('input');
				}
			}
		});
		
	}	
	
}( window.yada = window.yada || {} ));