Enhancement of the fisheye so that it can scroll

[werner.punz@…]

I enhanced the fisheye so that it can scroll you just have to define a scroller window as defined in the demo example and voila you have a scrollable window...

here are the two patches:

---

Index: . =================================================================== --- . (revision 5948) +++ . (working copy) @@ -60,7 +60,12 @@

enableCrappySvgSupport: false,

+ maxNoDisplayItems:10000, //all items + scrollerBegin: 0, //first item beginning item + visibleWindow:5, + persist: true, // save splitter positions in a cookie +

// // //

@@ -129,6 +134,16 @@

},

postCreate: function(args, frag) {

+ + if(this.persist){ + this.restoreState(); + } + if(this.visibleWindow > this.children.length) { + this.visibleWindow = this.children.length; + } + if(this.scrollerBegin > this.children.length) { + this.scrollerBegin = this.children.length - this.visibleWindow; + }

this.initializePositioning();

//

@@ -141,12 +156,42 @@

// Deactivate the menu if mouse is moved off screen (doesn't work for FF?) dojo.event.connect(document.documentElement, "onmouseout", this, "onBodyOut"); dojo.event.connect(this, "addChild", this, "initializePositioning");

+ + }, + + + onRightScroll: function(ev) { + this.scrollerBegin = (this.scrollerBegin + this.visibleWindow < this.itemCount? (this.scrollerBegin + 1): this.scrollerBegin); + this.initializePositioning(); +

},

+ onLeftScroll: function(ev) { + this.scrollerBegin = (this.scrollerBegin > 0 ? (this.scrollerBegin - 1): 0); + this.initializePositioning(); + + }, + + calcScrollerEnd : function() { + return ((this.scrollerBegin + this.visibleWindow) > this.children.length ? + this.children.length : this.scrollerBegin+this.visibleWindow); + }, +

