NIHVIVO-2810 NIHVIVO-2232 Added custom list view for display:hasElement and first go at menu item drag-n-drop for menu management. Also added new entry for Menu Management on site admin page under site configuration. Work in progress and not fully functional.

webapp/web/js/individual/menuManagement.js

@@ -0,0 +1,150 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+var menuManagement = {
+
+    // Initial page setup
+    onLoad: function() {
+        this.mergeFromTemplate();
+        this.initMenuItemData();
+        this.initObjects();
+        this.initMenuItemsDD();
+    },
+    
+    // Add variables from menupage template
+    mergeFromTemplate: function() {
+        $.extend(this, menuManagementData);
+    },
+    
+    // Create references to frequently used elements for convenience
+    initObjects: function() {
+        this.menuItemsList = $('ul.menuItems');
+    },
+        
+    // Drag-and-drop
+    initMenuItemsDD: function() {
+        var menuItems = this.menuItemsList.children('li');
+        
+        if (menuItems.length < 2) {
+            return;
+        }
+        
+        this.menuItemsList.addClass('dragNdrop');
+        
+        menuItems.attr('title', 'Drag and drop to reorder menu items');
+        
+        this.menuItemsList.sortable({
+            cursor: 'move',
+            update: function(event, ui) {
+                alert("Congrats! You just reordered a menu item. (not really)");
+                // Once we figure out how the editing will work, we'll call reorderMenuItems
+                // and get rid of the debug alert.
+                    // menuManagement.reorderMenutItems(event, ui);
+            }
+        });
+    },
+    
+    // Reorder menu items. Called after menu item drag-and-drop
+    // This is all make-believe at the moment. Just an example to demonstrate to Huda how this could work.
+    reorderMenuItems: function(event, ui) {
+        var menuItems = $('li.menuItem').map(function(index, el) {
+            return $(this).data('menuItemUri');
+        }).get();
+
+        $.ajax({
+            url: menuManagement.reorderUrl,
+            data: {
+                predicate: menuManagement.positionPredicate,
+                individuals: menuItems
+            },
+            traditional: true, // serialize the array of individuals for the server
+            dataType: 'json',
+            type: 'POST',
+            success: function(data, status, request) {
+                var pos;
+                $('.menuItem').each(function(index){
+                    pos = index + 1;
+                    // Set the new position for this element. The only function of this value 
+                    // is so we can reset an element to its original position in case reordering fails.
+                    menuManagement.setPosition(this, pos);                
+                });
+                // Set the form rank field value.
+                $('#rank').val(pos + 1);        
+            },
+            error: function(request, status, error) {
+                // ui is undefined after removal of a menu item.
+                if (ui) {
+                    // Put the moved item back to its original position.
+                    // Seems we need to do this by hand. Can't see any way to do it with jQuery UI. ??
+                    var pos = menuManagement.getPosition(ui.item),
+                        nextpos = pos + 1, 
+                        menuItems = menuManagement.menuItemsList,
+                        next = menuManagement.findMenuItem('position', nextpos);
+                    
+                    if (next.length) {
+                        ui.item.insertBefore(next);
+                    }
+                    else {
+                        ui.item.appendTo(menuItems);
+                    }
+                    
+                    alert('Reordering of menu items failed.');
+                }
+            }
+        });
+    },
+    
+    // On page load, associate data with each menu item list element. Then we don't
+    // have to keep retrieving data from or modifying the DOM as we manipulate the
+    // menu items.
+    initMenuItemData: function() {
+        $('.menuItem').each(function(index) {
+            $(this).data(menuItemData[index]);    
+            
+            // RY We might still need position to put back an element after reordering
+            // failure. Position might already have been reset? Check.
+            // We also may need position to implement undo links: we want the removed menu item
+            // to show up in the list, but it has no position.
+            $(this).data('position', index+1);      
+        });
+    },
+
+    getPosition: function(menuItem) {
+        return $(menuItem).data('position');
+    },
+    
+    setPosition: function(menuItem, pos) {
+        $(menuItem).data('position', pos);
+    },
+    
+    findMenuItem: function(key, value) {
+        var matchingMenuItem = $(); // if we don't find one, return an empty jQuery set
+        
+        $('.menuItem').each(function() {
+            var menuItem = $(this);
+            if ( menuItem.data(key) === value ) {
+                matchingMenuItem = menuItem; 
+                return false; // stop the loop
+            }
+        });
+         
+        return matchingMenuItem;       
+    },
+    
+    // Event listeners
+    
+    // Disable drag-n-drop and associated cues if only one menu item remains
+    // Good chance we won't need this if Huda's able to hook into standard delete for n3 editing (loads confirmation in separate page)
+    disableMenuItemsDD: function() {
+        var menuItems = this.menuItemsList.children('li');
+        
+        this.menuItemsList.sortable({ disable: true } );
+
+        this.menuItemsList.removeClass('dragNdrop');
+        
+        menuItems.removeAttr('title');
+    }
+};
+
+$(document).ready(function() {   
+    menuManagement.onLoad();
+});