Skip to content

Commit

Permalink
Toggle Preview
Browse files Browse the repository at this point in the history 
Revert the autosize and add toggle preview instead.
  • Loading branch information
@danpros
danpros committed Jun 1, 2024
1 parent 0369d4e commit 966a7f3
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 39 deletions.
42 changes: 33 additions & 9 deletions system/admin/views/add-content.html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
<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>
<script>
$( function() {
var availableTags = [
Expand Down Expand Up @@ -89,7 +88,7 @@ function extractLast( term ) {
<?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">
Expand Down Expand Up @@ -177,7 +176,12 @@ function extractLast( term ) {
</div>
</div>
<div class="row">
<div class="col-sm-6">
<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" id="editor-col">
<div>
<input type="hidden" id="pType" name="posttype" value="<?php echo $type; ?>">
<label for="wmd-input"><?php echo i18n('Content');?> <span class="required">*</span></label>
Expand All @@ -187,7 +191,7 @@ function extractLast( term ) {
<br><br>
</div>
</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>
Expand Down Expand Up @@ -322,25 +326,45 @@ function loadImages(page) {
});
</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>
<?php if (config('autosave.enable') == 'true' ):?>
<script src="<?php echo site_url();?>system/resources/js/save_draft.js"></script>
<?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>

42 changes: 32 additions & 10 deletions system/admin/views/add-page.html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,13 @@
<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">
Expand All @@ -35,9 +34,13 @@
<?php endif;?>
</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 if (isset($postContent)) {echo $postContent;} ?></textarea>
Expand All @@ -51,7 +54,7 @@
<input type="submit" name="submit" class="btn btn-primary submit" value="<?php echo i18n('Add_category');?>"/>
<?php endif;?>
</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>
Expand Down Expand Up @@ -148,22 +151,17 @@ function loadImages(page) {
});
</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>
Expand All @@ -172,3 +170,27 @@ function toggleDivs() {
<script src="<?php echo site_url();?>system/resources/js/save_draft.js"></script>
<?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>
41 changes: 32 additions & 9 deletions system/admin/views/edit-content.html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@
<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>
<script>
$( function() {
var availableTags = [
Expand Down Expand Up @@ -134,7 +133,7 @@ function extractLast( term ) {
<?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">
Expand Down Expand Up @@ -224,7 +223,12 @@ function extractLast( term ) {
</div>
</div>
<div class="row">
<div class="col-sm-6">
<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" id="editor-col">
<div>
<input type="hidden" id="pType" name="posttype" value="<?php echo $type; ?>">
<label for="wmd-input"><?php echo i18n('Content');?> <span class="required">*</span></label>
Expand All @@ -238,7 +242,7 @@ function extractLast( term ) {
<br><br>
</div>
</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>
Expand Down Expand Up @@ -372,22 +376,17 @@ function loadImages(page) {
});
</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>
Expand All @@ -396,3 +395,27 @@ function toggleDivs() {
<script src="<?php echo site_url();?>system/resources/js/save_draft.js"></script>
<?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>
42 changes: 32 additions & 10 deletions system/admin/views/edit-page.html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,13 @@
<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">
Expand Down Expand Up @@ -136,9 +135,13 @@

</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>
Expand All @@ -162,7 +165,7 @@
<?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>
Expand Down Expand Up @@ -299,22 +302,17 @@ function loadImages(page) {
});
</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>
Expand All @@ -325,3 +323,27 @@ function toggleDivs() {
<?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>
Loading

0 comments on commit 966a7f3

Please sign in to comment.