[Dynapi-Widgetdev] Viewport HELP

[ngy <ng...@tp...>]

Hi forum,
I am a newbee with javascript and therefore pretty much new with the 
dynapi. However I have tried to figure it out over the past week and 
have succeeded in making some changes to the dynapi Viewport in order to 
fulfill my need.
What I am trying to use dynapi for, is something like an image 
navigator; i.e , I wanna give an image as a param and the widget that is 
created is a viewport with a small thumbnail of the same on the lower 
left hand corner that one can use to scroll through an image that doesnt 
fit into the viewport.

code for the imagenavigator.js is as follows :

/*
   DynAPI Distribution
   ViewPort Class

   The DynAPI Distribution is distributed under the terms of the GNU 
LGPL license.

   Requirements:
    dynapi.api.*
    dynapi.util [thread, pathanim]
    dynapi.gui [label]
*/

// note: we need an onremove event

function ImageNavigator(content,offsetX, offsetY, width, height) {

    this.DynLayer = DynLayer;
    this.DynLayer();
    this.moveTo(offsetX, offsetY);
    this.setSize(width, height);

    this.contentPane = new DynLayer();
    this.addChild(this.contentPane);

    this.bufferW = 0;
    this.bufferH = 0;
   

    this.mainImage = DynImage.getImage(content);
    this.max = new DynImage(this.mainImage);
    this.max.moveTo(0,0);
    this.max.setSize(width*2,height*2);

    this.navigator = new DynLayer(null, 0,height*0.75,width*0.25, 
height*0.25,"#000000", true);
    this.addChild(this.navigator);

    this.min = new DynImage(this.mainImage);
    this.min.setSize(width*0.25, height*0.25);
    this.navigator.addChild(this.min);

    this.highlighter = new DynLayer(null, 
0,0,this.navigator.getWidth()*0.5, this.navigator.getHeight()*0.5,"red", 
true)
    this.navigator.addChild(this.highlighter);
    DragEvent.enableDragEvents(this.highlighter);
    DragEvent.setDragBoundary(this.highlighter);
   
    var highlightEvent = new EventListener(this.highlighter);
   
    highlightEvent.ondragstart = function(e){
        target=e.getTarget()
            this.jumpTo(-target.getX()*8, -target.getY()*8)
    };
        this.highlighter.addEventListener(highlightEvent);
   
    var scrollEvent = new EventListener(this);
    scrollEvent.onpathrun = function(e) {
                                e.getTarget().invokeEvent('scroll');
                            };
    this.contentPane.addEventListener(scrollEvent);

    var viewportListener = new EventListener(this);
    viewportListener.onresize = function(e) {
                                    var o = e.getTarget();
                                    if (!o.created || !o.content) return;

                                    o.findDimensions();

                                    if (!o.enableHScroll) 
o.contentPane.setX(0);
                                else if 
(o.contentPane.x<-o.availableScrollX) 
{o.contentPane.setX(-o.availableScrollX);}

                                    if (!o.enableVScroll) 
o.contentPane.setY(0);
                                else if 
(o.contentPane.y<-o.availableScrollY) 
{o.contentPane.setY(-o.availableScrollY);}

                                    o.invokeEvent("scroll");
                                };
    viewportListener.oncreate = function(e) {
                                    var o = e.getTarget();
                                    if(is.def && o.css) 
o.css.overflow='hidden'
                                     o.reset(false);
                                };
    this.addEventListener(viewportListener);

    this.contentResizeListener = new EventListener(this);
    this.contentResizeListener.onresize = function(e) {
                                              var o = e.getTarget();
                                              o.findDimensions();
                                              
o.invokeEvent("contentchange");
                                          };
    this.contentResizeListener.onload = function(e) {  // for loadpanel
                                            var o = e.getTarget();
                                            if (o.created && o.content) {
                                                o.reset();
                                            }
                                        };
 
   

    this.setContent(this.max);

}
ImageNavigator.prototype = new DynLayer();
ImageNavigator.prototype.reset = function(b) {
                                     this.contentPane.moveTo(0,0);
                                     this.findDimensions();
                                     if (b!=false) 
this.invokeEvent("contentchange");
                                 };
ImageNavigator.prototype.setContent = function(content) {
                                          if (this.content && 
this.contentPane.children.length>0) {
                                              if 
(this.content==this.max) return;
                                              this.max.removeFromParent();
                                              
this.max.removeEventListener(this.contentResizeListener);
                                          }
                                          if (!content) this.content = 
new DynLayer();
                                          else this.content = this.max;

                                          this.content.moveTo(0,0);
                                          this.contentPane.moveTo(0,0);

                                          
this.contentPane.addChild(this.content);
                                          
this.content.addEventListener(this.contentResizeListener);

                                          this.findDimensions();

                                          this.invokeEvent("contentchange");
                                      };
