msssk avatar msssk committed d72739e Draft

updated to clikkit 1.0.1

Comments (0)

Files changed (1)

  * content pane will shrink and fade, increasing the visibility of the underlying page.  If the plug-in is not
  * available, jQuery's hover event will be used.</p>
  * @author Mangala Sadhu Sangeet Singh Khalsa
- * @version 1.0
+ * @version 1.0.1
  */
 
 /*global jQuery, init, clikkitHandler, shrink, expand, close, logError, TRACE, imgOnLoad, imgOnClick, imgSetSize, addLink, closeLink, closeImageFrame, setState */
 var $container,
 	$contentPane,
 	links = [],
+	shrinkOffset = 400,
+	clikkitWidth,
 	noFrameDomains = [ 'flickr.com', 'facebook.com', 'facebook.net', 'fbcdn.net', 'twitter.com' ];
 
 /**
  * @param {Number|String} [userConfig.expandedWidth=75%] The width of the clikkit pane
  * @param {Number|String} [userConfig.shrunkenWidth=50%] The width of the clikkit pane when contracted
  * @param {Number} [userConfig.shrunkenOpacity=0.6] The opacity of the clikkit pane when contracted - a value between 0 and 1
- * @param {Number|String} [userConfig.closedWidth=2] The width of the clikkit pane when closed
- * @param {Number} [userConfig.closedOpacity=0] The opacity of the clikkit pane when closed
  * @param {Number} [userConfig.closeBarColor=hsl(345, 64%, 35%)] The background color of the Close bar
  * @param {Number} [userConfig.zIndex=100] The z-index of the clikkit pane
  * @param {Boolean} [userConfig.enableHotkeys=true] If true, hotkeys will be enabled: <br>
 		expandedWidth: '75%',
 		shrunkenWidth: '50%',
 		shrunkenOpacity: 0.6,
-		closedWidth: 2,
-		closedOpacity: 0,
 		closeBarColor: 'hsl(345, 64%, 35%)',
 		zIndex: 100,
 		enableHotkeys: true
 		$border,
 		$edgeCell,
 		$closeText,
-		clikkitStyles;
+		clikkitStyles,
+		winResizeTimer;
+
+	$(window).resize( function() {
+		clearTimeout( winResizeTimer );
+		winResizeTimer = setTimeout( setDimensions, 150 );
+	});
 
 	if( $.clikkit.settings.enableHotkeys ) {
 		$(window).keyup( keyupHandler );
 
 	$( 'html > head' ).append( '<style>' + clikkitStyles + '</style>' );
 
-
 	// translucent left-border challenges:
 	// 1. div-inside-div:  inner div inherits translucence of outer div
 	// 2. div-next-to-div:  alignment is hell, pixels are all wrong!
 	$container.css({
 		borderCollapse: 'collapse',
 		borderSpacing: 0,
-		opacity: $.clikkit.settings.closedOpacity,
+		opacity: 0,
 		position: 'fixed',
-		width: $.clikkit.settings.closedWidth,
-		height: $(window).height(),
 		top: 0,
-		right: 0,
 		zIndex: $.clikkit.settings.zIndex
 	});
 
 		verticalAlign: 'top'
 	} );
 	$contentPane.mouseenter( function() {
-		if( $.clikkit.state === 'shrink' ) {
+		if( $.clikkit.state === 'shrink' && links.length ) {
 			expand();
 		}
 	} );
 	$contentPane.ImageFrame.hide();
 TRACE( 'container.height: ' + $container.height() + '; c.outer: ' + $container.outerHeight() + '; win: ' + $(window).height() );
 
+	$.clikkit.state = 'close';
+	setDimensions();
+
 	$.clikkit.isInitialized = true;
-	$.clikkit.state = 'close';
+}
+
+
+function setDimensions() {
+	var viewportWidth = $(window).width(),
+		viewportHeight = $(window).height();
+
+	if( typeof $.clikkit.settings.expandedWidth === 'string' && $.clikkit.settings.expandedWidth.charAt($.clikkit.settings.expandedWidth.length - 1) === '%' ) {
+		clikkitWidth = parseInt( $.clikkit.settings.expandedWidth );
+		clikkitWidth = parseInt( ( viewportWidth * clikkitWidth ) / 100 );
+	}
+	else {
+		clikkitWidth = parseInt( $.clikkit.settings.expandedWidth );
+	}
+
+	if( typeof $.clikkit.settings.shrunkenWidth === 'string' && $.clikkit.settings.shrunkenWidth.charAt($.clikkit.settings.shrunkenWidth.length - 1) === '%' ) {
+		shrinkOffset = parseInt( $.clikkit.settings.shrunkenWidth );
+		shrinkOffset = clikkitWidth - parseInt( ( viewportWidth * shrinkOffset ) / 100 );
+	}
+	else {
+		shrinkOffset = clikkitWidth - parseInt( $.clikkit.settings.shrunkenWidth );
+	}
+
+	$container.width( clikkitWidth );
+	$container.height( viewportHeight );
+
+	if( $.clikkit.state === 'close' ) {
+		$container.css( 'right', -clikkitWidth );
+	}
 }
 
 
 
 
 function closeLink( event ) {
+	if( $.clikkit.state === 'close' ) {
+		return;
+	}
+
 	var currentLink,
 		eventResult,
 		$linkNode,
 		closeLinkEvent;
 
 	try {
-		currentLink = links.shift();
-		$linkNode = $( currentLink.domNode );
-		$linkNode.removeData( 'clikkithref' );
-		$linkNode.removeData( 'clikkittext' );
+		if( links.length ) {
+			currentLink = links.shift();
+			$linkNode = $( currentLink.domNode );
+			$linkNode.removeData( 'clikkithref' );
+			$linkNode.removeData( 'clikkittext' );
 
-		/**
-		 * @name clikkitCloseLink
-		 * @event
-		 * @description Fires on an HTMLLinkElement before clikkit closes the link <br>
-		 * If an event handler returns a falsy value other than undefined, the link will not be closed.
-		 * @example
-		 * $( 'a' ).bind( 'clikkitCloseLink', myFunction )
-		 */
-		closeLinkEvent = $.Event( 'clikkitCloseLink' );
-		$linkNode.trigger( closeLinkEvent );
-		eventResult = closeLinkEvent.result;
-		if( closeLinkEvent.isDefaultPrevented() || (!eventResult && eventResult !== undefined) ) {
-			return false;
+			/**
+			 * @name clikkitCloseLink
+			 * @event
+			 * @description Fires on an HTMLLinkElement before clikkit closes the link <br>
+			 * If an event handler returns a falsy value other than undefined, the link will not be closed.
+			 * @example
+			 * $( 'a' ).bind( 'clikkitCloseLink', myFunction )
+			 */
+			closeLinkEvent = $.Event( 'clikkitCloseLink' );
+			$linkNode.trigger( closeLinkEvent );
+			eventResult = closeLinkEvent.result;
+			if( closeLinkEvent.isDefaultPrevented() || (!eventResult && eventResult !== undefined) ) {
+				return false;
+			}
+
+			delete currentLink.domNode;
+			delete currentLink.$iframe;
+
+			$contentPane.URL.html( 'Tj' );
+			$contentPane.Title.html( 'Tj' );
 		}
 
