[Chameleon] Hide/show keymap + floating

[Carlo Tronnberg]

Thanks a lot Jason! I think you put me on the right way. I have now a 
working floating KeyMap which can be moved freely around. But I have still a 
small bug: I cannot move the red rectangle showing the actual extents of the 
map. But at the next refresh it is regenerated on the correct place. It 
would be great if that layer would move together with all the others.

For those you might be interrested about how I did this, here are some 
simplified extracts of my code:

I added the following hidden form elements to pass the state of the keymap 
in the session:

<input type="hidden" name="KeyMapVis" value="[$KeyMapVis$]">
<input type="hidden" name="KeyMapPosX" value="[$KeyMapPosX$]">
<input type="hidden" name="KeyMapPosY" value="[$KeyMapPosY$]">
In the template file I created a layer which will contain the Key Map. All 
the layers of the KeyMap will follow this layer.
<div id="boxHandle" class="box">
  <div class="handle"><table><tr><td>[...Here I put the 2 KeyMap controls 
(zoom and pan)...]</td></tr></TABLE></TD><td id="handle" class="Caption">KEY 
MAP</td><td ALIGN="RIGHT"><a href="javascript:keymap_vis();"><IMG 
SRC="images/close.png" ALT="Close KeyMap" BORDER=0 WIDTH="9" 
HEIGHT="9"></a></td></tr></table></div>
  <table>
    <tr>
      <!-- KEYMAP -->
      <td colspan="3" align="left">
      <cwc2 type="KeyMapDHTML" image="images/world_key.png" />
      </td>
    </tr>
  </TABLE>
</div>

In the nav toolbar I added a button to toggle the visualisation of the Key 
Map:

    <cwc2 type="Link" linktype="javascript" jsfunction="keymap_vis" 
styleresource="NavButtons" Image="buttons/button_preview_12.png" 
ImageTip="Toggle the Key Map" default="false">
                 <image state="normal" 
image="buttons/button_preview_12.png"/>
                 <image state="hover" 
image="buttons/button_preview_22.png"/>
                 <image state="selected" 
image="buttons/button_preview_32.png"/>
          </cwc2>

Basing my project on one of the Chameleon samples, I added the following 
lines in the javascript file connected to the sample. (sample.js?) to pass 
the actual position of the keymap is in the session as KeyMapPosX and 
KeyMapPosY.
In function LayerSetSizeInit():

   var oLayer = CWCDHTML_GetLayer( 'boxHandle' );
    if ((document.forms[0].KeyMapPosX.value) != "KeyMapPosX")
     oLayer.left = document.forms[0].KeyMapPosX.value;
    else oLayer.left = 745;
    document.forms[0].KeyMapPosX.value = oLayer.left;

    if (document.forms[0].KeyMapPosY.value != "KeyMapPosY")
     oLayer.top = document.forms[0].KeyMapPosY.value;
 else oLayer.top = 0;
    document.forms[0].KeyMapPosY.value = oLayer.top;
    moveKeyMap2( oLayer.left, oLayer.top );
and added the following lines before the LayerSetSizeInit(); call:
function moveKeyMap(coordinate) {
 moveKeyMap2(coordinate.x, coordinate.y);
}

function moveKeyMap2(x, y) {
 document.forms[0].KeyMapPosX.value = x;
 document.forms[0].KeyMapPosY.value = y;
 x = parseInt(x)+3;
 y = parseInt(y)+18;
  CWCDHTML_SetLayerPos("KeyMapLayerDiv", x, y);
  CWCDHTML_SetLayerPos("KeyMapLayerBG", x, y);
  CWCDHTML_SetLayerPos("zKeyMapBoxTop", x, y);
  CWCDHTML_SetLayerPos("zKeyMapBoxLeft", x, y);
  CWCDHTML_SetLayerPos("zKeyMapBoxBottom", x, y);
  CWCDHTML_SetLayerPos("zKeyMapBoxRight", x, y);

// Having the following lines enabled caused often errors, without fixing 
the sticking red rectangle bug.
  /*CWCDHTML_SetLayerPos("zKeyMapBox2Top", x, y);
  CWCDHTML_SetLayerPos("zKeyMapBox2Left", x, y);
  CWCDHTML_SetLayerPos("zKeyMapBox2Bottom", x, y);
  CWCDHTML_SetLayerPos("zKeyMapBox2Right", x, y);*/

   if (document.layers) //Netscape 4.x
 {
     gKeyMapWhspc = document.images['keymapFrameTL'].x;
     gKeyMapWvspc = document.images['keymapFrameTL'].y;
 }
 else
 {
     gKeyMapWhspc = CWCDHTML_FindObjectPosX( 
document.getElementById('keymapFrameTL'));
     gKeyMapWvspc = CWCDHTML_FindObjectPosY( document. 
getElementById('keymapFrameTL'));
 }

 gKeyMapWhspc+=1;
        gKeyMapWvspc+=1;
                KeyMapWsetZoomBoxSettings();
}

