Skip to content

Commit ee794c2

Browse files
gseguingseguin
committed
Revert insanity brought by e88fd48, somehow buttonMarkup had been replaced by the mobile.widget code.
1 parent 9856ba3 commit ee794c2

File tree

1 file changed

+219
-48
lines changed

1 file changed

+219
-48
lines changed

‎js/jquery.mobile.buttonMarkup.js‎

Lines changed: 219 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,245 @@
11
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2-
//>>description: Widget factory extentions for mobile.
3-
//>>label: Widget Factory Extensions
2+
//>>description: For making button-like links.
3+
//>>label: Buttons
44
//>>css: ../css/themes/default/jquery.mobile.theme.css
55

6-
define( [ "jquery", "../external/requirejs/depend!./jquery.ui.widget[jquery]" ], function( $ ) {
6+
define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.vmouse" ], function( $ ) {
77
//>>excludeEnd("jqmBuildExclude");
8-
(function( $, undefined ) {
8+
( function( $, undefined ) {
9+
10+
$.fn.buttonMarkup = function( options ) {
11+
var $workingSet = this;
12+
13+
// Enforce options to be of type string
14+
options = ( options && ( $.type( options ) == "object" ) )? options : {};
15+
for ( var i = 0; i < $workingSet.length; i++ ) {
16+
var el = $workingSet.eq( i ),
17+
e = el[ 0 ],
18+
o = $.extend( {}, $.fn.buttonMarkup.defaults, {
19+
icon: options.icon !== undefined ? options.icon : el.jqmData( "icon" ),
20+
iconpos: options.iconpos !== undefined ? options.iconpos : el.jqmData( "iconpos" ),
21+
theme: options.theme !== undefined ? options.theme : el.jqmData( "theme" ) || $.mobile.getInheritedTheme( el, "c" ),
22+
inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
23+
shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
24+
corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
25+
iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ),
26+
mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" )
27+
}, options ),
28+
29+
// Classes Defined
30+
innerClass = "ui-btn-inner",
31+
textClass = "ui-btn-text",
32+
buttonClass, iconClass,
33+
// Button inner markup
34+
buttonInner,
35+
buttonText,
36+
buttonIcon,
37+
buttonElements;
38+
39+
$.each(o, function(key, value) {
40+
e.setAttribute( "data-" + $.mobile.ns + key, value );
41+
el.jqmData(key, value);
42+
});
943

10-
$.widget( "mobile.widget", {
11-
// decorate the parent _createWidget to trigger `widgetinit` for users
12-
// who wish to do post post `widgetcreate` alterations/additions
13-
//
14-
// TODO create a pull request for jquery ui to trigger this event
15-
// in the original _createWidget
16-
_createWidget: function() {
17-
$.Widget.prototype._createWidget.apply( this, arguments );
18-
this._trigger( 'init' );
19-
},
44+
// Check if this element is already enhanced
45+
buttonElements = $.data(((e.tagName === "INPUT" || e.tagName === "BUTTON") ? e.parentNode : e), "buttonElements");
46+
47+
if (buttonElements) {
48+
e = buttonElements.outer;
49+
el = $(e);
50+
buttonInner = buttonElements.inner;
51+
buttonText = buttonElements.text;
52+
// We will recreate this icon below
53+
$(buttonElements.icon).remove();
54+
buttonElements.icon = null;
55+
}
56+
else {
57+
buttonInner = document.createElement( o.wrapperEls );
58+
buttonText = document.createElement( o.wrapperEls );
59+
}
60+
buttonIcon = o.icon ? document.createElement( "span" ) : null;
2061

21-
_getCreateOptions: function() {
62+
if ( attachEvents && !buttonElements) {
63+
attachEvents();
64+
}
65+
66+
// if not, try to find closest theme container
67+
if ( !o.theme ) {
68+
o.theme = $.mobile.getInheritedTheme( el, "c" );
69+
}
70+
71+
buttonClass = "ui-btn ui-btn-up-" + o.theme;
72+
buttonClass += o.inline ? " ui-btn-inline" : "";
73+
buttonClass += o.shadow ? " ui-shadow" : "";
74+
buttonClass += o.corners ? " ui-btn-corner-all" : "";
75+
76+
if ( o.mini !== undefined ) {
77+
// Used to control styling in headers/footers, where buttons default to `mini` style.
78+
buttonClass += o.mini ? " ui-mini" : " ui-fullsize";
79+
}
80+
81+
if ( o.icon ) {
82+
o.icon = "ui-icon-" + o.icon;
83+
o.iconpos = o.iconpos || "left";
2284

23-
var elem = this.element,
24-
options = {};
85+
iconClass = "ui-icon " + o.icon;
2586

26-
$.each( this.options, function( option ) {
87+
if ( o.iconshadow ) {
88+
iconClass += " ui-icon-shadow";
89+
}
90+
}
2791

28-
var value = elem.jqmData( option.replace( /[A-Z]/g, function( c ) {
29-
return "-" + c.toLowerCase();
30-
})
31-
);
92+
if ( o.iconpos ) {
93+
buttonClass += " ui-btn-icon-" + o.iconpos;
3294

33-
if ( value !== undefined ) {
34-
options[ option ] = value;
95+
if ( o.iconpos == "notext" && !el.attr( "title" ) ) {
96+
el.attr( "title", el.getEncodedText() );
3597
}
36-
});
37-
38-
return options;
39-
},
98+
}
99+
100+
innerClass += o.corners ? " ui-btn-corner-all" : "";
40101

41-
enhanceWithin: function( target, useKeepNative ) {
42-
this.enhance( $( this.options.initSelector, $( target )), useKeepNative );
43-
},
102+
if ( o.iconpos && o.iconpos === "notext" && !el.attr( "title" ) ) {
103+
el.attr( "title", el.getEncodedText() );
104+
}
44105

45-
enhance: function( targets, useKeepNative ) {
46-
var page, keepNative, $widgetElements = $( targets ), self = this;
106+
if ( buttonElements ) {
107+
el.removeClass( buttonElements.bcls || "" );
108+
}
109+
el.removeClass( "ui-link" ).addClass( buttonClass );
47110

48-
// if ignoreContentEnabled is set to true the framework should
49-
// only enhance the selected elements when they do NOT have a
50-
// parent with the data-namespace-ignore attribute
51-
$widgetElements = $.mobile.enhanceable( $widgetElements );
111+
buttonInner.className = innerClass;
52112

53-
if ( useKeepNative && $widgetElements.length ) {
54-
// TODO remove dependency on the page widget for the keepNative.
55-
// Currently the keepNative value is defined on the page prototype so
56-
// the method is as well
57-
page = $.mobile.closestPageData( $widgetElements );
58-
keepNative = (page && page.keepNativeSelector()) || "";
113+
buttonText.className = textClass;
114+
if ( !buttonElements ) {
115+
buttonInner.appendChild( buttonText );
116+
}
117+
if ( buttonIcon ) {
118+
buttonIcon.className = iconClass;
119+
if ( !(buttonElements && buttonElements.icon) ) {
120+
buttonInner.appendChild( buttonIcon );
121+
}
122+
}
59123

60-
$widgetElements = $widgetElements.not( keepNative );
124+
while ( e.firstChild && !buttonElements) {
125+
buttonText.appendChild( e.firstChild );
61126
}
62127

63-
$widgetElements[ this.widgetName ]();
64-
},
128+
if ( !buttonElements ) {
129+
e.appendChild( buttonInner );
130+
}
65131

66-
raise: function( msg ) {
67-
throw "Widget [" + this.widgetName + "]: " + msg;
132+
// Assign a structure containing the elements of this button to the elements of this button. This
133+
// will allow us to recognize this as an already-enhanced button in future calls to buttonMarkup().
134+
buttonElements = {
135+
bcls : buttonClass,
136+
outer : e,
137+
inner : buttonInner,
138+
text : buttonText,
139+
icon : buttonIcon
140+
};
141+
142+
$.data(e, 'buttonElements', buttonElements);
143+
$.data(buttonInner, 'buttonElements', buttonElements);
144+
$.data(buttonText, 'buttonElements', buttonElements);
145+
if (buttonIcon) {
146+
$.data(buttonIcon, 'buttonElements', buttonElements);
147+
}
68148
}
149+
150+
return this;
151+
};
152+
153+
$.fn.buttonMarkup.defaults = {
154+
corners: true,
155+
shadow: true,
156+
iconshadow: true,
157+
inline: false,
158+
wrapperEls: "span"
159+
};
160+
161+
function closestEnabledButton( element ) {
162+
var cname;
163+
164+
while ( element ) {
165+
// Note that we check for typeof className below because the element we
166+
// handed could be in an SVG DOM where className on SVG elements is defined to
167+
// be of a different type (SVGAnimatedString). We only operate on HTML DOM
168+
// elements, so we look for plain "string".
169+
cname = ( typeof element.className === 'string' ) && (element.className + ' ');
170+
if ( cname && cname.indexOf("ui-btn ") > -1 && cname.indexOf("ui-disabled ") < 0 ) {
171+
break;
172+
}
173+
174+
element = element.parentNode;
175+
}
176+
177+
return element;
178+
}
179+
180+
var attachEvents = function() {
181+
var hoverDelay = 200,
182+
hov, foc;
183+
$( document ).bind( {
184+
"vmousedown vmousecancel vmouseup vmouseover vmouseout focus blur scrollstart": function( event ) {
185+
var theme,
186+
$btn = $( closestEnabledButton( event.target ) ),
187+
evt = event.type;
188+
189+
if ( $btn.length ) {
190+
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
191+
192+
if ( evt === "vmousedown" ) {
193+
if ( $.support.touch ) {
194+
hov = setTimeout(function() {
195+
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
196+
}, hoverDelay );
197+
} else {
198+
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
199+
}
200+
} else if ( evt === "vmousecancel" || evt === "vmouseup" ) {
201+
$btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
202+
} else if ( evt === "vmouseover" || evt === "focus" ) {
203+
if ( $.support.touch ) {
204+
foc = setTimeout(function() {
205+
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
206+
}, hoverDelay );
207+
} else {
208+
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
209+
}
210+
} else if ( evt === "vmouseout" || evt === "blur" || evt === "scrollstart" ) {
211+
$btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
212+
if ( hov ) {
213+
clearTimeout( hov );
214+
}
215+
if ( foc ) {
216+
clearTimeout( foc );
217+
}
218+
}
219+
}
220+
},
221+
"focusin focus": function( event ){
222+
$( closestEnabledButton( event.target ) ).addClass( $.mobile.focusClass );
223+
},
224+
"focusout blur": function( event ){
225+
$( closestEnabledButton( event.target ) ).removeClass( $.mobile.focusClass );
226+
}
227+
});
228+
229+
attachEvents = null;
230+
};
231+
232+
//links in bars, or those with data-role become buttons
233+
//auto self-init widgets
234+
$( document ).bind( "pagecreate create", function( e ){
235+
236+
$( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", e.target )
237+
.not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" )
238+
.buttonMarkup();
69239
});
70240

71241
})( jQuery );
242+
72243
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
73244
});
74245
//>>excludeEnd("jqmBuildExclude");

0 commit comments

Comments
 (0)