Files (documents and archives): uploading, inserting

This commit is contained in:
Andy Green 2017-12-14 11:53:30 +03:00
parent 530e0e2108
commit fcc13d55fa
16 changed files with 541 additions and 6 deletions

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ bl-plugins/timemachine
bl-plugins/remote-content
bl-kernel/bludit.pro.php
bl-themes/docs
*.geany

View File

@ -589,6 +589,116 @@ table.statistics tr:last-child td {
}
/* ----------- BLUDIT FILES V8 ----------- */
#bludit-files-v8 {
}
#bludit-files-v8-upload {
width: 100%;
padding: 0;
margin-bottom: 15px !important;
}
#bludit-files-v8-drag-drop {
padding: 20px;
}
#bludit-files-v8-progressbar {
display: none;
margin: 20px;
}
#bludit-files-v8-thumbnails {
max-height: 350px;
overflow: auto;
font-size: 0;
}
#bludit-files-v8-items .bludit-file-item {
width: 49% !important;
}
/* Bludit File Menu v8 */
#bludit-filemenuV8 {
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-filemenuV8 li {
padding: 8px 12px;
cursor: pointer;
}
#bludit-filemenuV8 li:hover {
background-color: #2672ec;
color: #fff;
}
#bludit-filemenuV8 li i {
margin-right: 10px;
}
/* ----------- BLUDIT QUICK FILES ----------- */
#bludit-quick-files {
}
#bludit-quick-files a.moreFiles {
margin: 15px 0 0;
width: 100%;
background: #F5F5F5 !important;
color: #555;
}
#bludit-quick-files h4.label {
background: #f8f8f8;
color: #aaa;
padding: 2px 5px;
font-size: 0.9em;
}
#bludit-quick-files-items {
font-size: auto;
}
#bludit-quick-files-items .bludit-file-item {
width: 100%;
}
/* ----------- BLUDIT FILE ITEMS ----------- */
.bludit-file-item {
border: 1px solid white;
border-radius: 4px;
box-sizing: border-box;
display: inline-block;
height: auto;
margin: 2px;
padding: 4px 2px;
cursor: default;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.bludit-file-item:hover {
border: 1px solid #ddd;
}
.bludit-border-active {
border: solid 3px orange !important;
}
/* ----------- BLUDIT PROFILE PICTURE ----------- */
#bludit-profile-picture-drag-drop {

View File

@ -215,7 +215,7 @@ class HTML {
<div id="bludit-quick-images-thumbnails" onmousedown="return false">
';
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true);
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','{'.ALLOWED_EXTENSIONS_IMAGES.'}',true);
array_splice($thumbnailList, THUMBNAILS_AMOUNT);
foreach($thumbnailList as $file) {
$filename = basename($file);
@ -323,7 +323,7 @@ class HTML {
<div id="bludit-images-v8-thumbnails">
';
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','*',true);
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS,'*','{'.ALLOWED_EXTENSIONS_IMAGES.'}',true);
foreach($thumbnailList as $file) {
$filename = basename($file);
$html .= '<img class="bludit-thumbnail" src="'.HTML_PATH_UPLOADS_THUMBNAILS.$filename.'" data-filename="'.$filename.'" alt="Thumbnail">';
@ -347,6 +347,111 @@ class HTML {
echo $html;
}
public static function bluditQuickFiles()
{
// Javascript code
include(PATH_JS.'bludit-quick-files.js');
global $L;
$html = '<!-- BLUDIT QUICK FILES -->';
$html .= '
<div id="bludit-quick-files">
<div id="bludit-quick-files-items" onmousedown="return false">
';
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS,'*','{'.ALLOWED_EXTENSIONS_FILES.'}',true);
array_splice($thumbnailList, THUMBNAILS_AMOUNT);
foreach($thumbnailList as $file) {
$filename = basename($file);
$html .= '<div class="bludit-file-item" data-filename="'.$filename.'" >'.$filename.'</div>';
}
$html .= '
</div>
';
$html .= '<div class="empty-files uk-block uk-text-center uk-block-muted" '.( !empty($thumbnailList)?'style="display:none"':'' ).'>'.$L->g('There are no files').'</div>';
$html .= '
<a data-uk-modal href="#bludit-files-v8" class="moreImages uk-button">'.$L->g('Upload and more files').'</a>
</div>
';
echo $html;
}
public static function bluditFileMenuV8()
{
// Javascript code
include(PATH_JS.'bludit-filemenu-v8.js');
global $L;
$html = '<!-- BLUDIT FILEMENU V8 -->';
$html .= '
<ul id="bludit-filemenuV8">
<li id="bludit-filemenuV8-insert"><i class="uk-icon-plus"></i>'.$L->g('Insert file').'</li>
<li id="bludit-filemenuV8-delete"><i class="uk-icon-trash"></i>'.$L->g('Delete file').'</li>
</ul>
';
echo $html;
}
public static function bluditFilesV8()
{
global $L;
// Javascript code
include(PATH_JS.'bludit-files-v8.js');
$html = '<!-- BLUDIT FILES V8 -->';
$html .= '
<div id="bludit-files-v8" class="uk-modal">
<div class="uk-modal-dialog">
<div id="bludit-files-v8-upload" class="uk-form-file uk-placeholder uk-text-center">
<div id="bludit-files-v8-drag-drop">
<div><i class="uk-icon-picture-o"></i> '.$L->g('Upload file').'</div>
<div style="font-size:0.8em;">'.$L->g('Drag and drop or click here').'<input id="bludit-files-v8-file-select" type="file"></div>
</div>
<div id="bludit-files-v8-progressbar" class="uk-progress">
<div class="uk-progress-bar" style="width: 0%;">0%</div>
</div>
</div>
<div id="bludit-files-v8-items">
';
$thumbnailList = Filesystem::listFiles(PATH_UPLOADS,'*','{'.ALLOWED_EXTENSIONS_FILES.'}',true);
foreach($thumbnailList as $file) {
$filename = basename($file);
$html .= '<div class="bludit-file-item" data-filename="'.$filename.'">'.$filename.'</div>';
}
$html .= '
</div>
';
$html .= '<div class="empty-files uk-block uk-text-center uk-block-muted" '.( !empty($thumbnailList)?'style="display:none"':'' ).'>'.$L->g('There are no files').'</div>';
$html .= '
<div class="uk-modal-footer">
'.$L->g('Click on the file for options').' <a href="" class="uk-modal-close">'.$L->g('Click here to cancel').'</a>
</div>
</div>
</div>
';
echo $html;
}
public static function profileUploader($username)

View File

@ -114,6 +114,22 @@ echo '<div class="bl-publish-sidebar uk-width-2-10">';
echo '</li>';
// FILES TAB
// --------------------------------------------------------------------
echo '<li><h2 class="sidebar-button" data-view="sidebar-files-view"><i class="uk-icon-angle-down"></i> '.$L->g('Files').'</h2></li>';
echo '<li id="sidebar-files-view" class="sidebar-view">';
// --- BLUDIT QUICK FILES ---
HTML::bluditQuickFiles();
// --- BLUDIT FILES V8 ---
HTML::bluditFilesV8();
// --- BLUDIT FILE MENU V8 ---
HTML::bluditFileMenuV8();
echo '</li>';
// TAGS
// --------------------------------------------------------------------

View File

@ -93,6 +93,22 @@ echo '<div class="bl-publish-sidebar uk-width-2-10">';
echo '</li>';
// FILES TAB
// --------------------------------------------------------------------
echo '<li><h2 class="sidebar-button" data-view="sidebar-files-view"><i class="uk-icon-angle-down"></i> '.$L->g('Files').'</h2></li>';
echo '<li id="sidebar-files-view" class="sidebar-view">';
// --- BLUDIT QUICK FILES ---
HTML::bluditQuickFiles();
// --- BLUDIT FILES V8 ---
HTML::bluditFilesV8();
// --- BLUDIT FILE MENU V8 ---
HTML::bluditFileMenuV8();
echo '</li>';
// TAGS
// --------------------------------------------------------------------
echo '<li><h2 class="sidebar-button" data-view="sidebar-tags-view"><i class="uk-icon-angle-down"></i> '.$L->g('Tags').'</h2></li>';

View File

@ -15,7 +15,7 @@ $filename = Text::replace(' ', '', $filename);
$filename = Text::replace('_', '', $filename);
// Check extension
$validExtension = array('tiff', 'gif', 'png', 'jpg', 'jpeg', 'bmp', 'svg');
$validExtension = explode(',',ALLOWED_EXTENSIONS_IMAGES.ALLOWED_EXTENSIONS_FILES);
if (!in_array($fileExtension, $validExtension)) {
$validExtensionString = implode(',', $validExtension);
exit (json_encode(array(
@ -58,6 +58,16 @@ if ($type=='profilePicture') {
$absoluteURLThumbnail = '';
$absolutePath = PATH_UPLOADS_PROFILES.$tmpName;
}
// --- FILES ---
else if ($type=='bludit-files-v8') {
// Move the original to the upload folder
rename($originalFile, PATH_UPLOADS.$tmpName);
// Paths
$absoluteURL = DOMAIN_UPLOADS.$tmpName;
$absoluteURLThumbnail = '';
$absolutePath = PATH_UPLOADS.$tmpName;
}
// --- OTHERS ---
else {
// Exclude generate thumbnail for SVG format
@ -89,7 +99,7 @@ if (Sanitize::pathFile($originalFile)) {
exit (json_encode(array(
'status'=>0,
'message'=>'Image uploaded success.',
'message'=>'File uploaded success.',
'filename'=>$tmpName,
'absoluteURL'=>$absoluteURL,
'absoluteURLThumbnail'=>$absoluteURLThumbnail,

View File

@ -76,6 +76,10 @@ define('ALERT_STATUS_OK', 0);
// Alert status fail
define('ALERT_STATUS_FAIL', 1);
// Allowed file extensions
define('ALLOWED_EXTENSIONS_IMAGES','jpg,jpeg,gif,png');
define('ALLOWED_EXTENSIONS_FILES','doc,docx,xls,xlsx,ppt,pptx,rtf,pdf,zip,rar');
// Amount of thumbnails shown on Bludit Quick images
define('THUMBNAILS_AMOUNT', 6);

View File

@ -24,7 +24,7 @@ class Filesystem {
public static function listFiles($path, $regex='*', $extension='*', $sortByDate=false)
{
$files = glob($path.$regex.'.'.$extension);
$files = glob($path.$regex.'.'.$extension,GLOB_BRACE);
if (empty($files)) {
return array();

View File

@ -0,0 +1,153 @@
<script>
var filemenuV8 = 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-filemenuV8").is(":visible")) {
// Hide the menu.
$("#bludit-filemenuV8").hide();
// Clean thumbnail borders.
$(".bludit-file-item").removeClass("bludit-border-active");
}
}
this.showMenu = function(filenameSelected, positonX, positonY) {
// Store the image selected.
this.setFilename( filenameSelected );
console.log("File selected: " + this.getFilename());
// Position the menu v8.
$("#bludit-filemenuV8").css({
left: positonX + "px",
top: positonY + "px"
});
// Show the menu v8.
$("#bludit-filemenuV8").show();
}
}
// This function is the default to add the image to the textarea.
// Only call when the textarea doesn't have a HTML Editor enabled.
function editorAddLinkDefault(filename) {
var textarea = $("#jscontent");
var imgHTML = '<a href="'+HTML_PATH_UPLOADS+filename+'" alt="">'+filename+"</a>";
textarea.val(textarea.val() + imgHTML);
}
$(document).ready(function() {
// Click on document.
$(document).bind("click", function(e) {
// Deny hide if the click is over the thumbnail.
if($(e.target).is("div.bludit-file-item")) {
return false;
}
// Hide the menu.
filemenuV8.hideMenu(e);
});
// Click over thumbnail.
$("body").on("click", "div.bludit-file-item", function(e) {
console.log("File item click");
// Clean all thumbnail borders.
$(".bludit-file-item").removeClass("bludit-border-active");
// Thumbnail selected.
var thumbnail = $(this);
// Add border to the thumbnail selected.
thumbnail.addClass("bludit-border-active");
// Filename of the selected image.
var filenameSelected = thumbnail.attr("data-filename");
// Show menu in position X and Y of the mouse.
filemenuV8.showMenu( filenameSelected, e.pageX, e.pageY );
});
// Insert file link
$("body").on("click", "#bludit-filemenuV8-insert", function(e) {
if(typeof editorAddLink == 'function') {
// This function is defined in each editor plugin.
editorAddLink( filemenuV8.getFilename() );
}
else {
editorAddLinkDefault( filemenuV8.getFilename() );
}
});
// Delete file
$("body").on("click", "#bludit-filemenuV8-delete", function(e) {
var filenameSelected = filemenuV8.getFilename();
if(filenameSelected==null) {
return false;
}
ajaxRequest = $.ajax({
type: "POST",
data:{ tokenCSRF: tokenCSRF, 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
filesV8.removeThumbnail( filenameSelected );
// Remove the thumbnail from Quick Images
quickFiles.removeThumbnail( filenameSelected );
console.log("Delete file: AJAX request done, message: "+response["msg"]);
});
// Callback handler that will be called on failure
ajaxRequest.fail(function (jqXHR, textStatus, errorThrown){
console.log("Delete file: AJAX request fail");
});
// Callback handler that will be called regardless
// if the request failed or succeeded
ajaxRequest.always(function () {
console.log("Delete file: AJAX request always");
});
});
});
</script>

View File

@ -0,0 +1,68 @@
<script>
var filesV8 = new function() {
this.addThumbnail = function(filename) {
// Add the new thumbnail to Bludit Files v8
$("#bludit-files-v8-items").prepend("<div class=\"bludit-file-item\" data-filename=\""+filename+"\" >"+filename+"</div>");
}
this.removeThumbnail = function(filename) {
// Remove the thumbnail
$("#bludit-files-v8-items > div[data-filename=\""+filename+"\"]").remove();
if($("#bludit-files-v8-items > div").length == 0) {
// Show box "There are no images"
$(".empty-files").show();
}
}
}
$(document).ready(function() {
var files_settings =
{
type: "json",
action: HTML_PATH_ADMIN_ROOT+"ajax/uploader",
allow : "*.("+ALLOWED_EXTENSIONS_FILES+")",
params: {"tokenCSRF":tokenCSRF, "type":"bludit-files-v8"},
loadstart: function() {
$("#bludit-files-v8-progressbar").find(".uk-progress-bar").css("width", "0%").text("0%");
$("#bludit-files-v8-drag-drop").hide();
$("#bludit-files-v8-progressbar").show();
},
progress: function(percent) {
percent = Math.ceil(percent);
$("#bludit-files-v8-progressbar").find(".uk-progress-bar").css("width", percent+"%").text(percent+"%");
},
allcomplete: function(response) {
$("#bludit-files-v8-progressbar").find(".uk-progress-bar").css("width", "100%").text("100%");
$("#bludit-files-v8-progressbar").hide();
$("#bludit-files-v8-drag-drop").show();
$(".empty-files").hide();
// Add thumbnail to Bludit Files V8
//TODOME
filesV8.addThumbnail( response.filename );
// Add thumbnail to Quick Files
//TODOME
quickFiles.addThumbnail( response.filename );
},
notallowed: function(file, files_settings) {
alert("<?php echo $L->g('error').'. '.$L->g('Supported file types')?>: "+files_settings.allow);
}
};
UIkit.uploadSelect($("#bludit-files-v8-file-select"), files_settings);
UIkit.uploadDrop($("#bludit-files-v8-upload"), files_settings);
});
</script>

View File

@ -30,7 +30,7 @@ $(document).ready(function() {
{
type: "json",
action: HTML_PATH_ADMIN_ROOT+"ajax/uploader",
allow : "*.(jpg|jpeg|gif|png)",
allow : "*.("+ALLOWED_EXTENSIONS_IMAGES+")",
params: {"tokenCSRF":tokenCSRF, "type":"bludit-images-v8"},
loadstart: function() {

View File

@ -0,0 +1,33 @@
<script>
var quickFiles = new function() {
this.addThumbnail = function(filename) {
// Remove element if there are more than 6 items
if ($("#bludit-quick-files-items > div").length > 5) {
$("div:last-child", "#bludit-quick-files-items").remove();
}
// Add the new thumbnail to Quick files
$("#bludit-quick-files-items").prepend(
"<div class=\"bludit-file-item\" data-filename=\""+filename+"\" >"+filename+"</div>"
);
}
this.removeThumbnail = function(filename) {
// Remove the thumbnail
$("#bludit-quick-files-items > div[data-filename=\""+filename+"\"]").remove();
if($("#bludit-quick-files-items > div").length == 0) {
// Show box "There are no files"
$(".empty-files").show();
}
}
}
</script>

View File

@ -7,6 +7,8 @@ echo 'var HTML_PATH_ADMIN_ROOT = "'.HTML_PATH_ADMIN_ROOT.'";'.PHP_EOL;
echo 'var HTML_PATH_ADMIN_THEME = "'.HTML_PATH_ADMIN_THEME.'";'.PHP_EOL;
echo 'var HTML_PATH_UPLOADS = "'.HTML_PATH_UPLOADS.'";'.PHP_EOL;
echo 'var HTML_PATH_UPLOADS_THUMBNAILS = "'.HTML_PATH_UPLOADS_THUMBNAILS.'";'.PHP_EOL;
echo 'var ALLOWED_EXTENSIONS_IMAGES = "'.str_replace(',','|',ALLOWED_EXTENSIONS_IMAGES).'";'.PHP_EOL;
echo 'var ALLOWED_EXTENSIONS_FILES = "'.str_replace(',','|',ALLOWED_EXTENSIONS_FILES).'";'.PHP_EOL;
echo 'var PARENT = "'.PARENT.'";'.PHP_EOL;
echo 'var tokenCSRF = "'.$Security->getTokenCSRF().'";'.PHP_EOL;

View File

@ -59,17 +59,24 @@
"description": "Description",
"this-field-can-help-describe-the-content": "This field can help describe the content in a few words. No more than 150 characters.",
"images": "Images",
"files": "Files",
"error": "Error",
"supported-image-file-types": "Supported image file types",
"supported-data-file-types": "Supported data file types",
"cover-image": "Cover image",
"drag-and-drop-or-click-here": "Drag and drop or click here",
"there-are-no-images": "There are no images",
"there-are-no-files": "There are no files",
"upload-and-more-images": "Upload and more images",
"upload-and-more-files": "Upload and more files",
"click-on-the-image-for-options": "Click on the image for options.",
"click-on-the-file-for-options": "Click on the file for options.",
"click-here-to-cancel": "Click here to cancel.",
"insert-image": "Insert image",
"insert-file": "Insert file",
"set-as-cover-image": "Set as cover image",
"delete-image": "Delete image",
"delete-file": "Delete file",
"tags": "Tags",
"add": "Add",
"status": "Status",
@ -183,6 +190,7 @@
"token": "Token",
"current-status": "Current status",
"upload-image": "Upload image",
"upload-file": "Upload file",
"the-changes-have-been-saved": "The changes have been saved",
"label": "Label",
"links": "Links",

View File

@ -109,6 +109,11 @@ class pluginsimpleMDE extends Plugin {
addContentSimpleMDE("!['.$Language->get('Image description').']("+filename+")");
}'.PHP_EOL;
// This function is necesary on each Editor, it is used by Bludit Files v8.
$html .= 'function editorAddLink(filename) {
addContentSimpleMDE("["+filename+"]("+HTML_PATH_UPLOADS+filename+")");
}'.PHP_EOL;
$html .= '$(document).ready(function() { '.PHP_EOL;
$html .= 'simplemde = new SimpleMDE({
element: document.getElementById("jscontent"),

View File

@ -26,6 +26,10 @@ class pluginTinymce extends Plugin {
tinymce.activeEditor.insertContent("<img src=\""+filename+"\" alt=\"'.$Language->get('Image description').'\">" + "\n");
}
function editorAddLink(filename) {
tinymce.activeEditor.insertContent("<a href=\""+HTML_PATH_UPLOADS+filename+"\">"+filename+"</a>" + "\n");
}
tinymce.init({
selector: "#jscontent",
theme: "modern",