+++ /dev/null
-if(!dojo._hasResource["dojox.widget.FisheyeList"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
-dojo._hasResource["dojox.widget.FisheyeList"] = true;
-dojo.provide("dojox.widget.FisheyeList");
-
-dojo.require("dijit._Widget");
-dojo.require("dijit._Templated");
-dojo.require("dijit._Container");
-
-dojo.declare("dojox.widget.FisheyeList", [dijit._Widget, dijit._Templated, dijit._Container], {
- // summary:
- // Menu similar to the fish eye menu on the Mac OS
- // example:
- // | <div dojoType="FisheyeList"
- // | itemWidth="40" itemHeight="40"
- // | itemMaxWidth="150" itemMaxHeight="150"
- // | orientation="horizontal"
- // | effectUnits="2"
- // | itemPadding="10"
- // | attachEdge="center"
- // | labelEdge="bottom">
- // |
- // | <div dojoType="FisheyeListItem"
- // | id="item1"
- // | onclick="alert('click on' + this.label + '(from widget id ' + this.widgetId + ')!');"
- // | label="Item 1"
- // | iconSrc="images/fisheye_1.png">
- // | </div>
- // | ...
- // | </div>
- //
- constructor: function(){
- //
- // TODO
- // fix really long labels in vertical mode
- //
-
- this.pos = {'x': -1, 'y': -1}; // current cursor position, relative to the grid
-
- // for conservative trigger mode, when triggered, timerScale is gradually increased from 0 to 1
- this.timerScale = 1.0;
-
- },
-
- EDGE: {
- CENTER: 0,
- LEFT: 1,
- RIGHT: 2,
- TOP: 3,
- BOTTOM: 4
- },
-
- templateString: '<div class="dojoxFisheyeListBar" dojoAttachPoint="containerNode"></div>',
-
- snarfChildDomOutput: true,
-
- // itemWidth: Integer
- // width of menu item (in pixels) in it's dormant state (when the mouse is far away)
- itemWidth: 40,
-
- // itemHeight: Integer
- // height of menu item (in pixels) in it's dormant state (when the mouse is far away)
- itemHeight: 40,
-
- // itemMaxWidth: Integer
- // width of menu item (in pixels) in it's fully enlarged state (when the mouse is directly over it)
- itemMaxWidth: 150,
-
- // itemMaxHeight: Integer
- // height of menu item (in pixels) in it's fully enlarged state (when the mouse is directly over it)
- itemMaxHeight: 150,
-
- imgNode: null,
-
- // orientation: String
- // orientation of the menu, either "horizontal" or "vertical"
- orientation: 'horizontal',
-
- // isFixed: Boolean
- // toggle to enable additional listener (window scroll) if FisheyeList is in a fixed postion
- isFixed: false,
-
- // conservativeTrigger: Boolean
- // if true, don't start enlarging menu items until mouse is over an image;
- // if false, start enlarging menu items as the mouse moves near them.
- conservativeTrigger: false,
-
- // effectUnits: Number
- // controls how much reaction the menu makes, relative to the distance of the mouse from the menu
- effectUnits: 2,
-
- // itemPadding: Integer
- // padding (in pixels) betweeen each menu item
- itemPadding: 10,
-
- // attachEdge: String
- // controls the border that the menu items don't expand past;
- // for example, if set to "top", then the menu items will drop downwards as they expand.
- // values
- // "center", "left", "right", "top", "bottom".
- attachEdge: 'center',
-
- // labelEdge: String
- // controls were the labels show up in relation to the menu item icons
- // values
- // "center", "left", "right", "top", "bottom".
- labelEdge: 'bottom',
-
- postCreate: function(){
- var e = this.EDGE;
- dojo.setSelectable(this.domNode, false);
-
- var isHorizontal = this.isHorizontal = (this.orientation == 'horizontal');
- this.selectedNode = -1;
-
- this.isOver = false;
- this.hitX1 = -1;
- this.hitY1 = -1;
- this.hitX2 = -1;
- this.hitY2 = -1;
-
- //
- // only some edges make sense...
- //
- this.anchorEdge = this._toEdge(this.attachEdge, e.CENTER);
- this.labelEdge = this._toEdge(this.labelEdge, e.TOP);
-
- if(this.labelEdge == e.CENTER){ this.labelEdge = e.TOP; }
-
- if(isHorizontal){
- if(this.anchorEdge == e.LEFT){ this.anchorEdge = e.CENTER; }
- if(this.anchorEdge == e.RIGHT){ this.anchorEdge = e.CENTER; }
- if(this.labelEdge == e.LEFT){ this.labelEdge = e.TOP; }
- if(this.labelEdge == e.RIGHT){ this.labelEdge = e.TOP; }
- }else{
- if(this.anchorEdge == e.TOP){ this.anchorEdge = e.CENTER; }
- if(this.anchorEdge == e.BOTTOM){ this.anchorEdge = e.CENTER; }
- if(this.labelEdge == e.TOP){ this.labelEdge = e.LEFT; }
- if(this.labelEdge == e.BOTTOM){ this.labelEdge = e.LEFT; }
- }
-
- //
- // figure out the proximity size
- //
- var effectUnits = this.effectUnits;
- this.proximityLeft = this.itemWidth * (effectUnits - 0.5);
- this.proximityRight = this.itemWidth * (effectUnits - 0.5);
- this.proximityTop = this.itemHeight * (effectUnits - 0.5);
- this.proximityBottom = this.itemHeight * (effectUnits - 0.5);
-
- if(this.anchorEdge == e.LEFT){
- this.proximityLeft = 0;
- }
- if(this.anchorEdge == e.RIGHT){
- this.proximityRight = 0;
- }
- if(this.anchorEdge == e.TOP){
- this.proximityTop = 0;
- }
- if(this.anchorEdge == e.BOTTOM){
- this.proximityBottom = 0;
- }
- if(this.anchorEdge == e.CENTER){
- this.proximityLeft /= 2;
- this.proximityRight /= 2;
- this.proximityTop /= 2;
- this.proximityBottom /= 2;
- }
- },
-
- startup: function(){
- // summary: create our connections and setup our FisheyeList
- this.children = this.getChildren();
- //original postCreate() --tk
- this._initializePositioning();
-
- //
- // in liberal trigger mode, activate menu whenever mouse is close
- //
- if(!this.conservativeTrigger){
- this._onMouseMoveHandle = dojo.connect(document.documentElement, "onmousemove", this, "_onMouseMove");
- }
- if (this.isFixed){
- this._onScrollHandle = dojo.connect(document,"onscroll",this,"_onScroll");
- }
-
- // Deactivate the menu if mouse is moved off screen (doesn't work for FF?)
- this._onMouseOutHandle = dojo.connect(document.documentElement, "onmouseout", this, "_onBodyOut");
- this._addChildHandle = dojo.connect(this, "addChild", this, "_initializePositioning");
- this._onResizeHandle = dojo.connect(window,"onresize", this, "_initializePositioning");
- },
-
- _initializePositioning: function(){
- this.itemCount = this.children.length;
-
- this.barWidth = (this.isHorizontal ? this.itemCount : 1) * this.itemWidth;
- this.barHeight = (this.isHorizontal ? 1 : this.itemCount) * this.itemHeight;
-
- this.totalWidth = this.proximityLeft + this.proximityRight + this.barWidth;
- this.totalHeight = this.proximityTop + this.proximityBottom + this.barHeight;
-
- //
- // calculate effect ranges for each item
- //
-
- for(var i=0; i<this.children.length; i++){
-
- this.children[i].posX = this.itemWidth * (this.isHorizontal ? i : 0);
- this.children[i].posY = this.itemHeight * (this.isHorizontal ? 0 : i);
-
- this.children[i].cenX = this.children[i].posX + (this.itemWidth / 2);
- this.children[i].cenY = this.children[i].posY + (this.itemHeight / 2);
-
- var isz = this.isHorizontal ? this.itemWidth : this.itemHeight;
- var r = this.effectUnits * isz;
- var c = this.isHorizontal ? this.children[i].cenX : this.children[i].cenY;
- var lhs = this.isHorizontal ? this.proximityLeft : this.proximityTop;
- var rhs = this.isHorizontal ? this.proximityRight : this.proximityBottom;
- var siz = this.isHorizontal ? this.barWidth : this.barHeight;
-
- var range_lhs = r;
- var range_rhs = r;
-
- if(range_lhs > c+lhs){ range_lhs = c+lhs; }
- if(range_rhs > (siz-c+rhs)){ range_rhs = siz-c+rhs; }
-
- this.children[i].effectRangeLeft = range_lhs / isz;
- this.children[i].effectRangeRght = range_rhs / isz;
-
- //dojo.debug('effect range for '+i+' is '+range_lhs+'/'+range_rhs);
- }
-
- //
- // create the bar
- //
- this.domNode.style.width = this.barWidth + 'px';
- this.domNode.style.height = this.barHeight + 'px';
-
- //
- // position the items
- //
- for(var i=0; i<this.children.length; i++){
- var itm = this.children[i];
- var elm = itm.domNode;
- elm.style.left = itm.posX + 'px';
- elm.style.top = itm.posY + 'px';
- elm.style.width = this.itemWidth + 'px';
- elm.style.height = this.itemHeight + 'px';
-
- itm.imgNode.style.left = this.itemPadding+'%';
- itm.imgNode.style.top = this.itemPadding+'%';
- itm.imgNode.style.width = (100 - 2 * this.itemPadding) + '%';
- itm.imgNode.style.height = (100 - 2 * this.itemPadding) + '%';
- }
-
- //
- // calc the grid
- //
- this._calcHitGrid();
- },
-
- _overElement: function(/* DomNode|String */node, /* Event */e){
- // summary:
- // Returns whether the mouse is over the passed element.
- // Node: Must must be display:block (ie, not a <span>)
- node = dojo.byId(node);
- var mouse = {x: e.pageX, y: e.pageY};
- var bb = dojo._getBorderBox(node);
- var absolute = dojo.coords(node, true);
- var top = absolute.y;
- var bottom = top + bb.h;
- var left = absolute.x;
- var right = left + bb.w;
-
- return (mouse.x >= left
- && mouse.x <= right
- && mouse.y >= top
- && mouse.y <= bottom
- ); // boolean
- },
-
- _onBodyOut: function(/*Event*/ e){
- // clicking over an object inside of body causes this event to fire; ignore that case
- if( this._overElement(dojo.body(), e) ){
- return;
- }
- this._setDormant(e);
- },
-
- _setDormant: function(/*Event*/ e){
- // summary: called when mouse moves out of menu's range
-
- if(!this.isOver){ return; } // already dormant?
- this.isOver = false;
-
- if(this.conservativeTrigger){
- // user can't re-trigger the menu expansion
- // until he mouses over a icon again
- dojo.disconnect(this._onMouseMoveHandle);
- }
- this._onGridMouseMove(-1, -1);
- },
-
- _setActive: function(/*Event*/ e){
- // summary: called when mouse is moved into menu's range
-
- if(this.isOver){ return; } // already activated?
- this.isOver = true;
-
- if(this.conservativeTrigger){
- // switch event handlers so that we handle mouse events from anywhere near
- // the menu
- this._onMouseMoveHandle = dojo.connect(document.documentElement, "onmousemove", this, "_onMouseMove");
-
- this.timerScale=0.0;
-
- // call mouse handler to do some initial necessary calculations/positioning
- this._onMouseMove(e);
-
- // slowly expand the icon size so it isn't jumpy
- this._expandSlowly();
- }
- },
-
- _onMouseMove: function(/*Event*/ e){
- // summary: called when mouse is moved
- if( (e.pageX >= this.hitX1) && (e.pageX <= this.hitX2) &&
- (e.pageY >= this.hitY1) && (e.pageY <= this.hitY2) ){
- if(!this.isOver){
- this._setActive(e);
- }
- this._onGridMouseMove(e.pageX-this.hitX1, e.pageY-this.hitY1);
- }else{
- if(this.isOver){
- this._setDormant(e);
- }
- }
- },
-
- _onScroll: function(){
- this._calcHitGrid();
- },
-
- onResized: function(){
- this._calcHitGrid();
- },
-
- _onGridMouseMove: function(x, y){
- // summary: called when mouse is moved in the vicinity of the menu
- this.pos = {x:x, y:y};
- this._paint();
- },
-
- _paint: function(){
- var x=this.pos.x;
- var y=this.pos.y;
-
- if(this.itemCount <= 0){ return; }
-
- //
- // figure out our main index
- //
- var pos = this.isHorizontal ? x : y;
- var prx = this.isHorizontal ? this.proximityLeft : this.proximityTop;
- var siz = this.isHorizontal ? this.itemWidth : this.itemHeight;
- var sim = this.isHorizontal ?
- (1.0-this.timerScale)*this.itemWidth + this.timerScale*this.itemMaxWidth :
- (1.0-this.timerScale)*this.itemHeight + this.timerScale*this.itemMaxHeight ;
-
- var cen = ((pos - prx) / siz) - 0.5;
- var max_off_cen = (sim / siz) - 0.5;
-
- if(max_off_cen > this.effectUnits){ max_off_cen = this.effectUnits; }
-
- //
- // figure out our off-axis weighting
- //
- var off_weight = 0;
-
- if(this.anchorEdge == this.EDGE.BOTTOM){
- var cen2 = (y - this.proximityTop) / this.itemHeight;
- off_weight = (cen2 > 0.5) ? 1 : y / (this.proximityTop + (this.itemHeight / 2));
- }
- if(this.anchorEdge == this.EDGE.TOP){
- var cen2 = (y - this.proximityTop) / this.itemHeight;
- off_weight = (cen2 < 0.5) ? 1 : (this.totalHeight - y) / (this.proximityBottom + (this.itemHeight / 2));
- }
- if(this.anchorEdge == this.EDGE.RIGHT){
- var cen2 = (x - this.proximityLeft) / this.itemWidth;
- off_weight = (cen2 > 0.5) ? 1 : x / (this.proximityLeft + (this.itemWidth / 2));
- }
- if(this.anchorEdge == this.EDGE.LEFT){
- var cen2 = (x - this.proximityLeft) / this.itemWidth;
- off_weight = (cen2 < 0.5) ? 1 : (this.totalWidth - x) / (this.proximityRight + (this.itemWidth / 2));
- }
- if(this.anchorEdge == this.EDGE.CENTER){
- if(this.isHorizontal){
- off_weight = y / (this.totalHeight);
- }else{
- off_weight = x / (this.totalWidth);
- }
-
- if(off_weight > 0.5){
- off_weight = 1 - off_weight;
- }
-
- off_weight *= 2;
- }
-
- //
- // set the sizes
- //
- for(var i=0; i<this.itemCount; i++){
- var weight = this._weighAt(cen, i);
- if(weight < 0){weight = 0;}
- this._setItemSize(i, weight * off_weight);
- }
-
- //
- // set the positions
- //
-
- var main_p = Math.round(cen);
- var offset = 0;
-
- if(cen < 0){
-
- main_p = 0;
-
- }else if(cen > this.itemCount - 1){
-
- main_p = this.itemCount -1;
-
- }else{
-
- offset = (cen - main_p) * ((this.isHorizontal ? this.itemWidth : this.itemHeight) - this.children[main_p].sizeMain);
- }
-
- this._positionElementsFrom(main_p, offset);
- },
-
- _weighAt: function(/*Integer*/ cen, /*Integer*/ i){
- var dist = Math.abs(cen - i);
- var limit = ((cen - i) > 0) ? this.children[i].effectRangeRght : this.children[i].effectRangeLeft;
- return (dist > limit) ? 0 : (1 - dist / limit); // Integer
- },
-
- _setItemSize: function(p, scale){
- scale *= this.timerScale;
- var w = Math.round(this.itemWidth + ((this.itemMaxWidth - this.itemWidth ) * scale));
- var h = Math.round(this.itemHeight + ((this.itemMaxHeight - this.itemHeight) * scale));
-
- if(this.isHorizontal){
-
- this.children[p].sizeW = w;
- this.children[p].sizeH = h;
-
- this.children[p].sizeMain = w;
- this.children[p].sizeOff = h;
-
- var y = 0;
- if(this.anchorEdge == this.EDGE.TOP){
- y = (this.children[p].cenY - (this.itemHeight / 2));
- }else if(this.anchorEdge == this.EDGE.BOTTOM){
- y = (this.children[p].cenY - (h - (this.itemHeight / 2)));
- }else{
- y = (this.children[p].cenY - (h / 2));
- }
-
- this.children[p].usualX = Math.round(this.children[p].cenX - (w / 2));
- this.children[p].domNode.style.top = y + 'px';
- this.children[p].domNode.style.left = this.children[p].usualX + 'px';
-
- }else{
-
- this.children[p].sizeW = w;
- this.children[p].sizeH = h;
-
- this.children[p].sizeOff = w;
- this.children[p].sizeMain = h;
-
- var x = 0;
- if(this.anchorEdge == this.EDGE.LEFT){
- x = this.children[p].cenX - (this.itemWidth / 2);
- }else if (this.anchorEdge == this.EDGE.RIGHT){
- x = this.children[p].cenX - (w - (this.itemWidth / 2));
- }else{
- x = this.children[p].cenX - (w / 2);
- }
-
- this.children[p].domNode.style.left = x + 'px';
- this.children[p].usualY = Math.round(this.children[p].cenY - (h / 2));
-
- this.children[p].domNode.style.top = this.children[p].usualY + 'px';
- }
-
- this.children[p].domNode.style.width = w + 'px';
- this.children[p].domNode.style.height = h + 'px';
-
- if(this.children[p].svgNode){
- this.children[p].svgNode.setSize(w, h);
- }
- },
-
- _positionElementsFrom: function(p, offset){
- var pos = 0;
-
- if(this.isHorizontal){
- pos = Math.round(this.children[p].usualX + offset);
- this.children[p].domNode.style.left = pos + 'px';
- }else{
- pos = Math.round(this.children[p].usualY + offset);
- this.children[p].domNode.style.top = pos + 'px';
- }
- this._positionLabel(this.children[p]);
-
- // position before
- var bpos = pos;
- for(var i=p-1; i>=0; i--){
- bpos -= this.children[i].sizeMain;
-
- if (this.isHorizontal){
- this.children[i].domNode.style.left = bpos + 'px';
- }else{
- this.children[i].domNode.style.top = bpos + 'px';
- }
- this._positionLabel(this.children[i]);
- }
-
- // position after
- var apos = pos;
- for(var i=p+1; i<this.itemCount; i++){
- apos += this.children[i-1].sizeMain;
- if(this.isHorizontal){
- this.children[i].domNode.style.left = apos + 'px';
- }else{
- this.children[i].domNode.style.top = apos + 'px';
- }
- this._positionLabel(this.children[i]);
- }
-
- },
-
- _positionLabel: function(itm){
- var x = 0;
- var y = 0;
-
- var mb = dojo.marginBox(itm.lblNode);
-
- if(this.labelEdge == this.EDGE.TOP){
- x = Math.round((itm.sizeW / 2) - (mb.w / 2));
- y = -mb.h;
- }
-
- if(this.labelEdge == this.EDGE.BOTTOM){
- x = Math.round((itm.sizeW / 2) - (mb.w / 2));
- y = itm.sizeH;
- }
-
- if(this.labelEdge == this.EDGE.LEFT){
- x = -mb.w;
- y = Math.round((itm.sizeH / 2) - (mb.h / 2));
- }
-
- if(this.labelEdge == this.EDGE.RIGHT){
- x = itm.sizeW;
- y = Math.round((itm.sizeH / 2) - (mb.h / 2));
- }
-
- itm.lblNode.style.left = x + 'px';
- itm.lblNode.style.top = y + 'px';
- },
-
- _calcHitGrid: function(){
-
- var pos = dojo.coords(this.domNode, true);
-
- this.hitX1 = pos.x - this.proximityLeft;
- this.hitY1 = pos.y - this.proximityTop;
- this.hitX2 = this.hitX1 + this.totalWidth;
- this.hitY2 = this.hitY1 + this.totalHeight;
-
- },
-
- _toEdge: function(inp, def){
- return this.EDGE[inp.toUpperCase()] || def;
- },
-
- _expandSlowly: function(){
- // summary: slowly expand the image to user specified max size
- if(!this.isOver){ return; }
- this.timerScale += 0.2;
- this._paint();
- if(this.timerScale<1.0){
- setTimeout(dojo.hitch(this, "_expandSlowly"), 10);
- }
- },
-
- destroyRecursive: function(){
- // need to disconnect when we destroy
- dojo.disconnect(this._onMouseOutHandle);
- dojo.disconnect(this._onMouseMoveHandle);
- dojo.disconnect(this._addChildHandle);
- if (this.isFixed) { dojo.disconnect(this._onScrollHandle); }
- dojo.disconnect(this._onResizeHandle);
- this.inherited("destroyRecursive",arguments);
- }
-});
-
-dojo.declare("dojox.widget.FisheyeListItem", [dijit._Widget, dijit._Templated, dijit._Contained], {
- /*
- * summary
- * Menu item inside of a FisheyeList.
- * See FisheyeList documentation for details on usage.
- */
-
- // iconSrc: String
- // pathname to image file (jpg, gif, png, etc.) of icon for this menu item
- iconSrc: "",
-
- // label: String
- // label to print next to the icon, when it is moused-over
- label: "",
-
- // id: String
- // will be set to the id of the orginal div element
- id: "",
-
- _blankImgPath: dojo.moduleUrl("dojo", "resources/blank.gif"),
-
- templateString:
- '<div class="dojoxFisheyeListItem">' +
- ' <img class="dojoxFisheyeListItemImage" dojoAttachPoint="imgNode" dojoAttachEvent="onmouseover:onMouseOver,onmouseout:onMouseOut,onclick:onClick">' +
- ' <div class="dojoxFisheyeListItemLabel" dojoAttachPoint="lblNode"></div>' +
- '</div>',
-
- _isNode: function(/* object */wh){
- // summary:
- // checks to see if wh is actually a node.
- if(typeof Element == "function") {
- try{
- return wh instanceof Element; // boolean
- }catch(e){}
- }else{
- // best-guess
- return wh && !isNaN(wh.nodeType); // boolean
- }
- },
-
- _hasParent: function(/*Node*/node){
- // summary:
- // returns whether or not node is a child of another node.
- return Boolean(node && node.parentNode && this._isNode(node.parentNode)); // boolean
- },
-
- postCreate: function() {
-
- // set image
- if((this.iconSrc.toLowerCase().substring(this.iconSrc.length-4)==".png")&&(dojo.isIE)&&(dojo.isIE<7)){
- /* we set the id of the new fisheyeListItem to the id of the div defined in the HTML */
- if(this._hasParent(this.imgNode) && this.id != ""){
- var parent = this.imgNode.parentNode;
- parent.setAttribute("id", this.id);
- }
- this.imgNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.iconSrc+"', sizingMethod='scale')";
- this.imgNode.src = this._blankImgPath.toString();
- }else{
- if(this._hasParent(this.imgNode) && this.id != ""){
- var parent = this.imgNode.parentNode;
- parent.setAttribute("id", this.id);
- }
- this.imgNode.src = this.iconSrc;
- }
-
- // Label
- if(this.lblNode){
- this.lblNode.appendChild(document.createTextNode(this.label));
- }
- dojo.setSelectable(this.domNode, false);
- this.startup();
- },
-
- startup: function(){
- this.parent = this.getParent();
- },
-
- onMouseOver: function(/*Event*/ e){
- // summary: callback when user moves mouse over this menu item
- // in conservative mode, don't activate the menu until user mouses over an icon
- if(!this.parent.isOver){
- this.parent._setActive(e);
- }
- if(this.label != "" ){
- dojo.addClass(this.lblNode, "dojoxFishSelected");
- this.parent._positionLabel(this);
- }
- },
-
- onMouseOut: function(/*Event*/ e){
- // summary: callback when user moves mouse off of this menu item
- dojo.removeClass(this.lblNode, "dojoxFishSelected");
- },
-
- onClick: function(/*Event*/ e){
- // summary: user overridable callback when user clicks this menu item
- }
-});
-
-}
projects / eow / blobdiff