kazhnuz/koblog
1
0
Fork 0
Code Issues 30 Pull requests Projects 3 Releases Packages Wiki Activity Actions

🚸 (admin): rework content edition pages

Browse source
This commit is contained in:
Kazhnuz 2025-01-18 15:44:25 +01:00
parent 9b2e5c7298
commit 152f35023a
5 changed files with 433 additions and 428 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
bl-kernel/admin/themes/koblog/css/koblog.bootstrap.css
View file

@ -118,7 +118,8 @@ tr.card-tablebody:not(:last-child) {
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.15); box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.15);
} }
#main-area a.nav-link:not(.active):hover { #main-area a.nav-link:not(.active):hover,
#main-area button.nav-link:not(.active):hover {
background-color: rgba(0,0,0,0.1)!important; background-color: rgba(0,0,0,0.1)!important;
} }

6
bl-kernel/admin/themes/koblog/html/media.php
View file

@ -107,9 +107,9 @@ function displayFiles(files, numberOfPages = <?= $numberOfPages ?>) {
'<td class="information">'+ '<td class="information">'+
'<div class="text-secondary pb-2">'+filename+'<\/div>'+ '<div class="text-secondary pb-2">'+filename+'<\/div>'+
'<div>'+ '<div>'+
'<a href="#" class="mr-3 text-primary" onClick="editorInsertMedia(\''+image+'\'); closeMediaManager();"><i class="fa fa-plus-circle"></i><?php $L->p('Insert') ?><\/a>'+ '<a href="#" class="me-3 text-primary" onClick="editorInsertMedia(\''+image+'\'); closeMediaManager();"><i class="fa fa-plus-circle"></i><?php $L->p('Insert') ?><\/a>'+
'<a href="#" class="mr-3 text-primary" onClick="editorInsertMedia(\''+thumbnail+'\'); closeMediaManager();"><i class="fa fa-image"></i><?php $L->p('Insert thumbnail') ?><\/a>'+ '<a href="#" class="me-3 text-primary" onClick="editorInsertMedia(\''+thumbnail+'\'); closeMediaManager();"><i class="fa fa-image"></i><?php $L->p('Insert thumbnail') ?><\/a>'+
'<a href="#" class="mr-3 text-primary" onClick="editorInsertLinkedMedia(\''+thumbnail+'\',\''+image+'\'); closeMediaManager();"><i class="fa fa-link"></i><?php $L->p('Insert linked thumbnail') ?><\/a>'+ '<a href="#" class="me-3 text-primary" onClick="editorInsertLinkedMedia(\''+thumbnail+'\',\''+image+'\'); closeMediaManager();"><i class="fa fa-link"></i><?php $L->p('Insert linked thumbnail') ?><\/a>'+
'<a href="#" class="text-primary" onClick="setCoverImage(\''+filename+'\'); closeMediaManager();"><i class="fa fa-desktop"></i><?php $L->p('Set as cover image') ?><\/button>'+ '<a href="#" class="text-primary" onClick="setCoverImage(\''+filename+'\'); closeMediaManager();"><i class="fa fa-desktop"></i><?php $L->p('Set as cover image') ?><\/button>'+
'<a href="#" class="float-right text-danger" onClick="deleteMedia(\''+filename+'\')"><i class="fa fa-trash-o"></i><?php $L->p('Delete') ?><\/a>'+ '<a href="#" class="float-right text-danger" onClick="deleteMedia(\''+filename+'\')"><i class="fa fa-trash-o"></i><?php $L->p('Delete') ?><\/a>'+
'<\/div>'+ '<\/div>'+

17
bl-kernel/admin/themes/koblog/init.php
View file

@ -37,7 +37,7 @@ EOF;
public static function cardBegin($title) { public static function cardBegin($title) {
return <<<EOF return <<<EOF
<div class="card"> <div class="card mb-3">
<h6 class="card-header">$title</h6> <h6 class="card-header">$title</h6>
<div class="card-body"> <div class="card-body">
EOF; EOF;
@ -112,8 +112,9 @@ EOF;
public static function formTitle($args) public static function formTitle($args)
{ {
$title = $args['title']; $title = $args['title'];
$mt = $args['mt'] ?? 'mt-2';
return <<<EOF return <<<EOF
<h6 class="mt-4 mb-2 pb-2 border-bottom text-uppercase">$title</h6> <h6 class="$mt mb-0 pb-1 text-uppercase">$title</h6>
EOF; EOF;
} }
@ -139,7 +140,8 @@ EOF;
$class = $args['class']; $class = $args['class'];
} }
$labelClass = 'mt-4 mb-2 pb-2 border-bottom text-uppercase w-100'; $mt = $args['mt'] ?? 'mt-2';
$labelClass = $mt.' mb-0 pb-1 text-uppercase w-100';
if (isset($args['labelClass'])) { if (isset($args['labelClass'])) {
$labelClass = $args['labelClass']; $labelClass = $args['labelClass'];
} }
@ -226,7 +228,8 @@ EOF;
$html = '<div class="form-group m-0 mb-2">'; $html = '<div class="form-group m-0 mb-2">';
if (!empty($args['label'])) { if (!empty($args['label'])) {
$html .= '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100" for="' . $id . '">' . $args['label'] . '</label>'; $mt = $args['mt'] ?? 'mt-2';
$html .= '<label class="'.$mt.' mb-0 pb-1 text-uppercase w-100" for="' . $id . '">' . $args['label'] . '</label>';
} }
$html .= '<textarea class="' . $class . '" id="' . $id . '" name="' . $args['name'] . '" rows="' . $args['rows'] . '" placeholder="' . $args['placeholder'] . '">' . $args['value'] . '</textarea>'; $html .= '<textarea class="' . $class . '" id="' . $id . '" name="' . $args['name'] . '" rows="' . $args['rows'] . '" placeholder="' . $args['placeholder'] . '">' . $args['value'] . '</textarea>';
@ -300,7 +303,8 @@ EOF;
$class = $args['class']; $class = $args['class'];
} }
$labelClass = 'mt-4 mb-2 pb-2 border-bottom text-uppercase w-100'; $mt = $args['mt'] ?? 'mt-2';
$labelClass = $mt.' mb-0 pb-1 text-uppercase w-100';
if (isset($args['labelClass'])) { if (isset($args['labelClass'])) {
$labelClass = $args['labelClass']; $labelClass = $args['labelClass'];
} }
@ -378,7 +382,8 @@ EOF;
$html = '<div class="form-group m-0 mb-2">'; $html = '<div class="form-group m-0 mb-2">';
if (!empty($args['label'])) { if (!empty($args['label'])) {
$html .= '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100" for="' . $id . '">' . $args['label'] . '</label>'; $mt = $args['mt'] ?? 'mt-2';
$html .= '<label class="'.$mt.' mb-0 pb-1 text-uppercase w-100" for="' . $id . '">' . $args['label'] . '</label>';
} }
$html .= '<select id="' . $id . '" name="' . $args['name'] . '" class="' . $class . '">'; $html .= '<select id="' . $id . '" name="' . $args['name'] . '" class="' . $class . '">';

