documentCanvas - removing yellow "glow" around contenteditable element in Chrome

[fnpeditor.git] / modules / rng / rng.js

diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index 4b9aecf..0322ca2 100644 (file)
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -1,27 +1,43 @@
 define([\r
 'fnpjs/layout',\r
 define([\r
 'fnpjs/layout',\r

+'fnpjs/vbox',\r

 'views/tabs/tabs',\r
 'views/tabs/tabs',\r

-'libs/text!./mainLayout.html'\r
-], function(layout, tabs, mainLayoutTemplate) {\r
+'libs/text!./mainLayout.html',\r
+'libs/text!./editingLayout.html',\r
+], function(layout, vbox, tabs, mainLayoutTemplate, visualEditingLayoutTemplate) {\r

 \r
 return function(sandbox) {\r
     'use strict';\r
     \r
 \r
 return function(sandbox) {\r
     'use strict';\r
     \r

-    var mainTabs = (new tabs.View()).render();\r
-    var mainLayout = new layout.Layout(mainLayoutTemplate);\r
-    sandbox.getDOM().append(mainLayout.getAsView());\r
+    function addMainTab(title, slug, view) {\r
+        views.mainTabs.addTab(title, slug, view);\r
+    }\r

     \r
     \r

-    function addTab(title, slug, view) {\r
-        mainTabs.addTab(title, slug, view);\r
+    var views = {\r
+        mainLayout: new layout.Layout(mainLayoutTemplate),\r
+        mainTabs: (new tabs.View()).render(),\r
+        visualEditing: new layout.Layout(visualEditingLayoutTemplate),\r
+        visualEditingSidebar: (new tabs.View({stacked: true})).render(),\r
+        currentNodePaneLayout: new vbox.VBox()\r

     }\r
     \r
     }\r
     \r

+    views.visualEditing.setView('rightColumn', views.visualEditingSidebar.getAsView());\r
+    addMainTab('rng2 test', 'rng2test', views.visualEditing.getAsView());\r
+    \r
+    sandbox.getDOM().append(views.mainLayout.getAsView());\r
+    \r
+    views.visualEditingSidebar.addTab({icon: 'pencil'}, 'edit', views.currentNodePaneLayout.getAsView());\r
+    \r
+    \r
+\r
+    \r

     /* Events handling */\r
     \r
     var eventHandlers = {};\r
      \r
     eventHandlers.sourceEditor = {\r
         ready: function() {\r
     /* Events handling */\r
     \r
     var eventHandlers = {};\r
      \r
     eventHandlers.sourceEditor = {\r
         ready: function() {\r

-            addTab(gettext('Source'), 'source',  sandbox.getModule('sourceEditor').getView());\r
+            addMainTab(gettext('Source'), 'source',  sandbox.getModule('sourceEditor').getView());\r

             sandbox.getModule('sourceEditor').setDocument(sandbox.getModule('data').getDocument());\r
         }\r
     };\r
             sandbox.getModule('sourceEditor').setDocument(sandbox.getModule('data').getDocument());\r
         }\r
     };\r


@@ -29,16 +45,16 @@ return function(sandbox) {
     eventHandlers.visualEditor = {\r
         ready: function() {\r
             sandbox.getModule('visualEditor').setDocument(sandbox.getModule('data').getDocument());\r
     eventHandlers.visualEditor = {\r
         ready: function() {\r
             sandbox.getModule('visualEditor').setDocument(sandbox.getModule('data').getDocument());\r

-            addTab(gettext('Visual'), 'visual', sandbox.getModule('visualEditor').getView());\r
+            addMainTab(gettext('Visual'), 'visual', sandbox.getModule('visualEditor').getView());\r

             \r
         }\r
     };\r
     \r
     eventHandlers.data = {\r
         ready: function() {\r
             \r
         }\r
     };\r
     \r
     eventHandlers.data = {\r
         ready: function() {\r

-            mainLayout.setView('mainView', mainTabs.getAsView());\r
+            views.mainLayout.setView('mainView', views.mainTabs.getAsView());\r

             \r
             \r

-            _.each(['visualEditor', 'sourceEditor', 'rng2', 'mainBar', 'indicator'], function(moduleName) {\r
+            _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator'], function(moduleName) {\r

                 sandbox.getModule(moduleName).start();\r
             });\r
         },\r
                 sandbox.getModule(moduleName).start();\r
             });\r
         },\r


@@ -58,14 +74,14 @@ return function(sandbox) {
     \r
     eventHandlers.rng2 = {\r
         ready: function() {\r
     \r
     eventHandlers.rng2 = {\r
         ready: function() {\r

-           addTab('rng2 test', 'rng2test', sandbox.getModule('rng2').getView());\r
+           addMainTab('rng2 test', 'rng2test', sandbox.getModule('rng2').getView());\r

            \r
         }\r
     }\r
     \r
     eventHandlers.mainBar = {\r
         ready: function() {\r
            \r
         }\r
     }\r
     \r
     eventHandlers.mainBar = {\r
         ready: function() {\r

-            mainLayout.setView('topPanel', sandbox.getModule('mainBar').getView());\r
+            views.mainLayout.setView('topPanel', sandbox.getModule('mainBar').getView());\r

         },\r
         'cmd.save': function() {\r
             sandbox.getModule('data').fakeSave();\r
         },\r
         'cmd.save': function() {\r
             sandbox.getModule('data').fakeSave();\r


@@ -74,8 +90,103 @@ return function(sandbox) {
     \r
     eventHandlers.indicator = {\r
         ready: function() {\r
     \r
     eventHandlers.indicator = {\r
         ready: function() {\r

-            mainLayout.setView('messages', sandbox.getModule('indicator').getView());\r
+            views.mainLayout.setView('messages', sandbox.getModule('indicator').getView());\r
+        }\r
+    };\r
+    \r
+\r
+    \r
+    eventHandlers.documentCanvas = {\r
+        ready: function() {\r
+            sandbox.getModule('documentCanvas').setDocument(sandbox.getModule('data').getDocument());\r
+            views.visualEditing.setView('leftColumn', sandbox.getModule('documentCanvas').getView());\r
+        },\r
+        \r
+        nodeSelected: function(node) {\r
+            sandbox.getModule('nodePane').setNode(node);\r
+            sandbox.getModule('nodeFamilyTree').setNode(node);\r
+            sandbox.getModule('nodeBreadCrumbs').setNode(node);\r
+        },\r
+        \r
+        contentChanged: function() {\r
+        \r
+        },\r
+        \r
+        nodeHovered: function(node) {\r
+            sandbox.getModule('documentCanvas').highlightNode(node.attr('id'));\r
+            sandbox.getModule('nodeFamilyTree').highlightNode(node.attr('id'));\r
+            sandbox.getModule('nodeBreadCrumbs').highlightNode(node.attr('id'));\r
+            \r
+        },\r
+        \r
+        nodeBlured: function(node) {\r
+            sandbox.getModule('documentCanvas').dimNode(node.attr('id'));\r
+            sandbox.getModule('nodeFamilyTree').dimNode(node.attr('id'));\r
+            sandbox.getModule('nodeBreadCrumbs').dimNode(node.attr('id'));\r
+        }\r
+    };\r
+\r
+    eventHandlers.nodePane = {\r
+        ready: function() {\r
+            views.currentNodePaneLayout.appendView(sandbox.getModule('nodePane').getView());\r
+        },\r
+        \r
+        nodeChanged: function(attr, value) {\r
+            sandbox.getModule('documentCanvas').modifyCurrentNode(attr, value);\r

         }\r
         }\r

+    };\r
+    \r
+    eventHandlers.metadataEditor = {\r
+        ready: function() {\r
+            sandbox.getModule('metadataEditor').setMetadata(sandbox.getModule('data').getDocument());\r
+            views.visualEditingSidebar.addTab({icon: 'info-sign'}, 'metadataEditor', sandbox.getModule('metadataEditor').getView());\r
+        }\r
+    };\r
+    \r
+    eventHandlers.nodeFamilyTree = {\r
+        ready: function() {\r
+            views.currentNodePaneLayout.appendView(sandbox.getModule('nodeFamilyTree').getView());\r
+        },\r
+        nodeEntered: function(id) {\r
+            sandbox.getModule('documentCanvas').highlightNode(id);\r
+        },\r
+        nodeLeft: function(id) {\r
+            sandbox.getModule('documentCanvas').dimNode(id);\r
+        },\r
+        nodeSelected: function(id) {\r
+            sandbox.getModule('documentCanvas').selectNode(id);\r
+        }\r
+    };\r
+    \r
+    eventHandlers.documentToolbar = {\r
+        ready: function() {\r
+            views.visualEditing.setView('toolbar', sandbox.getModule('documentToolbar').getView());\r
+        },\r
+        toggleGrid: function(toggle) {\r
+            sandbox.getModule('documentCanvas').toggleGrid(toggle);\r
+        },\r
+        newNodeRequested: function(wlxmlTag, wlxmlClass) {\r
+            if(window.getSelection().isCollapsed) {\r
+                sandbox.getModule('documentCanvas').insertNewNode(wlxmlTag, wlxmlClass);\r
+            } else {\r
+                sandbox.getModule('documentCanvas').wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);\r
+            }\r
+        }\r
+    };\r
+    \r
+    eventHandlers.nodeBreadCrumbs = {\r
+        ready: function() {\r
+            views.visualEditing.setView('statusBar', sandbox.getModule('nodeBreadCrumbs').getView());\r
+        },\r
+        nodeHighlighted: function(id) {\r
+            sandbox.getModule('documentCanvas').highlightNode(id);\r
+        },\r
+        nodeDimmed: function(id) {\r
+            sandbox.getModule('documentCanvas').dimNode(id);\r
+        },\r
+        nodeSelected: function(id) {\r
+            sandbox.getModule('documentCanvas').selectNode(id);\r
+        }        \r

     }\r
     \r
     /* api */\r
     }\r
     \r
     /* api */\r