1 /**

     2  * Interface Elements for jQuery

     3  * Fisheye menu

     4  * 

     5  * http://interface.eyecon.ro

     6  * 

     7  * Copyright (c) 2006 Stefan Petre

     8  * Dual licensed under the MIT (MIT-LICENSE.txt) 

     9  * and GPL (GPL-LICENSE.txt) licenses.

    10  *

    11  */

    12 

    13 /**

    14  * Build a Fisheye menu from a list of links

    15  *

    16  * @name Fisheye

    17  * @description Build a Fisheye menu from a list of links

    18  * @param Hash hash A hash of parameters

    19  * @option String items items selection

    20  * @option String container container element

    21  * @option Integer itemWidth the minimum width for each item

    22  * @option Integer maxWidth the maximum width for each item

    23  * @option String itemsText selection of element that contains the text for each item

    24  * @option Integer proximity the distance from element that make item to interact

    25  * @option String valign vertical alignment

    26  * @option String halign horizontal alignment

    27  *

    28  * @type jQuery

    29  * @cat Plugins/Interface

    30  * @author Stefan Petre

    31  */

    32 jQuery.iFisheye = {

    33 	

    34 	build : function(options)

    35 	{

    36 	

    37 		return this.each(

    38 			function()

    39 			{

    40 				var el = this;

    41 				el.fisheyeCfg = {

    42 					items : jQuery(options.items, this),

    43 					container: jQuery(options.container, this),

    44 					pos : jQuery.iUtil.getPosition(this),

    45 					itemWidth: options.itemWidth,

    46 					itemsText: options.itemsText,

    47 					proximity: options.proximity,

    48 					valign: options.valign,

    49 					halign: options.halign,

    50 					maxWidth : options.maxWidth

    51 				};

    52 				jQuery.iFisheye.positionContainer(el, 0);

    53 				jQuery(window).bind(

    54 					'resize',

    55 					function()

    56 					{

    57 						el.fisheyeCfg.pos = jQuery.iUtil.getPosition(el);

    58 						jQuery.iFisheye.positionContainer(el, 0);

    59 						jQuery.iFisheye.positionItems(el);

    60 					}

    61 				);

    62 				jQuery.iFisheye.positionItems(el);

    63 				el.fisheyeCfg.items

    64 					.bind(

    65 						'mouseover',

    66 						function()

    67 						{

    68 							jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'block';

    69 						}

    70 					)

    71 					.bind(

    72 						'mouseout',

    73 						function()

    74 						{

    75 							jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'none';

    76 						}

    77 					);

    78 				jQuery(document).bind(

    79 					'mousemove',

    80 					function(e)

    81 					{

    82 						var pointer = jQuery.iUtil.getPointer(e);

    83 						var toAdd = 0;

    84 						if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')

    85 							var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;

    86 						else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')	

    87 							var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();

    88 						else 

    89 							var posx = pointer.x - el.fisheyeCfg.pos.x;

    90 						var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight/2,2);

    91 						el.fisheyeCfg.items.each(

    92 							function(nr)

    93 							{

    94 								distance = Math.sqrt(

    95 									Math.pow(posx - nr*el.fisheyeCfg.itemWidth, 2)

    96 									+ posy

    97 								);

    98 								distance -= el.fisheyeCfg.itemWidth/2;

    99 								

   100 								distance = distance < 0 ? 0 : distance;

   101 								distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity : distance;

   102 								distance = el.fisheyeCfg.proximity - distance;

   103 								

   104 								extraWidth = el.fisheyeCfg.maxWidth * distance/el.fisheyeCfg.proximity;

   105 								

   106 								this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';

   107 								this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';

   108 								toAdd += extraWidth;

   109 							}

   110 						);

   111 						jQuery.iFisheye.positionContainer(el, toAdd);

   112 					}

   113 				);

   114 			}

   115 		)

   116 	},

   117 	

   118 	positionContainer : function(el, toAdd)

   119 	{

   120 		if (el.fisheyeCfg.halign)

   121 			if (el.fisheyeCfg.halign == 'center')

   122 				el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - toAdd/2 + 'px';

   123 			else if (el.fisheyeCfg.halign == 'left')

   124 				el.fisheyeCfg.container.get(0).style.left =  - toAdd/el.fisheyeCfg.items.size() + 'px';

   125 			else if (el.fisheyeCfg.halign == 'right')

   126 				el.fisheyeCfg.container.get(0).style.left =  (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) - toAdd/2 + 'px';

   127 		el.fisheyeCfg.container.get(0).style.width = el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size() + toAdd + 'px';

   128 	},

   129 	

   130 	positionItems : function(el)

   131 	{

   132 		el.fisheyeCfg.items.each(

   133 			function(nr)

   134 			{

   135 				this.style.width = el.fisheyeCfg.itemWidth + 'px';

   136 				this.style.left = el.fisheyeCfg.itemWidth * nr + 'px';

   137 			}

   138 		);

   139 	}

   140 };

   141 

   142 jQuery.fn.Fisheye = jQuery.iFisheye.build;