-		delete currentLink.domNode;
-		delete currentLink.$iframe;
-
-		$contentPane.URL.html( 'Tj' );
-		$contentPane.Title.html( 'Tj' );
-
 		if( $contentPane.ImageFrame.isActive ) {
 			closeImageFrame();
 		}
 	// only expand if current state is not 'expand'
 	if( $.clikkit.state !== 'expand' ) {
 		setState( 'expanding' );
-		$container.animate( { width: $.clikkit.settings.expandedWidth, opacity: 1 }, 200, function() {
+		$container.animate( { right: 0, opacity: 1 }, 200, function() {
 			setState( 'expand' );
 		});
 	}
 	// only shrink if current state is 'expand'
 	if( $.clikkit.state === 'expand' ) {
 		setState( 'shrinking' );
-		$container.animate( { width: $.clikkit.settings.shrunkenWidth, opacity: $.clikkit.settings.shrunkenOpacity }, 275, function() {
+		$container.animate( { right: -shrinkOffset, opacity: $.clikkit.settings.shrunkenOpacity }, 275, function() {
 			setState( 'shrink' );
 		});
 	}
  * Close and hide the clikkit pane
  */
 function close() {
-	$container.width( $.clikkit.settings.closedWidth );
-	$container.css( 'opacity', $.clikkit.settings.closedOpacity );
-	setState( 'close' );
+	$container.animate( {right: -clikkitWidth}, 175, function() {
+		setState( 'close' );
+	});
 }
 
 
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.