Explorer Explore your files easily

Easy steps to install Explorer

Now you've gotten Explorer ready, I gonna explain you most explorer functions

Explorer Explorer(width, height, container, position, fileList)


  1. new Explorer (500, 400, "#explorerContainer", Explorer().POSITION_LEFT, null); //Example of a new instance of Explorer(width, height, container, position, fileList)
  • width: Explorer's width. Default value is 800 (pixels).
  • height: Explorer's height. Default value is 600 (pixels).
  • container: Explorer's container. it will be a div which Explorer will use to create its stuff. If not defined, it will be create between body tags with "#explorerContainer" as id.
  • position: Explorer's position on the screen. Default value is Explorer().POSITION_CENTER. You can also set Explorer().POSITION_LEFT or Explorer().POSITION_RIGHT.
  • fileList: Explorer's list of files. It's a list of files that explorer will load when it starts. Default value is null. You can also set them later using addFiles().

AddFiles explorer.addFiles();


It is easy to add a file to Explorer, as shown before, you only need to run Explorer.addFiles() passing a new File as parameter.
You can also pass an array of Files as parameter. You can see how you can do it in the code below.

  1. var explorer = new Explorer();
  2. explorer.addFiles([ new File( 1, "Math Syllabus", "pdf"), new File( 2, "My Docs", "dir"), new File( 3, "Malfalda animation", "mp4", 2) ]);
  3. explorer.start( );
