Changeset 322 for trunk

Timestamp:

Feb 8, 2010, 2:51:23 AM (15 years ago)

Author:

gav

Message:

Move JavascriptService to JsUtilService.
Consolidate similar JsUtilService methods.
Create JsUtilTagLib?.
Disable pulsing of asset tree loading image.

Location:

trunk

Files:

• grails-app/services/AssetTreeService.groovy (modified) (11 diffs)
• grails-app/services/JsUtilService.groovy (moved) (moved from trunk/grails-app/services/JavascriptService.groovy) (4 diffs)
• grails-app/taglib/AssetTreeTagLib.groovy (modified) (2 diffs)
• grails-app/taglib/JsUtilTagLib.groovy (added)
• grails-app/views/layouts/main.gsp (modified) (1 diff)
• web-app/js/assetTree.js (modified) (2 diffs)
• web-app/js/jsUtil.js (moved) (moved from trunk/web-app/js/util.js) (1 diff)

trunk/grails-app/services/AssetTreeService.groovy

@@ -3 +3 @@
     boolean transactional = false
 
-    def js = new JavascriptService()
+    def js = new JsUtilService()
 
     def g = new org.codehaus.groovy.grails.plugins.web.taglib.ApplicationTagLib()
@@ -84 +84 @@
 
                 div(class: paneCloseHtmlClass()) {
-                    a( href: js.hrefToggle(paneHtmlId()) ) {
+                    a( href: js.toggle(paneHtmlId()) ) {
                         img(src: closeImg())
                     }
@@ -106 +106 @@
                 div( class: 'buttons') {
                     span(class: 'button') {
-                        input( type: 'button', value: g.message(code: 'default.close.text'), onclick: js.onclickToggle(paneHtmlId()) )
+                        input( type: 'button', value: g.message(code: 'default.close.text'), onclick: js.toggle(paneHtmlId(), "onclick") )
                     }
                 } // button div
@@ -132 +132 @@
                                 li() {
                                     if(site.sections) {
-                                        a(href: hrefToggleBranch(nextDivId()) ) {
+                                        a(href: toggleBranch(nextDivId()) ) {
                                             img( src: branchImg(divId), id: divId+'img' )
                                         }
@@ -152 +152 @@
                                                 li() {
                                                     if(section.assets) {
-                                                        a( href: hrefToggleBranch(nextDivId()) ) {
+                                                        a( href: toggleBranch(nextDivId()) ) {
                                                             img(src: branchImg(divId), id: divId+'img' )
                                                         }
@@ -173 +173 @@
                                                                 li() {
                                                                     if(asset.assetSubItems) {
-                                                                        a( href: hrefToggleBranch(nextDivId()) ) {
+                                                                        a( href: toggleBranch(nextDivId()) ) {
                                                                             img(src: branchImg(divId), id: divId+'img' )
                                                                         }
@@ -197 +197 @@
                                                                                 li() {
                                                                                     if(assetSubItemL1.subItems) {
-                                                                                        a( href: hrefToggleBranch(nextDivId()) ) {
+                                                                                        a( href: toggleBranch(nextDivId()) ) {
                                                                                             img(src: branchImg(divId), id: divId+'img' )
                                                                                         }
@@ -218 +218 @@
                                                                                                 li() {
                                                                                                     if(assetSubItemL2.subItems) {
-                                                                                                        a( href: hrefToggleBranch(nextDivId()) ) {
+                                                                                                        a( href: toggleBranch(nextDivId()) ) {
                                                                                                             img( src: branchImg(divId), id: divId+'img' )
                                                                                                         }
@@ -239 +239 @@
                                                                                                                 li() {
                                                                                                                     if(assetSubItemL3.subItems) {
-                                                                                                                        a( href: hrefToggleBranch(nextDivId()) ) {
+                                                                                                                        a( href: toggleBranch(nextDivId()) ) {
                                                                                                                             img( src: branchImg(divId), id: divId+'img' )
                                                                                                                         }
@@ -260 +260 @@
                                                                                                                                 li() {
             //                                                                                                                         if(assetSubItemL4.subItems) {
-            //                                                                                                                             a( href: hrefToggleBranch(nextDivId()) ) {
+            //                                                                                                                             a( href: toggleBranch(nextDivId()) ) {
             //                                                                                                                                 img( src: branchImg(divId), id: divId+'img' )
             //                                                                                                                             }
@@ -365 +365 @@
     }
 
-    def hrefToggleBranch(divId) {
-       'javascript: toggleBranch(\"' + divId + '\", \"' + divId + 'img' +'\", \"' + bulletTreeMinusImg() +'\", \"' + bulletTreePlusImg() + '\");'
+    def toggleBranch(divId) {
+        js.toggleWithImg(divId, divId + 'img', bulletTreeMinusImg(), bulletTreePlusImg())
     }
 

trunk/grails-app/services/JsUtilService.groovy

@@ -1 +1 @@
 /**
 * Provides some javascript utility methods.
-* To use include the following in the gsp head:
-* <!--
-* <g:javascript src="util.js" />
-* -->
-* @todo: util.js could be placed a taglib resources closure.
+* For use with JsUtilTagLib.
 */
-class JavascriptService {
+class JsUtilService {
 
     boolean transactional = false
@@ -16 +12 @@
     * Toggle the visibility of an html element.
     * @param id The html id of the element.
-    * @returns A javascript string that can be assigned to an onclick action.
+    * @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 onclickToggle(id) {
-        'return toggleUtil(\"' + id + '\");'
+    def toggle(id, type="href") {
+        def s = 'toggleUtil(\"' + id + '\");'
+        if(type == "onclick")
+            s + ' return false;'
+        else
+            'javascript: ' + s
     }
 
     /**
-    * Toggle the visibility of an html element.
-    * @param id The html id of the element.
-    * @returns A javascript string that can be assigned to an anchor href.
+    * 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 hrefToggle(id) {
-        'javascript: toggleUtil(\"' + id + '\");'
+    def toggleWithImg(toggleId, imageid, openImgUrl, closedImgUrl, type="href") {
+
+        def s = 'toggleWithImgUtil(\"' + toggleId +'\", \"' + imageid +'\", \"' + openImgUrl +'\", \"' + closedImgUrl +'\");'
+        if(type == "onclick")
+            s + ' return false;'
+        else
+            'javascript: ' + s
+
     }
 
@@ -34 +45 @@
     * Show an html element by slowly increasing the visibility.
     * @param id The html id of the element.
-    * @returns A javascript string that can be assigned to an onclick action.
+    * @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 onclickShow(id) {
-        'return showUtil(\"' + id + '\");'
-    }
-
-    /**
-    * Show an html element by slowly increasing the visibility.
-    * @param id The html id of the element.
-    * @returns A javascript string that can be assigned to an anchor href.
-    */
-    def hrefShow(id) {
-        'javascript: showUtil(\"' + id + '\");'
+    def show(id) {
+        def s = 'showUtil(\"' + id + '\");'
+        if(type == "onclick")
+            s + ' return false;'
+        else
+            'javascript: ' + s
     }
 
@@ -52 +59 @@
     * Hide an html element by slowly decreasing the visibility.
     * @param id The html id of the element.
-    * @returns A javascript string that can be assigned to an onclick action.
+    * @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 onclickHide(id) {
-        'return hideUtil(\"' + id + '\");'
-    }
-
-    /**
-    * Hide an html element by slowly decreasing the visibility.
-    * @param id The html id of the element.
-    * @returns A javascript string that can be assigned to an anchor href.
-    */
-    def hrefHide(id) {
-        'javascript: hideUtil(\"' + id + '\");'
+    def hide(id) {
+        def s = 'hideUtil(\"' + id + '\");'
+        if(type == "onclick")
+            s + ' return false;'
+        else
+            'javascript: ' + s
     }
 

trunk/grails-app/taglib/AssetTreeTagLib.groovy

@@ -6 +6 @@
     static namespace = 'gnuMims'
 
-    def js = new JavascriptService()
+    def js = new JsUtilService()
     def ts = new AssetTreeService()
 
@@ -37 +37 @@
         mkp.div(class: ts.paneHtmlClass(), id: ts.paneHtmlId(), style: 'display:none;') {
             div(class: ts.paneCloseHtmlClass()) {
-                a( href: js.hrefToggle(ts.paneHtmlId()) ) {
+                a( href: js.toggle(ts.paneHtmlId()) ) {
                     img(src: ts.closeImg())
                 }

trunk/grails-app/views/layouts/main.gsp

@@ -11 +11 @@
         <g:javascript library="prototype/effects" />
         <g:javascript src="overlayPane.js" />
-        <g:javascript src="util.js" />
+        <jsUtil:resources />
         <gnuMims:resources />
     </head>

trunk/web-app/js/assetTree.js

@@ -4 +4 @@
     Effect.Appear(paneDivId,{duration:0.4});
 
-    // Pulsing loadingImg blocks the default grails animated gif till complete.
-    // After which the default will show as normal.
-    new Effect.Pulsate($(loadingImg), { pulses: 200, duration: 133 });
+    // Disabled since pulsing effect blocks other javascript till complete.
+    // The effect may be stopped with e.cancel() but we will use the default Grails spinner for now.
+    // def e = new Effect.Pulsate($(loadingImg), { pulses: 200, duration: 133 });
 
-    // The updater is only called once per page refresh.
     new Ajax.Updater({ success: paneDivId }, url, {asynchronous:true,evalScripts:true});
 }
@@ -34 +33 @@
     new Ajax.Request(saveUrl, {parameters: params, asynchronous: false});
 }
-
-function toggleBranch(divId, imageId, openImgUrl, closedImgUrl) {
-
-    $(divId).toggle();
-
-    if( $(divId).visible() ) {
-        $(imageId).src= openImgUrl;
-    }
-    else {
-        $(imageId).src= closedImgUrl;
-    }
-
-}

trunk/web-app/js/jsUtil.js

@@ -2 +2 @@
 function toggleUtil(id) {
     $(id).toggle();
+}
+
+function toggleWithImgUtil(id, imageId, openImgUrl, closedImgUrl) {
+
+    $(id).toggle();
+
+    if( $(id).visible() ) {
+        $(imageId).src= openImgUrl;
+    }
+    else {
+        $(imageId).src= closedImgUrl;
+    }
 }