Updated editor, keyboard shortcuts for Steffen

system/config/config.ini

@@ -55,6 +55,7 @@ MultiLanguageMode: 0
 InstallationMode: 1
 StartupUpdate: none
 EditLocation: /edit/
+EditKeyboardShortcuts: ctrl+b bold, ctrl+i italic, ctrl+e code, ctrl+k link, ctrl+s save
 EditToolbarButtons: auto
 EditEndOfLine: auto
 EditUserFile: user.ini

system/plugins/edit.css

@@ -92,6 +92,7 @@
 }
 .yellow-toolbar .yellow-toolbar-btn-delete:hover { background-color:#d44; border-color:#d44; }
 .yellow-toolbar .yellow-toolbar-btn-separator { visibility:hidden; padding:6px; }
+.yellow-toolbar .yellow-toolbar-checked { background-color:#666; border-color:#666; color:#fff; }
 .yellow-toolbar-tooltip { position:relative; }
 .yellow-toolbar-tooltip::after, .yellow-toolbar-tooltip::before {
 	position:absolute; z-index:300; display:none;

system/plugins/edit.js

@@ -88,6 +88,7 @@ yellow.edit =
 	// Handle keyboard
 	keydown: function(e)
 	{
+		if(this.paneId=="yellow-pane-edit") this.processShortcut(e);
 		if(this.paneId && e.keyCode==27) this.hidePane(this.paneId);
 	},
 	
@@ -358,6 +359,7 @@ yellow.edit =
 					if(yellow.config.editToolbarButtons!="none")
 					{
 						yellow.toolbox.setVisible(document.getElementById("yellow-pane-edit-toolbar-title"), false);
+						this.updateToolbar(0, "yellow-toolbar-checked");
 					}
 					if(yellow.config.userRestrictions)
 					{
@@ -521,6 +523,26 @@ yellow.edit =
 		window.open(this.getText("HelpUrl", "yellow"), "_self");
 	},
 	
+	// Process shortcut
+	processShortcut: function(e)
+	{
+		var shortcut = yellow.toolbox.getEventShortcut(e)
+		if(shortcut)
+		{
+			var tokens = yellow.config.editKeyboardShortcuts.split(",");
+			for(var i=0; i<tokens.length; i++)
+			{
+				var pair = tokens[i].trim().split(" ");
+				if(shortcut==pair[0] || shortcut.replace("meta+", "ctrl+")==pair[0])
+				{
+					e.stopPropagation();
+					e.preventDefault();
+					this.processToolbar(pair[1]);
+				}
+			}
+		}
+	},
+	
 	// Process toolbar
 	processToolbar: function(status, args)
 	{
@@ -553,7 +575,8 @@ yellow.edit =
 				case "redo":		yellow.editor.redo(); break;
 			}
 		}
-		if(status=="preview") yellow.editor.showPreview(elementText, elementPreview);
+		if(status=="preview") this.showPreview(elementText, elementPreview);
+		if(status=="save" && !yellow.config.userRestrictions && this.paneAction!="delete") this.action("send");
 		if(status=="help") window.open(this.getText("HelpUrl", "yellow"), "_blank");
 		if(status=="markdown") window.open(this.getText("MarkdownUrl", "yellow"), "_blank");
 		if(status=="format" || status=="heading" || status=="list" || status=="emojiawesome" || status=="fontawesome")
@@ -565,16 +588,17 @@ yellow.edit =
 	},
 	
 	// Update toolbar
-	updateToolbar: function(status)
+	updateToolbar: function(status, name)
 	{
 		if(status)
 		{
-			yellow.toolbox.addClass(document.getElementById("yellow-toolbar-"+status), "yellow-toolbar-selected");
+			var element = document.getElementById("yellow-toolbar-"+status);
+			if(element) yellow.toolbox.addClass(element, name);
 		} else {
-			var elements = document.getElementsByClassName("yellow-toolbar-selected");
+			var elements = document.getElementsByClassName(name);
 			for(var i=0, l=elements.length; i<l; i++)
 			{
-				yellow.toolbox.removeClass(elements[i], "yellow-toolbar-selected");
+				yellow.toolbox.removeClass(elements[i], name);
 			}
 		}
 	},
@@ -661,7 +685,7 @@ yellow.edit =
 			if(yellow.config.debug) console.log("yellow.edit.showPopup id:"+popupId);
 			yellow.toolbox.setVisible(element, true);
 			this.popupId = popupId;
-			this.updateToolbar(status);
+			this.updateToolbar(status, "yellow-toolbar-selected");
 			var elementParent = document.getElementById("yellow-toolbar-"+status);
 			var popupLeft = yellow.toolbox.getOuterLeft(elementParent);
 			var popupTop = yellow.toolbox.getOuterTop(elementParent) + yellow.toolbox.getOuterHeight(elementParent) - 1;
@@ -680,7 +704,43 @@ yellow.edit =
 		{
 			yellow.toolbox.setVisible(element, false, fadeout);
 			this.popupId = 0;
-			this.updateToolbar(0);
+			this.updateToolbar(0, "yellow-toolbar-selected");
+		}
+	},
+	
+	// Show or hide preview
+	showPreview: function(elementText, elementPreview)
+	{
+		if(!yellow.toolbox.isVisible(elementPreview))
+		{
+			var thisObject = this;
+			var formData = new FormData();
+			formData.append("action", "preview");
+			formData.append("rawdataedit", elementText.value);
+			formData.append("rawdataendofline", yellow.page.rawDataEndOfLine);
+			var request = new XMLHttpRequest();
+			request.open("POST", window.location.pathname, true);
+			request.onload = function() { if(this.status==200) thisObject.updatePreview.call(thisObject, elementText, elementPreview, this.responseText); };
+			request.send(formData);
+		} else {
+			this.updatePreview(elementText, elementPreview, "");
+		}
+	},
+	
+	// Update preview
+	updatePreview: function(elementText, elementPreview, string)
+	{
+		var showPreview = string.length!=0;
+		yellow.toolbox.setVisible(elementText, !showPreview);
+		yellow.toolbox.setVisible(elementPreview, showPreview);
+		if(showPreview)
+		{
+			this.updateToolbar("preview", "yellow-toolbar-checked");
+			elementPreview.innerHTML = string;
+			dispatchEvent(new Event("load"));
+		} else {
+			this.updateToolbar(0, "yellow-toolbar-checked");
+			elementText.focus();
 		}
 	},
 	
