Changeset 22516 for main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js

Timestamp:

2010-07-27T17:11:22+12:00 (14 years ago)

Author:

sjb48

Message:

Working on establishing a nested sortable list for drag-and-drop functionality. Established a hierarchy based on gsf so each gsf element has its own list, then similar elements can be linked between.

File:

• main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js (modified) (3 diffs)

main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js

@@ +1 @@
+//jQuery( function($) {
+//$('div.blockWrapper').iNestedSortable(
+//  {
+//    accept: 'block',
+//  }
+//);
+//});
+
+console.log("Loading gui_div.js\n");
+
 $(document).ready(function(){
 
-    //function () {
-        $('a.minmax').bind('click', toggleContent);
-        $('a.remove').bind('click', removeContent);
-        $('div.blockWrapper').sortable(
+    console.log("Document ready function\n");
+
+    $('a.minmax').bind('click', toggleContent);
+    $('a.remove').bind('click', removeContent);
+
+    /*    
+    $('div.blockWrapper').NestedSortable(
+    {
+        accept: 'block',
+        helperclass: 'sortHelper',
+        activeclass :   'sortableactive',
+        hoverclass :    'sortablehover',
+
+        // Restricts sort start click to the specified element.
+        handle: 'div.header',
+        onStart : function()
             {
-                accept: 'block',
-                helperclass: 'sortHelper',
-                activeclass :   'sortableactive',
-                hoverclass :    'sortablehover',
-                handle: 'div.header',
-                tolerance: 'pointer',
-                onChange : function(ser)
-                {
-                },
-                onStart : function()
-                {
-                    $.iAutoscroller.start(this, document.getElementsByTagName('body'));
-                },
-                onStop : function()
-                {
-                    $.iAutoscroller.stop();
-                }
+                $.iAutoscroller.start(this, document.getElementsByTagName('body'));
+            },
+            onStop : function()
+            {
+                $.iAutoscroller.stop();
             }
-        );
-    //}
-//};
+    }
+    );
+    */
+ 
+     
+    $('#formatStatement').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.gsf\\:template',
+            'placeholder':'placeholder',
+            //'nested':'div'
+    });
+    
+    $('.gsf\\:template').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.table, .gsf\\:choose-metadata, .gsf\\:metadata',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
 
-     $(".block").mouseover(function() {
-        //$(this).parents().animate({ backgroundColor: "white" }, 500);
-        //$(this).animate({ backgroundColor: "yellow" }, 50);
+    $('.table').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.leaf .gsf\\:choose-metadata, .gsf\\:link, .gsf\\:switch',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+ 
+    $('.gsf\\:choose-metadata').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.gsf\\:metadata',
+            'placeholder':'placeholder',
+            'connectWith':'.gsf\\:choose-metadata'
+            //'nested':'.gsf:metadata'
+    });
+    
+    $('.gsf\\:link').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.gsf\\:icon',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+
+    $('.gsf\\:switch').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.gsf\\:metadata, .gsf\\:when, .gsf\\otherwise',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+
+    $('.gsf\\:when').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.leaf',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+
+    $('.gsf\\:otherwise').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.leaf',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+
+    /* 
+    $('div.blockWrapper').sortable(
+        {
+            accept: 'block',
+            helperclass: 'sortHelper',
+            activeclass :   'sortableactive',
+            hoverclass :    'sortablehover',
+
+            // Restricts sort start click to the specified element.
+            handle: 'div.header',
+
+            // This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural.
+            // * intersect: draggable overlaps the droppable at least 50%
+            // * pointer: mouse pointer overlaps the droppable
+            tolerance: 'pointer',
+            //containment: 'parent',
+            nested: 'div',
+            onChange : function(ser)
+            {
+            },
+            onStart : function()
+            {
+                $.iAutoscroller.start(this, document.getElementsByTagName('body'));
+            },
+            onStop : function()
+            {
+                $.iAutoscroller.stop();
+            }
+        }
+    );
+    */
+
+    $(".block").mouseover(function() 
+    {
+        //alert("Mouse over event");
         $(this).parents().css("border", "");
         $(this).css("border", "1px solid blue");
+        return false;
     }).mouseout(function(){
-        //$(this).animate({ backgroundColor: "white" }, 500);
         $(this).css("border", "");
-    });
-
-
-    $("button").click(function () {
-        //var parentTag = $(this).parent().get(0).titleName;
-        //alert("Removing div " + parentTag);
-        $(this).parent().parent().remove(); 
+        return false;
     });
 
@@ -50 +152 @@
         //var parentTag = $(this).parent().get(0).titleName;
         //alert("Removing div " + parentTag);
-        $(this).parent().parent().remove();
+        $(this).parent().remove();
     });
 
@@ -56 +158 @@
 var toggleContent = function(e)
 {
-    var targetContent = $('div.content', this.parentNode.parentNode);
+    var targetContent = $('div.block', this.parentNode);
     if (targetContent.css('display') == 'none') {
         targetContent.slideDown(300);