https://www.apli.com/themes/custom/apli/js/forms.js?tmb479

1(function ($, Drupal, drupalSettings) {
2    'use strict';
3  
4    Drupal.behaviors.forms = {
5      attach: function (context) {
6        $('select').niceSelect();
7        $('body', context).once('forms-script').each(function () {
8            
9            
10            /*$( "body" ).on('focusin','form input', function(e) {
11                e.stopPropagation(); 
12                if(this.id.length) {
13                    var labelFor = $('label[for='+  this.id  +']');
14                    labelFor.addClass("active");
15                }
16            });
17
18            $( "body" ).on('focusout','form input', function(e) {
19                e.stopPropagation();               
20                if($(this).val().length <= 0) {
21                    var labelFor = $('label[for='+  this.id  +']');
22                    labelFor.removeClass("active");
23                }
24            });*/
25
26            $(document).ready(function () {
27                // Evento que detecta el focusin del input  
28                $("body").on('focusin', 'form input:not([type=radio], [type=checkbox]), form select', function () {
29              
30                  if ($(this).val().length <= 0 && this.id.length) { // Comprobar si existe el campo realmente (evitar errores wp cuando estás loginado)
31                    var labelFor = $('label[for=' + this.id + ']'); // Selector para econtrar el label del campo que hemos echo focus <label for="<id>">
32                    labelFor.addClass("active"); // Añadir clase (usaremos en CSS)
33                  }
34              
35                  // Evento que detecta el focusout del input
36                  $(this).focusout(function () {
37                    if ($(this).val().length <= 0 && this.id.length) {// Comprobar si existe el campo realmente (evitar errores wp cuando estás loginado)
38                      var labelFor = $('label[for=' + this.id + ']');// Selector para econtrar el label del campo que hemos echo focus <label for="<id>">
39                      labelFor.removeClass("active"); // Quitar clase clase
40                    }
41                  });
42              
43                });
44            
45            });
46
47            //Función para comprobar valores llenos y mover label
48            recorrerInputsDom();
49
50            $( document ).ajaxComplete(function() {
51                recorrerInputsDom();  
52            });
53
54
55            $(window).on("load",function(){
56                recorrerInputsDom();
57            });
58
59            function recorrerInputsDom() {
60                // Recorrer todos los inputs del DOM para comprovar si tienen valor y entonces mover el label
61                $('form input:not([type=radio], [type=checkbox])').each(function () {                  
62                    var val = $(this).val(); // Obtener valor del input obtenido
63                    if (val.length && this.id.length) { // Comprobar si el input tiene valor (ya está rellenado al entrar)
64                
65                        var labelFor = $('label[for=' + this.id + ']');// Selector para econtrar el label del campo que hemos echo focus <label for="<id>">
66                        labelFor.addClass("active"); // Añadir clase                        
67                    }
68                });
69            }
70            
71
72            /*function  onAutoFillStart(el) {
73                if(el.id.length) {
74                    var labelFor = $('label[for='+  el.id  +']');
75                    labelFor.addClass("active");  
76                }
77            }
78            function onAutoFillCancel(el) {
79                if(el.id.length) {
80                    var labelFor = $('label[for='+  el.id  +']');
81                    labelFor.addClass("active");  
82                }
83
84            }
85            const onAnimationStart = ({ target, animationName }) => {
86                switch (animationName) {
87                    case 'onAutoFillStart':
88                        return onAutoFillStart(target)
89                    case 'onAutoFillCancel':
90                        return onAutoFillCancel(target)
91                }
92            }
93            document.querySelector('input').addEventListener('animationstart', onAnimationStart, false)
94*/
95            $( 'form input[type="password"]' ).after('<span class="show-password"></span>');
96
97            $('body').on('click','.show-password', function (e) {
98                var x = $(this).prev('input');
99                if (x.attr("type") === "password") {
100                    $(this).addClass('active');
101                    x.attr("type","text");
102                } else {
103                    $(this).removeClass('active');
104                    x.attr("type","password");
105                }
106            });            
107        });
108  
109      }
110    };
111  })(jQuery, Drupal, drupalSettings);
112