Changeset 178

Show
Ignore:
Timestamp:
08-02-10 15:25:44 (4 years ago)
Author:
duh
Message:

- refactoring grouping functionality

Location:
trunk
Files:
6 modified

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/controllers/dbnp/studycapturing/WizardController.groovy

    r172 r178  
    144144                                } 
    145145                        } 
     146                        on("add") { 
     147                                def increment = flow.groups.size() 
     148                                flow.groups[ increment ] = new SubjectGroup(params) 
     149 
     150                                println flow.groups 
     151                        }.to "groups" 
    146152                        on("next") { 
    147153                                // TODO 
    148                         }.to "demo" 
     154                        }.to "groups" 
    149155                        on("previous") { 
    150156                                // TODO 
  • trunk/grails-app/domain/dbnp/studycapturing/SubjectGroup.groovy

    r162 r178  
    33/** 
    44 * This class describes groupings in the subjects of a study. 
     5 * 
     6 * Revision information: 
     7 * $Rev$ 
     8 * $Author$ 
     9 * $Date$ 
    510 */ 
    6 class SubjectGroup { 
     11class SubjectGroup implements Serializable { 
     12        String name 
     13        static hasMany = [subjects: Subject] 
    714 
    8     String name  
    9     static hasMany = [ subjects : Subject] 
    10  
    11     static constraints = { 
    12     } 
     15        static constraints = { 
     16        } 
    1317} 
  • trunk/grails-app/views/wizard/pages/_groups.gsp

    r157 r178  
    1717<wizard:pageContent> 
    1818<div class="grouping"> 
     19 
    1920        <div class="subjects"> 
    20                 <ol class="selectable"> 
    21                         <g:each var="subject" status="i" in="${subjects}"><li class="ui-widget-content">Subject ${i} ${subject.species}</li></g:each> 
    22                 </ol> 
     21                <g:each var="subject" status="i" in="${subjects}"><div class="subject">${subject.name}</div> 
     22                </g:each> 
    2323        </div> 
    24  
    25         <div class="groups"> 
    26                 <div class="ui-widget-content group"> 
    27                         <h4 class="ui-widget-header">Group 1</h4> 
     24        <div class="right"> 
     25                <div class="form"> 
     26                        name: <g:textField name="name" value="" /><br /> 
     27                        <wizard:ajaxButton name="add" value="Add Group" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" /> 
    2828                </div> 
    29  
    30                 <div class="ui-widget-content group"> 
    31                         <h4 class="ui-widget-header">Group 2</h4> 
     29                <div class="groups"> 
     30                <g:each var="group" status="i" in="${groups}"> 
     31                        <div class="group"> 
     32                                <div class="label">${group.name}</div> 
     33                                <div class="subjects"> 
     34                                </div> 
     35                        </div> 
     36                </g:each> 
    3237                </div> 
    3338        </div> 
  • trunk/web-app/css/wizard.css

    r172 r178  
    209209/* END :: TABLE */ 
    210210 
    211 .selectable .ui-selecting { 
    212     background: #add9ef; 
    213 } 
    214  
    215 .selectable .ui-selected { 
    216     background: #006dbd; 
    217     color: white; 
    218 } 
    219  
    220 .selectable { 
    221     list-style-type: none; 
    222     margin: 0; 
    223     padding: 0; 
    224     width: 200px; 
    225 } 
    226  
    227 .selectable li { 
    228     margin: 3px; 
    229     padding: 0.4em; 
    230     font-size: 1em; 
    231     height: 18px; 
    232 } 
    233  
     211/* START :: GROUPING */ 
    234212.wizard .grouping { 
    235     display: block; 
     213    border: 1px solid black; 
     214    display: inline-block; 
    236215    height: auto; 
    237     vertical-align: top; 
    238 } 
    239  
    240 .wizard .subjects { 
    241     display: inline-block; 
    242     vertical-align: top; 
    243 } 
    244  
    245 .wizard .groups { 
    246     display: inline-block; 
    247     height: 100%; 
    248     vertical-align: top; 
    249 } 
    250  
    251 .wizard .groups .groupbla { 
    252     margin: 3px; 
    253     padding: 0.4em; 
    254     font-size: 1em; 
    255 } 
    256  
    257 .droppable { 
    258     width: 300px; 
    259 } 
    260  
    261 .wizard .groups .group { 
     216    width: 100%; 
     217} 
     218 
     219.wizard .grouping .subjects { 
     220    display: block; 
     221    float: left; 
     222} 
     223.wizard .grouping .ui-selected { 
     224    background-color: red; 
     225} 
     226.wizard .grouping .ui-selecting { 
     227    background-color: orange; 
     228} 
     229 
     230.wizard .grouping .right { 
    262231    display: inline-block; 
    263232    float: right; 
    264     width: 250px; 
    265     min-height: 18em; 
    266     margin: 3px; 
    267     padding: 0.4em; 
    268  
    269 } * html #trash { 
    270     height: 18em; 
    271 } /* IE6 */ 
    272  
    273 .wizard .groups .group h4 { 
    274     line-height: 16px; 
    275     margin: 0 0 0.4em; 
    276 } 
    277 /* 
    278 .wizard .groups .group .gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */ 
    279 .wizard .groups .group .gallery.custom-state-active { background: #eee; } 
    280 .wizard .groups .group .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } 
    281 .wizard .groups .group .gallery li h5 { margin: 0 0 0.4em; cursor: move; } 
    282 .wizard .groups .group .gallery li a { float: right; } 
    283 .wizard .groups .group .gallery li a.ui-icon-zoomin { float: left; } 
    284 .wizard .groups .group .gallery li img { width: 100%; cursor: move; } 
    285  
    286 .wizard .groups .group .gallery { 
    287     display: block; 
    288     float: left; 
    289 } 
    290  
    291 .wizard .groups .group .gallery li { 
    292     display: inline-block; 
    293 } 
    294 */ 
    295  
    296 .wizard .groups .group .henk { 
    297     background-color: red; 
    298 } 
    299  
    300  
    301  
     233} 
     234.wizard .grouping .right .form { 
     235    border: 1px solid black; 
     236} 
     237.wizard .grouping .group { 
     238    margin: 5px 0px 5px 0px; 
     239    border: 1px solid black; 
     240    height: auto; 
     241} 
     242.wizard .grouping .group .label { 
     243    display: block; 
     244    background-color: #006DBA; 
     245    color: #fff; 
     246    font-weight: bold; 
     247    width: auto; 
     248    height: 32px; 
     249    line-height: 32px; 
     250    text-align: center; 
     251} 
     252.wizard .grouping .group .subjects { 
     253    display: inline-block; 
     254} 
     255.wizard .grouping .group .subject { 
     256    display: block; 
     257    width: 100%; 
     258    font-size: 10px; 
     259} 
     260 
     261/* END :: GROUPING */ 
  • trunk/web-app/js/grouping.js

    r172 r178  
    1212 * $Date$ 
    1313 */ 
    14 function Grouping() {} 
     14function Grouping() { 
     15} 
     16Grouping.prototype = { 
     17    itemsIdentifier:    null, 
     18    itemIdentifier:    null, 
     19    groupsIdentifier:   null, 
     20    groupIdentifier:   null, 
    1521 
    16 Grouping.prototype = { 
    17     init: function() { 
     22    init: function(itemsIdentifier, itemIdentifier, groupsIdentifier, groupIdentifier) { 
     23        this.itemsIdentifier    = itemsIdentifier; 
     24        this.itemIdentifier     = itemIdentifier; 
     25        this.groupsIdentifier   = groupsIdentifier; 
     26        this.groupIdentifier    = groupIdentifier; 
     27 
     28        // initialize grouping 
     29        console.log('grouping initialized...'); 
     30 
     31        this.initializeGrouping(); 
     32    }, 
     33 
     34    initializeGrouping: function() { 
     35        var that = this; 
     36 
     37        // make all items selectable 
     38        $(this.itemsIdentifier).selectable({ 
     39            filter: that.itemIdentifier, 
     40            stop: function() { 
     41                // done selecting, make all selected items draggable 
     42                that.makeDraggable(this); 
     43            } 
     44        }); 
     45 
     46        // make all groups droppable 
     47        this.makeDroppable(); 
     48    }, 
     49 
     50    // make all groups droppable 
     51    makeDroppable: function() { 
     52        var that = this; 
     53        $(this.groupsIdentifier + ' > ' + this.groupIdentifier).each(function() { 
     54            console.log(this); 
     55            var g = this; 
     56            var G = $(g) 
     57            G.droppable({ 
     58                drop: function(event, ui) { 
     59                    var list = $(that.itemsIdentifier,G).length ? $(that.itemsIdentifier,G) : $('<div class="items"/>').appendTo(G); 
     60 
     61                    // append the dropped subjects to the group 
     62                    $('.ui-selected', $(that.itemsIdentifier)).each(function() { 
     63                        var E = $(this); 
     64                         
     65                        // add to list 
     66                        E.appendTo(list); 
     67 
     68                        // make sure they are sized and positioned properly 
     69                        E.css({'left':'0px','top':'0px'}); 
     70                        G.css({'height': (G.height() + E.height()) + 'px'}); 
     71                    }) 
     72                } 
     73            }) 
     74        }) 
     75    }, 
     76 
     77    // make all selected items draggable 
     78    makeDraggable: function(element) { 
     79        var that = this; 
     80        var draggables = $('.ui-selected', element); 
     81        var dl = draggables.length; 
     82        var undraggables = $(':not(.ui-selected)', element); 
     83 
     84        // walk through selected items 
     85        draggables.each(function() { 
     86            var d = this; 
     87            var D = $(this); 
     88            var c = D.html(); 
     89 
     90            // make it draggable 
     91            $(this).draggable({ 
     92                revert: 'invalid', 
     93                corsor: 'move', 
     94                start: function(event,ui) { 
     95                    // start dragging 
     96                    that.groupDraggables(draggables,d) 
     97                    D.html(dl + ' item' + ((dl>1) ? 's' : '')) 
     98                }, 
     99                stop: function(event,ui) { 
     100                    // stop dragging 
     101                    that.ungroupDraggables(draggables,d); 
     102                    D.html(c); 
     103                } 
     104            }); 
     105        }) 
     106 
     107        // ...and all unselected items not draggable 
     108        undraggables.each(function() { 
     109            $(this).draggable('destroy');     
     110        }) 
     111    }, 
     112 
     113    // hide selectables that are not being dragged, thus 
     114    // visually grouping them in the draggable that is 
     115    // being dragged 
     116    groupDraggables: function(draggables,draggedElement) { 
     117        draggables.each(function() { 
     118            if (this != draggedElement) { 
     119                $(this).animate({opacity: 0},200); 
     120            } 
     121        }) 
     122    }, 
     123 
     124    // make all hidden selectables visible agains 
     125    ungroupDraggables: function(draggables,draggedElement) { 
     126        draggables.each(function() { 
     127           if (this != draggedElement) { 
     128                $(this).animate({opacity: 100},200); 
     129           } 
     130        }) 
    18131    } 
    19132} 
     133 
     134 
  • trunk/web-app/js/wizard.js

    r172 r178  
    4242     
    4343    // GROUPING 
    44     //attachGroupingEvents(); 
     44    new Grouping().init('div.subjects', 'div.subject', 'div.groups', 'div.group'); 
    4545} 
    4646 
     
    196196    } 
    197197} 
    198  
    199 // handle selecting and grouping of subjects 
    200 function attachGroupingEvents() { 
    201     $(".groups").find('div.group').droppable({ 
    202         accept: '.subjects > ol > li', 
    203         drop: function(event, ui) { 
    204             var group = $(this) 
    205             var list = $('ul', group).length ? $('ul', group) : $('<ul class="henk"/>').appendTo(group); 
    206  
    207             // append selected subjects to this group 
    208             $(".subjects").find(".ui-selected").each(function() { 
    209                 // append to group 
    210                 $(this).appendTo(list); 
    211             }); 
    212         } 
    213     }); 
    214  
    215  
    216     //$(".subjects").find(".selectable").selectable({ 
    217     $(".selectable").selectable({ 
    218         stop: function() { 
    219             // remove draggable from unselected items 
    220             $('.ui-selectee:not(.ui-selected)', this).each(function() { 
    221                 $(this).draggable('destroy') 
    222             }) 
    223  
    224             // attach draggable to selected items 
    225             var subjects = $('.ui-selected', this); 
    226             subjects.each(function() { 
    227                 var d = this 
    228                 var D = $(this) 
    229                 var content = D.html() 
    230                 var offset = D.offset() 
    231  
    232                 D.draggable({ 
    233                     revert: 'invalid', 
    234                     containment: '.grouping', 
    235                     corsor: 'move', 
    236                     start: function(event, ui) { 
    237                         // change dragged item's content to summarize selected items 
    238                         D.html(subjects.length + ' subjects'); 
    239  
    240                         // hide the other items 
    241                         subjects.each(function() { 
    242                             if (this != d) { 
    243                                 $(this).animate( 
    244                                 { opacity: 0 }, 
    245                                         200 
    246                                         ); 
    247                             } 
    248                         }); 
    249                     }, 
    250                     stop: function(event, ui) { 
    251                         // restore original content 
    252                         D.html(content); 
    253  
    254                         // make selected items visible 
    255                         subjects.each(function() { 
    256                             if (this != d) { 
    257                                 $(this).animate( 
    258                                 {opacity: 100}, 
    259                                         200 
    260                                         ); 
    261                             } 
    262                         }); 
    263                     } 
    264                 }); 
    265             }); 
    266         } 
    267     }); 
    268 } 
    269