Ticket #1589: FisheyeList.js.patch

.

@@ -60 +60 @@
 
         enableCrappySvgSupport: false,
 
+        maxNoDisplayItems:10000, //all items
+        scrollerBegin: 0, //first item beginning item
+        visibleWindow:5,
 
+        persist: true,          // save splitter positions in a cookie
+        
         //
         //
         //
@@ -129 +134 @@
         },
         
         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 +156 @@
                 // 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 +197 @@
                 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 +239 @@
                 }
 
 
+
+
                 //
                 // create the bar
                 //
@@ -195 +252 @@
                 //
                 // 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 +353 @@
                 }else{
                         if (this.isOver){
                                 this.setDormant(e);
+                                this.initializePositioning();
                         }
                 }
         },
@@ -297 +372 @@
                 var y=this.pos.y;
 
                 if( this.itemCount <= 0 ){ return; }
+                var scrollerEnd = this.calcScrollerEnd();
 
                 //
                 // figure out our main index
@@ -309 +385 @@
                         (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 +433 @@
                 // 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 +447 @@
                 //
 
                 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 +487 @@
                 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 +494 @@
                 }
 
                 var wx = w;
+                
                 for(var i=p; i>=0; i--){
                         wx = 0.8 * wx;
                         this.setitemsize(i, wx);
@@ -451 +534 @@
                         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 +572 @@
         },
 
         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 +592 @@
 
                 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 +610 @@
 
                 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 +680 @@
                         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 +711 @@
 dojo.widget.defineWidget(
         "dojo.widget.FisheyeListItem",
         dojo.widget.HtmlWidget,
-{
+{       
         // Constructor arguments
         iconSrc: "",
         svgSrc: "",
@@ -700 +803 @@
                         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+")" );
                                 }