Visual editor - tweaking saving document ui & behavior

- save button instead of a link
- simple message on saving

diff --git a/editor.css b/editor.css
index c587b50..a8470f7 100644 (file)
--- a/editor.css
+++ b/editor.css
@@ -11,10 +11,28 @@ body {
     display: none;\r
 }\r
 \r
+#rng-skelton {\r
+    position: relative;\r
+}\r
+\r
 #rng-skelton-menu {\r
     float: right;\r
 }\r
 \r
+#rng-skelton-messages {\r
+    position: absolute;\r
+    top: -22px;\r
+    width:100%;\r
+    text-align:center;\r
+}\r
+\r
+#rng-skelton-messages span {\r
+    font-weight: bold;\r
+    background: #f9edbe;\r
+    padding: 2px 5px;\r
+    border: solid 1px #f6e39c;\r
+}\r
+\r
 #rng-skelton-menu ul {\r
     list-style-type: none;\r
 }\r

diff --git a/modules/data.js b/modules/data.js
index 5f3fd39..7a59cfb 100644 (file)
--- a/modules/data.js
+++ b/modules/data.js
@@ -52,10 +52,13 @@ rng.modules.data = function(sandbox) {
             sandbox.publish('documentChanged', doc, reason);\r
         },\r
         saveDocument: function() {\r
+            sandbox.publish('savingStarted');\r
             $.ajax({\r
                 method: 'post',\r
                 url: '/' + gettext('editor') + '/' + document_id,\r
-                data: JSON.stringify({document:doc})\r
+                data: JSON.stringify({document:doc}),\r
+                success: function() {sandbox.publish('savingEnded', 'success');},\r
+                error: function() {sandbox.publish('savingEnded', 'error');}\r
             });\r
         }\r
         \r

diff --git a/modules/rng.js b/modules/rng.js
index 0a39ed8..36bd2f8 100644 (file)
--- a/modules/rng.js
+++ b/modules/rng.js
@@ -70,6 +70,14 @@ rng.modules.rng = function(sandbox) {
         documentChanged: function(document, reason) {\r
             var slug = (reason === 'visual_edit' ? 'source' : 'visual');\r
             sandbox.getModule(slug+'Editor').setDocument(document);\r
+        },\r
+        savingStarted: function() {\r
+            sandbox.getModule('skelton').deactivateCommand('save');\r
+            sandbox.getModule('skelton').showMessage(gettext('Saving...'));\r
+        },\r
+        savingEnded: function(status) {\r
+            sandbox.getModule('skelton').activateCommand('save');\r
+            sandbox.getModule('skelton').clearMessage();\r
         }\r
     }\r
     \r

diff --git a/modules/skelton.js b/modules/skelton.js
index 0e6749a..3141459 100644 (file)
--- a/modules/skelton.js
+++ b/modules/skelton.js
@@ -2,7 +2,7 @@ rng.modules.skelton = function(sandbox) {
     \r
     var view = $(sandbox.getTemplate('main')());\r
     \r
-    view.find('#rng-skelton-menu a').click(function(e) {\r
+    view.find('#rng-skelton-menu button').click(function(e) {\r
         e.preventDefault();\r
         sandbox.publish('cmd.' + $(e.target).attr('data-cmd'));\r
     });\r
@@ -14,6 +14,18 @@ rng.modules.skelton = function(sandbox) {
         },\r
         setMainView: function(mainView) {\r
             view.find('#rng-skelton-mainView').html(mainView);\r
+        },\r
+        showMessage: function(message) {\r
+            view.find('#rng-skelton-messages').html('<span>'+message+'</span>').show();\r
+        },\r
+        clearMessage: function() {\r
+            view.find('#rng-skelton-messages').empty().hide();\r
+        },\r
+        deactivateCommand: function(cmd) {\r
+            view.find('[data-cmd='+cmd+']').addClass('disabled');\r
+        },\r
+        activateCommand: function(cmd) {\r
+            view.find('[data-cmd='+cmd+']').removeClass('disabled');\r
         }\r
     }\r
 };
\ No newline at end of file