This repository has been archived by the owner on Oct 8, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
buttonMarkup.js
269 lines (226 loc) · 8.04 KB
/
buttonMarkup.js
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Applies button styling to links
//>>label: Buttons: Link-based
//>>group: Forms
//>>css.structure: ../css/structure/jquery.mobile.core.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
define( [ "jquery", "./core" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
// buttonMarkup is deprecated as of 1.4.0 and will be removed in 1.5.0.
(function( $, undefined ) {
// General policy: Do not access data-* attributes except during enhancement.
// In all other cases we determine the state of the button exclusively from its
// className. That's why optionsToClasses expects a full complement of options,
// and the jQuery plugin completes the set of options from the default values.
// Map classes to buttonMarkup boolean options - used in classNameToOptions()
var reverseBoolOptionMap = {
"ui-shadow" : "shadow",
"ui-corner-all" : "corners",
"ui-btn-inline" : "inline",
"ui-shadow-icon" : "iconshadow", /* TODO: Remove in 1.5 */
"ui-mini" : "mini"
},
getAttrFixed = function() {
var ret = $.mobile.getAttribute.apply( this, arguments );
return ( ret == null ? undefined : ret );
},
capitalLettersRE = /[A-Z]/g;
// optionsToClasses:
// @options: A complete set of options to convert to class names.
// @existingClasses: extra classes to add to the result
//
// Converts @options to buttonMarkup classes and returns the result as an array
// that can be converted to an element's className with .join( " " ). All
// possible options must be set inside @options. Use $.fn.buttonMarkup.defaults
// to get a complete set and use $.extend to override your choice of options
// from that set.
function optionsToClasses( options, existingClasses ) {
var classes = existingClasses ? existingClasses : [];
// Add classes to the array - first ui-btn
classes.push( "ui-btn" );
// If there is a theme
if ( options.theme ) {
classes.push( "ui-btn-" + options.theme );
}
// If there's an icon, add the icon-related classes
if ( options.icon ) {
classes = classes.concat([
"ui-icon-" + options.icon,
"ui-btn-icon-" + options.iconpos
]);
if ( options.iconshadow ) {
classes.push( "ui-shadow-icon" ); /* TODO: Remove in 1.5 */
}
}
// Add the appropriate class for each boolean option
if ( options.inline ) {
classes.push( "ui-btn-inline" );
}
if ( options.shadow ) {
classes.push( "ui-shadow" );
}
if ( options.corners ) {
classes.push( "ui-corner-all" );
}
if ( options.mini ) {
classes.push( "ui-mini" );
}
// Create a string from the array and return it
return classes;
}
// classNameToOptions:
// @classes: A string containing a .className-style space-separated class list
//
// Loops over @classes and calculates an options object based on the
// buttonMarkup-related classes it finds. It records unrecognized classes in an
// array.
//
// Returns: An object containing the following items:
//
// "options": buttonMarkup options found to be present because of the
// presence/absence of corresponding classes
//
// "unknownClasses": a string containing all the non-buttonMarkup-related
// classes found in @classes
//
// "alreadyEnhanced": A boolean indicating whether the ui-btn class was among
// those found to be present
function classNameToOptions( classes ) {
var idx, map, unknownClass,
alreadyEnhanced = false,
noIcon = true,
o = {
icon: "",
inline: false,
shadow: false,
corners: false,
iconshadow: false,
mini: false
},
unknownClasses = [];
classes = classes.split( " " );
// Loop over the classes
for ( idx = 0 ; idx < classes.length ; idx++ ) {
// Assume it's an unrecognized class
unknownClass = true;
// Recognize boolean options from the presence of classes
map = reverseBoolOptionMap[ classes[ idx ] ];
if ( map !== undefined ) {
unknownClass = false;
o[ map ] = true;
// Recognize the presence of an icon and establish the icon position
} else if ( classes[ idx ].indexOf( "ui-btn-icon-" ) === 0 ) {
unknownClass = false;
noIcon = false;
o.iconpos = classes[ idx ].substring( 12 );
// Establish which icon is present
} else if ( classes[ idx ].indexOf( "ui-icon-" ) === 0 ) {
unknownClass = false;
o.icon = classes[ idx ].substring( 8 );
// Establish the theme - this recognizes one-letter theme swatch names
} else if ( classes[ idx ].indexOf( "ui-btn-" ) === 0 && classes[ idx ].length === 8 ) {
unknownClass = false;
o.theme = classes[ idx ].substring( 7 );
// Recognize that this element has already been buttonMarkup-enhanced
} else if ( classes[ idx ] === "ui-btn" ) {
unknownClass = false;
alreadyEnhanced = true;
}
// If this class has not been recognized, add it to the list
if ( unknownClass ) {
unknownClasses.push( classes[ idx ] );
}
}
// If a "ui-btn-icon-*" icon position class is absent there cannot be an icon
if ( noIcon ) {
o.icon = "";
}
return {
options: o,
unknownClasses: unknownClasses,
alreadyEnhanced: alreadyEnhanced
};
}
function camelCase2Hyphenated( c ) {
return "-" + c.toLowerCase();
}
// $.fn.buttonMarkup:
// DOM: gets/sets .className
//
// @options: options to apply to the elements in the jQuery object
// @overwriteClasses: boolean indicating whether to honour existing classes
//
// Calculates the classes to apply to the elements in the jQuery object based on
// the options passed in. If @overwriteClasses is true, it sets the className
// property of each element in the jQuery object to the buttonMarkup classes
// it calculates based on the options passed in.
//
// If you wish to preserve any classes that are already present on the elements
// inside the jQuery object, including buttonMarkup-related classes that were
// added by a previous call to $.fn.buttonMarkup() or during page enhancement
// then you should omit @overwriteClasses or set it to false.
$.fn.buttonMarkup = function( options, overwriteClasses ) {
var idx, data, el, retrievedOptions, optionKey,
defaults = $.fn.buttonMarkup.defaults;
for ( idx = 0 ; idx < this.length ; idx++ ) {
el = this[ idx ];
data = overwriteClasses ?
// Assume this element is not enhanced and ignore its classes
{ alreadyEnhanced: false, unknownClasses: [] } :
// Otherwise analyze existing classes to establish existing options and
// classes
classNameToOptions( el.className );
retrievedOptions = $.extend( {},
// If the element already has the class ui-btn, then we assume that
// it has passed through buttonMarkup before - otherwise, the options
// returned by classNameToOptions do not correctly reflect the state of
// the element
( data.alreadyEnhanced ? data.options : {} ),
// Finally, apply the options passed in
options );
// If this is the first call on this element, retrieve remaining options
// from the data-attributes
if ( !data.alreadyEnhanced ) {
for ( optionKey in defaults ) {
if ( retrievedOptions[ optionKey ] === undefined ) {
retrievedOptions[ optionKey ] = getAttrFixed( el,
optionKey.replace( capitalLettersRE, camelCase2Hyphenated )
);
}
}
}
el.className = optionsToClasses(
// Merge all the options and apply them as classes
$.extend( {},
// The defaults form the basis
defaults,
// Add the computed options
retrievedOptions
),
// ... and re-apply any unrecognized classes that were found
data.unknownClasses ).join( " " );
if ( el.tagName.toLowerCase() !== "button" ) {
el.setAttribute( "role", "button" );
}
}
return this;
};
// buttonMarkup defaults. This must be a complete set, i.e., a value must be
// given here for all recognized options
$.fn.buttonMarkup.defaults = {
icon: "",
iconpos: "left",
theme: null,
inline: false,
shadow: true,
corners: true,
iconshadow: false, /* TODO: Remove in 1.5. Option deprecated in 1.4. */
mini: false
};
$.extend( $.fn.buttonMarkup, {
initSelector: "a:jqmData(role='button'), .ui-bar > a, .ui-bar > :jqmData(role='controlgroup') > a, button:not(:jqmData(role='navbar') button)"
});
})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");