172
bl-kernel/admin/views/edit-content.php
View file

@ -46,41 +46,73 @@ echo Bootstrap::formInputHidden(array(
)); ));
?> ?>
<!-- TOOLBAR --> <div class="row">
<div id="jseditorToolbar" class="mb-1">
<div id="jseditorToolbarRight" class="btn-group btn-group-sm float-right" role="group" aria-label="Toolbar right">
<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-bs-toggle="modal" data-bs-target="#jsmediaManagerModal"><span class="fa fa-image"></span> <?php $L->p('Images') ?></button>
<button type="button" class="btn btn-light" id="jsoptionsSidebar" style="z-index:30"><span class="fa fa-cog"></span> <?php $L->p('Options') ?></button>
</div>
<div id="jseditorToolbarLeft"> <!-- TOOLBAR -->
<button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php echo $L->g('Save') ?></button> <div class="mb-3 col-lg-6">
<button id="jsbuttonPreview" type="button" class="btn btn-sm btn-secondary"><?php $L->p('Preview') ?></button> <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#jsmediaManagerModal"><span class="fa fa-image"></span> <?php $L->p('Images') ?></button>
<span id="jsswitchButton" data-switch="<?php echo ($page->draft() ? 'draft' : 'publish') ?>" class="ml-2 text-secondary switch-button"><i class="fa fa-square switch-icon-<?php echo ($page->draft() ? 'draft' : 'publish') ?>"></i> <?php echo ($page->draft() ? $L->g('Draft') : $L->g('Publish')) ?></span> <span id="jsswitchButton" data-switch="<?php echo ($page->draft() ? 'draft' : 'publish') ?>" class="ml-2 btn-outline-<?php echo ($page->draft() ? 'light' : 'success') ?> btn"><?php echo ($page->draft() ? $L->g('Draft') : $L->g('Publish')) ?></span>
</div>
<?php if ($page->scheduled()) : ?> <?php if ($page->scheduled()) : ?>
<div class="alert alert-warning p-1 mt-1 mb-0"><?php $L->p('scheduled') ?>: <?php echo $page->date(SCHEDULED_DATE_FORMAT) ?></div> <div class="alert alert-warning p-1 mt-1 mb-0"><?php $L->p('scheduled') ?>: <?php echo $page->date(SCHEDULED_DATE_FORMAT) ?></div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<script>
$(document).ready(function() {
$("#jsoptionsSidebar").on("click", function() {
$("#jseditorSidebar").toggle();
$("#jsshadow").toggle();
});
$("#jsshadow").on("click", function() { <div class="col-lg-6 text-end">
$("#jseditorSidebar").toggle(); <button id="jsbuttonPreview" type="button" class="btn btn-secondary"><?php $L->p('Preview') ?></button>
$("#jsshadow").toggle(); <button type="button" class="btn btn-primary" id="jsbuttonSave"><?php echo $L->g('Save') ?></button>
}); </div>
}); </div>
</script>
<div class="row">
<div class="col-lg-9">
<!-- Title -->
<div class="form-group mb-2">
<input id="jstitle" name="title" type="text" dir="auto" class="form-control form-control-lg" value="<?php echo $page->title() ?>" placeholder="<?php $L->p('Enter title') ?>">
</div>
<!-- Editor -->
<textarea id="jseditor" class="editable h-100" style=""><?php echo $page->contentRaw(true) ?></textarea>
<!-- Custom fields: BOTTOM -->
<?php
$customFields = $site->customFields();
foreach ($customFields as $field => $options) {
if (isset($options['position']) && ($options['position'] == 'bottom')) {
if ($options['type'] == "string") {
echo Bootstrap::formInputTextBlock(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'value' => $page->custom($field),
'tip' => (isset($options['tip']) ? $options['tip'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'class' => 'mt-2',
'labelClass' => 'mb-0 pb-1 text-uppercase w-100'
));
} elseif ($options['type'] == "bool") {
echo Bootstrap::formCheckbox(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'checked' => $page->custom($field),
'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : ''),
'class' => 'mt-2',
'labelClass' => 'mb-0 pb-1 text-uppercase w-100'
));
}
}
}
?>
</form>
</div>
<!-- SIDEBAR OPTIONS --> <!-- SIDEBAR OPTIONS -->
<div id="jseditorSidebar"> <div class="col-lg-3">
<nav> <nav class="mb-2">
<div class="nav nav-tabs" id="nav-tab" role="tablist"> <div class="nav nav-pills" id="nav-tab" role="tablist">
<a class="nav-link active show" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general" role="tab" aria-controls="general"><?php $L->p('General') ?></a> <a class="nav-link active show" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general" role="tab" aria-controls="general"><?php $L->p('General') ?></a>
<a class="nav-link" id="nav-advanced-tab" data-bs-toggle="tab" data-bs-target="#nav-advanced" role="tab" aria-controls="advanced"><?php $L->p('Advanced') ?></a> <a class="nav-link" id="nav-advanced-tab" data-bs-toggle="tab" data-bs-target="#nav-advanced" role="tab" aria-controls="advanced"><?php $L->p('Advanced') ?></a>
<?php if (!empty($site->customFields())) : ?> <?php if (!empty($site->customFields())) : ?>
@ -90,7 +122,8 @@ echo Bootstrap::formInputHidden(array(
</div> </div>
</nav> </nav>
<div class="tab-content pr-3 pl-3 pb-3"> <div class="card">
<div class="tab-content pr-3 pl-3 pb-3 card-body">
<div id="nav-general" class="tab-pane fade show active" role="tabpanel" aria-labelledby="general-tab"> <div id="nav-general" class="tab-pane fade show active" role="tabpanel" aria-labelledby="general-tab">
<?php <?php
// Category // Category
@ -100,7 +133,17 @@ echo Bootstrap::formInputHidden(array(
'selected' => $page->categoryKey(), 'selected' => $page->categoryKey(),
'class' => '', 'class' => '',
'emptyOption' => '- ' . $L->g('Uncategorized') . ' -', 'emptyOption' => '- ' . $L->g('Uncategorized') . ' -',
'options' => $categories->getKeyNameArray() 'options' => $categories->getKeyNameArray(),
'mt'=>'mt-0'
));
// Tags
echo Bootstrap::formInputTextBlock(array(
'name' => 'tags',
'label' => $L->g('Tags'),
'placeholder' => '',
'tip' => $L->g('Write the tags separated by comma'),
'value' => $page->tags()
)); ));
// Description // Description
@ -124,7 +167,7 @@ echo Bootstrap::formInputHidden(array(
$externalCoverImage = $page->coverImage(false); $externalCoverImage = $page->coverImage(false);
} }
?> ?>
<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100"><?php $L->p('Cover Image') ?></label> <label class="mt-2 mb-0 pb-1 text-uppercase w-100"><?php $L->p('Cover Image') ?></label>
<div> <div>
<img id="jscoverImagePreview" class="mx-auto d-block w-100" alt="Cover image preview" src="<?php echo (empty($coverImage) ? HTML_PATH_CORE_IMG . 'default.svg' : $page->coverImage()) ?>" /> <img id="jscoverImagePreview" class="mx-auto d-block w-100" alt="Cover image preview" src="<?php echo (empty($coverImage) ? HTML_PATH_CORE_IMG . 'default.svg' : $page->coverImage()) ?>" />
</div> </div>
@ -157,7 +200,8 @@ echo Bootstrap::formInputHidden(array(
'label' => $L->g('Date'), 'label' => $L->g('Date'),
'placeholder' => '', 'placeholder' => '',
'value' => $page->dateRaw(), 'value' => $page->dateRaw(),
'tip' => $L->g('date-format-format') 'tip' => $L->g('date-format-format'),
'mt'=>'mt-0'
)); ));
// Type // Type
@ -181,15 +225,6 @@ echo Bootstrap::formInputHidden(array(
'value' => $page->position() 'value' => $page->position()
)); ));
// Tags
echo Bootstrap::formInputTextBlock(array(
'name' => 'tags',
'label' => $L->g('Tags'),
'placeholder' => '',
'tip' => $L->g('Write the tags separated by comma'),
'value' => $page->tags()
));
// Parent // Parent
try { try {
$options = array(); $options = array();
@ -328,7 +363,8 @@ echo Bootstrap::formInputHidden(array(
'tip' => $L->g('URL associated with the content'), 'tip' => $L->g('URL associated with the content'),
'label' => $L->g('Friendly URL'), 'label' => $L->g('Friendly URL'),
'placeholder' => $L->g('Leave empty for autocomplete by Koblog.'), 'placeholder' => $L->g('Leave empty for autocomplete by Koblog.'),
'value' => $page->slug() 'value' => $page->slug(),
'mt'=>'mt-0'
)); ));
// Robots // Robots
@ -363,6 +399,7 @@ echo Bootstrap::formInputHidden(array(
?> ?>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- Custom fields: TOP --> <!-- Custom fields: TOP -->
@ -378,7 +415,7 @@ foreach ($customFields as $field => $options) {
'tip' => (isset($options['tip']) ? $options['tip'] : ''), 'tip' => (isset($options['tip']) ? $options['tip'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''), 'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'class' => 'mb-2', 'class' => 'mb-2',
'labelClass' => 'mb-2 pb-2 border-bottom text-uppercase w-100' 'labelClass' => 'mb-0 pb-1 text-uppercase w-100'
)); ));
} elseif ($options['type'] == "bool") { } elseif ($options['type'] == "bool") {
@ -389,54 +426,13 @@ foreach ($customFields as $field => $options) {
'checked' => $page->custom($field), 'checked' => $page->custom($field),
'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : ''), 'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : ''),
'class' => 'mb-2', 'class' => 'mb-2',
'labelClass' => 'mb-2 pb-2 border-bottom text-uppercase w-100' 'labelClass' => 'mb-0 pb-1 text-uppercase w-100'
)); ));
} }
} }
} }
?> ?>
<!-- Title -->
<div class="form-group mb-1">
<input id="jstitle" name="title" type="text" dir="auto" class="form-control form-control-lg rounded-0" value="<?php echo $page->title() ?>" placeholder="<?php $L->p('Enter title') ?>">
</div>
<!-- Editor -->
<textarea id="jseditor" class="editable h-100" style=""><?php echo $page->contentRaw(true) ?></textarea>
<!-- Custom fields: BOTTOM -->
<?php
$customFields = $site->customFields();
foreach ($customFields as $field => $options) {
if (isset($options['position']) && ($options['position'] == 'bottom')) {
if ($options['type'] == "string") {
echo Bootstrap::formInputTextBlock(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'value' => $page->custom($field),
'tip' => (isset($options['tip']) ? $options['tip'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'class' => 'mt-2',
'labelClass' => 'mb-2 pb-2 border-bottom text-uppercase w-100'
));
} elseif ($options['type'] == "bool") {
echo Bootstrap::formCheckbox(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'checked' => $page->custom($field),
'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : ''),
'class' => 'mt-2',
'labelClass' => 'mb-2 pb-2 border-bottom text-uppercase w-100'
));
}
}
}
?>
</form>
<!-- Modal for Delete page --> <!-- Modal for Delete page -->
<div id="jsdeletePageModal" class="modal" tabindex="-1" role="dialog"> <div id="jsdeletePageModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
@ -462,8 +458,10 @@ foreach ($customFields as $field => $options) {
</script> </script>
</div> </div>
</div>
<!-- Modal for Media Manager --> <!-- Modal for Media Manager -->
<?php include(PATH_ADMIN_THEMES . 'booty/html/media.php'); ?> <?php include(PATH_ADMIN_THEMES . 'koblog/html/media.php'); ?>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
@ -489,11 +487,13 @@ foreach ($customFields as $field => $options) {
// Button switch // Button switch
$("#jsswitchButton").on("click", function() { $("#jsswitchButton").on("click", function() {
if ($(this).data("switch") == "publish") { if ($(this).data("switch") == "publish") {
$(this).html('<i class="fa fa-square switch-icon-draft"></i> <?php $L->p('Draft') ?>'); $(this).html('<?php $L->p('Draft') ?>');
$(this).data("switch", "draft"); $(this).data("switch", "draft");
$(this).attr('class', "ml-2 btn-outline-secondary btn");
} else { } else {
$(this).html('<i class="fa fa-square switch-icon-publish"></i> <?php $L->p('Publish') ?>'); $(this).html('<?php $L->p('Publish') ?>');
$(this).data("switch", "publish"); $(this).data("switch", "publish");
$(this).attr('class', "ml-2 btn-outline-success btn");
} }
}); });

663
bl-kernel/admin/views/new-content.php
View file

@ -39,310 +39,347 @@ echo Bootstrap::formInputHidden(array(
'value' => '' 'value' => ''
)); ));
?> ?>
<div class="row">
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div id="jseditorToolbar" class="mb-1"> <div class="mb-3 col-lg-6">
<div id="jseditorToolbarRight" class="btn-group btn-group-sm float-right" role="group" aria-label="Toolbar right"> <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#jsmediaManagerModal"><span class="fa fa-image"></span> <?php $L->p('Images') ?></button>
<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><span class="fa fa-image"></span> <?php $L->p('Images') ?></button> <span id="jsswitchButton" data-switch="publish" class="ml-2 btn-outline-success btn"><?php $L->p('Publish') ?></span>
<button type="button" class="btn btn-light" id="jsoptionsSidebar" style="z-index:30"><span class="fa fa-cog"></span> <?php $L->p('Options') ?></button> </div>
</div>
<div id="jseditorToolbarLeft"> <div class="col-lg-6 text-end">
<button id="jsbuttonSave" type="button" class="btn btn-sm btn-primary"><?php $L->p('Save') ?></button> <button id="jsbuttonPreview" type="button" class="btn btn-secondary"><?php $L->p('Preview') ?></button>
<button id="jsbuttonPreview" type="button" class="btn btn-sm btn-secondary"><?php $L->p('Preview') ?></button> <button type="button" class="btn btn-primary" id="jsbuttonSave"><?php echo $L->g('Save') ?></button>
<span id="jsbuttonSwitch" data-switch="publish" class="ml-2 text-secondary switch-button"><i class="fa fa-square switch-icon-publish"></i> <?php $L->p('Publish') ?></span>
</div> </div>
</div> </div>
<script>
$(document).ready(function() {
$("#jsoptionsSidebar").on("click", function() {
$("#jseditorSidebar").toggle();
$("#jsshadow").toggle();
});
$("#jsshadow").on("click", function() { <div class="row">
$("#jseditorSidebar").toggle();
$("#jsshadow").toggle();
}); <div class="col-lg-9">
}); <!-- Title -->
</script> <div class="form-group mb-2">
<input id="jstitle" name="title" type="text" dir="auto" class="form-control form-control-lg" value="" placeholder="<?php $L->p('Enter title') ?>">
</div>
<!-- Editor -->
<textarea id="jseditor" class="editable h-100 mb-1"></textarea>
<!-- Custom fields: BOTTOM -->
<?php
$customFields = $site->customFields();
foreach ($customFields as $field => $options) {
if (isset($options['position']) && ($options['position'] == 'bottom')) {
if ($options['type'] == "string") {
echo Bootstrap::formInputTextBlock(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'value' => (isset($options['default']) ? $options['default'] : ''),
'tip' => (isset($options['tip']) ? $options['tip'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'class' => 'mt-2',
'labelClass' => 'mb-0 pb-1 text-uppercase w-100'
));
} elseif ($options['type'] == "bool") {
echo Bootstrap::formCheckbox(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'checked' => (isset($options['checked']) ? true : false),
'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : ''),
'class' => 'mt-2',
'labelClass' => 'mb-0 pb-1 text-uppercase w-100'
));
}
}
}
?>
</form>
</div>
<!-- SIDEBAR OPTIONS --> <!-- SIDEBAR OPTIONS -->
<div id="jseditorSidebar"> <div class="col-lg-3">
<nav> <nav class="mb-2">
<div class="nav nav-tabs" id="nav-tab" role="tablist"> <div class="nav nav-pills" id="nav-tab" role="tablist">
<a class="nav-link active show" id="nav-general-tab" data-toggle="tab" href="#nav-general" role="tab" aria-controls="general"><?php $L->p('General') ?></a> <a class="nav-link active show" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general" role="tab" aria-controls="general"><?php $L->p('General') ?></a>
<a class="nav-link" id="nav-advanced-tab" data-toggle="tab" href="#nav-advanced" role="tab" aria-controls="advanced"><?php $L->p('Advanced') ?></a> <a class="nav-link" id="nav-advanced-tab" data-bs-toggle="tab" data-bs-target="#nav-advanced" role="tab" aria-controls="advanced"><?php $L->p('Advanced') ?></a>
<?php if (!empty($site->customFields())) : ?> <?php if (!empty($site->customFields())) : ?>
<a class="nav-link" id="nav-custom-tab" data-toggle="tab" href="#nav-custom" role="tab" aria-controls="custom"><?php $L->p('Custom') ?></a> <a class="nav-link" id="nav-custom-tab" data-bs-toggle="tab" data-bs-target="#nav-custom" role="tab" aria-controls="custom"><?php $L->p('Custom') ?></a>
<?php endif ?> <?php endif ?>
<a class="nav-link" id="nav-seo-tab" data-toggle="tab" href="#nav-seo" role="tab" aria-controls="seo"><?php $L->p('SEO') ?></a> <a class="nav-link" id="nav-seo-tab" data-bs-toggle="tab" data-bs-target="#nav-seo" role="tab" aria-controls="seo"><?php $L->p('SEO') ?></a>
</div> </div>
</nav> </nav>
<div class="tab-content pr-3 pl-3 pb-3"> <div class="card mb-2"><div class="card-body">
<div id="nav-general" class="tab-pane fade show active" role="tabpanel" aria-labelledby="general-tab"> <div class="tab-content pr-3 pl-3 pb-3">
<?php <div id="nav-general" class="tab-pane fade show active" role="tabpanel" aria-labelledby="general-tab">
// Category
echo Bootstrap::formSelectBlock(array(
'name' => 'category',
'label' => $L->g('Category'),
'selected' => '',
'class' => '',
'emptyOption' => '- ' . $L->g('Uncategorized') . ' -',
'options' => $categories->getKeyNameArray()
));
// Description
echo Bootstrap::formTextareaBlock(array(
'name' => 'description',
'label' => $L->g('Description'),
'selected' => '',
'class' => '',
'value' => '',
'rows' => 5,
'placeholder' => $L->get('this-field-can-help-describe-the-content')
));
?>
<!-- Cover Image -->
<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100"><?php $L->p('Cover Image') ?></label>
<div>
<img id="jscoverImagePreview" class="mx-auto d-block w-100" alt="Cover image preview" src="<?php echo HTML_PATH_CORE_IMG ?>default.svg" />
</div>
<div class="mt-2 text-center">
<button type="button" id="jsbuttonSelectCoverImage" class="btn btn-primary btn-sm"><?php echo $L->g('Select cover image') ?></button>
<button type="button" id="jsbuttonRemoveCoverImage" class="btn btn-secondary btn-sm"><?php echo $L->g('Remove cover image') ?></button>
</div>
<script>
$(document).ready(function() {
$("#jscoverImagePreview").on("click", function() {
openMediaManager();
});
$("#jsbuttonSelectCoverImage").on("click", function() {
openMediaManager();
});
$("#jsbuttonRemoveCoverImage").on("click", function() {
$("#jscoverImage").val('');
$("#jscoverImagePreview").attr('src', HTML_PATH_CORE_IMG + 'default.svg');
});
});
</script>
</div>
<div id="nav-advanced" class="tab-pane fade" role="tabpanel" aria-labelledby="advanced-tab">
<?php
// Date
echo Bootstrap::formInputTextBlock(array(
'name' => 'date',
'label' => $L->g('Date'),
'placeholder' => '',
'value' => Date::current(DB_DATE_FORMAT),
'tip' => $L->g('date-format-format')
));
// Type
echo Bootstrap::formSelectBlock(array(
'name' => 'typeSelector',
'label' => $L->g('Type'),
'selected' => '',
'options' => array(
'published' => '- ' . $L->g('Default') . ' -',
'sticky' => $L->g('Sticky'),
'static' => $L->g('Static')
),
'tip' => ''
));
// Position
echo Bootstrap::formInputTextBlock(array(
'name' => 'position',
'label' => $L->g('Position'),
'tip' => $L->g('Field used when ordering content by position'),
'value' => $pages->nextPositionNumber()
));
// Tags
echo Bootstrap::formInputTextBlock(array(
'name' => 'tags',
'label' => $L->g('Tags'),
'placeholder' => '',
'tip' => $L->g('Write the tags separated by comma')
));
// Parent
echo Bootstrap::formSelectBlock(array(
'name' => 'parent',
'label' => $L->g('Parent'),
'options' => array(),
'selected' => false,
'class' => '',
'tip' => $L->g('Start typing a page title to see a list of suggestions.'),
));
?>
<script>
$(document).ready(function() {
var parent = $("#jsparent").select2({
placeholder: "",
allowClear: true,
theme: "bootstrap4",
minimumInputLength: 2,
ajax: {
url: HTML_PATH_ADMIN_ROOT + "ajax/get-published",
data: function(params) {
var query = {
checkIsParent: true,
query: params.term
}
return query;
},
processResults: function(data) {
return data;
}
},
escapeMarkup: function(markup) {
return markup;
},
templateResult: function(data) {
var html = data.text;
if (data.type == "static") {
html += '<span class="badge badge-pill badge-light">' + data.type + '</span>';
}
return html;
}
});
});
</script>
<?php
// Template
echo Bootstrap::formInputTextBlock(array(
'name' => 'template',
'label' => $L->g('Template'),
'placeholder' => '',
'value' => '',
'tip' => $L->g('Write a template name to filter the page in the theme and change the style of the page.')
));
echo Bootstrap::formInputTextBlock(array(
'name' => 'externalCoverImage',
'label' => $L->g('External cover image'),
'placeholder' => "https://",
'value' => '',
'tip' => $L->g('Set a cover image from external URL, such as a CDN or some server dedicated for images.')
));
// Username
echo Bootstrap::formInputTextBlock(array(
'name' => '',
'label' => $L->g('Author'),
'placeholder' => '',
'value' => $login->username(),
'tip' => '',
'disabled' => true
));
?>
<script>
$(document).ready(function() {
// Changes in External cover image input
$("#jsexternalCoverImage").change(function() {
$("#jscoverImage").val($(this).val());
});
// Generate slug when the user type the title
$("#jstitle").keyup(function() {
var text = $(this).val();
var parent = $("#jsparent").val();
var currentKey = "";
var ajax = new koblogAjax();
var callBack = $("#jsslug");
ajax.generateSlug(text, parent, currentKey, callBack);
});
// Datepicker
$("#jsdate").datetimepicker({
format: DB_DATE_FORMAT
});
});
</script>
</div>
<?php if (!empty($site->customFields())) : ?>
<div id="nav-custom" class="tab-pane fade" role="tabpanel" aria-labelledby="custom-tab">
<?php <?php
$customFields = $site->customFields(); // Category
foreach ($customFields as $field => $options) { echo Bootstrap::formSelectBlock(array(
if (!isset($options['position'])) { 'name' => 'category',
if ($options['type'] == "string") { 'label' => $L->g('Category'),
echo Bootstrap::formInputTextBlock(array( 'selected' => '',
'name' => 'custom[' . $field . ']', 'class' => '',
'label' => (isset($options['label']) ? $options['label'] : ''), 'emptyOption' => '- ' . $L->g('Uncategorized') . ' -',
'value' => (isset($options['default']) ? $options['default'] : ''), 'options' => $categories->getKeyNameArray(),
'tip' => (isset($options['tip']) ? $options['tip'] : ''), 'mt' => 'mt-0'
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : '') ));
));
} elseif ($options['type'] == "bool") { // Tags
echo Bootstrap::formCheckbox(array( echo Bootstrap::formInputTextBlock(array(
'name' => 'custom[' . $field . ']', 'name' => 'tags',
'label' => (isset($options['label']) ? $options['label'] : ''), 'label' => $L->g('Tags'),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''), 'placeholder' => '',
'checked' => (isset($options['checked']) ? true : false), 'tip' => $L->g('Write the tags separated by comma')
'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : '') ));
));
// Description
echo Bootstrap::formTextareaBlock(array(
'name' => 'description',
'label' => $L->g('Description'),
'selected' => '',
'class' => '',
'value' => '',
'rows' => 5,
'placeholder' => $L->get('this-field-can-help-describe-the-content')
));
?>
<!-- Cover Image -->
<label class="mt-2 mb-0 pb-1 text-uppercase w-100"><?php $L->p('Cover Image') ?></label>
<div>
<img id="jscoverImagePreview" class="mx-auto d-block w-100" alt="Cover image preview" src="<?php echo HTML_PATH_CORE_IMG ?>default.svg" />
</div>
<div class="mt-2 text-center">
<button type="button" id="jsbuttonSelectCoverImage" class="btn btn-primary btn-sm"><?php echo $L->g('Select cover image') ?></button>
<button type="button" id="jsbuttonRemoveCoverImage" class="btn btn-secondary btn-sm"><?php echo $L->g('Remove cover image') ?></button>
</div>
<script>
$(document).ready(function() {
$("#jscoverImagePreview").on("click", function() {
openMediaManager();
});
$("#jsbuttonSelectCoverImage").on("click", function() {
openMediaManager();
});
$("#jsbuttonRemoveCoverImage").on("click", function() {
$("#jscoverImage").val('');
$("#jscoverImagePreview").attr('src', HTML_PATH_CORE_IMG + 'default.svg');
});
});
</script>
</div>
<div id="nav-advanced" class="tab-pane fade" role="tabpanel" aria-labelledby="advanced-tab">
<?php
// Date
echo Bootstrap::formInputTextBlock(array(
'name' => 'date',
'label' => $L->g('Date'),
'placeholder' => '',
'value' => Date::current(DB_DATE_FORMAT),
'tip' => $L->g('date-format-format'),
'mt' => 'mt-0'
));
// Type
echo Bootstrap::formSelectBlock(array(
'name' => 'typeSelector',
'label' => $L->g('Type'),
'selected' => '',
'options' => array(
'published' => '- ' . $L->g('Default') . ' -',
'sticky' => $L->g('Sticky'),
'static' => $L->g('Static')
),
'tip' => ''
));
// Position
echo Bootstrap::formInputTextBlock(array(
'name' => 'position',
'label' => $L->g('Position'),
'tip' => $L->g('Field used when ordering content by position'),
'value' => $pages->nextPositionNumber()
));
// Parent
echo Bootstrap::formSelectBlock(array(
'name' => 'parent',
'label' => $L->g('Parent'),
'options' => array(),
'selected' => false,
'class' => '',
'tip' => $L->g('Start typing a page title to see a list of suggestions.'),
));
?>
<script>
$(document).ready(function() {
var parent = $("#jsparent").select2({
placeholder: "",
allowClear: true,
theme: "bootstrap4",
minimumInputLength: 2,
ajax: {
url: HTML_PATH_ADMIN_ROOT + "ajax/get-published",
data: function(params) {
var query = {
checkIsParent: true,
query: params.term
}
return query;
},
processResults: function(data) {
return data;
}
},
escapeMarkup: function(markup) {
return markup;
},
templateResult: function(data) {
var html = data.text;
if (data.type == "static") {
html += '<span class="badge badge-pill badge-light">' + data.type + '</span>';
}
return html;
}
});
});
</script>
<?php
// Template
echo Bootstrap::formInputTextBlock(array(
'name' => 'template',
'label' => $L->g('Template'),
'placeholder' => '',
'value' => '',
'tip' => $L->g('Write a template name to filter the page in the theme and change the style of the page.')
));
echo Bootstrap::formInputTextBlock(array(
'name' => 'externalCoverImage',
'label' => $L->g('External cover image'),
'placeholder' => "https://",
'value' => '',
'tip' => $L->g('Set a cover image from external URL, such as a CDN or some server dedicated for images.')
));
// Username
echo Bootstrap::formInputTextBlock(array(
'name' => '',
'label' => $L->g('Author'),
'placeholder' => '',
'value' => $login->username(),
'tip' => '',
'disabled' => true
));
?>
<script>
$(document).ready(function() {
// Changes in External cover image input
$("#jsexternalCoverImage").change(function() {
$("#jscoverImage").val($(this).val());
});
// Generate slug when the user type the title
$("#jstitle").keyup(function() {
var text = $(this).val();
var parent = $("#jsparent").val();
var currentKey = "";
var ajax = new koblogAjax();
var callBack = $("#jsslug");
ajax.generateSlug(text, parent, currentKey, callBack);
});
// Datepicker
$("#jsdate").datetimepicker({
format: DB_DATE_FORMAT
});
});
</script>
</div>
<?php if (!empty($site->customFields())) : ?>
<div id="nav-custom" class="tab-pane fade" role="tabpanel" aria-labelledby="custom-tab">
<?php
$customFields = $site->customFields();
foreach ($customFields as $field => $options) {
if (!isset($options['position'])) {
if ($options['type'] == "string") {
echo Bootstrap::formInputTextBlock(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'value' => (isset($options['default']) ? $options['default'] : ''),
'tip' => (isset($options['tip']) ? $options['tip'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : '')
));
} elseif ($options['type'] == "bool") {
echo Bootstrap::formCheckbox(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'checked' => (isset($options['checked']) ? true : false),
'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : '')
));
}
} }
} }
} ?>
</div>
<?php endif ?>
<div id="nav-seo" class="tab-pane fade" role="tabpanel" aria-labelledby="seo-tab">
<?php
// Friendly URL
echo Bootstrap::formInputTextBlock(array(
'name' => 'slug',
'tip' => $L->g('URL associated with the content'),
'label' => $L->g('Friendly URL'),
'placeholder' => $L->g('Leave empty for autocomplete by Koblog.'),
'mt' => 'mt-0'
));
// Robots
echo Bootstrap::formCheckbox(array(
'name' => 'noindex',
'label' => 'Robots',
'labelForCheckbox' => $L->g('apply-code-noindex-code-to-this-page'),
'placeholder' => '',
'checked' => false,
'tip' => $L->g('This tells search engines not to show this page in their search results.')
));
// Robots
echo Bootstrap::formCheckbox(array(
'name' => 'nofollow',
'label' => '',
'labelForCheckbox' => $L->g('apply-code-nofollow-code-to-this-page'),
'placeholder' => '',
'checked' => false,
'tip' => $L->g('This tells search engines not to follow links on this page.')
));
// Robots
echo Bootstrap::formCheckbox(array(
'name' => 'noarchive',
'label' => '',
'labelForCheckbox' => $L->g('apply-code-noarchive-code-to-this-page'),
'placeholder' => '',
'checked' => false,
'tip' => $L->g('This tells search engines not to save a cached copy of this page.')
));
?> ?>
</div> </div>
<?php endif ?>
<div id="nav-seo" class="tab-pane fade" role="tabpanel" aria-labelledby="seo-tab">
<?php
// Friendly URL
echo Bootstrap::formInputTextBlock(array(
'name' => 'slug',
'tip' => $L->g('URL associated with the content'),
'label' => $L->g('Friendly URL'),
'placeholder' => $L->g('Leave empty for autocomplete by Koblog.')
));
// Robots
echo Bootstrap::formCheckbox(array(
'name' => 'noindex',
'label' => 'Robots',
'labelForCheckbox' => $L->g('apply-code-noindex-code-to-this-page'),
'placeholder' => '',
'checked' => false,
'tip' => $L->g('This tells search engines not to show this page in their search results.')
));
// Robots
echo Bootstrap::formCheckbox(array(
'name' => 'nofollow',
'label' => '',
'labelForCheckbox' => $L->g('apply-code-nofollow-code-to-this-page'),
'placeholder' => '',
'checked' => false,
'tip' => $L->g('This tells search engines not to follow links on this page.')
));
// Robots
echo Bootstrap::formCheckbox(array(
'name' => 'noarchive',
'label' => '',
'labelForCheckbox' => $L->g('apply-code-noarchive-code-to-this-page'),
'placeholder' => '',
'checked' => false,
'tip' => $L->g('This tells search engines not to save a cached copy of this page.')
));
?>
</div> </div>
</div> </div></div>
</div> </div>
<!-- Custom fields: TOP --> <!-- Custom fields: TOP -->
@ -358,7 +395,7 @@ foreach ($customFields as $field => $options) {
'tip' => (isset($options['tip']) ? $options['tip'] : ''), 'tip' => (isset($options['tip']) ? $options['tip'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''), 'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'class' => 'mb-2', 'class' => 'mb-2',
'labelClass' => 'mb-2 pb-2 border-bottom text-uppercase w-100' 'labelClass' => 'mb-0 pb-1 text-uppercase w-100'
)); ));
} elseif ($options['type'] == "bool") { } elseif ($options['type'] == "bool") {
@ -369,58 +406,18 @@ foreach ($customFields as $field => $options) {
'checked' => (isset($options['checked']) ? true : false), 'checked' => (isset($options['checked']) ? true : false),
'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : ''), 'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : ''),
'class' => 'mb-2', 'class' => 'mb-2',
'labelClass' => 'mb-2 pb-2 border-bottom text-uppercase w-100' 'labelClass' => 'mb-0 pb-1 text-uppercase w-100'
)); ));
} }
} }
} }
?> ?>
<!-- Title -->
<div id="jseditorTitle" class="form-group mb-1">
<input id="jstitle" name="title" type="text" dir="auto" class="form-control form-control-lg rounded-0" value="" placeholder="<?php $L->p('Enter title') ?>">
</div>
<!-- Editor -->
<textarea id="jseditor" class="editable h-100 mb-1"></textarea>
<!-- Custom fields: BOTTOM -->
<?php
$customFields = $site->customFields();
foreach ($customFields as $field => $options) {
if (isset($options['position']) && ($options['position'] == 'bottom')) {
if ($options['type'] == "string") {
echo Bootstrap::formInputTextBlock(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'value' => (isset($options['default']) ? $options['default'] : ''),
'tip' => (isset($options['tip']) ? $options['tip'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'class' => 'mt-2',
'labelClass' => 'mb-2 pb-2 border-bottom text-uppercase w-100'
));
} elseif ($options['type'] == "bool") {
echo Bootstrap::formCheckbox(array(
'name' => 'custom[' . $field . ']',
'label' => (isset($options['label']) ? $options['label'] : ''),
'placeholder' => (isset($options['placeholder']) ? $options['placeholder'] : ''),
'checked' => (isset($options['checked']) ? true : false),
'labelForCheckbox' => (isset($options['tip']) ? $options['tip'] : ''),
'class' => 'mt-2',
'labelClass' => 'mb-2 pb-2 border-bottom text-uppercase w-100'
));
}
}
}
?>
</form>
<!-- Modal for Media Manager --> <!-- Modal for Media Manager -->
<?php include(PATH_ADMIN_THEMES . 'koblog/html/media.php'); ?> <?php include(PATH_ADMIN_THEMES . 'koblog/html/media.php'); ?>
</div>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
@ -443,13 +440,15 @@ foreach ($customFields as $field => $options) {
} }
// Button switch // Button switch
$("#jsbuttonSwitch").on("click", function() { $("#jsswitchButton").on("click", function() {
if ($(this).data("switch") == "publish") { if ($(this).data("switch") == "publish") {
$(this).html('<i class="fa fa-square switch-icon-draft"></i> <?php $L->p('Draft') ?>'); $(this).html('<?php $L->p('Draft') ?>');
$(this).data("switch", "draft"); $(this).data("switch", "draft");
$(this).attr('class', "ml-2 btn-outline-secondary btn");
} else { } else {
$(this).html('<i class="fa fa-square switch-icon-publish"></i> <?php $L->p('Publish') ?>'); $(this).html('<?php $L->p('Publish') ?>');
$(this).data("switch", "publish"); $(this).data("switch", "publish");
$(this).attr('class', "ml-2 btn-outline-success btn");
} }
}); });