FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-17 11:16:00 +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/add-content.html.php
View file

@ -35,7 +35,6 @@ $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>
<script>
$( function() {
var availableTags = [
@ -89,7 +88,7 @@ $( function() {
<?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">
@ -177,7 +176,12 @@ $( function() {
</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>
@ -187,7 +191,7 @@ $( function() {
<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>
@ -322,25 +326,45 @@ $('.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>
<?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
system/admin/views/add-page.html.php
View file

@ -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">
@ -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>
@ -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>
@ -148,22 +151,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>
@ -172,3 +170,27 @@ $('.img-container').on("click", ".the-img", function(e) {
<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
system/admin/views/edit-content.html.php
View file

@ -80,7 +80,6 @@ $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>
<script>
$( function() {
var availableTags = [
@ -134,7 +133,7 @@ $( function() {
<?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">
@ -224,7 +223,12 @@ $( function() {
</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>
@ -238,7 +242,7 @@ $( function() {
<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>
@ -372,22 +376,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>
@ -396,3 +395,27 @@ $('.img-container').on("click", ".the-img", function(e) {
<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
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>

1
system/resources/js/autosize.min.js vendored
View file

@ -1 +0,0 @@
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).autosize=t()}(this,function(){var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;return"undefined"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){s({testForHeightReduction:""===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener("autosize:destroy",l),t.removeEventListener("autosize:update",a),t.removeEventListener("input",i),window.removeEventListener("resize",a),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",l),t.addEventListener("autosize:update",a),t.addEventListener("input",i),window.addEventListener("resize",a),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:l,update:a}),a()}function s(e){var o,i,l=e.restoreTextAlign,a=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,f=n.overflowY;if(0!==t.scrollHeight&&("vertical"===n.resize?t.style.resize="none":"both"===n.resize&&(t.style.resize="horizontal"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior="auto",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=""),i="content-box"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),"none"!==n.maxHeight&&i>parseFloat(n.maxHeight)?("hidden"===n.overflowY&&(t.style.overflow="scroll"),i=parseFloat(n.maxHeight)):"hidden"!==n.overflowY&&(t.style.overflow="hidden"),t.style.height=i+"px",a&&(t.style.textAlign=a),o&&o(),r!==i&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:!0})),r=i),f!==n.overflow&&!a)){var c=n.textAlign;"hidden"===n.overflow&&(t.style.textAlign="start"===c?"end":"start"),s({restoreTextAlign:c,testForHeightReduction:!0})}}function a(){s({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e}),r});