Changeset 323

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:

• grails-app/i18n/messages.properties (modified) (1 diff)
• grails-app/services/JsUtilService.groovy (modified) (1 diff)
• grails-app/taglib/JsUtilTagLib.groovy (modified) (2 diffs)
• grails-app/views/taskDetailed/search.gsp (modified) (1 diff)
• grails-app/views/taskDetailed/show.gsp (modified) (1 diff)
• web-app/css/main.css (modified) (1 diff)
• web-app/js/jsUtil.js (modified) (1 diff)

trunk/grails-app/i18n/messages.properties

@@ -116 +116 @@
 
 default.close.text=Close
+default.options.text=Options
 
 default.list.failure=Could not generate list for class {0}.

trunk/grails-app/services/JsUtilService.groovy

@@ -70 +70 @@
     }
 
+    /**
+    * Toggle the visibility of an html element and update an image.
+    * @param toggleId The html id of the element to toggle.
+    * @param imageid The html id of the image to update.
+    * @param openImgUrl The url to apply as the image src when toggled element is visible.
+    * @param closedImgUrl The url to apply as the image src when toggled element is hidden.
+    * @param type The type of html action the javascript will be applied to e.g 'onclick', defaults to 'href'.
+    * @returns A javascript string that can be assigned for example to an anchor href or onclick action.
+    */
+    def toggleWithImgAndEffect(toggleId, imageid, openImgUrl, closedImgUrl, type="href") {
+
+        def s = 'toggleWithImgAndEffectUtil(\"' + toggleId +'\", \"' + imageid +'\", \"' + openImgUrl +'\", \"' + closedImgUrl +'\");'
+        if(type == "onclick")
+            s + ' return false;'
+        else
+            'javascript: ' + s
+
+    }
+
 } // end class

trunk/grails-app/taglib/JsUtilTagLib.groovy

@@ -23 +23 @@
     * @param openImgUrl The url to apply as the image src when toggled element is visible.
     * @param closedImgUrl The url to apply as the image src when toggled element is hidden.
+    * @param effect The effect to apply, 'fade' uses the fade/appear effect while the default is to just toggle.
     * @param text The text, if any, to display.
     */
@@ -28 +29 @@
         def mkp = new groovy.xml.MarkupBuilder(out) //this line will be unnecessary in versions of Grails after version 1.2
 
+        def toggleJs
+
+        // Do we want to fade/appear or just toggle.
+        if(attrs.effect == "fade")
+            toggleJs = js.toggleWithImgAndEffect(attrs.toggleId, attrs.imageId, attrs.openImgUrl, attrs.closedImgUrl)
+        else
+            toggleJs = js.toggleWithImg(attrs.toggleId, attrs.imageId, attrs.openImgUrl, attrs.closedImgUrl)
+
         mkp.div() {
-            a( href: js.toggleWithImg(attrs.toggleId, attrs.imageId, attrs.openImgUrl, attrs.closedImgUrl) ) {
+            a( href: toggleJs ) {
                 yieldUnescaped(attrs.text)
                 img(id: attrs.imageId, src: attrs.closedImgUrl, alt: "Show")

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

@@ -43 +43 @@
             </div>
 
-            <div id="resultsControlClosed">
-                <a href='' onclick="showElement('results');
-                                                    Element.hide('resultsControlClosed');
-                                                    Element.show('resultsControlOpened');
-                                                    return false">
-                    Options <img  src="${resource(dir:'images/skin',file:'bullet_arrow_right.png')}" alt="Show" />
-                </a>
-            </div>
-
-            <div id="resultsControlOpened" style="display:none;">
-                <a href='' onclick="hideElement('results');
-                                                    Element.hide('resultsControlOpened');
-                                                    Element.show('resultsControlClosed');
-                                                    return false">
-                    Options <img  src="${resource(dir:'images/skin',file:'bullet_arrow_down.png')}" alt="Show" />
-                </a>
-            </div>
-
-
-            <div id="results" style="display:none;">
+            <jsUtil:toggleControl toggleId="options"
+                                                    imageId="optionsImg"
+                                                    closedImgUrl="${resource(dir:'images/skin',file:'bullet_arrow_right.png')}"
+                                                    openImgUrl="${resource(dir:'images/skin',file:'bullet_arrow_down.png')}"
+                                                    text="${g.message(code: 'default.options.text')}"
+                                                    />
+
+            <div id="options" style="display:none;">
                 <g:form method="post" >
                     <g:hiddenField name="params" value="${filterParams}" />

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

@@ -85 +85 @@
                                     <tr class="prop">
                                         <td valign="top" class="name">
-                                            <div id="modControlClosed">
-                                                <a href='' onclick="showElement('modifications');
-                                                                                    Element.hide('modControlClosed');
-                                                                                    Element.show('modControlOpened');
-                                                                                    return false">
-                                                    Modifications <img  src="${resource(dir:'images/skin',file:'bullet_toggle_plus.png')}" alt="Show" />
-                                                </a>
-                                            </div>
-                                            <div id="modControlOpened" style="display:none;">
-                                                <a href='' onclick="hideElement('modifications');
-                                                                                    Element.hide('modControlOpened');
-                                                                                    Element.show('modControlClosed');
-                                                                                    return false">
-                                                    Modifications <img  src="${resource(dir:'images/skin',file:'bullet_toggle_minus.png')}" alt="Hide" />
-                                                </a>
-                                            </div>
+
+                                            <jsUtil:toggleControl toggleId="modifications"
+                                                                                    imageId="modificationsImg"
+                                                                                    closedImgUrl="${resource(dir:'images/skin',file:'bullet_toggle_plus.png')}"
+                                                                                    openImgUrl="${resource(dir:'images/skin',file:'bullet_toggle_minus.png')}"
+                                                                                    effect="fade"
+                                                                                    text="Modifications"
+                                                                                    />
                                         </td>
 

trunk/web-app/css/main.css

@@ -610 +610 @@
 }
 div.tree_pane_close {
-    float: right;
+    position: absolute;
+    right: 5px;
     padding: 5px;
 }

trunk/web-app/js/jsUtil.js

@@ -23 +23 @@
     Effect.Fade(id,{duration:0.4,queue:'end'});
 }
+
+function toggleWithImgAndEffectUtil(id, imageId, openImgUrl, closedImgUrl) {
+
+    if( $(id).visible() ) {
+        Effect.Fade(id,{duration:0.4,queue:'end'});
+        $(imageId).src= closedImgUrl;
+    }
+    else {
+        Effect.Appear(id,{duration:0.4,queue:'end'});
+        $(imageId).src= openImgUrl;
+    }
+}