[Chameleon] Chameleon 2.6 RC1 Broken Update Map in JSAPI

Normand Savard nsavard at mapgears.com
Mon Sep 24 09:04:23 EDT 2007


Nolte, Tim wrote:

>Ok, I'm not really getting anywhere on this Update Map button issue. I'm
>including all of my legend code in hopes that someone can help me find
>where the problem is.
>
>template.html -
>
>	// this is within the <head> tags
>	<cwc2 type="SelectLayers" />
>	
>	<script language="JavaScript" type="text/javascript">
>	<!--
>		function myOnLoad() {
>			CWC2OnLoadFunction();
>			goCheckboxManager.checkState();
>		}
>	//-->
>	</script>
>
>
>
>	// this is what I have in my section for my legend, including
>the Update Map widget
>	<div style="margin-bottom:4px;">
>		<!-- UPDATE MAP -->
>		<cwc2 type="UpdateMap" styleresource="TextButtons"
>visible="true" image="icons/icon_update.png" imagetip="update map"
>label="Update">
>			<image state="normal"/>
>			<image state="selected"/>
>			<image state="hover"/>
>		</cwc2>
>	</div>
>	<!-- MAP LEGEND/LAYER CONTROL -->
>	<span class="generalLabel">Turn all Layers: </span><a
>href="javascript:void(0)" onClick="goCheckboxManager.set( true ); return
>false;"><span class="generalLabel">on</span></a><span
>class="generalLabel"> |</span>
>	<a href="javascript:void(0)" onClick="goCheckboxManager.set(
>false ); return false;"><span class="generalLabel">off</span></a><br>
>	<a href="javascript:void(0)"
>onClick="goExpanderManager.expandAll( ); return false;"><span
>class="generalLabel">expand all</span></a><span class="generalLabel">
>|</span>
>	<a href="javascript:void(0)"
>onClick="goExpanderManager.collapseAll( ); return false;"><span
>class="generalLabel">collapse all</span></a>
>	<input type="hidden" name="expanderTracker"
>value="[$expanderTracker|$]">
>	<script language="JavaScript" type="text/javascript"
>src="jsExpander.js"></script>
>	<script language="JavaScript" type="text/javascript"
>src="jsCheckbox.js"></script>
>	<script language="JavaScript" type="text/javascript">
>		goExpanderManager.formElement =
>document.forms[0].expanderTracker;
>	</script>
>	<!-- LEGEND TEMPLATE -->
>	<cwc2 type="LegendTemplate" visible="true" embedded="true"
>template="legend_template.html" popupstyleresource="TextButtons"
>popupwidth="500" popupheight="400" status="false" menubar="false"/>
>	<script language="JavaScript" type="text/javascript">
>		goExpanderManager.initialize();
>	</script><br>
>
>
>
>legend_template.html -
>
>	[leg_group_html]
>	<!-- comment on leg_group_html block -->
>	<div id="group_[leg_group_name]" name="group_[leg_group_name]"
>class="legendGroup">
>		<script langauge="JavaScript" type="text/javascript">
>			oGroup = new cExpander( document.getElementById(
>'group_[leg_group_name]' ));
>			goExpanderManager.add( oGroup );
>		</script>
>		<table cellspacing="0" cellpadding="0" border="0"
>width="100%">
>		  <tr>
>		    <td width="15" valign="center"  bgcolor="#ffffff"><a
>href="javascript:void(0)" onclick="document.getElementById(
>'group_[leg_group_name]' ).expander.toggle(); return false;"><img
>name="img_[leg_group_name]" id="img_[leg_group_name]"
>src="./images/expand.png" border="0"></a></td>
>		    <td width="22" valign="top" bgcolor="#ffffff"><img
>class="legendExpand" name="cbg_[leg_group_name]"
>id="cbg_[leg_group_name]" src="./images/checkbox_1.png" width="13"
>height="13" border="0">
>		    <td><span
>class="generalLabel"><b>[leg_group_name]</b></span></td>
>		  </tr>
>		</table>
>		<script langauge="JavaScript" type="text/javascript">
>			oGroup.img = CWCDHTML_GetImage(
>"img_[leg_group_name]" );
>			oGroup.szExpandImgSrc = "images/expand.png";
>			oGroup.szCollapseImgSrc = "images/collapse.png";
>			
>			oGroupCB = new jsCheckbox(
>CWCDHTML_GetImage("cbg_[leg_group_name]"));
>			oGroupCB.szOnImgSrc = "images/checkbox_0.png";
>			oGroupCB.szOffImgSrc = "images/checkbox_1.png";
>			oGroupCB.szPartialImgSrc =
>"images/checkbox_2.png";
>			goCheckboxManager.addChild( oGroupCB );
>		</script>
>	</div>
>	[/leg_group_html]
>	
>	[leg_layer_html order=ascending opt_flag=14]
>	<!-- comment on leg_layer_html block -->
>	<div id="layer_[leg_layer_name]" style="display:none;"
>class="legendLayer">
>		<script langauge="JavaScript" type="text/javascript">
>			oLayer = new cExpander( document.getElementById(
>'layer_[leg_layer_name]' ));
>			oGroup.addElement( oLayer );
>		</script>
>		<table cellspacing="0" cellpadding="0" border="0"
>width="100%">
>		<tr>
>		  <td width="15">&nbsp;</td>
>		  <td width="19">&nbsp;</td>
>		  <td width="22" valign="top" bgcolor="#ffffff">
>			<input type="checkbox" id="cbl_[leg_layer_name]"
>name="legendlayername[]" value="[leg_layer_name]" [if name=layer_status
>oper=eq value=1]CHECKED[/if][if name=layer_status oper=eq
>value=2]CHECKED[/if]>
>		  </td>
>		  <td width="19" valign="top">[if name=leg_icon_url
>oper=isnull]<img src="[leg_icon width=15 height=15]" width="15"
>height="15">[/if][if name=leg_icon_url oper=isset]<img src="[metadata
>name=leg_icon_url]" width="15" height="15">[/if]</td>
>		  <td><span class="generalLabel">[if name=leg_title_en
>oper=isnull]<a href="javascript:void(0);"
>onclick="javascript:LegendTemplateLayerInfo('[leg_layer_name]');">[leg_l
>ayer_name]</a>[/if][if name=leg_title_en oper=isset][metadata
>name=leg_title_en][/if]</span>
>		  </td>
>		</tr>
>		</table>
>	</div>
>	<script langauge="JavaScript" type="text/javascript">
>		oLayerCB = new jsCheckbox( document.getElementById(
>'cbl_[leg_layer_name]' ));
>		oGroupCB.addChild( oLayerCB );
>	</script>
>	[/leg_layer_html]
>
>
>jsCheckbox.js - 
>
>	var goCheckboxManager = new jsCheckbox();
>	
>	function jsCheckbox( obj )
>	{
>	    this.children = new Array();
>	    this.obj = obj;
>	    this.parent = null;
>	    
>	    this.state = 1;
>	    
>	    this.szOnImgSrc = '';
>	    this.szPartialImgSrc = '';
>	    this.szOffImgSrc = '';
>	    
>	    if (this.obj != null)
>	    {
>		this.obj.cb = this;
>		this.obj.onclick = jsCheckbox_onClick;
>	    }
>	    
>	    this.addChild = jsCheckbox_addChild;
>	    this.checkState = jsCheckbox_checkState;
>	    this.get = jsCheckbox_get;
>	    this.set = jsCheckbox_set;
>	    this.update = jsCheckbox_update;
>	}
>	
>	function jsCheckbox_addChild( oChild )
>	{
>	    this.children[this.children.length] = oChild;
>	    oChild.parent = this;
>	}
>	
>	function jsCheckbox_checkState() {
>	    if (this.children.length == 0) {
>		if (this.obj.type == 'checkbox') {
>		    this.state = (this.obj.checked) ? 1 : 0;
>		} else {
>		    if (this.obj.src == this.szOnImgSrc) {
>			this.state = 1;
>		    } else if (this.obj.src == this.szOffImgSrc) {
>			this.state = 0;
>		    } else {
>			this.state = 2;
>		    }
>		}
>	    } else {
>		var nChildrenOn = 0;
>	    
>		for(var i=0; i<this.children.length;i++) {
>		    if (this.children[i].checkState() != 0) {
>			nChildrenOn ++;
>		    }
>		}
>		
>		if (nChildrenOn == 0) {
>		    this.state = 0;
>		} else if (nChildrenOn < this.children.length) {
>		    this.state = 2;
>		} else {
>		    this.state = 1;
>		}
>	    }
>		
>	    if (this.obj != null) {
>		this.update();
>	    }
>	    
>	    return this.state;
>	}
>	
>	function jsCheckbox_get()
>	{
>	    if (this.obj != null)
>	    {
>		return this.state;
>	    }
>	    else
>	    {
>		return false;
>	    }
>	}
>	
>	function jsCheckbox_set( nState )
>	{
>	    if (this.obj != null)
>	    {
>		this.state = nState;
>		this.update();
>	    }
>	    for(var i=0; i<this.children.length;i++)
>	    {
>		this.children[i].set(nState);
>	    }
>	}
>	
>	/**
>	 * general click handler function, not part of the class
>	 */
>	function jsCheckbox_onClick( e )
>	{
>	    //alert( 'here' );
>	    var target;
>	    if (CWCIsIE) {
>		e = window.event;
>		target = window.event.srcElement;
>		e.cancelBubble = true;
>		e.returnValue = true;
>	    } else {
>		target = e.target
>	    }
>	    //alert( target.cb.state );
>	    if (target.cb != null) {
>		if (target.cb.state == 1)
>		    target.cb.set( 0 );
>		else
>		    target.cb.set( 1 );
>	    }
>	    
>	    if (target.cb.parent != null) {
>		target.cb.parent.checkState();
>	    }
>	    return true;
>	}
>	
>	function jsCheckbox_update()
>	{
>	    if (this.obj.type == 'checkbox')
>	    {
>		if (this.state == 2)
>		    this.state = 0;
>		this.obj.checked = (this.state == 0) ? false : true;
>	    }
>	    else
>	    {
>		//assume image
>		if (this.state == 0)
>		{
>		    this.obj.src = this.szOnImgSrc;
>		}
>		else if (this.state == 1)
>		{
>		    this.obj.src = this.szOffImgSrc;
>		}
>		else
>		{
>		    this.obj.src = this.szPartialImgSrc;
>		}
>	    }
>	}
>	
>	function debug( obj, indent )
>	{
>	    var result = '';
>	    if (obj.obj != null)
>		 result = obj.obj.id + "\n";
>	    for( var i=0; i<obj.children.length; i++)
>	    {
>		result = result + indent + debug( obj.children[i], "--"
>+ indent);
>	    }
>	    return result;
>	}
>
>
>jsExpander.js - 
>
>	var goExpanderManager = new cExpanderManager();
>	
>	/*
>	 * class to manage top level expander state between page
>	 * loads
>	 */
>	function cExpanderManager()
>	{
>	    this.expanders = new Array();
>	    this.formElement = null;
>	    
>	    this.add = cExpanderManager_Add;
>	    this.initialize = cExpanderManager_Initialize;
>	    this.registerOpen = cExpanderManager_RegisterOpen;
>	    this.registerClose = cExpanderManager_RegisterClose;
>	    this.isVisible = function() { return true; }
>	    this.isElementVisible = cExpanderManager_IsElementVisible;
>	    
>	    this.expandAll = cExpanderManager_ExpandAll;
>	    this.collapseAll = cExpanderManager_CollapseAll;
>	}
>	
>	function cExpanderManager_Add( oExpander )
>	{
>	    this.expanders[this.expanders.length] = oExpander;
>	    oExpander.manager = this;
>	}
>	
>	function cExpanderManager_Initialize()
>	{
>	    if (this.formElement == null)
>		return;
>		
>	    for(var i=0; i < this.expanders.length; i++)
>	    {
>		if (this.expanders[i].bIsOpen)
>		    this.registerOpen( this.expanders[i] );
>		this.expanders[i].initialize( this.isElementVisible(
>this.expanders[i].element.id ));
>	    }
>	}
>	
>	function cExpanderManager_RegisterOpen( oExpander )
>	{
>	    if (this.formElement == null)
>		return;
>	
>	    if (this.formElement.value.indexOf( oExpander.element.id ) <
>0 )
>	    {
>		if (this.formElement.value != '')
>		    this.formElement.value += ",";
>		this.formElement.value += oExpander.element.id;
>	    }  
>	}
>	
>	function cExpanderManager_RegisterClose( oExpander )
>	{
>	    if (this.formElement == null)
>		return;
>	
>	    var rx = new RegExp( oExpander.element.id, '' );
>	    var text = this.formElement.value;
>	    text = text.replace( rx, '' );
>	    text = text.replace( /,,/g, ',' );
>	    if (text.substr(0, 1) == ',')
>		text = text.slice( 1 );
>	    if (text.substr(-1) == ',')
>		text = text.slice( 0, -1);
>	    this.formElement.value = text;
>	}
>	
>	function cExpanderManager_IsElementVisible( id )
>	{
>	    rx = new RegExp( id, '' );
>	    return rx.test( this.formElement.value );
>	}
>	
>	function cExpanderManager_ExpandAll()
>	{
>	    for(var i=0; i < this.expanders.length; i++)
>	    {
>		this.expanders[i].expandAll();
>	    }
>	}
>	
>	function cExpanderManager_CollapseAll()
>	{
>	    for(var i=0; i < this.expanders.length; i++)
>	    {
>		this.expanders[i].collapseAll();
>	    }
>	    return true;
>	}
>	
>	/*
>	 * basic expander class to handle an expandable element
>	 * that expands or contracts child elements.
>	 */
>	function cExpander( elm )
>	{
>	    this.element = elm;
>	    this.element.expander = this;
>	    this.children = new Array();
>	    this.bIsOpen = false;
>	    this.manager = null; 
>	    this.img = null;
>	    this.szExpandImgSrc = '';
>	    this.szCollapseImgSrc = '';
>	    
>	    this.addElement = cExpander_AddElement;
>	    this.open = cExpander_Open;
>	    this.close = cExpander_Close;
>	    this.expandAll = cExpander_ExpandAll;
>	    this.collapseAll = cExpander_CollapseAll;
>	    this.expand = cExpander_Expand;
>	    this.contract = cExpander_Contract;
>	    this.toggle = cExpander_Toggle;
>	    this.initialize = cExpander_Initialize;
>	    this.registerOpen = cExpander_RegisterOpen;
>	    this.registerClose = cExpander_RegisterClose;
>	    this.isVisible = cExpander_IsVisible;
>	}
>	
>	function cExpander_AddElement( elm )
>	{
>	    this.children[this.children.length] = elm;
>	    elm.manager = this;
>	    return true;
>	}
>	
>	function cExpander_Open()
>	{
>	    for( var i=0; i<this.children.length; i++)
>	    {
>		this.children[i].element.style.display = 'block';
>		if (this.children[i].bIsOpen)
>		{
>		    this.children[i].open();
>		}
>	    }
>	    if (this.img != null && this.szCollapseImgSrc != '')
>	    {
>		this.img.src = this.szCollapseImgSrc;
>	    }
>	    return true;
>	}
>	
>	function cExpander_Close()
>	{
>	    for( var i=0; i<this.children.length; i++)
>	    {
>		this.children[i].element.style.display = 'none';
>		this.children[i].close();
>	    }
>	    if (this.img != null && this.szExpandImgSrc != '')
>	    {
>		this.img.src = this.szExpandImgSrc;
>	    }
>	    return true;
>	}
>	
>	function cExpander_ExpandAll()
>	{
>	    for( var i=0; i<this.children.length; i++)
>	    {
>		this.children[i].expandAll();
>	    }
>	    this.expand();
>	    return true;
>	}
>	
>	function cExpander_CollapseAll()
>	{
>	    for( var i=0; i<this.children.length; i++)
>	    {
>		this.children[i].collapseAll();
>	    }
>	    this.contract();
>	    return true;
>	}
>	
>	function cExpander_Expand()
>	{
>	    this.bIsOpen = true;
>	    this.registerOpen( this );
>	    this.open();
>	    return true;
>	}
>	
>	function cExpander_Contract()
>	{
>	    this.bIsOpen = false;
>	    this.registerClose( this );
>	    this.close();
>	    return true;
>	}
>	
>	function cExpander_Toggle()
>	{
>	    if (this.bIsOpen)
>		this.contract();
>	    else
>		this.expand();
>	    return true;
>	}
>	
>	/* intialize this and all children recursively */
>	function cExpander_Initialize( bState )
>	{
>	    this.bIsOpen = bState;
>	    for( var i=0; i<this.children.length; i++)
>	    {
>		var child = this.children[i];
>		if (this.isVisible())
>		    child.element.style.display = 'block';
>		
>		if (child.bIsOpen)
>		    this.registerOpen( child );
>	       
>		this.children[i].initialize(
>goExpanderManager.isElementVisible( child.element.id ));
>	    }
>	    if( this.img != null )
>	    {
>		if (this.bIsOpen && this.szCollapseImgSrc != '')
>		{
>		    this.img.src = this.szCollapseImgSrc;
>		}
>		else if (!this.bIsOpen && this.szExpandImgSrc != '')
>		{
>		    this.img.src = this.szExpandImgSrc;
>		}
>	    }
>	    return true;
>	}
>	
>	/* cascade registration to top level manager */
>	function cExpander_RegisterOpen(elm)
>	{
>	    if (this.manager != null)
>		this.manager.registerOpen( elm );
>		
>	    return true;
>	}
>	
>	function cExpander_RegisterClose(elm)
>	{
>	    if (this.manager != null)
>		this.manager.registerClose( elm );
>	
>	    return true;
>	}
>	
>	/* determine if all elements in heirarchy are also open */
>	function cExpander_IsVisible()
>	{
>	    var bVisible = this.bIsOpen;
>	    if (this.manager != null)
>		bVisible = bVisible && this.manager.isVisible();
>	    return bVisible;
>	}
>
>
>Perhaps someone can clue me in to where I need to make the change.
>Actually, what would be most helpful is a good explanation for the
>changes that need to be made not just a "insert here" or "change to
>this" sort of response. Thanks in advance!
>
>  
>
Tim,

I worked on this last week but was forced to jump on something else.  
Don't be desperate I will come back on this today or tomorrow.

Norm


More information about the Chameleon mailing list