From 06918008f224fcf1cb7a5e45431b21e40feb7549 Mon Sep 17 00:00:00 2001 From: Francisco <54645175+franciscoarocas@users.noreply.github.com> Date: Mon, 31 Aug 2020 15:22:12 +0100 Subject: [PATCH] Created file manager for scEditor --- admin/adminAjaxOperations.php | 17 +- admin/panels/entry/admin.entry.write.tpl | 18 +- admin/res/admin.css | 45 ++++- admin/res/admin.js | 165 ++++++++++++++++-- admin/res/icons/drive_disk.png | Bin 695 -> 0 bytes admin/res/images/file.png | Bin 0 -> 294 bytes admin/res/images/folder.png | Bin 0 -> 537 bytes admin/res/images/image.png | Bin 0 -> 516 bytes admin/res/mediaModalIcons.png | Bin 0 -> 1159 bytes .../sceditor/plugins/flatPressFileManager.js | 2 +- ajax.php | 3 - 11 files changed, 223 insertions(+), 27 deletions(-) delete mode 100644 admin/res/icons/drive_disk.png create mode 100644 admin/res/images/file.png create mode 100644 admin/res/images/folder.png create mode 100644 admin/res/images/image.png create mode 100644 admin/res/mediaModalIcons.png diff --git a/admin/adminAjaxOperations.php b/admin/adminAjaxOperations.php index 3ed68d8..8de9e58 100644 --- a/admin/adminAjaxOperations.php +++ b/admin/adminAjaxOperations.php @@ -3,10 +3,21 @@ $AjaxFunctionMap = []; -$AjaxFunctionHelloWorld = function($args) { /* Just for testing */ - returnJSONValue(AJAXSUCCESS, 'Hello World : '.$args[0]); +$AjaxFunctionListMediaDirectory = function($route) { /* Just for testing */ + $newRoute = FP_CONTENT . $route; + $dirContent = scandir($newRoute); + if(!$dirContent) { + throw new Exception('Error when trying to access the folder'.$newRoute); + } + $result = []; + for($i = 2; $i < sizeof($dirContent); ++$i) { // Result = [[dir1, true], [file1, false], [file2, false]] ... + array_push($result, []); + array_push($result[$i - 2], $dirContent[$i]); + array_push($result[$i - 2], is_dir($newRoute . $dirContent[$i])); // True if is dir, false is not + } + return $result; }; -$AjaxFunctionMap['Hello World'] = $AjaxFunctionHelloWorld; +$AjaxFunctionMap['ListMediaDirectory'] = $AjaxFunctionListMediaDirectory; ?> \ No newline at end of file diff --git a/admin/panels/entry/admin.entry.write.tpl b/admin/panels/entry/admin.entry.write.tpl index b13465f..5f809a1 100755 --- a/admin/panels/entry/admin.entry.write.tpl +++ b/admin/panels/entry/admin.entry.write.tpl @@ -149,7 +149,23 @@
- NOT WORKING YEY :( +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/admin/res/admin.css b/admin/res/admin.css index c1a5e55..e0699b5 100755 --- a/admin/res/admin.css +++ b/admin/res/admin.css @@ -314,8 +314,6 @@ ul { } .sidebar .nav-link:hover { - padding-left: 2rem; - transition: 1s; background-color: #f9f9f9; } @@ -710,11 +708,50 @@ img { background-repeat: no-repeat; } +.sceditor-button-flatPressFileManager div { + background-position: 0px -416px !important; +} + +/* Modal to upload files */ + #flatpress-files-modal .modal-header { background-color: #aa4142; color: #fff; } -.sceditor-button-flatPressFileManager div { - background-position: 0px -416px !important; +.flatpress-files-modal-box { + background-color: #e9ecef; + border: 1px solid #ced4da; + border-radius: .25rem; + margin-right: 15px; + margin-left: 15px; + overflow: auto; + scrollbar-width: thin; +} + +#mediaDirectory ul { + list-style: none; + margin: 0px; + padding: 0px; +} + +#mediaDirectory li { + background-position-x: left; + background-position-y: center; + background-repeat: no-repeat; + cursor: pointer; +} + +#mediaDirectory li img { + margin-right: 0.3rem; + margin-bottom: 0.1rem; +} + +#flatpress-files-modal .visualizator { + height: 300px; +} + +.managerTypeFile { + width: 16px; + height: 16px; } \ No newline at end of file diff --git a/admin/res/admin.js b/admin/res/admin.js index b60e167..96bcda1 100644 --- a/admin/res/admin.js +++ b/admin/res/admin.js @@ -1,10 +1,10 @@ // This function generates the menu icons function generate_menu_icons() { - var admin_tabs = ["main","entry","static","uploader","widgets","plugin","themes","config","maintain"]; - var admin_icons = ["panel","pencil-alt2","file","upload","move","hummer","palette","settings","check-box"]; - for(var i=0; i"); } } @@ -12,9 +12,9 @@ function generate_menu_icons() { // Responsive functions function mobile_close_button() { // This close the menu and show the page - var open_element1 = document.getElementsByClassName("mobile_menu_hide"); - var open_element2 = document.getElementById("sidebar"); - for(var i=0; i openNewDirectory('..'); + mediaDirectoryULDOM.appendChild(currentMediaDirectoryLI); + } + for(let i = 0; i < DirectoryList.length; ++i) { + let currentMediaDirectoryLI = document.createElement('li'); + currentMediaDirectoryLI.innerHTML = DirectoryList[i][0]; // File or directory name + if(DirectoryList[i][1]) { // It is a directory + currentMediaDirectoryLI.onclick = () => openNewDirectory(DirectoryList[i][0]); // Directory name + } else { // It is a file + currentMediaDirectoryLI.onclick = () => openNewFile(DirectoryList[i][0]); // File name + } + writeLiContent(currentMediaDirectoryLI,DirectoryList[i][0], DirectoryList[i][1]); // Content = Icon + fileName + mediaDirectoryULDOM.appendChild(currentMediaDirectoryLI); + } + mediaDirectoryModal.innerHTML = ''; + mediaDirectoryModal.appendChild(mediaDirectoryULDOM); + changeDirectoryInput(); +} + +const PARENT_DIRECTORY_REGEX = /[^\/]+\/?$/; + +function writeLiContent(currentMediaDirectoryLI, fileName, isDirectory) { + const fileExtension = detectTypeFile(fileName); + let imageName; + if(isDirectory) { + imageName = 'folder'; + } else { + switch(fileExtension) { + case IMAGE: { + imageName = 'image'; + break; + } + default: { + imageName = 'file'; + } + } + } + let currentImage = ''; + currentMediaDirectoryLI.innerHTML = currentImage + fileName; +} + +function openNewDirectory(DirectoryName) { + if(DirectoryName === '..') { // Go Back + /* Delete last directory name from variable */ + mediaManagerRoute = mediaManagerRoute.substr(0, mediaManagerRoute.length - PARENT_DIRECTORY_REGEX.exec(DirectoryName)); + } else { + mediaManagerRoute += DirectoryName + '/'; + } + $.post('ajax.php', {Operation : 'ListMediaDirectory', Arguments : mediaManagerRoute}, function(data) { + data = JSON.parse(data); + if(data.result) { + showDirectory(data.content); + } else { + //throw new Error(data.content); + } + }); +} + +function openNewFile(FileName) { + const fileType = detectTypeFile(FileName); + const functionType = FUNCTION_BY_FILE_FORMAT.get(fileType); + functionType(FileName); +} + +function changeDirectoryInput() { + const directoryInput = document.getElementById('directoryInput'); + directoryInput.value = '/' + mediaManagerRoute; +} + +const FILE = 0; +const IMAGE = 1; +const VIDEO = 2; +const AUDIO = 3; + +const REGEX_FILE_DETECTOR = /\.([^\.]+)$/; + +/* Video and Audio files not implemented yet */ +const FILE_EXTENSIONS_MAP = new Map(); + +FILE_EXTENSIONS_MAP.set('jpg', IMAGE); +FILE_EXTENSIONS_MAP.set('jpeg', IMAGE); +FILE_EXTENSIONS_MAP.set('gif', IMAGE); +FILE_EXTENSIONS_MAP.set('png', IMAGE); + +function detectTypeFile(FileName) { + // It detects if is and image, a file, etc. + const fileExtension = REGEX_FILE_DETECTOR.exec(FileName); + if(fileExtension === null) return FILE; + const fileExtensionDetection = FILE_EXTENSIONS_MAP.get(fileExtension[1]); + if(!fileExtensionDetection) { + return FILE; + } + return fileExtensionDetection; +} + +const FUNCTION_BY_FILE_FORMAT = new Map(); + +const INSERT_MEDIA_BUTTON = ''; + +FUNCTION_BY_FILE_FORMAT.set(IMAGE, function(imageURL) { + const img = ''; + changeMediaPreviewContent(img); +}); + +FUNCTION_BY_FILE_FORMAT.set(FILE, function(fileURL) { + changeMediaPreviewContent('

No file preview

'); +}); + +function changeMediaPreviewContent(content) { + const mediaPreviewDiv = document.getElementById('mediaPreview'); + mediaPreviewDiv.innerHTML = content; + const modalFooter = document.getElementById('FilesModalFooter'); + modalFooter.innerHTML = INSERT_MEDIA_BUTTON; +} + +function insertMediaInSceditor() { + } \ No newline at end of file diff --git a/admin/res/icons/drive_disk.png b/admin/res/icons/drive_disk.png deleted file mode 100644 index 5a51e81988a96ea36d999f1cd6c16f6def894aa4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 695 zcmV;o0!aOdP)8>xgSt#M+4&ytoi#D*N41Z+^B#|P?m6e)_e2b?4zY&OB_}=DAs^R7#8!Y=OY%G)-&ea=GZxpJUOcs;X$US{MulrCP1l zj1&;#EnU|!8jTQ(#pa+zAg_nRAu^c^^7%ZI-k|NK=yW;}dp4VeX_~v_vK0mjAt1|g z#GX#4kxVAhXf)98_e%=1vvl^#hvM;g6c6fKNRybU<6(bF!;fGm( zXAbWw%ru!yU>HVJAZ84L0Nc|HimNAZc{zn=uZOsK_2jO)JZ>3y5u9IAMtJqZ@6xbyTAC>K0R6i|e-w$hhSe<|P&aDrLuIK1~Z zY~O<{sSJU@j%f8L}k)_ncR%Yp;$U*>^^d=_ENrHe3iQt_Z2vVu}yz dAF*M&_z5zVZIKEdC#5QQ<|d}62BjvZR2H60wE-&H;pyTSqH(@-Vl>|&1p(LP>kg~E zYiz5X^`c$+%8#zC{u)yfe-5 zmgid={Z3k(ERKCKrE7DF;=x4^O+ pzO8rLO8p|Ip=x)jHOtWj`bJBmKdh_V<`47(gQu&X%Q~loCIFbEay|e6 literal 0 HcmV?d00001 diff --git a/admin/res/images/folder.png b/admin/res/images/folder.png new file mode 100644 index 0000000000000000000000000000000000000000..784e8fa48234f4f64b6922a6758f254ee0ca08ec GIT binary patch literal 537 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 $currentFunction) { /* Recibe $POST to access ajax Function */ -$_POST['Operation'] = 'Hello World'; // Test -$_POST['Arguments'] = 'BLa bLa bLa'; // Test - if(isset($_POST)) { if(!isset($_POST['Operation'])) {