initializePositioning: function(){

+ if(this.persist){ + this.saveState(this); + } + + +

this.itemCount = this.children.length;

- this.barWidth = (this.isHorizontal ? this.itemCount : 1) * this.itemWidth; + var scrollerEnd = this.calcScrollerEnd(); + + var barItemCount = (this.itemCount > this.maxNoDisplayItems ? this.maxNoDisplayItems: this.itemCount); + + + this.barWidth = (this.isHorizontal ? this.visibleWindow : 1) * this.itemWidth;

this.barHeight = (this.isHorizontal ? 1 : this.itemCount) * this.itemHeight;

this.totalWidth = this.proximityLeft + this.proximityRight + this.barWidth;

@@ -152,13 +197,23 @@

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.scrollerBegin); i+=1) { + this.children[i].posX = 1000; + this.children[i].posY = 1000; + } + + for(var i=scrollerEnd; i<(this.children.length); i+=1) { + this.children[i].posX = 1000; + this.children[i].posY = 1000; + } - for (var i=0; i<this.children.length; i++){ + for (var i=this.scrollerBegin; i<scrollerEnd; i+=1){ - this.children[i].posX = this.itemWidth * (this.isHorizontal ? i : 0); + this.children[i].posX = this.itemWidth * (this.isHorizontal ? (i - this.scrollerBegin) : 0);

this.children[i].posY = this.itemHeight * (this.isHorizontal ? 0 : i);

this.children[i].cenX = this.children[i].posX + (this.itemWidth / 2);

@@ -184,6 +239,8 @@

}

+ +

// // create the bar //

@@ -195,14 +252,31 @@

// // position the items //

- for (var i=0; i<this.children.length; i++){ + for(var i=0; i<this.scrollerBegin; i+=1) {

var itm = this.children[i]; var elm = itm.domNode;

- elm.style.left = itm.posX + 'px'; + //elm.style.left = 8000 + 'px'; + //elm.style.top = 8000 + 'px'; + elm.style.visibility = "hidden"; + } + + for(var i=scrollerEnd; i<(this.children.length); i+=1) { + var itm = this.children[i]; + var elm = itm.domNode; + //elm.style.left = 8000 + 'px'; + //elm.style.top = 8000 + 'px'; + elm.style.visibility = "hidden"; + } + + + for (var i=this.scrollerBegin; i<scrollerEnd; i+=1){ + 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';

- + elm.style.visibility = "visible";

if ( itm.svgNode ) {

itm.svgNode.style.position = 'absolute'; itm.svgNode.style.left = this.itemPadding+'%';

@@ -279,6 +353,7 @@

}else{

if (this.isOver){

this.setDormant(e);

+ this.initializePositioning();

}

}

},

@@ -297,6 +372,7 @@

var y=this.pos.y;

if( this.itemCount <= 0 ){ return; }

+ var scrollerEnd = this.calcScrollerEnd();

// // figure out our main index

@@ -309,7 +385,7 @@

(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 cen = ((pos - prx) / siz) - 0.5 + this.scrollerBegin;

var max_off_cen = (sim / siz) - 0.5;

if (max_off_cen > this.effectUnits){ max_off_cen = this.effectUnits; }

@@ -357,7 +433,7 @@

// set the sizes //

- for(var i=0; i<this.itemCount; i++){ + for(var i=this.scrollerBegin; i<scrollerEnd; i+=1){

var weight = this.weightAt(cen, i);

@@ -371,17 +447,22 @@

//

var main_p = Math.round(cen);

+ + + if(main_p < this.scrollerBegin) + main_p = this.scrollerBegin; + if(cen > 0 && cen < this.scrollerBegin) + cen = this.scrollerBegin; +

var offset = 0;

- if (cen < 0){ - main_p = 0; + var scrollerEnd = this.calcScrollerEnd(); - }else if (cen > this.itemCount - 1){ - - main_p = this.itemCount -1; - + if (cen < this.scrollerBegin){ + main_p = this.scrollerBegin; + } else if (cen > scrollerEnd - 1){ + main_p = scrollerEnd - 1;

}else{

-

offset = (cen - main_p) * ((this.isHorizontal ? this.itemWidth : this.itemHeight) - this.children[main_p].sizeMain);

}

@@ -406,7 +487,8 @@

this.setitemsize(p, w);

var wx = w;

- for(var i=p; i<this.itemCount; i++){ + + for(var i=p; i<this.itemCount; i+=1){

wx = 0.8 * wx; this.setitemsize(i, wx);

}

@@ -412,6 +494,7 @@

}

var wx = w;

+

for(var i=p; i>=0; i--){

wx = 0.8 * wx; this.setitemsize(i, wx);

@@ -451,7 +534,7 @@

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;

@@ -489,9 +572,10 @@

},

positionElementsFrom: function(p, offset){

-

var pos = 0;

+ var scrollerEnd = this.calcScrollerEnd();; +

if (this.isHorizontal){

pos = Math.round(this.children[p].usualX + offset); this.children[p].domNode.style.left = pos + 'px';

@@ -508,16 +592,16 @@

var bpos = pos;

- for(var i=p-1; i>=0; i--){ + for(var y=p-1; y>=this.scrollerBegin; y-=1){ - bpos -= this.children[i].sizeMain; + bpos -= this.children[y].sizeMain;

if (this.isHorizontal){

- this.children[i].domNode.style.left = bpos + 'px'; + this.children[y].domNode.style.left = bpos + 'px';

}else{

- this.children[i].domNode.style.top = bpos + 'px'; + this.children[y].domNode.style.top = bpos + 'px';

}

- this.positionLabel(this.children[i]); + this.positionLabel(this.children[y]);

}

//

@@ -526,7 +610,7 @@

var apos = pos;

- for(var i=p+1; i<this.itemCount; i++){ + for(var i=p+1; i< scrollerEnd; i+=1){

apos += this.children[i-1].sizeMain;

@@ -596,7 +680,26 @@

dojo.lang.setTimeout(this, "expandSlowly", 10);

}

},

+ + _getCookieName: function(i) { + return this.widgetId + "_" + i; + }, + restoreState: function () { + var cookieName = this._getCookieName(0); + var cookieValue = dojo.io.cookie.getCookie(cookieName); + if(cookieValue == null) return; + //dojo.debug("val"+cookieValue); + this.scrollerBegin = parseInt(cookieValue); + + }, + + saveState: function (){ + var cookieName = this._getCookieName(0); + dojo.io.cookie.setCookie(cookieName,this.scrollerBegin, null, null, null, null); + }, + +

destroy: function(){

// need to disconnect when we destroy dojo.event.disconnect(document.documentElement, "onmouseout", this, "onBodyOut");

@@ -608,7 +711,7 @@

dojo.widget.defineWidget(

"dojo.widget.FisheyeListItem?", dojo.widget.HtmlWidget?,

-{ +{

// Constructor arguments iconSrc: "", svgSrc: "",

@@ -700,7 +803,7 @@

var scale_x = w / this.zeroWidth; var scale_y = h / this.zeroHeight;

- for(var i=0; i<this.svgDoc.childNodes.length; i++){ + for(var i=0; i<this.svgDoc.childNodes.length; i+=1){

if (this.svgDoc.childNodes[i].setAttribute){

this.svgDoc.childNodes[i].setAttribute( "transform", "scale("+scale_x+","+scale_y+")" );

}

---

Index: . =================================================================== --- . (revision 5948) +++ . (working copy) @@ -51,7 +51,24 @@

<div class="outerbar">

+<div class="dojo-Button" onclick="javascript:scrollLeft();">&lt;&lt;</div> +<div class="dojo-Button" onclick="javascript:scrollRight();">&gt;&gt;</div> +<script type="text/javascript"> +<!-- + function scrollLeft() { + dojo.widget.getWidgetById('fisheye').onLeftScroll(); + } + + function scrollRight() { + dojo.widget.getWidgetById('fisheye').onRightScroll(); + } + +//--> +</script> + +

<div class="dojo-FisheyeList?"

+ id="fisheye"

dojo:itemWidth="50" dojo:itemHeight="50" dojo:itemMaxWidth="200" dojo:itemMaxHeight="200" dojo:orientation="horizontal"

@@ -59,6 +76,7 @@

dojo:itemPadding="10" dojo:attachEdge="top" dojo:labelEdge="bottom"

+ dojo:visibleWindow=3

dojo:enableCrappySvgSupport="false"

>

[dylan]

please attach this as a separate file.

[werner.punz@…]

demo example html file with scroller added

[werner.punz@…]

demo example html file with scroller added

[werner.punz@…]

javascript patch

[tk]

Do you have a live copy of this somewhere? I'd love to see this. Also check out the 0.9 version of Fisheye here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_FisheyeList.html

[guest]

Replying to peller:

of course: the demo for this functionality is: http://www.irian.at/myfaces-sandbox/fisheye.jsf

(this one is running on dojo 0.4.1)

[dylan]

needs a new patch for the 1.1 version of the widget.