[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"> </td>
> <td width="19"> </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