Updated editor, keyboard shortcuts for Steffen

This commit is contained in:
markseu 2018-04-16 15:13:51 +02:00
parent ef97347fe2
commit cf6790fd80
4 changed files with 84 additions and 36 deletions

View file

@ -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

View file

@ -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;

View file

@ -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)
{

View file

@ -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");