Improves Bludit Images v8

This commit is contained in:
dignajar 2016-01-03 18:04:54 -03:00
parent 631cbcb718
commit 08ff8b5930
5 changed files with 110 additions and 28 deletions

View File

@ -24,6 +24,7 @@ define('PATH_CONTENT', PATH_ROOT.'content'.DS);
define('PATH_POSTS', PATH_CONTENT.'posts'.DS); define('PATH_POSTS', PATH_CONTENT.'posts'.DS);
define('PATH_UPLOADS', PATH_CONTENT.'uploads'.DS); define('PATH_UPLOADS', PATH_CONTENT.'uploads'.DS);
define('PATH_UPLOADS_PROFILES', PATH_UPLOADS.'profiles'.DS); define('PATH_UPLOADS_PROFILES', PATH_UPLOADS.'profiles'.DS);
define('PATH_UPLOADS_THUMBNAILS',PATH_UPLOADS.'thumbnails'.DS);
define('PATH_PAGES', PATH_CONTENT.'pages'.DS); define('PATH_PAGES', PATH_CONTENT.'pages'.DS);
define('PATH_DATABASES', PATH_CONTENT.'databases'.DS); define('PATH_DATABASES', PATH_CONTENT.'databases'.DS);
define('PATH_PLUGINS_DATABASES',PATH_CONTENT.'databases'.DS.'plugins'.DS); define('PATH_PLUGINS_DATABASES',PATH_CONTENT.'databases'.DS.'plugins'.DS);
@ -244,9 +245,9 @@ function install($adminPassword, $email, $timezoneOffset)
error_log($errorText, 0); error_log($errorText, 0);
} }
if(!mkdir(PATH_PLUGINS_DATABASES.'tinymce', $dirpermissions, true)) if(!mkdir(PATH_PLUGINS_DATABASES.'simplemde', $dirpermissions, true))
{ {
$errorText = 'Error when trying to created the directory=>'.PATH_PLUGINS_DATABASES.'tinymce'; $errorText = 'Error when trying to created the directory=>'.PATH_PLUGINS_DATABASES.'simplemde';
error_log($errorText, 0); error_log($errorText, 0);
} }
@ -268,6 +269,12 @@ function install($adminPassword, $email, $timezoneOffset)
error_log($errorText, 0); error_log($errorText, 0);
} }
if(!mkdir(PATH_UPLOADS_THUMBNAILS, $dirpermissions, true))
{
$errorText = 'Error when trying to created the directory=>'.PATH_UPLOADS_THUMBNAILS;
error_log($errorText, 0);
}
// ============================================================================ // ============================================================================
// Create files // Create files
// ============================================================================ // ============================================================================
@ -409,14 +416,14 @@ function install($adminPassword, $email, $timezoneOffset)
LOCK_EX LOCK_EX
); );
// File plugins/tinymce/db.php // File plugins/simplemde/db.php
file_put_contents( file_put_contents(
PATH_PLUGINS_DATABASES.'tinymce'.DS.'db.php', PATH_PLUGINS_DATABASES.'simplemde'.DS.'db.php',
$dataHead.json_encode( $dataHead.json_encode(
array( array(
'position'=>0, 'position'=>0,
'plugins'=>'autoresize, fullscreen, pagebreak, link, textcolor, code', 'tabSize'=>4,
'toolbar'=>'bold italic underline strikethrough | alignleft aligncenter alignright | bullist numlist | styleselect | link forecolor backcolor removeformat | pagebreak code fullscreen' 'toolbar'=>'"bold", "italic", "heading", "|", "quote", "unordered-list", "|", "link", "image", "code", "horizontal-rule", "|", "preview", "side-by-side", "fullscreen", "guide"'
), ),
JSON_PRETTY_PRINT), JSON_PRETTY_PRINT),
LOCK_EX LOCK_EX

View File

@ -184,13 +184,21 @@ button.delete-button:hover {
} }
#bludit-images-v8 img.uk-thumbnail { #bludit-images-v8 .bludit-thumbnail {
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
display: inline-block;
height: auto;
margin: 2px;
padding: 0;
width: 15% !important; width: 15% !important;
} }
#bludit-images-v8-upload { #bludit-images-v8-upload {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: 15px !important;
} }
#bludit-images-v8-drag-drop { #bludit-images-v8-drag-drop {
@ -203,8 +211,9 @@ button.delete-button:hover {
} }
#bludit-images-v8-thumbnails { #bludit-images-v8-thumbnails {
height: 350px; max-height: 350px;
overflow: auto; overflow: auto;
font-size: 0;
} }
/* ----------- BLUDIT QUICK IMAGES ----------- */ /* ----------- BLUDIT QUICK IMAGES ----------- */
@ -227,7 +236,18 @@ button.delete-button:hover {
} }
#bludit-quick-images-thumbnails { #bludit-quick-images-thumbnails {
text-align: center; font-size: 0;
}
#bludit-quick-images .bludit-thumbnail {
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
display: inline-block;
height: auto;
margin: 2px;
padding: 0;
width: 31% !important;
} }
/* ----------- BLUDIT COVER IMAGE ----------- */ /* ----------- BLUDIT COVER IMAGE ----------- */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -141,18 +141,44 @@ $thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true);
array_splice($thumbnailList, THUMBNAILS_AMOUNT); array_splice($thumbnailList, THUMBNAILS_AMOUNT);
foreach($thumbnailList as $file) { foreach($thumbnailList as $file) {
$filename = basename($file); $filename = basename($file);
$html .= '<img class="bludit-thumbnail uk-thumbnail" data-filename="'.$filename.'" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" alt="Thumbnail">'; $html .= '<img class="bludit-thumbnail" data-filename="'.$filename.'" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" alt="Thumbnail">';
} }
$html .= ' $html .= '
</div> </div>
';
if(empty($thumbnailList)) {
$html .= '<div class="empty-images uk-block uk-text-center uk-block-muted">There are no images, upload someone to make Bludit more cheerful.</div>';
}
$html .= '
<a data-uk-modal href="#bludit-images-v8" class="moreImages uk-button">More images</a> <a data-uk-modal href="#bludit-images-v8" class="moreImages uk-button">More images</a>
</div> </div>
'; ';
echo $html; $script = '
<script>
// Add thumbnail to Quick Images
function addQuickImages(filename)
{
var imageSrc = HTML_PATH_UPLOADS_THUMBNAILS + filename;
// Remove element if there are more than 6 thumbnails
if ($("#bludit-quick-images-thumbnails > img").length > 5) {
$("img:last-child", "#bludit-quick-images-thumbnails").remove();
}
// Add the new thumbnail to Quick images
$("#bludit-quick-images-thumbnails").prepend("<img class=\"bludit-thumbnail\" data-filename=\""+filename+"\" src=\""+imageSrc+"\" alt=\"Thumbnail\">");
}
</script>
';
echo $html.$script;
} }
public static function bluditCoverImage($coverImage="") public static function bluditCoverImage($coverImage="")
@ -190,6 +216,18 @@ $html .= '
$script = ' $script = '
<script> <script>
function addCoverImage(filename)
{
var imageSrc = HTML_PATH_UPLOADS_THUMBNAILS + filename;
// Cover image background
$("#cover-image-thumbnail").attr("style","background-image: url("+imageSrc+")");
// Form attribute
$("#cover-image-upload-filename").attr("value", filename);
}
$(document).ready(function() { $(document).ready(function() {
$("#cover-image-delete").on("click", function() { $("#cover-image-delete").on("click", function() {
@ -221,15 +259,17 @@ $(document).ready(function() {
allcomplete: function(response) { allcomplete: function(response) {
$("#cover-image-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%"); $("#cover-image-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
$("#cover-image-progressbar").hide(); $("#cover-image-progressbar").hide();
var imageSrc = HTML_PATH_UPLOADS_THUMBNAILS+response.filename;
$("#cover-image-thumbnail").attr("style","background-image: url("+imageSrc+")");
$("#cover-image-delete").show(); $("#cover-image-delete").show();
$(".empty-images").hide();
$("img:last-child", "#bludit-quick-images-thumbnails").remove(); // Add Cover Image
$("#bludit-quick-images-thumbnails").prepend("<img class=\"bludit-thumbnail uk-thumbnail\" data-filename=\""+response.filename+"\" src=\""+imageSrc+"\" alt=\"Thumbnail\">"); addCoverImage(response.filename);
$("#cover-image-upload-filename").attr("value",response.filename); // Add thumbnail to Quick Images
addQuickImages(response.filename);
// Add thumbnail to Bludit Images V8
addBluditImagev8(response.filename);
}, },
notallowed: function(file, settings) { notallowed: function(file, settings) {
@ -271,15 +311,21 @@ $html .= '
<div id="bludit-images-v8-thumbnails"> <div id="bludit-images-v8-thumbnails">
'; ';
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true); $thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true);
foreach($thumbnailList as $file) { foreach($thumbnailList as $file) {
$filename = basename($file); $filename = basename($file);
$html .= '<img class="bludit-thumbnail uk-thumbnail" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" data-filename="'.$filename.'" alt="Thumbnail">'; $html .= '<img class="bludit-thumbnail" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" data-filename="'.$filename.'" alt="Thumbnail">';
} }
$html .= ' $html .= '
</div> </div>
';
if(empty($thumbnailList)) {
$html .= '<div class="empty-images uk-block uk-text-center uk-block-muted">There are no images, upload someone to make Bludit more cheerful.</div>';
}
$html .= '
<div class="uk-modal-footer"> <div class="uk-modal-footer">
Double click on the image to add it or <a href="" class="uk-modal-close">click here to cancel</a> Double click on the image to add it or <a href="" class="uk-modal-close">click here to cancel</a>
</div> </div>
@ -290,6 +336,16 @@ $html .= '
$script = ' $script = '
<script> <script>
// Add thumbnail to Bludit Images v8
function addBluditImagev8(filename)
{
var imageSrc = HTML_PATH_UPLOADS_THUMBNAILS + filename;
// Add the new thumbnail to Bludit Images v8
$("#bludit-images-v8-thumbnails").prepend("<img class=\"bludit-thumbnail\" data-filename=\""+filename+"\" src=\""+imageSrc+"\" alt=\"Thumbnail\">");
}
$(document).ready(function() { $(document).ready(function() {
// Add border when select an thumbnail // Add border when select an thumbnail
@ -331,14 +387,13 @@ $(document).ready(function() {
$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%"); $("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
$("#bludit-images-v8-progressbar").hide(); $("#bludit-images-v8-progressbar").hide();
$("#bludit-images-v8-drag-drop").show(); $("#bludit-images-v8-drag-drop").show();
$(".empty-images").hide();
// Images V8 Thumbnails // Add thumbnail to Bludit Images V8
var imageSrc = HTML_PATH_UPLOADS_THUMBNAILS+response.filename; addBluditImagev8(response.filename);
$("#bludit-images-v8-thumbnails").prepend("<img class=\"bludit-thumbnail uk-thumbnail\" data-filename=\""+response.filename+"\" src=\""+imageSrc+"\" alt=\"Thumbnail\">");
// Quick images Thumbnails // Add thumbnail to Quick Images
$("img:last-child", "#bludit-quick-images-thumbnails").remove(); addQuickImages(response.filename);
$("#bludit-quick-images-thumbnails").prepend("<img class=\"bludit-thumbnail uk-thumbnail\" data-filename=\""+response.filename+"\" src=\""+imageSrc+"\" alt=\"Thumbnail\">");
}, },
notallowed: function(file, settings) { notallowed: function(file, settings) {