From ffb9447352eea9a28db838154c15ebca36bda11e Mon Sep 17 00:00:00 2001 From: Marco Dickert Date: Tue, 4 Jul 2017 16:02:45 +0200 Subject: [PATCH] some organizational code changes, prepare for JS templates --- ifm.php | 693 ++++++++++++++++++++++++++++++++++----------------- src/ifm.js | 671 +++++++++++++++++++++++++++++++++---------------- src/main.php | 21 +- 3 files changed, 933 insertions(+), 452 deletions(-) diff --git a/ifm.php b/ifm.php index 78d5c1e..9ad20c5 100644 --- a/ifm.php +++ b/ifm.php @@ -186,14 +186,21 @@ ini_set( 'display_errors', 'OFF' ); class IFM { const VERSION = '2.4.0'; - public function __construct() { + private $config = array(); + + public function __construct( $config ) { session_start(); + if( ! is_array( $config ) ) { + trigger_error( "IFM: could not load config" ); + exit( 1 ); + } else { + $this->config = $config; + } } - /* - this function contains the client-side application + /** + * This function contains the client-side application */ - public function getApplication() { print ' @@ -488,19 +495,49 @@ this.activeTarget=b,this.clear();var c=this.selector+'[data-target="'+b+'"],'+th //# sourceMappingURL=ekko-lightbox.min.js.map - + @@ -1443,6 +1681,9 @@ ifm.init(); $this->getFiles( $_REQUEST["dir"] ); else $this->getFiles( "" ); + } + elseif( $_REQUEST["api"] == "getConfig" ) { + echo json_encode( IFMConfig::getConstants() ); } else { if( isset( $_REQUEST["dir"] ) && $this->isPathValid( $_REQUEST["dir"] ) ) { switch( $_REQUEST["api"] ) { @@ -2262,5 +2503,5 @@ ifm.init(); start program */ -$ifm = new IFM(); +$ifm = new IFM( IFMConfig::getConstants() ); $ifm->run(); diff --git a/src/ifm.js b/src/ifm.js index 71498a9..aafe3e2 100644 --- a/src/ifm.js +++ b/src/ifm.js @@ -1,16 +1,44 @@ -// IFM - js app - -function IFM() { +/** + * IFM constructor + */ +function IFM( params ) { var self = this; // reference to ourself, because "this" does not work within callbacks - this.IFM_SCFN = ""; - this.config = jQuery.parseJSON(''); // serialize the PHP config array, so we can use it in JS too + // set the backend for the application + if( ! params.api ) { + throw new Error( "IFM: no backend configured" ); + } else { + self.api = params.api; + } + + // load the configuration from the backend + $.ajax({ + url: self.api, + type: "POST", + data: { + api: "getConfig" + }, + dataType: "json", + success: function(d) { + self.config = d; + self.log( "configuration loaded" ); + }, + error: function() { + throw new Error( "IFM: could not load configuration" ); + } + }); + this.isDocroot = ; this.editor = null; // global ace editor this.fileChanged = false; // flag for check if file was changed already this.currentDir = ""; // this is the global variable for the current directory; it is used for AJAX requests - // modal functions + /** + * Shows a bootstrap modal + * + * @param string content - content of the modal + * @param object options - options for the modal + */ this.showModal = function( content, options = {} ) { var modal = $( document.createElement( 'div' ) ) .addClass( "modal fade" ) @@ -36,24 +64,38 @@ function IFM() { modal.modal('show'); }; + /** + * Hides a bootstrap modal + */ this.hideModal = function() { $('#ifmmodal').modal('hide'); }; + /** + * Reloads the file table + */ this.refreshFileTable = function () { - var id=self.generateGuid(); - self.task_add("Refresh", id); + var id = self.generateGuid(); + self.task_add( "Refresh", id ); $.ajax({ - url: self.IFM_SCFN, + url: self.api, type: "POST", - data: "api=getFiles&dir=" + self.currentDir, + data: { + api: "getFiles", + dir: self.currentDir + }, dataType: "json", success: self.rebuildFileTable, - error: function(response) { ifm.showMessage("General error occured: No or broken response", "e"); }, + error: function( response ) { self.showMessage( "General error occured: No or broken response", "e" ); }, complete: function() { self.task_done( id ); } }); }; + /** + * Rebuilds the file table with fetched items + * + * @param object data - object with items + */ this.rebuildFileTable = function( data ) { var newTBody = $(document.createElement('tbody')); for( var i=0; i < data.length; i++ ) { @@ -142,12 +184,18 @@ function IFM() { }); }; + /** + * Changes the current directory + * + * @param string newdir - target directory + * @param object options - options for changing the directory + */ this.changeDirectory = function( newdir, options={} ) { config = { absolute: false, pushState: true }; jQuery.extend( config, options ); if( ! config.absolute ) newdir = self.pathCombine( self.currentDir, newdir ); $.ajax({ - url: self.IFM_SCFN, + url: self.api, type: "POST", data: ({ api: "getRealpath", @@ -164,6 +212,9 @@ function IFM() { }); }; + /** + * Shows a file, either a new file or an existing + */ this.showFileForm = function () { var filename = arguments.length > 0 ? arguments[0] : "newfile.txt"; var content = arguments.length > 1 ? arguments[1] : ""; @@ -211,6 +262,9 @@ function IFM() { }); }; + /** + * Shows the create directory dialog + */ this.createDirForm = function() { self.showModal( '
\
\ @@ -226,114 +280,12 @@ function IFM() { ' ); }; - this.ajaxRequestDialog = function() { - self.showModal( '
\ -
\ -
\ -
\ -
\ -
\ -
\ -
\ - GETPOST
\ - \ -
\ -
\ - \ -
\ - \ -
'); - }; - - this.ajaxRequest = function() { - $.ajax({ - url : $("#ajaxurl").val(), - cache : false, - data : $('#ajaxdata').val().replace(/\n/g,"&"), - type : $('#ajaxrequest input[name=arMethod]:checked').val(), - success : function(response) { $("#ajaxresponse").text(response); }, - error : function(e) { self.showMessage("Error: "+e, "e"); console.log(e); } - }); - }; - - this.saveFile = function() { - $.ajax({ - url: self.IFM_SCFN, - type: "POST", - data: ({ - api: "saveFile", - dir: self.currentDir, - filename: $("#showFile input[name^=filename]").val(), - content: ifm.editor.getValue() - }), - dataType: "json", - success: function( data ) { - if( data.status == "OK" ) { - self.showMessage( "File successfully edited/created.", "s" ); - self.refreshFileTable(); - } else self.showMessage( "File could not be edited/created:" + data.message, "e" ); - }, - error: function() { self.showMessage( "General error occured", "e" ); } - }); - self.fileChanged = false; - }; - - this.editFile = function( name ) { - $.ajax({ - url: self.IFM_SCFN, - type: "POST", - dataType: "json", - data: ({ - api: "getContent", - dir: self.currentDir, - filename: name - }), - success: function( data ) { - if( data.status == "OK" && data.data.content != null ) { - self.showFileForm( data.data.filename, data.data.content ); - } - else if( data.status == "OK" && data.data.content == null ) { - self.showMessage( "The content of this file cannot be fetched.", "e" ); - } - else self.showMessage( "Error: "+data.message, "e" ); - }, - error: function() { self.showMessage( "This file can not be displayed or edited.", "e" ); } - }); - }; - - this.deleteFileDialog = function( name ) { - self.showModal( '
\ -
\ -
\ - \ - \ -
\ -
' ); - }; - this.deleteFile = function( name ) { - $.ajax({ - url: self.IFM_SCFN, - type: "POST", - data: ({ - api: "deleteFile", - dir: self.currentDir, - filename: name - }), - dataType: "json", - success: function(data) { - if(data.status == "OK") { - self.showMessage("File successfully deleted", "s"); - self.refreshFileTable(); - } else self.showMessage("File could not be deleted", "e"); - }, - error: function() { self.showMessage("General error occured", "e"); } - }); - }; - + /** + * Create a directory + */ this.createDir = function() { $.ajax({ - url: self.IFM_SCFN, + url: self.api, type: "POST", data: ({ api: "createDir", @@ -354,7 +306,107 @@ function IFM() { }); }; - this.renameFileDialog = function(name) { + + /** + * Saves a file + */ + this.saveFile = function() { + $.ajax({ + url: self.api, + type: "POST", + data: ({ + api: "saveFile", + dir: self.currentDir, + filename: $("#showFile input[name^=filename]").val(), + content: ifm.editor.getValue() + }), + dataType: "json", + success: function( data ) { + if( data.status == "OK" ) { + self.showMessage( "File successfully edited/created.", "s" ); + self.refreshFileTable(); + } else self.showMessage( "File could not be edited/created:" + data.message, "e" ); + }, + error: function() { self.showMessage( "General error occured", "e" ); } + }); + self.fileChanged = false; + }; + + /** + * Edit a file + * + * @params string name - name of the file + */ + this.editFile = function( name ) { + $.ajax({ + url: self.api, + type: "POST", + dataType: "json", + data: ({ + api: "getContent", + dir: self.currentDir, + filename: name + }), + success: function( data ) { + if( data.status == "OK" && data.data.content != null ) { + self.showFileForm( data.data.filename, data.data.content ); + } + else if( data.status == "OK" && data.data.content == null ) { + self.showMessage( "The content of this file cannot be fetched.", "e" ); + } + else self.showMessage( "Error: "+data.message, "e" ); + }, + error: function() { self.showMessage( "This file can not be displayed or edited.", "e" ); } + }); + }; + + /** + * Shows the delete file dialog + * + * @param string name - name of the file + */ + this.deleteFileDialog = function( name ) { + self.showModal( '
\ +
\ +
\ + \ + \ +
\ +
' ); + }; + + /** + * Deletes a file + * + * @params string name - name of the file + */ + this.deleteFile = function( name ) { + $.ajax({ + url: self.api, + type: "POST", + data: ({ + api: "deleteFile", + dir: self.currentDir, + filename: name + }), + dataType: "json", + success: function(data) { + if(data.status == "OK") { + self.showMessage("File successfully deleted", "s"); + self.refreshFileTable(); + } else self.showMessage("File could not be deleted", "e"); + }, + error: function() { self.showMessage("General error occured", "e"); } + }); + }; + + /** + * Show the rename file dialog + * + * @params string name - name of the file + */ + this.renameFileDialog = function( name ) { self.showModal( '
\
\
\ @@ -366,9 +418,14 @@ function IFM() {
' ); }; - this.renameFile = function(name) { + /** + * Renames a file + * + * @params string name - name of the file + */ + this.renameFile = function( name ) { $.ajax({ - url: ifm.IFM_SCFN, + url: ifm.api, type: "POST", data: ({ api: "renameFile", @@ -387,38 +444,12 @@ function IFM() { }); }; - this.copyMove = function( source, destination, action ) { - var id=self.generateGuid(); - self.task_add(action.charAt(0).toUpperCase()+action.slice(1)+" "+source+" to "+destination, id); - $.ajax({ - url: self.IFM_SCFN, - type: "POST", - data: ({ - dir: self.currentDir, - api: "copyMove", - action: action, - filename: source, - destination: destination - }), - dataType: "json", - success: function(data) { - if( data.status == "OK" ) { - self.showMessage( data.message, "s" ); - } else { - self.showMessage( data.message, "e" ); - } - self.refreshFileTable(); - }, - error: function() { - self.showMessage( "General error occured.", "e" ); - }, - complete: function() { - self.task_done(id); - } - }); - }; - - this.copyMoveDialog = function(name) { + /** + * Show the copy/move dialog + * + * @params string name - name of the file + */ + this.copyMoveDialog = function( name ) { self.showModal( '
\
\ \ @@ -431,7 +462,7 @@ function IFM() {
\
'); $.ajax({ - url: ifm.IFM_SCFN, + url: ifm.api, type: "POST", data: ({ api: "getFolderTree", @@ -459,10 +490,51 @@ function IFM() { }); }; - this.extractFileDialog = function(name) { - var targetDirSuggestion=""; - if(name.lastIndexOf(".") > 1) - targetDirSuggestion = name.substr(0,name.length-4); + /** + * Copy or moves a file + * + * @params string name - name of the file + */ + this.copyMove = function( source, destination, action ) { + var id=self.generateGuid(); + self.task_add( action.charAt(0).toUpperCase() + action.slice(1) + " " + source + " to " + destination, id ); + $.ajax({ + url: self.api, + type: "POST", + data: { + dir: self.currentDir, + api: "copyMove", + action: action, + filename: source, + destination: destination + }, + dataType: "json", + success: function(data) { + if( data.status == "OK" ) { + self.showMessage( data.message, "s" ); + } else { + self.showMessage( data.message, "e" ); + } + self.refreshFileTable(); + }, + error: function() { + self.showMessage( "General error occured.", "e" ); + }, + complete: function() { + self.task_done( id ); + } + }); + }; + + /** + * Shows the extract file dialog + * + * @param string name - name of the file + */ + this.extractFileDialog = function( name ) { + var targetDirSuggestion = ""; + if( name.lastIndexOf( "." ) > 1 ) + targetDirSuggestion = name.substr( 0, name.length - 4 ); else targetDirSuggestion = name; self.showModal( '
\
\ @@ -492,27 +564,36 @@ function IFM() { }); }; - this.extractFile = function(name, t) { + /** + * Extracts a file + * + * @param string name - name of the file + * @param string t - name of the target directory + */ + this.extractFile = function( name, t ) { $.ajax({ - url: self.IFM_SCFN, + url: self.api, type: "POST", - data: ({ + data: { api: "extractFile", dir: self.currentDir, filename: name, targetdir: t - }), + }, dataType: "json", - success: function(data) { - if(data.status == "OK") { - self.showMessage("File successfully extracted", "s"); + success: function( data ) { + if( data.status == "OK" ) { + self.showMessage( "File successfully extracted", "s" ); self.refreshFileTable(); - } else self.showMessage("File could not be extracted. Error: "+data.message, "e"); + } else self.showMessage( "File could not be extracted. Error: " + data.message, "e" ); }, - error: function() { self.showMessage("General error occured", "e"); } + error: function() { self.showMessage( "General error occured", "e" ); } }); }; + /** + * Shows the upload file dialog + */ this.uploadFileDialog = function() { self.showModal( '\
\ @@ -526,11 +607,14 @@ function IFM() { \ \
\ - '); + ' ); }; + /** + * Uploads a file + */ this.uploadFile = function() { - var ufile = document.getElementById('ufile').files[0]; + var ufile = document.getElementById( 'ufile' ).files[0]; var data = new FormData(); var newfilename = $("#uploadFile input[name^=newfilename]").val(); data.append('api', 'uploadFile'); @@ -539,7 +623,7 @@ function IFM() { data.append('newfilename', newfilename); var id = self.generateGuid(); $.ajax({ - url: self.IFM_SCFN, + url: self.api, type: "POST", data: data, processData: false, @@ -563,10 +647,16 @@ function IFM() { self.task_add("Upload "+ufile.name, id); }; + /** + * Change the permissions of a file + * + * @params object e - event object + * @params string name - name of the file + */ this.changePermissions = function(e, name) { if(e.keyCode == '13') $.ajax({ - url: self.IFM_SCFN, + url: self.api, type: "POST", data: ({ api: "changePermissions", @@ -588,6 +678,9 @@ function IFM() { }); }; + /** + * Show the remote upload dialog + */ this.remoteUploadDialog = function() { self.showModal( '
\
\ @@ -612,11 +705,14 @@ function IFM() { $("#filename").on("keyup", function() { $("#url").off(); }); }; + /** + * Remote uploads a file + */ this.remoteUpload = function() { var filename = $("#filename").val(); var id = ifm.generateGuid(); $.ajax({ - url: ifm.IFM_SCFN, + url: ifm.api, type: "POST", data: ({ api: "remoteUpload", @@ -638,68 +734,78 @@ function IFM() { ifm.task_add("Remote upload: "+filename, id); }; - // -------------------- - // additional functions - // -------------------- - this.showMessage = function(m, t) { - var msgType = (t == "e")?"danger":(t == "s")?"success":"info"; - $.notify( - { message: m }, - { type: msgType, delay: 5000, mouse_over: 'pause', offset: { x: 15, y: 65 } } - ); + /** + * Shows the ajax request dialog + */ + this.ajaxRequestDialog = function() { + self.showModal( '\ +
\ +
\ +
\ +
\ +
\ +
\ +
\ + GETPOST
\ + \ +
\ +
\ + \ +
\ + \ +
'); }; - this.pathCombine = function(a, b) { - if(a == "" && b == "") return ""; - if(b[0] == "/") b = b.substring(1); - if(a == "") return b; - if(a[a.length-1] == "/") a = a.substring(0, a.length-1); - if(b == "") return a; - return a+"/"+b; + + /** + * Performs an ajax request + */ + this.ajaxRequest = function() { + $.ajax({ + url : $("#ajaxurl").val(), + cache : false, + data : $('#ajaxdata').val().replace(/\n/g,"&"), + type : $('#ajaxrequest input[name=arMethod]:checked').val(), + success : function(response) { $("#ajaxresponse").text(response); }, + error : function(e) { self.showMessage("Error: "+e, "e"); console.log(e); } + }); }; - this.preventEnter = function(e) { - if( e.keyCode == 13 ) return false; - else return true; - } + + + /** + * Shows a popup to prevent that the user closes the file editor accidentally + */ this.showSaveQuestion = function() { var a = '

'; $(document.body).prepend(a); self.bindOverlayClickEvent(); }; + + /** + * Hides the save question + */ this.hideSaveQuestion = function() { $("#savequestion").remove(); }; - this.handleMultiselect = function() { - var amount = $("#filetable tr.selectedItem").length; - if(amount > 0) { - if(document.getElementById("multiseloptions")===null) { - $(document.body).prepend('
\ -
\ - [close]\ -
\ -
\ - '); - $("#multiseloptions").draggable(); - //$("#multiseloptions").resizable({ghost: true, minHeight: 50, minWidth: 100}); - } - $("#multiseloptions .amount").text(amount); - } - else { - if(document.getElementById("multiseloptions")!==null) - $("#multiseloptions").remove(); - } - }; + + /** + * Shows the delete dialog for multiple files + */ this.multiDeleteDialog = function() { var form = '
'; form += '
'; form += '
'; self.showModal( form ); }; + + /** + * Deletes multiple files + */ this.multiDelete = function() { var elements = $('#filetable tr.selectedItem'); var filenames = []; for(var i=0;typeof(elements[i])!='undefined';filenames.push(elements[i++].getAttribute('data-filename'))); $.ajax({ - url: self.IFM_SCFN, + url: self.api, type: "POST", data: ({ api: "deleteMultipleFiles", @@ -721,25 +827,107 @@ function IFM() { error: function() { ifm.showMessage("General error occured", "e"); } }); }; + + // -------------------- + // helper functions + // -------------------- + + /** + * Shows a notification + * + * @param string m - message text + * @param string t - message type (e: error, s: success) + */ + this.showMessage = function(m, t) { + var msgType = (t == "e")?"danger":(t == "s")?"success":"info"; + $.notify( + { message: m }, + { type: msgType, delay: 5000, mouse_over: 'pause', offset: { x: 15, y: 65 } } + ); + }; + + /** + * Combines two path components + * + * @param string a - component 1 + * @param string b - component 2 + */ + this.pathCombine = function(a, b) { + if(a == "" && b == "") return ""; + if(b[0] == "/") b = b.substring(1); + if(a == "") return b; + if(a[a.length-1] == "/") a = a.substring(0, a.length-1); + if(b == "") return a; + return a+"/"+b; + }; + + /** + * Prevents a user to submit a form via clicking enter + */ + this.preventEnter = function(e) { + if( e.keyCode == 13 ) return false; + else return true; + } + + /** + * Checks if an element is part of an array + * + * @param obj needle - search item + * @param array haystack - array to search + */ this.inArray = function(needle, haystack) { for(var i = 0; i < haystack.length; i++) { if(haystack[i] == needle) return true; } return false; }; - this.task_add = function(name,id) { // uFI stands for uploadFileInformation - if(!document.getElementById("waitqueue")) { - $(document.body).prepend('
'); - //$("#waitqueue").on("mouseover", function() { $(this).toggleClass("left"); }); + + /** + * Adds a task to the taskbar. + * + * @param string name - description of the task + * @param string id - identifier for the task + */ + this.task_add = function( name, id ) { + if( ! document.getElementById( "waitqueue" ) ) { + $( document.body ).prepend( '
' ); } - $("#waitqueue").prepend('
'+name+'
'); + $( "#waitqueue" ).prepend('\ +
\ +
\ +
\ +
\ + '+name+'\ +
\ +
\ +
\ + '); }; + + /** + * Removes a task from the taskbar + * + * @param string id - task identifier + */ this.task_done = function(id) { $("#"+id).remove(); if($("#waitqueue>div").length == 0) { $("#waitqueue").remove(); } }; + + /** + * Updates a task + * + * @param integer progress - percentage of status + * @param string id - task identifier + */ this.task_update = function(progress, id) { $('#'+id+' .progress-bar').css('width', progress+'%').attr('aria-valuenow', progress); }; + + /** + * Highlights an item in the file table + * + * @param object param - either an element id or a jQuery object + */ this.highlightItem = function( param ) { var highlight = function( el ) { el.addClass( 'highlightedItem' ).siblings().removeClass( 'highlightedItem' ); @@ -768,7 +956,13 @@ function IFM() { } } }; - this.isElementInViewport = function isElementInViewport (el) { + + /** + * Checks if an element is within the viewport + * + * @param object el - element object + */ + this.isElementInViewport = function (el) { if (typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } @@ -780,6 +974,10 @@ function IFM() { rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } + + /** + * Generates a GUID + */ this.generateGuid = function() { var result, i, j; result = ''; @@ -789,14 +987,43 @@ function IFM() { } return result; }; + + /** + * Logs a message if debug mode is on + * + * @param string m - message text + */ + this.log = function( m ) { + if( self.debug ) { + console.log( "IFM (debug): " + m ); + } + }; + + /** + * Encodes a string for use within javascript + * + * @param string s - encoding string + */ this.JSEncode = function(s) { return s.replace(/'/g, '\\x27').replace(/"/g, '\\x22'); }; + + /** + * Handles the javascript pop states + * + * @param object event - event object + */ this.historyPopstateHandler = function(event) { var dir = ""; if( event.state && event.state.dir ) dir = event.state.dir; self.changeDirectory( dir, { pushState: false, absolute: true } ); }; + + /** + * Handles keystrokes + * + * @param object e - event object + */ this.handleKeystrokes = function( e ) { // bind 'del' key if( $(e.target).closest('input')[0] || $(e.target).closest('textarea')[0] ) { @@ -895,7 +1122,9 @@ function IFM() { } } - // initialization + /** + * Initializes the application + */ this.init = function() { // bind static buttons $("#refresh").click(function(){ @@ -929,5 +1158,5 @@ function IFM() { }; } -var ifm = new IFM(); +var ifm = new IFM({ api: "ifm.php" }); ifm.init(); diff --git a/src/main.php b/src/main.php index 14b4761..23f09c8 100644 --- a/src/main.php +++ b/src/main.php @@ -16,14 +16,21 @@ ini_set( 'display_errors', 'OFF' ); class IFM { const VERSION = '2.4.0'; - public function __construct() { + private $config = array(); + + public function __construct( $config ) { session_start(); + if( ! is_array( $config ) ) { + trigger_error( "IFM: could not load config" ); + exit( 1 ); + } else { + $this->config = $config; + } } - /* - this function contains the client-side application + /** + * This function contains the client-side application */ - public function getApplication() { print ' @@ -115,6 +122,7 @@ class IFM { + @@ -137,6 +145,9 @@ class IFM { $this->getFiles( $_REQUEST["dir"] ); else $this->getFiles( "" ); + } + elseif( $_REQUEST["api"] == "getConfig" ) { + echo json_encode( IFMConfig::getConstants() ); } else { if( isset( $_REQUEST["dir"] ) && $this->isPathValid( $_REQUEST["dir"] ) ) { switch( $_REQUEST["api"] ) { @@ -956,5 +967,5 @@ class IFM { start program */ -$ifm = new IFM(); +$ifm = new IFM( IFMConfig::getConstants() ); $ifm->run();