@@ -986,34 +1046,6 @@ yellow.editor =
 		return { "text":text, "value":value, "start":start, "end":end, "top":top, "bottom":bottom, "found":found };
 	},
 	
-	// Show or hide preview
-	showPreview: function(elementText, elementPreview)
-	{
-		if(!yellow.toolbox.isVisible(elementPreview))
-		{
-			var formData = new FormData();
-			formData.append("action", "preview");
-			formData.append("rawdataedit", elementText.value);
-			formData.append("rawdataendofline", yellow.page.rawDataEndOfLine);
-			var request = new XMLHttpRequest();
-			request.open("POST", window.location.pathname, true);
-			request.onload = function() { if(this.status==200) yellow.editor.updatePreview(elementText, elementPreview, this.responseText); };
-			request.send(formData);
-		} else {
-			yellow.toolbox.setVisible(elementText, true);
-			yellow.toolbox.setVisible(elementPreview, false);
-			elementText.focus();
-		}
-	},
-	
-	// Update preview
-	updatePreview: function(elementText, elementPreview, responseText)
-	{
-		yellow.toolbox.setVisible(elementText, false);
-		yellow.toolbox.setVisible(elementPreview, true);
-		elementPreview.innerHTML = responseText;
-	},
-	
 	// Undo changes
 	undo: function()
 	{
@@ -1079,6 +1111,18 @@ yellow.toolbox =
 		element.removeEventListener(type, handler, false);
 	},
 	
+	// Return shortcut from keyboard event, alphanumeric only
+	getEventShortcut: function(e)
+	{
+		var shortcut = "";
+		if(e.keyCode>=48 && e.keyCode<=90)
+		{
+			shortcut += (e.ctrlKey ? "ctrl+" : "")+(e.metaKey ? "meta+" : "")+(e.altKey ? "alt+" : "")+(e.shiftKey ? "shift+" : "");
+			shortcut += String.fromCharCode(e.keyCode).toLowerCase();
+		}
+		return shortcut;
+	},
+	
 	// Return element width in pixel
 	getWidth: function(element)
 	{

system/plugins/edit.php

@@ -5,7 +5,7 @@
 
 class YellowEdit
 {
-	const VERSION = "0.7.10";
+	const VERSION = "0.7.11";
 	var $yellow;			//access to API
 	var $response;			//web response
 	var $users;				//user accounts
@@ -19,6 +19,7 @@ class YellowEdit
 		$this->users = new YellowUsers($yellow);
 		$this->merge = new YellowMerge($yellow);
 		$this->yellow->config->setDefault("editLocation", "/edit/");
+		$this->yellow->config->setDefault("editKeyboardShortcuts", "ctrl+b bold, ctrl+i italic, ctrl+e code, ctrl+k link, ctrl+s save");
 		$this->yellow->config->setDefault("editToolbarButtons", "auto");
 		$this->yellow->config->setDefault("editEndOfLine", "auto");
 		$this->yellow->config->setDefault("editUserFile", "user.ini");
@@ -1017,6 +1018,7 @@ class YellowResponse
 			{
 				$data["serverLanguages"][$language] = $this->yellow->text->getTextHtml("languageDescription", $language);
 			}
+			$data["editKeyboardShortcuts"] = $this->yellow->config->get("editKeyboardShortcuts");
 			$data["editToolbarButtons"] = $this->getToolbarButtons("edit");
 			$data["emojiawesomeToolbarButtons"] =  $this->getToolbarButtons("emojiawesome");
 			$data["fontawesomeToolbarButtons"] =  $this->getToolbarButtons("fontawesome");