New Menu V8 for Images and improves on cover images
This commit is contained in:
parent
cfc9d49950
commit
bfa4756bf4
@ -229,6 +229,36 @@ button.delete-button:hover {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* Bludit Menu v8 */
|
||||
|
||||
#bludit-menuV8 {
|
||||
display: none;
|
||||
z-index: 1020;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: 1px solid #CCC;
|
||||
background: #FFF;
|
||||
color: #333;
|
||||
border-radius: 2px;
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#bludit-menuV8 li {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#bludit-menuV8 li:hover {
|
||||
background-color: #2672ec;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#bludit-menuV8 li i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* ----------- BLUDIT QUICK IMAGES ----------- */
|
||||
#bludit-quick-images {
|
||||
|
||||
|
@ -249,60 +249,44 @@ $(document).ready(function() {
|
||||
|
||||
public static function bluditQuickImages()
|
||||
{
|
||||
// Javascript code
|
||||
include(PATH_JS.'bludit-quick-images.js');
|
||||
|
||||
global $L;
|
||||
|
||||
$html = '<!-- BLUDIT QUICK IMAGES -->';
|
||||
$html .= '
|
||||
<div id="bludit-quick-images">
|
||||
<div id="bludit-quick-images-thumbnails" onmousedown="return false">
|
||||
';
|
||||
$html = '<!-- BLUDIT QUICK IMAGES -->';
|
||||
$html .= '
|
||||
<div id="bludit-quick-images">
|
||||
<div id="bludit-quick-images-thumbnails" onmousedown="return false">
|
||||
';
|
||||
|
||||
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true);
|
||||
array_splice($thumbnailList, THUMBNAILS_AMOUNT);
|
||||
foreach($thumbnailList as $file) {
|
||||
$filename = basename($file);
|
||||
$html .= '<img class="bludit-thumbnail" data-filename="'.$filename.'" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" alt="Thumbnail">';
|
||||
}
|
||||
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true);
|
||||
array_splice($thumbnailList, THUMBNAILS_AMOUNT);
|
||||
foreach($thumbnailList as $file) {
|
||||
$filename = basename($file);
|
||||
$html .= '<img class="bludit-thumbnail" data-filename="'.$filename.'" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" alt="Thumbnail">';
|
||||
}
|
||||
|
||||
$html .= '
|
||||
</div>
|
||||
';
|
||||
$html .= '
|
||||
</div>
|
||||
';
|
||||
|
||||
if(empty($thumbnailList)) {
|
||||
$html .= '<div class="empty-images uk-block uk-text-center uk-block-muted">'.$L->g('There are no images').'</div>';
|
||||
}
|
||||
$html .= '<div class="empty-images uk-block uk-text-center uk-block-muted" '.( !empty($thumbnailList)?'style="display:none"':'' ).'>'.$L->g('There are no images').'</div>';
|
||||
|
||||
$html .= '
|
||||
<a data-uk-modal href="#bludit-images-v8" class="moreImages uk-button">'.$L->g('More images').'</a>
|
||||
$html .= '
|
||||
<a data-uk-modal href="#bludit-images-v8" class="moreImages uk-button">'.$L->g('More images').'</a>
|
||||
|
||||
</div>
|
||||
';
|
||||
</div>
|
||||
';
|
||||
|
||||
$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;
|
||||
echo $html;
|
||||
}
|
||||
|
||||
public static function bluditCoverImage($coverImage="")
|
||||
{
|
||||
// Javascript code
|
||||
include(PATH_JS.'bludit-cover-image.js');
|
||||
|
||||
global $L;
|
||||
|
||||
$style = '';
|
||||
@ -310,225 +294,106 @@ function addQuickImages(filename)
|
||||
$style = 'background-image: url('.HTML_PATH_UPLOADS_THUMBNAILS.$coverImage.')';
|
||||
}
|
||||
|
||||
$html = '<!-- BLUDIT COVER IMAGE -->';
|
||||
$html .= '
|
||||
<div id="bludit-cover-image">
|
||||
<div id="cover-image-thumbnail" class="uk-form-file uk-placeholder uk-text-center" style="'.$style.'">
|
||||
$html = '<!-- BLUDIT COVER IMAGE -->';
|
||||
$html .= '
|
||||
<div id="bludit-cover-image">
|
||||
<div id="cover-image-thumbnail" class="uk-form-file uk-placeholder uk-text-center" style="'.$style.'">
|
||||
|
||||
<input type="hidden" name="coverImage" id="cover-image-upload-filename" value="'.$coverImage.'">
|
||||
<input type="hidden" name="coverImage" id="cover-image-upload-filename" value="'.$coverImage.'">
|
||||
|
||||
<div id="cover-image-upload" '.( empty($coverImage)?'':'style="display: none;"' ).'>
|
||||
<div><i class="uk-icon-picture-o"></i> '.$L->g('Cover image').'</div>
|
||||
<div style="font-size:0.8em;">'.$L->g('Drag and drop or click here').'<input id="cover-image-file-select" type="file"></div>
|
||||
</div>
|
||||
<div id="cover-image-upload" '.( empty($coverImage)?'':'style="display: none;"' ).'>
|
||||
<div><i class="uk-icon-picture-o"></i> '.$L->g('Cover image').'</div>
|
||||
<div style="font-size:0.8em;">'.$L->g('Drag and drop or click here').'<input id="cover-image-file-select" type="file"></div>
|
||||
</div>
|
||||
|
||||
<div id="cover-image-delete" '.( empty($coverImage)?'':'style="display: block;"' ).'>
|
||||
<div><i class="uk-icon-trash-o"></i></div>
|
||||
</div>
|
||||
<div id="cover-image-delete" '.( empty($coverImage)?'':'style="display: block;"' ).'>
|
||||
<div><i class="uk-icon-trash-o"></i></div>
|
||||
</div>
|
||||
|
||||
<div id="cover-image-progressbar" class="uk-progress">
|
||||
<div class="uk-progress-bar" style="width: 0%;">0%</div>
|
||||
</div>
|
||||
<div id="cover-image-progressbar" class="uk-progress">
|
||||
<div class="uk-progress-bar" style="width: 0%;">0%</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
|
||||
$script = '
|
||||
<script>
|
||||
echo $html;
|
||||
}
|
||||
|
||||
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() {
|
||||
|
||||
$("#cover-image-delete").on("click", function() {
|
||||
$("#cover-image-thumbnail").attr("style","");
|
||||
$("#cover-image-upload-filename").attr("value","");
|
||||
$("#cover-image-delete").hide();
|
||||
$("#cover-image-upload").show();
|
||||
});
|
||||
|
||||
var settings =
|
||||
public static function bluditMenuV8()
|
||||
{
|
||||
type: "json",
|
||||
action: HTML_PATH_ADMIN_ROOT+"ajax/uploader",
|
||||
allow : "*.(jpg|jpeg|gif|png)",
|
||||
params: {"type":"cover-image"},
|
||||
// Javascript code
|
||||
include(PATH_JS.'bludit-menu-v8.js');
|
||||
|
||||
loadstart: function() {
|
||||
$("#cover-image-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
|
||||
$("#cover-image-progressbar").show();
|
||||
$("#cover-image-delete").hide();
|
||||
$("#cover-image-upload").hide();
|
||||
},
|
||||
global $L;
|
||||
|
||||
progress: function(percent) {
|
||||
percent = Math.ceil(percent);
|
||||
$("#cover-image-progressbar").find(".uk-progress-bar").css("width", percent+"%").text(percent+"%");
|
||||
},
|
||||
$html = '<!-- BLUDIT MENU V8 -->';
|
||||
$html .= '
|
||||
<ul id="bludit-menuV8">
|
||||
<li id="bludit-menuV8-insert"><i class="uk-icon-plus"></i>'.$L->g('Insert image').'</li>
|
||||
<li id="bludit-menuV8-cover"><i class="uk-icon-picture-o"></i>'.$L->g('Set as cover image').'</li>
|
||||
<li id="bludit-menuV8-delete"><i class="uk-icon-trash"></i>'.$L->g('Delete image').'</li>
|
||||
</ul>
|
||||
';
|
||||
|
||||
allcomplete: function(response) {
|
||||
$("#cover-image-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
|
||||
$("#cover-image-progressbar").hide();
|
||||
$("#cover-image-delete").show();
|
||||
$(".empty-images").hide();
|
||||
|
||||
// Add Cover Image
|
||||
addCoverImage(response.filename);
|
||||
|
||||
// Add thumbnail to Quick Images
|
||||
addQuickImages(response.filename);
|
||||
|
||||
// Add thumbnail to Bludit Images V8
|
||||
addBluditImagev8(response.filename);
|
||||
},
|
||||
|
||||
notallowed: function(file, settings) {
|
||||
alert("'.$L->g('Supported image file types').' "+settings.allow);
|
||||
}
|
||||
};
|
||||
|
||||
UIkit.uploadSelect($("#cover-image-file-select"), settings);
|
||||
UIkit.uploadDrop($("#cover-image-thumbnail"), settings);
|
||||
|
||||
});
|
||||
</script>
|
||||
';
|
||||
echo $html.$script;
|
||||
echo $html;
|
||||
}
|
||||
|
||||
public static function bluditImagesV8()
|
||||
{
|
||||
// Javascript code
|
||||
include(PATH_JS.'bludit-images-v8.js');
|
||||
|
||||
global $L;
|
||||
|
||||
$html = '<!-- BLUDIT IMAGES V8 -->';
|
||||
$html .= '
|
||||
<div id="bludit-images-v8" class="uk-modal">
|
||||
<div class="uk-modal-dialog">
|
||||
$html = '<!-- BLUDIT IMAGES V8 -->';
|
||||
$html .= '
|
||||
<div id="bludit-images-v8" class="uk-modal">
|
||||
<div class="uk-modal-dialog">
|
||||
|
||||
<div id="bludit-images-v8-upload" class="uk-form-file uk-placeholder uk-text-center">
|
||||
<div id="bludit-images-v8-upload" class="uk-form-file uk-placeholder uk-text-center">
|
||||
|
||||
<div id="bludit-images-v8-drag-drop">
|
||||
<div><i class="uk-icon-picture-o"></i> '.$L->g('Upload image').'</div>
|
||||
<div style="font-size:0.8em;">'.$L->g('Drag and drop or click here').'<input id="bludit-images-v8-file-select" type="file"></div>
|
||||
</div>
|
||||
<div id="bludit-images-v8-drag-drop">
|
||||
<div><i class="uk-icon-picture-o"></i> '.$L->g('Upload image').'</div>
|
||||
<div style="font-size:0.8em;">'.$L->g('Drag and drop or click here').'<input id="bludit-images-v8-file-select" type="file"></div>
|
||||
</div>
|
||||
|
||||
<div id="bludit-images-v8-progressbar" class="uk-progress">
|
||||
<div class="uk-progress-bar" style="width: 0%;">0%</div>
|
||||
</div>
|
||||
<div id="bludit-images-v8-progressbar" class="uk-progress">
|
||||
<div class="uk-progress-bar" style="width: 0%;">0%</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bludit-images-v8-thumbnails">
|
||||
';
|
||||
<div id="bludit-images-v8-thumbnails">
|
||||
';
|
||||
|
||||
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true);
|
||||
foreach($thumbnailList as $file) {
|
||||
$filename = basename($file);
|
||||
$html .= '<img class="bludit-thumbnail" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" data-filename="'.$filename.'" alt="Thumbnail">';
|
||||
}
|
||||
|
||||
$html .= '
|
||||
</div>
|
||||
';
|
||||
|
||||
if(empty($thumbnailList)) {
|
||||
$html .= '<div class="empty-images uk-block uk-text-center uk-block-muted">'.$L->g('There are no images').'</div>';
|
||||
}
|
||||
|
||||
$html .= '
|
||||
<div class="uk-modal-footer">
|
||||
'.$L->g('Double click on the image to add it').' <a href="" class="uk-modal-close">'.$L->g('Click here to cancel').'</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
|
||||
$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() {
|
||||
|
||||
// Add border when select an thumbnail
|
||||
$("body").on("click", "img.bludit-thumbnail", function() {
|
||||
$(".bludit-thumbnail").css("border", "1px solid #ddd");
|
||||
$(this).css("border", "solid 3px orange");
|
||||
});
|
||||
|
||||
// Hide the modal when double click on thumbnail.
|
||||
$("body").on("dblclick", "img.bludit-thumbnail", function() {
|
||||
var modal = UIkit.modal("#bludit-images-v8");
|
||||
if ( modal.isActive() ) {
|
||||
modal.hide();
|
||||
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true);
|
||||
foreach($thumbnailList as $file) {
|
||||
$filename = basename($file);
|
||||
$html .= '<img class="bludit-thumbnail" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" data-filename="'.$filename.'" alt="Thumbnail">';
|
||||
}
|
||||
});
|
||||
|
||||
// Event for double click for insert the image is in each editor plugin
|
||||
// ..
|
||||
$html .= '
|
||||
</div>
|
||||
';
|
||||
|
||||
var settings =
|
||||
{
|
||||
type: "json",
|
||||
action: HTML_PATH_ADMIN_ROOT+"ajax/uploader",
|
||||
allow : "*.(jpg|jpeg|gif|png)",
|
||||
params: {"type":"bludit-images-v8"},
|
||||
$html .= '<div class="empty-images uk-block uk-text-center uk-block-muted" '.( !empty($thumbnailList)?'style="display:none"':'' ).'>'.$L->g('There are no images').'</div>';
|
||||
|
||||
loadstart: function() {
|
||||
$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
|
||||
$("#bludit-images-v8-drag-drop").hide();
|
||||
$("#bludit-images-v8-progressbar").show();
|
||||
},
|
||||
$html .= '
|
||||
<div class="uk-modal-footer">
|
||||
'.$L->g('Click on the image for options').' <a href="" class="uk-modal-close">'.$L->g('Click here to cancel').'</a>
|
||||
</div>
|
||||
|
||||
progress: function(percent) {
|
||||
percent = Math.ceil(percent);
|
||||
$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", percent+"%").text(percent+"%");
|
||||
},
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
|
||||
allcomplete: function(response) {
|
||||
$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
|
||||
$("#bludit-images-v8-progressbar").hide();
|
||||
$("#bludit-images-v8-drag-drop").show();
|
||||
$(".empty-images").hide();
|
||||
|
||||
// Add thumbnail to Bludit Images V8
|
||||
addBluditImagev8(response.filename);
|
||||
|
||||
// Add thumbnail to Quick Images
|
||||
addQuickImages(response.filename);
|
||||
},
|
||||
|
||||
notallowed: function(file, settings) {
|
||||
alert("'.$L->g('Supported image file types').' "+settings.allow);
|
||||
}
|
||||
};
|
||||
|
||||
UIkit.uploadSelect($("#bludit-images-v8-file-select"), settings);
|
||||
UIkit.uploadDrop($("#bludit-images-v8-upload"), settings);
|
||||
});
|
||||
</script>
|
||||
';
|
||||
echo $html.$script;
|
||||
echo $html;
|
||||
}
|
||||
|
||||
|
||||
|
||||
public static function profileUploader($username)
|
||||
{
|
||||
global $L;
|
||||
|
@ -102,6 +102,9 @@ echo '<div class="sidebar uk-width-large-2-10">';
|
||||
// --- BLUDIT IMAGES V8 ---
|
||||
HTML::bluditImagesV8();
|
||||
|
||||
// --- BLUDIT MENU V8 ---
|
||||
HTML::bluditMenuV8();
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// ---- ADVANCED TAB ----
|
||||
|
@ -96,6 +96,9 @@ echo '<div class="sidebar uk-width-large-2-10">';
|
||||
// --- BLUDIT IMAGES V8 ---
|
||||
HTML::bluditImagesV8();
|
||||
|
||||
// --- BLUDIT MENU V8 ---
|
||||
HTML::bluditMenuV8();
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// ---- ADVANCED TAB ----
|
||||
|
@ -89,6 +89,9 @@ echo '<div class="sidebar uk-width-large-2-10">';
|
||||
// --- BLUDIT IMAGES V8 ---
|
||||
HTML::bluditImagesV8();
|
||||
|
||||
// --- BLUDIT MENU V8 ---
|
||||
HTML::bluditMenuV8();
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// ---- ADVANCED TAB ----
|
||||
|
@ -89,6 +89,9 @@ echo '<div class="sidebar uk-width-large-2-10">';
|
||||
// --- BLUDIT IMAGES V8 ---
|
||||
HTML::bluditImagesV8();
|
||||
|
||||
// --- BLUDIT MENU V8 ---
|
||||
HTML::bluditMenuV8();
|
||||
|
||||
echo '</li>';
|
||||
|
||||
// ---- ADVANCED TAB ----
|
||||
|
31
bl-kernel/ajax/delete-file.php
Normal file
31
bl-kernel/ajax/delete-file.php
Normal file
@ -0,0 +1,31 @@
|
||||
<?php defined('BLUDIT') or die('Bludit CMS.');
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
||||
// Request $_POST
|
||||
// $filename: Name of file to delete, just the filename
|
||||
|
||||
$filename = isset($_POST['filename']) ? $_POST['filename'] : '';
|
||||
|
||||
if( empty($filename) ) {
|
||||
echo json_encode( array('status'=>0, 'msg'=>'The filename is empty.') );
|
||||
exit;
|
||||
}
|
||||
|
||||
// Check if the filename exist and Sanitize::pathFile it's necesary for security reasons.
|
||||
if( Sanitize::pathFile(PATH_UPLOADS.$filename) ) {
|
||||
|
||||
// Delete the file.
|
||||
Filesystem::rmfile(PATH_UPLOADS.$filename);
|
||||
|
||||
// Delete the thumnails.
|
||||
Filesystem::rmfile(PATH_UPLOADS_THUMBNAILS.$filename);
|
||||
|
||||
echo json_encode( array('status'=>1, 'msg'=>'The file was deleted.') );
|
||||
|
||||
exit;
|
||||
}
|
||||
|
||||
echo json_encode( array('status'=>0, 'msg'=>'The file does not exist.') );
|
||||
|
||||
?>
|
@ -8,7 +8,7 @@ header('Content-Type: application/json');
|
||||
// parent: Page parent, if you are checking a slug for a page.
|
||||
|
||||
// Response JSON
|
||||
// text: valid slug text
|
||||
// slug: valid slug text
|
||||
|
||||
$text = isset($_POST['text']) ? $_POST['text'] : '';
|
||||
$parent = isset($_POST['parent']) ? $_POST['parent'] : NO_PARENT_CHAR;
|
||||
@ -21,6 +21,6 @@ elseif( $_POST['type']==='post' ) {
|
||||
$slug = $dbPosts->generateKey($text, $key);
|
||||
}
|
||||
|
||||
echo json_encode( array('slug'=>$slug) );
|
||||
echo json_encode( array('status'=>1, 'slug'=>$slug) );
|
||||
|
||||
?>
|
@ -142,6 +142,7 @@ class Theme {
|
||||
return $tmp;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
?>
|
96
bl-kernel/js/bludit-cover-image.js
Normal file
96
bl-kernel/js/bludit-cover-image.js
Normal file
@ -0,0 +1,96 @@
|
||||
<script>
|
||||
|
||||
var coverImage = new function() {
|
||||
|
||||
this.set = function(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);
|
||||
|
||||
// Show delete button.
|
||||
$("#cover-image-delete").show();
|
||||
|
||||
// Hide Cover image text.
|
||||
$("#cover-image-upload").hide();
|
||||
|
||||
// Hide box "There are no images"
|
||||
$(".empty-images").hide();
|
||||
|
||||
}
|
||||
|
||||
this.remove = function () {
|
||||
|
||||
// Remove the filename from the form.
|
||||
$("#cover-image-upload-filename").attr("value","");
|
||||
|
||||
// Remove the image from background-image.
|
||||
$("#cover-image-thumbnail").attr("style","");
|
||||
|
||||
// Hide delete button.
|
||||
$("#cover-image-delete").hide();
|
||||
|
||||
// Show Cover image text.
|
||||
$("#cover-image-upload").show();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
// Click on delete cover image.
|
||||
$("#cover-image-delete").on("click", function() {
|
||||
|
||||
// Remove the cover image.
|
||||
coverImage.remove();
|
||||
|
||||
});
|
||||
|
||||
var settings =
|
||||
{
|
||||
type: "json",
|
||||
action: HTML_PATH_ADMIN_ROOT+"ajax/uploader",
|
||||
allow : "*.(jpg|jpeg|gif|png)",
|
||||
params: {"type":"cover-image"},
|
||||
|
||||
loadstart: function() {
|
||||
$("#cover-image-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
|
||||
$("#cover-image-progressbar").show();
|
||||
$("#cover-image-delete").hide();
|
||||
$("#cover-image-upload").hide();
|
||||
},
|
||||
|
||||
progress: function(percent) {
|
||||
percent = Math.ceil(percent);
|
||||
$("#cover-image-progressbar").find(".uk-progress-bar").css("width", percent+"%").text(percent+"%");
|
||||
},
|
||||
|
||||
allcomplete: function(response) {
|
||||
$("#cover-image-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
|
||||
$("#cover-image-progressbar").hide();
|
||||
|
||||
// Add Cover Image
|
||||
coverImage.set( response.filename );
|
||||
|
||||
// Add thumbnail to Quick Images
|
||||
quickImages.addThumbnail( response.filename );
|
||||
|
||||
// Add thumbnail to Bludit Images V8
|
||||
imagesV8.addThumbnail( response.filename );
|
||||
},
|
||||
|
||||
notallowed: function(file, settings) {
|
||||
alert("'.$L->g('Supported image file types').' "+settings.allow);
|
||||
}
|
||||
};
|
||||
|
||||
UIkit.uploadSelect($("#cover-image-file-select"), settings);
|
||||
UIkit.uploadDrop($("#cover-image-thumbnail"), settings);
|
||||
|
||||
});
|
||||
</script>
|
68
bl-kernel/js/bludit-images-v8.js
Normal file
68
bl-kernel/js/bludit-images-v8.js
Normal file
@ -0,0 +1,68 @@
|
||||
<script>
|
||||
|
||||
var imagesV8 = new function() {
|
||||
|
||||
this.addThumbnail = function(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\">");
|
||||
|
||||
}
|
||||
|
||||
this.removeThumbnail = function(filename) {
|
||||
|
||||
// Remove the thumbnail
|
||||
$("#bludit-images-v8-thumbnails > img[data-filename=\""+filename+"\"]").remove();
|
||||
|
||||
if($("#bludit-images-v8-thumbnails > img").length == 0) {
|
||||
// Show box "There are no images"
|
||||
$(".empty-images").show();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
var settings =
|
||||
{
|
||||
type: "json",
|
||||
action: HTML_PATH_ADMIN_ROOT+"ajax/uploader",
|
||||
allow : "*.(jpg|jpeg|gif|png)",
|
||||
params: {"type":"bludit-images-v8"},
|
||||
|
||||
loadstart: function() {
|
||||
$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
|
||||
$("#bludit-images-v8-drag-drop").hide();
|
||||
$("#bludit-images-v8-progressbar").show();
|
||||
},
|
||||
|
||||
progress: function(percent) {
|
||||
percent = Math.ceil(percent);
|
||||
$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", percent+"%").text(percent+"%");
|
||||
},
|
||||
|
||||
allcomplete: function(response) {
|
||||
$("#bludit-images-v8-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
|
||||
$("#bludit-images-v8-progressbar").hide();
|
||||
$("#bludit-images-v8-drag-drop").show();
|
||||
$(".empty-images").hide();
|
||||
|
||||
// Add thumbnail to Bludit Images V8
|
||||
imagesV8.addThumbnail( response.filename );
|
||||
|
||||
// Add thumbnail to Quick Images
|
||||
quickImages.addThumbnail( response.filename );
|
||||
},
|
||||
|
||||
notallowed: function(file, settings) {
|
||||
alert("'.$L->g('Supported image file types').' "+settings.allow);
|
||||
}
|
||||
};
|
||||
|
||||
UIkit.uploadSelect($("#bludit-images-v8-file-select"), settings);
|
||||
UIkit.uploadDrop($("#bludit-images-v8-upload"), settings);
|
||||
});
|
||||
</script>
|
144
bl-kernel/js/bludit-menu-v8.js
Normal file
144
bl-kernel/js/bludit-menu-v8.js
Normal file
@ -0,0 +1,144 @@
|
||||
<script>
|
||||
|
||||
var menuV8 = new function() {
|
||||
|
||||
this.filenameSelected = null;
|
||||
|
||||
this.getFilename = function() {
|
||||
return this.filenameSelected;
|
||||
}
|
||||
|
||||
this.setFilename = function(filename) {
|
||||
this.filenameSelected = filename;
|
||||
}
|
||||
|
||||
this.hideMenu = function() {
|
||||
|
||||
// Check if the menu is visible.
|
||||
if($("#bludit-menuV8").is(":visible")) {
|
||||
|
||||
// Hide the menu.
|
||||
$("#bludit-menuV8").hide();
|
||||
|
||||
// Clean thumbnail borders.
|
||||
$(".bludit-thumbnail").css("border", "1px solid #ddd");
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.showMenu = function(filenameSelected, positonX, positonY) {
|
||||
|
||||
// Store the image selected.
|
||||
this.setFilename( filenameSelected );
|
||||
|
||||
console.log("Image selected: " + this.getFilename());
|
||||
|
||||
// Position the menu v8.
|
||||
$("#bludit-menuV8").css({
|
||||
left: positonX + "px",
|
||||
top: positonY + "px"
|
||||
});
|
||||
|
||||
// Show the menu v8.
|
||||
$("#bludit-menuV8").show();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
// Click on document.
|
||||
$(document).bind("click", function(e) {
|
||||
|
||||
// Deny hide if the click is over the thumbnail.
|
||||
if($(e.target).is("img.bludit-thumbnail")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Hide the menu.
|
||||
menuV8.hideMenu(e);
|
||||
|
||||
});
|
||||
|
||||
// Click over thumbnail.
|
||||
$("body").on("click", "img.bludit-thumbnail", function(e) {
|
||||
|
||||
console.log("Thumbnail click");
|
||||
|
||||
// Clean all thumbnail borders.
|
||||
$(".bludit-thumbnail").css("border", "1px solid #ddd");
|
||||
|
||||
// Thumbnail selected.
|
||||
var thumbnail = $(this);
|
||||
|
||||
// Add border to the thumbnail selected.
|
||||
thumbnail.css("border", "solid 3px orange");
|
||||
|
||||
// Filename of the selected image.
|
||||
var filenameSelected = thumbnail.attr("data-filename");
|
||||
|
||||
// SHow menu in position X and Y of the mouse.
|
||||
menuV8.showMenu( filenameSelected, e.pageX, e.pageY );
|
||||
|
||||
});
|
||||
|
||||
// Insert image
|
||||
$("body").on("click", "#bludit-menuV8-insert", function(e) {
|
||||
|
||||
// This function is defined in each editor plugin.
|
||||
editorAddImage( menuV8.getFilename() );
|
||||
|
||||
});
|
||||
|
||||
// Set cover image
|
||||
$("body").on("click", "#bludit-menuV8-cover", function(e) {
|
||||
|
||||
coverImage.set( menuV8.getFilename() );
|
||||
|
||||
});
|
||||
|
||||
// Delete image
|
||||
$("body").on("click", "#bludit-menuV8-delete", function(e) {
|
||||
|
||||
var filenameSelected = menuV8.getFilename();
|
||||
|
||||
if(filenameSelected==null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
ajaxRequest = $.ajax({
|
||||
type: "POST",
|
||||
data:{ filename: filenameSelected },
|
||||
url: "<?php echo HTML_PATH_ADMIN_ROOT.'ajax/delete-file' ?>"
|
||||
});
|
||||
|
||||
// Callback handler that will be called on success
|
||||
ajaxRequest.done(function (response, textStatus, jqXHR){
|
||||
|
||||
// Remove the thumbnail from Images v8
|
||||
imagesV8.removeThumbnail( filenameSelected );
|
||||
|
||||
// Remove the thumbnail from Quick Images
|
||||
quickImages.removeThumbnail( filenameSelected );
|
||||
|
||||
console.log("Delete image: AJAX request done, message: "+response["msg"]);
|
||||
});
|
||||
|
||||
// Callback handler that will be called on failure
|
||||
ajaxRequest.fail(function (jqXHR, textStatus, errorThrown){
|
||||
console.log("Delete image: AJAX request fail");
|
||||
});
|
||||
|
||||
// Callback handler that will be called regardless
|
||||
// if the request failed or succeeded
|
||||
ajaxRequest.always(function () {
|
||||
console.log("Delete image: AJAX request always");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
33
bl-kernel/js/bludit-quick-images.js
Normal file
33
bl-kernel/js/bludit-quick-images.js
Normal file
@ -0,0 +1,33 @@
|
||||
<script>
|
||||
|
||||
var quickImages = new function() {
|
||||
|
||||
this.addThumbnail = function(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\">");
|
||||
|
||||
}
|
||||
|
||||
this.removeThumbnail = function(filename) {
|
||||
|
||||
// Remove the thumbnail
|
||||
$("#bludit-quick-images-thumbnails > img[data-filename=\""+filename+"\"]").remove();
|
||||
|
||||
if($("#bludit-quick-images-thumbnails > img").length == 0) {
|
||||
// Show box "There are no images"
|
||||
$(".empty-images").show();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
@ -223,9 +223,13 @@
|
||||
"cover-image": "Cover image",
|
||||
"blog": "Blog",
|
||||
"more-images": "More images",
|
||||
"double-click-on-the-image-to-add-it": "Double click on the image to add it.",
|
||||
|
||||
"click-here-to-cancel": "Click here to cancel.",
|
||||
"type-the-tag-and-press-enter": "Type the tag and press enter.",
|
||||
"manage-your-bludit-from-the-admin-panel": "Manage your Bludit from the [admin area]({{ADMIN_AREA_LINK}})",
|
||||
"there-are-no-images":"There are no images"
|
||||
"there-are-no-images":"There are no images",
|
||||
|
||||
"click-on-the-image-for-options": "Click on the image for options.",
|
||||
"set-as-cover-image": "Set as cover image",
|
||||
"delete-image": "Delete image"
|
||||
}
|
@ -105,6 +105,10 @@ class pluginsimpleMDE extends Plugin {
|
||||
simplemde.value(text + content + "\n");
|
||||
}'.PHP_EOL;
|
||||
|
||||
$html .= 'function editorAddImage(filename) {
|
||||
addContentSimpleMDE("![alt text]("+filename+")");
|
||||
}'.PHP_EOL;
|
||||
|
||||
$html .= '$(document).ready(function() { '.PHP_EOL;
|
||||
$html .= 'simplemde = new SimpleMDE({
|
||||
element: document.getElementById("jscontent"),
|
||||
@ -125,12 +129,6 @@ class pluginsimpleMDE extends Plugin {
|
||||
toolbar: ['.Sanitize::htmlDecode($this->getDbField('toolbar')).']
|
||||
});';
|
||||
|
||||
// This is the event for Bludit images
|
||||
$html .= '$("body").on("dblclick", "img.bludit-thumbnail", function() {
|
||||
var filename = $(this).data("filename");
|
||||
addContentSimpleMDE("![alt text]("+filename+")");
|
||||
});';
|
||||
|
||||
$html .= '}); </script>';
|
||||
}
|
||||
|
||||
|
@ -361,7 +361,7 @@ function install($adminPassword, $email, $timezoneOffset)
|
||||
'uriPage'=>'/',
|
||||
'uriTag'=>'/tag/',
|
||||
'url'=>PROTOCOL.DOMAIN.HTML_PATH_ROOT,
|
||||
'cliMode'=>'true',
|
||||
'cliMode'=>false,
|
||||
'emailFrom'=>'no-reply@'.DOMAIN
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user