git.sur5r.net Git - contagged/blob - scripts/interface/fisheye.js

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * Fisheye menu\r
   4  * \r
   5  * http://interface.eyecon.ro\r
   6  * \r
   7  * Copyright (c) 2006 Stefan Petre\r
   8  * Dual licensed under the MIT (MIT-LICENSE.txt) \r
   9  * and GPL (GPL-LICENSE.txt) licenses.\r
  10  *\r
  11  */\r
  12 \r
  13 /**\r
  14  * Build a Fisheye menu from a list of links\r
  15  *\r
  16  * @name Fisheye\r
  17  * @description Build a Fisheye menu from a list of links\r
  18  * @param Hash hash A hash of parameters\r
  19  * @option String items items selection\r
  20  * @option String container container element\r
  21  * @option Integer itemWidth the minimum width for each item\r
  22  * @option Integer maxWidth the maximum width for each item\r
  23  * @option String itemsText selection of element that contains the text for each item\r
  24  * @option Integer proximity the distance from element that make item to interact\r
  25  * @option String valign vertical alignment\r
  26  * @option String halign horizontal alignment\r
  27  *\r
  28  * @type jQuery\r
  29  * @cat Plugins/Interface\r
  30  * @author Stefan Petre\r
  31  */\r
  32 jQuery.iFisheye = {\r
  33         \r
  34         build : function(options)\r
  35         {\r
  36         \r
  37                 return this.each(\r
  38                         function()\r
  39                         {\r
  40                                 var el = this;\r
  41                                 el.fisheyeCfg = {\r
  42                                         items : jQuery(options.items, this),\r
  43                                         container: jQuery(options.container, this),\r
  44                                         pos : jQuery.iUtil.getPosition(this),\r
  45                                         itemWidth: options.itemWidth,\r
  46                                         itemsText: options.itemsText,\r
  47                                         proximity: options.proximity,\r
  48                                         valign: options.valign,\r
  49                                         halign: options.halign,\r
  50                                         maxWidth : options.maxWidth\r
  51                                 };\r
  52                                 jQuery.iFisheye.positionContainer(el, 0);\r
  53                                 jQuery(window).bind(\r
  54                                         'resize',\r
  55                                         function()\r
  56                                         {\r
  57                                                 el.fisheyeCfg.pos = jQuery.iUtil.getPosition(el);\r
  58                                                 jQuery.iFisheye.positionContainer(el, 0);\r
  59                                                 jQuery.iFisheye.positionItems(el);\r
  60                                         }\r
  61                                 );\r
  62                                 jQuery.iFisheye.positionItems(el);\r
  63                                 el.fisheyeCfg.items\r
  64                                         .bind(\r
  65                                                 'mouseover',\r
  66                                                 function()\r
  67                                                 {\r
  68                                                         jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'block';\r
  69                                                 }\r
  70                                         )\r
  71                                         .bind(\r
  72                                                 'mouseout',\r
  73                                                 function()\r
  74                                                 {\r
  75                                                         jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'none';\r
  76                                                 }\r
  77                                         );\r
  78                                 jQuery(document).bind(\r
  79                                         'mousemove',\r
  80                                         function(e)\r
  81                                         {\r
  82                                                 var pointer = jQuery.iUtil.getPointer(e);\r
  83                                                 var toAdd = 0;\r
  84                                                 if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')\r
  85                                                         var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;\r
  86                                                 else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')\r
  87                                                         var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();\r
  88                                                 else \r
  89                                                         var posx = pointer.x - el.fisheyeCfg.pos.x;\r
  90                                                 var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight/2,2);\r
  91                                                 el.fisheyeCfg.items.each(\r
  92                                                         function(nr)\r
  93                                                         {\r
  94                                                                 distance = Math.sqrt(\r
  95                                                                         Math.pow(posx - nr*el.fisheyeCfg.itemWidth, 2)\r
  96                                                                         + posy\r
  97                                                                 );\r
  98                                                                 distance -= el.fisheyeCfg.itemWidth/2;\r
  99                                                                 \r
 100                                                                 distance = distance < 0 ? 0 : distance;\r
 101                                                                 distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity : distance;\r
 102                                                                 distance = el.fisheyeCfg.proximity - distance;\r
 103                                                                 \r
 104                                                                 extraWidth = el.fisheyeCfg.maxWidth * distance/el.fisheyeCfg.proximity;\r
 105                                                                 \r
 106                                                                 this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';\r
 107                                                                 this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';\r
 108                                                                 toAdd += extraWidth;\r
 109                                                         }\r
 110                                                 );\r
 111                                                 jQuery.iFisheye.positionContainer(el, toAdd);\r
 112                                         }\r
 113                                 );\r
 114                         }\r
 115                 )\r
 116         },\r
 117         \r
 118         positionContainer : function(el, toAdd)\r
 119         {\r
 120                 if (el.fisheyeCfg.halign)\r
 121                         if (el.fisheyeCfg.halign == 'center')\r
 122                                 el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - toAdd/2 + 'px';\r
 123                         else if (el.fisheyeCfg.halign == 'left')\r
 124                                 el.fisheyeCfg.container.get(0).style.left =  - toAdd/el.fisheyeCfg.items.size() + 'px';\r
 125                         else if (el.fisheyeCfg.halign == 'right')\r
 126                                 el.fisheyeCfg.container.get(0).style.left =  (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) - toAdd/2 + 'px';\r
 127                 el.fisheyeCfg.container.get(0).style.width = el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size() + toAdd + 'px';\r
 128         },\r
 129         \r
 130         positionItems : function(el)\r
 131         {\r
 132                 el.fisheyeCfg.items.each(\r
 133                         function(nr)\r
 134                         {\r
 135                                 this.style.width = el.fisheyeCfg.itemWidth + 'px';\r
 136                                 this.style.left = el.fisheyeCfg.itemWidth * nr + 'px';\r
 137                         }\r
 138                 );\r
 139         }\r
 140 };\r
 141 \r
 142 jQuery.fn.Fisheye = jQuery.iFisheye.build;