Changeset 26924

Timestamp:

2013-02-26T09:46:30+13:00 (11 years ago)

Author:

sjm84

Message:

Some major upgrades to incorperate a visual editor

File:

• main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js (modified) (18 diffs)

main/trunk/greenstone3/web/interfaces/default/js/debug_scripts.js

@@ -10 +10 @@
     var _elements = new Array();
     var _itemSelected = false; //Used to prevent multiple elements from being highlighted
+    var _editModeText = false;
+    var _selectedTemplate;
     
     //Page elements
     var _mainDiv;
-    var _textDiv;
+    
+    var _textEditor;
+    var _vEditor;
+    
+    var _templateSelector;
     var _editor;
     var _editingDiv;
@@ -20 +26 @@
     var _xmlStatusBar;
     var _saveButton;
+    var _swapEditorButton;
     
     //Editor state-keeping variables
@@ -27 +34 @@
     var _currentMatch;
     var _currentNamespace;
+    var _isVisualEditor = true;
     
     var createDebugDiv = function()
@@ -34 +42 @@
         {
             "position":"fixed",
-            "font-size":"0.7em",
+            "font-size":"0.8em",
             "bottom":"0px",
             "width":"100%",
@@ -46 +54 @@
         var toolBarDiv = $("<div>");
         toolBarDiv.css({"height":"40px"});
+
         var buttonDiv = $("<div>");
         buttonDiv.css("float", "left");
         toolBarDiv.append(buttonDiv);
-        _textDiv = $("<div>");
-        _textDiv.css({"overflow":"auto", "width":"100%"});
+
+        _templateSelector = $("<div>", {"id":"templateSelector"});
+        _templateSelector.css({"overflow":"auto", "width":"100%"});
 
         var pickElementButton = $("<input type=\"button\" value=\"Enable debugging\">");
@@ -120 +130 @@
                     _xmlStatusBar.attr("title", error);
                     _saveButton.attr("disabled", "disabled");
+                    _swapEditorButton.attr("disabled", "disabled");
                     return;
                 }
@@ -130 +141 @@
                     _saveButton.removeAttr("disabled");
                 }
+                if(_swapEditorButton.val() == "Switch to Visual Editor")
+                {
+                    _swapEditorButton.removeAttr("disabled");
+                }
             }
             
@@ -139 +154 @@
             if(_editor)
             {
-                var xmlString = _editor.getValue().replace(/&/g, "&amp;");
+                var xmlString;
+                if(_isVisualEditor)
+                {
+                    xmlString = new XMLSerializer().serializeToString(_vEditor.getXML());
+                }
+                else
+                {
+                    xmlString = _editor.getValue();
+                }
+                xmlString = xmlString.replace(/&/g, "&amp;");
+                
                 try
                 {
@@ -184 +209 @@
         });
         
-        var minimiseButton = $("<img>", {"src":gs.imageURLs.collapse});
-        minimiseButton.css({"cursor":"pointer", "float":"right", "margin-right":"20px"});
-        minimiseButton.click(function()
-        {
-            if($(this).attr("src") == gs.imageURLs.collapse)
-            {
-                _textDiv.hide();
-                $(this).attr("src", gs.imageURLs.expand);
-            }
-            else
-            {
-                _textDiv.show();
-                $(this).attr("src", gs.imageURLs.collapse);
-            }
-        });
-        
+        _swapEditorButton = $("<input type=\"button\" value=\"Switch to XML Editor\">");
+        _swapEditorButton.click(function()
+        {
+            if(_vEditor && _textEditor)
+            {
+                if(_isVisualEditor)
+                {
+                    _vEditor.getMainDiv().hide();
+                    var containerNode = _vEditor.getXML().firstChild;
+                    var templateNode = containerNode.firstChild;
+                    while(templateNode)
+                    {
+                        if(templateNode.nodeType == 1)
+                        {
+                            break;
+                        }
+                        templateNode = templateNode.nextSibling;
+                    }
+                    var xmlText = new XMLSerializer().serializeToString(templateNode);
+                    _editor.setValue(xmlText);
+                    _editor.clearSelection();
+                    _textEditor.show();
+                    _swapEditorButton.val("Switch to Visual Editor");
+                    _isVisualEditor = false;
+                }
+                else
+                {
+                    _textEditor.hide();
+                    var xmlText = _editor.getValue();
+                    _vEditor.getMainDiv().remove();
+                    _vEditor = new visualXMLEditor(xmlText);
+                    _editingDiv.append(_vEditor.getMainDiv());
+                    _vEditor.selectRootElement();
+                    _vEditor.getMainDiv().show();
+                    _swapEditorButton.val("Switch to XML Editor");
+                    _isVisualEditor = true;
+                }
+            }
+        });
+
         var clear = $("<span>");
         clear.css("clear", "both");
-        
-        toolBarDiv.append(minimiseButton);
         toolBarDiv.append(clear);
         
