Changeset 312 for trunk


Ignore:
Timestamp:
Feb 3, 2010, 1:32:19 PM (15 years ago)
Author:
gav
Message:

Refactor asset tree taglib to populate the asset tree table via an ajax call to AssetTreeService.
Move assetTree javascript to it's own js file and util javascript to a util.js file and service.

Location:
trunk
Files:
4 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/grails-app/controllers/AssetDetailedController.groovy

    r306 r312  
    99    def exportService
    1010    def assetService
     11    def assetTreeService
    1112
    1213    // the delete, save and update actions only accept POST requests
    … …  
    1718
    1819    def importAssetTree = {
     20    }
     21
     22    def assetTree = {
     23        def s = assetTreeService.buildAssetTree(params, session)
     24        render s
    1925    }
    2026

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

    r300 r312  
    113113assignedGroup.task.not.found=Please select a task and then ''Add Assigned Group''.
    114114assignedPerson.task.not.found=Please select a task and then ''Add Assigned Person''.
     115
     116default.close.text=Close
    115117
    116118default.list.failure=Could not generate list for class {0}.

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

    r308 r312  
    66    static namespace = 'gnuMims'
    77
     8    def js = new JavascriptService()
     9    def ts = new AssetTreeService()
     10
     11    /**
     12    * Include required javascript and do setup here.
     13    */
    814    def resources = { attrs ->
    9         ///@todo: should include our javascript and do setup here.
     15        out << g.javascript(src: "assetTree.js")
    1016    }
    1117
    12     def assetTreeButton = {
     18    /**
     19    * Button that opens the asset tree pane and calls the javascript to populate it.
     20    */
     21    def assetTreeButton = { attrs ->
    1322        def mkp = new groovy.xml.MarkupBuilder(out) //this line will be unnecessary in versions of Grails after version 1.2
    1423
    15         mkp.div(class: "tree_button") {
    16             a(href: showPane()) {
    17                 img(src: treeRootImg())
     24        mkp.div( class: ts.buttonHtmlClass() ) {
     25            a( href: ts.hrefShowPane() ) {
     26                img(src: ts.treeRootImg())
    1827            }
    19         }
    20     } // mkp
     28        } // mkp
     29    } // assetTreeButton
    2130
    22     def assetTree = { attrs ->
    23 
    24         def sites = Site.list()
    25 
    26         def visibleBranches = session.assetTreeVisibleBranches ? session.assetTreeVisibleBranches.tokenize(',') : []
    27 
    28         def branchStyle = { branchId ->
    29             if(visibleBranches.contains(branchId))
    30                 ''
    31             else
    32                 'display:none;'
    33         }
    34 
    35         def branchImg = { branchId ->
    36             if(visibleBranches.contains(branchId))
    37                 bulletTreeMinusImg()
    38             else
    39                 bulletTreePlusImg()
    40         }
    41 
    42         def divIdCount = 0
    43         def divId = ''
    44         def nextDivId = {
    45             divIdCount++
    46             divId = 'assetTreeBranch'+divIdCount
    47         }
    48 
     31    /**
     32    * The asset tree pane, ready for populating by an ajax call to AssetTreeSevice.
     33    */
     34    def assetTreePane = { attrs ->
    4935        def mkp = new groovy.xml.MarkupBuilder(out) //this line will be unnecessary in versions of Grails after version 1.2
    5036
    51         // Offer a site create link if no sites are found.
    52         if(!sites) {
    53             mkp.div(class: 'overlayPane', id: 'assetTreePane', style: 'display:none;') {
    54                 div(class: 'tree', id: 'assetTreeTable') {
    55                     table() {
    56                         tr() {
    57                             td( valign: 'top', class: 'value') {
    58                                 ul() {
    59                                     img(src: treeRootImg(), alt: 'TreeRoot')
    60                                     li() {
    61                                         a(href: siteCreateLink()) {
    62                                             img(src: addImg(), alt: 'Add', title: 'Add Site')
    63                                         }
    64                                     } // li
    65                                 } // ul
    66                             } // td
    67                         } // tr
    68                     } // table
    69                 } // div
     37        mkp.div(class: ts.paneHtmlClass(), id: ts.paneHtmlId(), style: 'display:none;') {
     38            div(class: ts.paneCloseHtmlClass()) {
     39                a( href: js.hrefToggle(ts.paneHtmlId()) ) {
     40                    img(src: ts.closeImg())
     41                }
     42            }
    7043
    71                 div( class: 'buttons') {
    72                     span(class: 'button') {
    73                         input( type: 'button', value: 'Close', onclick: hideAssetTreePane() )
    74                     }
    75                 } // button div
    76             } // mkp
    77             return
    78         } // if(!sites)
    79 
    80 
    81         /// @todo: use a loop for the subItem levels.
    82         mkp.div(class: 'overlayPane', id: 'assetTreePane', style: 'display:none;') {
    83             div(class: 'tree', id: 'assetTreeTable') {
    84                 table() {
     44            div(class: ts.tableDivHtmlClass()) {
     45                table(id: ts.tableHtmlId()) {
    8546                    tr() {
    86                         td( valign: 'top', class: 'value') {
     47                        td(valign: 'top', class: 'value') {
    8748                            ul() {
    88                                 img(src: treeRootImg(), alt: 'TreeRoot')
    89                                 for(site in sites.sort { p1, p2 -> p1.name.compareToIgnoreCase(p2.name) }) {
    90                                     li() {
    91                                         if(site.sections) {
    92                                             a(href: toggleBranch(nextDivId()) ) {
    93                                                 img( src: branchImg(divId), id: divId+'img' )
    94                                             }
    95                                         }
    96                                         else
    97                                             img(src: dashImg())
    98                                         a( href: siteShowLink(site.id), onclick: hideAssetTreePane() ) {
    99                                             yieldUnescaped( site.encodeAsHTML() )
    100                                         }
    101                                         a(href: sectionCreateLink(site.id), onclick: hideAssetTreePane()) {
    102                                             img(src: addImg(), alt: 'Add', title: 'Add Section')
    103                                         }
    104                                     }
    105                                     if(site.sections) {
    106                                         div( id: divId, style: branchStyle(divId) ) {
    107                                             ul() {
    108                                                 for(section in site.sections.sort { p1, p2 -> p1.name.compareToIgnoreCase(p2.name) }) {
    109                                                     li() {
    110                                                         if(section.assets) {
    111                                                             a( href: toggleBranch(nextDivId()) ) {
    112                                                                 img(src: branchImg(divId), id: divId+'img' )
    113                                                             }
    114                                                         }
    115                                                         else
    116                                                             img(src: dashImg())
    117                                                         a( href: sectionShowLink(section.id), onclick: hideAssetTreePane() ) {
    118                                                             yieldUnescaped( section.encodeAsHTML() )
    119                                                         }
    120                                                         a(href: assetCreateLink(section.id), onclick: hideAssetTreePane()) {
    121                                                             img(src: addImg(), alt: 'Add', title: 'Add Asset')
    122                                                         }
    123                                                     }
    124 
    125                                                     if(section.assets) {
    126                                                         div( id: divId, style: branchStyle(divId) ) {
    127                                                             ul() {
    128                                                                 for(asset in section.assets.sort { p1, p2 -> p1.name.compareToIgnoreCase(p2.name) }) {
    129                                                                     li() {
    130                                                                         if(asset.assetSubItems) {
    131                                                                             a( href: toggleBranch(nextDivId()) ) {
    132                                                                                 img(src: branchImg(divId), id: divId+'img' )
    133                                                                             }
    134                                                                         }
    135                                                                         else
    136                                                                             img(src: dashImg())
    137                                                                         a( href: assetShowLink(asset.id), onclick: hideAssetTreePane() ) {
    138                                                                             yieldUnescaped( asset.encodeAsHTML() )
    139                                                                         }
    140                                                                         a(href: assetSubItemCreateLink(asset.id), onclick: hideAssetTreePane()) {
    141                                                                             img(src: addImg(), alt: 'Add', title: 'Add Sub Item')
    142                                                                         }
    143                                                                         a(href: assetCopyLink(asset.id), onclick: hideAssetTreePane()) {
    144                                                                             img(src: copyImg(), alt: 'Add', title: 'Copy Asset')
    145                                                                         }
    146                                                                     } // li
    147 
    148                                                                     if(asset.assetSubItems) {
    149                                                                         div( id: divId, style: branchStyle(divId) ) {
    150                                                                             ul() {
    151                                                                                 for(assetSubItemL1 in asset.assetSubItems.sort { p1, p2 -> p1.name.compareToIgnoreCase(p2.name) }) {
    152                                                                                     li() {
    153                                                                                         if(assetSubItemL1.subItems) {
    154                                                                                             a( href: toggleBranch(nextDivId()) ) {
    155                                                                                                 img(src: branchImg(divId), id: divId+'img' )
    156                                                                                             }
    157                                                                                         }
    158                                                                                         else
    159                                                                                             img(src: dashImg())
    160                                                                                         a( href: assetSubItemShowLink(assetSubItemL1.id), onclick: hideAssetTreePane() ) {
    161                                                                                             yieldUnescaped( assetSubItemL1.encodeAsHTML() )
    162                                                                                         }
    163                                                                                         a(href: assetSubItemCreateWithParentLink(assetSubItemL1.id), onclick: hideAssetTreePane()) {
    164                                                                                             img(src: addImg(), alt: 'Add', title: 'Add Sub Item')
    165                                                                                         }
    166                                                                                     } // li
    167 
    168                                                                                     if(assetSubItemL1.subItems) {
    169                                                                                         div( id: divId, style: branchStyle(divId) ) {
    170                                                                                             ul() {
    171                                                                                                 for(assetSubItemL2 in assetSubItemL1.subItems.sort { p1, p2 -> p1.name.compareToIgnoreCase(p2.name) }) {
    172                                                                                                     li() {
    173                                                                                                         if(assetSubItemL2.subItems) {
    174                                                                                                             a( href: toggleBranch(nextDivId()) ) {
    175                                                                                                                 img( src: branchImg(divId), id: divId+'img' )
    176                                                                                                             }
    177                                                                                                         }
    178                                                                                                         else
    179                                                                                                             img(src: dashImg())
    180                                                                                                         a( href: assetSubItemShowLink(assetSubItemL2.id), onclick: hideAssetTreePane() ) {
    181                                                                                                             yieldUnescaped( assetSubItemL2.encodeAsHTML() )
    182                                                                                                         }
    183                                                                                                         a(href: assetSubItemCreateWithParentLink(assetSubItemL2.id), onclick: hideAssetTreePane()) {
    184                                                                                                             img(src: addImg(), alt: 'Add', title: 'Add Sub Item')
    185                                                                                                         }
    186                                                                                                     } // li
    187 
    188                                                                                                     if(assetSubItemL2.subItems) {
    189                                                                                                         div( id: divId, style: branchStyle(divId) ) {
    190                                                                                                             ul() {
    191                                                                                                                 for(assetSubItemL3 in assetSubItemL2.subItems.sort { p1, p2 -> p1.name.compareToIgnoreCase(p2.name) }) {
    192                                                                                                                     li() {
    193                                                                                                                         if(assetSubItemL3.subItems) {
    194                                                                                                                             a( href: toggleBranch(nextDivId()) ) {
    195                                                                                                                                 img( src: branchImg(divId), id: divId+'img' )
    196                                                                                                                             }
    197                                                                                                                         }
    198                                                                                                                         else
    199                                                                                                                             img(src: dashImg())
    200                                                                                                                         a( href: assetSubItemShowLink(assetSubItemL3.id), onclick: hideAssetTreePane() ) {
    201                                                                                                                             yieldUnescaped( assetSubItemL3.encodeAsHTML() )
    202                                                                                                                         }
    203                                                                                                                         a(href: assetSubItemCreateWithParentLink(assetSubItemL3.id), onclick: hideAssetTreePane()) {
    204                                                                                                                             img(src: addImg(), alt: 'Add', title: 'Add Sub Item')
    205                                                                                                                         }
    206                                                                                                                     } // li
    207 
    208                                                                                                                     if(assetSubItemL3.subItems) {
    209                                                                                                                         div( id: divId, style: branchStyle(divId) ) {
    210                                                                                                                             ul() {
    211                                                                                                                                 for(assetSubItemL4 in assetSubItemL3.subItems.sort { p1, p2 -> p1.name.compareToIgnoreCase(p2.name) }) {
    212                                                                                                                                     li() {
    213                 //                                                                                                                         if(assetSubItemL4.subItems) {
    214                 //                                                                                                                             a( href: toggleBranch(nextDivId()) ) {
    215                 //                                                                                                                                 img( src: branchImg(divId), id: divId+'img' )
    216                 //                                                                                                                             }
    217                 //                                                                                                                         }
    218                 //                                                                                                                         else
    219                                                                                                                                         img(src: dashImg())
    220                                                                                                                                         a( href: assetSubItemShowLink(assetSubItemL4.id), onclick: hideAssetTreePane() ) {
    221                                                                                                                                             yieldUnescaped( assetSubItemL4.encodeAsHTML() )
    222                                                                                                                                         }
    223                 //                                                                                                                         a(href: assetSubItemCreateWithParentLink(assetSubItemL4.id), onclick: hideAssetTreePane()) {
    224                 //                                                                                                                             img(src: addImg(), alt: 'Add', title: 'Add Sub Item')
    225                 //                                                                                                                         }
    226                                                                                                                                     } // li
    227 
    228                                                                                                                                 } // assetSubItemL4
    229                                                                                                                             } // ul
    230                                                                                                                         } // div
    231                                                                                                                     } // if(assetSubItemL3.subItems)
    232 
    233 
    234                                                                                                                 } // assetSubItemL3
    235                                                                                                             } // ul
    236                                                                                                         } // div
    237                                                                                                     } // if(assetSubItemL2.subItems)
    238 
    239                                                                                                 } // assetSubItemL2
    240                                                                                             } // ul
    241                                                                                         } // div
    242                                                                                     } // if(assetSubItemL1.subItems)
    243 
    244                                                                                 } // assetSubItemL1
    245                                                                             } // ul
    246                                                                         } // div
    247                                                                     } // if(asset.assetSubItems)
    248 
    249                                                                 } // assets
    250                                                             } // ul
    251                                                         } // div
    252                                                     } // if(section.assets)
    253 
    254                                                 } //sections
    255                                             } // ul
    256                                         } // div
    257                                     } // if(site.sections)
    258                                 } // sites
     49                                img(src: ts.treeRootImg(), id: ts.tableLoadingImgId(), alt: 'TreeRoot')
     50                                li() {
     51                                } // li
    25952                            } // ul
    26053                        } // td
    … …  
    26255                } // table
    26356            } // div
    264 
    265             div( class: 'buttons') {
    266                 span(class: 'button') {
    267                     input( type: 'button', value: 'Close', onclick: hideAssetTreePane() )
    268                 }
    269             }
    270 
    27157        } // mkp
    272 
    273     } // assetTree
    274 
    275 
    276     /** Imgs */
    277 
    278     def treeRootImg() {
    279         resource(dir:'images/skin',file:'chart_organisation.png').toString()
    280     }
    281     def addImg() {
    282         resource(dir:'images/skin',file:'database_add.png').toString()
    283     }
    284     def copyImg() {
    285         resource(dir:'images/skin',file:'page_copy.png').toString()
    286     }
    287     def bulletTreePlusImg() {
    288         resource(dir:'images/skin',file:'bullet_tree_plus.png').toString()
    289     }
    290     // actually set in javascript function.
    291     def bulletTreeMinusImg() {
    292         resource(dir:'images/skin',file:'bullet_tree_minus.png').toString()
    293     }
    294     def dashImg() {
    295         resource(dir:'images/skin',file:'hline_short.png').toString()
    296     }
    297 
    298     /** js calls */
    299 
    300     def showPane() {
    301        'javascript: showDiv(\"assetTreePane\");'
    302     }
    303 
    304     def hideAssetTreePane() {
    305         def saveUrl = createLink(controller: 'appCore', action: 'saveAssetTreeStatus').toString()
    306         'return hideAssetTreePane(\"assetTreePane\", \"assetTreeTable' + '\", \"' + saveUrl + '\");'
    307     }
    308 
    309     def toggleBranch(divId) {
    310         /// @todo: toggleBranch is in overlayPane.js and should be moved to tree.js
    311        'javascript: toggleBranch(\"' + divId + '\", \"' + divId + 'img' +'\", \"' + bulletTreeMinusImg() +'\", \"' + bulletTreePlusImg() + '\");'
    312     }
    313 
    314     /** Links */
    315 
    316     def siteCreateLink() {
    317         createLink(controller: 'siteDetailed', action: 'create').toString()
    318     }
    319     def siteShowLink(id) {
    320         createLink(controller: 'siteDetailed', action: 'show', params: ['id': id] ).toString()
    321     }
    322 
    323     def siteEditLink(id) {
    324         createLink(controller: 'siteDetailed', action: 'edit', params: ['id': id] ).toString()
    325     }
    326 
    327     def sectionCreateLink(siteId) {
    328         createLink(controller: 'sectionDetailed', action: 'create', params: ['site.id': siteId] ).toString()
    329     }
    330 
    331     def sectionShowLink(id) {
    332         createLink(controller: 'sectionDetailed', action: 'show', params: ['id': id] ).toString()
    333     }
    334 
    335     def sectionEditLink(id) {
    336         createLink(controller: 'sectionDetailed', action: 'edit', params: ['id': id] ).toString()
    337     }
    338 
    339     def assetCreateLink(sectionId) {
    340         createLink(controller: 'assetDetailed', action: 'create', params: ['section.id': sectionId] ).toString()
    341     }
    342 
    343     def assetShowLink(id) {
    344         createLink(controller: 'assetDetailed', action: 'show', id: id ).toString()
    345     }
    346 
    347     def assetEditLink(id) {
    348         createLink(controller: 'assetDetailed', action: 'edit', id: id ).toString()
    349     }
    350 
    351     def assetCopyLink(id) {
    352         createLink(controller: 'assetDetailed', action: 'copy', params: ['assetToCopy.id': id] ).toString()
    353     }
    354 
    355     def assetSubItemCreateLink(assetId) {
    356         createLink(controller: 'assetSubItemDetailed', action: 'create', params: ['asset.id': assetId] ).toString()
    357     }
    358 
    359     def assetSubItemCreateWithParentLink(parentItemId) {
    360         createLink(controller: 'assetSubItemDetailed', action: 'create', params: ['parentItem.id': parentItemId] ).toString()
    361     }
    362 
    363     def assetSubItemShowLink(id) {
    364         createLink(controller: 'assetSubItemDetailed', action: 'show', params: ['id': id] ).toString()
    365     }
    366 
    367     def assetSubItemEditLink(id) {
    368         createLink(controller: 'assetSubItemDetailed', action: 'edit', params: ['id': id] ).toString()
    369     }
     58    } // assetTreePane
    37059
    37160} // end class

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

    r306 r312  
    1111        <g:javascript library="prototype/effects" />
    1212        <g:javascript src="overlayPane.js" />
     13        <g:javascript src="util.js" />
     14        <gnuMims:resources />
    1315    </head>
    1416
    … …  
    4648
    4749        <!-- Asset Tree Pane -->
    48         <gnuMims:assetTree />
     50        <gnuMims:assetTreePane />
    4951
    5052    </body>

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

    r307 r312  
    609609    margin: 2px;
    610610}
     611div.tree_pane_close {
     612    float: right;
     613    padding: 5px;
     614}
    611615
    612616/* CheckBoxList Tag Lib */

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

    r309 r312  
    1 function toggleDiv(id) {
    2     $(divId).toggle();
    3 }
    4 
    5 function showDiv(id) {
    6     Effect.Appear(id,{duration:0.4,queue:'end'});
    7 }
    8 
    9 function hideAssetTreePane(paneDivId, tableDivId, saveUrl) {
    10 
    11     var visibleDivs = $(tableDivId).select('div').findAll(function(el) { return el.visible(); })
    12     var params = "assetTreeVisibleBranches=";
    13 
    14     // Add the id of each visible div.
    15     visibleDivs.each(function(it) {
    16         params += it.identify();
    17         params += ","
    18     });
    19 
    20     // Remove the trailing comma.
    21     params = params.slice(0,params.length-1);
    22 
    23     // Post the id's of all visible divs.
    24     // asynchronous: false is against the prototype recommendations but appears to be needed in this case.
    25     new Ajax.Request(saveUrl, {parameters: params, asynchronous: false});
    26 
    27     // Hide the pane.
    28     $(paneDivId).toggle();
    29 }
    30 
    31 function toggleBranch(divId, imageId, openImgUrl, closedImgUrl) {
    32 
    33     $(divId).toggle();
    34 
    35     if( $(divId).visible() ) {
    36         $(imageId).src= openImgUrl;
    37     }
    38     else {
    39         $(imageId).src= closedImgUrl;
    40     }
    41 
    42 }
    431
    442function showElement(id) {
Note: See TracChangeset for help on using the changeset viewer.