Changeset 323


Ignore:
Timestamp:
02/08/10 03:23:01 (5 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.