Refactored editor, detection for auto-generated page

system/extensions/edit.css

@@ -18,12 +18,6 @@
 .yellow-bar-right a {
     margin-left: 1em;
 }
-.yellow-bar-right #yellow-bar-create {
-    padding: 0 0.5em;
-}
-.yellow-bar-right #yellow-bar-delete {
-    padding: 0 0.5em;
-}
 .yellow-bar-banner {
     clear: both;
 }
@@ -40,24 +34,32 @@
     border: 1px solid #bbb;
     border-radius: 4px;
     box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
+    text-align: center;
 }
 .yellow-pane h1 {
     color: #000;
     font-size: 2em;
     margin: 0 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .yellow-pane p {
-    margin: 0.5em;
+    margin: 0.5em 0;
 }
 .yellow-pane .yellow-status {
     margin-bottom: 1em;
 }
 .yellow-pane .yellow-fields {
-    width: 15em;
-    text-align: left;
+    width: 14em;
     margin: 0 auto;
+    text-align: left;
 }
-.yellow-pane .yellow-form-control {
+.yellow-pane .yellow-fields .yellow-center {
+    width: 14em;
+    display: inline-block;
+    text-align: center;
+}
+.yellow-pane .yellow-fields .yellow-form-control {
     width: 15em;
     box-sizing: border-box;
 }
@@ -109,6 +111,23 @@
     border-width: 11px;
     margin-left: -11px;
 }
+.yellow-settings {
+    text-align: left;
+}
+.yellow-settings-left {
+    float: left;
+    padding: 0 0.5em;
+}
+.yellow-settings-right {
+    float: left;
+}
+.yellow-settings-separator {
+    visibility: hidden;
+    padding: 20px;
+}
+.yellow-settings-banner {
+    clear: both;
+}
 .yellow-popup {
     position: absolute;
     display: none;
@@ -159,6 +178,12 @@
 .yellow-toolbar-banner {
     clear: both;
 }
+.yellow-toolbar h1 {
+    margin: -5px 0 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .yellow-toolbar li {
     display: inline-block;
     vertical-align: top;
@@ -271,6 +296,31 @@
 .yellow-toolbar-selected.yellow-toolbar-tooltip::after {
     display: none;
 }
+.yellow-edit-text {
+    margin: 0;
+    padding: 0 2px;
+    outline: none;
+    resize: none;
+    border: none;
+    font-size: 0.9em;
+    font-family: inherit;
+    font-weight: normal;
+    line-height: normal;
+}
+.yellow-edit-preview {
+    padding: 0;
+    overflow: auto;
+}
+.yellow-edit-preview h1 {
+    margin: 0.67em 0;
+}
+.yellow-edit-preview p {
+    margin: 1em 0;
+}
+.yellow-edit-preview .content {
+    margin: 0;
+    padding: 0;
+}
 .yellow-form-control {
     margin: 0;
     padding: 2px 4px;
@@ -318,44 +368,20 @@
 
 /* Specific panes */
 
-#yellow-pane-login,
-#yellow-pane-signup,
-#yellow-pane-forgot,
-#yellow-pane-recover,
-#yellow-pane-quit,
-#yellow-pane-about,
-#yellow-pane-account,
-#yellow-pane-information {
-    text-align: center;
-}
-#yellow-pane-edit-toolbar-title {
-    margin: -5px 0 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-#yellow-pane-edit-text {
-    padding: 0 2px;
-    outline: none;
-    resize: none;
-    border: none;
-}
-#yellow-pane-edit-preview {
-    padding: 0;
-    overflow: auto;
-}
-#yellow-pane-edit-preview h1 {
-    margin: 0.67em 0;
+#yellow-pane-create-bar {
+    padding: 0 0.5em;
 }
-#yellow-pane-edit-preview p {
-    margin: 1em 0;
+#yellow-pane-delete-bar {
+    padding: 0 0.5em;
 }
-#yellow-pane-edit-preview .content {
-    margin: 0;
-    padding: 0;
+#yellow-pane-create,
+#yellow-pane-edit,
+#yellow-pane-delete {
+    text-align: left;
 }
 #yellow-pane-menu {
     padding: 10px 0;
+    text-align: left;
 }
 
 /* Specific popups */

system/extensions/edit.js

