mirror of
https://github.com/danpros/htmly.git
synced 2026-04-17 11:16:00 +05:30
Merge pull request #967 from andrigamerita/fullscreen-editor by @andrigamerita
Add fullscreen feature to Markdown editor
This commit is contained in:
commit
591bdd7e7b
2 changed files with 61 additions and 0 deletions
|
|
@ -132,6 +132,36 @@ blockquote {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
#wmd-maximize-button, #wmd-minimize-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
div.fullscreen-editor {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
div.fullscreen-editor > textarea {
|
||||
flex: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
div.fullscreen-wrapper > div#preview-col,
|
||||
div.fullscreen-editor > a,
|
||||
div.fullscreen-editor > br,
|
||||
div.fullscreen-editor > details,
|
||||
div.fullscreen-editor > label,
|
||||
div.fullscreen-editor > input[type="submit"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,9 @@
|
|||
|
||||
table: "Table - Ctrl+J",
|
||||
|
||||
maximize: "Maximize CTRL+P",
|
||||
minimize: "Minimize CTRL+P",
|
||||
|
||||
undo: "Undo - Ctrl+Z",
|
||||
redo: "Redo - Ctrl+Y",
|
||||
redomac: "Redo - Ctrl+Shift+Z",
|
||||
|
|
@ -1317,6 +1320,9 @@
|
|||
case "j":
|
||||
doClick(buttons.table);
|
||||
break;
|
||||
case "p":
|
||||
doClick(buttons.maximize);
|
||||
break;
|
||||
// case "y":
|
||||
// doClick(buttons.redo);
|
||||
// break;
|
||||
|
|
@ -1523,6 +1529,11 @@
|
|||
buttons.hr = makeButton("wmd-hr-button", getString("hr"), "fa fa-ellipsis-h", bindCommand("doHorizontalRule"));
|
||||
buttons.readmore = makeButton("wmd-readmore-button", getString("readmore"), "fa fa-arrow-right", bindCommand("doReadMore"));
|
||||
buttons.toc = makeButton("wmd-toc-button", getString("toc"), "fa fa-list-alt", bindCommand("doTOC"));
|
||||
|
||||
buttons.maximize = makeButton("wmd-maximize-button", getString("maximize"), "fa-solid fa-maximize", toggleFullscreen);
|
||||
buttons.minimize = makeButton("wmd-minimize-button", getString("minimize"), "fa-solid fa-minimize", toggleFullscreen);
|
||||
buttons.minimize.hidden = true;
|
||||
|
||||
//makeSpacer(3);
|
||||
buttons.undo = makeButton("wmd-undo-button", getString("undo"), "fa-solid fa-rotate-left", null);
|
||||
buttons.undo.execute = function (manager) {
|
||||
|
|
@ -1558,6 +1569,20 @@
|
|||
setUndoRedoButtonStates();
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
var parent = panels.input.parentElement;
|
||||
if (!parent.style.backgroundColor) {
|
||||
parent.style.backgroundColor = getComputedStyle(document.body).backgroundColor;
|
||||
}
|
||||
var fullscreen = parent.classList.toggle('fullscreen-editor');
|
||||
parent.parentElement.parentElement.classList.toggle('fullscreen-wrapper', fullscreen);
|
||||
buttons.maximize.hidden = fullscreen;
|
||||
buttons.minimize.hidden = !fullscreen;
|
||||
document.body.style.overflowY = fullscreen ? 'hidden' : null;
|
||||
document.body.querySelector('aside.main-sidebar').style.display =
|
||||
document.body.querySelector('nav.main-header').style.display = fullscreen ? 'none' : null;
|
||||
}
|
||||
|
||||
function setUndoRedoButtonStates() {
|
||||
if (undoManager) {
|
||||
setupButton(buttons.undo, undoManager.canUndo());
|
||||
|
|
@ -2487,5 +2512,11 @@
|
|||
}
|
||||
};
|
||||
|
||||
// better fullscreen editing on mobile by letting the browser resize viewport when keyboard is open
|
||||
var metaViewport = document.querySelector("meta[name=viewport]");
|
||||
var mobileFix = 'interactive-widget=resizes-content';
|
||||
if (!metaViewport.content.split(',').includes(mobileFix)) {
|
||||
metaViewport.content += ',' + mobileFix;
|
||||
}
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue