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 |
|
24 | $(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() {
|
46 | $(this).find('input[type="text"], textarea, select').focus();
|
47 | });
|
48 | that.el.focusableFields.focus(function() {
|
49 | that.focusField($(this));
|
50 | });
|
51 | that.el.focusableFields.blur(function() {
|
52 | that.removeFieldFocus();
|
53 | });
|
54 | that.el.window.resize(function() {
|
55 | that.equalizeFieldHeights();
|
56 | });
|
57 |
|
58 | },
|
59 | equalizeFieldHeights: function() {
|
60 | this.el.fieldsContainers.css("height", "auto");
|
61 |
|
62 | var fieldsRows = this.el.fieldsRows;
|
63 | var fieldsContainers = this.el.fieldsContainers;
|
64 |
|
65 | // Make sure that the fields aren't stacked
|
66 | if (!this.areFieldsStacked()) {
|
67 | fieldsRows.each(function() {
|
68 | // Get the height of the row (thus the tallest element's height)
|
69 | var fieldRow = $(this);
|
70 | var rowHeight = fieldRow.css('height');
|
71 |
|
72 | // Set the height for each field in the row...
|
73 | fieldRow.find(fieldsContainers).css('height', rowHeight);
|
74 | });
|
75 | }
|
76 | },
|
77 | areFieldsStacked: function() {
|
78 | // Get the first row
|
79 | // which does not only contain one field
|
80 | var firstRow = this.el.fieldsRows
|
81 | .not('[data-row-span="1"]')
|
82 | .first();
|
83 |
|
84 | // Get to the total width
|
85 | // of each field witin the row
|
86 | var totalWidth = 0;
|
87 | firstRow.children().each(function() {
|
88 | totalWidth += $(this).width();
|
89 | });
|
90 |
|
91 | // Determine whether fields are stacked or not
|
92 | return firstRow.width() <= totalWidth;
|
93 | }
|
94 | };
|
95 | GridForms.init();
|
96 | window.GridForms = GridForms;
|
97 | });
|