Question

So I have this application that someone coded a few years ago and it was done in a less than friendly way. Basically there is a map panel in the center of the page and off to the right is tabbed panels that have different search options for each. Dijit was not used and there are 2 buttons on each panel one to expand and one to close the panel. The buttons are images see the code below:

    <div align="center" title="Click to Close/Expand" style="background-image:url('images/headerBack.png'); height:30px;" >
    <div style="position:relative; width:264px; margin-right:auto; margin-left:auto; height:100%;">
        <img  src='./images/titleLayerControl.png' dojoAttachEvent="onclick:toggleShowHide" style="position:absolute; top:6px; left:0px; cursor:pointer;"/>
        <input type="image" id="close" dojoAttachEvent="onclick:hideWidget" style="position:absolute; top:12px; left:53px;" alt="Close" title="Close" src="./images/minusUp.png" onmouseout="this.src='./images/minusUp.png';" onmouseover="this.src='./images/minusOver.png';"/>
        <input type="image" id="expand" dojoAttachEvent="onclick:showWidget" style="position:absolute; top:12px; left:195px;" alt="Expand" title="Expand" src="./images/addUp.png" onmouseout="this.src='./images/addUp.png';" onmouseover="this.src='./images/addOver.png';"/>
    </div>
</div>

That is the code for the buttons. Now I have a dojo file see below:

,disableCloseButton:function(){ 
    $('#close').attr('disabled', 'disabled');
    $("#close").attr("src", "./images/minusDisabled.png");
}
,enableCloseButton:function(){      
    $('#close').removeAttr('disabled');
    $('#close').attr("src", "./images/minusUp.png")
}
,showWidget:function(){     
    dojo.style(this.contentNode.domNode,"visibility","visible");
    dojo.style(this.contentNode.domNode,"display","block");

    var d = this.expandedHeight;
    if (ct.isNumber(d) === true){
        var c = this.expandedHeight-this.collapsedHeight;
        dojo.style(this.domNode,"height",d+"px");
        dojo.style(this.contentNode.domNode,"height",c+"px");       
    } else {
        dojo.style(this.domNode,"height",d);
        dojo.style(this.contentNode.domNode,"height",d); 
    }

    this.expanded = true;
    this.showHook();        
    this.enableCloseButton();

}

,hideWidget:function(){//302697000      
    var d =this.collapsedHeight;
    var c = 0;

    dojo.style(this.contentNode.domNode,"visibility","hidden");
    dojo.style(this.contentNode.domNode,"display","none");
    dojo.style(this.domNode,"height",d+"px");
    dojo.style(this.contentNode.domNode,"height",c+"px");


    this.hideHook();   
    this.expanded = false;
    this.disableCloseButton();

}

What I want to do is when the “close” button is clicked disable it and when the “expand button is clicked enable the “Close” button and disable the “expand” button. As you can see I only have 1 method to showWidget and one to hideWidget. So how do I check to see which button on which panel has been clicked? Yes I know there is jquery mixed with dojo, several people have been hacking on this thing today, it is a mess.

Answer 1

Here is how I solved this. I added a dojoAttachPoint to the buttons I was trying to control see the code below:

    <div class="headerBack" title="Click to Close/Expand"
    >
    <div class="test" >
        <a 
        class="titleMyProperties"
        dojoAttachEvent="onclick:toggleShowHide"
        title="Close/Expand"></a>
        <a 
        dojoAttachPoint="closeNode"
        class="closeNode"             
        dojoAttachEvent="onclick:hideWidget"
        title="Close"></a>
        <a 
        dojoAttachPoint="expandNode"
        class="expandNode" 
        dojoAttachEvent="onclick:showWidget" 
        alt="Expand" 
        title="Expand"></a>
    </div>
</div>

Next I declared the attachpoint in my widget.js file. Then I added functions to swap the css class where I altered the pointer. I switched this site over to use 100% css sprites so swapping the images in an http call was no longer needed.

   toggleShowHide: function(){
    var e = this.expanded;
    if(e){
        this.hideWidget( );
        this.disableButton( );
    } else{
        this.showWidget( );
        this.enableButton( );
    }
    //this.expanded = !e;
},
//disable + and - buttons
disableButton: function(){
    $(this.closeNode).addClass('closeNodeDisabled');
    $(this.closeNode).removeClass('closeNode');     
    $(this.expandNode).addClass('expandNode');
    $(this.expandNode).removeClass('expandNodeDisabled');
},
//enable + and - buttons
enableButton: function(){
    $(this.closeNode).addClass('closeNode');
    $(this.closeNode).removeClass('closeNodeDisabled');
    $(this.expandNode).addClass('expandNodeDisabled');
    $(this.expandNode).removeClass('expandNode');
},

The CSS classes are as follows:

.closeNode{background-image:url(../images/sprite.png);
width:12px;
height:12px;
background-position:-625px -166px;
display:inline;
left:53px;
top:12px;
background-repeat:no-repeat;
cursor:pointer;
position:absolute}

.closeNode:hover{
width:12px;
height:12px;
background-position:-906px -96px;
display:inline;
left:53px;
position:absolute;top:12px;
background-repeat:no-repeat;
cursor:pointer}

.closeNodeDisabled{background-image:url(../images/sprite.png);
width:12px;
height:12px;
background-position:-823px -98px;
display:inline;
left:53px;
position:absolute;
top:12px;
background-repeat:no-repeat;
cursor:default}

.expandNode{background-image:url(../images/sprite.png);
width:12px;
height:12px;
background-position:-835px -98px;
display:inline;
background-repeat:no-repeat;
left:195px;
position:absolute;
top:12px;
cursor:pointer}

.expandNode:hover{
width:12px;
height:12px;
background-position:-811px -98px;
display:inline;
background-repeat:no-repeat;
left:195px;
position:absolute;
top:12px;
cursor:pointer}

.expandNodeDisabled{background-image:url(../images/sprite.png);
width:12px;
height:12px;
background-position:-930px -96px;
display:inline;
background-repeat:no-repeat;
left:195px;
position:absolute;
top:12px;
cursor:default}