@@ -16,7 +16,6 @@ var yellow = {
 
 yellow.edit = {
     paneId: 0,          //visible pane ID
-    paneActionOld: 0,   //previous pane action
     paneAction: 0,      //current pane action
     paneStatus: 0,      //current pane status
     popupId: 0,         //visible popup ID
@@ -34,7 +33,7 @@ yellow.edit = {
     
     // Handle keyboard
     keydown: function(e) {
-        if (this.paneId=="yellow-pane-edit") this.processShortcut(e);
+        if (this.paneId=="yellow-pane-create" || this.paneId=="yellow-pane-edit" || this.paneId=="yellow-pane-delete") this.processShortcut(e);
         if (this.paneId && e.keyCode==27) this.hidePane(this.paneId);
     },
     
@@ -48,7 +47,7 @@ yellow.edit = {
     drop: function(e) {
         e.stopPropagation();
         e.preventDefault();
-        var elementText = document.getElementById("yellow-pane-edit-text");
+        var elementText = document.getElementById(this.paneId+"-text");
         var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
         for (var i=0; i<files.length; i++) this.uploadFile(elementText, files[i]);
     },
@@ -85,12 +84,12 @@ yellow.edit = {
         if (yellow.system.userName) {
             elementDiv.innerHTML =
                 "<div class=\"yellow-bar-left\">"+
-                "<a href=\"#\" id=\"yellow-bar-edit\" data-action=\"edit\" aria-expanded=\"false\">"+this.getText("Edit")+"</a>"+
+                "<a href=\"#\" id=\"yellow-pane-edit-bar\" data-action=\"edit\" aria-expanded=\"false\">"+this.getText("Edit")+"</a>"+
                 "</div>"+
                 "<div class=\"yellow-bar-right\">"+
-                "<a href=\"#\" id=\"yellow-bar-create\" data-action=\"create\" aria-expanded=\"false\">"+this.getText("Create")+"</a>"+
-                "<a href=\"#\" id=\"yellow-bar-delete\" data-action=\"delete\" aria-expanded=\"false\">"+this.getText("Delete")+"</a>"+
-                "<a href=\"#\" id=\"yellow-bar-menu\" data-action=\"menu\" aria-expanded=\"false\">"+yellow.toolbox.encodeHtml(yellow.system.userName)+"</a>"+
+                "<a href=\"#\" id=\"yellow-pane-create-bar\" data-action=\"create\" aria-expanded=\"false\">"+this.getText("Create")+"</a>"+
+                "<a href=\"#\" id=\"yellow-pane-delete-bar\" data-action=\"delete\" aria-expanded=\"false\">"+this.getText("Delete")+"</a>"+
+                "<a href=\"#\" id=\"yellow-pane-menu-bar\" data-action=\"menu\" aria-expanded=\"false\">"+yellow.toolbox.encodeHtml(yellow.system.userName)+"</a>"+
                 "</div>"+
                 "<div class=\"yellow-bar-banner\"></div>";
         }
@@ -100,10 +99,9 @@ yellow.edit = {
     },
     
     // Update bar
-    updateBar: function(action, name) {
-        if (yellow.system.debug) console.log("yellow.edit.updateBar action:"+action);
-        if (action) {
-            var element = document.getElementById("yellow-bar-"+action);
+    updateBar: function(paneId, name) {
+        if (paneId) {
+            var element = document.getElementById(paneId+"-bar");
             if (element) {
                 if (name.indexOf("selected")!=-1) element.setAttribute("aria-expanded", "true");
                 yellow.toolbox.addClass(element, name);
@@ -124,13 +122,13 @@ yellow.edit = {
         elementPane.className = "yellow-pane";
         elementPane.setAttribute("id", paneId);
         elementPane.style.display = "none";
-        if (paneId=="yellow-pane-edit") {
+        if (paneId=="yellow-pane-create" || paneId=="yellow-pane-edit") {
             yellow.toolbox.addEvent(elementPane, "input", yellow.onUpdatePane);
             yellow.toolbox.addEvent(elementPane, "dragenter", yellow.onDrag);
             yellow.toolbox.addEvent(elementPane, "dragover", yellow.onDrag);
             yellow.toolbox.addEvent(elementPane, "drop", yellow.onDrop);
         }
-        if (paneId=="yellow-pane-edit" || paneId=="yellow-pane-menu") {
+        if (paneId=="yellow-pane-create" || paneId=="yellow-pane-edit" || paneId=="yellow-pane-delete" || paneId=="yellow-pane-menu") {
             var elementArrow = document.createElement("span");
             elementArrow.className = "yellow-arrow";
             elementArrow.setAttribute("id", paneId+"-arrow");
@@ -145,14 +143,12 @@ yellow.edit = {
                 "<form method=\"post\">"+
                 "<a href=\"#\" class=\"yellow-close\" data-action=\"close\"><i class=\"yellow-icon yellow-icon-close\"></i></a>"+
                 "<div class=\"yellow-title\"><h1>"+this.getText("LoginTitle")+"</h1></div>"+
-                "<div class=\"yellow-fields\" id=\"yellow-pane-login-fields\">"+
+                "<div class=\"yellow-fields\">"+
                 "<input type=\"hidden\" name=\"action\" value=\"login\" />"+
                 "<p><label for=\"yellow-pane-login-email\">"+this.getText("LoginEmail")+"</label><br /><input class=\"yellow-form-control\" name=\"email\" id=\"yellow-pane-login-email\" maxlength=\"64\" value=\""+yellow.toolbox.encodeHtml(yellow.system.editLoginEmail)+"\" /></p>"+
                 "<p><label for=\"yellow-pane-login-password\">"+this.getText("LoginPassword")+"</label><br /><input class=\"yellow-form-control\" type=\"password\" name=\"password\" id=\"yellow-pane-login-password\" maxlength=\"64\" value=\""+yellow.toolbox.encodeHtml(yellow.system.editLoginPassword)+"\" /></p>"+
                 "<p><input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("LoginButton")+"\" /></p>"+
-                "</div>"+
-                "<div class=\"yellow-actions\" id=\"yellow-pane-login-actions\">"+
-                "<p><a href=\"#\" id=\"yellow-pane-login-forgot\" data-action=\"forgot\">"+this.getText("LoginForgot")+"</a><br /><a href=\"#\" id=\"yellow-pane-login-signup\" data-action=\"signup\">"+this.getText("LoginSignup")+"</a></p>"+
+                "<p><a href=\"#\" id=\"yellow-pane-login-forgot\" class=\"yellow-center\" data-action=\"forgot\">"+this.getText("LoginForgot")+"</a><br /><a href=\"#\" id=\"yellow-pane-login-signup\" class=\"yellow-center\" data-action=\"signup\">"+this.getText("LoginSignup")+"</a></p>"+
                 "</div>"+
                 "</form>";
                 break;
@@ -161,13 +157,13 @@ yellow.edit = {
                 "<form method=\"post\">"+
                 "<a href=\"#\" class=\"yellow-close\" data-action=\"close\"><i class=\"yellow-icon yellow-icon-close\"></i></a>"+
                 "<div class=\"yellow-title\"><h1>"+this.getText("SignupTitle")+"</h1></div>"+
-                "<div class=\"yellow-status\"><p id=\"yellow-pane-signup-status\" class=\""+paneStatus+"\">"+this.getText(paneAction+"Status", "", paneStatus)+"</p></div>"+
-                "<div class=\"yellow-fields\" id=\"yellow-pane-signup-fields\">"+
+                "<div class=\"yellow-status\"><p id=\"yellow-pane-signup-status\" class=\""+paneStatus+"\">"+this.getText("SignupStatus", "", paneStatus)+"</p></div>"+
+                "<div class=\"yellow-fields\">"+
                 "<input type=\"hidden\" name=\"action\" value=\"signup\" />"+
                 "<p><label for=\"yellow-pane-signup-name\">"+this.getText("SignupName")+"</label><br /><input class=\"yellow-form-control\" name=\"name\" id=\"yellow-pane-signup-name\" maxlength=\"64\" value=\""+yellow.toolbox.encodeHtml(this.getRequest("name"))+"\" /></p>"+
                 "<p><label for=\"yellow-pane-signup-email\">"+this.getText("SignupEmail")+"</label><br /><input class=\"yellow-form-control\" name=\"email\" id=\"yellow-pane-signup-email\" maxlength=\"64\" value=\""+yellow.toolbox.encodeHtml(this.getRequest("email"))+"\" /></p>"+
                 "<p><label for=\"yellow-pane-signup-password\">"+this.getText("SignupPassword")+"</label><br /><input class=\"yellow-form-control\" type=\"password\" name=\"password\" id=\"yellow-pane-signup-password\" maxlength=\"64\" value=\"\" /></p>"+
-                "<p><input type=\"checkbox\" name=\"consent\" value=\"consent\" id=\"consent\""+(this.getRequest("consent") ? " checked=\"checked\"" : "")+"> <label for=\"consent\">"+this.getText("SignupConsent")+"</label></p>"+
+                "<p><input type=\"checkbox\" name=\"consent\" value=\"consent\" id=\"yellow-pane-signup-consent\""+(this.getRequest("consent") ? " checked=\"checked\"" : "")+"> <label for=\"yellow-pane-signup-consent\">"+this.getText("SignupConsent")+"</label></p>"+
                 "<p><input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("SignupButton")+"\" /></p>"+
                 "</div>"+
                 "</form>";
@@ -177,8 +173,8 @@ yellow.edit = {
                 "<form method=\"post\">"+
                 "<a href=\"#\" class=\"yellow-close\" data-action=\"close\"><i class=\"yellow-icon yellow-icon-close\"></i></a>"+
                 "<div class=\"yellow-title\"><h1>"+this.getText("ForgotTitle")+"</h1></div>"+
-                "<div class=\"yellow-status\"><p id=\"yellow-pane-forgot-status\" class=\""+paneStatus+"\">"+this.getText(paneAction+"Status", "", paneStatus)+"</p></div>"+
-                "<div class=\"yellow-fields\" id=\"yellow-pane-forgot-fields\">"+
+                "<div class=\"yellow-status\"><p id=\"yellow-pane-forgot-status\" class=\""+paneStatus+"\">"+this.getText("ForgotStatus", "", paneStatus)+"</p></div>"+
+                "<div class=\"yellow-fields\">"+
                 "<input type=\"hidden\" name=\"action\" value=\"forgot\" />"+
                 "<p><label for=\"yellow-pane-forgot-email\">"+this.getText("ForgotEmail")+"</label><br /><input class=\"yellow-form-control\" name=\"email\" id=\"yellow-pane-forgot-email\" maxlength=\"64\" value=\""+yellow.toolbox.encodeHtml(this.getRequest("email"))+"\" /></p>"+
                 "<p><input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("OkButton")+"\" /></p>"+
@@ -190,8 +186,8 @@ yellow.edit = {
                 "<form method=\"post\">"+
                 "<a href=\"#\" class=\"yellow-close\" data-action=\"close\"><i class=\"yellow-icon yellow-icon-close\"></i></a>"+
                 "<div class=\"yellow-title\"><h1>"+this.getText("RecoverTitle")+"</h1></div>"+
-                "<div class=\"yellow-status\"><p id=\"yellow-pane-recover-status\" class=\""+paneStatus+"\">"+this.getText(paneAction+"Status", "", paneStatus)+"</p></div>"+
-                "<div class=\"yellow-fields\" id=\"yellow-pane-recover-fields\">"+
+                "<div class=\"yellow-status\"><p id=\"yellow-pane-recover-status\" class=\""+paneStatus+"\">"+this.getText("RecoverStatus", "", paneStatus)+"</p></div>"+
+                "<div class=\"yellow-fields\">"+
                 "<p><label for=\"yellow-pane-recover-password\">"+this.getText("RecoverPassword")+"</label><br /><input class=\"yellow-form-control\" type=\"password\" name=\"password\" id=\"yellow-pane-recover-password\" maxlength=\"64\" value=\"\" /></p>"+
                 "<p><input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("OkButton")+"\" /></p>"+
                 "</div>"+
@@ -202,8 +198,8 @@ yellow.edit = {
                 "<form method=\"post\">"+
                 "<a href=\"#\" class=\"yellow-close\" data-action=\"close\"><i class=\"yellow-icon yellow-icon-close\"></i></a>"+
                 "<div class=\"yellow-title\"><h1>"+this.getText("QuitTitle")+"</h1></div>"+
-                "<div class=\"yellow-status\"><p id=\"yellow-pane-quit-status\" class=\""+paneStatus+"\">"+this.getText(paneAction+"Status", "", paneStatus)+"</p></div>"+
-                "<div class=\"yellow-fields\" id=\"yellow-pane-quit-fields\">"+
+                "<div class=\"yellow-status\"><p id=\"yellow-pane-quit-status\" class=\""+paneStatus+"\">"+this.getText("QuitStatus", "", paneStatus)+"</p></div>"+
+                "<div class=\"yellow-fields\">"+
                 "<input type=\"hidden\" name=\"action\" value=\"quit\" />"+
                 "<input type=\"hidden\" name=\"csrftoken\" value=\""+yellow.toolbox.encodeHtml(this.getCookie("csrftoken"))+"\" />"+
                 "<p><label for=\"yellow-pane-quit-name\">"+this.getText("SignupName")+"</label><br /><input class=\"yellow-form-control\" name=\"name\" id=\"yellow-pane-quit-name\" maxlength=\"64\" value=\""+yellow.toolbox.encodeHtml(this.getRequest("name"))+"\" /></p>"+
@@ -212,82 +208,95 @@ yellow.edit = {
                 "</form>";
                 break;
             case "yellow-pane-account":
-                var rawDataLanguages = "";
-                if (yellow.system.serverLanguages && Object.keys(yellow.system.serverLanguages).length>1) {
-                    rawDataLanguages += "<p>";
-                    for (var language in yellow.system.serverLanguages) {
-                        var checked = language==this.getRequest("language") ? " checked=\"checked\"" : "";
-                        rawDataLanguages += "<label for=\"yellow-pane-account-"+language+"\"><input type=\"radio\" name=\"language\" id=\"yellow-pane-account-"+language+"\" value=\""+language+"\""+checked+"> "+yellow.toolbox.encodeHtml(yellow.system.serverLanguages[language])+"</label><br />";
-                    }
-                    rawDataLanguages += "</p>";
-                }
                 elementDiv.innerHTML =
                 "<form method=\"post\">"+
                 "<a href=\"#\" class=\"yellow-close\" data-action=\"close\"><i class=\"yellow-icon yellow-icon-close\"></i></a>"+
-                "<div class=\"yellow-title\"><h1 id=\"yellow-pane-account-title\">"+this.getText("SettingsTitle")+"</h1></div>"+
-                "<div class=\"yellow-status\"><p id=\"yellow-pane-account-status\" class=\""+paneStatus+"\">"+this.getText(paneAction+"Status", "", paneStatus)+"</p></div>"+
-                "<div class=\"yellow-fields\" id=\"yellow-pane-account-fields\">"+
+                "<div class=\"yellow-title\"><h1 id=\"yellow-pane-account-title\">"+this.getText("AccountTitle")+"</h1></div>"+
+                "<div class=\"yellow-status\"><p id=\"yellow-pane-account-status\" class=\""+paneStatus+"\">"+this.getText("AccountStatus", "", paneStatus)+"</p></div>"+
+                "<div class=\"yellow-settings\">"+
+                "<div id=\"yellow-pane-account-settings-actions\" class=\"yellow-settings-left\"><p>"+this.getRawDataActions(paneAction)+"</p></div>"+
+                "<div id=\"yellow-pane-account-settings-separator\" class=\"yellow-settings-left yellow-settings-separator\">&nbsp;</div>"+
+                "<div id=\"yellow-pane-account-settings-fields\" class=\"yellow-settings-right yellow-fields\">"+
                 "<input type=\"hidden\" name=\"action\" value=\"account\" />"+
                 "<input type=\"hidden\" name=\"csrftoken\" value=\""+yellow.toolbox.encodeHtml(this.getCookie("csrftoken"))+"\" />"+
                 "<p><label for=\"yellow-pane-account-name\">"+this.getText("SignupName")+"</label><br /><input class=\"yellow-form-control\" name=\"name\" id=\"yellow-pane-account-name\" maxlength=\"64\" value=\""+yellow.toolbox.encodeHtml(this.getRequest("name"))+"\" /></p>"+
                 "<p><label for=\"yellow-pane-account-email\">"+this.getText("SignupEmail")+"</label><br /><input class=\"yellow-form-control\" name=\"email\" id=\"yellow-pane-account-email\" maxlength=\"64\" value=\""+yellow.toolbox.encodeHtml(this.getRequest("email"))+"\" /></p>"+
-                "<p><label for=\"yellow-pane-account-password\">"+this.getText("SignupPassword")+"</label><br /><input class=\"yellow-form-control\" type=\"password\" name=\"password\" id=\"yellow-pane-account-password\" maxlength=\"64\" value=\"\" /></p>"+rawDataLanguages+
-                "<p>"+this.getText("AccountQuit")+" <a href=\"#\" data-action=\"quit\">"+this.getText("AccountMore")+"</a></p>"+
-                "<p><input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("OkButton")+"\" /></p>"+
+                "<p><label for=\"yellow-pane-account-password\">"+this.getText("SignupPassword")+"</label><br /><input class=\"yellow-form-control\" type=\"password\" name=\"password\" id=\"yellow-pane-account-password\" maxlength=\"64\" value=\"\" /></p>"+
+                "<p>"+this.getRawDataLanguages(paneId)+"</p>"+
+                "<p><input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("ChangeButton")+"\" /></p>"+
+                "<p><a href=\"#\" id=\"yellow-pane-account-quit\" class=\"yellow-center\" data-action=\"quit\">"+this.getText("AccountQuit")+"</a><br /><a href=\"#\" id=\"yellow-pane-account-update\" class=\"yellow-center\" data-action=\"update\">"+this.getText("AccountUpdate")+"</a></p>"+
+                "</div>"+
+                "<div class=\"yellow-settings yellow-settings-banner\"></div>"+
                 "</div>"+
                 "</form>";
                 break;
-            case "yellow-pane-about":
+            case "yellow-pane-update":
                 elementDiv.innerHTML =
                 "<form method=\"post\">"+
                 "<a href=\"#\" class=\"yellow-close\" data-action=\"close\"><i class=\"yellow-icon yellow-icon-close\"></i></a>"+
-                "<div class=\"yellow-title\"><h1 id=\"yellow-pane-about-title\">"+yellow.toolbox.encodeHtml(yellow.system.serverVersion)+"</h1></div>"+
-                "<div class=\"yellow-status\"><p id=\"yellow-pane-about-status\" class=\""+paneStatus+"\">"+this.getText("AboutStatus", "", paneStatus)+"</p></div>"+
-                "<div class=\"yellow-output\" id=\"yellow-pane-about-output\">"+yellow.page.rawDataOutput+"</div>"+
-                "<div class=\"yellow-buttons\" id=\"yellow-pane-about-buttons\">"+
+                "<div class=\"yellow-title\"><h1 id=\"yellow-pane-update-title\">"+yellow.toolbox.encodeHtml(yellow.system.serverVersion)+"</h1></div>"+
+                "<div class=\"yellow-status\"><p id=\"yellow-pane-update-status\" class=\""+paneStatus+"\">"+this.getText("UpdateStatus", "", paneStatus)+"</p></div>"+
+                "<div class=\"yellow-output\" id=\"yellow-pane-update-output\">"+yellow.page.rawDataOutput+"</div>"+
+                "<div class=\"yellow-buttons\" id=\"yellow-pane-update-buttons\">"+
                 "<p><a href=\"#\" class=\"yellow-btn\" data-action=\"close\">"+this.getText("OkButton")+"</a></p>"+
                 "</div>"+
                 "</form>";
                 break;
+            case "yellow-pane-create":
+                elementDiv.innerHTML =
+                "<form method=\"post\">"+
+                "<div id=\"yellow-pane-create-toolbar\">"+
+                "<div class=\"yellow-toolbar yellow-toolbar-left\"><h1 id=\"yellow-pane-create-toolbar-title\">"+this.getText("Create")+"</h1></div>"+
+                "<ul id=\"yellow-pane-create-toolbar-buttons\" class=\"yellow-toolbar yellow-toolbar-left\">"+this.getRawDataButtons(paneId)+"</ul>"+
+                "<ul id=\"yellow-pane-create-toolbar-main\" class=\"yellow-toolbar yellow-toolbar-right\">"+
+                "<li><a href=\"#\" id=\"yellow-pane-create-cancel\" class=\"yellow-toolbar-btn\" data-action=\"close\">"+this.getText("CancelButton")+"</a></li>"+
+                "<li><a href=\"#\" id=\"yellow-pane-create-submit\" class=\"yellow-toolbar-btn\" data-action=\"submit\">"+this.getText("CreateButton")+"</a></li>"+
+                "</ul>"+
+                "<ul class=\"yellow-toolbar yellow-toolbar-banner\"></ul>"+
+                "</div>"+
+                "<textarea id=\"yellow-pane-create-text\" class=\"yellow-edit-text\"></textarea>"+
+                "<div id=\"yellow-pane-create-preview\" class=\"yellow-edit-preview\"></div>"+
+                "</form>";
+                break;
             case "yellow-pane-edit":
-                var rawDataButtons = "";
-                if (yellow.system.editToolbarButtons && yellow.system.editToolbarButtons!="none") {
-                    var tokens = yellow.system.editToolbarButtons.split(/\s*,\s*/);
-                    for (var i=0; i<tokens.length; i++) {
-                        var token = tokens[i];
-                        if (token!="separator") {
-                            var shortcut = this.getShortcut(token);
-                            var rawDataShortcut = shortcut ? "&nbsp;&nbsp;"+yellow.toolbox.encodeHtml(shortcut) : "";
-                            var rawDataExpandable = this.isExpandable(token) ? " aria-expanded=\"false\"" : "";
-                            rawDataButtons += "<li><a href=\"#\" id=\"yellow-toolbar-"+yellow.toolbox.encodeHtml(token)+"\" class=\"yellow-toolbar-btn-icon yellow-toolbar-tooltip\" data-action=\"toolbar\" data-status=\""+yellow.toolbox.encodeHtml(token)+"\" aria-label=\""+this.getText("Toolbar", "", token)+rawDataShortcut+"\""+rawDataExpandable+"><i class=\"yellow-icon yellow-icon-"+yellow.toolbox.encodeHtml(token)+"\"></i></a></li>";
-                        } else {
-                            rawDataButtons += "<li><a href=\"#\" class=\"yellow-toolbar-btn-separator\"></a></li>";
-                        }
-                    }
-                    if (yellow.system.debug) console.log("yellow.edit.createPane buttons:"+yellow.system.editToolbarButtons);
-                }
                 elementDiv.innerHTML =
                 "<form method=\"post\">"+
                 "<div id=\"yellow-pane-edit-toolbar\">"+
-                "<h1 id=\"yellow-pane-edit-toolbar-title\" class=\"yellow-toolbar yellow-toolbar-left\">"+this.getText("Edit")+"</h1>"+
-                "<ul id=\"yellow-pane-edit-toolbar-buttons\" class=\"yellow-toolbar yellow-toolbar-left\">"+rawDataButtons+"</ul>"+
+                "<div class=\"yellow-toolbar yellow-toolbar-left\"><h1 id=\"yellow-pane-edit-toolbar-title\">"+this.getText("Edit")+"</h1></div>"+
+                "<ul id=\"yellow-pane-edit-toolbar-buttons\" class=\"yellow-toolbar yellow-toolbar-left\">"+this.getRawDataButtons(paneId)+"</ul>"+
                 "<ul id=\"yellow-pane-edit-toolbar-main\" class=\"yellow-toolbar yellow-toolbar-right\">"+
                 "<li><a href=\"#\" id=\"yellow-pane-edit-cancel\" class=\"yellow-toolbar-btn\" data-action=\"close\">"+this.getText("CancelButton")+"</a></li>"+
-                "<li><a href=\"#\" id=\"yellow-pane-edit-send\" class=\"yellow-toolbar-btn\" data-action=\"send\">"+this.getText("EditButton")+"</a></li>"+
+                "<li><a href=\"#\" id=\"yellow-pane-edit-submit\" class=\"yellow-toolbar-btn\" data-action=\"submit\">"+this.getText("EditButton")+"</a></li>"+
                 "</ul>"+
                 "<ul class=\"yellow-toolbar yellow-toolbar-banner\"></ul>"+
                 "</div>"+
-                "<textarea id=\"yellow-pane-edit-text\" class=\"yellow-form-control\"></textarea>"+
-                "<div id=\"yellow-pane-edit-preview\"></div>"+
+                "<textarea id=\"yellow-pane-edit-text\" class=\"yellow-edit-text\"></textarea>"+
+                "<div id=\"yellow-pane-edit-preview\" class=\"yellow-edit-preview\"></div>"+
+                "</form>";
+                break;
+            case "yellow-pane-delete":
+                elementDiv.innerHTML =
+                "<form method=\"post\">"+
+                "<div id=\"yellow-pane-delete-toolbar\">"+
+                "<div class=\"yellow-toolbar yellow-toolbar-left\"><h1 id=\"yellow-pane-delete-toolbar-title\">"+this.getText("Delete")+"</h1></div>"+
+                "<ul id=\"yellow-pane-delete-toolbar-buttons\" class=\"yellow-toolbar yellow-toolbar-left\">"+this.getRawDataButtons(paneId)+"</ul>"+
+                "<ul id=\"yellow-pane-delete-toolbar-main\" class=\"yellow-toolbar yellow-toolbar-right\">"+
+                "<li><a href=\"#\" id=\"yellow-pane-delete-cancel\" class=\"yellow-toolbar-btn\" data-action=\"close\">"+this.getText("CancelButton")+"</a></li>"+
+                "<li><a href=\"#\" id=\"yellow-pane-delete-submit\" class=\"yellow-toolbar-btn\" data-action=\"submit\">"+this.getText("DeleteButton")+"</a></li>"+
+                "</ul>"+
+                "<ul class=\"yellow-toolbar yellow-toolbar-banner\"></ul>"+
+                "</div>"+
+                "<textarea id=\"yellow-pane-delete-text\" class=\"yellow-edit-text\"></textarea>"+
+                "<div id=\"yellow-pane-delete-preview\" class=\"yellow-edit-preview\"></div>"+
                 "</form>";
                 break;
             case "yellow-pane-menu":
                 elementDiv.innerHTML =
                 "<ul class=\"yellow-dropdown\">"+
                 "<li><span>"+yellow.toolbox.encodeHtml(yellow.system.userEmail)+"</span></li>"+
-                "<li><a href=\"#\" data-action=\"account\">"+this.getText("SettingsTitle")+"</a></li>" +
+                "<li><a href=\"#\" data-action=\"settings\">"+this.getText("MenuSettings")+"</a></li>" +
                 "<li><a href=\"#\" data-action=\"help\">"+this.getText("MenuHelp")+"</a></li>" +
-                "<li><a href=\"#\" data-action=\"logout\">"+this.getText("MenuLogout")+"</a></li>"+
+                "<li><a href=\"#\" data-action=\"submit\" data-args=\"action:logout\">"+this.getText("MenuLogout")+"</a></li>"+
                 "</ul>";
                 break;
             case "yellow-pane-information":
@@ -301,7 +310,9 @@ yellow.edit = {
                 "</div>"+
                 "</form>";
                 break;
-            default: elementDiv.innerHTML = "<div class=\"yellow-error\"><p>Error: Pane '"+paneId+"' does not exist!</p></div>";
+            default: elementDiv.innerHTML =
+                "<a href=\"#\" class=\"yellow-close\" data-action=\"close\"><i class=\"yellow-icon yellow-icon-close\"></i></a>"+
+                "<div class=\"yellow-error\">Pane '"+paneId+"' was not found. Oh no...</div>";
         }
         elementPane.appendChild(elementDiv);
         yellow.toolbox.insertAfter(elementPane, document.getElementsByTagName("body")[0].firstChild);
@@ -309,10 +320,10 @@ yellow.edit = {
     },
 
     // Update pane
-    updatePane: function(paneId, paneAction, paneStatus, init) {
+    updatePane: function(paneId, paneAction, paneStatus, paneInit) {
         switch (paneId) {
             case "yellow-pane-login":
-                if (yellow.system.editLoginRestriction) {
+                if (paneInit && yellow.system.editLoginRestriction) {
                     yellow.toolbox.setVisible(document.getElementById("yellow-pane-login-signup"), false);
                 }
                 break;
@@ -323,52 +334,55 @@ yellow.edit = {
                 }
                 break;
             case "yellow-pane-account":
+                if (paneInit && yellow.system.editSettingsActions=="none") {
+                    document.getElementById("yellow-pane-account-title").innerHTML = this.getText("MenuSettings");
+                }
                 if (paneStatus=="none") {
-                    document.getElementById("yellow-pane-account-status").innerHTML = "<a href=\"#\" data-action=\"about\">"+this.getText("AboutTitle")+"</a>";
+                    document.getElementById("yellow-pane-account-status").innerHTML = this.getText("AccountStatusNone");
                     document.getElementById("yellow-pane-account-name").value = yellow.system.userName;
                     document.getElementById("yellow-pane-account-email").value = yellow.system.userEmail;
+                    document.getElementById("yellow-pane-account-password").value = "";
                     document.getElementById("yellow-pane-account-"+yellow.system.userLanguage).checked = true;
                 }
                 break;
-            case "yellow-pane-about":
-                if (paneStatus=="none" && this.isExtension("update")) {
-                    document.getElementById("yellow-pane-about-status").innerHTML = this.getText("AboutStatusCheck");
-                    document.getElementById("yellow-pane-about-output").innerHTML = "";
-                    setTimeout("yellow.action('send');", 500);
+            case "yellow-pane-update":
+                if (paneStatus=="none") {
+                    document.getElementById("yellow-pane-update-status").innerHTML = this.getText("UpdateStatusCheck");
+                    document.getElementById("yellow-pane-update-output").innerHTML = "";
+                    setTimeout("yellow.action('submit', '', 'action:update/option:check/');", 500);
                 }
-                if (paneStatus=="updates" && this.isExtension("update")) {
-                    document.getElementById("yellow-pane-about-status").innerHTML = "<a href=\"#\" data-action=\"update\">"+this.getText("AboutStatusUpdates")+"</a>";
+                if (paneStatus=="updates") {
+                    document.getElementById("yellow-pane-update-status").innerHTML = "<a href=\"#\" data-action=\"submit\" data-args=\"action:update\">"+this.getText("UpdateStatusUpdates")+"</a>";
                 }
                 break;
+            case "yellow-pane-create":
             case "yellow-pane-edit":
-                document.getElementById("yellow-pane-edit-text").focus();
-                if (init) {
-                    yellow.toolbox.setVisible(document.getElementById("yellow-pane-edit-text"), true);
-                    yellow.toolbox.setVisible(document.getElementById("yellow-pane-edit-preview"), false);
-                    document.getElementById("yellow-pane-edit-toolbar-title").innerHTML = yellow.toolbox.encodeHtml(yellow.page.title);
-                    document.getElementById("yellow-pane-edit-text").value = paneAction=="create" ? yellow.page.rawDataNew : yellow.page.rawDataEdit;
-                    var matches = document.getElementById("yellow-pane-edit-text").value.match(/^(\xEF\xBB\xBF)?\-\-\-[\r\n]+/);
-                    var position = document.getElementById("yellow-pane-edit-text").value.indexOf("\n", matches ? matches[0].length : 0);
-                    document.getElementById("yellow-pane-edit-text").setSelectionRange(position, position);
+            case "yellow-pane-delete":
+                document.getElementById(paneId+"-text").focus();
+                if (paneInit) {
+                    yellow.toolbox.setVisible(document.getElementById(paneId+"-text"), true);
+                    yellow.toolbox.setVisible(document.getElementById(paneId+"-preview"), false);
+                    document.getElementById(paneId+"-toolbar-title").innerHTML = yellow.toolbox.encodeHtml(yellow.page.title);
+                    document.getElementById(paneId+"-text").value = paneId=="yellow-pane-create" ? yellow.page.rawDataNew : yellow.page.rawDataEdit;
+                    var matches = document.getElementById(paneId+"-text").value.match(/^(\xEF\xBB\xBF)?\-\-\-[\r\n]+/);
+                    var position = document.getElementById(paneId+"-text").value.indexOf("\n", matches ? matches[0].length : 0);
+                    document.getElementById(paneId+"-text").setSelectionRange(position, position);
                     if (yellow.system.editToolbarButtons!="none") {
-                        yellow.toolbox.setVisible(document.getElementById("yellow-pane-edit-toolbar-title"), false);
+                        yellow.toolbox.setVisible(document.getElementById(paneId+"-toolbar-title"), false);
                         this.updateToolbar(0, "yellow-toolbar-checked");
                     }
-                    if (yellow.system.userRestriction) {
-                        yellow.toolbox.setVisible(document.getElementById("yellow-pane-edit-send"), false);
-                        document.getElementById("yellow-pane-edit-text").readOnly = true;
+                    if (yellow.system.userRestriction || (yellow.page.rawDataReadonly && paneId!="yellow-pane-create")) {
+                        yellow.toolbox.setVisible(document.getElementById(paneId+"-submit"), false);
+                        document.getElementById(paneId+"-text").readOnly = true;
                     }
                 }
-                if (!yellow.system.userRestriction) {
-                    var key, className;
-                    switch (this.getAction(paneId, paneAction)) {
-                        case "create":    key = "CreateButton"; className = "yellow-toolbar-btn yellow-toolbar-btn-create"; break;
-                        case "edit":    key = "EditButton"; className = "yellow-toolbar-btn yellow-toolbar-btn-edit"; break;
-                        case "delete":    key = "DeleteButton"; className = "yellow-toolbar-btn yellow-toolbar-btn-delete"; break;
-                    }
-                    if (document.getElementById("yellow-pane-edit-send").className != className) {
-                        document.getElementById("yellow-pane-edit-send").innerHTML = this.getText(key);
-                        document.getElementById("yellow-pane-edit-send").className = className;
+                if (!document.getElementById(paneId+"-text").readOnly) {
+                    paneAction = this.paneAction = this.getPaneAction(paneId);
+                    var className = "yellow-toolbar-btn yellow-toolbar-btn-"+paneAction;
+                    if (document.getElementById(paneId+"-submit").className != className) {
+                        document.getElementById(paneId+"-submit").className = className;
+                        document.getElementById(paneId+"-submit").innerHTML = this.getText(paneAction+"Button");
+                        document.getElementById(paneId+"-submit").setAttribute("data-args", "action:"+paneAction);
                         this.resizePane(paneId, paneAction, paneStatus);
                     }
                 }
@@ -385,49 +399,54 @@ yellow.edit = {
         var paneWidth = yellow.toolbox.getOuterWidth(elementBar);
         var paneHeight = yellow.toolbox.getWindowHeight() - paneTop - Math.min(yellow.toolbox.getOuterHeight(elementBar) + 10, (yellow.toolbox.getWindowWidth()-yellow.toolbox.getOuterWidth(elementBar))/2);
         switch (paneId) {
+            case "yellow-pane-account":
+                yellow.toolbox.setOuterLeft(document.getElementById(paneId), paneLeft);
+                yellow.toolbox.setOuterTop(document.getElementById(paneId), paneTop);
+                yellow.toolbox.setOuterWidth(document.getElementById(paneId), paneWidth);
+                var elementWidth = yellow.toolbox.getWidth(document.getElementById(paneId));
+                var actionsWidth = yellow.toolbox.getOuterWidth(document.getElementById(paneId+"-settings-actions"));
+                var fieldsWidth = yellow.toolbox.getOuterWidth(document.getElementById(paneId+"-settings-fields"));
+                var separatorWidth = Math.max(10, ((elementWidth-fieldsWidth)/2)-actionsWidth);
+                yellow.toolbox.setOuterWidth(document.getElementById(paneId+"-settings-separator"), separatorWidth);
+                break;
+            case "yellow-pane-create":
             case "yellow-pane-edit":
-                yellow.toolbox.setOuterLeft(document.getElementById("yellow-pane-edit"), paneLeft);
-                yellow.toolbox.setOuterTop(document.getElementById("yellow-pane-edit"), paneTop);
-                yellow.toolbox.setOuterHeight(document.getElementById("yellow-pane-edit"), paneHeight);
-                yellow.toolbox.setOuterWidth(document.getElementById("yellow-pane-edit"), paneWidth);
-                var elementWidth = yellow.toolbox.getWidth(document.getElementById("yellow-pane-edit"));
-                yellow.toolbox.setOuterWidth(document.getElementById("yellow-pane-edit-text"), elementWidth);
-                yellow.toolbox.setOuterWidth(document.getElementById("yellow-pane-edit-preview"), elementWidth);
+            case "yellow-pane-delete":
+                yellow.toolbox.setOuterLeft(document.getElementById(paneId), paneLeft);
+                yellow.toolbox.setOuterTop(document.getElementById(paneId), paneTop);
+                yellow.toolbox.setOuterHeight(document.getElementById(paneId), paneHeight);
+                yellow.toolbox.setOuterWidth(document.getElementById(paneId), paneWidth);
+                var elementWidth = yellow.toolbox.getWidth(document.getElementById(paneId));
+                yellow.toolbox.setOuterWidth(document.getElementById(paneId+"-text"), elementWidth);
+                yellow.toolbox.setOuterWidth(document.getElementById(paneId+"-preview"), elementWidth);
                 var buttonsWidth = 0;
-                var buttonsWidthMax = yellow.toolbox.getOuterWidth(document.getElementById("yellow-pane-edit-toolbar")) -
-                    yellow.toolbox.getOuterWidth(document.getElementById("yellow-pane-edit-toolbar-main")) - 1;
-                var element = document.getElementById("yellow-pane-edit-toolbar-buttons").firstChild;
+                var buttonsWidthMax = yellow.toolbox.getOuterWidth(document.getElementById(paneId+"-toolbar")) -
+                    yellow.toolbox.getOuterWidth(document.getElementById(paneId+"-toolbar-main")) - 1;
+                var element = document.getElementById(paneId+"-toolbar-buttons").firstChild;
                 for (; element; element=element.nextSibling) {
                     element.removeAttribute("style");
                     buttonsWidth += yellow.toolbox.getOuterWidth(element);
                     if (buttonsWidth>buttonsWidthMax) yellow.toolbox.setVisible(element, false);
                 }
-                yellow.toolbox.setOuterWidth(document.getElementById("yellow-pane-edit-toolbar-title"), buttonsWidthMax);
-                var height1 = yellow.toolbox.getHeight(document.getElementById("yellow-pane-edit"));
-                var height2 = yellow.toolbox.getOuterHeight(document.getElementById("yellow-pane-edit-toolbar"));
-                yellow.toolbox.setOuterHeight(document.getElementById("yellow-pane-edit-text"), height1 - height2);
-                yellow.toolbox.setOuterHeight(document.getElementById("yellow-pane-edit-preview"), height1 - height2);
-                var elementLink = document.getElementById("yellow-bar-"+paneAction);
+                yellow.toolbox.setOuterWidth(document.getElementById(paneId+"-toolbar-title"), buttonsWidthMax);
+                var height1 = yellow.toolbox.getHeight(document.getElementById(paneId));
+                var height2 = yellow.toolbox.getOuterHeight(document.getElementById(paneId+"-toolbar"));
+                yellow.toolbox.setOuterHeight(document.getElementById(paneId+"-text"), height1 - height2);
+                yellow.toolbox.setOuterHeight(document.getElementById(paneId+"-preview"), height1 - height2);
+                var elementLink = document.getElementById(paneId+"-bar");
                 var position = yellow.toolbox.getOuterLeft(elementLink) + yellow.toolbox.getOuterWidth(elementLink)/2;
-                position -= yellow.toolbox.getOuterLeft(document.getElementById("yellow-pane-edit")) + 1;
-                yellow.toolbox.setOuterLeft(document.getElementById("yellow-pane-edit-arrow"), position);
+                position -= yellow.toolbox.getOuterLeft(document.getElementById(paneId)) + 1;
+                yellow.toolbox.setOuterLeft(document.getElementById(paneId+"-arrow"), position);
                 break;
             case "yellow-pane-menu":
                 yellow.toolbox.setOuterLeft(document.getElementById("yellow-pane-menu"), paneLeft + paneWidth - yellow.toolbox.getOuterWidth(document.getElementById("yellow-pane-menu")));
                 yellow.toolbox.setOuterTop(document.getElementById("yellow-pane-menu"), paneTop);
-                var elementLink = document.getElementById("yellow-bar-menu");
+                var elementLink = document.getElementById("yellow-pane-menu-bar");
                 var position = yellow.toolbox.getOuterLeft(elementLink) + yellow.toolbox.getOuterWidth(elementLink)/2;
                 position -= yellow.toolbox.getOuterLeft(document.getElementById("yellow-pane-menu"));
                 yellow.toolbox.setOuterLeft(document.getElementById("yellow-pane-menu-arrow"), position);
                 break;
-            case "yellow-pane-login":
-            case "yellow-pane-signup":
-            case "yellow-pane-forgot":
-            case "yellow-pane-recover":
-            case "yellow-pane-quit":
-            case "yellow-pane-account":
-            case "yellow-pane-about":
-            case "yellow-pane-information":
+            default:
                 yellow.toolbox.setOuterLeft(document.getElementById(paneId), paneLeft);
                 yellow.toolbox.setOuterTop(document.getElementById(paneId), paneTop);
                 yellow.toolbox.setOuterWidth(document.getElementById(paneId), paneWidth);
@@ -439,6 +458,7 @@ yellow.edit = {
     showPane: function(paneId, paneAction, paneStatus, paneModal) {
         if (this.paneId!=paneId || this.paneAction!=paneAction) {
             this.hidePane(this.paneId);
+            var paneInit = !document.getElementById(paneId);
             if (!document.getElementById(paneId)) this.createPane(paneId, paneAction, paneStatus);
             var element = document.getElementById(paneId);
             if (!yellow.toolbox.isVisible(element)) {
@@ -451,9 +471,9 @@ yellow.edit = {
                 this.paneId = paneId;
                 this.paneAction = paneAction;
                 this.paneStatus = paneStatus;
-                this.updatePane(paneId, paneAction, paneStatus, this.paneActionOld!=this.paneAction);
+                this.updatePane(paneId, paneAction, paneStatus, paneInit);
                 this.resizePane(paneId, paneAction, paneStatus);
-                this.updateBar(paneAction, "yellow-bar-selected");
+                this.updateBar(paneId, "yellow-bar-selected");
             }
         } else {
             this.hidePane(this.paneId, true);
@@ -469,34 +489,12 @@ yellow.edit = {
             yellow.toolbox.removeValue("meta[name=viewport]", "content", ", maximum-scale=1, user-scalable=0");
             yellow.toolbox.setVisible(element, false, fadeout);
             this.paneId = 0;
-            this.paneActionOld = this.paneAction;
             this.paneAction = 0;
             this.paneStatus = 0;
             this.updateBar(0, "yellow-bar-selected");
         }
         this.hidePopup(this.popupId);
     },
-
-    // Send pane
-    sendPane: function(paneId, paneAction, paneArgs) {
-        if (yellow.system.debug) console.log("yellow.edit.sendPane id:"+paneId);
-        var args = { "action":paneAction, "csrftoken":this.getCookie("csrftoken") };
-        if (paneId=="yellow-pane-edit") {
-            args.action = this.getAction(paneId, paneAction);
-            args.rawdatasource = yellow.page.rawDataSource;
-            args.rawdataedit = document.getElementById("yellow-pane-edit-text").value;
-            args.rawdataendofline = yellow.page.rawDataEndOfLine;
-        }
-        if (paneArgs) {
-            var tokens = paneArgs.split("/");
-            for (var i=0; i<tokens.length; i++) {
-                var pair = tokens[i].split(/[:=]/);
-                if (!pair[0] || !pair[1]) continue;
-                args[pair[0]] = pair[1];
-            }
-        }
-        yellow.toolbox.submitForm(args);
-    },
     
     // Process action
     processAction: function(action, status, args) {
@@ -507,8 +505,7 @@ yellow.edit = {
             if (yellow.system.debug) console.log("yellow.edit.processAction action:"+action+" status:"+status);
             var paneId = (status!="next" && status!="done") ? "yellow-pane-"+action : "yellow-pane-information";
             switch(action) {
-                case "login":       this.showPane("yellow-pane-login", action); break;
-                case "logout":      this.sendPane("yellow-pane-logout", action); break;
+                case "login":       this.showPane(paneId, action, status); break;
                 case "signup":      this.showPane(paneId, action, status); break;
                 case "confirm":     this.showPane(paneId, action, status); break;
                 case "approve":     this.showPane(paneId, action, status); break;
@@ -520,39 +517,16 @@ yellow.edit = {
                 case "quit":        this.showPane(paneId, action, status); break;
                 case "remove":      this.showPane(paneId, action, status); break;
                 case "account":     this.showPane(paneId, action, status); break;
-                case "about":       this.showPane("yellow-pane-about", action, status); break;
-                case "update":      this.sendPane("yellow-pane-update", action, args); break;
-                case "create":      this.showPane("yellow-pane-edit", action, status, true); break;
-                case "edit":        this.showPane("yellow-pane-edit", action, status, true); break;
-                case "delete":      this.showPane("yellow-pane-edit", action, status, true); break;
-                case "menu":        this.showPane("yellow-pane-menu", action, status); break;
-                case "send":        this.sendPane(this.paneId, this.paneAction); break;
+                case "update":      this.showPane(paneId, action, status); break;
+                case "create":      this.showPane(paneId, action, status, true); break;
+                case "edit":        this.showPane(paneId, action, status, true); break;
+                case "delete":      this.showPane(paneId, action, status, true); break;
+                case "menu":        this.showPane(paneId, action, status); break;
                 case "close":       this.hidePane(this.paneId); break;
-                case "help":        this.processHelp(); break;
                 case "toolbar":     this.processToolbar(status, args); break;
-            }
-        }
-    },
-    
-    // Process help
-    processHelp: function() {
-        this.hidePane(this.paneId);
-        window.open(this.getText("HelpUrl", "yellow"), "_self");
-    },
-    
-    // Process shortcut
-    processShortcut: function(e) {
-        var shortcut = yellow.toolbox.getEventShortcut(e);
-        if (shortcut) {
-            if (yellow.system.debug) console.log("yellow.edit.processShortcut shortcut:"+shortcut);
-            var tokens = yellow.system.editKeyboardShortcuts.split(/\s*,\s*/);
-            for (var i=0; i<tokens.length; i++) {
-                var pair = tokens[i].split(" ");
-                if (shortcut==pair[0] || shortcut.replace("meta+", "ctrl+")==pair[0]) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    this.processToolbar(pair[1]);
-                }
+                case "settings":    this.processSettings(args); break;
+                case "submit":      this.processSubmit(args); break;
+                case "help":        this.processHelp(); break;
             }
         }
     },
@@ -560,9 +534,9 @@ yellow.edit = {
     // Process toolbar
     processToolbar: function(status, args) {
         if (yellow.system.debug) console.log("yellow.edit.processToolbar status:"+status);
-        var elementText = document.getElementById("yellow-pane-edit-text");
-        var elementPreview = document.getElementById("yellow-pane-edit-preview");
-        if (!yellow.system.userRestriction && this.paneAction!="delete" && !yellow.toolbox.isVisible(elementPreview)) {
+        var elementText = document.getElementById(this.paneId+"-text");
+        var elementPreview = document.getElementById(this.paneId+"-preview");
+        if (!yellow.toolbox.isVisible(elementPreview) && !elementText.readOnly) {
             switch (status) {
                 case "h1":              yellow.editor.setMarkdown(elementText, "# ", "insert-multiline-block", true); break;
                 case "h2":              yellow.editor.setMarkdown(elementText, "## ", "insert-multiline-block", true); break;
@@ -586,8 +560,8 @@ yellow.edit = {
                 case "redo":            yellow.editor.redo(); break;
             }
         }
-        if (status=="preview") this.showPreview(elementText, elementPreview);
-        if (status=="save" && !yellow.system.userRestriction && this.paneAction!="delete") this.processAction("send");
+        if (status=="preview" && !elementText.readOnly) this.showPreview(elementText, elementPreview);
+        if (status=="save" && !elementText.readOnly && this.paneAction!="delete") this.processSubmit("action:"+this.paneAction);
         if (status=="help") window.open(this.getText("HelpUrl", "yellow"), "_blank");
         if (status=="markdown") window.open(this.getText("MarkdownUrl", "yellow"), "_blank");
         if (this.isExpandable(status)) {
@@ -599,9 +573,8 @@ yellow.edit = {
     
     // Update toolbar
     updateToolbar: function(status, name) {
-        if (yellow.system.debug) console.log("yellow.edit.updateToolbar status:"+status);
         if (status) {
-            var element = document.getElementById("yellow-toolbar-"+status);
+            var element = document.getElementById(this.paneId+"-toolbar-"+status);
             if (element) {
                 if (name.indexOf("selected")!=-1) element.setAttribute("aria-expanded", "true");
                 yellow.toolbox.addClass(element, name);
@@ -615,6 +588,52 @@ yellow.edit = {
         }
     },
     
+    // Process shortcut
+    processShortcut: function(e) {
+        var shortcut = yellow.toolbox.getEventShortcut(e);
+        if (shortcut) {
+            var tokens = yellow.system.editKeyboardShortcuts.split(/\s*,\s*/);
+            for (var i=0; i<tokens.length; i++) {
+                var pair = tokens[i].split(" ");
+                if (shortcut==pair[0] || shortcut.replace("meta+", "ctrl+")==pair[0]) {
+                    if (yellow.system.debug) console.log("yellow.edit.processShortcut shortcut:"+shortcut);
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.processToolbar(pair[1]);
+                }
+            }
+        }
+    },
+    
+    // Process settings
+    processSettings: function(args) {
+        var action = args!="none" ? args : "account";
+        if (action!=this.paneAction && action!="settings") this.processAction(action);
+    },
+    
+    // Process submit
+    processSubmit: function(args) {
+        var settings = { "action":"none", "csrftoken":this.getCookie("csrftoken") };
+        var tokens = args.split("/");
+        for (var i=0; i<tokens.length; i++) {
+            var pair = tokens[i].split(/[:=]/);
+            if (!pair[0] || !pair[1]) continue;
+            settings[pair[0]] = pair[1];
+        }
+        if (settings["action"]=="create" || settings["action"]=="edit" || settings["action"]=="delete") {
+            settings.rawdatasource = yellow.page.rawDataSource;
+            settings.rawdataedit = document.getElementById(this.paneId+"-text").value;
+            settings.rawdataendofline = yellow.page.rawDataEndOfLine;
+        }
+        if (settings["action"]!="none") yellow.toolbox.submitForm(settings);
+    },
+    
+    // Process help
+    processHelp: function() {
+        this.hidePane(this.paneId);
+        window.open(this.getText("HelpUrl", "yellow"), "_self");
+    },
+    
     // Create popup
     createPopup: function(popupId) {
         if (yellow.system.debug) console.log("yellow.edit.createPopup id:"+popupId);
@@ -691,7 +710,7 @@ yellow.edit = {
             yellow.toolbox.setVisible(element, true);
             this.popupId = popupId;
             this.updateToolbar(status, "yellow-toolbar-selected");
-            var elementParent = document.getElementById("yellow-toolbar-"+status);
+            var elementParent = document.getElementById(this.paneId+"-toolbar-"+status);
             var popupLeft = yellow.toolbox.getOuterLeft(elementParent);
             var popupTop = yellow.toolbox.getOuterTop(elementParent) + yellow.toolbox.getOuterHeight(elementParent) - 1;
             yellow.toolbox.setOuterLeft(document.getElementById(popupId), popupLeft);
@@ -809,18 +828,60 @@ yellow.edit = {
         }
     },
     
-    // Return action
-    getAction: function(paneId, paneAction) {
-        var action = "";
-        if (paneId=="yellow-pane-edit") {
-            switch (paneAction) {
-                case "create":  action = "create"; break;
-                case "edit":    action = document.getElementById("yellow-pane-edit-text").value.length!=0 ? "edit" : "delete"; break;
-                case "delete":  action = "delete"; break;
+    // Return pane action
+    getPaneAction: function(paneId) {
+        var panePrefix = "yellow-pane-";
+        var paneAction = paneId.substring(panePrefix.length);
+        if (paneAction=="edit") {
+            if (document.getElementById("yellow-pane-edit-text").value.length==0) paneAction = "delete";
+            if (yellow.page.statusCode==434) paneAction = "create";
+        }
+        return paneAction;
+    },
+    
+    // Return raw data for actions
+    getRawDataActions: function(paneAction) {
+        var rawDataActions = "";
+        if (yellow.system.editSettingsActions && yellow.system.editSettingsActions!="none") {
+            var tokens = yellow.system.editSettingsActions.split(/\s*,\s*/);
+            for (var i=0; i<tokens.length; i++) {
+                var token = tokens[i];
+                rawDataActions += "<a href=\"#\""+(token==paneAction ? "class=\"active\"": "")+" data-action=\"settings\" data-args=\""+yellow.toolbox.encodeHtml(token)+"\">"+this.getText(token+"Title")+"</a><br />";
+            }
+        }
+        return rawDataActions;
+    },
+    
+    // Return raw data for languages
+    getRawDataLanguages: function(paneId) {
+        var rawDataLanguages = "";
+        if (yellow.system.serverLanguages && Object.keys(yellow.system.serverLanguages).length>1) {
+            for (var language in yellow.system.serverLanguages) {
+                var checked = language==this.getRequest("language") ? " checked=\"checked\"" : "";
+                rawDataLanguages += "<label for=\""+paneId+"-"+language+"\"><input type=\"radio\" name=\"language\" id=\""+paneId+"-"+language+"\" value=\""+language+"\""+checked+"> "+yellow.toolbox.encodeHtml(yellow.system.serverLanguages[language])+"</label><br />";
+            }
+        }
+        return rawDataLanguages
+    },
+    
+    // Return raw data for buttons
+    getRawDataButtons: function(paneId) {
+        var rawDataButtons = "";
+        if (yellow.system.editToolbarButtons && yellow.system.editToolbarButtons!="none") {
+            var tokens = yellow.system.editToolbarButtons.split(/\s*,\s*/);
+            for (var i=0; i<tokens.length; i++) {
+                var token = tokens[i];
+                if (token!="separator") {
+                    var shortcut = this.getShortcut(token);
+                    var rawDataShortcut = shortcut ? "&nbsp;&nbsp;"+yellow.toolbox.encodeHtml(shortcut) : "";
+                    var rawDataExpandable = this.isExpandable(token) ? " aria-expanded=\"false\"" : "";
+                    rawDataButtons += "<li><a href=\"#\" id=\""+paneId+"-toolbar-"+yellow.toolbox.encodeHtml(token)+"\" class=\"yellow-toolbar-btn-icon yellow-toolbar-tooltip\" data-action=\"toolbar\" data-status=\""+yellow.toolbox.encodeHtml(token)+"\" aria-label=\""+this.getText("Toolbar", "", token)+rawDataShortcut+"\""+rawDataExpandable+"><i class=\"yellow-icon yellow-icon-"+yellow.toolbox.encodeHtml(token)+"\"></i></a></li>";
+                } else {
+                    rawDataButtons += "<li><a href=\"#\" class=\"yellow-toolbar-btn-separator\"></a></li>";
+                }
             }
-            if (yellow.page.statusCode==434 && paneAction!="delete") action = "create";
         }
-        return action;
+        return rawDataButtons;
     },
     
     // Return request string

system/extensions/edit.php

@@ -4,7 +4,7 @@
 // This file may be used and distributed under the terms of the public license.
 
 class YellowEdit {
-    const VERSION = "0.8.7";
+    const VERSION = "0.8.8";
     const TYPE = "feature";
     public $yellow;         //access to API
     public $response;       //web response
@@ -29,8 +29,8 @@ class YellowEdit {
         $this->yellow->system->setDefault("editUserHashAlgorithm", "bcrypt");
         $this->yellow->system->setDefault("editUserHashCost", "10");
         $this->yellow->system->setDefault("editUserHome", "/");
-        $this->yellow->system->setDefault("editLoginRestriction", "0");
         $this->yellow->system->setDefault("editLoginSessionTimeout", "2592000");
+        $this->yellow->system->setDefault("editLoginRestriction", "0");
         $this->yellow->system->setDefault("editBruteForceProtection", "25");
         $this->users->load($this->yellow->system->get("settingDir").$this->yellow->system->get("editUserFile"));
     }
@@ -49,22 +49,6 @@ class YellowEdit {
         return $statusCode;
     }
     
-    // Handle page meta data
-    public function onParseMeta($page) {
-        if ($page==$this->yellow->page && $this->response->isActive()) {
-            if ($this->response->isUser()) {
-                if (empty($this->response->rawDataSource)) $this->response->rawDataSource = $page->rawData;
-                if (empty($this->response->rawDataEdit)) $this->response->rawDataEdit = $page->rawData;
-                if (empty($this->response->rawDataEndOfLine)) $this->response->rawDataEndOfLine = $this->response->getEndOfLine($page->rawData);
-                if ($page->statusCode==434) $this->response->rawDataEdit = $this->response->getRawDataNew($page, true);
-            }
-            if (empty($this->response->language)) $this->response->language = $page->get("language");
-            if (empty($this->response->action)) $this->response->action = $this->response->isUser() ? "none" : "login";
-            if (empty($this->response->status)) $this->response->status = "none";
-            if ($this->response->status=="error") $this->response->action = "error";
-        }
-    }
-    
     // Handle page content of shortcut
     public function onParseContentShortcut($page, $name, $text, $type) {
         $output = null;
@@ -80,6 +64,7 @@ class YellowEdit {
     public function onParsePageExtra($page, $name) {
         $output = null;
         if ($name=="header" && $this->response->isActive()) {
+            $this->response->processPageData($page);
             $extensionLocation = $this->yellow->system->get("serverBase").$this->yellow->system->get("extensionLocation");
             $output = "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" data-bundle=\"none\" href=\"{$extensionLocation}edit.css\" />\n";
             $output .= "<script type=\"text/javascript\" data-bundle=\"none\" src=\"{$extensionLocation}edit.js\"></script>\n";
@@ -242,7 +227,6 @@ class YellowEdit {
                 case "logout":      $statusCode = $this->processRequestLogout($scheme, $address, $base, $location, $fileName); break;
                 case "quit":        $statusCode = $this->processRequestQuit($scheme, $address, $base, $location, $fileName); break;
                 case "account":     $statusCode = $this->processRequestAccount($scheme, $address, $base, $location, $fileName); break;
-                case "about":       $statusCode = $this->processRequestAbout($scheme, $address, $base, $location, $fileName); break;
                 case "update":      $statusCode = $this->processRequestUpdate($scheme, $address, $base, $location, $fileName); break;
                 case "create":      $statusCode = $this->processRequestCreate($scheme, $address, $base, $location, $fileName); break;
                 case "edit":        $statusCode = $this->processRequestEdit($scheme, $address, $base, $location, $fileName); break;
@@ -589,57 +573,28 @@ class YellowEdit {
         }
         return $statusCode;
     }
-    
-    // Process request to show website version and updates
-    public function processRequestAbout($scheme, $address, $base, $location, $fileName) {
-        $this->response->action = "about";
+
+    // Process request to update website
+    public function processRequestUpdate($scheme, $address, $base, $location, $fileName) {
+        $this->response->action = "update";
         $this->response->status = "ok";
-        if ($this->yellow->extensions->isExisting("update")) {
-            list($statusCodeCurrent, $dataCurrent) = $this->yellow->extensions->get("update")->getExtensionsVersion();
-            list($statusCodeLatest, $dataLatest) = $this->yellow->extensions->get("update")->getExtensionsVersion(true);
-            list($statusCodeModified, $dataModified) = $this->yellow->extensions->get("update")->getExtensionsModified();
-            $statusCode = max($statusCodeCurrent, $statusCodeLatest, $statusCodeModified);
-            if ($this->response->isUserWebmaster()) {
-                foreach ($dataCurrent as $key=>$value) {
-                    if (strnatcasecmp($dataCurrent[$key], $dataLatest[$key])<0) {
-                        ++$updates;
-                        $rawData = htmlspecialchars(ucfirst($key)." $dataLatest[$key]")."<br />\n";
-                        $this->response->rawDataOutput .= $rawData;
-                    }
-                }
-                if ($updates==0) {
-                    foreach ($dataCurrent as $key=>$value) {
-                        if (!is_null($dataModified[$key]) && !is_null($dataLatest[$key])) {
-                            $rawData = $this->yellow->text->getTextHtml("editAboutUpdateModified", $this->response->language)." - <a href=\"#\" data-action=\"update\" data-status=\"update\" data-args=\"".$this->yellow->toolbox->normaliseArgs("extension:$key/option:force")."\">".$this->yellow->text->getTextHtml("editAboutUpdateForce", $this->response->language)."</a><br />\n";
-                            $rawData = preg_replace("/@extension/i", htmlspecialchars(ucfirst($key)." $dataLatest[$key]"), $rawData);
-                            $this->response->rawDataOutput .= $rawData;
-                        }
-                    }
-                }
-                $this->response->status = $updates ? "updates" : "done";
-            } else {
-                foreach ($dataCurrent as $key=>$value) {
-                    if (strnatcasecmp($dataCurrent[$key], $dataLatest[$key])<0) ++$updates;
-                }
-                $this->response->status = $updates ? "warning" : "done";
+        $extension = trim($_REQUEST["extension"]);
+        $option = trim($_REQUEST["option"]);
+        if ($option=="check") {
+            list($statusCode, $updates, $rawData) = $this->response->getUpdateInformation();
+            if ($updates) {
+                $this->response->status = $this->response->isUserWebmaster() ? "updates" : "warning";
+                $this->response->rawDataOutput = $this->response->isUserWebmaster() ? $rawData : "";
             }
             if ($statusCode!=200) $this->response->status = "error";
+        } elseif ($this->response->isUserWebmaster()) {
+            $this->response->status = $this->yellow->command("update", $extension, $option)==200 ? "done" : "error";
         }
-        $statusCode = $this->yellow->processRequest($scheme, $address, $base, $location, $fileName, false);
-        return $statusCode;
-    }
-    
-    // Process request to update website
-    public function processRequestUpdate($scheme, $address, $base, $location, $fileName) {
-        $statusCode = 0;
-        if ($this->yellow->extensions->isExisting("update") && $this->response->isUserWebmaster()) {
-            $extension = trim($_REQUEST["extension"]);
-            $option = trim($_REQUEST["option"]);
-            $statusCode = $this->yellow->command("update", $extension, $option);
-            if ($statusCode==200) {
-                $location = $this->yellow->lookup->normaliseUrl($scheme, $address, $base, $location);
-                $statusCode = $this->yellow->sendStatus(303, $location);
-            }
+        if ($this->response->status=="done") {
+            $location = $this->yellow->lookup->normaliseUrl($scheme, $address, $base, $location);
+            $statusCode = $this->yellow->sendStatus(303, $location);
+        } else {
+            $statusCode = $this->yellow->processRequest($scheme, $address, $base, $location, $fileName, false);
         }
         return $statusCode;
     }
@@ -949,6 +904,7 @@ class YellowEditResponse {
     public $rawDataSource;      //raw data of page for comparison
     public $rawDataEdit;        //raw data of page for editing
     public $rawDataOutput;      //raw data of dynamic output
+    public $rawDataReadonly;    //raw data is read only? (boolean)
     public $rawDataEndOfLine;   //end of line format for raw data
     public $language;           //response language
     public $action;             //response action
@@ -959,6 +915,24 @@ class YellowEditResponse {
         $this->extension = $yellow->extensions->get("edit");
     }
     
+    // Process page data
+    public function processPageData($page) {
+        if ($this->isUser()) {
+            if (empty($this->rawDataSource)) $this->rawDataSource = $page->rawData;
+            if (empty($this->rawDataEdit)) $this->rawDataEdit = $page->rawData;
+            if (empty($this->rawDataEndOfLine)) $this->rawDataEndOfLine = $this->getEndOfLine($page->rawData);
+            if ($page->statusCode==434) $this->rawDataEdit = $this->getRawDataNew($page, true);
+            if ($this->yellow->toolbox->isLocationArgs()) {
+                $this->rawDataEdit = $this->getRawDataGenerated($page);
+                $this->rawDataReadonly = true;
+            }
+        }
+        if (empty($this->language)) $this->language = $page->get("language");
+        if (empty($this->action)) $this->action = $this->isUser() ? "none" : "login";
+        if (empty($this->status)) $this->status = "none";
+        if ($this->status=="error") $this->action = "error";
+    }
+    
     // Return new page
     public function getPageNew($scheme, $address, $base, $location, $fileName, $rawData, $endOfLine) {
         $page = new YellowPage($this->yellow);
@@ -1070,6 +1044,7 @@ class YellowEditResponse {
             $data["rawDataEdit"] = $this->rawDataEdit;
             $data["rawDataNew"] = $this->getRawDataNew($page);
             $data["rawDataOutput"] = strval($this->rawDataOutput);
+            $data["rawDataReadonly"] = intval($this->rawDataReadonly);
             $data["rawDataEndOfLine"] = $this->rawDataEndOfLine;
             $data["scheme"] = $this->yellow->page->scheme;
             $data["address"] = $this->yellow->page->address;
@@ -1108,6 +1083,7 @@ class YellowEditResponse {
             foreach ($this->yellow->text->getLanguages() as $language) {
                 $data["serverLanguages"][$language] = $this->yellow->text->getTextHtml("languageDescription", $language);
             }
+            $data["editSettingsActions"] = "none";
             $data["editUploadExtensions"] = $this->yellow->system->get("editUploadExtensions");
             $data["editKeyboardShortcuts"] = $this->yellow->system->get("editKeyboardShortcuts");
             $data["editToolbarButtons"] = $this->getToolbarButtons("edit");
@@ -1168,6 +1144,46 @@ class YellowEditResponse {
         return $endOfLine;
     }
     
+    // Return update information
+    public function getUpdateInformation() {
+        if ($this->yellow->extensions->isExisting("update")) {
+            list($statusCodeCurrent, $dataCurrent) = $this->yellow->extensions->get("update")->getExtensionsVersion();
+            list($statusCodeLatest, $dataLatest) = $this->yellow->extensions->get("update")->getExtensionsVersion(true);
+            list($statusCodeModified, $dataModified) = $this->yellow->extensions->get("update")->getExtensionsModified();
+            $statusCode = max($statusCodeCurrent, $statusCodeLatest, $statusCodeModified);
+            if ($this->isUserWebmaster()) {
+                foreach ($dataCurrent as $key=>$value) {
+                    if (strnatcasecmp($dataCurrent[$key], $dataLatest[$key])<0) {
+                        $rawData .= htmlspecialchars(ucfirst($key)." $dataLatest[$key]")."<br />\n";
+                        ++$updates;
+                    }
+                }
+                if ($updates==0) {
+                    foreach ($dataCurrent as $key=>$value) {
+                        if (!is_null($dataModified[$key]) && !is_null($dataLatest[$key])) {
+                            $output = $this->yellow->text->getTextHtml("editAboutUpdateModified", $this->language)." - <a href=\"#\" data-action=\"submit\" data-args=\"".$this->yellow->toolbox->normaliseArgs("action:update/extension:$key/option:force")."\">".$this->yellow->text->getTextHtml("editAboutUpdateForce", $this->language)."</a><br />\n";
+                            $rawData .= preg_replace("/@extension/i", htmlspecialchars(ucfirst($key)." $dataLatest[$key]"), $output);
+                        }
+                    }
+                }
+            } else {
+                foreach ($dataCurrent as $key=>$value) {
+                    if (strnatcasecmp($dataCurrent[$key], $dataLatest[$key])<0) ++$updates;
+                }
+            }
+        } else {
+            $statusCode = 200;
+        }
+        return array($statusCode, $updates, $rawData);
+    }
+
+    // Return raw data for generated page
+    public function getRawDataGenerated($page) {
+        $title = $page->get("title");
+        $text = $this->yellow->text->getText("editDataGenerated", $page->get("language"));
+        return "---\nTitle: $title\n---\n$text";
+    }
+    
     // Return raw data for new page
     public function getRawDataNew($page, $customTitle = false) {
         foreach ($this->yellow->content->path($page->location)->reverse() as $ancestor) {

system/settings/system.ini

@@ -62,8 +62,8 @@ EditUserPasswordMinLength: 8
 EditUserHashAlgorithm: bcrypt
 EditUserHashCost: 10
 EditUserHome: /
-EditLoginRestriction: 0
 EditLoginSessionTimeout: 2592000
+EditLoginRestriction: 0
 EditBruteForceProtection: 25
 ImageAlt: Image
 ImageUploadWidthMax: 1280