commit cf6790fd80874ec005055fa18e9f3259bf82dba0
parent ef97347fe2241465ddad2fabbd8e0cbd72da4cce
Author: markseu <mark2011@mayberg.se>
Date: Mon, 16 Apr 2018 15:13:51 +0200
Updated editor, keyboard shortcuts for Steffen
Diffstat:
4 files changed, 84 insertions(+), 36 deletions(-)
diff --git a/system/config/config.ini b/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
diff --git a/system/plugins/edit.css b/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;
diff --git a/system/plugins/edit.js b/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)
{
diff --git a/system/plugins/edit.php b/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");
