Changeset 178

Timestamp:

Feb 8, 2010, 3:25:44 PM (14 years ago)

Author:

duh

Message:

• refactoring grouping functionality

Location:

trunk

Files:

• grails-app/controllers/dbnp/studycapturing/WizardController.groovy (modified) (1 diff)
• grails-app/domain/dbnp/studycapturing/SubjectGroup.groovy (modified) (1 diff)
• grails-app/views/wizard/pages/_groups.gsp (modified) (1 diff)
• web-app/css/wizard.css (modified) (1 diff)
• web-app/js/grouping.js (modified) (1 diff)
• web-app/js/wizard.js (modified) (2 diffs)

trunk/grails-app/controllers/dbnp/studycapturing/WizardController.groovy

@@ -144 +144 @@
                                 }
                         }
+                        on("add") {
+                                def increment = flow.groups.size()
+                                flow.groups[ increment ] = new SubjectGroup(params)
+
+                                println flow.groups
+                        }.to "groups"
                         on("next") {
                                 // TODO
-                        }.to "demo"
+                        }.to "groups"
                         on("previous") {
                                 // TODO

trunk/grails-app/domain/dbnp/studycapturing/SubjectGroup.groovy

@@ -3 +3 @@
 /**
  * This class describes groupings in the subjects of a study.
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
  */
-class SubjectGroup {
+class SubjectGroup implements Serializable {
+        String name
+        static hasMany = [subjects: Subject]
 
-    String name 
-    static hasMany = [ subjects : Subject]
-
-    static constraints = {
-    }
+        static constraints = {
+        }
 }

trunk/grails-app/views/wizard/pages/_groups.gsp

@@ -17 +17 @@
 <wizard:pageContent>
 <div class="grouping">
+
         <div class="subjects">
-                <ol class="selectable">
-                        <g:each var="subject" status="i" in="${subjects}"><li class="ui-widget-content">Subject ${i} ${subject.species}</li></g:each>
-                </ol>
+                <g:each var="subject" status="i" in="${subjects}"><div class="subject">${subject.name}</div>
+                </g:each>
         </div>
-
-        <div class="groups">
-                <div class="ui-widget-content group">
-                        <h4 class="ui-widget-header">Group 1</h4>
+        <div class="right">
+                <div class="form">
+                        name: <g:textField name="name" value="" /><br />
+                        <wizard:ajaxButton name="add" value="Add Group" url="[controller:'wizard',action:'pages']" update="[success:'wizardPage',failure:'wizardError']" afterSuccess="onWizardPage()" />
                 </div>
-
-                <div class="ui-widget-content group">
-                        <h4 class="ui-widget-header">Group 2</h4>
+                <div class="groups">
+                <g:each var="group" status="i" in="${groups}">
+                        <div class="group">
+                                <div class="label">${group.name}</div>
+                                <div class="subjects">
+                                </div>
+                        </div>
+                </g:each>
                 </div>
         </div>

trunk/web-app/css/wizard.css

@@ -209 +209 @@
 /* END :: TABLE */
 
-.selectable .ui-selecting {
-    background: #add9ef;
-}
-
-.selectable .ui-selected {
-    background: #006dbd;
-    color: white;
-}
-
-.selectable {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    width: 200px;
-}
-
-.selectable li {
-    margin: 3px;
-    padding: 0.4em;
-    font-size: 1em;
-    height: 18px;
-}
-
+/* START :: GROUPING */
 .wizard .grouping {
-    display: block;
+    border: 1px solid black;
+    display: inline-block;
     height: auto;
-    vertical-align: top;
-}
-
-.wizard .subjects {
-    display: inline-block;
-    vertical-align: top;
-}
-
-.wizard .groups {
-    display: inline-block;
-    height: 100%;
-    vertical-align: top;
-}
-
-.wizard .groups .groupbla {
-    margin: 3px;
-    padding: 0.4em;
-    font-size: 1em;
-}
-
-.droppable {
-    width: 300px;
-}
-
-.wizard .groups .group {
+    width: 100%;
+}
+
+.wizard .grouping .subjects {
+    display: block;
+    float: left;
+}
+.wizard .grouping .ui-selected {
+    background-color: red;
+}
+.wizard .grouping .ui-selecting {
+    background-color: orange;
+}
+
+.wizard .grouping .right {
     display: inline-block;
     float: right;
-    width: 250px;
-    min-height: 18em;
-    margin: 3px;
-    padding: 0.4em;
-
-} * html #trash {
-    height: 18em;
-} /* IE6 */
-
-.wizard .groups .group h4 {
-    line-height: 16px;
-    margin: 0 0 0.4em;
-}
-/*
-.wizard .groups .group .gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
-.wizard .groups .group .gallery.custom-state-active { background: #eee; }
-.wizard .groups .group .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
-.wizard .groups .group .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
-.wizard .groups .group .gallery li a { float: right; }
-.wizard .groups .group .gallery li a.ui-icon-zoomin { float: left; }
-.wizard .groups .group .gallery li img { width: 100%; cursor: move; }
-
-.wizard .groups .group .gallery {
-    display: block;
-    float: left;
-}
-
-.wizard .groups .group .gallery li {
-    display: inline-block;
-}
-*/
-
-.wizard .groups .group .henk {
-    background-color: red;
-}
-
-
-
+}
+.wizard .grouping .right .form {
+    border: 1px solid black;
+}
+.wizard .grouping .group {
+    margin: 5px 0px 5px 0px;
+    border: 1px solid black;
+    height: auto;
+}
+.wizard .grouping .group .label {
+    display: block;
+    background-color: #006DBA;
+    color: #fff;
+    font-weight: bold;
+    width: auto;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+}
+.wizard .grouping .group .subjects {
+    display: inline-block;
+}
+.wizard .grouping .group .subject {
+    display: block;
+    width: 100%;
+    font-size: 10px;
+}
+
+/* END :: GROUPING */

