r31k
/
bludit
2
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Improve UI when create or edit content

This commit is contained in:
Diego Najar 2018-10-30 16:12:44 +01:00
parent ccdcba8699
commit 2317100a81
7 changed files with 453 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -14,3 +14,4 @@ bl-themes/editorial
bl-themes/mediumish bl-themes/mediumish
bl-themes/clean-blog bl-themes/clean-blog
bl-themes/grayscale bl-themes/grayscale
bl-themes/massively

65
bl-kernel/admin/themes/booty/css/bludit.css
View File

@ -84,6 +84,7 @@ code {
/* /*
LOGIN LOGIN
*/ */
body.login { body.login {
background: rgb(255,255,255); background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 53%); 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 */ /* 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 { .ct-series-a .ct-point {
/* Colour of your points */ /* Colour of your points */
stroke: #4a90e2; stroke: #4a90e2;
@ -151,6 +151,7 @@ body.login {
/* /*
ALERT ALERT
*/ */
#alert { #alert {
display: none; display: none;
position: fixed; position: fixed;
@ -176,6 +177,7 @@ body.login {
/* /*
SIDEBAR SIDEBAR
*/ */
div.sidebar .nav-item a { div.sidebar .nav-item a {
padding-left:0; padding-left:0;
padding-right:0; padding-right:0;
@ -204,6 +206,7 @@ div.sidebar .nav-item span.oi {
/* /*
PLUGINS PLUGINS
*/ */
.plugin-form label { .plugin-form label {
display: block; display: block;
margin-top: 1rem !important; margin-top: 1rem !important;
@ -256,3 +259,63 @@ td.child {
line-height: 1.5em; 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;
}

3
bl-kernel/admin/themes/booty/index.php
View File

@ -51,6 +51,9 @@
echo '</script>'.PHP_EOL; echo '</script>'.PHP_EOL;
?> ?>
<!-- Overlay background -->
<div id="jsshadow"></div>
<!-- Alert --> <!-- Alert -->
<?php include('html/alert.php'); ?> <?php include('html/alert.php'); ?>

28
bl-kernel/admin/themes/booty/init.php
View File

@ -96,7 +96,7 @@ EOF;
{ {
$title = $args['title']; $title = $args['title'];
return <<<EOF 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; EOF;
} }
@ -112,13 +112,15 @@ EOF;
$class = $class.' '.$args['class']; $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'])) { 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'])) { if (isset($args['tip'])) {
$html .= '<small class="form-text text-muted">'.$args['tip'].'</small>'; $html .= '<small class="form-text text-muted">'.$args['tip'].'</small>';
@ -190,9 +192,9 @@ EOF;
$class = $class.' '.$args['class']; $class = $class.' '.$args['class'];
} }
$html = '<div class="form-group">'; $html = '<div class="form-group m-0">';
if (!empty($args['label'])) { 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>'; $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) public static function formCheckbox($args)
{ {
$label = isset($args['label'])?$args['label']:'';
$labelForCheckbox = isset($args['labelForCheckbox'])?$args['labelForCheckbox']:''; $labelForCheckbox = isset($args['labelForCheckbox'])?$args['labelForCheckbox']:'';
$placeholder = isset($args['placeholder'])?$args['placeholder']:''; $placeholder = isset($args['placeholder'])?$args['placeholder']:'';
$tip = isset($args['tip'])?$args['tip']:'&nbsp;'; $tip = isset($args['tip'])?$args['tip']:'&nbsp;';
@ -279,7 +280,7 @@ EOF;
} }
$disabled = isset($args['disabled'])?'disabled':''; $disabled = isset($args['disabled'])?'disabled':'';
$class = 'form-group row'; $class = 'form-group';
if (isset($args['class'])) { if (isset($args['class'])) {
$class = $class.' '.$args['class']; $class = $class.' '.$args['class'];
} }
@ -289,19 +290,22 @@ EOF;
$type = $args['type']; $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':''; $checked = $args['checked']?'checked':'';
return <<<EOF return <<<EOF
<div class="$class"> <div class="$class">
<label for="$id" class="col-sm-2">$label</label> $label
<div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<input name="$name" class="form-check-input" type="checkbox" id="$id" $checked> <input name="$name" class="form-check-input" type="checkbox" id="$id" $checked>
<label class="form-check-label" for="$id">$labelForCheckbox</label> <label class="form-check-label" for="$id">$labelForCheckbox</label>
<small class="form-text text-muted">$tip</small> <small class="form-text text-muted">$tip</small>
</div> </div>
</div> </div>
</div>
EOF; EOF;
} }
@ -353,7 +357,7 @@ EOF;
$html = '<div class="form-group m-0">'; $html = '<div class="form-group m-0">';
if (!empty($args['label'])) { 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.'">'; $html .= '<select id="'.$id.'" name="'.$args['name'].'" class="'.$class.'">';

386
bl-kernel/admin/views/edit-content.php
View File

@ -53,16 +53,13 @@ echo Bootstrap::formOpen(array(
?> ?>
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div> <div id="jseditorToolbar">
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example"> <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"><?php $L->p('Images') ?></button> <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="jscoverImageOpenModal" data-toggle="modal" data-target="#jscoverImageModal"><?php $L->p('Cover image') ?></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>
<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> </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> <button type="button" class="btn btn-primary" id="jsbuttonSave"><?php echo ($page->draft()?$L->g('Publish'):$L->g('Save')) ?></button>
<?php if(!$page->draft()): ?> <?php if(!$page->draft()): ?>
<button type="button" class="btn btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></button> <button type="button" class="btn btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></button>
@ -72,24 +69,58 @@ echo Bootstrap::formOpen(array(
<?php endif; ?> <?php endif; ?>
<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-secondary"><?php $L->p('Cancel') ?></a> <a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-secondary"><?php $L->p('Cancel') ?></a>
</div> </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> </div>
<script>
$(document).ready(function() {
$("#jsoptionsSidebar").on("click", function() {
$("#jseditorSidebar").toggle();
$("#jsshadow").toggle();
});
<!-- Editor --> $("#jsshadow").on("click", function() {
<div id="jseditor" class="editable h-100" style=""><?php echo $page->contentRaw(false) ?></div> $("#jseditorSidebar").toggle();
$("#jsshadow").toggle();
});
});
</script>
<!-- Modal for Cover Image --> <!-- SIDEBAR OPTIONS -->
<div id="jscoverImageModal" class="modal" tabindex="-1" role="dialog"> <div id="jseditorSidebar">
<div class="modal-dialog"> <nav>
<div class="modal-content"> <div class="nav nav-tabs" id="nav-tab" role="tablist">
<div class="modal-header"> <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>
<h5 class="modal-title"><?php $L->p('Cover Image') ?></h5> <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>
<div class="modal-body"> </nav>
<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 <?php
$coverImage = $page->coverImage(false); $coverImage = $page->coverImage(false);
$externalCoverImage = ''; $externalCoverImage = '';
@ -98,39 +129,16 @@ echo Bootstrap::formOpen(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>
<div> <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() ) ?>" /> <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>
<div class="mt-2 text-center"> <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="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> <button type="button" id="jsbuttonRemoveCoverImage" class="btn btn-secondary btn-sm"><?php echo $L->g('Remove cover image') ?></button>
</div> </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() { $(document).ready(function() {
$("#jsexternalCoverImage").change(function() {
$("#jscoverImage").val( $(this).val() );
});
$("#jscoverImagePreview").on("click", function() { $("#jscoverImagePreview").on("click", function() {
openMediaManager(); openMediaManager();
}); });
@ -146,121 +154,10 @@ echo Bootstrap::formOpen(array(
}); });
</script> </script>
</div> </div>
<div id="nav-advanced" class="tab-pane fade" role="tabpanel" aria-labelledby="advanced-tab">
<!-- 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 <?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>
</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("");
}
}
// 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
));
// Date // Date
echo Bootstrap::formInputText(array( echo Bootstrap::formInputTextBlock(array(
'name'=>'date', 'name'=>'date',
'label'=>$L->g('Date'), 'label'=>$L->g('Date'),
'placeholder'=>'', 'placeholder'=>'',
@ -269,7 +166,7 @@ echo Bootstrap::formOpen(array(
)); ));
// Type // Type
echo Bootstrap::formSelect(array( echo Bootstrap::formSelectBlock(array(
'name'=>'typeTMP', 'name'=>'typeTMP',
'label'=>$L->g('Type'), 'label'=>$L->g('Type'),
'selected'=>$page->type(), 'selected'=>$page->type(),
@ -281,6 +178,23 @@ echo Bootstrap::formOpen(array(
'tip'=>'' '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 // Parent
try { try {
$parentKey = $page->parent(); $parentKey = $page->parent();
@ -289,7 +203,7 @@ echo Bootstrap::formOpen(array(
} catch (Exception $e) { } catch (Exception $e) {
$parentValue = ''; $parentValue = '';
} }
echo Bootstrap::formInputText(array( echo Bootstrap::formInputTextBlock(array(
'name'=>'parentTMP', 'name'=>'parentTMP',
'label'=>$L->g('Parent'), 'label'=>$L->g('Parent'),
'placeholder'=>'', 'placeholder'=>'',
@ -297,79 +211,48 @@ echo Bootstrap::formOpen(array(
'value'=>$parentValue '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 // Template
echo Bootstrap::formInputText(array( echo Bootstrap::formInputTextBlock(array(
'name'=>'template', 'name'=>'template',
'label'=>$L->g('Template'), 'label'=>$L->g('Template'),
'placeholder'=>'', '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::formInputTextBlock(array(
echo Bootstrap::formInputText(array( 'name'=>'externalCoverImage',
'name'=>'tags', 'label'=>$L->g('External cover image'),
'label'=>$L->g('Tags'), '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'=>'', 'placeholder'=>'',
'tip'=>$L->g('Write the tags separated by comma'), 'value'=>$login->username(),
'value'=>$page->tags() 'tip'=>'',
)); 'disabled'=>true
echo Bootstrap::formTitle(array('title'=>$L->g('SEO')));
// Friendly URL
echo Bootstrap::formInputText(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.'),
'value'=>$page->slug()
));
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.')
));
echo Bootstrap::formCheckbox(array(
'name'=>'nofollow',
'label'=>'',
'labelForCheckbox'=>$L->g('apply-code-nofollow-code-to-this-page'),
'placeholder'=>'',
'checked'=>$page->nofollow(),
'tip'=>$L->g('This tells search engines not to follow links on this page.')
));
echo Bootstrap::formCheckbox(array(
'name'=>'noarchive',
'label'=>'',
'labelForCheckbox'=>$L->g('apply-code-noarchive-code-to-this-page'),
'placeholder'=>'',
'checked'=>$page->noarchive(),
'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> <script>
$(document).ready(function() { $(document).ready(function() {
// Changes in External cover image input
$("#jsexternalCoverImage").change(function() {
$("#jscoverImage").val( $(this).val() );
});
// Parent
$("#jsparentTMP").change(function() {
var parent = $("#jsparentTMP").val();
if (parent.length===0) {
$("#jsparent").val("");
}
});
// Generate slug when the user type the title // Generate slug when the user type the title
$("#jstitle").keyup(function() { $("#jstitle").keyup(function() {
var text = $(this).val(); var text = $(this).val();
@ -413,6 +296,58 @@ echo Bootstrap::formOpen(array(
}); });
</script> </script>
</div> </div>
<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 Bludit.'),
'value'=>$page->slug()
));
// Robots
echo Bootstrap::formCheckbox(array(
'name'=>'noindex',
'label'=>'Robots',
'labelForCheckbox'=>$L->g('apply-code-noindex-code-to-this-page'),
'placeholder'=>'',
'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'=>'',
'labelForCheckbox'=>$L->g('apply-code-nofollow-code-to-this-page'),
'placeholder'=>'',
'checked'=>$page->nofollow(),
'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'=>$page->noarchive(),
'tip'=>$L->g('This tells search engines not to save a cached copy of this page.')
));
?>
</div>
</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>
</form> </form>
@ -476,18 +411,13 @@ $(document).ready(function() {
// Autosave // Autosave
// Autosave works when the content of the page is bigger than 100 characters // Autosave works when the content of the page is bigger than 100 characters
var currentContent = editorGetContent();
setInterval(function() { setInterval(function() {
var uuid = $("#jsuuid").val(); var uuid = $("#jsuuid").val();
var title = $("#jstitle").val(); var title = $("#jstitle").val();
var content = editorGetContent(); var content = editorGetContent();
// Call autosave only when the user change the content
if (currentContent!=content) {
currentContent = content;
var ajax = new bluditAjax(); var ajax = new bluditAjax();
// showAlert is the function to display an alert defined in alert.php // showAlert is the function to display an alert defined in alert.php
ajax.autosave(uuid, title, content, showAlert); ajax.autosave(uuid, title, content, showAlert);
}
},1000*60*AUTOSAVE_INTERVAL); },1000*60*AUTOSAVE_INTERVAL);
}); });

359
bl-kernel/admin/views/new-content.php
View File

@ -47,70 +47,78 @@ echo Bootstrap::formOpen(array(
?> ?>
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div> <div id="jseditorToolbar">
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example"> <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"><?php $L->p('Images') ?></button> <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="jscoverImageOpenModal" data-toggle="modal" data-target="#jscoverImageModal"><?php $L->p('Cover image') ?></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>
<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> </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-primary" id="jsbuttonSave"><?php $L->p('Publish') ?></button>
<button type="button" class="btn btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></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> <a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-secondary"><?php $L->p('Cancel') ?></a>
</div> </div>
</div> </div>
<script>
$(document).ready(function() {
$("#jsoptionsSidebar").on("click", function() {
$("#jseditorSidebar").toggle();
$("#jsshadow").toggle();
});
<!-- Title --> $("#jsshadow").on("click", function() {
<div class="form-group mt-1 mb-1"> $("#jseditorSidebar").toggle();
<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="" placeholder="<?php $L->p('Enter title') ?>"> $("#jsshadow").toggle();
});
});
</script>
<!-- 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>
</nav>
<!-- Editor --> <div class="tab-content pr-3 pl-3">
<div id="jseditor" class="editable h-100 mb-1"></div> <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()
));
<!-- Modal for Cover Image --> // Description
<div id="jscoverImageModal" class="modal" tabindex="-1" role="dialog"> echo Bootstrap::formTextareaBlock(array(
<div class="modal-dialog"> 'name'=>'description',
<div class="modal-content"> 'label'=>$L->g('Description'),
<div class="modal-header"> 'selected'=>'',
<h5 class="modal-title"><?php $L->p('Cover Image') ?></h5> 'class'=>'',
</div> 'value'=>'',
<div class="modal-body"> '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> <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" /> <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>
<div class="mt-2 text-center"> <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="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> <button type="button" id="jsbuttonRemoveCoverImage" class="btn btn-secondary btn-sm"><?php echo $L->g('Remove cover image') ?></button>
</div> </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() { $(document).ready(function() {
$("#jsexternalCoverImage").change(function() {
$("#jscoverImage").val( $(this).val() );
});
$("#jscoverImagePreview").on("click", function() { $("#jscoverImagePreview").on("click", function() {
openMediaManager(); openMediaManager();
}); });
@ -126,121 +134,10 @@ echo Bootstrap::formOpen(array(
}); });
</script> </script>
</div> </div>
<div id="nav-advanced" class="tab-pane fade" role="tabpanel" aria-labelledby="advanced-tab">
<!-- 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 <?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>
</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("");
}
}
// 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
));
// Date // Date
echo Bootstrap::formInputText(array( echo Bootstrap::formInputTextBlock(array(
'name'=>'date', 'name'=>'date',
'label'=>$L->g('Date'), 'label'=>$L->g('Date'),
'placeholder'=>'', 'placeholder'=>'',
@ -249,7 +146,7 @@ echo Bootstrap::formOpen(array(
)); ));
// Type // Type
echo Bootstrap::formSelect(array( echo Bootstrap::formSelectBlock(array(
'name'=>'typeTMP', 'name'=>'typeTMP',
'label'=>$L->g('Type'), 'label'=>$L->g('Type'),
'selected'=>'', 'selected'=>'',
@ -261,8 +158,24 @@ echo Bootstrap::formOpen(array(
'tip'=>'' '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 // Parent
echo Bootstrap::formInputText(array( echo Bootstrap::formInputTextBlock(array(
'name'=>'parentTMP', 'name'=>'parentTMP',
'label'=>$L->g('Parent'), 'label'=>$L->g('Parent'),
'placeholder'=>'', 'placeholder'=>'',
@ -270,16 +183,8 @@ echo Bootstrap::formOpen(array(
'value'=>'' '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 // Template
echo Bootstrap::formInputText(array( echo Bootstrap::formInputTextBlock(array(
'name'=>'template', 'name'=>'template',
'label'=>$L->g('Template'), 'label'=>$L->g('Template'),
'placeholder'=>'', 'placeholder'=>'',
@ -287,60 +192,31 @@ 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.') 'tip'=>$L->g('Write a template name to filter the page in the theme and change the style of the page.')
)); ));
// Tags echo Bootstrap::formInputTextBlock(array(
echo Bootstrap::formInputText(array( 'name'=>'externalCoverImage',
'name'=>'tags', 'label'=>$L->g('External cover image'),
'label'=>$L->g('Tags'), 'placeholder'=>"https://",
'placeholder'=>'', 'value'=>'',
'tip'=>$L->g('Write the tags separated by comma') '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(
// Friendly URL 'name'=>'',
echo Bootstrap::formInputText(array( 'label'=>$L->g('Author'),
'name'=>'slug',
'tip'=>$L->g('URL associated with the content'),
'label'=>$L->g('Friendly URL'),
'placeholder'=>$L->g('Leave empty for autocomplete by Bludit.')
));
echo Bootstrap::formCheckbox(array(
'name'=>'noindex',
'label'=>'Robots',
'labelForCheckbox'=>$L->g('apply-code-noindex-code-to-this-page'),
'placeholder'=>'', 'placeholder'=>'',
'class'=>'mt-4', 'value'=>$login->username(),
'checked'=>false, 'tip'=>'',
'tip'=>$L->g('This tells search engines not to show this page in their search results.') 'disabled'=>true
));
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.')
));
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 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() { $(document).ready(function() {
// Changes in External cover image input
$("#jsexternalCoverImage").change(function() {
$("#jscoverImage").val( $(this).val() );
});
// Generate slug when the user type the title // Generate slug when the user type the title
$("#jstitle").keyup(function() { $("#jstitle").keyup(function() {
var text = $(this).val(); var text = $(this).val();
@ -384,6 +260,57 @@ echo Bootstrap::formOpen(array(
}); });
</script> </script>
</div> </div>
<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 Bludit.')
));
// 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>
<!-- 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> </form>

2
bl-languages/en.json
View File

@ -318,7 +318,7 @@
"user": "User", "user": "User",
"date-format-format": "Date format: <code>YYYY-MM-DD Hours:Minutes:Seconds<\/code>", "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.", "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-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.", "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.", "apply-code-noindex-code-to-this-page": "Apply <code>noindex<\/code> to this page.",