semantic.js
5.56 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
/*!
* 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 SemanticUI form (http://semantic-ui.com/)
*/
(function($) {
FormValidation.Framework.Semantic = function(element, options) {
options = $.extend(true, {
button: {
selector: '[type="submit"]',
// CSS class of disabled button
// http://semantic-ui.com/elements/button.html#disabled
disabled: 'disabled'
},
control: {
valid: '',
invalid: ''
},
err: {
// http://semantic-ui.com/elements/label.html#pointing
clazz: 'ui red pointing label transition',
parent: '^.*(field|column).*$'
},
// When using feedback icon, the input must place inside 'ui input icon' element
// <div class="ui input icon">
// <input type="text" />
// </div>
// See http://semantic-ui.com/elements/input.html#icon
icon: {
// http://semantic-ui.com/elements/icon.html
valid: null, // 'checkmark icon'
invalid: null, // 'remove icon'
validating: null, // 'refresh icon'
feedback: 'fv-control-feedback'
},
row: {
// http://semantic-ui.com/collections/form.html
selector: '.field',
valid: 'fv-has-success',
invalid: 'error',
feedback: 'fv-has-feedback'
}
}, options);
FormValidation.Base.apply(this, [element, options]);
};
FormValidation.Framework.Semantic.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 type = $field.attr('type');
if ('checkbox' === type || 'radio' === type) {
var $fieldParent = $field.parent();
if ($fieldParent.hasClass(type)) {
$icon.insertAfter($fieldParent);
}
}
},
/**
* 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 popup if it's already exists
if ($icon.popup('exists')) {
$icon.popup('remove popup')
.popup('destroy');
}
// http://semantic-ui.com/modules/popup.html
switch (type) {
case 'popover':
$icon
.css({
'cursor': 'pointer'
})
.popup({
content: message,
position: 'top center'
});
break;
case 'tooltip':
/* falls through */
default:
$icon
.css({
'cursor': 'pointer'
})
.popup({
content: message,
position: 'top center',
variation: 'inverted'
});
break;
}
}
},
/**
* 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 && $icon.popup('exists')) {
$icon
.css({
'cursor': ''
})
.popup('remove popup')
.popup('destroy');
}
},
/**
* 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) {
$icon.popup('hide');
}
},
/**
* 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.popup('show');
}
}
});
}(jQuery));