trunk/web-app/js/grouping.js

@@ -12 +12 @@
  * $Date$
  */
-function Grouping() {}
+function Grouping() {
+}
+Grouping.prototype = {
+    itemsIdentifier:    null,
+    itemIdentifier:    null,
+    groupsIdentifier:   null,
+    groupIdentifier:   null,
 
-Grouping.prototype = {
-    init: function() {
+    init: function(itemsIdentifier, itemIdentifier, groupsIdentifier, groupIdentifier) {
+        this.itemsIdentifier    = itemsIdentifier;
+        this.itemIdentifier     = itemIdentifier;
+        this.groupsIdentifier   = groupsIdentifier;
+        this.groupIdentifier    = groupIdentifier;
+
+        // initialize grouping
+        console.log('grouping initialized...');
+
+        this.initializeGrouping();
+    },
+
+    initializeGrouping: function() {
+        var that = this;
+
+        // make all items selectable
+        $(this.itemsIdentifier).selectable({
+            filter: that.itemIdentifier,
+            stop: function() {
+                // done selecting, make all selected items draggable
+                that.makeDraggable(this);
+            }
+        });
+
+        // make all groups droppable
+        this.makeDroppable();
+    },
+
+    // make all groups droppable
+    makeDroppable: function() {
+        var that = this;
+        $(this.groupsIdentifier + ' > ' + this.groupIdentifier).each(function() {
+            console.log(this);
+            var g = this;
+            var G = $(g)
+            G.droppable({
+                drop: function(event, ui) {
+                    var list = $(that.itemsIdentifier,G).length ? $(that.itemsIdentifier,G) : $('<div class="items"/>').appendTo(G);
+
+                    // append the dropped subjects to the group
+                    $('.ui-selected', $(that.itemsIdentifier)).each(function() {
+                        var E = $(this);
+                        
+                        // add to list
+                        E.appendTo(list);
+
+                        // make sure they are sized and positioned properly
+                        E.css({'left':'0px','top':'0px'});
+                        G.css({'height': (G.height() + E.height()) + 'px'});
+                    })
+                }
+            })
+        })
+    },
+
+    // make all selected items draggable
+    makeDraggable: function(element) {
+        var that = this;
+        var draggables = $('.ui-selected', element);
+        var dl = draggables.length;
+        var undraggables = $(':not(.ui-selected)', element);
+
+        // walk through selected items
+        draggables.each(function() {
+            var d = this;
+            var D = $(this);
+            var c = D.html();
+
+            // make it draggable
+            $(this).draggable({
+                revert: 'invalid',
+                corsor: 'move',
+                start: function(event,ui) {
+                    // start dragging
+                    that.groupDraggables(draggables,d)
+                    D.html(dl + ' item' + ((dl>1) ? 's' : ''))
+                },
+                stop: function(event,ui) {
+                    // stop dragging
+                    that.ungroupDraggables(draggables,d);
+                    D.html(c);
+                }
+            });
+        })
+
+        // ...and all unselected items not draggable
+        undraggables.each(function() {
+            $(this).draggable('destroy');    
+        })
+    },
+
+    // hide selectables that are not being dragged, thus
+    // visually grouping them in the draggable that is
+    // being dragged
+    groupDraggables: function(draggables,draggedElement) {
+        draggables.each(function() {
+            if (this != draggedElement) {
+                $(this).animate({opacity: 0},200);
+            }
+        })
+    },
+
+    // make all hidden selectables visible agains
+    ungroupDraggables: function(draggables,draggedElement) {
+        draggables.each(function() {
+           if (this != draggedElement) {
+                $(this).animate({opacity: 100},200);
+           }
+        })
     }
 }
+
+

trunk/web-app/js/wizard.js

@@ -42 +42 @@
     
     // GROUPING
-    //attachGroupingEvents();
+    new Grouping().init('div.subjects', 'div.subject', 'div.groups', 'div.group');
 }
 
@@ -196 +196 @@
     }
 }
