Created file manager for scEditor

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;
 
 ?>

admin/panels/entry/admin.entry.write.tpl

@@ -149,7 +149,23 @@
         </button>
       </div>
       <div class="modal-body">
-        NOT WORKING YEY :(
+	  	<div class="row">
+		  <div class="col-12" id="currentDirectory">
+		  	<input class="form-control mw-100" id="directoryInput" readonly>
+		  </div>
+		</div>
+	  	<div class="row visualizator">
+		  <div class="p-2 col-6 h-100">
+		  	<div class="flatpress-files-modal-box h-100 p-3" id="mediaDirectory"></div>
+		  </div>
+		  <div class="p-2 col-6 h-100">
+			<div class="flatpress-files-modal-box h-100" id="mediaPreview"></div>
+		  </div>
+		</div>
+      </div>
+	  <div class="modal-footer">
+	  	<div class="w-100 text-center" id="FilesModalFooter">
+		</div>
       </div>
     </div>
   </div>

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;
 }

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<admin_tabs.length; ++i) {
-		var new_span = document.getElementById("admin-link-"+admin_tabs[i]);
+	let admin_tabs = ["main","entry","static","uploader","widgets","plugin","themes","config","maintain"];
+	let admin_icons = ["panel","pencil-alt2","file","upload","move","hummer","palette","settings","check-box"];
+	for(let i=0; i<admin_tabs.length; ++i) {
+		let new_span = document.getElementById("admin-link-"+admin_tabs[i]);
 		new_span.insertAdjacentHTML('afterbegin', "<span class=\"ti-"+admin_icons[i]+"\"></span>");
 	}
 }
@@ -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<open_element1.length; ++i ) {
+	let open_element1 = document.getElementsByClassName("mobile_menu_hide");
+	let open_element2 = document.getElementById("sidebar");
+	for(let i=0; i<open_element1.length; ++i ) {
 		open_element1[i].classList.remove("display_off");
 	}
 	open_element2.classList.remove("display_on");
@@ -22,9 +22,9 @@ function mobile_close_button() {
 
 function mobile_open_button() {
 	// This open the menu and close the page
-	var open_element1 = document.getElementsByClassName("mobile_menu_hide");
-	var open_element2 = document.getElementById("sidebar");
-	for(var i=0; i<open_element1.length; ++i ) {
+	let open_element1 = document.getElementsByClassName("mobile_menu_hide");
+	let open_element2 = document.getElementById("sidebar");
+	for(let i=0; i<open_element1.length; ++i ) {
 		open_element1[i].classList.add("display_off");
 	}
 	open_element2.classList.add("display_on");
@@ -34,13 +34,148 @@ function mobile_open_button() {
 // Editor media functions
 // Create the button
 function set_media_button() {
-	var button = '<div class="sceditor-group"><a class="sceditor-button flatpress-media" onclick="open_media(FileManagerDir);"></a></div>';
+	let button = '<div class="sceditor-group"><a class="sceditor-button flatpress-media" onclick="open_media(FileManagerDir);"></a></div>';
 	$( ".sceditor-toolbar" ).append(button);
 }
 
+let mediaManagerRoute = '';
+
+/* Functions of FileManager */
 // Open the botton
-function open_media(FileManagerDir) {
-	FileManagerDir = FileManagerDir.concat("/plugin.sceditorfilemanager.php");
-	//$(".modal-body").load(FileManagerDir);
-	$('#flatpress-files-modal').modal();
+function open_media_manager() {
+	mediaManagerRoute = '';
+	$('#flatpress-files-modal').modal('show');
+	$.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 showDirectory(DirectoryList) {
+	let mediaDirectoryModal = document.getElementById('mediaDirectory');
+	let mediaDirectoryULDOM = document.createElement('ul');
+	if(mediaManagerRoute.length) { // We add ../ to back to parent Directory
+		let currentMediaDirectoryLI = document.createElement('li');
+		currentMediaDirectoryLI.innerHTML = "..";
+		currentMediaDirectoryLI.onclick = () => 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 = '<img src="admin/res/images/' + imageName + '.png" class="managerTypeFile">';
+	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 = '<button type="button" class="btn btn-primary" onclick="insertMediaInScedito()">Insert Media</button>';
+
+FUNCTION_BY_FILE_FORMAT.set(IMAGE, function(imageURL) {
+	const img = '<img src="' + 'fp-content/' + mediaManagerRoute + imageURL + '" class="img-fluid">';
+	changeMediaPreviewContent(img);
+});
+
+FUNCTION_BY_FILE_FORMAT.set(FILE, function(fileURL) {
+	changeMediaPreviewContent('<p>No file preview</p>');
+});
+
+function changeMediaPreviewContent(content) {
+	const mediaPreviewDiv = document.getElementById('mediaPreview');
+	mediaPreviewDiv.innerHTML = content;
+	const modalFooter = document.getElementById('FilesModalFooter');
+	modalFooter.innerHTML = INSERT_MEDIA_BUTTON;
+}
+
+function insertMediaInSceditor() {
+	
 }

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'
 });

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'])) {