Changeset 178


Ignore:
Timestamp:
Feb 8, 2010, 3:25:44 PM (7 years ago)
Author:
duh
Message:
  • refactoring grouping functionality
Location:
trunk
Files:
6 edited

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 
Note: See TracChangeset for help on using the changeset viewer.