function keymap_vis ()
{
 keyvis = document.forms[0].KeyMapVis.value;

 if (keyvis == "1")
 {
  document.forms[0].KeyMapVis.value = 2;
  CWCDHTML_SetLayerVis("boxHandle", true);
  CWCDHTML_SetLayerVis("KeyMapLayerDiv", true);
  CWCDHTML_SetLayerVis("KeyMapLayerBG", true);
  CWCDHTML_SetLayerVis("zKeyMap2BoxLeft", true);
  CWCDHTML_SetLayerVis("zKeyMap2BoxBottom", true);
  CWCDHTML_SetLayerVis("zKeyMap2BoxRight", true);
  CWCDHTML_SetLayerVis("zKeyMap2BoxTop", true);
 }

 if (keyvis == "KeyMapVis" || keyvis == "2")
 {
  document.forms[0].KeyMapVis.value = 1;
  CWCDHTML_SetLayerVis("boxHandle", false);
  CWCDHTML_SetLayerVis("KeyMapLayerDiv", false);
  CWCDHTML_SetLayerVis("KeyMapLayerBG", false);
  CWCDHTML_SetLayerVis("zKeyMap2BoxLeft", false);
  CWCDHTML_SetLayerVis("zKeyMap2BoxBottom", false);
  CWCDHTML_SetLayerVis("zKeyMap2BoxRight", false);
  CWCDHTML_SetLayerVis("zKeyMap2BoxTop", false);
 }
}

function keymap_reset ()
{
 var keyvis = document.forms[0].KeyMapVis.value;

 if (keyvis == "KeyMapVis" || keyvis == "2")
 {
  CWCDHTML_SetLayerVis("boxHandle", true);
  CWCDHTML_SetLayerVis("KeyMapLayerDiv", true);
  CWCDHTML_SetLayerVis("KeyMapLayerBG", true);
  CWCDHTML_SetLayerVis("zKeyMap2BoxLeft", true);
  CWCDHTML_SetLayerVis("zKeyMap2BoxBottom", true);
  CWCDHTML_SetLayerVis("zKeyMap2BoxRight", true);
  CWCDHTML_SetLayerVis("zKeyMap2BoxTop", true);
 }

 if (keyvis == "1")
 {
  CWCDHTML_SetLayerVis("boxHandle", false);
  CWCDHTML_SetLayerVis("KeyMapLayerDiv", false);
  CWCDHTML_SetLayerVis("KeyMapLayerBG", false);
  CWCDHTML_SetLayerVis("zKeyMap2BoxLeft", false);
  CWCDHTML_SetLayerVis("zKeyMap2BoxBottom", false);
  CWCDHTML_SetLayerVis("zKeyMap2BoxRight", false);
  CWCDHTML_SetLayerVis("zKeyMap2BoxTop", false);
 }
}

This script was added to the main template file to position the key map 
relatively to the movable layer "boxHandle":

<script type="text/javascript"><!--
function load() {
 var group
 var coordinates = ToolMan.coordinates()
 var drag = ToolMan.drag()

 var origin = coordinates.create(0, 0)

 var boxHandle = document.getElementById("boxHandle")
 group = drag.createSimpleGroup(boxHandle, 
document.getElementById("handle"))
 group.addTransform(function(coordinate, dragEvent) {
  var scrollOffset = coordinates.scrollOffset()
  if (coordinate.y < scrollOffset.y) {
   coordinate = coordinates.create(coordinate.x, scrollOffset.y)
   moveKeyMap(coordinate)
   return coordinate
  }

  var clientHeight = coordinates.clientSize().y
  var boxHeight = coordinates._size(boxHandle).y
  if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight)) {
   coordinate = coordinates.create(coordinate.x,
     (scrollOffset.y + clientHeight) - boxHeight)
   moveKeyMap(coordinate)
   return coordinate
  }

  moveKeyMap(coordinate)
  return coordinate
 })
}
//-->
</script>

It is called on the onLoad function of the page.
Does somebody have an idea how to make red rectangle move as well?

Cheers,

Carlo