|
|
@@ -1,264 +1,43 @@
|
|
|
-/*
|
|
|
- * Selects con datalist
|
|
|
- */
|
|
|
-var click_in_process = false;
|
|
|
-var visible = false;
|
|
|
-
|
|
|
-$('.datalist-text .datalist-input').on('focusin', function () {
|
|
|
- var elementRoot = $(this).parents('.datalist');
|
|
|
-
|
|
|
- elementRoot.find(".icono").show();
|
|
|
- elementRoot.find("ul").show();
|
|
|
- elementRoot.find(".datalist-input").trigger("keyup");
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-function ocultaList(e) {
|
|
|
- (e.data.padre).find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
|
|
- (e.data.padre).find('ul').hide();
|
|
|
- // $('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
|
|
- // $('.datalist ul').hide();
|
|
|
-}
|
|
|
-
|
|
|
-function ocultaTodos() {
|
|
|
- $('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
|
|
- $('.datalist ul').hide();
|
|
|
-}
|
|
|
-
|
|
|
-//$('.datalist-input').click(function(){
|
|
|
-$(document).on('click', '.datalist-input', function () {
|
|
|
- var elementRoot = $(this).parent();
|
|
|
- limpiaInput({ "data": { "padre": elementRoot } });
|
|
|
-
|
|
|
- const alreadyOpen = elementRoot.find('ul').is(':visible');
|
|
|
- if (alreadyOpen) {
|
|
|
- setTimeout(() => {
|
|
|
- ocultaTodos();
|
|
|
- }, 0);
|
|
|
- // stop all jquery animations
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- if (!elementRoot.hasClass("disabled")) {
|
|
|
- elementRoot.find('ul').show();
|
|
|
- elementRoot.find('.datalist-input').focus();
|
|
|
- elementRoot.find('ul').show();
|
|
|
- elementRoot.find('.icono').removeClass('ing-buscar').addClass('ing-cancelar iconoAzul pointer');
|
|
|
- elementRoot.find('.icono').on('click', { "padre": elementRoot }, limpiaInput);
|
|
|
- elementRoot.find('.icono').on('click', { "padre": elementRoot }, ocultaList);
|
|
|
- }
|
|
|
-
|
|
|
- // if other datalist is open, close it
|
|
|
- $('.datalist').each(function () {
|
|
|
- // get the input hidden from the datalist
|
|
|
- var inputHidden = $(this).find('input[type="hidden"]').attr('id');
|
|
|
- // get the input hidden from the datalist that was clicked
|
|
|
- var inputHiddenClicked = elementRoot.find('input[type="hidden"]').attr('id');
|
|
|
- if ($(this).find('ul').is(':visible') && inputHidden != inputHiddenClicked) {
|
|
|
- $(this).find('ul').hide();
|
|
|
- $(this).find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
-});
|
|
|
-
|
|
|
-//usar class="selected" para marcar seleccioando por default
|
|
|
$(function () {
|
|
|
- $.each($(".datalist").find('ul li:not(.not-selectable)'), function () {
|
|
|
- if ($(this).hasClass("selected")) {
|
|
|
- var elementRoot = $(this).parents('.datalist');
|
|
|
- elementRoot.find('.datalist-input').html($(this).html().replace(/[\t\n]+/g, ' ').trim());
|
|
|
- var cid = $(this).data('id');
|
|
|
- elementRoot.find("input[type=hidden]").val(cid);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // add not-selectable class to all li elements and the .datalist-input element
|
|
|
- $('.datalist-input ul li, .datalist-input').addClass('user-select-none');
|
|
|
-});
|
|
|
-
|
|
|
-$(document).on('click', '.datalist-select > ul li:not(.not-selectable)', function () {
|
|
|
- var elementRoot = $(this).parents('.datalist');
|
|
|
- elementRoot.find('.datalist-input').html($(this).html().replace(/[\t\n]+/g, ' ').trim());
|
|
|
- // $(this).parent('ul').siblings('input[type="text"]').blur();
|
|
|
- ocultaList({ "data": { "padre": elementRoot } });
|
|
|
- var cid = $(this).data('id');
|
|
|
- elementRoot.find("input[type=hidden]").val(cid);
|
|
|
- elementRoot.find("li").removeClass("selected");
|
|
|
- $(this).addClass("selected");
|
|
|
- elementRoot.removeClass("datalist-invalid");
|
|
|
-});
|
|
|
-
|
|
|
-$('.modal').on('hide.bs.modal', function (e) {
|
|
|
- $('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
|
|
- $('.datalist ul').hide();
|
|
|
-});
|
|
|
-
|
|
|
-function setDatalist(selector, value = -1) {
|
|
|
- var elementRoot = $(selector).parents('.datalist');
|
|
|
- $.each(elementRoot.find('ul li:not(.not-selectable)'), function () {
|
|
|
- if ($(this).data("id") == value) {
|
|
|
- elementRoot.find('.datalist-input').text($(this).html().replace(/[\t\n]+/g, ' ').trim());
|
|
|
- $(selector).val(value);
|
|
|
- elementRoot.find("li").removeClass("selected");
|
|
|
+ const toggleIcon = (el, fromClass, toClass) => $(el).removeClass(fromClass).addClass(toClass);
|
|
|
+
|
|
|
+ const ocultaTodos = () => {
|
|
|
+ toggleIcon('.datalist .icono', 'ing-cancelar iconoAzul pointer', 'ing-buscar');
|
|
|
+ $('.datalist ul').hide();
|
|
|
+ };
|
|
|
+
|
|
|
+ $(document)
|
|
|
+ .on('click', '.datalist-input,.icono', function () {
|
|
|
+ const parent = $(this).parent();
|
|
|
+ $(".datalist ul:visible").not(parent.find('ul')).siblings('.datalist-input').trigger('click');
|
|
|
+ if (parent.find('ul').is(':visible') || parent.hasClass("disabled")) return ocultaTodos();
|
|
|
+
|
|
|
+ parent.find('ul, .datalist-input').show();
|
|
|
+ toggleIcon(parent.find('.icono'), 'ing-buscar', 'ing-cancelar iconoAzul pointer');
|
|
|
+ })
|
|
|
+ .on('click', '.datalist-select > ul li:not(.not-selectable)', function () {
|
|
|
+ const parent = $(this).closest('.datalist');
|
|
|
+ parent.find('.datalist-input').text($(this).text().trim());
|
|
|
+ parent.find("input[type=hidden]").val($(this).data('id'));
|
|
|
+ $('.datalist li').removeClass("selected");
|
|
|
$(this).addClass("selected");
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-function setDatalistFirst(selector) {
|
|
|
- var index = 1;
|
|
|
- var elementRoot = $(selector).parents('.datalist');
|
|
|
- var num = elementRoot.find('ul li:not(.not-selectable)').length;
|
|
|
- if (index <= num) {
|
|
|
- while (elementRoot.find('ul li:nth-child(' + index + ')').hasClass("not-selectable") && index <= num) {
|
|
|
- index++;
|
|
|
- }
|
|
|
- var element = elementRoot.find('ul li:nth-child(' + index + ')');
|
|
|
- elementRoot.find('.datalist-input').text(element.html().replace(/[\t\n]+/g, ' ').trim());
|
|
|
- $(selector).val(element.data("id"));
|
|
|
- elementRoot.find("li").removeClass("selected");
|
|
|
- element.addClass("selected");
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function disableDatalist(selector, disabled = true) {
|
|
|
- var elementRoot = $(selector).parents('.datalist');
|
|
|
- if (disabled) {
|
|
|
- elementRoot.addClass("disabled");
|
|
|
- ocultaList({ "data": { "padre": elementRoot } });
|
|
|
- } else
|
|
|
- elementRoot.removeClass("disabled");
|
|
|
-}
|
|
|
-
|
|
|
-function invalidDatalist(selector, invalid = true) {
|
|
|
- var elementRoot = $(selector).parents('.datalist');
|
|
|
- if (invalid) {
|
|
|
- elementRoot.addClass("datalist-invalid");
|
|
|
- } else
|
|
|
- elementRoot.removeClass("datalist-invalid");
|
|
|
-}
|
|
|
-
|
|
|
-function buscaDatalist(selector, valor) {
|
|
|
- selector.find('ul li').each(function () {
|
|
|
- var elem = $(this);
|
|
|
- if ($(this).parent().is('li'))
|
|
|
- elem = $(this).parent();
|
|
|
- if (!$(this).html().toUpperCase().includes(valor.toUpperCase())) {
|
|
|
- $(elem).hide();
|
|
|
- selector.find('.datalist-input').val("");
|
|
|
- selector.find("input[type=hidden]").val("");
|
|
|
- } else
|
|
|
- $(elem).show();
|
|
|
- });
|
|
|
-}
|
|
|
-function getDatalistText(selector, valor) {
|
|
|
- var elementRoot = $(selector).parents('.datalist');
|
|
|
- var text = "";
|
|
|
- $.each(elementRoot.find('ul li:not(.not-selectable)'), function () {
|
|
|
- if ($(this).data("id") == valor) {
|
|
|
- text = $(this).html();
|
|
|
- }
|
|
|
- });
|
|
|
- return text;
|
|
|
-}
|
|
|
-//---
|
|
|
-$('.datalist-text .datalist-input').keyup(function () {
|
|
|
- var elementRoot = $(this).parents('.datalist');
|
|
|
- var input = $(this);
|
|
|
- elementRoot.find('ul li').each(function () {
|
|
|
- var elem = $(this);
|
|
|
- if ($(this).parent().is('li'))
|
|
|
- elem = $(this).parent();
|
|
|
- if (!$(this).html().toUpperCase().includes(input.val().toUpperCase()))
|
|
|
- $(elem).hide();
|
|
|
- else
|
|
|
- $(elem).show();
|
|
|
+ parent.removeClass("datalist-invalid");
|
|
|
+ ocultaTodos();
|
|
|
+ })
|
|
|
+ .on('click', (e) => {
|
|
|
+ if (!$(e.target).closest('.datalist').length) ocultaTodos();
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.modal').on('hide.bs.modal', ocultaTodos);
|
|
|
+});
|
|
|
+const setDatalist = (selector, value = -1) => {
|
|
|
+ const parent = $(selector).closest('.datalist');
|
|
|
+ parent.find('ul li:not(.not-selectable)').each(function () {
|
|
|
+ if ($(this).data("id") !== value) return;
|
|
|
+ parent.find('.datalist-input').text($(this).text().trim());
|
|
|
+ $(selector).val(value);
|
|
|
+ $('.datalist li').removeClass("selected");
|
|
|
+ $(this).addClass("selected");
|
|
|
});
|
|
|
-});
|
|
|
-
|
|
|
-/*
|
|
|
-$('.datalist-text input').blur(function() {
|
|
|
- var elementRoot = $(this).parents('.datalist');
|
|
|
- console.log("Click? "+click_in_process);
|
|
|
- if(!click_in_process) {
|
|
|
- buscaDatalist(elementRoot, elementRoot.find('.datalist-input').val());
|
|
|
-
|
|
|
- elementRoot.find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
|
|
- elementRoot.find('ul').children('li').show();
|
|
|
- elementRoot.find('ul').hide();
|
|
|
- }
|
|
|
- click_in_process = false;
|
|
|
-});
|
|
|
-*/
|
|
|
-
|
|
|
-$('.datalist-text > ul li:not(.not-selectable)').click(function () {
|
|
|
- console.log("Li click!" + $(this).html());
|
|
|
- var elementRoot = $(this).parents('.datalist');
|
|
|
- elementRoot.find('.datalist-input').val($(this).html().replace(/[\t\n]+/g, ' ').trim());
|
|
|
-
|
|
|
- //$(this).parent('ul').siblings('input[type="text"]').blur();
|
|
|
-
|
|
|
- var cid = $(this).data('id');
|
|
|
- elementRoot.find("input[type=hidden]").val(cid);
|
|
|
- elementRoot.find("li").removeClass("selected");
|
|
|
- $(this).addClass("selected");
|
|
|
- click_in_process = true;
|
|
|
- //elementRoot.find('.datalist-input').blur();
|
|
|
- ocultaList({ "data": { "padre": elementRoot } });
|
|
|
-});
|
|
|
-
|
|
|
-/* $('.datalist-text .datalist-input').click(function () {
|
|
|
- var elementRoot = $(this).parents('.datalist');
|
|
|
- limpiaInput({ "data": { "padre": elementRoot } });
|
|
|
- const alreadyOpen = elementRoot.find('ul').is(':visible');
|
|
|
- console.log("Click! " + alreadyOpen);
|
|
|
- elementRoot.find('ul').show();
|
|
|
- elementRoot.find('input').focus();
|
|
|
- elementRoot.find('ul').show();
|
|
|
- elementRoot.find('.icono').removeClass('ing-buscar').addClass('ing-cancelar iconoAzul pointer');
|
|
|
- elementRoot.find('.icono').on('click', { "padre": elementRoot }, limpiaInput);
|
|
|
-}); */
|
|
|
-
|
|
|
-$(document).on('click', function (e) {
|
|
|
- var target = $(e.target);
|
|
|
- // or if you click in the .datalist-input and the datalist is visible
|
|
|
- let isDatalist = target.parents().addBack().is('.datalist');
|
|
|
- // alert(isDatalist);
|
|
|
-
|
|
|
- if (!isDatalist)
|
|
|
- ocultaList({ "data": { "padre": $('.datalist') } });
|
|
|
- // if the data list is visible and you click in the input, hide the list
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
-function limpiaInput(e) {
|
|
|
- (e.data.padre).find('.datalist-input').val('');
|
|
|
- (e.data.padre).find('.datalist-input').parent().children('ul').children('li').show();
|
|
|
- (e.data.padre).find('li:first').focus();
|
|
|
- (e.data.padre).find('.datalist-input').focus();
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-// function make required
|
|
|
-function makeRequiredDatalist(selector, required = true) {
|
|
|
- var elementRoot = $(selector).parents('.datalist');
|
|
|
- if (required)
|
|
|
- elementRoot.addClass("required");
|
|
|
- else
|
|
|
- elementRoot.removeClass("required");
|
|
|
-}
|
|
|
-
|
|
|
-// function validate
|
|
|
-function validateDatalist(selector) {
|
|
|
- var elementRoot = $(selector).parents('.datalist');
|
|
|
- if (elementRoot.hasClass("required") && $(selector).val() == "") {
|
|
|
- invalidDatalist(selector, true);
|
|
|
- return false;
|
|
|
- }
|
|
|
- invalidDatalist(selector, false);
|
|
|
- return true;
|
|
|
}
|
|
|
+const makeRequiredDatalist = (selector, required = true) => $(selector).closest('.datalist').toggleClass("required", required);
|