@@ -211 +258 @@
         buttonDiv.append(_xmlStatusBar);
         buttonDiv.append(_saveButton);
+        buttonDiv.append(_swapEditorButton);
+
+        _mainDiv.append(toolBarDiv);
         _mainDiv.append(_editingDiv);
-        _mainDiv.append(toolBarDiv);
-        _mainDiv.append(_textDiv);
+        _mainDiv.append("<div>Templates:</div>");
+        _mainDiv.append(_templateSelector);
     }
     
@@ -249 +299 @@
         infoContainer.click(function()
         {
+            if(_selectedTemplate)
+            {
+                _selectedTemplate.css("border", _selectedTemplate.prevBorder);
+            }
+            _selectedTemplate = infoContainer;
+            _selectedTemplate.prevBorder = _selectedTemplate.css("border");
+            _selectedTemplate.css("border", "red 1px solid");
+        
             _currentFilepath = filepath;
             _currentNodename = nodename;
@@ -275 +333 @@
                 }
             
-                var textEditor = $("<div>", {"id":"textEditor"});
-                textEditor.css({"width":"100%"});
-                textEditor.val(template);
+                _textEditor = $("<div>", {"id":"textEditor"});
+                _textEditor.css({"width":"100%", "height":"300px"});
+                _textEditor.val(template);
+                
+                if(_isVisualEditor)
+                {
+                    _textEditor.hide();
+                }
                 
                 _editingDiv.empty();
                 _editingDiv.append($("<p>" + filepath + "</p>"));
-                _editingDiv.append(textEditor);
+                _editingDiv.append(_textEditor);
+                
+                _vEditor = new visualXMLEditor(template);
+                _editingDiv.append(_vEditor.getMainDiv());
+                _vEditor.selectRootElement();
+                
+                if(!_isVisualEditor)
+                {
+                    _vEditor.getMainDiv().hide();
+                }
                 
                 _editor = ace.edit("textEditor");
@@ -289 +361 @@
                 _editor.clearSelection();
                 
-                textEditor.css({"min-height":"200px", "border-top":"5px solid #444"});
-                textEditor.resizable({handles: 'n', resize:function()
-                {
-                    textEditor.css({top:"0px"});
+                _textEditor.css({"min-height":"200px", "border-top":"5px solid #444"});
+                _textEditor.resizable({handles: 'n', resize:function()
+                {
+                    _textEditor.css({top:"0px"});
                     _editor.resize();
                 }});
+
                 
                 _closeEditorButton.removeAttr("disabled");
@@ -313 +386 @@
         });
     }
-    
+
     var addMouseEventsToDebugElements = function(debugElems)
     {
@@ -367 +440 @@
                     var name = $(this).attr("name");
                     var match = $(this).attr("match");
-
+                    
                     var infoContainer = $("<div>");
-                    infoContainer.css({"cursor":"pointer", "border":"1px dashed #AAAAAA", "margin":"5px"});
-                    var elementDIV = $("<div>");
-
-                    elementDIV.css("font-size", "1.1em");
-
-                    infoContainer.append(elementDIV);
+                    infoContainer.addClass("gbTemplateContainer");
                     
                     _elements.push(infoContainer);
@@ -380 +448 @@
                     addMouseEventsToInfoContainer(infoContainer, filepath, nodename, namespace, name, match);
                     
+                    /*
                     var attrstr = "";
                     var illegalNames = ["nodename", "filename", "style", "debug", "id", "class"];
@@ -394 +463 @@
                     });
 
-                    elementDIV.text("<" + fullNodename + " " + attrstr + ">");
-                    
-                    _textDiv.prepend(infoContainer);
+                    infoContainer.text("<" + fullNodename + " " + attrstr + ">");
+                    */
+                    
+                    if(name && name.length > 0)
+                    {
+                        infoContainer.text(name);
+                    }
+                    if(match && match.length > 0)
+                    {
+                        infoContainer.text(match);
+                    }
+                    
+                    if(_templateSelector.children("div").length > 0)
+                    {
+                        var spacer = $("<div>&gt;&gt;</div>");
+                        spacer.addClass("gbSpacer");
+
+                        _templateSelector.prepend(spacer);
+                        _elements.push(spacer);
+                    }
+                    
+                    _templateSelector.prepend(infoContainer);
+                    
+                    resizeContainers();
                 });
                 
@@ -414 +504 @@
             }
         });
+    }
+    
+    var resizeContainers = function()
+    {
+        var templates = _templateSelector.children(".gbTemplateContainer");
+        var spacers = _templateSelector.children(".gbSpacer");
+        
+        var templateWidth = (79/templates.length) + "%";
+        templates.css("width", templateWidth);
+        
+        if(spacers.length > 0)
+        {
+            var spacersWidth = (19/spacers.length) + "%";
+            spacers.css("width", spacersWidth);
+        }
     }