Demos: Examples: Added utility for generating popup arrow CSS.

jquery-archive · Aug 13, 2013 · d08b0cb · d08b0cb
1 parent f9465f3
commit d08b0cb
Show file tree

Hide file tree

Showing 2 changed files with 185 additions and 1 deletion.
diff --git a/demos/examples/popups/arrow-size.php b/demos/examples/popups/arrow-size.php
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Popup arrow size - 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>
+
+( function( $, undefined ) {
+
+var sqrt2 = Math.sqrt( 2 ),
+	timeoutId = 0;
+
+function arrowCSS( size ) {
+	return "" +
+		".ui-popup-arrow-container {\n" +
+		"	width: " + ( 2 * size ) + "px;\n" +
+		"	height: " + ( 2 * size ) + "px;\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ui-popup-arrow-l {\n" +
+		"	left: -" + size + "px;\n" +
+		"	clip: rect(-1000px," + size + "px,2000px,-1000px);\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ui-popup-arrow-t {\n" +
+		"	top: -" + size + "px;\n" +
+		"	clip: rect(-1000px,2000px," + size + "px,-1000px);\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ui-popup-arrow-r {\n" +
+		"	right: -" + size + "px;\n" +
+		"	clip: rect(-1000px,2000px,2000px," + size + "px);\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ui-popup-arrow-b {\n" +
+		"	bottom: -" + size + "px;\n" +
+		"	clip: rect(" + size + "px,2000px,1000px,-1000px);\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow {\n" +
+		"	width: " + size * sqrt2 + "px;\n" +
+		"	height: " + size * sqrt2 + "px;\n" +
+		"	left: " + ( ( ( 2 - sqrt2 ) * size ) / 2 ) + "px;\n" +
+		"	top: " + ( ( ( 2 - sqrt2 ) * size ) / 2 ) + "px;\n" +
+		"	border-width: 1px;\n" +
+		"	border-style: solid;\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ie .ui-popup-arrow {\n" +
+		"	margin-left: -" + ( size / 3.5 ) + "px;\n" +
+		"	margin-top: -" + ( size / 3.5 ) + "px;\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-background {\n" +
+		"	width: " + ( 2 * size ) + "px;\n" +
+		"	height: " + ( 2 * size ) + "px;\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow-background {\n" +
+		"	background-position: 0 " + size + "px;\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow-background {\n" +
+		"	background-position: " + size + "px 0;\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow-background {\n" +
+		"	background-position: 0 " + size + "px;\n" +
+		"}\n" +
+		"\n" +
+		".ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow-background {\n" +
+		"	background-position: " + size + "px 0;\n" +
+		"}";
+}
+
+function updateArrowSize() {
+	var size = $( "#arrowSize" ).val(),
+		css = arrowCSS( size ),
+		pre = $( "<pre class='brush: css'>" + css + "</pre>" );
+
+	$( "#arrowCSS" ).empty().append( pre );
+	SyntaxHighlighter.highlight( {}, pre[ 0 ] );
+	timeoutId = 0;
+	if ( $.mobile.browser.oldIE && $.mobile.browser.oldIE <= 8 ) {
+		$( "#arrowStyle" )[ 0 ].styleSheet.cssText = css;
+	} else {
+		$( "#arrowStyle" ).text( css );
+	}
+	$( "#exampleArrow-l,#exampleArrow-r" ).css( "margin-top", -size );
+	$( "#exampleArrow-t,#exampleArrow-b" ).css( "margin-left", -size );
+}
+
+$.mobile.document
+	.on( "change", "#arrowSize", function( e ) {
+		if ( timeoutId ) {
+			clearTimeout( timeoutId );
+		}
+		timeoutId = setTimeout( updateArrowSize, 250 );
+	})
+	.on( "pagecreate", "#arrow-size-demo", function() {
+		updateArrowSize();
+		if ( $.mobile.browser.oldIE && $.mobile.browser.oldIE <= 8 ) {
+			$( "#exampleArrow-l,#exampleArrow-r,#exampleArrow-t,#exampleArrow-b" ).addClass( "ie" );
+		}
+	});
+
+})( jQuery );
+
+	</script>
+	<style>
+	</style>
+	<style id="arrowStyle">
+	</style>
+	<style>
+.ui-popup-arrow-container.ui-popup-arrow-l,
+.ui-popup-arrow-container.ui-popup-arrow-r {
+	top: 50%;
+}
+.ui-popup-arrow-container.ui-popup-arrow-t,
+.ui-popup-arrow-container.ui-popup-arrow-b {
+	left: 50%;
+}
+	</style>
+</head>
+<body>
+<div data-role="page" id="arrow-size-demo" 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">
+		<h1>Popup arrow size</h1>
+		<p class="jqm-intro">The size of the popup arrow can be adjusted via custom CSS. Drag the slider below and copy/paste the resulting CSS into your project. Make sure you paste it after the jQuery Mobile structure/theme CSS.</p>
+		<div style="padding: 100px;">
+			<div style="position: static;" class="ui-popup-container ui-popup-active">
+				<div class="ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all">
+					<p>This is what a popup would look like.</p>
+					<p>It contains multiple paragraphs.</p>
+					<p>Note that large arrows may not be displayed at all.</p>
+					<p>This is because their sides would "stick out" of the popup.</p>
+					<p>The arrow placement code prevents this.</p>
+					<div id="exampleArrow-l" class="ui-popup-arrow-container ui-popup-arrow-l">
+						<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
+					</div>
+					<div id="exampleArrow-r" class="ui-popup-arrow-container ui-popup-arrow-r">
+						<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
+					</div>
+					<div id="exampleArrow-t" class="ui-popup-arrow-container ui-popup-arrow-t">
+						<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
+					</div>
+					<div id="exampleArrow-b" class="ui-popup-arrow-container ui-popup-arrow-b">
+						<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<form id="arrowSizeForm">
+			<input type="range" id="arrowSize" min="5" value="10" max="90" step="1"></input>
+			<div class="ui-body-b ui-corner-all" id="arrowCSS"></div>
+		</form>
+	</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' ); ?>
+
+</div><!-- /page -->
+</body>
+</html>
diff --git a/demos/nav-examples.php b/demos/nav-examples.php
@@ -40,7 +40,7 @@
 
 <li data-section="Demo Showcase" data-filtertext="dynamic popups popup images lightbox"><a href="examples/popups/dynamic-popup.php" data-ajax="false">Dynamic popup</a></li>
 
-<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="arrow popups popover size"><a href="examples/popups/arrow-size.php" data-ajax="false">Popup arrow size</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>