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 @@ + 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 5a51e81..0000000 Binary files a/admin/res/icons/drive_disk.png and /dev/null differ diff --git a/admin/res/images/file.png b/admin/res/images/file.png new file mode 100644 index 0000000..8b8b1ca Binary files /dev/null and b/admin/res/images/file.png differ diff --git a/admin/res/images/folder.png b/admin/res/images/folder.png new file mode 100644 index 0000000..784e8fa Binary files /dev/null and b/admin/res/images/folder.png differ diff --git a/admin/res/images/image.png b/admin/res/images/image.png new file mode 100644 index 0000000..fc3c393 Binary files /dev/null and b/admin/res/images/image.png differ diff --git a/admin/res/mediaModalIcons.png b/admin/res/mediaModalIcons.png new file mode 100644 index 0000000..5a11542 Binary files /dev/null and b/admin/res/mediaModalIcons.png differ diff --git a/admin/res/sceditor/plugins/flatPressFileManager.js b/admin/res/sceditor/plugins/flatPressFileManager.js index 9751c44..665b9e8 100644 --- a/admin/res/sceditor/plugins/flatPressFileManager.js +++ b/admin/res/sceditor/plugins/flatPressFileManager.js @@ -17,7 +17,7 @@ sceditor.command.set('flatPressFileManager', { An a open bootstrap modal function The modal html is in the .tpl file, where sceditor is included */ - $('#flatpress-files-modal').modal('show'); + open_media_manager(); }, tooltip: 'Open FlatPress File Manager' }); diff --git a/ajax.php b/ajax.php index ccbd5e4..cdeb4ed 100644 --- a/ajax.php +++ b/ajax.php @@ -59,9 +59,6 @@ foreach($AjaxFunctionMap as $currentName => $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'])) {