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

Toggle Preview

Browse source 
Revert the autosize and add toggle preview instead.
This commit is contained in:
danpros 2024-06-01 22:59:12 +07:00
commit 966a7f3c2d
5 changed files with 129 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

42
system/admin/views/edit-page.html.php
View file

@ -91,14 +91,13 @@ $images = image_gallery(null, 1, 40);
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Editor.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Extra.js"></script>
<link rel="stylesheet" href="<?php echo site_url() ?>system/resources/css/jquery-ui.css">
<script src="<?php echo site_url() ?>system/resources/js/autosize.min.js"></script>
<?php if (isset($error)) { ?>
<div class="error-message"><?php echo $error ?></div>
<?php } ?>
<div class="notice" id="response"></div>
<div class="row">
<div class="hide-button" style="margin-bottom:1em;width:100%;"><input style="float:right" type="button" id="hideButton" class="btn btn-secondary btn-xs" value="<?php echo i18n('Focus_mode');?>"/></div>
<div class="hide-button" style="margin-bottom:1em;width:100%;text-align:right;"><button type="button" title="<?php echo i18n('Focus_mode');?>" id="hideButton" class="note-btn btn btn-light btn-sm" style="width:38px;height:38px;font-size:18px;" ><i class="fa fa-eye" aria-hidden="true"></i></button></div>
<div class="wmd-panel" style="width:100%;">
<form method="POST">
<div id="post-settings" class="row">
@ -136,9 +135,13 @@ $images = image_gallery(null, 1, 40);
</div>
</div>
<div class="row">
<div class="col-sm-12" style="text-align:right;">
<button class="note-btn btn btn-light btn-sm" style="width:38px;height:38px;font-size:18px;" type="button" title="Toggle <?php echo i18n('Preview');?>" id="preview-toggle" class="btn btn-secondary btn-xs"><i class="fa fa-columns" aria-hidden="true"></i></button>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-6" id="editor-col">
<label for="wmd-input"><?php echo i18n('Content');?> <span class="required">*</span></label>
<div id="wmd-button-bar" class="wmd-button-bar"></div>
<textarea id="wmd-input" class="form-control wmd-input <?php if (isset($postContent)) {if (empty($postContent)) {echo 'error';}} ?>" name="content" cols="20" rows="10"><?php echo $oldcontent ?></textarea>
@ -162,7 +165,7 @@ $images = image_gallery(null, 1, 40);
<?php } ?>
<?php } ?>
</div>
<div class="col-sm-6">
<div class="col-sm-6" id="preview-col">
<label><?php echo i18n('Preview');?></label>
<br>
<div id="wmd-preview" class="wmd-panel wmd-preview" style="width:100%;overflow:auto;"></div>
@ -299,22 +302,17 @@ $('.img-container').on("click", ".the-img", function(e) {
});
</script>
<script>
var ta = document.querySelector('#wmd-input');
autosize(ta);
function toggleDivs() {
var div1 = document.getElementById('post-settings');
if (div1.style.display === 'none') {
autosize.destroy(ta);
div1.style.display = '';
document.body.classList.add("sidebar-mini");
document.body.classList.remove("sidebar-collapse");
} else {
autosize.destroy(ta);
div1.style.display = 'none';
document.body.classList.remove("sidebar-mini");
document.body.classList.add("sidebar-collapse");
}
autosize(ta);
}
document.getElementById('hideButton').addEventListener('click', toggleDivs);
</script>
@ -325,3 +323,27 @@ $('.img-container').on("click", ".the-img", function(e) {
<?php endif;?>
<?php endif;?>
<?php endif;?>
<script>
if (localStorage.getItem("preview-state") === "open") {
document.getElementById("editor-col").classList.remove('col-sm-12');
document.getElementById("editor-col").classList.add('col-sm-6');
document.getElementById("preview-col").style.display = '';
} else if (localStorage.getItem("preview-state") === "close") {
document.getElementById("editor-col").classList.remove('col-sm-6');
document.getElementById("editor-col").classList.add('col-sm-12');
document.getElementById("preview-col").style.display = 'none';
}
document.getElementById("preview-toggle").addEventListener("click", () => {
if (document.getElementById("editor-col").className.includes("col-sm-6")) {
document.getElementById("editor-col").classList.remove('col-sm-6');
document.getElementById("editor-col").classList.add('col-sm-12');
document.getElementById("preview-col").style.display = 'none';
localStorage.setItem("preview-state", 'close');
} else {
document.getElementById("editor-col").classList.remove('col-sm-12');
document.getElementById("editor-col").classList.add('col-sm-6');
document.getElementById("preview-col").style.display = '';
localStorage.setItem("preview-state", 'open');
}
})
</script>