Improve UI when create or edit content
This commit is contained in:
Diego Najar
parent
ccdcba8699
commit
2317100a81
1
.gitignore
vendored
1
.gitignore
vendored
@ -14,3 +14,4 @@ bl-themes/editorial
|
||||
bl-themes/mediumish
|
||||
bl-themes/clean-blog
|
||||
bl-themes/grayscale
|
||||
bl-themes/massively
|
||||
|
||||
@ -84,6 +84,7 @@ code {
|
||||
/*
|
||||
LOGIN
|
||||
*/
|
||||
|
||||
body.login {
|
||||
background: rgb(255,255,255);
|
||||
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 53%);
|
||||
@ -140,7 +141,6 @@ body.login {
|
||||
/* Create a dashed line with a pattern */
|
||||
}
|
||||
|
||||
/* This selector overrides the points style on line charts. Points on line charts are actually just very short strokes. This allows you to customize even the point size in CSS */
|
||||
.ct-series-a .ct-point {
|
||||
/* Colour of your points */
|
||||
stroke: #4a90e2;
|
||||
@ -151,6 +151,7 @@ body.login {
|
||||
/*
|
||||
ALERT
|
||||
*/
|
||||
|
||||
#alert {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@ -176,6 +177,7 @@ body.login {
|
||||
/*
|
||||
SIDEBAR
|
||||
*/
|
||||
|
||||
div.sidebar .nav-item a {
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
@ -204,6 +206,7 @@ div.sidebar .nav-item span.oi {
|
||||
/*
|
||||
PLUGINS
|
||||
*/
|
||||
|
||||
.plugin-form label {
|
||||
display: block;
|
||||
margin-top: 1rem !important;
|
||||
@ -256,3 +259,63 @@ td.child {
|
||||
line-height: 1.5em;
|
||||
|
||||
}
|
||||
|
||||
#jseditorSidebar {
|
||||
display: none;
|
||||
height: calc(100% - 45px);
|
||||
width: 50%;
|
||||
max-width: 350px;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: 45px;
|
||||
right: 15px;
|
||||
background-color: #fff;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
#jseditorSidebar {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
right: 0;
|
||||
}
|
||||
#jseditorToolbarRight button {
|
||||
font-size: 0px !important;
|
||||
}
|
||||
#jseditorToolbarRight button span {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#jseditorSidebar nav {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
#jseditorSidebar nav a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#jseditorSidebar .nav-tabs .nav-link {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#jseditorSidebar .nav-link.active {
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid #ccc;
|
||||
}
|
||||
|
||||
#jsshadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(255,255,255,0.7);
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
@ -51,6 +51,9 @@
|
||||
echo '</script>'.PHP_EOL;
|
||||
?>
|
||||
|
||||
<!-- Overlay background -->
|
||||
<div id="jsshadow"></div>
|
||||
|
||||
<!-- Alert -->
|
||||
<?php include('html/alert.php'); ?>
|
||||
|
||||
|
||||
@ -96,7 +96,7 @@ EOF;
|
||||
{
|
||||
$title = $args['title'];
|
||||
return <<<EOF
|
||||
<h4 class="mt-4 mb-3 font-weight-normal">$title</h4>
|
||||
<h6 class="mt-4 mb-2 pb-2 border-bottom text-uppercase">$title</h6>
|
||||
EOF;
|
||||
}
|
||||
|
||||
@ -112,13 +112,15 @@ EOF;
|
||||
$class = $class.' '.$args['class'];
|
||||
}
|
||||
|
||||
$html = '<div class="form-group">';
|
||||
$disabled = empty($args['disabled'])?'':'disabled';
|
||||
|
||||
$html = '<div class="form-group m-0">';
|
||||
|
||||
if (isset($args['label'])) {
|
||||
$html .= '<label for="'.$id.'">'.$args['label'].'</label>';
|
||||
$html .= '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100" for="'.$id.'">'.$args['label'].'</label>';
|
||||
}
|
||||
|
||||
$html .= '<input type="text" value="'.$args['value'].'" class="'.$class.'" id="'.$id.'" name="'.$args['name'].'" placeholder="'.$args['placeholder'].'">';
|
||||
$html .= '<input type="text" value="'.$args['value'].'" class="'.$class.'" id="'.$id.'" name="'.$args['name'].'" placeholder="'.$args['placeholder'].'" '.$disabled.'>';
|
||||
|
||||
if (isset($args['tip'])) {
|
||||
$html .= '<small class="form-text text-muted">'.$args['tip'].'</small>';
|
||||
@ -190,9 +192,9 @@ EOF;
|
||||
$class = $class.' '.$args['class'];
|
||||
}
|
||||
|
||||
$html = '<div class="form-group">';
|
||||
$html = '<div class="form-group m-0">';
|
||||
if (!empty($args['label'])) {
|
||||
$html .= '<label for="'.$id.'">'.$args['label'].'</label>';
|
||||
$html .= '<label class="mt-4 mb-2 pb-2 border-bottom 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>';
|
||||
@ -267,7 +269,6 @@ EOF;
|
||||
|
||||
public static function formCheckbox($args)
|
||||
{
|
||||
$label = isset($args['label'])?$args['label']:'';
|
||||
$labelForCheckbox = isset($args['labelForCheckbox'])?$args['labelForCheckbox']:'';
|
||||
$placeholder = isset($args['placeholder'])?$args['placeholder']:'';
|
||||
$tip = isset($args['tip'])?$args['tip']:' ';
|
||||
@ -279,7 +280,7 @@ EOF;
|
||||
}
|
||||
$disabled = isset($args['disabled'])?'disabled':'';
|
||||
|
||||
$class = 'form-group row';
|
||||
$class = 'form-group';
|
||||
if (isset($args['class'])) {
|
||||
$class = $class.' '.$args['class'];
|
||||
}
|
||||
@ -289,17 +290,20 @@ EOF;
|
||||
$type = $args['type'];
|
||||
}
|
||||
|
||||
$label = '';
|
||||
if (!empty($args['label'])) {
|
||||
$label = '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100">'.$args['label'].'</label>';
|
||||
}
|
||||
|
||||
$checked = $args['checked']?'checked':'';
|
||||
|
||||
return <<<EOF
|
||||
<div class="$class">
|
||||
<label for="$id" class="col-sm-2">$label</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input name="$name" class="form-check-input" type="checkbox" id="$id" $checked>
|
||||
<label class="form-check-label" for="$id">$labelForCheckbox</label>
|
||||
<small class="form-text text-muted">$tip</small>
|
||||
</div>
|
||||
$label
|
||||
<div class="form-check">
|
||||
<input name="$name" class="form-check-input" type="checkbox" id="$id" $checked>
|
||||
<label class="form-check-label" for="$id">$labelForCheckbox</label>
|
||||
<small class="form-text text-muted">$tip</small>
|
||||
</div>
|
||||
</div>
|
||||
EOF;
|
||||
@ -353,7 +357,7 @@ EOF;
|
||||
$html = '<div class="form-group m-0">';
|
||||
|
||||
if (!empty($args['label'])) {
|
||||
$html .= '<label for="'.$id.'">'.$args['label'].'</label>';
|
||||
$html .= '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100" for="'.$id.'">'.$args['label'].'</label>';
|
||||
}
|
||||
|
||||
$html .= '<select id="'.$id.'" name="'.$args['name'].'" class="'.$class.'">';
|
||||
|
||||
@ -53,16 +53,13 @@ echo Bootstrap::formOpen(array(
|
||||
?>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
<div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><?php $L->p('Images') ?></button>
|
||||
<button type="button" class="btn btn-light" id="jscoverImageOpenModal" data-toggle="modal" data-target="#jscoverImageModal"><?php $L->p('Cover image') ?></button>
|
||||
<button type="button" class="btn btn-light" id="jscategoryOpenModal" data-toggle="modal" data-target="#jscategoryModal"><?php $L->p('Category') ?><span class="option"></span></button>
|
||||
<button type="button" class="btn btn-light" id="jsdescriptionOpenModal" data-toggle="modal" data-target="#jsdescriptionModal"><?php $L->p('Description') ?><span class="option"></span></button>
|
||||
<button type="button" class="btn btn-light" id="jsoptionsOpenModal" data-toggle="modal" data-target="#jsoptionsModal"><?php $L->p('More options') ?></button>
|
||||
<div id="jseditorToolbar">
|
||||
<div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><span class="oi oi-image"></span> <?php $L->p('Images') ?></button>
|
||||
<button type="button" class="btn btn-light" id="jsoptionsSidebar" style="z-index:30"><span class="oi oi-cog"></span> <?php $L->p('Options') ?></button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary" id="jsbuttonSave"><?php echo ($page->draft()?$L->g('Publish'):$L->g('Save')) ?></button>
|
||||
<?php if(!$page->draft()): ?>
|
||||
<button type="button" class="btn btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></button>
|
||||
@ -72,195 +69,95 @@ echo Bootstrap::formOpen(array(
|
||||
<?php endif; ?>
|
||||
<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-secondary"><?php $L->p('Cancel') ?></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="form-group mt-1 mb-1">
|
||||
<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="<?php echo $page->title() ?>" placeholder="<?php $L->p('Enter title') ?>">
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="jseditor" class="editable h-100" style=""><?php echo $page->contentRaw(false) ?></div>
|
||||
|
||||
<!-- Modal for Cover Image -->
|
||||
<div id="jscoverImageModal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?php $L->p('Cover Image') ?></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php
|
||||
$coverImage = $page->coverImage(false);
|
||||
$externalCoverImage = '';
|
||||
if (filter_var($coverImage, FILTER_VALIDATE_URL)) {
|
||||
$coverImage = '';
|
||||
$externalCoverImage = $page->coverImage(false);
|
||||
}
|
||||
?>
|
||||
|
||||
<div>
|
||||
<img id="jscoverImagePreview" style="width: 350px; height: 200px;" class="mx-auto d-block" alt="Cover image preview" src="<?php echo (empty($coverImage) ? HTML_PATH_ADMIN_THEME_IMG.'default.svg' : $page->coverImage() ) ?>" />
|
||||
</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>
|
||||
|
||||
<hr>
|
||||
|
||||
<?php
|
||||
echo Bootstrap::formTitle(array('title'=>$L->g('External Cover Image')));
|
||||
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'externalCoverImage',
|
||||
'placeholder'=>"https://",
|
||||
'value'=>$externalCoverImage,
|
||||
'tip'=>$L->g('Set a cover image from external URL, such as a CDN or some server dedicated for images.')
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#jsexternalCoverImage").change(function() {
|
||||
$("#jscoverImage").val( $(this).val() );
|
||||
$("#jsoptionsSidebar").on("click", function() {
|
||||
$("#jseditorSidebar").toggle();
|
||||
$("#jsshadow").toggle();
|
||||
});
|
||||
|
||||
$("#jscoverImagePreview").on("click", function() {
|
||||
openMediaManager();
|
||||
});
|
||||
|
||||
$("#jsbuttonSelectCoverImage").on("click", function() {
|
||||
openMediaManager();
|
||||
});
|
||||
|
||||
$("#jsbuttonRemoveCoverImage").on("click", function() {
|
||||
$("#jscoverImage").val('');
|
||||
$("#jscoverImagePreview").attr('src', HTML_PATH_ADMIN_THEME_IMG+'default.svg');
|
||||
$("#jsshadow").on("click", function() {
|
||||
$("#jseditorSidebar").toggle();
|
||||
$("#jsshadow").toggle();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Modal for Categories -->
|
||||
<div id="jscategoryModal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?php $L->p('Category') ?></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php
|
||||
echo Bootstrap::formSelectBlock(array(
|
||||
'name'=>'category',
|
||||
'label'=>'',
|
||||
'selected'=>$page->categoryKey(),
|
||||
'class'=>'',
|
||||
'emptyOption'=>'- '.$L->g('Uncategorized').' -',
|
||||
'options'=>$categories->getKeyNameArray()
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
|
||||
</div>
|
||||
<!-- SIDEBAR OPTIONS -->
|
||||
<div id="jseditorSidebar">
|
||||
<nav>
|
||||
<div class="nav nav-tabs" 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" 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-seo-tab" data-toggle="tab" href="#nav-seo" role="tab" aria-controls="seo"><?php $L->p('SEO') ?></a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
function setCategoryBox(value) {
|
||||
var selected = $("#jscategory option:selected");
|
||||
var value = selected.val().trim();
|
||||
if (value) {
|
||||
$("#jscategoryOpenModal").find("span.option").html(": "+selected.text());
|
||||
} else {
|
||||
$("#jscategoryOpenModal").find("span.option").html("");
|
||||
}
|
||||
}
|
||||
</nav>
|
||||
|
||||
// Set the current category selected
|
||||
setCategoryBox();
|
||||
|
||||
// When the user select the category update the category button
|
||||
$("#jscategory").on("change", function() {
|
||||
setCategoryBox();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Modal for Description -->
|
||||
<div id="jsdescriptionModal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?php $L->p('Description') ?></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php
|
||||
echo Bootstrap::formTextareaBlock(array(
|
||||
'name'=>'description',
|
||||
'label'=>'',
|
||||
'selected'=>'',
|
||||
'class'=>'',
|
||||
'value'=>$page->description(),
|
||||
'rows'=>3,
|
||||
'placeholder'=>$L->get('this-field-can-help-describe-the-content')
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
function setDescriptionBox(value) {
|
||||
var value = $("#jsdescription").val();
|
||||
if (value) {
|
||||
value = ": "+$.trim(value).substring(0, 30).split(" ").slice(0, -1).join(" ") + "...";
|
||||
}
|
||||
$("#jsdescriptionOpenModal").find("span.option").html(value);
|
||||
}
|
||||
|
||||
// Set the current description
|
||||
setDescriptionBox();
|
||||
|
||||
// When the user write the description update the description button
|
||||
$("#jsdescription").on("change", function() {
|
||||
setDescriptionBox();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Modal for More options -->
|
||||
<div id="jsoptionsModal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?php $L->p('More options') ?></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php
|
||||
// Username
|
||||
echo Bootstrap::formInputText(array(
|
||||
'name'=>'',
|
||||
'label'=>$L->g('Author'),
|
||||
'placeholder'=>'',
|
||||
'value'=>$page->username(),
|
||||
'tip'=>'',
|
||||
'disabled'=>true
|
||||
<div class="tab-content pr-3 pl-3">
|
||||
<div id="nav-general" class="tab-pane fade show active" role="tabpanel" aria-labelledby="general-tab">
|
||||
<?php
|
||||
// Category
|
||||
echo Bootstrap::formSelectBlock(array(
|
||||
'name'=>'category',
|
||||
'label'=>$L->g('Category'),
|
||||
'selected'=>$page->categoryKey(),
|
||||
'class'=>'',
|
||||
'emptyOption'=>'- '.$L->g('Uncategorized').' -',
|
||||
'options'=>$categories->getKeyNameArray()
|
||||
));
|
||||
|
||||
// Description
|
||||
echo Bootstrap::formTextareaBlock(array(
|
||||
'name'=>'description',
|
||||
'label'=>$L->g('Description'),
|
||||
'selected'=>'',
|
||||
'class'=>'',
|
||||
'value'=>$page->description(),
|
||||
'rows'=>3,
|
||||
'placeholder'=>$L->get('this-field-can-help-describe-the-content')
|
||||
));
|
||||
?>
|
||||
|
||||
<!-- Cover Image -->
|
||||
<?php
|
||||
$coverImage = $page->coverImage(false);
|
||||
$externalCoverImage = '';
|
||||
if (filter_var($coverImage, FILTER_VALIDATE_URL)) {
|
||||
$coverImage = '';
|
||||
$externalCoverImage = $page->coverImage(false);
|
||||
}
|
||||
?>
|
||||
<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 (empty($coverImage) ? HTML_PATH_ADMIN_THEME_IMG.'default.svg' : $page->coverImage() ) ?>" />
|
||||
</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_ADMIN_THEME_IMG+'default.svg');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div id="nav-advanced" class="tab-pane fade" role="tabpanel" aria-labelledby="advanced-tab">
|
||||
<?php
|
||||
// Date
|
||||
echo Bootstrap::formInputText(array(
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'date',
|
||||
'label'=>$L->g('Date'),
|
||||
'placeholder'=>'',
|
||||
@ -269,7 +166,7 @@ echo Bootstrap::formOpen(array(
|
||||
));
|
||||
|
||||
// Type
|
||||
echo Bootstrap::formSelect(array(
|
||||
echo Bootstrap::formSelectBlock(array(
|
||||
'name'=>'typeTMP',
|
||||
'label'=>$L->g('Type'),
|
||||
'selected'=>$page->type(),
|
||||
@ -281,6 +178,23 @@ echo Bootstrap::formOpen(array(
|
||||
'tip'=>''
|
||||
));
|
||||
|
||||
// Position
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'position',
|
||||
'label'=>$L->g('Position'),
|
||||
'tip'=>$L->g('Field used when ordering content by 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
|
||||
try {
|
||||
$parentKey = $page->parent();
|
||||
@ -289,7 +203,7 @@ echo Bootstrap::formOpen(array(
|
||||
} catch (Exception $e) {
|
||||
$parentValue = '';
|
||||
}
|
||||
echo Bootstrap::formInputText(array(
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'parentTMP',
|
||||
'label'=>$L->g('Parent'),
|
||||
'placeholder'=>'',
|
||||
@ -297,36 +211,95 @@ echo Bootstrap::formOpen(array(
|
||||
'value'=>$parentValue
|
||||
));
|
||||
|
||||
// Position
|
||||
echo Bootstrap::formInputText(array(
|
||||
'name'=>'position',
|
||||
'label'=>$L->g('Position'),
|
||||
'tip'=>$L->g('Field used when ordering content by position'),
|
||||
'value'=>$page->position()
|
||||
));
|
||||
|
||||
// Template
|
||||
echo Bootstrap::formInputText(array(
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'template',
|
||||
'label'=>$L->g('Template'),
|
||||
'placeholder'=>'',
|
||||
'tip'=>$L->g('Write a template name to filter the page in the theme and change the style of the page.'),
|
||||
'value'=>$page->template()
|
||||
'value'=>$page->template(),
|
||||
'tip'=>$L->g('Write a template name to filter the page in the theme and change the style of the page.')
|
||||
));
|
||||
|
||||
// Tags
|
||||
echo Bootstrap::formInputText(array(
|
||||
'name'=>'tags',
|
||||
'label'=>$L->g('Tags'),
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'externalCoverImage',
|
||||
'label'=>$L->g('External cover image'),
|
||||
'placeholder'=>"https://",
|
||||
'value'=>$externalCoverImage,
|
||||
'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'=>'',
|
||||
'tip'=>$L->g('Write the tags separated by comma'),
|
||||
'value'=>$page->tags()
|
||||
'value'=>$login->username(),
|
||||
'tip'=>'',
|
||||
'disabled'=>true
|
||||
));
|
||||
?>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Changes in External cover image input
|
||||
$("#jsexternalCoverImage").change(function() {
|
||||
$("#jscoverImage").val( $(this).val() );
|
||||
});
|
||||
|
||||
echo Bootstrap::formTitle(array('title'=>$L->g('SEO')));
|
||||
// Parent
|
||||
$("#jsparentTMP").change(function() {
|
||||
var parent = $("#jsparentTMP").val();
|
||||
if (parent.length===0) {
|
||||
$("#jsparent").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 bluditAjax();
|
||||
var callBack = $("#jsslug");
|
||||
ajax.generateSlug(text, parent, currentKey, callBack);
|
||||
});
|
||||
|
||||
// Datepicker
|
||||
$("#jsdate").datetimepicker({format:DB_DATE_FORMAT});
|
||||
|
||||
// Parent autocomplete
|
||||
var parentsXHR;
|
||||
var parentsList; // Keep the parent list returned to get the key by the title page
|
||||
$("#jsparentTMP").autoComplete({
|
||||
minChars: 1,
|
||||
source: function(term, response) {
|
||||
// Prevent call inmediatly another ajax request
|
||||
try { parentsXHR.abort(); } catch(e){}
|
||||
// Get the list of parent pages by title (term)
|
||||
parentsXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-parents", {query: term},
|
||||
function(data) {
|
||||
parentsList = data;
|
||||
term = term.toLowerCase();
|
||||
var matches = [];
|
||||
for (var title in data) {
|
||||
if (~title.toLowerCase().indexOf(term))
|
||||
matches.push(title);
|
||||
}
|
||||
response(matches);
|
||||
});
|
||||
},
|
||||
onSelect: function(event, term, item) {
|
||||
// parentsList = array( pageTitle => pageKey )
|
||||
var parentKey = parentsList[term];
|
||||
$("#jsparent").attr("value", parentKey);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div id="nav-seo" class="tab-pane fade" role="tabpanel" aria-labelledby="seo-tab">
|
||||
<?php
|
||||
// Friendly URL
|
||||
echo Bootstrap::formInputText(array(
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'slug',
|
||||
'tip'=>$L->g('URL associated with the content'),
|
||||
'label'=>$L->g('Friendly URL'),
|
||||
@ -334,16 +307,17 @@ echo Bootstrap::formOpen(array(
|
||||
'value'=>$page->slug()
|
||||
));
|
||||
|
||||
// Robots
|
||||
echo Bootstrap::formCheckbox(array(
|
||||
'name'=>'noindex',
|
||||
'label'=>'Robots',
|
||||
'labelForCheckbox'=>$L->g('apply-code-noindex-code-to-this-page'),
|
||||
'placeholder'=>'',
|
||||
'class'=>'mt-4',
|
||||
'checked'=>$page->noindex(),
|
||||
'tip'=>$L->g('This tells search engines not to show this page in their search results.')
|
||||
));
|
||||
|
||||
// Robots
|
||||
echo Bootstrap::formCheckbox(array(
|
||||
'name'=>'nofollow',
|
||||
'label'=>'',
|
||||
@ -353,6 +327,7 @@ echo Bootstrap::formOpen(array(
|
||||
'tip'=>$L->g('This tells search engines not to follow links on this page.')
|
||||
));
|
||||
|
||||
// Robots
|
||||
echo Bootstrap::formCheckbox(array(
|
||||
'name'=>'noarchive',
|
||||
'label'=>'',
|
||||
@ -362,58 +337,18 @@ echo Bootstrap::formOpen(array(
|
||||
'tip'=>$L->g('This tells search engines not to save a cached copy of this page.')
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Generate slug when the user type the title
|
||||
$("#jstitle").keyup(function() {
|
||||
var text = $(this).val();
|
||||
var parent = $("#jsparent").val();
|
||||
var currentKey = "";
|
||||
var ajax = new bluditAjax();
|
||||
var callBack = $("#jsslug");
|
||||
ajax.generateSlug(text, parent, currentKey, callBack);
|
||||
});
|
||||
|
||||
// Datepicker
|
||||
$("#jsdate").datetimepicker({format:DB_DATE_FORMAT});
|
||||
|
||||
// Parent autocomplete
|
||||
var parentsXHR;
|
||||
var parentsList; // Keep the parent list returned to get the key by the title page
|
||||
$("#jsparentTMP").autoComplete({
|
||||
minChars: 1,
|
||||
source: function(term, response) {
|
||||
// Prevent call inmediatly another ajax request
|
||||
try { parentsXHR.abort(); } catch(e){}
|
||||
// Get the list of parent pages by title (term)
|
||||
parentsXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-parents", {query: term},
|
||||
function(data) {
|
||||
parentsList = data;
|
||||
term = term.toLowerCase();
|
||||
var matches = [];
|
||||
for (var title in data) {
|
||||
if (~title.toLowerCase().indexOf(term))
|
||||
matches.push(title);
|
||||
}
|
||||
response(matches);
|
||||
});
|
||||
},
|
||||
onSelect: function(event, term, item) {
|
||||
// parentsList = array( pageTitle => pageKey )
|
||||
var parentKey = parentsList[term];
|
||||
$("#jsparent").attr("value", parentKey);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="form-group mt-1 mb-1">
|
||||
<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="<?php echo $page->title() ?>" placeholder="<?php $L->p('Enter title') ?>">
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="jseditor" class="editable h-100" style=""><?php echo $page->contentRaw(false) ?></div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Modal for Delete page -->
|
||||
@ -476,18 +411,13 @@ $(document).ready(function() {
|
||||
|
||||
// Autosave
|
||||
// Autosave works when the content of the page is bigger than 100 characters
|
||||
var currentContent = editorGetContent();
|
||||
setInterval(function() {
|
||||
var uuid = $("#jsuuid").val();
|
||||
var title = $("#jstitle").val();
|
||||
var content = editorGetContent();
|
||||
// Call autosave only when the user change the content
|
||||
if (currentContent!=content) {
|
||||
currentContent = content;
|
||||
var ajax = new bluditAjax();
|
||||
// showAlert is the function to display an alert defined in alert.php
|
||||
ajax.autosave(uuid, title, content, showAlert);
|
||||
}
|
||||
var ajax = new bluditAjax();
|
||||
// showAlert is the function to display an alert defined in alert.php
|
||||
ajax.autosave(uuid, title, content, showAlert);
|
||||
},1000*60*AUTOSAVE_INTERVAL);
|
||||
|
||||
});
|
||||
|
||||
@ -47,200 +47,97 @@ echo Bootstrap::formOpen(array(
|
||||
?>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
<div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><?php $L->p('Images') ?></button>
|
||||
<button type="button" class="btn btn-light" id="jscoverImageOpenModal" data-toggle="modal" data-target="#jscoverImageModal"><?php $L->p('Cover image') ?></button>
|
||||
<button type="button" class="btn btn-light" id="jscategoryOpenModal" data-toggle="modal" data-target="#jscategoryModal"><?php $L->p('Category') ?><span class="option"></span></button>
|
||||
<button type="button" class="btn btn-light" id="jsdescriptionOpenModal" data-toggle="modal" data-target="#jsdescriptionModal"><?php $L->p('Description') ?><span class="option"></span></button>
|
||||
<button type="button" class="btn btn-light" id="jsoptionsOpenModal" data-toggle="modal" data-target="#jsoptionsModal"><?php $L->p('More options') ?></button>
|
||||
<div id="jseditorToolbar">
|
||||
<div id="jseditorToolbarRight" class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><span class="oi oi-image"></span> <?php $L->p('Images') ?></button>
|
||||
<button type="button" class="btn btn-light" id="jsoptionsSidebar" style="z-index:30"><span class="oi oi-cog"></span> <?php $L->p('Options') ?></button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
|
||||
<div id="jseditorToolbarLeft" class="btn-group btn-group-sm" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary" id="jsbuttonSave"><?php $L->p('Publish') ?></button>
|
||||
<button type="button" class="btn btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></button>
|
||||
<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-secondary"><?php $L->p('Cancel') ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="form-group mt-1 mb-1">
|
||||
<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="" placeholder="<?php $L->p('Enter title') ?>">
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="jseditor" class="editable h-100 mb-1"></div>
|
||||
|
||||
<!-- Modal for Cover Image -->
|
||||
<div id="jscoverImageModal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?php $L->p('Cover Image') ?></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<img id="jscoverImagePreview" style="width: 350px; height: 200px;" class="mx-auto d-block" alt="Cover image preview" src="<?php echo HTML_PATH_ADMIN_THEME_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>
|
||||
|
||||
<hr>
|
||||
|
||||
<?php
|
||||
echo Bootstrap::formTitle(array('title'=>$L->g('External Cover Image')));
|
||||
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'externalCoverImage',
|
||||
'placeholder'=>"https://",
|
||||
'value'=>'',
|
||||
'tip'=>$L->g('Set a cover image from external URL, such as a CDN or some server dedicated for images.')
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#jsexternalCoverImage").change(function() {
|
||||
$("#jscoverImage").val( $(this).val() );
|
||||
$("#jsoptionsSidebar").on("click", function() {
|
||||
$("#jseditorSidebar").toggle();
|
||||
$("#jsshadow").toggle();
|
||||
});
|
||||
|
||||
$("#jscoverImagePreview").on("click", function() {
|
||||
openMediaManager();
|
||||
});
|
||||
|
||||
$("#jsbuttonSelectCoverImage").on("click", function() {
|
||||
openMediaManager();
|
||||
});
|
||||
|
||||
$("#jsbuttonRemoveCoverImage").on("click", function() {
|
||||
$("#jscoverImage").val('');
|
||||
$("#jscoverImagePreview").attr('src', HTML_PATH_ADMIN_THEME_IMG+'default.svg');
|
||||
$("#jsshadow").on("click", function() {
|
||||
$("#jseditorSidebar").toggle();
|
||||
$("#jsshadow").toggle();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Modal for Categories -->
|
||||
<div id="jscategoryModal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?php $L->p('Category') ?></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php
|
||||
echo Bootstrap::formSelectBlock(array(
|
||||
'name'=>'category',
|
||||
'label'=>'',
|
||||
'selected'=>'',
|
||||
'class'=>'',
|
||||
'emptyOption'=>'- '.$L->g('Uncategorized').' -',
|
||||
'options'=>$categories->getKeyNameArray()
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
|
||||
</div>
|
||||
<!-- SIDEBAR OPTIONS -->
|
||||
<div id="jseditorSidebar">
|
||||
<nav>
|
||||
<div class="nav nav-tabs" 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" 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-seo-tab" data-toggle="tab" href="#nav-seo" role="tab" aria-controls="seo"><?php $L->p('SEO') ?></a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
function setCategoryBox(value) {
|
||||
var selected = $("#jscategory option:selected");
|
||||
var value = selected.val().trim();
|
||||
if (value) {
|
||||
$("#jscategoryOpenModal").find("span.option").html(": "+selected.text());
|
||||
} else {
|
||||
$("#jscategoryOpenModal").find("span.option").html("");
|
||||
}
|
||||
}
|
||||
</nav>
|
||||
|
||||
// Set the current category selected
|
||||
setCategoryBox();
|
||||
|
||||
// When the user select the category update the category button
|
||||
$("#jscategory").on("change", function() {
|
||||
setCategoryBox();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Modal for Description -->
|
||||
<div id="jsdescriptionModal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?php $L->p('Description') ?></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php
|
||||
echo Bootstrap::formTextareaBlock(array(
|
||||
'name'=>'description',
|
||||
'label'=>'',
|
||||
'selected'=>'',
|
||||
'class'=>'',
|
||||
'value'=>'',
|
||||
'rows'=>3,
|
||||
'placeholder'=>$L->get('this-field-can-help-describe-the-content')
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
function setDescriptionBox(value) {
|
||||
var value = $("#jsdescription").val();
|
||||
if (value) {
|
||||
value = ": "+$.trim(value).substring(0, 30).split(" ").slice(0, -1).join(" ") + "...";
|
||||
}
|
||||
$("#jsdescriptionOpenModal").find("span.option").html(value);
|
||||
}
|
||||
|
||||
// Set the current description
|
||||
setDescriptionBox();
|
||||
|
||||
// When the user write the description update the description button
|
||||
$("#jsdescription").on("change", function() {
|
||||
setDescriptionBox();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Modal for More options -->
|
||||
<div id="jsoptionsModal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?php $L->p('More options') ?></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?php
|
||||
// Username
|
||||
echo Bootstrap::formInputText(array(
|
||||
'name'=>'',
|
||||
'label'=>$L->g('Author'),
|
||||
'placeholder'=>'',
|
||||
'value'=>$login->username(),
|
||||
'tip'=>'',
|
||||
'disabled'=>true
|
||||
<div class="tab-content pr-3 pl-3">
|
||||
<div id="nav-general" class="tab-pane fade show active" role="tabpanel" aria-labelledby="general-tab">
|
||||
<?php
|
||||
// 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'=>3,
|
||||
'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_ADMIN_THEME_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_ADMIN_THEME_IMG+'default.svg');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div id="nav-advanced" class="tab-pane fade" role="tabpanel" aria-labelledby="advanced-tab">
|
||||
<?php
|
||||
// Date
|
||||
echo Bootstrap::formInputText(array(
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'date',
|
||||
'label'=>$L->g('Date'),
|
||||
'placeholder'=>'',
|
||||
@ -249,7 +146,7 @@ echo Bootstrap::formOpen(array(
|
||||
));
|
||||
|
||||
// Type
|
||||
echo Bootstrap::formSelect(array(
|
||||
echo Bootstrap::formSelectBlock(array(
|
||||
'name'=>'typeTMP',
|
||||
'label'=>$L->g('Type'),
|
||||
'selected'=>'',
|
||||
@ -261,8 +158,24 @@ echo Bootstrap::formOpen(array(
|
||||
'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::formInputText(array(
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'parentTMP',
|
||||
'label'=>$L->g('Parent'),
|
||||
'placeholder'=>'',
|
||||
@ -270,16 +183,8 @@ echo Bootstrap::formOpen(array(
|
||||
'value'=>''
|
||||
));
|
||||
|
||||
// Position
|
||||
echo Bootstrap::formInputText(array(
|
||||
'name'=>'position',
|
||||
'label'=>$L->g('Position'),
|
||||
'tip'=>$L->g('Field used when ordering content by position'),
|
||||
'value'=>$pages->nextPositionNumber()
|
||||
));
|
||||
|
||||
// Template
|
||||
echo Bootstrap::formInputText(array(
|
||||
echo Bootstrap::formInputTextBlock(array(
|
||||
'name'=>'template',
|
||||
'label'=>$L->g('Template'),
|
||||
'placeholder'=>'',
|
||||
@ -287,34 +192,95 @@ echo Bootstrap::formOpen(array(
|
||||
'tip'=>$L->g('Write a template name to filter the page in the theme and change the style of the page.')
|
||||
));
|
||||
|
||||
// Tags
|
||||
echo Bootstrap::formInputText(array(
|
||||
'name'=>'tags',
|
||||
'label'=>$L->g('Tags'),
|
||||
'placeholder'=>'',
|
||||
'tip'=>$L->g('Write the tags separated by comma')
|
||||
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.')
|
||||
));
|
||||
|
||||
echo Bootstrap::formTitle(array('title'=>$L->g('SEO')));
|
||||
// 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 bluditAjax();
|
||||
var callBack = $("#jsslug");
|
||||
ajax.generateSlug(text, parent, currentKey, callBack);
|
||||
});
|
||||
|
||||
// Datepicker
|
||||
$("#jsdate").datetimepicker({format:DB_DATE_FORMAT});
|
||||
|
||||
// Parent autocomplete
|
||||
var parentsXHR;
|
||||
var parentsList; // Keep the parent list returned to get the key by the title page
|
||||
$("#jsparentTMP").autoComplete({
|
||||
minChars: 1,
|
||||
source: function(term, response) {
|
||||
// Prevent call inmediatly another ajax request
|
||||
try { parentsXHR.abort(); } catch(e){}
|
||||
// Get the list of parent pages by title (term)
|
||||
parentsXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-parents", {query: term},
|
||||
function(data) {
|
||||
parentsList = data;
|
||||
term = term.toLowerCase();
|
||||
var matches = [];
|
||||
for (var title in data) {
|
||||
if (~title.toLowerCase().indexOf(term))
|
||||
matches.push(title);
|
||||
}
|
||||
response(matches);
|
||||
});
|
||||
},
|
||||
onSelect: function(event, term, item) {
|
||||
// parentsList = array( pageTitle => pageKey )
|
||||
var parentKey = parentsList[term];
|
||||
$("#jsparent").attr("value", parentKey);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div id="nav-seo" class="tab-pane fade" role="tabpanel" aria-labelledby="seo-tab">
|
||||
<?php
|
||||
// Friendly URL
|
||||
echo Bootstrap::formInputText(array(
|
||||
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 Bludit.')
|
||||
));
|
||||
|
||||
// Robots
|
||||
echo Bootstrap::formCheckbox(array(
|
||||
'name'=>'noindex',
|
||||
'label'=>'Robots',
|
||||
'labelForCheckbox'=>$L->g('apply-code-noindex-code-to-this-page'),
|
||||
'placeholder'=>'',
|
||||
'class'=>'mt-4',
|
||||
'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'=>'',
|
||||
@ -324,6 +290,7 @@ echo Bootstrap::formOpen(array(
|
||||
'tip'=>$L->g('This tells search engines not to follow links on this page.')
|
||||
));
|
||||
|
||||
// Robots
|
||||
echo Bootstrap::formCheckbox(array(
|
||||
'name'=>'noarchive',
|
||||
'label'=>'',
|
||||
@ -333,58 +300,18 @@ echo Bootstrap::formOpen(array(
|
||||
'tip'=>$L->g('This tells search engines not to save a cached copy of this page.')
|
||||
));
|
||||
?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Generate slug when the user type the title
|
||||
$("#jstitle").keyup(function() {
|
||||
var text = $(this).val();
|
||||
var parent = $("#jsparent").val();
|
||||
var currentKey = "";
|
||||
var ajax = new bluditAjax();
|
||||
var callBack = $("#jsslug");
|
||||
ajax.generateSlug(text, parent, currentKey, callBack);
|
||||
});
|
||||
|
||||
// Datepicker
|
||||
$("#jsdate").datetimepicker({format:DB_DATE_FORMAT});
|
||||
|
||||
// Parent autocomplete
|
||||
var parentsXHR;
|
||||
var parentsList; // Keep the parent list returned to get the key by the title page
|
||||
$("#jsparentTMP").autoComplete({
|
||||
minChars: 1,
|
||||
source: function(term, response) {
|
||||
// Prevent call inmediatly another ajax request
|
||||
try { parentsXHR.abort(); } catch(e){}
|
||||
// Get the list of parent pages by title (term)
|
||||
parentsXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-parents", {query: term},
|
||||
function(data) {
|
||||
parentsList = data;
|
||||
term = term.toLowerCase();
|
||||
var matches = [];
|
||||
for (var title in data) {
|
||||
if (~title.toLowerCase().indexOf(term))
|
||||
matches.push(title);
|
||||
}
|
||||
response(matches);
|
||||
});
|
||||
},
|
||||
onSelect: function(event, term, item) {
|
||||
// parentsList = array( pageTitle => pageKey )
|
||||
var parentKey = parentsList[term];
|
||||
$("#jsparent").attr("value", parentKey);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div id="jseditorTitle" class="form-group mt-1 mb-1">
|
||||
<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="" placeholder="<?php $L->p('Enter title') ?>">
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="jseditor" class="editable h-100 mb-1"></div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Modal for Media Manager -->
|
||||
|
||||
@ -318,7 +318,7 @@
|
||||
"user": "User",
|
||||
"date-format-format": "Date format: <code>YYYY-MM-DD Hours:Minutes:Seconds<\/code>",
|
||||
"start-typing-a-page-title-to-see-a-list-of-suggestions": "Start typing a page title to see a list of suggestions.",
|
||||
"field-used-when-ordering-content-by-position": "Field used when ordering content by position",
|
||||
"field-used-when-ordering-content-by-position": "Field used when ordering content by position.",
|
||||
"write-a-template-name-to-filter-the-page-in-the-theme-and-change-the-style-of-the-page": "Write a template name to filter the page in the theme and change the style of the page.",
|
||||
"write-the-tags-separated-by-comma": "Write the tags separated by comma.",
|
||||
"apply-code-noindex-code-to-this-page": "Apply <code>noindex<\/code> to this page.",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user