Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
dojo.provide("dojo.widget.FisheyeList");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.HtmlWidget");
dojo.require("dojo.html.style");
dojo.require("dojo.html.selection");
dojo.require("dojo.html.util");
dojo.require("dojo.event.*");
dojo.widget.defineWidget("dojo.widget.FisheyeList",dojo.widget.HtmlWidget,function(){
this.pos={x:-1,y:-1};
this.EDGE={CENTER:0,LEFT:1,RIGHT:2,TOP:3,BOTTOM:4};
this.timerScale=1;
},{templateString:"<div class=\"dojoHtmlFisheyeListBar\"></div>",templateCssString:".dojoHtmlFisheyeListItemLabel {\n\tfont-family: Arial, Helvetica, sans-serif;\n\tbackground-color: #eee;\n\tborder: 2px solid #666;\n\tpadding: 2px;\n\ttext-align: center;\n\tposition: absolute;\n\tdisplay: none;\n}\n\n.dojoHtmlFisheyeListItemLabel.selected {\n\tdisplay: block;\n}\n\n.dojoHtmlFisheyeListItemImage {\n\tborder: 0px;\n\tposition: absolute;\n}\n\n.dojoHtmlFisheyeListItem {\n\tposition: absolute;\n\tz-index: 2;\n}\n\n.dojoHtmlFisheyeListBar {\n\tposition: relative;\n}\n",templateCssPath:dojo.uri.moduleUri("dojo.widget","templates/FisheyeList.css"),isContainer:true,snarfChildDomOutput:true,itemWidth:40,itemHeight:40,itemMaxWidth:150,itemMaxHeight:150,orientation:"horizontal",conservativeTrigger:false,effectUnits:2,itemPadding:10,attachEdge:"center",labelEdge:"bottom",enableCrappySvgSupport:false,fillInTemplate:function(){
dojo.html.disableSelection(this.domNode);
this.isHorizontal=(this.orientation=="horizontal");
this.selectedNode=-1;
this.isOver=false;
this.hitX1=-1;
this.hitY1=-1;
this.hitX2=-1;
this.hitY2=-1;
this.anchorEdge=this._toEdge(this.attachEdge,this.EDGE.CENTER);
this.labelEdge=this._toEdge(this.labelEdge,this.EDGE.TOP);
if(this.isHorizontal&&(this.anchorEdge==this.EDGE.LEFT)){
this.anchorEdge=this.EDGE.CENTER;
}
if(this.isHorizontal&&(this.anchorEdge==this.EDGE.RIGHT)){
this.anchorEdge=this.EDGE.CENTER;
}
if(!this.isHorizontal&&(this.anchorEdge==this.EDGE.TOP)){
this.anchorEdge=this.EDGE.CENTER;
}
if(!this.isHorizontal&&(this.anchorEdge==this.EDGE.BOTTOM)){
this.anchorEdge=this.EDGE.CENTER;
}
if(this.labelEdge==this.EDGE.CENTER){
this.labelEdge=this.EDGE.TOP;
}
if(this.isHorizontal&&(this.labelEdge==this.EDGE.LEFT)){
this.labelEdge=this.EDGE.TOP;
}
if(this.isHorizontal&&(this.labelEdge==this.EDGE.RIGHT)){
this.labelEdge=this.EDGE.TOP;
}
if(!this.isHorizontal&&(this.labelEdge==this.EDGE.TOP)){
this.labelEdge=this.EDGE.LEFT;
}
if(!this.isHorizontal&&(this.labelEdge==this.EDGE.BOTTOM)){
this.labelEdge=this.EDGE.LEFT;
}
this.proximityLeft=this.itemWidth*(this.effectUnits-0.5);
this.proximityRight=this.itemWidth*(this.effectUnits-0.5);
this.proximityTop=this.itemHeight*(this.effectUnits-0.5);
this.proximityBottom=this.itemHeight*(this.effectUnits-0.5);
if(this.anchorEdge==this.EDGE.LEFT){
this.proximityLeft=0;
}
if(this.anchorEdge==this.EDGE.RIGHT){
this.proximityRight=0;
}
if(this.anchorEdge==this.EDGE.TOP){
this.proximityTop=0;
}
if(this.anchorEdge==this.EDGE.BOTTOM){
this.proximityBottom=0;
}
if(this.anchorEdge==this.EDGE.CENTER){
this.proximityLeft/=2;
this.proximityRight/=2;
this.proximityTop/=2;
this.proximityBottom/=2;
}
},postCreate:function(){
this._initializePositioning();
if(!this.conservativeTrigger){
dojo.event.connect(document.documentElement,"onmousemove",this,"_onMouseMove");
}
dojo.event.connect(document.documentElement,"onmouseout",this,"_onBodyOut");
dojo.event.connect(this,"addChild",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;
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 _2=this.isHorizontal?this.itemWidth:this.itemHeight;
var r=this.effectUnits*_2;
var c=this.isHorizontal?this.children[i].cenX:this.children[i].cenY;
var _5=this.isHorizontal?this.proximityLeft:this.proximityTop;
var _6=this.isHorizontal?this.proximityRight:this.proximityBottom;
var _7=this.isHorizontal?this.barWidth:this.barHeight;
var _8=r;
var _9=r;
if(_8>c+_5){
_8=c+_5;
}
if(_9>(_7-c+_6)){
_9=_7-c+_6;
}
this.children[i].effectRangeLeft=_8/_2;
this.children[i].effectRangeRght=_9/_2;
}
this.domNode.style.width=this.barWidth+"px";
this.domNode.style.height=this.barHeight+"px";
for(var i=0;i<this.children.length;i++){
var _a=this.children[i];
var _b=_a.domNode;
_b.style.left=_a.posX+"px";
_b.style.top=_a.posY+"px";
_b.style.width=this.itemWidth+"px";
_b.style.height=this.itemHeight+"px";
if(_a.svgNode){
_a.svgNode.style.position="absolute";
_a.svgNode.style.left=this.itemPadding+"%";
_a.svgNode.style.top=this.itemPadding+"%";
_a.svgNode.style.width=(100-2*this.itemPadding)+"%";
_a.svgNode.style.height=(100-2*this.itemPadding)+"%";
_a.svgNode.style.zIndex=1;
_a.svgNode.setSize(this.itemWidth,this.itemHeight);
}else{
_a.imgNode.style.left=this.itemPadding+"%";
_a.imgNode.style.top=this.itemPadding+"%";
_a.imgNode.style.width=(100-2*this.itemPadding)+"%";
_a.imgNode.style.height=(100-2*this.itemPadding)+"%";
}
}
this._calcHitGrid();
},_onBodyOut:function(e){
if(dojo.html.overElement(dojo.body(),e)){
return;
}
this._setDormant(e);
},_setDormant:function(e){
if(!this.isOver){
return;
}
this.isOver=false;
if(this.conservativeTrigger){
dojo.event.disconnect(document.documentElement,"onmousemove",this,"_onMouseMove");
}
this._onGridMouseMove(-1,-1);
},_setActive:function(e){
if(this.isOver){
return;
}
this.isOver=true;
if(this.conservativeTrigger){
dojo.event.connect(document.documentElement,"onmousemove",this,"_onMouseMove");
this.timerScale=0;
this._onMouseMove(e);
this._expandSlowly();
}
},_onMouseMove:function(e){
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);
}
}
},onResized:function(){
this._calcHitGrid();
},_onGridMouseMove:function(x,y){
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;
}
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-this.timerScale)*this.itemWidth+this.timerScale*this.itemMaxWidth:(1-this.timerScale)*this.itemHeight+this.timerScale*this.itemMaxHeight;
var cen=((pos-prx)/siz)-0.5;
var _19=(sim/siz)-0.5;
if(_19>this.effectUnits){
_19=this.effectUnits;
}
var _1a=0;
if(this.anchorEdge==this.EDGE.BOTTOM){
var _1b=(y-this.proximityTop)/this.itemHeight;
_1a=(_1b>0.5)?1:y/(this.proximityTop+(this.itemHeight/2));
}
if(this.anchorEdge==this.EDGE.TOP){
var _1b=(y-this.proximityTop)/this.itemHeight;
_1a=(_1b<0.5)?1:(this.totalHeight-y)/(this.proximityBottom+(this.itemHeight/2));
}
if(this.anchorEdge==this.EDGE.RIGHT){
var _1b=(x-this.proximityLeft)/this.itemWidth;
_1a=(_1b>0.5)?1:x/(this.proximityLeft+(this.itemWidth/2));
}
if(this.anchorEdge==this.EDGE.LEFT){
var _1b=(x-this.proximityLeft)/this.itemWidth;
_1a=(_1b<0.5)?1:(this.totalWidth-x)/(this.proximityRight+(this.itemWidth/2));
}
if(this.anchorEdge==this.EDGE.CENTER){
if(this.isHorizontal){
_1a=y/(this.totalHeight);
}else{
_1a=x/(this.totalWidth);
}
if(_1a>0.5){
_1a=1-_1a;
}
_1a*=2;
}
for(var i=0;i<this.itemCount;i++){
var _1d=this._weighAt(cen,i);
if(_1d<0){
_1d=0;
}
this._setItemSize(i,_1d*_1a);
}
var _1e=Math.round(cen);
var _1f=0;
if(cen<0){
_1e=0;
}else{
if(cen>this.itemCount-1){
_1e=this.itemCount-1;
}else{
_1f=(cen-_1e)*((this.isHorizontal?this.itemWidth:this.itemHeight)-this.children[_1e].sizeMain);
}
}
this._positionElementsFrom(_1e,_1f);
},_weighAt:function(cen,i){
var _22=Math.abs(cen-i);
var _23=((cen-i)>0)?this.children[i].effectRangeRght:this.children[i].effectRangeLeft;
return (_22>_23)?0:(1-_22/_23);
},_setItemSize:function(p,_25){
_25*=this.timerScale;
var w=Math.round(this.itemWidth+((this.itemMaxWidth-this.itemWidth)*_25));
var h=Math.round(this.itemHeight+((this.itemMaxHeight-this.itemHeight)*_25));
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,_2b){
var pos=0;
if(this.isHorizontal){
pos=Math.round(this.children[p].usualX+_2b);
this.children[p].domNode.style.left=pos+"px";
}else{
pos=Math.round(this.children[p].usualY+_2b);
this.children[p].domNode.style.top=pos+"px";
}
this._positionLabel(this.children[p]);
var _2d=pos;
for(var i=p-1;i>=0;i--){
_2d-=this.children[i].sizeMain;
if(this.isHorizontal){
this.children[i].domNode.style.left=_2d+"px";
}else{
this.children[i].domNode.style.top=_2d+"px";
}
this._positionLabel(this.children[i]);
}
var _2f=pos;
for(var i=p+1;i<this.itemCount;i++){
_2f+=this.children[i-1].sizeMain;
if(this.isHorizontal){
this.children[i].domNode.style.left=_2f+"px";
}else{
this.children[i].domNode.style.top=_2f+"px";
}
this._positionLabel(this.children[i]);
}
},_positionLabel:function(itm){
var x=0;
var y=0;
var mb=dojo.html.getMarginBox(itm.lblNode);
if(this.labelEdge==this.EDGE.TOP){
x=Math.round((itm.sizeW/2)-(mb.width/2));
y=-mb.height;
}
if(this.labelEdge==this.EDGE.BOTTOM){
x=Math.round((itm.sizeW/2)-(mb.width/2));
y=itm.sizeH;
}
if(this.labelEdge==this.EDGE.LEFT){
x=-mb.width;
y=Math.round((itm.sizeH/2)-(mb.height/2));
}
if(this.labelEdge==this.EDGE.RIGHT){
x=itm.sizeW;
y=Math.round((itm.sizeH/2)-(mb.height/2));
}
itm.lblNode.style.left=x+"px";
itm.lblNode.style.top=y+"px";
},_calcHitGrid:function(){
var pos=dojo.html.getAbsolutePosition(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(){
if(!this.isOver){
return;
}
this.timerScale+=0.2;
this._paint();
if(this.timerScale<1){
dojo.lang.setTimeout(this,"_expandSlowly",10);
}
},destroy:function(){
dojo.event.disconnect(document.documentElement,"onmouseout",this,"_onBodyOut");
dojo.event.disconnect(document.documentElement,"onmousemove",this,"_onMouseMove");
dojo.widget.FisheyeList.superclass.destroy.call(this);
}});
dojo.widget.defineWidget("dojo.widget.FisheyeListItem",dojo.widget.HtmlWidget,{iconSrc:"",svgSrc:"",caption:"",id:"",_blankImgPath:dojo.uri.moduleUri("dojo.widget","templates/images/blank.gif"),templateString:"<div class=\"dojoHtmlFisheyeListItem\">"+"  <img class=\"dojoHtmlFisheyeListItemImage\" dojoAttachPoint=\"imgNode\" dojoAttachEvent=\"onMouseOver;onMouseOut;onClick\">"+"  <div class=\"dojoHtmlFisheyeListItemLabel\" dojoAttachPoint=\"lblNode\"></div>"+"</div>",fillInTemplate:function(){
if(this.svgSrc!=""){
this.svgNode=this._createSvgNode(this.svgSrc);
this.domNode.appendChild(this.svgNode);
this.imgNode.style.display="none";
}else{
if((this.iconSrc.toLowerCase().substring(this.iconSrc.length-4)==".png")&&(dojo.render.html.ie)&&(!dojo.render.html.ie70)){
if(dojo.dom.hasParent(this.imgNode)&&this.id!=""){
var _37=this.imgNode.parentNode;
_37.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(dojo.dom.hasParent(this.imgNode)&&this.id!=""){
var _37=this.imgNode.parentNode;
_37.setAttribute("id",this.id);
}
this.imgNode.src=this.iconSrc;
}
}
if(this.lblNode){
this.lblNode.appendChild(document.createTextNode(this.caption));
}
dojo.html.disableSelection(this.domNode);
},_createSvgNode:function(src){
var elm=document.createElement("embed");
elm.src=src;
elm.type="image/svg+xml";
elm.style.width="1px";
elm.style.height="1px";
elm.loaded=0;
elm.setSizeOnLoad=false;
elm.onload=function(){
this.svgRoot=this.getSVGDocument().rootElement;
this.svgDoc=this.getSVGDocument().documentElement;
this.zeroWidth=this.svgRoot.width.baseVal.value;
this.zeroHeight=this.svgRoot.height.baseVal.value;
this.loaded=true;
if(this.setSizeOnLoad){
this.setSize(this.setWidth,this.setHeight);
}
};
elm.setSize=function(w,h){
if(!this.loaded){
this.setWidth=w;
this.setHeight=h;
this.setSizeOnLoad=true;
return;
}
this.style.width=w+"px";
this.style.height=h+"px";
this.svgRoot.width.baseVal.value=w;
this.svgRoot.height.baseVal.value=h;
var _3c=w/this.zeroWidth;
var _3d=h/this.zeroHeight;
for(var i=0;i<this.svgDoc.childNodes.length;i++){
if(this.svgDoc.childNodes[i].setAttribute){
this.svgDoc.childNodes[i].setAttribute("transform","scale("+_3c+","+_3d+")");
}
}
};
return elm;
},onMouseOver:function(e){
if(!this.parent.isOver){
this.parent._setActive(e);
}
if(this.caption!=""){
dojo.html.addClass(this.lblNode,"selected");
this.parent._positionLabel(this);
}
},onMouseOut:function(e){
dojo.html.removeClass(this.lblNode,"selected");
},onClick:function(e){
}});
New to GrepCode? Check out our FAQ X