// // Grid Forms // Copyright © 2013 Kumail Hunaid // // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the “Software”), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. //
jQuery(function($) {
var GridForms = { el: { fieldsRows: $('[data-row-span]'), fieldsContainers: $('[data-field-span]'), focusableFields: $('input, textarea, select', '[data-field-span]'), window: $(window) }, init: function() { this.focusField(this.el.focusableFields.filter(':focus')); this.equalizeFieldHeights(); this.events(); }, focusField: function(currentField) { currentField.closest('[data-field-span]').addClass('focus'); }, removeFieldFocus: function() { this.el.fieldsContainers.removeClass('focus'); }, events: function() { var that = this; that.el.fieldsContainers.click(function(event) { var focusableFields = that.el.focusableFields; if (!$(event.target).is(focusableFields)) { $(this).find('input[type="text"],input[type="number"],input[type="tel"],input[type="email"], textarea, select').first().focus(); } }); that.el.focusableFields.focus(function() { that.focusField($(this)); }); that.el.focusableFields.blur(function() { that.removeFieldFocus(); }); that.el.window.resize(function() { that.equalizeFieldHeights(); }); }, equalizeFieldHeights: function() { this.el.fieldsContainers.css("height", "auto"); var fieldsRows = this.el.fieldsRows; var fieldsContainers = this.el.fieldsContainers; // Make sure that the fields aren't stacked and window width is more than 700px if (!this.areFieldsStacked() && $(window).width() > 700) { fieldsRows.filter(":visible").each(function() { var fieldRow = $(this); // Singleton textarea rows should determine their row height var rowInputs = fieldRow.children(); if (rowInputs.length === 1 && rowInputs.children("textarea").length === 1) return; // Get the height of the row (thus the tallest element's height) var rowHeight = fieldRow.css('height'); // Set the height for each field in the row... fieldRow.find(fieldsContainers).css('height', rowHeight); }); } }, areFieldsStacked: function() { // Get the first row // which does not only contain one field var firstRow = this.el.fieldsRows .not('[data-row-span="1"]') .first(); // Get to the total width // of each field witin the row var totalWidth = 0; firstRow.children().each(function() { totalWidth += $(this).width(); }); // Determine whether fields are stacked or not return firstRow.width() <= totalWidth; } }; GridForms.init(); window.GridForms = GridForms;
});