Skip to content
This repository

Support transparent dialog backgrounds #2380

Closed
wants to merge 2 commits into from

7 participants

Tom Clarkson Scott Jehl skang xmkevin Serban Ghita Marcel Overdijk Benjamin
Tom Clarkson

This change allows the dialog to work more like a standard dialog when the device screen is significantly larger than the dialog content.

When transitioning to a dialog, the class ui-dialog-background is added to the previous page so that it will remain visible if the background of ui-dialog is set to transparent rather than black.

The background page may also need data-dom-cache set to prevent it from being removed - there doesn't seem to be an easy way around that without significantly complicating the timer call that removes hidden pages.

Benjamin

+1

please add!

Tom Clarkson tqc closed this September 19, 2011
Tom Clarkson

Additional change unrelated to the original pull request - add swipeup/swipedown events and add a data parameter to the swipe event trigger so that multitouch gestures can be detected and handled differently if necessary.

Tom Clarkson tqc reopened this September 19, 2011
Scott Jehl

Great idea. Added to the feature requests page https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

Scott Jehl scottjehl closed this September 21, 2011
skang
skang commented March 08, 2012

Absolutely agree!!! Some users find it quite annoying (even angering) to be deprived of the context page view when a dialog shows up with empty background.

xmkevin

Yes, this is what we want. but he latest release is not support it.

Tom Clarkson
tqc commented April 19, 2012

I'm now using a modified version of this which doesn't require modifying jquery mobile itself:

http://tqcblog.com/2012/04/19/transparent-jquery-mobile-dialogs/

Serban Ghita

Hello,

Why is this closed, is is available in a dev release?

Marcel Overdijk

Also wonder if this is implemented or not. I'm using 1.1.1 but can't find anything in the docs related to transparent dialogs...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 2 unique commits by 1 author.

Sep 02, 2011
Tom Clarkson support transparent dialog backgrounds ae4b1f6
Sep 20, 2011
Tom Clarkson vertical and multitouch swipe 90c485a
This page is out of date. Refresh to see the latest.
36  js/jquery.mobile.event.js
@@ -8,7 +8,7 @@
8 8
 
9 9
 // add new event shortcuts
10 10
 $.each( ( "touchstart touchmove touchend orientationchange throttledresize " +
11  
-					"tap taphold swipe swipeleft swiperight scrollstart scrollstop" ).split( " " ), function( i, name ) {
  11
+					"tap taphold swipe swipeleft swiperight swipeup swipedown scrollstart scrollstop" ).split( " " ), function( i, name ) {
12 12
 
13 13
 	$.fn[ name ] = function( fn ) {
14 14
 		return fn ? this.bind( name, fn ) : this.trigger( name );
@@ -125,15 +125,19 @@ $.event.special.swipe = {
125 125
 
126 126
 	setup: function() {
127 127
 		var thisObject = this,
128  
-			$this = $( thisObject );
  128
+			$this = $( thisObject ),
  129
+			touching = false;
129 130
 
130 131
 		$this.bind( touchStartEvent, function( event ) {
  132
+			if (touching == true) return;
  133
+			touching = true;
131 134
 			var data = event.originalEvent.touches ?
132 135
 								event.originalEvent.touches[ 0 ] : event,
133 136
 				start = {
134 137
 					time: ( new Date() ).getTime(),
135 138
 					coords: [ data.pageX, data.pageY ],
136  
-					origin: $( event.target )
  139
+					origin: $( event.target ),
  140
+					touchcount: event.originalEvent.touches ? event.originalEvent.touches.length : 1
137 141
 				},
138 142
 				stop;
139 143
 
@@ -159,15 +163,31 @@ $.event.special.swipe = {
159 163
 
160 164
 			$this.bind( touchMoveEvent, moveHandler )
161 165
 				.one( touchStopEvent, function( event ) {
  166
+					touching=false;
162 167
 					$this.unbind( touchMoveEvent, moveHandler );
163 168
 
164 169
 					if ( start && stop ) {
  170
+						var eventdata = {start:start, stop:stop};
  171
+						
165 172
 						if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
166 173
 								Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
167 174
 								Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
168  
-
169  
-							start.origin.trigger( "swipe" )
170  
-								.trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
  175
+								
  176
+							eventdata.direction = start.coords[0] > stop.coords[ 0 ] ? "left" : "right";
  177
+								
  178
+							start.origin.trigger( "swipe", eventdata )
  179
+								.trigger( "swipe"+eventdata.direction , eventdata);
  180
+						}
  181
+						
  182
+						if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
  183
+								Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
  184
+								Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
  185
+								
  186
+							eventdata.direction = start.coords[1] > stop.coords[ 1 ] ? "up" : "down";
  187
+								
  188
+							start.origin.trigger( "swipe", eventdata )
  189
+								.trigger( "swipe"+eventdata.direction , eventdata);
  190
+							
171 191
 						}
172 192
 					}
173 193
 					start = stop = undefined;
@@ -290,7 +310,9 @@ $.each({
290 310
 	scrollstop: "scrollstart",
291 311
 	taphold: "tap",
292 312
 	swipeleft: "swipe",
293  
-	swiperight: "swipe"
  313
+	swiperight: "swipe",
  314
+	swipeup: "swipe",
  315
+	swipedown: "swipe"
294 316
 }, function( event, sourceEvent ) {
295 317
 
296 318
 	$.event.special[ event ] = {
10  js/jquery.mobile.transition.js
@@ -18,8 +18,14 @@ function css3TransitionHandler( name, reverse, $to, $from ) {
18 18
 
19 19
 			$to.add( $from ).removeClass( "out in reverse " + name );
20 20
 
21  
-			if ( $from ) {
22  
-				$from.removeClass( $.mobile.activePageClass );
  21
+			if ( $from ) {
  22
+			    $from.removeClass($.mobile.activePageClass);
  23
+			    if ($to.attr("data-role") == "dialog") {
  24
+			        $from.addClass("ui-dialog-background");
  25
+			    }
  26
+			    if ($from.attr("data-role") == "dialog") {
  27
+			        $to.removeClass("ui-dialog-background");
  28
+			    }
23 29
 			}
24 30
 
25 31
 			$to.parent().removeClass( viewportClass );
3  themes/default/jquery.mobile.dialog.css
@@ -6,4 +6,5 @@
6 6
 .ui-dialog { min-height: 480px; }
7 7
 .ui-dialog .ui-header, .ui-dialog .ui-content,  .ui-dialog .ui-footer { margin: 15px; position: relative; }
8 8
 .ui-dialog .ui-header, .ui-dialog .ui-footer { z-index: 10; width: auto; }
9  
-.ui-dialog .ui-content, .ui-dialog .ui-footer { margin-top: -15px;  }
  9
+.ui-dialog .ui-content, .ui-dialog .ui-footer { margin-top: -15px;  }
  10
+.ui-mobile .ui-dialog-background { display: block; }
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.