stlsmiths · May 13, 2011 05:32
diff --git a/gistfile1.js b/gistfile1.js
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Dialog Quickstart Example - Roll-up Toggle</title>

 <style type="text/css">
 /*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
 body {
 	margin:0;
 	padding:0;
 }
 </style>

 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
 <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

 <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
 <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
 <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>
 <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
 <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>


 <!--begin custom header content for this example-->
 <script type="text/javascript">
 document.documentElement.className = "yui-pe";
 </script>

 <style type="text/css">
 #example {
    height:30em;
 }

 label { 
    display:block;
    float:left;
    width:45%;
    clear:left;
 }

 .clear {
    clear:both;
 }

 #resp {
    margin:10px;
    padding:5px;
    border:1px solid #ccc;
    background:#fff;
 }

 #resp li {
    font-family:monospace
 }

 .yui-pe .yui-pe-content {
    display:none;
 }

 /*    Added new CSS to show DOWN caret or UP caret   */

 .yui-skin-sam .rollup-hide {
    background: url("http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png") no-repeat scroll -8px -952px transparent;
    cursor: pointer;
    height: 12px;
    position: absolute;
    right: 40px;
    top: 5px;
    width: 20px;
 }
 .yui-skin-sam .rollup-show {
    background: url("http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png") no-repeat scroll -8px -852px transparent;
    cursor: pointer;
    height: 12px;
    position: absolute;
    right: 40px;
    top: 5px;
    width: 20px;
 }



 </style>

 <!--end custom header content for this example-->

 </head>

 <body class="yui-skin-sam">


 <h1>Dialog Quickstart Example - Roll-up Toggle</h1>

 <div class="exampleIntro">
 	<p>This is an exact duplicate of the <a href="http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html" target="_blank">YUI 2 Dialog Quickstart Example</a> MODIFIED to provide a dialog roll-up capability.
 	<br/><br/>If you click on the "Up / Down" caret symbol in the title bar in the far right side it will toggle the Dialog body and footer visibility.
 	 
 	</p>

 </div>

 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

 <script>
 YAHOO.namespace("example.container");

 YAHOO.util.Event.onDOMReady(function () {

 	var Dom = YAHOO.util.Dom,
 		Event = YAHOO.util.Event;
 			
 	// Define various event handlers for Dialog
 	var handleSubmit = function() {
 		this.submit();
 	};
 	var handleCancel = function() {
 		this.cancel();
 	};
 	var handleSuccess = function(o) {
 		var response = o.responseText;
 		response = response.split("<!")[0];
 		document.getElementById("resp").innerHTML = response;
 	};
 	var handleFailure = function(o) {
 		alert("Submission failed: " + o.status);
 	};

    // Remove progressively enhanced content class, just before creating the module
    YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");

 	// Instantiate the Dialog
 	YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
 							{ width : "30em",
 							  fixedcenter : true,
 							  visible : false, 
 							  constraintoviewport : true,
 							  buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
 								      { text:"Cancel", handler:handleCancel } ]
 							});

 	// Validate the entries in the form to require that both first and last name are entered
 	YAHOO.example.container.dialog1.validate = function() {
 		var data = this.getData();
 		if (data.firstname == "" || data.lastname == "") {
 			alert("Please enter your first and last names.");
 			return false;
 		} else {
 			return true;
 		}
 	};

 	// Wire up the success and failure handlers
 	YAHOO.example.container.dialog1.callback = { success: handleSuccess,
 						     failure: handleFailure };
 	
 	// Render the Dialog
 	YAHOO.example.container.dialog1.render();

 	//  YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
 	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
 	
 	
 //=========    ADD Dialog Roll-up capability   =====================
 	
 	
 	YAHOO.util.Event.addListener("show", "click", function(){

 		var dl = YAHOO.example.container.dialog1;
 		dl.myVisible = true;
 		dl.show();
 	
 	//
 	//  Check if roll-up hotspot exists, 
 	//    if not, create it!
 	//
 		if ( !Dom.get( dl.id + '_viz_toggle') ) {

 		//
 		//  add a roll-up link <a> element in titlebar
 		//
 			var rollup = document.createElement("a");
 			rollup.id = dl.id + '_viz_toggle';
 			Dom.addClass( rollup, 'rollup-hide' );

 		// Insert the rollup link in the Dialog just before the header element
 			var dl_hd = Dom.getElementsByClassName( 'hd', 'div', dl.id )[0];
 			Dom.insertBefore( rollup, dl_hd );
 	
 		//
 		//  Get this dialog's Body and Footer elements
 		//
 			var bd = Dom.getElementsByClassName( 'bd', 'div', dl.id )[0];
 			var ft = Dom.getElementsByClassName( 'ft', 'div', dl.id )[0];
 		
 		// 
 		//  Attach a 'click' listener to the roll-up link to toggle the body and footer
 		//
 			Event.addListener( rollup, 'click', function( evt, obj ){
 				// note, 'this' context is the roll-up link Dom element
 				
 				if ( obj.dialog.myVisible ) {

 					Dom.setStyle(obj.body,'display','none');
 					Dom.setStyle(obj.footer,'display','none');
 					obj.dialog.myVisible = false;

 					if ( Dom.hasClass(this,'rollup-hide') ) Dom.removeClass(this,'rollup-hide') 
 					Dom.addClass(this,'rollup-show') 

 				} else {

 					Dom.setStyle(obj.body,'display','');
 					Dom.setStyle(obj.footer,'display','');
 					obj.dialog.myVisible = true;

 					if ( Dom.hasClass(this,'rollup-show') ) Dom.removeClass(this,'rollup-show') 
 					Dom.addClass(this,'rollup-hide') 

 				}
 				
 		//		if ( obj.dialog.myVisible ) {
 		//		} else {
 		//		}
 				
 			}, {dialog:dl, body:bd, footer:ft} );
 			
 		}

 	}, YAHOO.example.container.dialog1, true);

 });
 </script>

 <div>
 <button id="show">Show dialog1</button> 
 <button id="hide">Hide dialog1</button>
 </div>

 <div id="dialog1" class="yui-pe-content">
 <div class="hd">Please enter your information</div>

 <div class="bd">
 <form method="POST" action="assets/post.php">
 	<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
 	<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
 	<label for="email">E-mail:</label><input type="textbox" name="email" /> 

 	<label for="state[]">State:</label>
 	<select multiple name="state[]">
 		<option value="California">California</option>

 		<option value="New Jersey">New Jersey</option>
 		<option value="New York">New York</option>
 	</select> 

 	<div class="clear"></div>

 	<label for="radiobuttons">Radio buttons:</label>
 	<input type="radio" name="radiobuttons[]" value="1" checked/> 1
 	<input type="radio" name="radiobuttons[]" value="2" /> 2
 	
 	<div class="clear"></div>

 	<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
 	
 	<div class="clear"></div>
 		
 	<label for="textarea">Text area:</label><textarea name="textarea"></textarea>

 	<div class="clear"></div>

 	<label for="cbarray">Multi checkbox:</label>

 	<input type="checkbox" name="cbarray[]" value="1" /> 1
 	<input type="checkbox" name="cbarray[]" value="2" /> 2
 </form>
 </div>
 </div>

 <div id="resp"></div>	

 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Dialog Quickstart Example - Roll-up Toggle</title>

	<style type="text/css">
	/*margin and padding on body element
	can introduce errors in determining
	element position and are not recommended;
	we turn them off as a foundation for YUI
	CSS treatments. */
	body {
	margin:0;
	padding:0;
	}
	</style>

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/connection/connection-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>


	<!--begin custom header content for this example-->
	<script type="text/javascript">
	document.documentElement.className = "yui-pe";
	</script>

	<style type="text/css">
	#example {
	height:30em;
	}

	label {
	display:block;
	float:left;
	width:45%;
	clear:left;
	}

	.clear {
	clear:both;
	}

	#resp {
	margin:10px;
	padding:5px;
	border:1px solid #ccc;
	background:#fff;
	}

	#resp li {
	font-family:monospace
	}

	.yui-pe .yui-pe-content {
	display:none;
	}

	/* Added new CSS to show DOWN caret or UP caret */

	.yui-skin-sam .rollup-hide {
	background: url("http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png") no-repeat scroll -8px -952px transparent;
	cursor: pointer;
	height: 12px;
	position: absolute;
	right: 40px;
	top: 5px;
	width: 20px;
	}
	.yui-skin-sam .rollup-show {
	background: url("http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png") no-repeat scroll -8px -852px transparent;
	cursor: pointer;
	height: 12px;
	position: absolute;
	right: 40px;
	top: 5px;
	width: 20px;
	}



	</style>

	<!--end custom header content for this example-->

	</head>

	<body class="yui-skin-sam">


	<h1>Dialog Quickstart Example - Roll-up Toggle</h1>

	<div class="exampleIntro">
	<p>This is an exact duplicate of the <a href="http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html" target="_blank">YUI 2 Dialog Quickstart Example</a> MODIFIED to provide a dialog roll-up capability.
	<br/><br/>If you click on the "Up / Down" caret symbol in the title bar in the far right side it will toggle the Dialog body and footer visibility.

	</p>

	</div>

	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<script>
	YAHOO.namespace("example.container");

	YAHOO.util.Event.onDOMReady(function () {

	var Dom = YAHOO.util.Dom,
	Event = YAHOO.util.Event;

	// Define various event handlers for Dialog
	var handleSubmit = function() {
	this.submit();
	};
	var handleCancel = function() {
	this.cancel();
	};
	var handleSuccess = function(o) {
	var response = o.responseText;
	response = response.split("<!")[0];
	document.getElementById("resp").innerHTML = response;
	};
	var handleFailure = function(o) {
	alert("Submission failed: " + o.status);
	};

	// Remove progressively enhanced content class, just before creating the module
	YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");

	// Instantiate the Dialog
	YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
	{ width : "30em",
	fixedcenter : true,
	visible : false,
	constraintoviewport : true,
	buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
	{ text:"Cancel", handler:handleCancel } ]
	});

	// Validate the entries in the form to require that both first and last name are entered
	YAHOO.example.container.dialog1.validate = function() {
	var data = this.getData();
	if (data.firstname == "" \|\| data.lastname == "") {
	alert("Please enter your first and last names.");
	return false;
	} else {
	return true;
	}
	};

	// Wire up the success and failure handlers
	YAHOO.example.container.dialog1.callback = { success: handleSuccess,
	failure: handleFailure };

	// Render the Dialog
	YAHOO.example.container.dialog1.render();

	// YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
	YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);


	//========= ADD Dialog Roll-up capability =====================


	YAHOO.util.Event.addListener("show", "click", function(){

	var dl = YAHOO.example.container.dialog1;
	dl.myVisible = true;
	dl.show();

	//
	// Check if roll-up hotspot exists,
	// if not, create it!
	//
	if ( !Dom.get( dl.id + '_viz_toggle') ) {

	//
	// add a roll-up link <a> element in titlebar
	//
	var rollup = document.createElement("a");
	rollup.id = dl.id + '_viz_toggle';
	Dom.addClass( rollup, 'rollup-hide' );

	// Insert the rollup link in the Dialog just before the header element
	var dl_hd = Dom.getElementsByClassName( 'hd', 'div', dl.id )[0];
	Dom.insertBefore( rollup, dl_hd );

	//
	// Get this dialog's Body and Footer elements
	//
	var bd = Dom.getElementsByClassName( 'bd', 'div', dl.id )[0];
	var ft = Dom.getElementsByClassName( 'ft', 'div', dl.id )[0];

	//
	// Attach a 'click' listener to the roll-up link to toggle the body and footer
	//
	Event.addListener( rollup, 'click', function( evt, obj ){
	// note, 'this' context is the roll-up link Dom element

	if ( obj.dialog.myVisible ) {

	Dom.setStyle(obj.body,'display','none');
	Dom.setStyle(obj.footer,'display','none');
	obj.dialog.myVisible = false;

	if ( Dom.hasClass(this,'rollup-hide') ) Dom.removeClass(this,'rollup-hide')
	Dom.addClass(this,'rollup-show')

	} else {

	Dom.setStyle(obj.body,'display','');
	Dom.setStyle(obj.footer,'display','');
	obj.dialog.myVisible = true;

	if ( Dom.hasClass(this,'rollup-show') ) Dom.removeClass(this,'rollup-show')
	Dom.addClass(this,'rollup-hide')

	}

	// if ( obj.dialog.myVisible ) {
	// } else {
	// }

	}, {dialog:dl, body:bd, footer:ft} );

	}

	}, YAHOO.example.container.dialog1, true);

	});
	</script>

	<div>
	<button id="show">Show dialog1</button>
	<button id="hide">Hide dialog1</button>
	</div>

	<div id="dialog1" class="yui-pe-content">
	<div class="hd">Please enter your information</div>

	<div class="bd">
	<form method="POST" action="assets/post.php">
	<label for="firstname">First Name:</label><input type="textbox" name="firstname" />
	<label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
	<label for="email">E-mail:</label><input type="textbox" name="email" />

	<label for="state[]">State:</label>
	<select multiple name="state[]">
	<option value="California">California</option>

	<option value="New Jersey">New Jersey</option>
	<option value="New York">New York</option>
	</select>

	<div class="clear"></div>

	<label for="radiobuttons">Radio buttons:</label>
	<input type="radio" name="radiobuttons[]" value="1" checked/> 1
	<input type="radio" name="radiobuttons[]" value="2" /> 2

	<div class="clear"></div>

	<label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1

	<div class="clear"></div>

	<label for="textarea">Text area:</label><textarea name="textarea"></textarea>

	<div class="clear"></div>

	<label for="cbarray">Multi checkbox:</label>

	<input type="checkbox" name="cbarray[]" value="1" /> 1
	<input type="checkbox" name="cbarray[]" value="2" /> 2
	</form>
	</div>
	</div>

	<div id="resp"></div>

	</body>
	</html>