Changeset 323 for trunk


Ignore:
Timestamp:
Feb 8, 2010, 3:23:01 AM (15 years ago)
Author:
gav
Message:

Add toggleWithImgAndEffect to JsUtil.
Replace control divs with our new JsUtil toggleControl taglib.
Small CSS adjustment to asset tree pane close.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/grails-app/i18n/messages.properties

    r320 r323  
    116116
    117117default.close.text=Close
     118default.options.text=Options
    118119
    119120default.list.failure=Could not generate list for class {0}.

  • trunk/grails-app/services/JsUtilService.groovy

    r322 r323  
    7070    }
    7171
     72    /**
     73    * Toggle the visibility of an html element and update an image.
     74    * @param toggleId The html id of the element to toggle.
     75    * @param imageid The html id of the image to update.
     76    * @param openImgUrl The url to apply as the image src when toggled element is visible.
     77    * @param closedImgUrl The url to apply as the image src when toggled element is hidden.
     78    * @param type The type of html action the javascript will be applied to e.g 'onclick', defaults to 'href'.
     79    * @returns A javascript string that can be assigned for example to an anchor href or onclick action.
     80    */
     81    def toggleWithImgAndEffect(toggleId, imageid, openImgUrl, closedImgUrl, type="href") {
     82
     83        def s = 'toggleWithImgAndEffectUtil(\"' + toggleId +'\", \"' + imageid +'\", \"' + openImgUrl +'\", \"' + closedImgUrl +'\");'
     84        if(type == "onclick")
     85            s + ' return false;'
     86        else
     87            'javascript: ' + s
     88
     89    }
     90
    7291} // end class

  • trunk/grails-app/taglib/JsUtilTagLib.groovy

    r322 r323  
    2323    * @param openImgUrl The url to apply as the image src when toggled element is visible.
    2424    * @param closedImgUrl The url to apply as the image src when toggled element is hidden.
     25    * @param effect The effect to apply, 'fade' uses the fade/appear effect while the default is to just toggle.
    2526    * @param text The text, if any, to display.
    2627    */
    … …  
    2829        def mkp = new groovy.xml.MarkupBuilder(out) //this line will be unnecessary in versions of Grails after version 1.2
    2930
     31        def toggleJs
     32
     33        // Do we want to fade/appear or just toggle.
     34        if(attrs.effect == "fade")
     35            toggleJs = js.toggleWithImgAndEffect(attrs.toggleId, attrs.imageId, attrs.openImgUrl, attrs.closedImgUrl)
     36        else
     37            toggleJs = js.toggleWithImg(attrs.toggleId, attrs.imageId, attrs.openImgUrl, attrs.closedImgUrl)
     38
    3039        mkp.div() {
    31             a( href: js.toggleWithImg(attrs.toggleId, attrs.imageId, attrs.openImgUrl, attrs.closedImgUrl) ) {
     40            a( href: toggleJs ) {
    3241                yieldUnescaped(attrs.text)
    3342                img(id: attrs.imageId, src: attrs.closedImgUrl, alt: "Show")

  • trunk/grails-app/views/taskDetailed/search.gsp

    r262 r323  
    4343            </div>
    4444
    45             <div id="resultsControlClosed">
    46                 <a href='' onclick="showElement('results');
    47                                                     Element.hide('resultsControlClosed');
    48                                                     Element.show('resultsControlOpened');
    49                                                     return false">
    50                     Options <img  src="${resource(dir:'images/skin',file:'bullet_arrow_right.png')}" alt="Show" />
    51                 </a>
    52             </div>
    53 
    54             <div id="resultsControlOpened" style="display:none;">
    55                 <a href='' onclick="hideElement('results');
    56                                                     Element.hide('resultsControlOpened');
    57                                                     Element.show('resultsControlClosed');
    58                                                     return false">
    59                     Options <img  src="${resource(dir:'images/skin',file:'bullet_arrow_down.png')}" alt="Show" />
    60                 </a>
    61             </div>
    62 
    63 
    64             <div id="results" style="display:none;">
     45            <jsUtil:toggleControl toggleId="options"
     46                                                    imageId="optionsImg"
     47                                                    closedImgUrl="${resource(dir:'images/skin',file:'bullet_arrow_right.png')}"
     48                                                    openImgUrl="${resource(dir:'images/skin',file:'bullet_arrow_down.png')}"
     49                                                    text="${g.message(code: 'default.options.text')}"
     50                                                    />
     51
     52            <div id="options" style="display:none;">
    6553                <g:form method="post" >
    6654                    <g:hiddenField name="params" value="${filterParams}" />

  • trunk/grails-app/views/taskDetailed/show.gsp

    r263 r323  
    8585                                    <tr class="prop">
    8686                                        <td valign="top" class="name">
    87                                             <div id="modControlClosed">
    88                                                 <a href='' onclick="showElement('modifications');
    89                                                                                     Element.hide('modControlClosed');
    90                                                                                     Element.show('modControlOpened');
    91                                                                                     return false">
    92                                                     Modifications <img  src="${resource(dir:'images/skin',file:'bullet_toggle_plus.png')}" alt="Show" />
    93                                                 </a>
    94                                             </div>
    95                                             <div id="modControlOpened" style="display:none;">
    96                                                 <a href='' onclick="hideElement('modifications');
    97                                                                                     Element.hide('modControlOpened');
    98                                                                                     Element.show('modControlClosed');
    99                                                                                     return false">
    100                                                     Modifications <img  src="${resource(dir:'images/skin',file:'bullet_toggle_minus.png')}" alt="Hide" />
    101                                                 </a>
    102                                             </div>
     87
     88                                            <jsUtil:toggleControl toggleId="modifications"
     89                                                                                    imageId="modificationsImg"
     90                                                                                    closedImgUrl="${resource(dir:'images/skin',file:'bullet_toggle_plus.png')}"
     91                                                                                    openImgUrl="${resource(dir:'images/skin',file:'bullet_toggle_minus.png')}"
     92                                                                                    effect="fade"
     93                                                                                    text="Modifications"
     94                                                                                    />
    10395                                        </td>
    10496

  • trunk/web-app/css/main.css

    r312 r323  
    610610}
    611611div.tree_pane_close {
    612     float: right;
     612    position: absolute;
     613    right: 5px;
    613614    padding: 5px;
    614615}

  • trunk/web-app/js/jsUtil.js

    r322 r323  
    2323    Effect.Fade(id,{duration:0.4,queue:'end'});
    2424}
     25
     26function toggleWithImgAndEffectUtil(id, imageId, openImgUrl, closedImgUrl) {
     27
     28    if( $(id).visible() ) {
     29        Effect.Fade(id,{duration:0.4,queue:'end'});
     30        $(imageId).src= closedImgUrl;
     31    }
     32    else {
     33        Effect.Appear(id,{duration:0.4,queue:'end'});
     34        $(imageId).src= openImgUrl;
     35    }
     36}
Note: See TracChangeset for help on using the changeset viewer.