FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-21 13:06:22 +05:30
Code Issues Projects Releases Packages Wiki Activity

Use font awesome for markdown editor

Browse source
This commit is contained in:
danpros 2021-03-03 21:05:25 +07:00
commit f708616b70
2 changed files with 30 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

10
system/admin/editor/css/editor.css
View file

@ -48,25 +48,19 @@ blockquote {
background-color: Silver;
list-style: none;
float: left;
margin: 0.25em 5px;
margin: 5px;
}
.wmd-button {
width: 20px;
height: 20px;
padding-left: 5px;
padding-right: 5px;
list-style: none;
cursor: pointer;
float: left;
}
.wmd-button > span {
background-image: url(../img/wmd-buttons.png);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 20px;
height: 20px;
display: inline-block;
}

75
system/admin/editor/js/Markdown.Editor.js
View file

@ -1395,33 +1395,12 @@
function setupButton(button, isEnabled) {
var normalYShift = "0px";
var disabledYShift = "-20px";
var highlightYShift = "-40px";
var normalYShift = "note-btn btn btn-light btn-sm";
var disabledYShift = "note-btn btn btn-light btn-sm disabled";
var highlightYShift = "";
var image = button.getElementsByTagName("span")[0];
if (isEnabled) {
image.style.backgroundPosition = button.XShift + " " + normalYShift;
button.onmouseover = function () {
image.style.backgroundPosition = this.XShift + " " + highlightYShift;
};
button.onmouseout = function () {
image.style.backgroundPosition = this.XShift + " " + normalYShift;
};
// IE tries to select the background image "button" text (it's
// implemented in a list item) so we have to cache the selection
// on mousedown.
if (uaSniffed.isIE) {
button.onmousedown = function () {
if (doc.activeElement && doc.activeElement !== panels.input) { // we're not even in the input box, so there's no selection
return;
}
panels.ieCachedRange = document.selection.createRange();
panels.ieCachedScrollTop = panels.input.scrollTop;
};
}
image.className = normalYShift;
if (!button.isHelp) {
button.onclick = function () {
if (this.onmouseout) {
@ -1433,7 +1412,7 @@
}
}
else {
image.style.backgroundPosition = button.XShift + " " + disabledYShift;
image.className = disabledYShift;
button.onmouseover = button.onmouseout = button.onclick = function () {
};
}
@ -1451,25 +1430,27 @@
var buttonBar = panels.buttonBar;
var normalYShift = "0px";
var disabledYShift = "-20px";
var highlightYShift = "-40px";
var normalYShift = "note-btn btn btn-light btn-sm";
var disabledYShift = "note-btn btn btn-light btn-sm disabled";
var highlightYShift = "";
var buttonRow = document.createElement("ul");
buttonRow.style.padding = "0px 10px";
buttonRow.id = "wmd-button-row" + postfix;
buttonRow.className = 'wmd-button-row';
buttonRow = buttonBar.appendChild(buttonRow);
var xPosition = 0;
var makeButton = function (id, title, XShift, textOp) {
var makeButton = function (id, title, XClass, textOp) {
var button = document.createElement("li");
button.className = "wmd-button";
button.style.left = xPosition + "px";
xPosition += 25;
var buttonImage = document.createElement("span");
var buttonIcon = document.createElement("i");
buttonImage.className = "note-btn btn btn-light btn-sm";
buttonIcon.className = XClass;
buttonImage.appendChild(buttonIcon);
button.id = id + postfix;
button.appendChild(buttonImage);
button.title = title;
button.XShift = XShift;
if (textOp)
button.textOp = textOp;
setupButton(button, true);
@ -1481,31 +1462,31 @@
spacer.className = "wmd-spacer wmd-spacer" + num;
spacer.id = "wmd-spacer" + num + postfix;
buttonRow.appendChild(spacer);
xPosition += 25;
//xPosition += 25;
}
buttons.bold = makeButton("wmd-bold-button", getString("bold"), "0px", bindCommand("doBold"));
buttons.italic = makeButton("wmd-italic-button", getString("italic"), "-20px", bindCommand("doItalic"));
buttons.bold = makeButton("wmd-bold-button", getString("bold"), "fa fa-bold", bindCommand("doBold"));
buttons.italic = makeButton("wmd-italic-button", getString("italic"), "fa fa-italic", bindCommand("doItalic"));
makeSpacer(1);
buttons.link = makeButton("wmd-link-button", getString("link"), "-40px", bindCommand(function (chunk, postProcessing) {
buttons.link = makeButton("wmd-link-button", getString("link"), "fa fa-link", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, false);
}));
buttons.quote = makeButton("wmd-quote-button", getString("quote"), "-60px", bindCommand("doBlockquote"));
buttons.code = makeButton("wmd-code-button", getString("code"), "-80px", bindCommand("doCode"));
buttons.image = makeButton("wmd-image-button", getString("image"), "-100px", bindCommand(function (chunk, postProcessing) {
buttons.quote = makeButton("wmd-quote-button", getString("quote"), "fa fa-quote-right", bindCommand("doBlockquote"));
buttons.code = makeButton("wmd-code-button", getString("code"), "fa fa-code", bindCommand("doCode"));
buttons.image = makeButton("wmd-image-button", getString("image"), "fa fa-image", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, true);
}));
makeSpacer(2);
buttons.olist = makeButton("wmd-olist-button", getString("olist"), "-120px", bindCommand(function (chunk, postProcessing) {
buttons.olist = makeButton("wmd-olist-button", getString("olist"), "fa fa-list-ol", bindCommand(function (chunk, postProcessing) {
this.doList(chunk, postProcessing, true);
}));
buttons.ulist = makeButton("wmd-ulist-button", getString("ulist"), "-140px", bindCommand(function (chunk, postProcessing) {
buttons.ulist = makeButton("wmd-ulist-button", getString("ulist"), "fa fa-list-ul", bindCommand(function (chunk, postProcessing) {
this.doList(chunk, postProcessing, false);
}));
buttons.heading = makeButton("wmd-heading-button", getString("heading"), "-160px", bindCommand("doHeading"));
buttons.hr = makeButton("wmd-hr-button", getString("hr"), "-180px", bindCommand("doHorizontalRule"));
buttons.heading = makeButton("wmd-heading-button", getString("heading"), "fa fa-header", bindCommand("doHeading"));
buttons.hr = makeButton("wmd-hr-button", getString("hr"), "fa fa-ellipsis-h", bindCommand("doHorizontalRule"));
makeSpacer(3);
buttons.undo = makeButton("wmd-undo-button", getString("undo"), "-200px", null);
buttons.undo = makeButton("wmd-undo-button", getString("undo"), "fa fa-undo", null);
buttons.undo.execute = function (manager) {
if (manager) manager.undo();
};
@ -1514,7 +1495,7 @@
getString("redo") :
getString("redomac"); // mac and other non-Windows platforms
buttons.redo = makeButton("wmd-redo-button", redoTitle, "-220px", null);
buttons.redo = makeButton("wmd-redo-button", redoTitle, "fa fa-repeat", null);
buttons.redo.execute = function (manager) {
if (manager) manager.redo();
};
@ -1525,7 +1506,7 @@
helpButton.appendChild(helpButtonImage);
helpButton.className = "wmd-button wmd-help-button";
helpButton.id = "wmd-help-button" + postfix;
helpButton.XShift = "-240px";
helpButton.XClass = "note-btn btn btn-light btn-sm";
helpButton.isHelp = true;
helpButton.style.right = "0px";
helpButton.title = getString("help");