Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Support transparent dialog backgrounds #2380

Closed
wants to merge 2 commits into from

7 participants

Tom Clarkson Scott Jehl skang Yongqing Gao Serban Ghita Marcel Overdijk Benjamin Richter
Tom Clarkson
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.

Benjamin Richter

+1

please add!

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 closed this
Tom Clarkson tqc reopened this
Scott Jehl

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

Scott Jehl 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.

Yongqing Gao

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

Tom Clarkson

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

    vertical and multitouch swipe

    tqc authored
This page is out of date. Refresh to see the latest.
36 js/jquery.mobile.event.js
View
@@ -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 ] = {
10 js/jquery.mobile.transition.js
View
@@ -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 );
3  themes/default/jquery.mobile.dialog.css
View
@@ -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.