Opened 14 years ago
Closed 8 years ago
#1589 closed enhancement (wontfix)
Enhancement of the fisheye so that it can scroll
Reported by: | Owned by: | ||
---|---|---|---|
Priority: | high | Milestone: | future |
Component: | Dojox | Version: | 0.3 |
Keywords: | fisheye | Cc: | [email protected]… |
Blocked By: | Blocking: |
Description (last modified by )
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();"><<</div> +<div class="dojo-Button" onclick="javascript:scrollRight();">>></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"
Attachments (3)
Change History (13)
comment:1 Changed 14 years ago by
Component: | General → Widgets |
---|---|
Milestone: | → 0.5 |
Owner: | changed from anonymous to bill |
Version: | 0.4 → 0.3 |
Changed 14 years ago by
Attachment: | fisheye.demo.html.patch added |
---|
demo example html file with scroller added
Changed 14 years ago by
Attachment: | fisheye.demo.html.2.patch added |
---|
demo example html file with scroller added
comment:2 Changed 14 years ago by
Component: | Widgets → Dojox |
---|---|
Keywords: | fisheye added |
Milestone: | 0.9 |
comment:3 Changed 13 years ago by
Cc: | [email protected]… added |
---|
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
comment:4 follow-up: 5 Changed 13 years ago by
Owner: | changed from bill to tk |
---|
comment:5 Changed 13 years ago by
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)
comment:6 Changed 13 years ago by
Milestone: | → 1.2 |
---|
needs a new patch for the 1.1 version of the widget.
comment:7 Changed 13 years ago by
Description: | modified (diff) |
---|---|
Milestone: | 1.2 → future |
comment:8 Changed 11 years ago by
Owner: | changed from tk to Karl Tiedt |
---|
comment:9 Changed 10 years ago by
Owner: | Karl Tiedt deleted |
---|
Seeing as there has been 0 interest in this since 0.4 in terms of patches, I would push this to "wont fix" or something. I for one am not interested in porting 5 year old code to present day widget code.
comment:10 Changed 8 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
This would need a rewrite for the AMD version of this widget. Going to mark as wontfix, but if reopened with a viable patch against 1.9, I'll review and commit.
please attach this as a separate file.