Cover image improves

This commit is contained in:
Diego Najar 2018-05-08 23:25:18 +02:00
parent eb6966723d
commit 8d63b4d84d
8 changed files with 105 additions and 42 deletions

View File

@ -44,7 +44,11 @@ $amountOfPages = count($listOfFilesByPage);
<h3 class="mt-4 mb-3">Manage</h3> <h3 class="mt-4 mb-3">Manage</h3>
<!-- Table for list files --> <!-- Table for list files -->
<table id="jsbluditMediaTable" class="table">There are not images.</table> <table id="jsbluditMediaTable" class="table">
<tr>
<td>There are not images.</td>
</tr>
</table>
<!-- Paginator --> <!-- Paginator -->
<nav> <nav>
@ -69,11 +73,11 @@ echo 'var preLoadFiles = '.json_encode($preLoadFiles).';';
?> ?>
function openMediaManager() { function openMediaManager() {
$('#jsbluditMediaModal').modal('show') $('#jsbluditMediaModal').modal('show');
} }
function closeMediaManager() { function closeMediaManager() {
$('#jsbluditMediaModal').modal('hide') $('#jsbluditMediaModal').modal('hide');
} }
// Remove all files from the table // Remove all files from the table
@ -90,10 +94,11 @@ function displayFiles(files) {
tableRow = '<tr id="js'+filename+'">'+ tableRow = '<tr id="js'+filename+'">'+
'<td style="width:80px"><img class="img-thumbnail" alt="200x200" src="<?php echo HTML_PATH_UPLOADS_THUMBNAILS ?>'+filename+'" style="width: 50px; height: 50px;"></td>'+ '<td style="width:80px"><img class="img-thumbnail" alt="200x200" src="<?php echo HTML_PATH_UPLOADS_THUMBNAILS ?>'+filename+'" style="width: 50px; height: 50px;"></td>'+
'<td class="information">'+ '<td class="information">'+
'<div>'+filename+'</div>'+ '<div class="pb-2">'+filename+'</div>'+
'<div>'+ '<div>'+
'<button onClick="editorInsertMedia(\''+filename+'\'); closeMediaManager();" type="button" class="btn btn-link p-0 mr-2">Insert</button>'+ '<button onClick="editorInsertMedia(\''+filename+'\'); closeMediaManager();" type="button" class="btn btn-primary btn-sm mr-2">Insert</button>'+
'<button onClick="deleteMedia(\''+filename+'\')" type="button" class="btn btn-link p-0 mr-2">Delete</button>'+ '<button onClick="setCoverImage(\''+filename+'\'); closeMediaManager();" type="button" class="btn btn-primary btn-sm mr-2">Set as cover image</button>'+
'<button onClick="deleteMedia(\''+filename+'\')" type="button" class="btn btn-sm float-right">Delete</button>'+
'</div>'+ '</div>'+
'</td>'+ '</td>'+
'</tr>'; '</tr>';
@ -124,6 +129,11 @@ function deleteMedia(filename) {
}); });
} }
function setCoverImage(filename) {
$("#jscoverImage").val(filename);
$("#jscoverImagePreview").attr("src", HTML_PATH_UPLOADS_THUMBNAILS+filename);
}
$(document).ready(function() { $(document).ready(function() {
// Display the files preloaded for the first time // Display the files preloaded for the first time
displayFiles(preLoadFiles); displayFiles(preLoadFiles);
@ -154,7 +164,7 @@ $(document).ready(function() {
return xhr; return xhr;
} }
}).done(function() { }).done(function() {
// Get the files of the first page, this include the uploaded files // Get the files of the first page, this include the files uploaded
getFiles(1); getFiles(1);
}); });
}); });

View File