Or
  1. var explorer = new Explorer();
  2. var fileList = new Array();
  3. fileList.push(new File( 1, "Math Syllabus", "pdf")
  4. fileList.push(new File( 2, "My Docs", "dir")
  5. fileList.push(new File( 3, "Malfalda animation", "mp4", 2)
  6. explorer.addFiles(fileList);
  7. explorer.start( );

By the way, you do not need to always run explorer.start() when you have added some files. You can start Explorer without have added any file.

ServerNewFolder explorer.serverNewFolder();


In order to create a new folder, you will need to override serverNewFolder(folderId). You must create a function that will receive the new folder name and a Deferred object, then after you have done your stuff on server side, you must resolve your deferred object passing the id of the folder you have created. If you pass something that is not a number Explorer will not build the folder on client side.

Example

  1. var explorer = new Explorer();
  2. explorer.serverNewFolder = function (folderName, def) {
  3. //Your code
  4. def.resolve(number);
  5. }

ServerMove explorer.serverMove(newFolderId,files, folders, def);


In order to move selected file(s) and/or folder(s), you will need to override serverMove(). You must create a function that will receive a new folder id, array of files, array of folders and a jQuery Deferred object, then after you have done your stuff on server side, you must resolve your deferred object passing true if everything worked fine, otherwise, false.
Do not forget to resolve your deferred object in serverMove() since it is the only way that Explorer can know whether your function has worked properly or not, and then, case true, move your files on client side.

Example

  1. var explorer = new Explorer();
  2. explorer.serverMove = function (newFolderId, files, folders, def) {
  3. //Your code
  4. def.resolve(true);
  5. }

ServerDelete explorer.serverDelete(Deferred);


In order to delete selected file(s) and/or folder(s), you will need to override serverDelete(). You must create a function that will receive a jQuery Deferred object, then after you have done your stuff on server side, you must resolve your deferred object passing true if everything worked fine, otherwise, false.
Do not forget to resolve your deferred object in serverDelete() since it is the only way that clientDelete() can know whether your function has worked properly or not, and then, case true, delete your files on client side.

Example

  1. var explorer = new Explorer();
  2. explorer.serverDelete = function (def) {
  3. //Your code
  4. def.resolve(true);
  5. }

Preview explorer.preview(file);


It is a function which is invoked when an user performs a double click on a file. Explorer already has a preview dialog, preview.tmp, in templates' folder. You'll need to edit it to show files' attributes which can be found at explorer.TEMP_VAR.

Share explorer.share();


There is no default implementation to this function, so you will need to implement it by yourself. You can use Explorer Base Dialog to create a custom dialog to show how an user can share his files.

Download explorer.download();


There is no default implementation to this function, so you will need to implement it by yourself. You can use Explorer Base Dialog to create a custom dialog or just call a server side function to download the selected file(s).

Upload explorer.upload();


There is no default implementation to this function, so you will need to implement it by yourself. You can use Explorer Base Dialog to create a custom dialog to show how an user can upload his files.

Selected Files explorer.getSelectedFiles();


It returns an array of all files/folders you have selected.

Set Icons Background Color explorer.setIconsBackgroundColor(color);


Through this function you can set the background color of the icons.

Context Menu Options explorer.CONTEXT_MENU_OPTIONS.[OPTION]


Here you can hide or disable context menu options. It is really simple to do it.
There are 7 context menu options: DOWNLOAD, UPLOAD, OPEN, MOVE, RENAME, DELETE, SHARE and NEW_FOLDER.

Here you can hide or disable context menu options. It is really simple to do it.
Here are the context menu options you can disable or hide: DOWNLOAD, DOWNLOAD_ALL, UPLOAD, UPLOAD_ALL, MOVE, MOVEL_ALL, DELETE, DELETE_ALL, SHARE, SHARE_ALL, RENAME, NEW_FOLDER and OPEN.


Example:

  1. var explorer = new Explorer();
  2. explorer.CONTEXT_MENU_OPTIONS.DELETE = explorer.DISABLED;
  3. //Or
  4. explorer.CONTEXT_MENU_OPTIONS.DELETE = explorer.HIDDEN;

Custom Menu Option explorer.customMenuOption(file);


Through this function you can add your own options to context menu. You must override it as shown below.

  1. var explorer = new Explorer();
  2. explorer.customMenuOption = function(file){
  3. return explorer.buildCustomMenuOption( "Label Name", "Callback function name");
  4. }
  5. This function will receive an instance of File if a user has clicked on a file/folder, otherwise it will be undefined.

Events

Explorer will fire some events that you may want to handle.

  • File Update fileUpdateEvent

    It will be fired in two situations, when a file has been dropped or a file has been renamed. In both situations the file instance will be passed as parameter.
    Here is an example of how to handle this event for each situation.

    1. $(document).on('fileUpdateEvent', function (e, file, event){
    2. switch (event){
    3. case explorer.EVENT_DROP:
    4. //Do something
    5. break;
    6. case explorer.EVENT_RENAME:
    7. //Do something else
    8. break;
    9. }
    10. });
  • Close Base Dialog closeDialogEvent

    Everytime the Base Dialog is closed, this event is fired

    1. $(explorer.baseDialogId).on('closeDialogEvent', function (e){
    2. //Do something
    3. });
  • Dropped When Searching droppedWhenSearching

    If a file is dropped when Explorer is in search mode, it will be uploaded at the root folder. A messages will also be passed as parameter.

    1. $(document).on('droppedWhenSearching', function (e, msg){
    2. //Do something. Info user?
    3. });
  • Moving to Itself movingToItself

    If a folder is going to be moved to one of its sub folders, Explorer, obviously, will not do it and will fire this event passing a message as parameter.

    1. $(document).on('movingToItself', function (e, msg){
    2. //Do something. Warn user?
    3. });
  • Context Menu Event contextMenuEvent

    This event will be fired when a file or folder is clicked. A "data" object, which contains the file and the event itself, will be passed as parameter.

    1. $(document).on('contextMenuEvent', function (e, data){
    2. //You may disable or hide a context menu option here...
    3. });

Base Dialog A simple way to create dialogs

Four simple steps to easily generate a dialog to your website using Explorer's dialog.

  • Create explorer.createBaseDialog();


    The code below will create an empty and hidden dialog in your html.
    There are two parameters that you can pass.

    • Width: The width of your dialog in pixels. For example: "auto" or 300. Default value is 470; &
    • Height: The height of your dialog in pixels. Default value is 400;
    • {Options}: Here you can set a min-width and min-height (pixels). For exampple: {"min-width": 500}

    1. explorer.createBaseDialog(); //creating a default dialog
    2. explorer.createBaseDialog(500, 400); //creating a custom dialog
    3. //Or
    4. explorer.createBaseDialog("auto", "auto", {"min-width": 200, "min-height": 150}); //creating a custom dialog

    *Important: You must run createBaseDialog() each time you want to change dialog's size.

  • Load explorer.loadBaseDialog(content);


    Here you will pass the content of your base dialog. You can pass your whole code as parameter. However, it is better to create a template (.tmp or .html* file) to your dialog and pass its path as parameter, then it will be loaded in your dialog. You can see some templates at templates folder.
    *New.

    1. explorer.loadBaseDialog( "<p>Hello World! This is my Dialog.</p>" );
    2. explorer.loadBaseDialog( "templates/myTemplate.tmp" );
  • Show explorer.showBaseDialog(hideCloseButton, def);


    This function will display your dialog. If you do not want to use its default close button to close the dialog, you can pass "true" as parameter and it will not be shown.

    1. explorer.showBaseDialog(); //Default close button will be created
    2. explorer.showBaseDialog(true); //I guess you have your own button to close this dialog

    If you want to run something only after base dialog get ready, you can pass a Deferred object as the second parameter.

  • Close explorer.closeBaseDialog();


    This function will close the dialog.
    (*New) Base Dialog also closes when Esc key is pressed.

    1. explorer.closeBaseDialog();

Effects

You can change close and show effects as shown below

  1. explorer.baseDialogEffect = 'blind';

You can only use those effects which do not require any parameters. You can see jQueyuUI Effects through this link.


Customization

starting version 1.0.39, you can pass style and classes through options parameter to customize Base Dialog.


  1. explorer.createBaseDialog("auto", "auto", {"style": "border: 3px dashed gray; background-color: red;", "class": classA classB classN}); //creating a custom dialog

File Class File(id, name, ext, parent, field)

This class will provide you some help when you need to add files to Explorer.
Its constructor receives some important parameters which I gonna describe below and also show their default values.

  1. new File (1, "Name", "jpg", 0, 3); //Example of a new instance of File(id, name, ext, parent, field)
  • id: File's ID. Must be unique.
  • name:: File's name.
  • ext: File's extension. Some extensions may not have a custom icon, so a default icon will be set.
  • parent: File's Parent. Default value is 0 (zero) which means it will not be placed inside any folder, in other words it will be at root.
  • field: File's Field. Default value is -1 which means it will be placed at the first free field on the screen from the left to right side. Fields are hidden blocks where files are placed. Its first value is 0 (zero).
  • getName(): It will return file's name. If its length is higher than 13 characters, suspension points will be put at its 13 character. You can get its full name if you access its attribute directly ( e.g. file.name).
  • getExtension(file): It will return file's extension. There are two ways to use this. If you have a File instance, you should use var ext = yourFile.getExtention(); However if you do not have a file instance or want to get a extension from a string, you can run new File().getExtension(String);

Attributes Some usefull Explorer attributes (explorer.[attribute_name])

  • debugMode (boolean): If it is true, warnings will be shown in browsers's console. It may help you if something is not working well. Default value is false.
  • border: You can customize Explorer's border by setting a value to this attribute. For example, explorer.border = "2px dashed gray";
  • top*: It is Explorer's margin-top (in pixels).
  • left*: It is Explorer's margin-left (in pixels).
  • language: You can set Explorer's language by setting here the file's name of the language you want to load. This file should be in the "lang" folder and must be a json file. Explorer already is in three languages, English (default), Portuguese, and French.
  • multiSelect** (boolean): You can now choose if Explorer will allow or not, multiple file selection. Default value is true.
*Top and Left positions will sum the pixels you have set there with the ones Explorer is using in its position attribute. For example, if you have chosen POSITION_CENTER (default) and have set left = 20px, Explorer will be positioned 20px to the left of the center.
**New