Skip to content

Commit ce34ece

Browse files
author
scottjehl
committed
namespaced data- attrs to $.mobile.ns (defaults to "jq-") throughout the JS
1 parent 62043a8 commit ce34ece

13 files changed

+163
-52
lines changed

js/jquery.mobile.buttonMarkup.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ $.fn.buttonMarkup = function( options ){
6363
}
6464

6565
el
66-
.attr( "data-theme", o.theme )
66+
.attr( "data-" + $.mobile.ns + "theme", o.theme )
6767
.addClass( buttonClass );
6868

6969
var wrap = ("<D class='" + innerClass + "'><D class='ui-btn-text'></D>" +
@@ -84,19 +84,19 @@ $.fn.buttonMarkup.defaults = {
8484
var attachEvents = function() {
8585
$(".ui-btn:not(.ui-disabled)").live({
8686
"touchstart mousedown": function() {
87-
var theme = $(this).attr( "data-theme" );
87+
var theme = $(this).attr( "data-" + $.mobile.ns + "theme" );
8888
$(this).removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
8989
},
9090
"touchmove touchend mouseup": function() {
91-
var theme = $(this).attr( "data-theme" );
91+
var theme = $(this).attr( "data-" + $.mobile.ns + "theme" );
9292
$(this).removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
9393
},
9494
"mouseover focus": function() {
95-
var theme = $(this).attr( "data-theme" );
95+
var theme = $(this).attr( "data-" + $.mobile.ns + "theme" );
9696
$(this).removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
9797
},
9898
"mouseout blur": function() {
99-
var theme = $(this).attr( "data-theme" );
99+
var theme = $(this).attr( "data-" + $.mobile.ns + "theme" );
100100
$(this).removeClass( "ui-btn-hover-" + theme ).addClass( "ui-btn-up-" + theme );
101101
}
102102
});

js/jquery.mobile.collapsible.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
2121
collapsibleContain = $el.addClass('ui-collapsible-contain'),
2222
collapsibleHeading = $el.find(o.heading).eq(0),
2323
collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content'),
24-
collapsibleParent = $el.closest('[data-role="collapsible-set"]').addClass('ui-collapsible-set');
24+
collapsibleParent = $el.closest( "[data-" + $.mobile.ns + "role='collapsible-set']" ).addClass('ui-collapsible-set');
2525

2626
//replace collapsibleHeading if it's a legend
2727
if(collapsibleHeading.is('legend')){
@@ -121,7 +121,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
121121
.not( "> .ui-collapsible-contain .ui-collapsible-contain" )
122122
.trigger( "collapse" );
123123
})
124-
var set = collapsibleParent.find('[data-role=collapsible]')
124+
var set = collapsibleParent.find( "[data-" + $.mobile.ns + "role=collapsible]" )
125125

126126
set.first()
127127
.find('a:eq(0)')

js/jquery.mobile.core.js

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,12 @@
88
*/
99

1010
(function( $, window, undefined ) {
11+
1112
//jQuery.mobile configurable options
1213
$.extend( $.mobile, {
14+
15+
//namespace used framework-wide for data-attrs, widget naming, and CSS classes
16+
ns: "jq-",
1317

1418
//define the url parameter used for referencing widget-generated sub-pages.
1519
//Translates to to example.html&ui-page=subpageIdentifier
@@ -89,8 +93,79 @@
8993
TAB: 9,
9094
UP: 38,
9195
WINDOWS: 91 // COMMAND
96+
}
97+
});
98+
99+
100+
//trigger mobileinit event - useful hook for configuring $.mobile settings before they're used
101+
$( window.document ).trigger( "mobileinit" );
102+
103+
104+
//support conditions
105+
//if device support condition(s) aren't met, leave things as they are -> a basic, usable experience,
106+
//otherwise, proceed with the enhancements
107+
if ( !$.mobile.gradeA() ) {
108+
return;
109+
}
110+
111+
//extend data() to treat namespaced data-attrs the same as non-namespaced ones
112+
var jqd = $.fn.data;
113+
114+
$.fn.data = function( prop, value ){
115+
if( !value && !this.attr( "[data-" + prop + "]" ) && this.attr( "[data-" $.mobile.ns + prop + "]" ) ){
116+
prop = $.mobile.ns + prop;
117+
return jqd.call( this, prop );
118+
}
119+
};
120+
121+
//define vars for interal use
122+
var $window = $(window),
123+
$html = $( "html" ),
124+
$head = $( "head" ),
125+
126+
//loading div which appears during Ajax requests
127+
//will not appear if $.mobile.loadingMessage is false
128+
$loader = $.mobile.loadingMessage ?
129+
$( "<div class='ui-loader ui-body-a ui-corner-all'>" +
130+
"<span class='ui-icon ui-icon-loading spin'></span>" +
131+
"<h1>" + $.mobile.loadingMessage + "</h1>" +
132+
"</div>" )
133+
: undefined;
134+
135+
136+
//add mobile, initial load "rendering" classes to docEl
137+
$html.addClass( "ui-mobile ui-mobile-rendering" );
138+
139+
140+
//define & prepend meta viewport tag, if content is defined
141+
$.mobile.metaViewportContent ? $( "<meta>", { name: "viewport", content: $.mobile.metaViewportContent}).prependTo( $head ) : undefined;
142+
143+
144+
//expose some core utilities
145+
$.extend($.mobile, {
146+
147+
// turn on/off page loading message.
148+
pageLoading: function ( done ) {
149+
if ( done ) {
150+
$html.removeClass( "ui-loading" );
151+
} else {
152+
if( $.mobile.loadingMessage ){
153+
var activeBtn =$( "." + $.mobile.activeBtnClass ).first();
154+
155+
$loader
156+
.appendTo( $.mobile.pageContainer )
157+
//position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
158+
.css( {
159+
top: $.support.scrollTop && $(window).scrollTop() + $(window).height() / 2 ||
160+
activeBtn.length && activeBtn.offset().top || 100
161+
} );
162+
}
163+
164+
$html.addClass( "ui-loading" );
165+
}
92166
},
93167

168+
//scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
94169
silentScroll: function( ypos ) {
95170
ypos = ypos || 0;
96171
// prevent scrollstart and scrollstop events
@@ -104,6 +179,42 @@
104179
setTimeout(function() {
105180
$.event.special.scrollstart.enabled = true;
106181
}, 150 );
182+
},
183+
184+
// find and enhance the pages in the dom and transition to the first page.
185+
initializePage: function(){
186+
//find present pages
187+
var $pages = $( "[data-" + $.mobile.ns + "role='page']" );
188+
189+
//add dialogs, set data-url attrs
190+
$pages.add( "[data-" + $.mobile.ns + "role='dialog']" ).each(function(){
191+
$(this).attr( "data-" + $.mobile.ns + "url", $(this).attr( "id" ));
192+
});
193+
194+
//define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback)
195+
$.mobile.firstPage = $pages.first();
196+
197+
//define page container
198+
$.mobile.pageContainer = $pages.first().parent().addClass( "ui-mobile-viewport" );
199+
200+
//cue page loading message
201+
$.mobile.pageLoading();
202+
203+
// if hashchange listening is disabled or there's no hash deeplink, change to the first page in the DOM
204+
if( !$.mobile.hashListeningEnabled || !$.mobile.path.stripHash( location.hash ) ){
205+
$.mobile.changePage( $.mobile.firstPage, false, true, false, true );
206+
}
207+
// otherwise, trigger a hashchange to load a deeplink
208+
else {
209+
$window.trigger( "hashchange", [ true ] );
210+
}
107211
}
108212
});
213+
214+
//dom-ready inits
215+
$($.mobile.initializePage);
216+
217+
//window load event
218+
//hide iOS browser chrome on load
219+
$window.load( $.mobile.silentScroll );
109220
})( jQuery, this );

js/jquery.mobile.dialog.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ $.widget( "mobile.dialog", $.mobile.widget, {
1616
//add ARIA role
1717
.attr("role","dialog")
1818
.addClass('ui-page ui-dialog ui-body-a')
19-
.find('[data-role=header]')
19+
.find( "[data-" + $.mobile.ns + "role=header]" )
2020
.addClass('ui-corner-top ui-overlay-shadow')
21-
.prepend( '<a href="#" data-icon="delete" data-rel="back" data-iconpos="notext">Close</a>' )
21+
.prepend( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "rel='back' data-" + $.mobile.ns + "iconpos='notext'>Close</a>" )
2222
.end()
2323
.find('.ui-content:not([class*="ui-body-"])')
2424
.addClass('ui-body-c')
2525
.end()
26-
.find('.ui-content,[data-role=footer]')
26+
.find( ".ui-content,[data-" + $.mobile.ns + "role='footer']" )
2727
.last()
2828
.addClass('ui-corner-bottom ui-overlay-shadow');
2929

@@ -44,8 +44,8 @@ $.widget( "mobile.dialog", $.mobile.widget, {
4444

4545
if( $targetel.length && !$targetel.data("transition") ){
4646
$targetel
47-
.attr("data-transition", $.mobile.urlHistory.getActive().transition )
48-
.attr("data-direction", "reverse");
47+
.attr("data-" + $.mobile.ns + "transition", $.mobile.urlHistory.getActive().transition )
48+
.attr("data-" + $.mobile.ns + "direction", "reverse");
4949
}
5050
});
5151

js/jquery.mobile.fixHeaderFooter.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ $.fn.fixHeaderFooter = function(options){
1212
var $this = $(this);
1313

1414
if( $this.data('fullscreen') ){ $this.addClass('ui-page-fullscreen'); }
15-
$this.find('.ui-header[data-position="fixed"]').addClass('ui-header-fixed ui-fixed-inline fade'); //should be slidedown
16-
$this.find('.ui-footer[data-position="fixed"]').addClass('ui-footer-fixed ui-fixed-inline fade'); //should be slideup
15+
$this.find ".ui-header[data-" + $.mobile.ns + "position='fixed']" ).addClass('ui-header-fixed ui-fixed-inline fade'); //should be slidedown
16+
$this.find( ".ui-footer[data-" + $.mobile.ns + "position='fixed']" ).addClass('ui-footer-fixed ui-fixed-inline fade'); //should be slideup
1717
});
1818
};
1919

