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>
<!-- 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 -->
<nav>
@ -69,11 +73,11 @@ echo 'var preLoadFiles = '.json_encode($preLoadFiles).';';
?>
function openMediaManager() {
$('#jsbluditMediaModal').modal('show')
$('#jsbluditMediaModal').modal('show');
}
function closeMediaManager() {
$('#jsbluditMediaModal').modal('hide')
$('#jsbluditMediaModal').modal('hide');
}
// Remove all files from the table
@ -90,10 +94,11 @@ function displayFiles(files) {
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 class="information">'+
'<div>'+filename+'</div>'+
'<div class="pb-2">'+filename+'</div>'+
'<div>'+
'<button onClick="editorInsertMedia(\''+filename+'\'); closeMediaManager();" type="button" class="btn btn-link p-0 mr-2">Insert</button>'+
'<button onClick="deleteMedia(\''+filename+'\')" type="button" class="btn btn-link p-0 mr-2">Delete</button>'+
'<button onClick="editorInsertMedia(\''+filename+'\'); closeMediaManager();" type="button" class="btn btn-primary btn-sm mr-2">Insert</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>'+
'</td>'+
'</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() {
// Display the files preloaded for the first time
displayFiles(preLoadFiles);
@ -154,7 +164,7 @@ $(document).ready(function() {
return xhr;
}
}).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);
});
});

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>
</li>
<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 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>
</ul>
<div class="tab-content">

View File

@ -31,7 +31,7 @@
// UUID
echo Bootstrap::formInputHidden(array(
'name'=>'uuid',
'value'=>$dbPages->generateUUID()
'value'=>$page->uuid()
));
// Status = published, draft, sticky, static
@ -45,6 +45,12 @@
'name'=>'key',
'value'=>$page->key()
));
// Cover image
echo Bootstrap::formInputHidden(array(
'name'=>'coverImage',
'value'=>$page->coverImage()
));
?>
<!-- TABS CONTENT -->
@ -65,8 +71,8 @@
</div>
<div class="form-group mt-2">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn" id="jssaveAsDraft">Save as draft</button>
<button id="jsbuttonSave" type="submit" class="btn btn-primary"><?php echo $page->draft()?$L->g('Publish'):$L->g('Save') ?></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>
</div>
@ -200,28 +206,48 @@
<script>
$(document).ready(function() {
// Button Save as draft
$("#jssaveAsDraft").on("click", function() {
$("#jsstatus").val("draft");
$("#dynamicTabContent").submit();
// Button Save
$("#jsbuttonSave").on("click", function() {
$("#jsstatus").val("published");
$("#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() {
var status = $("#jstype option:selected").val();
$("#jsstatus").val(status);
});
// Autosave
setInterval(
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();
ajax.generateSlug(text, parent, currentKey, $("#jsslug"));
});
// Autosave interval
setInterval(function() {
var uuid = $("#jsuuid").val();
var title = $("#jstitle").val();
var content = $("#jscontent").val();
var ajax = new bluditAjax()
ajax.autosave(uuid, title, content);
var content = editorGetContent();
var ajax = new bluditAjax();
// 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

View File

@ -39,6 +39,12 @@
'name'=>'status',
'value'=>'published'
));
// Cover image
echo Bootstrap::formInputHidden(array(
'name'=>'coverImage',
'value'=>''
));
?>
<!-- TABS CONTENT -->
@ -59,8 +65,8 @@
</div>
<div class="form-group mt-2">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn" id="jssaveAsDraft">Save as draft</button>
<button id="jsbuttonSave" type="submit" class="btn btn-primary"><?php echo $L->g('Save') ?></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>
</div>
@ -70,7 +76,7 @@
<div class="tab-pane" id="images" role="tabpanel" aria-labelledby="images-tab">
<?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>
@ -79,10 +85,10 @@
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
echo Bootstrap::formTitle(array('title'=>'External Cover image'));
echo Bootstrap::formTitle(array('title'=>'External cover image'));
?>
<?php
@ -181,12 +187,23 @@
<script>
$(document).ready(function() {
// Button Save
$("#jsbuttonSave").on("click", function() {
$("#jsstatus").val("published");
$("#jsform").submit();
});
// Button Save as draft
$("#jssaveAsDraft").on("click", function() {
$("#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() {
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
ajax.autosave(uuid, title, content, showAlert);
},
10*1000
60*1000*<?php echo $GLOBALS['AUTOSAVE_TIME'] ?>
);
// Template autocomplete

View File

@ -111,3 +111,6 @@ $GLOBALS['BLUDIT_MEDIA_MANAGER_SORT_BY_DATE'] = true;
$GLOBALS['THUMBNAILS_WIDTH'] = 400;
$GLOBALS['THUMBNAILS_HEIGHT'] = 400;
$GLOBALS['THUMBNAILS_QUALITY'] = 100;
// Autosave
$GLOBALS['AUTOSAVE_TIME'] = 2; // Minutes

View File

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

View File

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

View File

@ -23,6 +23,8 @@ class pluginQuill extends Plugin {
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)) {
return false;
}