MPIWGWeb: js/mpiwg.js comparison

comparison js/mpiwg.js @ 198:7515f7e51b0f

styles for flyout divs (for websites).

author	casties
date	Mon, 24 Jun 2013 18:05:04 +0200
parents	b0ed3974efbd
children	5ffb9e7167b6

comparison

equal deleted inserted replaced

-:b0ed3974efbd
+:7515f7e51b0f
 }).css('cursor', 'pointer');
 });
 /*
 * flyout divs
+*
+* currently only for div.flyout in col in row.triple.
+*
+* div.flyout contains img.flyout_open and img.flyout_close.
+*
+* div.flyout gets additional class .flying when open.
+*
+* div.folded will be shown when open.
+*
 */
 $('.flyout').each(function () {
+	// flyout target size
+	var tw = 300;
+	var th = 400;
 var $flyout = $(this);
-var parent = $flyout.parent();
+var $buttons = $flyout.find('.flyout_open, .flyout_close');
-var ph = parent.height();
-var pw = parent.width();
 // size up to parent in folded state
-var dh = ph - $flyout.outerHeight();
+var dh = $flyout.parent().height() - $flyout.outerHeight();
 if (dh > 0) {
 $flyout.height($flyout.height()+dh);
 }
+// save original size
+var ow = $flyout.width();
+var oh = $flyout.height();
+// handle click on open button
 $flyout.find('.flyout_open').on('click', function () {
-console.debug('flyout click on ', this);
 $flyout.addClass('flying');
 $flyout.css('position','absolute');
-$flyout.width(2*pw);
+$flyout.animate({'width': tw, 'height': th}, 'fast');
-$flyout.height(2*ph);
+// change open to close button
-}).css('cursor', 'pointer');
+$buttons.toggle();
+}).css('cursor', 'pointer');
+// handle click on close button
+$flyout.find('.flyout_close').on('click', function () {
+$flyout.animate({'width': ow, 'height': oh}, {
+		'duration': 'fast',
+		'complete': function () {
+$flyout.removeClass('flying');
+$flyout.css('position','relative');
+// change close to open button
+$buttons.toggle();
+		}
+});
+}).css('cursor', 'pointer');
 });
 });