Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 702a13f

Browse files
arschmitzarschmitz
committed
Page: add enhanced option for page and tests for dialog extension
1 parent 4c54326 commit 702a13f

File tree

8 files changed

+485
-20
lines changed

8 files changed

+485
-20
lines changed

‎js/widgets/page.dialog.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,19 @@ $.widget( "mobile.page", $.mobile.page, {
4444
},
4545

4646
_enhance: function() {
47+
this._super();
48+
4749
// Class the markup for dialog styling and wrap interior
48-
this.element.addClass( "ui-dialog" )
49-
.wrapInner( $( "<div/>", {
50-
51-
// ARIA role
52-
"role" : "dialog",
53-
"class" : "ui-dialog-contain ui-overlay-shadow" +
54-
( this.options.corners ? " ui-corner-all" : "" )
55-
}));
50+
if( this.options.dialog ){
51+
this.element.addClass( "ui-dialog" )
52+
.wrapInner( $( "<div/>", {
53+
54+
// ARIA role
55+
"role" : "dialog",
56+
"class" : "ui-dialog-contain ui-overlay-shadow" +
57+
( this.options.corners ? " ui-corner-all" : "" )
58+
}));
59+
}
5660
},
5761

5862
_setOptions: function( options ) {

‎js/widgets/page.js‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,31 @@ $.widget( "mobile.page", {
5151
},
5252

5353
_create: function() {
54-
var attrPrefix = "data-" + $.mobile.ns,
55-
self = this;
5654
// If false is returned by the callbacks do not create the page
5755
if ( this._trigger( "beforecreate" ) === false ) {
5856
return false;
5957
}
6058

59+
if ( !this.options.enhanced ) {
60+
this._enhance();
61+
}
62+
63+
this._on( this.element, {
64+
pagebeforehide: "removeContainerBackground",
65+
pagebeforeshow: "_handlePageBeforeShow"
66+
});
67+
68+
this.element.enhanceWithin();
69+
// Dialog widget is deprecated in 1.4 remove this in 1.5
70+
if( $.mobile.getAttribute( this.element[0], "role" ) === "dialog" && $.mobile.dialog ){
71+
this.element.dialog();
72+
}
73+
},
74+
75+
_enhance: function (){
76+
var attrPrefix = "data-" + $.mobile.ns,
77+
self = this;
78+
6179
if ( this.options.role ) {
6280
this.element.attr( "data-" + $.mobile.ns + "role", this.options.role );
6381
}
@@ -66,10 +84,7 @@ $.widget( "mobile.page", {
6684
.attr( "tabindex", "0" )
6785
.addClass( "ui-page ui-page-theme-" + this.options.theme );
6886

69-
this._on( this.element, {
70-
pagebeforehide: "removeContainerBackground",
71-
pagebeforeshow: "_handlePageBeforeShow"
72-
});
87+
// Manipulation of content os Deprecated as of 1.4 remove in 1.5
7388
this.element.find( "[" + attrPrefix + "role='content']" ).each( function() {
7489
var $this = $( this ),
7590
theme = this.getAttribute( attrPrefix + "theme" ) || undefined;
@@ -81,12 +96,6 @@ $.widget( "mobile.page", {
8196
// Add ARIA role
8297
$this.attr( "role", "main" ).addClass( "ui-content" );
8398
});
84-
85-
this.element.enhanceWithin();
86-
87-
if( $.mobile.getAttribute( this.element[0], "role" ) === "dialog" && $.mobile.dialog ){
88-
this.element.dialog();
89-
}
9099
},
91100

92101
bindRemove: function( callback ) {

‎tests/integration/dialog-extension/dialog-no-hash.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
</head>
5+
<body>
6+
<div data-nstest-role="dialog" id="dialog-no-hash">
7+
<div data-nstest-role="header">
8+
<h1>No-hash dialog test</h1>
9+
</div>
10+
<div data-nstest-role="content">
11+
<p>Content</p>
12+
</div>
13+
</div>
14+
</body>
15+
</html>

‎tests/integration/dialog-extension/dialog_basic.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
(function($) {
2+
3+
asyncTest( "Returning from a dialog results in the page from which it opened", function() {
4+
expect( 2 );
5+
6+
$.testHelper.pageSequence([
7+
function() {
8+
$( "#openBasicDialog" ).click();
9+
},
10+
11+
function() {
12+
ok( $.mobile.activePage.attr( "id" ) === "basicDialog", "Basic dialog has opened" );
13+
$( "a", $.mobile.activePage[ 0 ] ).click();
14+
},
15+
16+
function() {
17+
ok( $.mobile.activePage.attr( "id" ) === "basicTestPage", "Active page is original page" );
18+
start();
19+
}
20+
]);
21+
});
22+
23+
})( jQuery );

‎tests/integration/dialog-extension/dialog_events.js‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
/*
2+
* mobile dialog unit tests
3+
*/
4+
(function($) {
5+
var home = $.mobile.path.parseUrl(location.pathname).directory,
6+
homeWithSearch = home + location.search;
7+
8+
module( "jquery.mobile.dialog.js", {
9+
setup: function() {
10+
$.mobile.page.prototype.options.contentTheme = "d";
11+
$.testHelper.navReset( homeWithSearch );
12+
}
13+
});
14+
15+
asyncTest( "Test option data-close-btn", function() {
16+
expect( 7 );
17+
18+
$.testHelper.pageSequence([
19+
function() {
20+
// bring up the dialog
21+
$( "#close-btn-test-link" ).click();
22+
},
23+
24+
function() {
25+
var a = $( "#close-btn-test .ui-header a" );
26+
deepEqual( a.length, 0, "Initially, the dialog header has no anchor elements (option value 'none')" );
27+
28+
$( "#close-btn-test" ).page( "option", "closeBtn", "left" );
29+
a = $( "#close-btn-test .ui-header a" );
30+
deepEqual( a.length, 1, "The dialog header has eactly one anchor element when the option value is set to 'left'" );
31+
ok( a.hasClass( "ui-btn-left" ), "The close button has class ui-btn-left when the closeBtn option is set to 'left'" );
32+
deepEqual( a.attr( "role" ), "button", "The close button has the attribute " + '"' + "role='button'" + '"' + "set" );
33+
34+
$( "#close-btn-test" ).page( "option", "closeBtn", "right" );
35+
a = $( "#close-btn-test .ui-header a" );
36+
deepEqual( a.length, 1, "The dialog header has eactly one anchor element when the option value is set to 'right'" );
37+
ok( a.hasClass( "ui-btn-right" ), "The close button has class ui-btn-right when the closeBtn option is set to 'right'" );
38+
deepEqual( a.attr( "role" ), "button", "The close button has the attribute " + '"' + "role='button'" + '"' + "set" );
39+
40+
41+
},
42+
43+
function() {
44+
start();
45+
}
46+
]);
47+
});
48+
49+
asyncTest( "clicking dialog 'Close' button twice in quick succession does not cause the browser history to retreat by two", function() {
50+
var correctLocation;
51+
52+
expect(1);
53+
54+
$.testHelper.pageSequence([
55+
function() {
56+
$.mobile.changePage( $( "#mypage" ) );
57+
},
58+
59+
function() {
60+
61+
$.mobile.changePage( $( "#doubleCloseTestPage" ) );
62+
},
63+
64+
function() {
65+
66+
$( "#doubleCloseTestPage a" ).click();
67+
},
68+
69+
function( timedOut ) {
70+
ok( !timedOut, "Clicking dialog 'Close' has resulted in a pagechange event" );
71+
start();
72+
}
73+
]);
74+
});
75+
76+
asyncTest( "dialog element with no theming", function() {
77+
expect(5);
78+
79+
$.testHelper.pageSequence([
80+
function() {
81+
$.mobile.changePage( $( "#mypage" ) );
82+
},
83+
84+
function() {
85+
//bring up the dialog
86+
$( "#link-a" ).click();
87+
},
88+
89+
function() {
90+
var dialog = $( "#dialog-a" );
91+
92+
// Assert dialog theme inheritance (issue 1375):
93+
ok( dialog.hasClass( "ui-page-theme-a" ), "Expected explicit theme ui-page-theme-a" );
94+
ok( $.mobile.pageContainer.hasClass( "ui-overlay-a" ), "Expected default overlay theme ui-overlay-a" );
95+
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" );
96+
ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
97+
ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" );
98+
99+
start();
100+
}
101+
]);
102+
});
103+
104+
asyncTest( "dialog element with data-theme", function() {
105+
// Reset fallback theme for content
106+
$.mobile.page.prototype.options.contentTheme = null;
107+
108+
expect(6);
109+
110+
$.testHelper.pageSequence([
111+
function() {
112+
$.mobile.changePage( $( "#mypage" ) );
113+
},
114+
115+
function() {
116+
//bring up the dialog
117+
$( "#link-b" ).click();
118+
},
119+
120+
function() {
121+
var dialog = $( "#dialog-b" );
122+
123+
// Assert dialog theme inheritance (issue 1375):
124+
ok( dialog.hasClass( "ui-page-theme-e" ), "Expected explicit theme ui-page-theme-e" );
125+
ok( !$.mobile.pageContainer.hasClass( "ui-overlay-b" ), "Expected no overlay theme ui-overlay-b" );
126+
ok( $.mobile.pageContainer.hasClass( "ui-overlay-a" ), "Expected default overlay theme ui-overlay-a" );
127+
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" );
128+
ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-e" ), "Expect content to inherit from data-theme" );
129+
ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" );
130+
131+
start();
132+
}
133+
]);
134+
});
135+
136+
asyncTest( "dialog element with data-theme & data-overlay-theme", function() {
137+
expect(5);
138+
139+
$.testHelper.pageSequence([
140+
function() {
141+
$.mobile.changePage( $( "#mypage" ) );
142+
},
143+
144+
function() {
145+
//bring up the dialog
146+
$( "#link-c" ).click();
147+
},
148+
149+
function() {
150+
var dialog = $( "#dialog-c" );
151+
// Assert dialog theme inheritance (issue 1375):
152+
ok( dialog.hasClass( "ui-page-theme-e" ), "Expected explicit theme ui-page-theme-e" );
153+
ok( $.mobile.pageContainer.hasClass( "ui-overlay-b" ), "Expected explicit overlay theme ui-overlay-b" );
154+
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" );
155+
ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
156+
ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" );
157+
158+
start();
159+
}
160+
]);
161+
});
162+
163+
asyncTest( "page container is updated to dialog overlayTheme at pagebeforeshow", function(){
164+
var pageTheme;
165+
166+
expect( 1 );
167+
168+
$.testHelper.pageSequence([
169+
function() {
170+
$.mobile.changePage( "#mypage" );
171+
},
172+
173+
function() {
174+
//bring up the dialog
175+
$( "#foo-dialog-link" ).click();
176+
},
177+
178+
function() {
179+
pageTheme = "ui-overlay-" + $.mobile.activePage.page( "option", "overlayTheme" );
180+
181+
$.mobile.pageContainer.removeClass( pageTheme );
182+
183+
$.mobile.activePage
184+
.bind( "pagebeforeshow", function(){
185+
ok( $.mobile.pageContainer.hasClass( pageTheme ), "Page container has the same theme as the dialog overlayTheme on pagebeforeshow" );
186+
start();
187+
}).trigger( "pagebeforeshow" );
188+
}
189+
]);
190+
});
191+
})( jQuery );

‎tests/integration/dialog-extension/dialog_no_hash.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/*
2+
* mobile dialog unit tests
3+
*/
4+
(function($) {
5+
module( "jquery.mobile.dialog.js", {
6+
setup: function() {
7+
$.mobile.page.prototype.options.contentTheme = "d";
8+
}
9+
});
10+
11+
asyncTest( "dialog opens and closes correctly when hash handling is off", function() {
12+
var activePage;
13+
14+
expect( 3 );
15+
16+
$.testHelper.pageSequence([
17+
function() {
18+
$.mobile.changePage( $( "#mypage" ) );
19+
},
20+
21+
function() {
22+
activePage = $.mobile.activePage;
23+
//bring up the dialog
24+
$( "#dialog-no-hash-link" ).click();
25+
},
26+
27+
function() {
28+
// make sure the dialog came up
29+
ok( $( "#dialog-no-hash" ).is( ":visible" ), "dialog showed up" );
30+
31+
// close the dialog
32+
$( "#dialog-no-hash a" ).click();
33+
},
34+
35+
function() {
36+
ok( !$( "#dialog-no-hash" ).is( ":visible" ), "dialog disappeared" );
37+
ok( $.mobile.activePage[0] === activePage[0], "active page has been restored" );
38+
start();
39+
}
40+
]);
41+
});
42+
43+
})( jQuery );

0 commit comments

Comments
 (0)