Changeset 178 for trunk/web-app/js


Ignore:
Timestamp:
Feb 8, 2010, 3:25:44 PM (13 years ago)
Author:
duh
Message:
  • refactoring grouping functionality
Location:
trunk/web-app/js
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • 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.