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

Commit 173a101

Browse files
committed
Page: add dialog extension
1 parent 6e7c295 commit 173a101

File tree

4 files changed

+148
-3
lines changed

4 files changed

+148
-3
lines changed

demos/intro/index.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<script src="../../js/"></script>
1414
</head>
1515
<body>
16-
<div data-role="page" class="jqm-demos" data-quicklinks="true">
16+
<div data-role="page" class="jqm-demos" data-quicklinks="true" data-dialog="true">
1717

1818
<div data-role="header" class="jqm-header">
1919
<h1 class="jqm-logo"><a href="../"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>

js/widgets/dialog.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,4 +177,4 @@ $.widget( "mobile.dialog", {
177177
})( jQuery, this );
178178
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
179179
});
180-
//>>excludeEnd("jqmBuildExclude");
180+
//>>excludeEnd("jqmBuildExclude");

js/widgets/page.dialog.js

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2+
//>>description: Displays a page as a modal dialog with inset appearance and overlay background
3+
//>>label: Dialogs
4+
//>>group: Widgets
5+
//>>css.structure: ../css/structure/jquery.mobile.dialog.css
6+
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
7+
8+
define( [ "jquery",
9+
"../jquery.mobile.widget",
10+
"./page",
11+
"../jquery.mobile.navigation" ], function( jQuery ) {
12+
//>>excludeEnd("jqmBuildExclude");
13+
(function( $, window, undefined ) {
14+
15+
$.widget( "mobile.page", $.mobile.page, {
16+
options: {
17+
18+
// Accepts left, right and none
19+
closeBtn: "left",
20+
closeBtnText: "Close",
21+
overlayTheme: "a",
22+
corners: true,
23+
dialog: false
24+
},
25+
26+
_create: function() {
27+
this._super();
28+
if( this.options.dialog ){
29+
30+
if( !this.options.enhanced ) {
31+
this._enhance();
32+
}
33+
34+
$.extend( this, {
35+
_isCloseable: false,
36+
_inner: this.element.children(),
37+
_headerCloseButton: null
38+
});
39+
40+
if( !this.options.enhanced ) {
41+
this._setCloseBtn( this.options.closeBtn );
42+
}
43+
}
44+
},
45+
46+
_enhance: function() {
47+
// 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+
}));
56+
},
57+
58+
_setOptions: function( options ) {
59+
var closeButtonLocation, closeButtonText,
60+
currentOpts = this.options;
61+
62+
if ( options.corners !== undefined ) {
63+
this._inner.toggleClass( "ui-corner-all", !!options.corners );
64+
}
65+
66+
if ( options.overlayTheme !== undefined ) {
67+
if ( $.mobile.activePage[ 0 ] === this.element[ 0 ] ) {
68+
currentOpts.overlayTheme = options.overlayTheme;
69+
this._handlePageBeforeShow();
70+
}
71+
}
72+
73+
if ( options.closeBtnText !== undefined ) {
74+
closeButtonLocation = currentOpts.closeBtn;
75+
closeButtonText = options.closeBtnText;
76+
}
77+
78+
if ( options.closeBtn !== undefined ) {
79+
closeButtonLocation = options.closeBtn;
80+
}
81+
82+
if ( closeButtonLocation ) {
83+
this._setCloseBtn( closeButtonLocation, closeButtonText );
84+
}
85+
86+
this._super( options );
87+
},
88+
89+
_setCloseBtn: function( location, text ) {
90+
var dst,
91+
btn = this._headerCloseButton;
92+
93+
// Sanitize value
94+
location = "left" === location ? "left" : "right" === location ? "right" : "none";
95+
96+
if ( "none" === location ) {
97+
if ( btn ) {
98+
btn.remove();
99+
btn = null;
100+
}
101+
} else if ( btn ) {
102+
btn.removeClass( "ui-btn-left ui-btn-right" ).addClass( "ui-btn-" + location );
103+
if ( text ) {
104+
btn.text( text );
105+
}
106+
} else {
107+
dst = this._inner.find( ":jqmData(role='header')" ).first();
108+
btn = $( "<a></a>", {
109+
"role": "button",
110+
"href": "#",
111+
"class": "ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-" + location
112+
})
113+
.text( text || this.options.closeBtnText || "" )
114+
.prependTo( dst );
115+
this._on( btn, { click: "close" } );
116+
}
117+
118+
this._headerCloseButton = btn;
119+
},
120+
121+
// Close method goes back in history
122+
close: function() {
123+
var idx, dst, hist = $.mobile.navigate.history;
124+
125+
if ( $.mobile.hashListeningEnabled && hist.activeIndex > 0 ) {
126+
$.mobile.back();
127+
} else {
128+
idx = Math.max( 0, hist.activeIndex - 1 );
129+
dst = hist.stack[ idx ].pageUrl || hist.stack[ idx ].url;
130+
hist.previousIndex = hist.activeIndex;
131+
hist.activeIndex = idx;
132+
if ( !$.mobile.path.isPath( dst ) ) {
133+
dst = $.mobile.path.makeUrlAbsolute( "#" + dst );
134+
}
135+
136+
$.mobile.changePage( dst, { direction: "back", changeHash: false, fromHashChange: true } );
137+
}
138+
}
139+
});
140+
141+
})( jQuery, this );
142+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
143+
});
144+
//>>excludeEnd("jqmBuildExclude");

js/widgets/page.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ $.widget( "mobile.page", {
3939

4040
// Deprecated in 1.4 remove in 1.5
4141
keepNativeDefault: $.mobile.keepNative,
42-
contentTheme: null
42+
contentTheme: null,
43+
enhanced: false
4344
},
4445

4546
// DEPRECATED for > 1.4

0 commit comments

Comments
 (0)