@@ -104,12 +104,12 @@ $.fixedToolbars = (function(){
104104
//before page is shown, check for duplicate footer
105105
$('.ui-page').live('pagebeforeshow', function(event, ui){
106106
var page = $(event.target),
107-
footer = page.find('[data-role="footer"]:not(.ui-sticky-footer)'),
107+
footer = page.find( "[data-" + $.mobile.ns + "role='footer']:not(.ui-sticky-footer)" ),
108108
id = footer.data('id');
109109
stickyFooter = null;
110110
if (id)
111111
{
112-
stickyFooter = $('.ui-footer[data-id="' + id + '"].ui-sticky-footer');
112+
stickyFooter = $( ".ui-footer[data-" + $.mobile.ns + "id='" + id + "'].ui-sticky-footer" );
113113
if (stickyFooter.length == 0) {
114114
// No sticky footer exists for this data-id. We'll use this
115115
// footer as the sticky footer for the group and then create

js/jquery.mobile.forms.checkboxradio.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
1212
_create: function(){
1313
var self = this,
1414
input = this.element,
15-
label = input.closest("form,fieldset,[data-role='page']").find("label[for='" + input.attr( "id" ) + "']"),
15+
label = input.closest("form,fieldset,[data-" + $.mobile.ns + "role='page']").find("label[for='" + input.attr( "id" ) + "']"),
1616
inputtype = input.attr( "type" ),
1717
checkedicon = "ui-icon-" + inputtype + "-on",
1818
uncheckedicon = "ui-icon-" + inputtype + "-off";
@@ -27,7 +27,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
2727
label
2828
.buttonMarkup({
2929
theme: this.options.theme,
30-
icon: this.element.parents( "[data-type='horizontal']" ).length ? undefined : uncheckedicon,
30+
icon: this.element.parents( "[data-" + $.mobile.ns + "type='horizontal']" ).length ? undefined : uncheckedicon,
3131
shadow: false
3232
});
3333

@@ -110,7 +110,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
110110

111111
//returns either a set of radios with the same name attribute, or a single checkbox
112112
_getInputSet: function(){
113-
return this.element.closest( "form,fieldset,[data-role='page']" )
113+
return this.element.closest( "form,fieldset,[data-" + $.mobile.ns + "role='page']" )
114114
.find( "input[name='"+ this.element.attr( "name" ) +"'][type='"+ this.element.attr( "type" ) +"']" );
115115
},
116116

@@ -126,7 +126,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
126126

127127
refresh: function( ){
128128
var input = this.element,
129-
label = input.closest("form,fieldset,[data-role='page']").find("label[for='" + input.attr( "id" ) + "']"),
129+
label = input.closest("form,fieldset,[data-" + $.mobile.ns + "role='page']").find("label[for='" + input.attr( "id" ) + "']"),
130130
inputtype = input.attr( "type" ),
131131
icon = label.find( ".ui-icon" ),
132132
checkedicon = "ui-icon-" + inputtype + "-on",

js/jquery.mobile.forms.select.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,11 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
7777
//button theme
7878
theme = /ui-btn-up-([a-z])/.exec( button.attr("class") )[1],
7979

80-
menuPage = $( "<div data-role='dialog' data-theme='"+ o.menuPageTheme +"'>" +
81-
"<div data-role='header'>" +
80+
menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' data-theme='"+ o.menuPageTheme +"'>" +
81+
"<div data-" + $.mobile.ns + "role='header'>" +
8282
"<div class='ui-title'>" + label.text() + "</div>"+
8383
"</div>"+
84-
"<div data-role='content'></div>"+
84+
"<div data-" + $.mobile.ns + "role='content'></div>"+
8585
"</div>" )
8686
.appendTo( $.mobile.pageContainer )
8787
.page(),
@@ -101,7 +101,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
101101
"id": menuId,
102102
"role": "listbox",
103103
"aria-labelledby": buttonId,
104-
"data-theme": theme
104+
"data-" + $.mobile.ns + "theme": theme
105105
})
106106
.appendTo( listbox ),
107107

@@ -116,8 +116,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
116116
.appendTo( header ),
117117

118118
headerClose = $( "<a>", {
119-
"data-iconpos": "notext",
120-
"data-icon": "delete",
119+
"data-" + $.mobile.ns + "iconpos": "notext",
120+
"data-" + $.mobile.ns + "icon": "delete",
121121
"text": o.closeText,
122122
"href": "#",
123123
"class": "ui-btn-left"
@@ -307,7 +307,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
307307

308308
// has this optgroup already been built yet?
309309
if( $.inArray(optLabel, optgroups) === -1 ){
310-
lis.push( "<li data-role='list-divider'>"+ optLabel +"</li>" );
310+
lis.push( "<li data-" + $.mobile.ns + "role='list-divider'>"+ optLabel +"</li>" );
311311
optgroups.push( optLabel );
312312
}
313313
}
@@ -326,7 +326,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
326326
extraAttrs.push( "aria-disabled='true'" );
327327
}
328328

329-
lis.push( "<li data-icon='"+ dataIcon +"' class='"+ classes.join(" ") + "' " + extraAttrs.join(" ") +">"+ anchor +"</li>" )
329+
lis.push( "<li data-" + $.mobile.ns + "icon='"+ dataIcon +"' class='"+ classes.join(" ") + "' " + extraAttrs.join(" ") +">"+ anchor +"</li>" )
330330
});
331331

332332
self.list.html( lis.join(" ") );

js/jquery.mobile.forms.textinput.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
3131
var focusedEl = input;
3232

3333
//"search" input widget
34-
if( input.is('[type="search"],[data-type="search"]') ){
34+
if( input.is( "[type='search'],[data-" + $.mobile.ns + "type='search']" ) ){
3535
focusedEl = input.wrap('<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield'+ themeclass +'"></div>').parent();
3636
var clearbtn = $('<a href="#" class="ui-input-clear" title="clear text">clear text</a>')
3737
.tap(function( e ){
@@ -87,11 +87,11 @@ $.widget( "mobile.textinput", $.mobile.widget, {
8787
},
8888

8989
disable: function(){
90-
( this.element.attr("disabled",true).is('[type="search"],[data-type="search"]') ? this.element.parent() : this.element ).addClass("ui-disabled");
90+
( this.element.attr("disabled",true).is( "[type='search'],[data-" + $.mobile.ns + "type='search']" ) ? this.element.parent() : this.element ).addClass("ui-disabled");
9191
},
9292

9393
enable: function(){
94-
( this.element.attr("disabled", false).is('[type="search"],[data-type="search"]') ? this.element.parent() : this.element ).removeClass("ui-disabled");
94+
( this.element.attr("disabled", false).is( "[type='search'],[data-" + $.mobile.ns + "type='search']" ) ? this.element.parent() : this.element ).removeClass("ui-disabled");
9595
}
9696
});
9797
})( jQuery );

js/jquery.mobile.listview.filter.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
$.mobile.listview.prototype.options.filter = false;
1010

11-
$( "[data-role='listview']" ).live( "listviewcreate", function() {
11+
$( "[data-" + $.mobile.ns + "role='listview']" ).live( "listviewcreate", function() {
1212
var list = $( this ),
1313
listview = list.data( "listview" );
1414
if ( !listview.options.filter ) {
@@ -19,7 +19,7 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() {
1919

2020
search = $( "<input>", {
2121
placeholder: "Filter results...",
22-
"data-type": "search"
22+
"data-" + $.mobile.ns + "type": "search"
2323
})
2424
.bind( "keyup change", function() {
2525
var val = this.value.toLowerCase(),

js/jquery.mobile.listview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
299299
parentId = parentPage.data( "url" ),
300300
o = this.options,
301301
self = this,
302-
persistentFooterID = parentPage.find( "[data-role='footer']" ).data( "id" );
302+
persistentFooterID = parentPage.find( "[data-" + $.mobile.ns + "role='footer']" ).data( "id" );
303303

304304
$( parentList.find( "ul, ol" ).toArray().reverse() ).each(function( i ) {
305305
var list = $( this ),

0 commit comments

Comments
 (0)