ImageNavigator.prototype.findDimensions = function() {
                    if (!this.content) return;
                    
this.contentPane.setSize(this.content.getWidth(),this.content.getHeight());

                    this.availableScrollX = 
this.content.getWidth()-this.getWidth()+this.bufferW;
                    this.availableScrollY = 
this.content.getHeight()-this.getHeight()+this.bufferH;
                    this.enableHScroll = this.availableScrollX>0;
                    this.enableVScroll = this.availableScrollY>0;
                };
       
ImageNavigator.prototype.jumpTo = function(x,y) {
                                      this.content.moveTo(x,y);
                                      this.invokeEvent("scroll");
                                  };
                 
ImageNavigator.prototype.setRatio = function(rx,ry) {
                                        this.setRatioX(rx);
                                        this.setRatioY(ry);
                                    };

ImageNavigator.prototype.setRatioX = function(rx) {
                                         if (rx!=null) 
this.contentPane.setX(-this.availableScrollX*rx);
                                     };

ImageNavigator.prototype.setRatioY = function(ry) {
                                         if (ry!=null) 
this.contentPane.setY(-this.availableScrollY*ry);
                                     };
ImageNavigator.prototype.getRatioX = function() {
                                         if (!this.content || 
!this.enableHScroll) return 0;
                                         else if (this.contentPane.x==0) 
return 0;
                                         else if 
(this.contentPane.x==-this.availableScrollX) return 1;
                                         else return 
1-(this.availableScrollX+this.contentPane.x)/this.availableScrollX;
                                     };
ImageNavigator.prototype.getRatioY = function() {
                                         if (!this.content || 
!this.enableVScroll) return 0;
                                         else if (this.contentPane.y==0) 
return 0;
                                         else if 
(this.contentPane.y==-this.availableScrollY) return 1;
                                         else return 
1-(this.availableScrollY+this.contentPane.y)/this.availableScrollY;
                                     };

ImageNavigator.prototype.scrollUp = function() {this.scrollSlide(null,0);};

ImageNavigator.prototype.scrollDown = function() 
{this.scrollSlide(null,-this.availableScrollY);};

ImageNavigator.prototype.scrollLeft = function() 
{this.scrollSlide(0,null);};

ImageNavigator.prototype.scrollRight = function() 
{this.scrollSlide(-this.availableScrollX,null);};


ImageNavigator.prototype.scrollSlide = function(x,y) {
                                           if (x!=null && 
this.enableHScroll) {
                                               
this.invokeEvent("scrollstart");
                                               
this.contentPane.slideTo(x,this.contentPane.y);
                                           }
                                           else if (y!=null && 
this.enableVScroll) {
                                               
this.invokeEvent("scrollstart");
                                               
this.contentPane.slideTo(this.contentPane.x,y);
                                           }
                                       };
ImageNavigator.prototype.cancelScroll = function() {
                                            this.contentPane.stopSlide();
                                            this.invokeEvent("scrollend");
                                        };
 


THE PROBLEM that I am facing is in the highlightEventListener that says 
"Error: this.jumpTo is not a function
Source File: htmlcode/dynapi/src/lib/dynapi/gui/imagenavigator.js
Line: 50"

However, when I comment that line out and implement the listener in the 
HTML, it is working alright. here is the code for the HTML of the same:

<html>
<head>
<title>DynAPI Image Viewer - ViewPort</title>
<script type= "text/javascript" language="JavaScript" 
src="../src/dynapi.js"></script>
<script language="Javascript">
DynAPI.setLibraryPath('../src/lib/')
DynAPI.include('dynapi.api.*')
DynAPI.include('dynapi.event.*')
DynAPI.include('dynapi.util.thread.js')
DynAPI.include('dynapi.util.pathanim.js')
DynAPI.include('dynapi.gui.viewport.js')
DynAPI.include('dynapi.gui.label.js')
DynAPI.include('dynapi.gui.dynimage.js')
DynAPI.include('dynapi.gui.imagenavigator.js')
DynAPI.include('dynapi.ext.*')
</script>
<script language="Javascript">

DynAPI.onLoad = function() {
    iviewer = new ImageNavigator("machinery.jpg", 400, 200, 800, 600)
   
    /*var myListener=new EventListener(iviewer.highlighter)
        myListener.ondragstart=function(e){
            target=e.getTarget()
            iviewer.jumpTo(-target.getX()*8, -target.getY()*8)
           
        }
        myListener.ondragend=function(e){
            target=e.getTarget()
            iviewer.jumpTo(-target.getX()*8, -target.getY()*8)
        }*/
    iviewer.highlighter.addEventListener(myListener)
    DynAPI.document.addChild(iviewer)
   
}

</script>
</head>
<body bgcolor="#ffffff">

</body>
</html>



I know that I do not have enough experience to but I tired. I could 
really do with some help. Also, some good website with some tutorials on 
JAVASCRIPT / DYNAPI would be of help

thanks in advance

Nikhil