-
-// handle selecting and grouping of subjects
-function attachGroupingEvents() {
-    $(".groups").find('div.group').droppable({
-        accept: '.subjects > ol > li',
-        drop: function(event, ui) {
-            var group = $(this)
-            var list = $('ul', group).length ? $('ul', group) : $('<ul class="henk"/>').appendTo(group);
-
-            // append selected subjects to this group
-            $(".subjects").find(".ui-selected").each(function() {
-                // append to group
-                $(this).appendTo(list);
-            });
-        }
-    });
-
-
-    //$(".subjects").find(".selectable").selectable({
-    $(".selectable").selectable({
-        stop: function() {
-            // remove draggable from unselected items
-            $('.ui-selectee:not(.ui-selected)', this).each(function() {
-                $(this).draggable('destroy')
-            })
-
-            // attach draggable to selected items
-            var subjects = $('.ui-selected', this);
-            subjects.each(function() {
-                var d = this
-                var D = $(this)
-                var content = D.html()
-                var offset = D.offset()
-
-                D.draggable({
-                    revert: 'invalid',
-                    containment: '.grouping',
-                    corsor: 'move',
-                    start: function(event, ui) {
-                        // change dragged item's content to summarize selected items
-                        D.html(subjects.length + ' subjects');
-
-                        // hide the other items
-                        subjects.each(function() {
-                            if (this != d) {
-                                $(this).animate(
-                                { opacity: 0 },
-                                        200
-                                        );
-                            }
-                        });
-                    },
-                    stop: function(event, ui) {
-                        // restore original content
-                        D.html(content);
-
-                        // make selected items visible
-                        subjects.each(function() {
-                            if (this != d) {
-                                $(this).animate(
-                                {opacity: 100},
-                                        200
-                                        );
-                            }
-                        });
-                    }
-                });
-            });
-        }
-    });
-}
-