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

…6186,#6187.
jquery-archive · Jul 27, 2013 · fb03c14 · fb03c14
1 parent 702af72
commit fb03c14
Show file tree

Hide file tree

Showing 3 changed files with 222 additions and 0 deletions.
diff --git a/demos/examples/popups/alignment.php b/demos/examples/popups/alignment.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>
diff --git a/demos/examples/popups/popup.alignment.js b/demos/examples/popups/popup.alignment.js
@@ -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 );
diff --git a/demos/nav-examples.php b/demos/nav-examples.php
@@ -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>