Permalink
Browse files

Demos: Add popup alignment demo featuring new popup extension. Fixes #…

…6186,#6187.
  • Loading branch information...
gabrielschulhof committed Jul 27, 2013
1 parent 702af72 commit fb03c14b4f83b77c508d4722e9473495830e2063
Showing with 222 additions and 0 deletions.
  1. +88 −0 demos/examples/popups/alignment.php
  2. +132 −0 demos/examples/popups/popup.alignment.js
  3. +2 −0 demos/nav-examples.php
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup alignment - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
<script id="extension" src="popup.alignment.js"></script>
<script id="glue">
( function( $, undefined ) {
$.mobile.document.on( "slidestop", function() {
setTimeout( function() {
$( "#alignment-example" ).popup( "option", "align",
$( "#xalign" ).val() + "," + $( "#yalign" ).val() );
}, 250 );
});
})( jQuery );
</script>
<style id="alignment-example-style">
#alignment-example {
min-width: 200px;
opacity: 0.8;
}
#open-alignment-example {
position: absolute;
width: 3em;
min-width: 3em;
max-width: 3em;
height: 1.2em;
min-height: 1.2em;
max-height: 1.2em;
margin-left: -1.5em;
margin-top: -0.6em;
left: 50%;
top: 50%;
background-color: #ffa0a0;
border-color: black;
}
</style>
</head>
<body>
<div data-role="page" id="demo-intro" class="jqm-demos">
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<div data-demo-html="true" data-demo-js="#extension" data-demo-css="#alignment-example-style">
<div data-role="popup" id="alignment-example" class="ui-content">
<form data-role="fieldset">
<div data-role="fieldcontain">
<label for="xalign">X Alignment</label>
<input type="range" id="xalign" name="xalign" value="0.5" min="-1" max="2" step="0.5"></input>
</div>
<div data-role="fieldcontain">
<label for="yalign">Y Alignment</label>
<input type="range" id="yalign" name="yalign" value="0.5" min="-1" max="2" step="0.5"></input>
</div>
</form>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="jqm-footer">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /jqm-footer -->
<?php include( '../../global-nav.php' ); ?>
<a href="#alignment-example" id="open-alignment-example" data-rel="popup" data-role="button" data-inline="true">Open</a>
</div><!-- /page -->
</body>
</html>
@@ -0,0 +1,132 @@
( function( $, undefined ) {
// Eventually, the real handleLink function should pass the coordinates and
// size of the rectangle representing the origin into popup's "open" method, or
// maybe the origin itself, instead of merely the midpoint of it. Here, the
// origin (link) is saved in lastLink, and appended to the options in the
// overridden version of open. Thankfully, JS is not multithreaded. Hooray!
var lastLink,
origHandleLink = $.mobile.popup.handleLink,
handleLink = function( link ) {
lastLink = link;
return origHandleLink.apply( this, arguments );
};
$.mobile.popup.handleLink = handleLink;
$.widget( "mobile.popup", $.mobile.popup, {
options: {
align: "0.5,0.5"
},
open: function( options ) {
this._ui.link = lastLink;
return this._super( options );
},
_closePrereqsDone: function() {
this._ui.link = null;
this._superApply( arguments );
},
_alignmentToCoeffs: function( alignment ) {
return {
originCoeff:
alignment < 0 ? 0 :
alignment <= 1 ? alignment :
1,
popupCoeff:
alignment < 0 ? alignment :
alignment <= 1 ? -alignment :
alignment - 2
};
},
_getAlignment: function() {
var ar, align;
if ( this.options.align ) {
ar = this.options.align.split( "," );
}
if ( ar && ar.length > 0 ) {
align = {
x: parseFloat( ar[ 0 ] ),
y: ar.length > 1 ? parseFloat( ar[ 1 ] ) : align.x
};
}
if ( align && !( isNaN( align.x ) || isNaN( align.y ) ) ) {
return {
x: this._alignmentToCoeffs( align.x ),
y: this._alignmentToCoeffs( align.y )
};
}
},
_setOptions: function( options ) {
var linkOffset, linkSize;
this._super( options );
if ( this._isOpen &&
options.align !== undefined &&
this._ui.link !== null &&
( this._ui.link.jqmData( "position-to" ) === "origin" ||
this.options.positionTo === "origin" ) ) {
linkOffset = this._ui.link.offset();
linkSize = {
cx: this._ui.link.outerWidth(),
cy: this._ui.link.outerHeight()
};
this._reposition({
x: linkOffset.left + linkSize.cx / 2,
y: linkOffset.top + linkSize.cy / 2,
positionTo: "origin"
});
}
},
_alignedCoord: function( start, coeffs, originSize, popupSize ) {
return (
// Start at the origin
start +
// Apply lignment
coeffs.originCoeff * originSize + coeffs.popupCoeff * popupSize +
// Resulting coordinate needs to be that of the middle of the popup, so
// add half a popup width
popupSize / 2 );
},
_desiredCoords: function( options ) {
var linkBox, offset, clampInfo,
alignment = this._getAlignment();
if ( alignment && options.positionTo === "origin" && this._ui.link ) {
// Grab the size of the popup and the offset and size of the link
clampInfo = this._clampPopupWidth( true );
clampInfo.menuSize.cx = Math.min( clampInfo.menuSize.cx, clampInfo.rc.cx );
offset = this._ui.link.offset();
linkBox = {
x: offset.left,
y: offset.top,
cx: this._ui.link.outerWidth(),
cy: this._ui.link.outerHeight()
};
// Determine the desired coordinates of the middle of the popup
options.x = this._alignedCoord( linkBox.x, alignment.x, linkBox.cx, clampInfo.menuSize.cx );
options.y = this._alignedCoord( linkBox.y, alignment.y, linkBox.cy, clampInfo.menuSize.cy );
}
return this._super( options );
}
});
})( jQuery );
View
@@ -43,6 +43,8 @@
<li data-section="Demo Showcase" data-filtertext="arrow popups popover"><a href="examples/popups/arrow.php" data-ajax="false">Popup with arrow</a></li>
<li data-section="Demo Showcase" data-filtertext="popups popup position alignment"><a href="examples/popups/alignment.php" data-ajax="false">Popup alignment</a></li>
<li data-role="list-divider">Responsive Tables</li>
<li data-section="Demo Showcase" data-filtertext="responsive tables reflow stack custom styles"><a href="examples/tables/movie-list.php" data-ajax="false">Reflow: Custom styles</a></li>

0 comments on commit fb03c14

Please sign in to comment.