Permalink
Browse files

Page: add enhanced option for page and tests for dialog extension

  • Loading branch information...
arschmitz committed Aug 14, 2013
1 parent 4c54326 commit 702a13f218ef5f37da0313ca90356216e67d861d
View
@@ -44,15 +44,19 @@ $.widget( "mobile.page", $.mobile.page, {
},
_enhance: function() {
this._super();
// Class the markup for dialog styling and wrap interior
this.element.addClass( "ui-dialog" )
.wrapInner( $( "<div/>", {
// ARIA role
"role" : "dialog",
"class" : "ui-dialog-contain ui-overlay-shadow" +
( this.options.corners ? " ui-corner-all" : "" )
}));
if( this.options.dialog ){
this.element.addClass( "ui-dialog" )
.wrapInner( $( "<div/>", {
// ARIA role
"role" : "dialog",
"class" : "ui-dialog-contain ui-overlay-shadow" +
( this.options.corners ? " ui-corner-all" : "" )
}));
}
},
_setOptions: function( options ) {
View
@@ -51,13 +51,31 @@ $.widget( "mobile.page", {
},
_create: function() {
var attrPrefix = "data-" + $.mobile.ns,
self = this;
// If false is returned by the callbacks do not create the page
if ( this._trigger( "beforecreate" ) === false ) {
return false;
}
if ( !this.options.enhanced ) {
this._enhance();
}
this._on( this.element, {
pagebeforehide: "removeContainerBackground",
pagebeforeshow: "_handlePageBeforeShow"
});
this.element.enhanceWithin();
// Dialog widget is deprecated in 1.4 remove this in 1.5
if( $.mobile.getAttribute( this.element[0], "role" ) === "dialog" && $.mobile.dialog ){
this.element.dialog();
}
},
_enhance: function (){
var attrPrefix = "data-" + $.mobile.ns,
self = this;
if ( this.options.role ) {
this.element.attr( "data-" + $.mobile.ns + "role", this.options.role );
}
@@ -66,10 +84,7 @@ $.widget( "mobile.page", {
.attr( "tabindex", "0" )
.addClass( "ui-page ui-page-theme-" + this.options.theme );
this._on( this.element, {
pagebeforehide: "removeContainerBackground",
pagebeforeshow: "_handlePageBeforeShow"
});
// Manipulation of content os Deprecated as of 1.4 remove in 1.5
this.element.find( "[" + attrPrefix + "role='content']" ).each( function() {
var $this = $( this ),
theme = this.getAttribute( attrPrefix + "theme" ) || undefined;
@@ -81,12 +96,6 @@ $.widget( "mobile.page", {
// Add ARIA role
$this.attr( "role", "main" ).addClass( "ui-content" );
});
this.element.enhanceWithin();
if( $.mobile.getAttribute( this.element[0], "role" ) === "dialog" && $.mobile.dialog ){
this.element.dialog();
}
},
bindRemove: function( callback ) {
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-nstest-role="dialog" id="dialog-no-hash">
<div data-nstest-role="header">
<h1>No-hash dialog test</h1>
</div>
<div data-nstest-role="content">
<p>Content</p>
</div>
</div>
</body>
</html>
@@ -0,0 +1,23 @@
(function($) {
asyncTest( "Returning from a dialog results in the page from which it opened", function() {
expect( 2 );
$.testHelper.pageSequence([
function() {
$( "#openBasicDialog" ).click();
},
function() {
ok( $.mobile.activePage.attr( "id" ) === "basicDialog", "Basic dialog has opened" );
$( "a", $.mobile.activePage[ 0 ] ).click();
},
function() {
ok( $.mobile.activePage.attr( "id" ) === "basicTestPage", "Active page is original page" );
start();
}
]);
});
})( jQuery );
@@ -0,0 +1,191 @@
/*
* mobile dialog unit tests
*/
(function($) {
var home = $.mobile.path.parseUrl(location.pathname).directory,
homeWithSearch = home + location.search;
module( "jquery.mobile.dialog.js", {
setup: function() {
$.mobile.page.prototype.options.contentTheme = "d";
$.testHelper.navReset( homeWithSearch );
}
});
asyncTest( "Test option data-close-btn", function() {
expect( 7 );
$.testHelper.pageSequence([
function() {
// bring up the dialog
$( "#close-btn-test-link" ).click();
},
function() {
var a = $( "#close-btn-test .ui-header a" );
deepEqual( a.length, 0, "Initially, the dialog header has no anchor elements (option value 'none')" );
$( "#close-btn-test" ).page( "option", "closeBtn", "left" );
a = $( "#close-btn-test .ui-header a" );
deepEqual( a.length, 1, "The dialog header has eactly one anchor element when the option value is set to 'left'" );
ok( a.hasClass( "ui-btn-left" ), "The close button has class ui-btn-left when the closeBtn option is set to 'left'" );
deepEqual( a.attr( "role" ), "button", "The close button has the attribute " + '"' + "role='button'" + '"' + "set" );
$( "#close-btn-test" ).page( "option", "closeBtn", "right" );
a = $( "#close-btn-test .ui-header a" );
deepEqual( a.length, 1, "The dialog header has eactly one anchor element when the option value is set to 'right'" );
ok( a.hasClass( "ui-btn-right" ), "The close button has class ui-btn-right when the closeBtn option is set to 'right'" );
deepEqual( a.attr( "role" ), "button", "The close button has the attribute " + '"' + "role='button'" + '"' + "set" );
},
function() {
start();
}
]);
});
asyncTest( "clicking dialog 'Close' button twice in quick succession does not cause the browser history to retreat by two", function() {
var correctLocation;
expect(1);
$.testHelper.pageSequence([
function() {
$.mobile.changePage( $( "#mypage" ) );
},
function() {
$.mobile.changePage( $( "#doubleCloseTestPage" ) );
},
function() {
$( "#doubleCloseTestPage a" ).click();
},
function( timedOut ) {
ok( !timedOut, "Clicking dialog 'Close' has resulted in a pagechange event" );
start();
}
]);
});
asyncTest( "dialog element with no theming", function() {
expect(5);
$.testHelper.pageSequence([
function() {
$.mobile.changePage( $( "#mypage" ) );
},
function() {
//bring up the dialog
$( "#link-a" ).click();
},
function() {
var dialog = $( "#dialog-a" );
// Assert dialog theme inheritance (issue 1375):
ok( dialog.hasClass( "ui-page-theme-a" ), "Expected explicit theme ui-page-theme-a" );
ok( $.mobile.pageContainer.hasClass( "ui-overlay-a" ), "Expected default overlay theme ui-overlay-a" );
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" );
ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" );
start();
}
]);
});
asyncTest( "dialog element with data-theme", function() {
// Reset fallback theme for content
$.mobile.page.prototype.options.contentTheme = null;
expect(6);
$.testHelper.pageSequence([
function() {
$.mobile.changePage( $( "#mypage" ) );
},
function() {
//bring up the dialog
$( "#link-b" ).click();
},
function() {
var dialog = $( "#dialog-b" );
// Assert dialog theme inheritance (issue 1375):
ok( dialog.hasClass( "ui-page-theme-e" ), "Expected explicit theme ui-page-theme-e" );
ok( !$.mobile.pageContainer.hasClass( "ui-overlay-b" ), "Expected no overlay theme ui-overlay-b" );
ok( $.mobile.pageContainer.hasClass( "ui-overlay-a" ), "Expected default overlay theme ui-overlay-a" );
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" );
ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-e" ), "Expect content to inherit from data-theme" );
ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" );
start();
}
]);
});
asyncTest( "dialog element with data-theme & data-overlay-theme", function() {
expect(5);
$.testHelper.pageSequence([
function() {
$.mobile.changePage( $( "#mypage" ) );
},
function() {
//bring up the dialog
$( "#link-c" ).click();
},
function() {
var dialog = $( "#dialog-c" );
// Assert dialog theme inheritance (issue 1375):
ok( dialog.hasClass( "ui-page-theme-e" ), "Expected explicit theme ui-page-theme-e" );
ok( $.mobile.pageContainer.hasClass( "ui-overlay-b" ), "Expected explicit overlay theme ui-overlay-b" );
ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-inherit" ), "Expected header to inherit from dialog" );
ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-inherit" ), "Expected footer to inherit from dialog" );
start();
}
]);
});
asyncTest( "page container is updated to dialog overlayTheme at pagebeforeshow", function(){
var pageTheme;
expect( 1 );
$.testHelper.pageSequence([
function() {
$.mobile.changePage( "#mypage" );
},
function() {
//bring up the dialog
$( "#foo-dialog-link" ).click();
},
function() {
pageTheme = "ui-overlay-" + $.mobile.activePage.page( "option", "overlayTheme" );
$.mobile.pageContainer.removeClass( pageTheme );
$.mobile.activePage
.bind( "pagebeforeshow", function(){
ok( $.mobile.pageContainer.hasClass( pageTheme ), "Page container has the same theme as the dialog overlayTheme on pagebeforeshow" );
start();
}).trigger( "pagebeforeshow" );
}
]);
});
})( jQuery );
@@ -0,0 +1,43 @@
/*
* mobile dialog unit tests
*/
(function($) {
module( "jquery.mobile.dialog.js", {
setup: function() {
$.mobile.page.prototype.options.contentTheme = "d";
}
});
asyncTest( "dialog opens and closes correctly when hash handling is off", function() {
var activePage;
expect( 3 );
$.testHelper.pageSequence([
function() {
$.mobile.changePage( $( "#mypage" ) );
},
function() {
activePage = $.mobile.activePage;
//bring up the dialog
$( "#dialog-no-hash-link" ).click();
},
function() {
// make sure the dialog came up
ok( $( "#dialog-no-hash" ).is( ":visible" ), "dialog showed up" );
// close the dialog
$( "#dialog-no-hash a" ).click();
},
function() {
ok( !$( "#dialog-no-hash" ).is( ":visible" ), "dialog disappeared" );
ok( $.mobile.activePage[0] === activePage[0], "active page has been restored" );
start();
}
]);
});
})( jQuery );
Oops, something went wrong.

0 comments on commit 702a13f

Please sign in to comment.