@ -145,10 +145,10 @@ function table($status) {
<a class="nav-link" id="sticky-tab" data-toggle="tab" href="#sticky" role="tab">Sticky</a> <a class="nav-link" id="sticky-tab" data-toggle="tab" href="#sticky" role="tab">Sticky</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="scheduled-tab" data-toggle="tab" href="#scheduled" role="tab">Scheduled</a> <a class="nav-link" id="scheduled-tab" data-toggle="tab" href="#scheduled" role="tab">Schedule <?php if (count($scheduled)>0) { echo '<span class="badge badge-danger">'.count($scheduled).'</span>'; } ?></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="draft-tab" data-toggle="tab" href="#draft" role="tab">Draft</a> <a class="nav-link" id="draft-tab" data-toggle="tab" href="#draft" role="tab">Draft <?php if (count($drafts)>0) { echo '<span class="badge badge-danger">'.count($drafts).'</span>'; } ?></a>
</li> </li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">

View File

@ -31,7 +31,7 @@
// UUID // UUID
echo Bootstrap::formInputHidden(array( echo Bootstrap::formInputHidden(array(
'name'=>'uuid', 'name'=>'uuid',
'value'=>$dbPages->generateUUID() 'value'=>$page->uuid()
)); ));
// Status = published, draft, sticky, static // Status = published, draft, sticky, static
@ -45,6 +45,12 @@
'name'=>'key', 'name'=>'key',
'value'=>$page->key() 'value'=>$page->key()
)); ));
// Cover image
echo Bootstrap::formInputHidden(array(
'name'=>'coverImage',
'value'=>$page->coverImage()
));
?> ?>
<!-- TABS CONTENT --> <!-- TABS CONTENT -->
@ -65,8 +71,8 @@
</div> </div>
<div class="form-group mt-2"> <div class="form-group mt-2">
<button type="submit" class="btn btn-primary">Save</button> <button id="jsbuttonSave" type="submit" class="btn btn-primary"><?php echo $page->draft()?$L->g('Publish'):$L->g('Save') ?></button>
<button type="button" class="btn" id="jssaveAsDraft">Save as draft</button> <button id="jsbuttonDraft" type="button" class="btn"><?php echo $L->g('Save as draft') ?></button>
<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn"><?php echo $L->g('Cancel') ?></a> <a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn"><?php echo $L->g('Cancel') ?></a>
</div> </div>
@ -200,28 +206,48 @@
<script> <script>
$(document).ready(function() { $(document).ready(function() {
// Button Save as draft // Button Save
$("#jssaveAsDraft").on("click", function() { $("#jsbuttonSave").on("click", function() {
$("#jsstatus").val("draft"); $("#jsstatus").val("published");
$("#dynamicTabContent").submit(); $("#jsform").submit();
}); });
// Type selector modiefied the status // Button Save as draft
$("#jsbuttonDraft").on("click", function() {
$("#jsstatus").val("draft");
$("#jsform").submit();
});
// External cover image
$("#jsexternalCoverImage").change(function() {
$("#jscoverImage").val( $(this).val() );
});
// Type selector modified the status hidden field
$("#jstype").on("change", function() { $("#jstype").on("change", function() {
var status = $("#jstype option:selected").val(); var status = $("#jstype option:selected").val();
$("#jsstatus").val(status); $("#jsstatus").val(status);
}); });
// Autosave // Generate slug when the user type the title
setInterval( $("#jstitle").keyup(function() {
function() { var text = $(this).val();
var parent = $("#jsparent").val();
var currentKey = "";
var ajax = new bluditAjax();
ajax.generateSlug(text, parent, currentKey, $("#jsslug"));
});
// Autosave interval
setInterval(function() {
var uuid = $("#jsuuid").val(); var uuid = $("#jsuuid").val();
var title = $("#jstitle").val(); var title = $("#jstitle").val();
var content = $("#jscontent").val(); var content = editorGetContent();
var ajax = new bluditAjax() var ajax = new bluditAjax();
ajax.autosave(uuid, title, content); // showAlert is the function to display an alert defined in alert.php
ajax.autosave(uuid, title, content, showAlert);
}, },
10*1000 60*1000*<?php echo $GLOBALS['AUTOSAVE_TIME'] ?>
); );
// Template autocomplete // Template autocomplete

View File

@ -39,6 +39,12 @@
'name'=>'status', 'name'=>'status',
'value'=>'published' 'value'=>'published'
)); ));
// Cover image
echo Bootstrap::formInputHidden(array(
'name'=>'coverImage',
'value'=>''
));
?> ?>
<!-- TABS CONTENT --> <!-- TABS CONTENT -->
@ -59,8 +65,8 @@
</div> </div>
<div class="form-group mt-2"> <div class="form-group mt-2">
<button type="submit" class="btn btn-primary">Save</button> <button id="jsbuttonSave" type="submit" class="btn btn-primary"><?php echo $L->g('Save') ?></button>
<button type="button" class="btn" id="jssaveAsDraft">Save as draft</button> <button id="jsbuttonDraft" type="button" class="btn"><?php echo $L->g('Save as draft') ?></button>
<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn"><?php echo $L->g('Cancel') ?></a> <a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn"><?php echo $L->g('Cancel') ?></a>
</div> </div>
@ -70,7 +76,7 @@
<div class="tab-pane" id="images" role="tabpanel" aria-labelledby="images-tab"> <div class="tab-pane" id="images" role="tabpanel" aria-labelledby="images-tab">
<?php <?php
echo Bootstrap::formTitle(array('title'=>'Select images')); echo Bootstrap::formTitle(array('title'=>'Select images or upload images'));
?> ?>
<button type="button" class="btn" data-toggle="modal" data-target="#jsbluditMediaModal">Media Manager</button> <button type="button" class="btn" data-toggle="modal" data-target="#jsbluditMediaModal">Media Manager</button>
@ -79,10 +85,10 @@
echo Bootstrap::formTitle(array('title'=>'Cover image')); echo Bootstrap::formTitle(array('title'=>'Cover image'));
?> ?>
<img class="img-thumbnail" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1627e1b2b7e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1627e1b2b7e%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.65%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 100px; height: 100px;"> <img id="jscoverImagePreview" style="width: 300px; height: 200px;" class="img-thumbnail" alt="coverImagePreview" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1627e1b2b7e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1627e1b2b7e%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.65%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
<?php <?php
echo Bootstrap::formTitle(array('title'=>'External Cover image')); echo Bootstrap::formTitle(array('title'=>'External cover image'));
?> ?>
<?php <?php
@ -181,12 +187,23 @@
<script> <script>
$(document).ready(function() { $(document).ready(function() {
// Button Save
$("#jsbuttonSave").on("click", function() {
$("#jsstatus").val("published");
$("#jsform").submit();
});
// Button Save as draft // Button Save as draft
$("#jssaveAsDraft").on("click", function() { $("#jsbuttonDraft").on("click", function() {
$("#jsstatus").val("draft"); $("#jsstatus").val("draft");
$("#jsform").submit(); $("#jsform").submit();
}); });
// External cover image
$("#jsexternalCoverImage").change(function() {
$("#jscoverImage").val( $(this).val() );
});
// Type selector modified the status hidden field // Type selector modified the status hidden field
$("#jstype").on("change", function() { $("#jstype").on("change", function() {
var status = $("#jstype option:selected").val(); var status = $("#jstype option:selected").val();
@ -211,7 +228,7 @@ $(document).ready(function() {
// 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);
}, },
10*1000 60*1000*<?php echo $GLOBALS['AUTOSAVE_TIME'] ?>
); );
// Template autocomplete // Template autocomplete

View File

@ -110,4 +110,7 @@ $GLOBALS['BLUDIT_MEDIA_MANAGER_SORT_BY_DATE'] = true;
// Thubmnails size // Thubmnails size
$GLOBALS['THUMBNAILS_WIDTH'] = 400; $GLOBALS['THUMBNAILS_WIDTH'] = 400;
$GLOBALS['THUMBNAILS_HEIGHT'] = 400; $GLOBALS['THUMBNAILS_HEIGHT'] = 400;
$GLOBALS['THUMBNAILS_QUALITY'] = 100; $GLOBALS['THUMBNAILS_QUALITY'] = 100;
// Autosave
$GLOBALS['AUTOSAVE_TIME'] = 2; // Minutes

View File

@ -407,11 +407,11 @@ function createPage($args) {
return false; return false;
} }
// External Cover Image // // External Cover Image
if ( !empty($args['externalCoverImage']) ) { // if ( !empty($args['externalCoverImage']) ) {
$args['coverImage'] = $args['externalCoverImage']; // $args['coverImage'] = $args['externalCoverImage'];
unset($args['externalCoverImage']); // unset($args['externalCoverImage']);
} // }
$key = $dbPages->add($args); $key = $dbPages->add($args);
if ($key) { if ($key) {
@ -465,11 +465,11 @@ function editPage($args) {
return false; return false;
} }
// External Cover Image // // External Cover Image
if (!empty($args['externalCoverImage'])) { // if (!empty($args['externalCoverImage'])) {
$args['coverImage'] = $args['externalCoverImage']; // $args['coverImage'] = $args['externalCoverImage'];
unset($args['externalCoverImage']); // unset($args['externalCoverImage']);
} // }
// Title and content need to be here because from inside the dbPages is not visible // Title and content need to be here because from inside the dbPages is not visible
if (empty($args['title']) || empty($args['content'])) { if (empty($args['title']) || empty($args['content'])) {

View File

@ -271,6 +271,11 @@ class Page {
return $this->getValue('username'); return $this->getValue('username');
} }
public function template()
{
return $this->getValue('template');
}
// Returns the description field // Returns the description field
public function description() public function description()
{ {

View File

@ -23,6 +23,8 @@ class pluginQuill extends Plugin {
public function adminBodyEnd() public function adminBodyEnd()
{ {
// Load Quill only on the selected controllers to keep perfomance
// For example, in the dashboard is not going to be included the Quill CSS and JS scripts.
if (!in_array($GLOBALS['ADMIN_CONTROLLER'], $this->loadOnController)) { if (!in_array($GLOBALS['ADMIN_CONTROLLER'], $this->loadOnController)) {
return false; return false;
} }