https://www.sgo.org/wp-content/themes/orbit-media-bootstrap4/resources/js/floating-labels.js

1/**
2 *  Actions to add floating label actions on forms.
3 */
4(function ($) {
5
6    var formWrapperClass   = 'floating-labels';
7    var fieldsWrapperClass = 'floating-label';
8    var fieldsClass        = 'floating-label-field';
9
10    var formWrapper        = '.' + formWrapperClass;
11    var fieldsWrapper      = '.' + fieldsWrapperClass;
12    var fields             = '.' + fieldsClass;
13
14    // NinjaForm AJAX load
15    $(document).on( 'nfFormReady', function( e, layoutView ) {
16
17        // Applies floating label classes on ninja forms
18        apply_fl_classes_forms();
19
20        // On load set focus class on pre set values only.
21        toogle_focus_class_onload();
22
23    });
24
25    // Document ready
26    $(document).ready(function () {
27        if ($(formWrapper).length > 0) {
28
29            // Applies floating label classes on ninja forms.
30            apply_fl_classes_forms();
31
32            // On load set focus class on pre set values only.
33            toogle_focus_class_onload();
34
35            // On change, to accommodate auto completion of input data.
36            $(formWrapper).on('change', fields, function () {
37                toggle_focus_class($(this));
38            });
39
40            // On focus of input field, set focus class on parent.
41            $(formWrapper).on('focus', fields, function () {
42                add_focus_class($(this));
43            });
44
45            // When input loses focus,
46            // remove focus class on parent if value is NOT set.
47            $(formWrapper).on('blur', fields, function () {
48                toggle_focus_class($(this));
49            });
50
51        }
52    });
53
54    function toogle_focus_class_onload() {
55        $(fields).each(function () {
56            toggle_focus_class($(this));
57        });
58    }
59
60    /**
61     * Logic to apply the "focus" class if value isn't empty.
62     *
63     * @param $this object The input.
64     */
65    function toggle_focus_class($this) {
66        if ($this.val() != '') {
67            add_focus_class($this);
68        } else {
69            remove_focus_class($this);
70        }
71    }
72
73    /**
74     * Adds focus class to the label/field wrapper.
75     *
76     * @param $this object The input.
77     */
78    function add_focus_class($this) {
79        $this.closest(fieldsWrapper).addClass('floating-label-focus');
80    }
81
82    /**
83     * Removes focus class to the label/field wrapper.
84     *
85     * @param $this object The input.
86     */
87    function remove_focus_class($this) {
88        $this.closest(fieldsWrapper).removeClass('floating-label-focus');
89    }
90
91    /**
92     * Applies classes to ninja and gravity forms.
93     */
94    function apply_fl_classes_forms() {
95        $(formWrapper).find('input[type="text"], input[type="email"], textarea').each(function() {
96
97            var $this = $(this);
98            var $wrapper = $this.closest('.gfield, .field-wrap');
99
100            if ($this.parents('.ginput_complex').length > 0) {
101                return;
102            }
103
104            $this.addClass(fieldsClass);
105            $wrapper.addClass(fieldsWrapperClass);
106
107            if ($this.is('textarea')) {
108                $wrapper.addClass('fl-textarea');
109            }
110
111            // adds label-static class on elements with a placeholder
112            if (typeof $this.attr('placeholder') != 'undefined' && $this.attr('placeholder')) {
113                $wrapper.addClass('label-static');
114            }
115
116        });
117    }
118
119})(jQuery);