https://www.raidamazones.com/scripts/gridforms-master/gridforms/gridforms.js

1//
2//  Grid Forms
3//  Copyright (c) 2013 Kumail Hunaid
4//
5//  Permission is hereby granted, free of charge, to any person obtaining a copy
6//  of this software and associated documentation files (the "Software"), to deal
7//  in the Software without restriction, including without limitation the rights
8//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9//  copies of the Software, and to permit persons to whom the Software is
10//  furnished to do so, subject to the following conditions:
11//
12//  The above copyright notice and this permission notice shall be included in
13//  all copies or substantial portions of the Software.
14//
15//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

20//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21//  THE SOFTWARE.
22//
23
24jQuery(function($) {
25    var GridForms = {
26        el: {
27            fieldsRows: $('[data-row-span]'),
28            fieldsContainers: $('[data-field-span]'),
29            focusableFields: $('input, textarea, select', '[data-field-span]'),
30            window: $(window)
31        },
32        init: function() {
33            this.focusField(this.el.focusableFields.filter(':focus'));
34            this.equalizeFieldHeights();
35            this.events();
36        },
37        focusField: function(currentField) {
38            currentField.closest('[data-field-span]').addClass('focus');
39        },
40        removeFieldFocus: function() {
41            this.el.fieldsContainers.removeClass('focus');
42        },
43        events: function() {
44            var that = this;
45            that.el.fieldsContainers.click(function(event) {
46                var focusableFields = that.el.focusableFields.selector;
47                
48                if (!$(event.target).is(focusableFields)) {
49                    $(this).find('input[type="text"],input[type="number"],input[type="tel"],input[type="email"], textarea, select').first().focus();
50                }
51            });
52            that.el.focusableFields.focus(function() {
53                that.focusField($(this));
54            });
55            that.el.focusableFields.blur(function() {
56                that.removeFieldFocus();
57            });
58            that.el.window.resize(function() {
59                that.equalizeFieldHeights();
60            });
61
62        },
63        equalizeFieldHeights: function() {
64            this.el.fieldsContainers.css("height", "auto");
65
66            var fieldsRows = this.el.fieldsRows;
67            var fieldsContainers = this.el.fieldsContainers;
68
69            // Make sure that the fields aren't stacked
70            if (!this.areFieldsStacked()) {
71                fieldsRows.filter(":visible").each(function() {
72                    var fieldRow = $(this);
73                    
74                    // Singleton textarea rows should determine their row height
75                    var rowInputs = fieldRow.children();
76                    if (rowInputs.length === 1 && rowInputs.children("textarea").length === 1) return;
77
78                    // Get the height of the row (thus the tallest element's height)
79                    var rowHeight = fieldRow.css('height');
80
81                    // Set the height for each field in the row...
82                    fieldRow.find(fieldsContainers).css('height', rowHeight);
83                });
84            }
85        },
86        areFieldsStacked: function() {
87            // Get the first row 
88            // which does not only contain one field 
89            var firstRow = this.el.fieldsRows
90                .not('[data-row-span="1"]')
91                .first();
92
93            // Get to the total width 
94            // of each field witin the row
95            var totalWidth = 0;
96            firstRow.children().each(function() {
97                totalWidth += $(this).width();
98            });
99
100            // Determine whether fields are stacked or not
101            return firstRow.width() <= totalWidth;
102        }
103    };
104    GridForms.init();
105    window.GridForms = GridForms;
106});