home *** CD-ROM | disk | FTP | other *** search
/ CD Actual Thematic 7: Programming / CDAT7.iso / Share / Java / ScriptBuilder / NOSB30_TRIAL.exe / data1.cab / Program_Files / CompLib / ImageCtl / ImageCtl.js < prev   
Encoding:
Text File  |  1998-10-05  |  15.7 KB  |  409 lines
  1. com_netobjects_AnimImg = com_netobjects_ImageCtl;
  2. com_netobjects_ActiveImg = com_netobjects_ImageCtl;
  3.  
  4. /* ======================================================================
  5. OBJECT:        com_netobjects_ImageCtl
  6.  
  7. DESC:            This object allows developers to create images with common built
  8.                 in behaviors such as rollover effects, state dependent image displays
  9.                 image changes on click or mouse down, and image animation.
  10.                 
  11. PLATFORMS:    Netscape Navigator 4.01 or higher, 
  12.                 Microsoft Internet Explorer 4.02 or higher    
  13. ====================================================================== */
  14. function com_netobjects_ImageCtl(params) {
  15.  
  16.    // Public Properties    
  17.     this.name                 = (params.name != null) ? params.name : "";
  18.     this.linkURL             = (params.linkURL != null) ? params.linkURL : "";
  19.     this.alt                 = (params.alt != null) ? params.alt : "";
  20.  
  21.     this.defaultImage     = (params.defaultImage != null) ? params.defaultImage : "";
  22.     this.mouseOutImage     = (params.mouseOutImage != null) ? params.mouseOutImage : "";    
  23.     this.mouseOverImage     = (params.mouseOverImage != null) ? params.mouseOverImage : "";
  24.     this.mouseDownImage     = (params.mouseDownImage != null) ? params.mouseDownImage : "";
  25.     this.mouseUpImage     = (params.mouseUpImage != null) ? params.mouseUpImage : "";
  26.     this.stateOnImage     = (params.stateOnImage != null) ? params.stateOnImage : "";
  27.     this.stateOffImage     = (params.stateOffImage != null) ? params.stateOffImage : "";
  28.  
  29.     this.stateOn             = ((params.stateOn != null) && (params.stateOn != "")) ? params.stateOn : false;
  30.     this.imageArrayStr     = (params.imageArrayStr != null) ? params.imageArrayStr : "";
  31.     this.imageInterval     = ((params.imageInterval != null) && (params.imageInterval != "")) ? params.imageInterval : 1000;
  32.     
  33.     this.height             = ((params.height != null) && (params.height != "")) ? params.height : 0;
  34.     this.width              = ((params.width != null) && (params.width != "")) ? params.width : 0;
  35.     this.target             = (params.target != null) ? params.target : "";
  36.     this.border             = ((params.border != null) && (params.border != "")) ? params.border : 0;
  37.  
  38.     this.testMode            = (params.testMode != null) ? params.testMode : "none"
  39.     
  40.     // Private Properties
  41.       this.imageArray         = unEncodeList(this.imageArrayStr);      // Parse image array
  42.     this.timerID            = null;
  43.     this.imageNo             = 0;
  44.     this.rotateNo            = 0;
  45.  
  46.     // Public Methods
  47.     this.render             = _image_render;
  48.     this.animationStart     = _image_animationStart;
  49.     this.animationStop   = _image_animationStop;
  50.  
  51.     // Private Methods
  52.     this.validateProperties = _image_validateProperties;
  53.     this.rotateImage           =  _image_rotateImage;
  54.  
  55.     // Public Events
  56.     this.onClick              = _image_onClick;
  57.     this.onMouseDown         = _image_onMouseDown;
  58.     this.onMouseUp           = _image_onMouseUp;
  59.     this.onMouseOver         = _image_onMouseOver;
  60.     this.onMouseOut          = _image_onMouseOut;
  61.     this.onError             = _image_onError;
  62.     this.onAbort             = _image_onAbort;
  63.     this.onLoad              = _image_onLoad;
  64.     this.onRender              = _image_onRender;
  65.     this.onAnimationStart= _image_onAnimationStart;
  66.     this.onAnimationStop = _image_onAnimationStop;
  67.     this.onRotateImage     = _image_onRotateImage;
  68.  
  69.     // Private Events (internal event driven functionality)
  70.     this.eOnClick         = _image_eOnClick;
  71.     this.eOnMouseDown     = _image_eOnMouseDown;
  72.     this.eOnMouseUp       = _image_eOnMouseUp;
  73.     this.eOnMouseOver     = _image_eOnMouseOver;
  74.     this.eOnMouseOut      = _image_eOnMouseOut;
  75.  
  76.     // Validate object properties
  77.     this.validateProperties();
  78.  
  79.     // Public Methods ----------------------------------------
  80.     function _image_render() {
  81.         // Initialize Variables
  82.         sSrc = "";
  83.         sAlt = "";
  84.         sHeight = "";
  85.         sWidth = "";
  86.         sTarget = "";
  87.         sBorder = "";
  88.         sLink = "";
  89.     
  90.         eMouseOver  = "";
  91.         eMouseOut   = "";
  92.         eMouseUp    = "";
  93.         eMouseDown  = "";
  94.         eMouseClick = "";
  95.     
  96.         eError         = "";
  97.         eAbort         = "";
  98.         eLoad         = "";
  99.     
  100.         this.stateOn = true;
  101.           
  102.         // Set Variables
  103.         if (this.defaultImage != "")
  104.             sSrc = " SRC = '" + this.defaultImage + "'";
  105.         else if (this.imageArray[0] != null)    // default to first image for animated images
  106.             sSrc = " SRC = '" + this.imageArray[0] + "'";
  107.         sAlt = " ALT = '" + this.alt + "'";        
  108.         sBorder = " BORDER = '" + this.border + "'"
  109.         sImageName = " Name = 'Img_" + this.name + "'"
  110.      
  111.         if (this.linkURL != "") {sLink = " HREF = '" + this.linkURL + "'"} 
  112.             else {sLink = " HREF = ''"}
  113.  
  114.         if (this.height != 0) {sHeight = " HEIGHT = '" + this.height + "'"}
  115.         if (this.width  != 0) {sWidth  = " WIDTH = '"   + this.width  + "'"}
  116.         if (this.target != "") {sTarget = " TARGET = '" + this.target + "'"}
  117.     
  118.         // Build Nav & IE shared link events
  119.         eMouseOver  = " onmouseover=\"" + this.name + ".eOnMouseOver();\""
  120.         eMouseOut   = " onmouseout=\"" + this.name + ".eOnMouseOut();\""
  121.         eMouseUp    = " onmouseup=\"" + this.name + ".eOnMouseUp();\""
  122.         eMouseDown  = " onmousedown=\"" + this.name + ".eOnMouseDown();\""
  123.         eMouseClick = " onclick=\"return " + this.name + ".eOnClick();\""
  124.         eLnkEvents  = eMouseOver + eMouseOut + eMouseUp + eMouseDown + eMouseClick;
  125.         
  126.         // Build Nav & IE shared Image events
  127.         eError         = " onerror=\"" + this.name + ".onError();\""
  128.         eAbort         = " onabort=\"" + this.name + ".onAbort();\""
  129.         eLoad         = " onload=\"" + this.name + ".onLoad();\""
  130.         eImgEvents    = eError + eAbort + eLoad;
  131.     
  132.         // Write HTML
  133.        document.write( "<A" + sLink + sAlt + sTarget + eLnkEvents + ">");
  134.        document.write( "<IMG"  + sImageName + sAlt + sSrc + sHeight + sWidth + sBorder + eImgEvents + ">");
  135.         document.write( "</A>");  
  136.        // JJK: 9/13/98: Commented out to fix a bug occuring when using this object with HTML tables: 
  137.        // it creates an unnecessary extra blank line at the bottom of the row.  
  138.        // document.write("\n");
  139.         
  140.         // Start animation if animation control
  141.         if (this.imageArrayStr != "")    this.animationStart();
  142.  
  143.         // Fire public events
  144.         this.onRender(); 
  145.     
  146.     } // END _image_render
  147.  
  148.     /* ======================================================================
  149.     
  150.    METHOD: _image_rotateImage.  Rotates image.
  151.     
  152.     ====================================================================== */
  153.     function _image_rotateImage() {
  154.         this.rotateNo    = this.rotateNo + 1;
  155.  
  156.         // Set next image
  157.         if (this.imageNo == this.imageArray.length) {this.imageNo = 1} else {this.imageNo = this.imageNo + 1}
  158.  
  159.         // Update image
  160.         eval("window.document.Img_" + this.name + ".src=\"" + this.imageArray[this.imageNo-1] + "\"");        
  161.        this.timerID = setTimeout(this.name + ".rotateImage()",this.imageInterval);
  162.  
  163.         // Fire public events
  164.         this.onRotateImage();
  165.  
  166.     } // END _image_rotateImage
  167.  
  168.     /* ======================================================================
  169.     
  170.    METHOD: _image_animationStart.  Starts image animation if not already started.
  171.     
  172.     ====================================================================== */
  173.     function _image_animationStart() {
  174.  
  175.         if (this.rotateNo == 0) {
  176.             this.onAnimationStart(); 
  177.  
  178.         // Fire public events
  179.             this.rotateImage();
  180.         }
  181.  
  182.     } // END _image_animationStart
  183.     
  184.     /* ======================================================================
  185.     
  186.    METHOD: _image_animationStop.  Stops image animation if not already stopped
  187.     
  188.     ====================================================================== */
  189.     function _image_animationStop() {
  190.         if (this.rotateNo != 0) {
  191.             clearTimeout(this.timerID);
  192.             this.rotateNo = 0; 
  193.  
  194.             // Fire public events
  195.             this.onAnimationStop();     
  196.         }
  197.     } // END _image_animationStop
  198.  
  199.     // Private Methods ----------------------------------------
  200.     /* ======================================================================
  201.     
  202.    METHOD: _image_validateProperties.  If the test mode is set,
  203.     generate error and/or warning messages if required or recommended properties
  204.     are set with invalid property values or are not set at all.
  205.  
  206.     ====================================================================== */
  207.     function _image_validateProperties() {
  208.         if ((this.testMode.toLowerCase() == "text") || (this.testMode.toLowerCase() == "alerts")) {
  209.             var errors = new Array()
  210.           iIndex = 0;  
  211.          
  212.             // Check for errors
  213.             if (this.name == "") 
  214.                 errors[iIndex++] = "Name is a required property.";  
  215.          if ((this.defaultImage == "") && (this.imageArrayStr == ""))
  216.                 errors[iIndex++] = "Default image is a highly recommended property.";  
  217.          if ((this.stateOn != false) && (this.stateOn != true))
  218.                 errors[iIndex++] = "State On must be a true or false value.";  
  219.          if ((this.imageArrayStr != "") && ((params.imageInterval = null) || (params.imageInterval = "")))
  220.                 errors[iIndex++] = "Image interval should be specified for animated images.";  
  221.  
  222.             // Display errors
  223.             for (var i=0; i<errors.length; i++)  {
  224.                 if (this.testMode.toLowerCase()    == "text") 
  225.                       document.write( "<BR>" + errors[i] + "\n")
  226.                 else
  227.                       alert(errors[i]);
  228.  
  229.             }            
  230.         } 
  231.     } // END _image_validateProperties
  232.  
  233.     
  234.     
  235.     // Private Event Handlers ----------------------------------------
  236.  
  237.     /* ======================================================================
  238.     
  239.    EVENT: _colorpicker_eOnClose.  Internal event handler.  For the selected 
  240.             state, display the appropriate image if available.
  241.     
  242.     ====================================================================== */
  243.     function _image_eOnClick() {
  244.         var clickProceed = false;
  245.  
  246.         // Check the state
  247.         if (this.stateOn == true) {
  248.             // Display on image
  249.             if (this.stateOnImage != "") {
  250.                 eval("window.document.Img_" + this.name + ".src=\"" + this.stateOnImage + "\"");    
  251.             }
  252.         } else {
  253.             // Display off image
  254.             if (this.stateOffImage != "") {
  255.                 eval("window.document.Img_" + this.name + ".src=\"" + this.stateOffImage + "\"");
  256.             }    
  257.         }
  258.        this.stateOn = ! this.stateOn;
  259.  
  260.         if (this.linkURL != "") 
  261.             clickProceed = true 
  262.     
  263.         // Fire event handler
  264.         this.onClick();
  265.  
  266.        return clickProceed // this.onClick(); should this be overridable?
  267.     } // END _image_eOnClick
  268.     
  269.     /* ======================================================================
  270.     
  271.    EVENT: _image_eOnMouseOver.  Internal event handler.  Display the MouseOver image if available.
  272.     
  273.     ====================================================================== */
  274.     function _image_eOnMouseOver() {
  275.         if (this.mouseOverImage != "") {
  276.             eval("window.document.Img_" + this.name + ".src=\"" + this.mouseOverImage + "\"");    
  277.         }
  278.  
  279.         // Fire event handler
  280.        this.onMouseOver();
  281.     } // END _image_eOnMouseOver
  282.     
  283.     /* ======================================================================
  284.     
  285.    EVENT: _image_eOnMouseOut.  Internal event handler.  Display the MouseOut image if available.
  286.     
  287.     ====================================================================== */
  288.     function _image_eOnMouseOut() {
  289.         if (this.mouseOutImage != "") {
  290.             eval("window.document.Img_" + this.name + ".src=\"" + this.mouseOutImage + "\"");    
  291.         }
  292.  
  293.         // Fire event handler
  294.        this.onMouseOut();
  295.     } // END _image_eOnMouseOut
  296.     
  297.     /* ======================================================================
  298.     
  299.    EVENT: _image_eOnMouseUp.  Internal event handler.  Display the MouseUp image if available.
  300.     
  301.     ====================================================================== */
  302.     function _image_eOnMouseUp() {
  303.         if (this.mouseUpImage != "") {
  304.             eval("window.document.Img_" + this.name + ".src=\"" + this.mouseUpImage + "\"");    
  305.         }
  306.         // Fire event handler
  307.        this.onMouseUp();
  308.     } // END _image_eOnMouseUp
  309.     
  310.     /* ======================================================================
  311.     
  312.    EVENT: _image_eOnMouseDown.  Internal event handler.  Display the MouseDown image if available.
  313.     
  314.     ====================================================================== */
  315.     function _image_eOnMouseDown() {
  316.         if (this.mouseDownImage != "") {
  317.             eval("window.document.Img_" + this.name + ".src=\"" + this.mouseDownImage + "\"");    
  318.         }
  319.  
  320.         // Fire event handler
  321.        this.onMouseDown();
  322.     }  // END _image_eOnMouseDown
  323.     
  324.     // Public Event Handlers ----------------------------------------
  325.     function _image_onClick() {
  326.     }
  327.     function _image_onMouseOver() {
  328.     }
  329.     function _image_onMouseOut() {
  330.     }
  331.     function _image_onMouseUp() {
  332.     }
  333.     function _image_onMouseDown() {
  334.     }
  335.     function _image_onError() {
  336.     }
  337.     function _image_onAbort() {
  338.     }
  339.     function _image_onLoad() {
  340.     }
  341.     function _image_onRender() {
  342.     }
  343.     function _image_onAnimationStart() {
  344.     }
  345.     function _image_onAnimationStop() {
  346.     }
  347.     function _image_onRotateImage() {
  348.     }
  349.   
  350. } // END CONSTRUCTOR com_netobjects_ImageCtl
  351.  
  352. // Shared Array Parsing function
  353.  function unEncodeJS(input) {  
  354.      if (null == input)  
  355.          return null;  
  356.      if (input == "null" )  
  357.          return null;  
  358.      output = "";  
  359.      i=0;  
  360.      while (i<input.length) {  
  361.          ch = input.charAt(i++);  
  362.          if ('\\' == ch) {  
  363.              ch = input.charAt(i++);  
  364.              if ('n' == ch) {  
  365.                  output += '\n';  
  366.              } else if (';' == ch) {  
  367.                  output += ';';  
  368.              } else if ('r' == ch) {  
  369.                  //supress this character  
  370.              } else if ('t' == ch) {  
  371.                  output += '\t';  
  372.              } else {  
  373.                  output += ch;  
  374.              }  
  375.          } else {  
  376.              output += ch;  
  377.          }  
  378.      }  
  379.      return output;  
  380.  } // END unEncodeList  
  381.  
  382.  function unEncodeList( sList ) {  
  383.      aRes = null;  
  384.      if ( null != sList && ""!=sList ) {  
  385.          aRes = new Array();  
  386.          iStart = 0;  
  387.          iIndex = 0;  
  388.          j=0;  
  389.          while (j<sList.length) {  
  390.              ch = sList.charAt(j++);  
  391.              if ('\\' == ch) {  
  392.                  ch = sList.charAt(j++);  
  393.              } else {  
  394.                  if ( ';' == ch ) {  
  395.                      sRaw = sList.substring( iStart, j-1 );  
  396.                      aRes[iIndex++] = unEncodeJS( sRaw );  
  397.                      iStart = j;  
  398.                  }  
  399.              }  
  400.          }  
  401.          if ( iStart != j ) {  
  402.              sRaw = sList.substring( iStart, j );  
  403.              aRes[iIndex++] = unEncodeJS( sRaw );  
  404.          }  
  405.      }  
  406.      return aRes;  
  407. } // END unEncodeList
  408.  
  409.