Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Support transparent dialog backgrounds #2380

Closed
wants to merge 2 commits into from

7 participants

@tqc
tqc commented

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.

@kilrogg

+1

please add!

@tqc

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.

@tqc tqc closed this
@tqc tqc reopened this
@scottjehl

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

@scottjehl scottjehl closed this
@skang

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.

@tqc

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/

@serbanghita

Hello,

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

@marceloverdijk

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
Commits on Sep 2, 2011
  1. @tqc
Commits on Sep 20, 2011
  1. @tqc

    vertical and multitouch swipe

    tqc authored
This page is out of date. Refresh to see the latest.
View
36 js/jquery.mobile.event.js
@@ -8,7 +8,7 @@
// add new event shortcuts
$.each( ( "touchstart touchmove touchend orientationchange throttledresize " +
- "tap taphold swipe swipeleft swiperight scrollstart scrollstop" ).split( " " ), function( i, name ) {
+ "tap taphold swipe swipeleft swiperight swipeup swipedown scrollstart scrollstop" ).split( " " ), function( i, name ) {
$.fn[ name ] = function( fn ) {
return fn ? this.bind( name, fn ) : this.trigger( name );
@@ -125,15 +125,19 @@ $.event.special.swipe = {
setup: function() {
var thisObject = this,
- $this = $( thisObject );
+ $this = $( thisObject ),
+ touching = false;
$this.bind( touchStartEvent, function( event ) {
+ if (touching == true) return;
+ touching = true;
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event,
start = {
time: ( new Date() ).getTime(),
coords: [ data.pageX, data.pageY ],
- origin: $( event.target )
+ origin: $( event.target ),
+ touchcount: event.originalEvent.touches ? event.originalEvent.touches.length : 1
},
stop;
@@ -159,15 +163,31 @@ $.event.special.swipe = {
$this.bind( touchMoveEvent, moveHandler )
.one( touchStopEvent, function( event ) {
+ touching=false;
$this.unbind( touchMoveEvent, moveHandler );
if ( start && stop ) {
+ var eventdata = {start:start, stop:stop};
+
if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
-
- start.origin.trigger( "swipe" )
- .trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
+
+ eventdata.direction = start.coords[0] > stop.coords[ 0 ] ? "left" : "right";
+
+ start.origin.trigger( "swipe", eventdata )
+ .trigger( "swipe"+eventdata.direction , eventdata);
+ }
+
+ if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
+ Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
+ Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
+
+ eventdata.direction = start.coords[1] > stop.coords[ 1 ] ? "up" : "down";
+
+ start.origin.trigger( "swipe", eventdata )
+ .trigger( "swipe"+eventdata.direction , eventdata);
+
}
}
start = stop = undefined;
@@ -290,7 +310,9 @@ $.each({
scrollstop: "scrollstart",
taphold: "tap",
swipeleft: "swipe",
- swiperight: "swipe"
+ swiperight: "swipe",
+ swipeup: "swipe",
+ swipedown: "swipe"
}, function( event, sourceEvent ) {
$.event.special[ event ] = {
View
10 js/jquery.mobile.transition.js
@@ -18,8 +18,14 @@ function css3TransitionHandler( name, reverse, $to, $from ) {
$to.add( $from ).removeClass( "out in reverse " + name );
- if ( $from ) {
- $from.removeClass( $.mobile.activePageClass );
+ if ( $from ) {
+ $from.removeClass($.mobile.activePageClass);
+ if ($to.attr("data-role") == "dialog") {
+ $from.addClass("ui-dialog-background");
+ }
+ if ($from.attr("data-role") == "dialog") {
+ $to.removeClass("ui-dialog-background");
+ }
}
$to.parent().removeClass( viewportClass );
View
3  themes/default/jquery.mobile.dialog.css
@@ -6,4 +6,5 @@
.ui-dialog { min-height: 480px; }
.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { margin: 15px; position: relative; }
.ui-dialog .ui-header, .ui-dialog .ui-footer { z-index: 10; width: auto; }
-.ui-dialog .ui-content, .ui-dialog .ui-footer { margin-top: -15px; }
+.ui-dialog .ui-content, .ui-dialog .ui-footer { margin-top: -15px; }
+.ui-mobile .ui-dialog-background { display: block; }
Something went wrong with that request. Please try again.