uikit.js
5.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
/*!
* FormValidation (http://formvalidation.io)
* The best jQuery plugin to validate form fields. Support Bootstrap, Foundation, Pure, SemanticUI, UIKit and custom frameworks
*
* @version v0.6.2-dev, built on 2015-03-13 8:15:45 AM
* @author https://twitter.com/nghuuphuoc
* @copyright (c) 2013 - 2015 Nguyen Huu Phuoc
* @license http://formvalidation.io/license/
*/
/**
* This class supports validating UIKit form (http://getuikit.com/)
*/
(function($) {
FormValidation.Framework.Uikit = function(element, options) {
options = $.extend(true, {
button: {
selector: '[type="submit"]',
// The class for disabled button
// http://getuikit.com/docs/button.html
disabled: 'disabled'
},
control: {
valid: 'uk-form-success',
invalid: 'uk-form-danger'
},
err: {
// http://getuikit.com/docs/text.html#text-styles
clazz: 'uk-text-danger',
parent: '^.*(uk-form-controls|uk-width-[\\d+]-[\\d+]).*$'
},
// UIKit doesn't support feedback icon
icon: {
valid: null,
invalid: null,
validating: null,
feedback: 'fv-control-feedback'
},
row: {
// http://getuikit.com/docs/form.html
selector: '.uk-form-row',
valid: 'fv-has-success',
invalid: 'fv-has-error',
feedback: 'fv-has-feedback'
}
}, options);
FormValidation.Base.apply(this, [element, options]);
};
FormValidation.Framework.Uikit.prototype = $.extend({}, FormValidation.Base.prototype, {
/**
* Specific framework might need to adjust the icon position
*
* @param {jQuery} $field The field element
* @param {jQuery} $icon The icon element
*/
_fixIcon: function($field, $icon) {
var ns = this._namespace,
type = $field.attr('type'),
field = $field.attr('data-' + ns + '-field'),
row = this.options.fields[field].row || this.options.row.selector,
$parent = $field.closest(row);
if ('checkbox' === type || 'radio' === type) {
var $fieldParent = $field.parent();
if ($fieldParent.is('label')) {
$icon.insertAfter($fieldParent);
}
}
if ($parent.find('label').length === 0) {
$icon.addClass('fv-icon-no-label');
}
},
/**
* Create a tooltip or popover
* It will be shown when focusing on the field
*
* @param {jQuery} $field The field element
* @param {String} message The message
* @param {String} type Can be 'tooltip' or 'popover'
*/
_createTooltip: function($field, message, type) {
var $icon = $field.data('fv.icon');
if ($icon) {
// Remove the tooltip if it's already exists
if ($icon.data('tooltip')) {
$icon.data('tooltip').off();
$icon.removeData('tooltip');
}
$icon
.attr('title', message)
.css({
'cursor': 'pointer'
});
new $.UIkit.tooltip($icon);
// UIKit auto set the 'tooltip' data for the element
// so I can retrieve the tooltip later via $icon.data('tooltip')
}
},
/**
* Destroy the tooltip or popover
*
* @param {jQuery} $field The field element
* @param {String} type Can be 'tooltip' or 'popover'
*/
_destroyTooltip: function($field, type) {
var $icon = $field.data('fv.icon');
if ($icon) {
var tooltip = $icon.data('tooltip');
if (tooltip) {
tooltip.hide();
tooltip.off();
$icon.off('focus mouseenter')
.removeData('tooltip');
}
$icon.css({
'cursor': ''
});
}
},
/**
* Hide a tooltip or popover
*
* @param {jQuery} $field The field element
* @param {String} type Can be 'tooltip' or 'popover'
*/
_hideTooltip: function($field, type) {
var $icon = $field.data('fv.icon');
if ($icon) {
var tooltip = $icon.data('tooltip');
if (tooltip) {
tooltip.hide();
}
$icon.css({
'cursor': ''
});
}
},
/**
* Show a tooltip or popover
*
* @param {jQuery} $field The field element
* @param {String} type Can be 'tooltip' or 'popover'
*/
_showTooltip: function($field, type) {
var $icon = $field.data('fv.icon');
if ($icon) {
$icon.css({
'cursor': 'pointer'
});
var tooltip = $icon.data('tooltip');
if (tooltip) {
tooltip.show();
}
}
}
});
}(jQuery));