Separate metadata ui in visual editor

diff --git a/editor.css b/editor.css
index ba6ec7b..9b7995d 100644 (file)
--- a/editor.css
+++ b/editor.css
@@ -17,4 +17,12 @@ body {
 \r
 #rng-skelton-menu ul {\r
     list-style-type: none;\r
 \r
 #rng-skelton-menu ul {\r
     list-style-type: none;\r

+}\r
+\r
+#rng-visualEditor-content {\r
+    float:left;\r
+}\r
+\r
+#rng-visualEditor-meta {\r
+    float:right;\r

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 2fecfde..2c3b6d3 100644 (file)
--- a/modules/visualEditor.js
+++ b/modules/visualEditor.js
@@ -4,11 +4,34 @@ rng.modules.visualEditor = function(sandbox) {
     var view = $(sandbox.getTemplate('main')());\r
     var isDirty = false;\r
     \r
     var view = $(sandbox.getTemplate('main')());\r
     var isDirty = false;\r
     \r

+    var getMetaData = function() {\r
+        var toret = {};\r
+        view.find('#rng-visualEditor-meta table tr').each(function() {\r
+            var tr = $(this);\r
+            var key = $(tr.find('td')[0]).html();\r
+            var value = $(tr.find('td input')[0]).val();\r
+            toret[key] = value;\r
+        });\r
+        console.log(toret);\r
+        return toret;\r
+    };\r
+    \r
+    var setMetaData = function(metadata) {\r
+        var table = view.find('#rng-visualEditor-meta table');\r
+        table.empty();\r
+        _.each(_.keys(metadata), function(key) {    \r
+            $(sandbox.getTemplate('metaItem')({key: key, value: metadata[key]})).appendTo(table);\r
+        });\r
+    };\r

     \r
     $('#rng-visualEditor-content', view).on('keyup', function() {\r
         isDirty = true;\r
     });\r
     \r
     \r
     $('#rng-visualEditor-content', view).on('keyup', function() {\r
         isDirty = true;\r
     });\r
     \r

+    $('#rng-visualEditor-meta', view).on('keyup', function() {\r
+        isDirty = true;\r
+    });\r
+    \r

     return {\r
         start: function() {\r
             sandbox.publish('ready');\r
     return {\r
         start: function() {\r
             sandbox.publish('ready');\r


@@ -19,10 +42,11 @@ rng.modules.visualEditor = function(sandbox) {
         setDocument: function(xml) {\r
             var transformed = transformations.fromXML.getDocumentDescription(xml);\r
             $('#rng-visualEditor-content', view).html(transformed.HTMLTree);\r
         setDocument: function(xml) {\r
             var transformed = transformations.fromXML.getDocumentDescription(xml);\r
             $('#rng-visualEditor-content', view).html(transformed.HTMLTree);\r

+            setMetaData(transformed.metadata);\r

             isDirty = false;\r
         },\r
         getDocument: function() {\r
             isDirty = false;\r
         },\r
         getDocument: function() {\r

-            return transformations.toXML.getXML({HTMLTree: $('#rng-visualEditor-content').text(), metadata: {}});\r
+            return transformations.toXML.getXML({HTMLTree: $('#rng-visualEditor-content').html(), metadata: getMetaData()});\r

         },\r
         isDirty: function() {\r
             return isDirty;\r
         },\r
         isDirty: function() {\r
             return isDirty;\r