Reformated index.php, continued work on new upload file system

components/active/init.js

@@ -446,7 +446,7 @@
 			
 			var session = this.sessions[path];
 			
-			if( $( '#dropdown-list-active-files' ).has( session.tabThumb ).length > 0 ) {
+			if( session && session.tabThumb && $( '#dropdown-list-active-files' ).has( session.tabThumb ).length > 0 ) {
 				if( moveToTabList ) {
 					/* Get the menu item as a tab, and put the last tab in
 					 * dropdown. */

components/filemanager/class.filemanager.php

@@ -358,10 +358,12 @@ class Filemanager extends Common {
 					
 					if( is_dir( $p ) ) {
 						
+						$children = $this->is_empty( $p ) ? null : array();
+						
 						$paths[] = array(
 							
 							"basename" => $path_info["basename"],
-							"children" => $this->index_path( $p ),
+							"children" => $children,
 							"dirname" => str_replace( WORKSPACE . "/", "", $p ),
 							"extension" => null,
 							"filename" => $path_info["filename"],
@@ -390,6 +392,26 @@ class Filemanager extends Common {
 		return $paths;
 	}
 	
+	function is_empty( $dir ) {
+		
+		$pass = true;
+		
+		if( is_dir( $dir ) ) {
+			
+			$handle = opendir( $dir );
+			while( false !== ( $entry = readdir( $handle ) ) ) {
+				
+				if( $entry != "." && $entry != ".." ) {
+					
+					$pass = false;
+					break;
+				}
+			}
+			closedir( $handle );
+		}
+		return $pass;
+	}
+	
 	function sorter( $a, $b ) {
 		
 		$basename = strnatcmp( $a["basename"], $b["basename"] );

components/filemanager/dialog.php

@@ -165,6 +165,15 @@ switch( $_GET['action'] ) {
 		<?php
 	break;
 	
+	case 'selector':
+		
+		?>
+		<div>
+			<div id="modal-loading" style="display: inline-block;vertical-align: middle;min-width:25px;"></div>
+			<div style="display: inline-block;vertical-align: middle;">Loading File Selector ...</div>
+		</div>
+		<?php
+	break;
 }
 
 ?></form>

components/filemanager/init.js

@@ -86,6 +86,31 @@
 			$.loadScript( "components/filemanager/upload_scripts/jquery.ui.widget.js", true );
 			$.loadScript( "components/filemanager/upload_scripts/jquery.iframe-transport.js", true );
 			$.loadScript( "components/filemanager/upload_scripts/jquery.fileupload.js", true );
+			
+			$( document ).on( 'dragenter', function( e ) {
+				
+				$( '.drop-overlay' ).css( 'display', 'block' );
+			});
+			
+			$( '.drop-overlay' ).on( 'drag dragstart dragend dragover dragenter dragleave drop', function( e ) {
+				
+				e.preventDefault();
+				e.stopPropagation();
+			})
+			.on( 'dragover dragenter', function() {
+				
+				
+			})
+			.on( 'dragleave dragend drop', function() {
+				
+				//$( '.drop-overlay' ).css( 'display', 'none' );
+			})
+			.on( 'drop', function( e ) {
+				
+				e.preventDefault();
+				e.stopPropagation();
+				codiad.filemanager.upload_drop( e );
+			});
 		},
 		
 		//////////////////////////////////////////////////////////////////
@@ -286,14 +311,15 @@
 		createObject: function( parent, path, type ) {
 			// NODE FORMAT: <li><a class="{type} {ext-file_extension}" data-type="{type}" data-path="{path}">{short_name}</a></li>
 			let parentNode = $( '#file-manager a[data-path="' + parent + '"]' );
+			let appendage = null;
 			if( !$( '#file-manager a[data-path="' + path + '"]' )
 			.length ) { // Doesn't already exist
 				if( parentNode.hasClass( 'open' ) && parentNode.hasClass( 'directory' ) ) { // Only append node if parent is open (and a directory)
 					let shortName = this.getShortName( path );
 					if( type == 'directory' ) {
-						let appendage = '<li><span class="none"></span><a class="directory" data-type="directory" data-path="' + path + '">' + shortName + '</a></li>';
+						appendage = '<li><span class="none"></span><a class="directory" data-type="directory" data-path="' + path + '">' + shortName + '</a></li>';
 					} else {
-						let appendage = '<li><span class="none"></span><a class="file ext-' +
+						appendage = '<li><span class="none"></span><a class="file ext-' +
 							this.getExtension( shortName ) +
 							'" data-type="file" data-path="' +
 							path + '">' + shortName + '</a></li>';
@@ -447,11 +473,17 @@
 		opened_folders: [],
 		files: [],
 		
-		get_index: function( path, files ) {
+		get_indexes: async function( path ) {
+			
+			let r = await $.get( this.controller + '?action=index&path=' + encodeURIComponent( path ) );
+			return r;
+		},
+		
+		find_index: function( path, files ) {
 			
 			let _this = this;
 			let index = {};
-			let total = files.length;
+			let total = ( !!files ) ? files.length : 0;
 			
 			for( let i = 0;i < total;i++ ) {
 				
@@ -463,7 +495,7 @@
 					
 					if( files[i].children !== undefined ) {
 						
-						index = _this.get_index( path, files[i].children );
+						index = _this.find_index( path, files[i].children );
 						
 						if( Object.keys( index ).length > 0 ) {
 							
@@ -479,7 +511,7 @@
 			
 			let _this = this;
 			let index = {};
-			let total = files.length;
+			let total = ( !!files ) ? files.length : 0;
 			
 			for( let i = 0;i < total;i++ ) {
 				
@@ -504,7 +536,7 @@
 			return index;
 		},
 		
-		index: function( path, rescan ) {
+		index: async function( path, rescan ) {
 			
 			let _this = codiad.filemanager;
 			let node = $( '#file-manager a[data-path="' + path + '"]' );
@@ -513,8 +545,12 @@
 			let total_saved = _this.files.length;
 			let container = $( '<ul></ul>' );
 			let files = [];
-			let open_children = parentNode.find( 'a.open' );
+			let open_children = $( '#file-manager a[data-type="root"]' ).parent().find( 'a.open' );
 			let root = false;
+			let file = _this.find_index( path, _this.files );
+			let children = 0;
+			
+			_this.opened_folders = [];
 			
 			if( rescan === undefined ) {
 				
@@ -531,31 +567,28 @@
 				});
 			}
 			
+			if( file.children ) {
+				
+				children = file.children.length;
+			}
+			
 			node.addClass( 'loading' );
 			
-			/*for( let i = open_children.length;i--; ) {
+			for( let i = open_children.length;i--; ) {
 				
 				_this.opened_folders.push( $( open_children[i] ).attr( "data-path" ) );
-			}*/
+			}
 			
-			open_children.each( function( key, value ) {
+			if( rescan || total_saved == 0 || ! children ) {
-				
-				_this.opened_folders.push( value.attr( "data-path" ) );
-			});
-			
-			console.log( "test", open_children, _this.open_children );
-			
-			if( rescan || total_saved == 0 ) {
-				
-				$.get( this.controller + '?action=index&path=' + encodeURIComponent( path ), function( data ) {
 				
+				let data = await _this.get_indexes( path );
 				let response = codiad.jsend.parse( data );
-					let files = [];
+				let result = null;
 				
 				if( response != 'error' ) {
 					
-						let result = response.index;
+					result = response.index;
-						let total_files = result.length;
+				}
 				
 				if( total_saved == 0 ) {
 					
@@ -568,32 +601,24 @@
 					files = result;
 				}
 				
-						/* Notify listener */
+				let total_opened = _this.opened_folders.length;
-						amplify.publish( "filemanager.onIndex", {
+				for( let i = 0;i < total_opened;i++ ) {
-							path: path,
-							files: files
-						});
 					
-						console.log( files, container, _this.files );
+					if( _this.is_child( path, _this.opened_folders[i] ) ) {
 						
-						_this.createIndexes( files, container );
+						_this.index( _this.opened_folders[i], rescan );
-						
+					}
-						let ul = node.parent( 'li' ).children( 'ul' );
+				}
-						
-						if( ul.length ) {
-							
-							ul.replaceWith( container );
 			} else {
 				
-							$( container ).insertAfter( node );
-						}
-						node.removeClass( 'loading' );
-					}
-				});
-			} else {
-				
-				let file = _this.get_index( path, _this.files );
 				files = file.children;
+			}
+			
+			//Add Legacy support for new file layout
+			for( let i = files.length;i--; ) {
+				
+				files[i].name = files[i].basename;
+			}
 			
 			console.log( file, files );
 			
@@ -604,17 +629,15 @@
 			});
 			
 			let plus = span.hasClass( 'plus' );
+			let minus = span.hasClass( 'minus' );
+			let trigger = ( plus || span.hasClass( 'none' ) || root || ( rescan && minus ) );
+			_this.trigger_open_close( node.parent(), trigger );
 			
-				if( plus || span.hasClass( 'none' ) ) {
+			console.log( trigger );
 			
-					if( plus ) {
+			if( trigger ) {
 				
-						span.removeClass( 'plus' )
+				_this.create_indexes( files, container );
-						span.addClass( 'minus' );
-					}
-					
-					node.addClass( 'open' );
-					_this.createIndexes( files, container );
 				let ul = node.parent( 'li' ).children( 'ul' );
 				
 				if( ul.length ) {
@@ -624,106 +647,66 @@
 					
 					$( container ).insertAfter( node );
 				}
-				} else if( span.hasClass( 'minus' ) ) {
 				
-					
+				console.log( ul, container );
-					span.removeClass( 'minus' );
-					span.addClass( 'plus' );
-					node.parent( 'li' )
-					.children( 'ul' )
-					.slideUp( 300, function() {
-						
-						$( this ).remove();
-						node.removeClass( 'open' );
-						node.parent().children( 'span' ).removeClass( 'minus' ).addClass( 'plus' );
-						node.parent().children().find( 'span' ).removeClass( 'minus' ).addClass( 'plus' );
-					});
 			}
 			node.removeClass( 'loading' );
-			}
-			
-			/*
-			
-			if( node.hasClass( 'open' ) && ! rescan ) {
-				
-				node.parent( 'li' )
-				.children( 'ul' )
-				.slideUp( 300, function() {
-					
-					$( this ).remove();
-					node.removeClass( 'open' );
-					node.parent().children( 'span' ).removeClass( 'minus' ).addClass( 'plus' );
-					node.parent().children().find( 'span' ).removeClass( 'minus' ).addClass( 'plus' );
-				});
-			} else {
-				
-				node.addClass( 'loading' );
-				$.get( this.controller + '?action=index&path=' + encodeURIComponent( path ), function( data ) {
-					
-					let expanded = parentNode.children( 'span' ).hasClass( 'plus' )
-					if( expanded ) {
-						
-						parentNode.children( 'span' ).removeClass( 'plus' ).addClass( 'minus' );
-					}
-					
-					node.addClass( 'open' );
-					let response = codiad.jsend.parse( data );
-					
-					console.log( response );
-					
-					if( response != 'error' ) {
-						
-						/* Notify listener *
-						files = response.index;
-						amplify.publish( "filemanager.onIndex", {
-							path: path,
-							files: _this.indexFiles
-						});
-						let keys = Object.keys( files );
-						let total_keys = keys.length;
-						
-						
-						for( let i = 0;i < total_keys;i++ ) {
-							
-							if( files[keys[i]]. ) {
-								
-								let display = 'display:none;';
-								let container = $( '<ul></ul>' );
-								
-								if( rescan ) {
-									
-									display = '';
-									node.parent( 'li' ).children( 'ul' ).remove();
-								}
-								
-								container.css( "display", display );
-								_this.createIndexes( files, container );
-								$( container ).insertAfter( node );
-								
-								if( ! rescan ) {
-									
-									container.css( "display", display );
-									node.siblings( 'ul' ).slideDown( 300 );
-								}
-							}
-						}
-					}
-					node.removeClass( 'loading' );
-				});
-			}
-			*/
 		},
 		
-		createIndexes: function( files, container = null ) {
+		filemanager_index: function( node, container, file, files ) {
+			
+			let _this = this;
+			let link = node.children( 'a' );
+			
+			node.draggable({
+				
+				opacity: 0.85,
+				revert: true,
+				start: _this.object_start,
+				stop: _this.object_stop,
+				zIndex: 100
+			});
+			
+			if( file.type == "directory" ) {
+				
+				link.droppable({
+					accept: _this.object_accept,
+					drop: _this.object_drop,
+					over: _this.object_over,
+					out: _this.object_out
+				});
+			}
+		},
+		
+		create_indexes: function( files, container = null, filters = {}, callbacks = [] ) {
 			
 			let _this = this;
 			let total_files = files.length;
+			let root = null;
+			
+			if( ! container ) {
+				
+				let project_path = $( '#project-root' ).attr( 'data-path' );
+				let project_name = $( '#project-root' ).text();
+				
+				let a = $( `<a class="directory" data-path="${project_path}">${project_name}</a>` );
+				let li = $( '<li></li>' );
+				root = $( '<ul></ul>' );
+				container = $( '<ul></ul>' );
+				
+				li.html( a );
+				li.append( container );
+				root.html( li );
+				
+				console.log( a, li, root, container );
+			} else {
+				
+				root = container
+			}
 			
 			for( let i = 0;i < total_files;i++ ) {
 				
 				let value = files[i];
-				console.log( _this.opened_folders, value.path )
-				
 				let expanded = _this.opened_folders.includes( value.path );
 				let ext = '';
 				let name = '';
@@ -733,16 +716,12 @@
 				let link = $( "<a></a>" );
 				let type = null;
 				
-				entry.draggable({
+				if( value.type == "file" ) {
 					
-					opacity: 0.85,
+					if( filters.type == "directories" ) {
-					revert: true,
-					start: _this.object_start,
-					stop: _this.object_stop,
-					zIndex: 100
-				});
 						
-				if( value.children == undefined ) {
+						continue;
+					}
 					
 					ext = "ext-" + value.extension;
 					name = value.basename;
@@ -750,23 +729,20 @@
 					link.addClass( ext );
 				} else {
 					
-					link.droppable({
+					if( filters.type == "files" ) {
-						accept: _this.object_accept,
-						drop: _this.object_drop,
-						over: _this.object_over,
-						out: _this.object_out
-					});
 						
-					if( value.children.length > 0 ) {
+						continue;
+					}
+					
+					if( value.children !== null ) {
 						
 						if( expanded ) {
 							
 							let sub_container = $( '<ul></ul>' );
-							console.log( value.children );
 							
 							nodeClass = 'minus';
 							link.addClass( 'open' );
-							_this.createIndexes( value.children, sub_container );
+							_this.create_indexes( value.children, sub_container, filters, callbacks );
 							$( sub_container ).insertAfter( container );
 						} else {
 							
@@ -786,7 +762,31 @@
 				
 				entry.append( span, link );
 				container.append( entry );
-			};
+				
+				if( typeof callbacks == "function" ) {
+					
+					callbacks( entry, container, value, files );
+				} else if( Array.isArray( callbacks ) ) {
+					
+					let total_callbacks = callbacks.length;
+					for( let j = 0;j < total_callbacks;j++ ) {
+						
+						callbacks[j]();
+					}
+				}
+			}
+			return root;
+		},
+		
+		is_child: function( parent, child ) {
+			
+			if( child === parent ) {
+				
+				return false;
+			}
+			
+			let parentTokens = parent.split( '/' ).filter( i => i.length );
+			return parentTokens.every( ( t, i ) => child.split( '/' )[i] === t )
 		},
 		
 		//////////////////////////////////////////////////////////////////
@@ -797,81 +797,59 @@
 			
 			let _this = this;
 			
-			$( '#file-manager' ).on( 'selectstart', false );
+			$( '#file-manager' )
+			.on( 'click', 'a', function() {
 				
-			$( '#file-manager span' )
+				// Open or Expand
-			.live( 'click', function() { // Open or Expand
-				if( $( this ).parent().children( "a" ).attr( 'data-type' ) == 'directory' ) {
-					_this.index( $( this ).parent().children( "a" )
-					.attr( 'data-path' ) );
-				} else {
-					_this.openFile( $( this ).parent().children( "a" )
-					.attr( 'data-path' ) );
-				}
-				/*if( !$( this ).hasClass( 'none' ) ) {
-					if( $( this ).hasClass( 'plus' ) ) {
-						$( this ).removeClass( 'plus' )
-						$( this ).addClass( 'minus' );
-					} else {
-						$( this ).removeClass( 'minus' )
-						$( this ).addClass( 'plus' );
-					}
-				}*/
-			});
-			$( '#file-manager a' )
-			.live( 'dblclick', function() { // Open or Expand
-				if( !codiad.editor.settings.fileManagerTrigger ) {
-					if( $( this )
-					.hasClass( 'directory' ) ) {
-						_this.index( $( this )
-						.attr( 'data-path' ) );
-					} else {
-						_this.openFile( $( this )
-						.attr( 'data-path' ) );
-					}
-					/*
-					if( !$( this ).parent().children( "span" ).hasClass( 'none' ) ) {
-						if( $( this ).parent().children( "span" ).hasClass( 'plus' ) ) {
-							$( this ).parent().children( "span" ).removeClass( 'plus' )
-							$( this ).parent().children( "span" ).addClass( 'minus' );
-						} else {
-							$( this ).parent().children( "span" ).removeClass( 'minus' )
-							$( this ).parent().children( "span" ).addClass( 'plus' );
-						}
-					}*/
-				}
-			})
-			.live( 'click', function() { // Open or Expand
 				if( codiad.editor.settings.fileManagerTrigger ) {
-					if( $( this )
+					
-					.hasClass( 'directory' ) ) {
+					if( $( this ).hasClass( 'directory' ) ) {
-						_this.index( $( this )
+						
-						.attr( 'data-path' ) );
+						_this.index( $( this ).attr( 'data-path' ) );
 					} else {
-						_this.openFile( $( this )
+						
-						.attr( 'data-path' ) );
+						_this.openFile( $( this ).attr( 'data-path' ) );
 					}
-					/*
-					if( !$( this ).parent().children( "span" ).hasClass( 'none' ) ) {
-						if( $( this ).parent().children( "span" ).hasClass( 'plus' ) ) {
-							$( this ).parent().children( "span" ).removeClass( 'plus' )
-							$( this ).parent().children( "span" ).addClass( 'minus' );
-						} else {
-							$( this ).parent().children( "span" ).removeClass( 'minus' )
-							$( this ).parent().children( "span" ).addClass( 'plus' );
-						}
-					}*/
 				}
 			})
-			.live( "contextmenu", function( e ) { // Context Menu
+			.on( 'click', 'span', function() {
+				
+				// Open or Expand
+				if( $( this ).parent().children( "a" ).attr( 'data-type' ) == 'directory' ) {
+					
+					_this.index( $( this ).parent().children( "a" ).attr( 'data-path' ) );
+				} else {
+					
+					_this.openFile( $( this ).parent().children( "a" ).attr( 'data-path' ) );
+				}
+			})
+			.on( "contextmenu", 'a', function( e ) {
+				
+				// Context Menu
 				e.preventDefault();
-				_this.contextMenuShow( e, $( this )
+				_this.contextMenuShow(
-				.attr( 'data-path' ), $( this )
+					e,
-				.attr( 'data-type' ), $( this )
+					$( this ).attr( 'data-path' ),
-				.html() );
+					$( this ).attr( 'data-type' ),
-				$( this )
+					$( this ).html()
-				.addClass( 'context-menu-active' );
+				);
-			});
+				$( this ).addClass( 'context-menu-active' );
+			})
+			.on( 'dblclick', 'a', function() {
+				
+				// Open or Expand
+				if( ! codiad.editor.settings.fileManagerTrigger ) {
+					
+					if( $( this ).hasClass( 'directory' ) ) {
+						
+						_this.index( $( this ).attr( 'data-path' ) );
+					} else {
+						
+						_this.openFile( $( this ).attr( 'data-path' ) );
+					}
+				}
+			})
+			.on( 'selectstart', false );
 		},
 		
 		object_accept: function( e, i ) {
@@ -921,16 +899,52 @@
 		object_start: function( e, i ) {
 			
 			let drag = i.helper[0];
-			//$( object ).show();
+			$( drag ).addClass( "drag_start" );
+			$( drag ).children( 'a' ).removeClass( "a:hover" );
 		},
 		
 		object_stop: function( e, i ) {
 			
 			let drag = i.helper[0];
-			//$( object ).hide();
+			$( drag ).removeClass( "drag_start" );
-			
+			//$( drag ).removeClass( "hover" );
 		},
 		
+		open_selector: async function( type, callback ) {
+			
+			let _this = this;
+			
+			codiad.modal.load(
+				300,
+				_this.dialog,
+				{
+					action: 'selector',
+					type: type,
+				},
+				async function( container ) {
+					
+					let _this = codiad.filemanager;
+					let data = [];
+					let response = await _this.get_indexes( codiad.project.getCurrent() );
+					
+					response = codiad.jsend.parse( response );
+					
+					if( response.index ) {
+						
+						data = response.index;
+					}
+					
+					let children = _this.create_indexes( data, null, {type: 'directories'}, [] );
+					let div = $( '<div class="file-manager"></div>' );
+					
+					div.html( children );
+					container.html( div );
+					
+					_this.selector_listeners( container );
+					console.log( div, children );
+				},
+			);
+		},
 		
 		//////////////////////////////////////////////////////////////////
 		// Open File
@@ -987,10 +1001,16 @@
 			$.ajax( {
 				url: this.controller + '?action=open_in_browser&path=' + encodeURIComponent( path ),
 				success: function( data ) {
+					
+					console.log( data )
+					
 					let openIBResponse = codiad.jsend.parse( data );
+					
+					console.log( openIBResponse );
+					
 					if( openIBResponse != 'error' ) {
 						
-						_this.preview = window.open( openIBResponse.url, '_newtab' );
+						_this.preview = window.open( openIBResponse, '_newtab' );
 						
 						let editor = codiad.editor.getActive();
 						
@@ -1407,10 +1427,207 @@
 			});
 		},
 		
+		selected: [],
+		
+		selector_listeners: function( node ) {
+			
+			let _this = this;
+			
+			$( node )
+			.on( 'click', 'a', async function( e ) {
+				
+				// Select or Expand
+				if( codiad.editor.settings.fileManagerTrigger ) {
+					
+					$( this ).addClass( 'loading' );
+					let result = await _this.get_indexes( $( this ).attr( 'data-path' ) );
+					result = codiad.jsend.parse( result );
+					let indexes = result.index
+					console.log( indexes );
+					
+					let ul = $( '<ul></ul>' );
+					let children = _this.create_indexes( indexes, ul, {type: 'directories'}, [] );
+					$( this ).removeClass( 'loading' );
+					_this.trigger_open_close( $( this ).parent(), null );
+					$( this ).parent().children( 'ul' ).remove();
+					$( this ).parent().append( ul );
+				} else {
+					
+					_this.select_node( $( e.target ) );
+				}
+			})
+			.on( 'click', 'span', async function( e ) {
+				
+				// Select or Expand
+				let a = $( this ).parent().children( 'a' );
+				a.addClass( 'loading' );
+				let result = await _this.get_indexes( a.attr( 'data-path' ) );
+				result = codiad.jsend.parse( result );
+				let indexes = result.index
+				console.log( indexes );
+				
+				let ul = $( '<ul></ul>' );
+				let children = _this.create_indexes( indexes, ul, {type: 'directories'}, [] );
+				a.removeClass( 'loading' );
+				_this.trigger_open_close( $( this ).parent(), null );
+				$( this ).parent().children( 'ul' ).remove();
+				$( this ).parent().append( ul );
+		})
+			.on( 'dblclick', 'a', async function( e ) {
+				
+				let _this = codiad.filemanager
+				// Select or Expand
+				if( ! codiad.editor.settings.fileManagerTrigger ) {
+					
+					$( this ).addClass( 'loading' );
+					let result = await _this.get_indexes( $( this ).attr( 'data-path' ) );
+					result = codiad.jsend.parse( result );
+					let indexes = result.index
+					console.log( indexes );
+					
+					let ul = $( '<ul></ul>' );
+					let children = _this.create_indexes( indexes, ul, {type: 'directories'}, [] );
+					$( this ).removeClass( 'loading' );
+					_this.trigger_open_close( $( this ).parent(), null );
+					$( this ).parent().children( 'ul' ).remove();
+					$( this ).parent().append( ul );
+				} else {
+					
+					_this.select_node( $( e.target ) );
+				}
+			})
+			.on( 'selectstart', false );
+		},
+		
+		select_node: function( node ) {
+			
+			let _this = codiad.filemanager;
+			let selected = false;
+			let path = node.attr( 'data-path' );
+			
+			for( let i = _this.selected.total;i--; ) {
+				
+				if( _this.selected[i] == path ) {
+					
+					selected = true;
+				}
+			}
+			
+			if( selected ) {
+				
+				node.css( 'background', "" );
+			} else {
+				
+				_this.selected.push( path );
+				node.css( 'background', "#fff" );
+			}
+		},
+		
+		trigger_open_close: function( node, open ) {
+			
+			let span = node.children( 'span' );
+			let a = node.children( 'a' );
+			let plus = span.hasClass( 'plus' );
+			let minus = span.hasClass( 'minus' );
+			let ul = node.children( 'ul' );
+			
+			if( open === null ) {
+				
+				open = ( plus || span.hasClass( 'none' ) || a.attr( 'data-type' ) == 'root' );
+			}
+			
+			if( open ) {
+				
+				if( plus ) {
+					
+					span.removeClass( 'plus' )
+					span.addClass( 'minus' );
+				}
+				a.addClass( 'open' );
+			} else {
+				
+				span.removeClass( 'minus' );
+				span.addClass( 'plus' );
+				node.children( 'ul' )
+				.slideUp( 300, function() {
+					
+					$( this ).remove();
+					node.removeClass( 'open' );
+					node.children( 'span' ).removeClass( 'minus' ).addClass( 'plus' );
+					node.children().find( 'span' ).removeClass( 'minus' ).addClass( 'plus' );
+					node.children().find( 'a' ).removeClass( 'open' );
+				});
+			}
+		},
+		
 		//////////////////////////////////////////////////////////////////
 		// Upload
 		//////////////////////////////////////////////////////////////////
 		
+		upload: {
+			
+			timers: {
+				off: null,
+			},
+			entries: [],
+		},
+		
+		upload_choose_destination: async function( path ) {
+			
+			let _this = this;
+			
+		},
+		
+		upload_drop: function( e ) {
+			
+			let _this = codiad.filemanager;
+			let data = null;
+			let drop = $( '.drop-overlay' );
+			let items = e.originalEvent.dataTransfer.items;
+			
+			console.log( e );
+			
+			for( let i = items.length;i--; ) {
+				
+				let entry = items[i].webkitGetAsEntry();
+				
+				console.log( entry );
+				
+				if( entry.isFile ) {
+					
+					
+				} else if( entry.isDirectory ) {
+					
+					
+				}
+			}
+			
+			_this.upload_overlay_off();
+			_this.upload_choose_destination();
+		},
+		
+		upload_overlay_off: function() {
+			
+			$( '.drop-overlay' ).css( 'display', 'none' );
+		},
+		
+		upload_overlay_on: function( e ) {
+			
+			e.preventDefault();
+			e.stopPropagation();
+			
+			let _this = codiad.filemanager;
+			let drop = $( e.target );
+			let path = drop.attr( 'data-path' );
+			
+			if( _this.file_.timers.off ) {
+				
+				clearTimeout( _this.upload.timers.off );
+			}
+			
+			_this.upload.timers.off = setTimeout( _this.upload_overlay_off, 1500 );
+		},
+		
 		uploadToNode: function( path ) {
 			codiad.modal.load( 500, this.dialogUpload, {
 				path: path

index.php

@@ -18,6 +18,7 @@ $themes = Common::readDirectory(THEMES);
 // Theme
 $theme = THEME;
 if( isset( $_SESSION['theme'] ) ) {
+	
 	$theme = $_SESSION['theme'];
 }
 
@@ -31,7 +32,8 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 }
 
 ?>
-<!doctype html>
+<!DOCTYPE HTML>
+<html>
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -41,22 +43,31 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 		$stylesheets = array("jquery.toastmessage.css","reset.css","fonts.css","screen.css");
 		
 		foreach( $stylesheets as $sheet ) {
+			
 			if( file_exists( THEMES . "/". $theme . "/".$sheet ) ) {
+				
 				echo( '<link rel="stylesheet" href="themes/' . $theme . '/' . $sheet . '">' );
 			} else {
+				
 				echo( '<link rel="stylesheet" href="themes/default/'.$sheet.'?v=' . get_version() . '">' );
 			}
 		}
 		
 		// Load Component CSS Files    
 		foreach( $components as $component ) {
+			
 			if( file_exists( THEMES . "/". $theme . "/" . $component . "/screen.css" ) ) {
+				
 				echo('<link rel="stylesheet" href="themes/'.$theme.'/'.$component.'/screen.css">');
 			} else {
+				
 				if( file_exists( "themes/default/" . $component . "/screen.css" ) ) {
+					
 					echo( '<link rel="stylesheet" href="themes/default/' . $component . '/screen.css?v=' . get_version() . '">' );
 				} else {
+					
 					if( file_exists( COMPONENTS . "/" . $component . "/screen.css" ) ) {
+						
 						echo( '<link rel="stylesheet" href="components/' . $component . '/screen.css">' );
 					}
 				}
@@ -65,13 +76,19 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 		
 		// Load Plugin CSS Files    
 		foreach( $plugins as $plugin ) {
+			
 			if( file_exists( THEMES . "/". $theme . "/" . $plugin . "/screen.css" ) ) {
+				
 				echo( '<link rel="stylesheet" href="themes/'.$theme.'/'.$plugin.'/screen.css">' );
 			} else {
+				
 				if( file_exists( "themes/default/" . $plugin . "/screen.css" ) ) {
+					
 					echo( '<link rel="stylesheet" href="themes/default/' . $plugin . '/screen.css">' );
 				} else {
+					
 					if( file_exists( PLUGINS . "/" . $plugin . "/screen.css" ) ) {
+						
 						echo( '<link rel="stylesheet" href="plugins/' . $plugin . '/screen.css">' );
 					}
 				}
@@ -80,22 +97,24 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 		?>
 		<link rel="icon" href="favicon.ico" type="image/x-icon" />
 	</head>
-
 	<body>
 		<script>
-    var i18n = (function(lang) {
+			let i18n = (
+				function( lang ) {
+					
 					return function( word, args ) {
-            var x;
+						let x;
-            var returnw = (word in lang) ? lang[word] : word;
+						let returnw = ( word in lang ) ? lang[word] : word;
 						for( x in args ) {
+							
 							returnw = returnw.replace( "%{"+x+"}%", args[x] );   
 						}
 						return returnw;
 					}
-    })(<?php echo json_encode($lang); ?>)
+				}
+			)( <?php echo json_encode( $lang );?> )
 		</script>
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+		<script src="js/jquery-1.7.2.min.js"></script>
-    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.7.2.min.js"%3E%3C/script%3E'));</script>
 		<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
 		<script src="js/jquery.css3.min.js"></script>
 		<script src="js/jquery.easing.js"></script>
@@ -128,64 +147,78 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 				// Installer
 				require_once('components/install/view.php');
 			} else {
+				
 				// Login form
 				?>
-			
 				<form id="login" method="post" style="position: fixed; width: 350px; top: 30%; left: 50%; margin-left: -175px; padding: 35px;">
-
 					<label>
-                	<span class="icon-user login-icon"></span> <?php i18n("Username"); ?>
+						<span class="icon-user login-icon"></span>
+						<?php i18n("Username");?>
 						<input type="text" name="username" autofocus="autofocus" autocomplete="off">
 					</label>
-
 					<label>
-                	<span class="icon-lock login-icon"></span> <?php i18n("Password"); ?>
+						<span class="icon-lock login-icon"></span>
+						<?php i18n("Password");?>
 						<input type="password" name="password">
 						<span class="icon-eye in-field-icon-right hide_field">
 					</label>
 					
 					<div class="language-selector">
-                    <label><span class="icon-picture login-icon"></span> <?php i18n("Theme"); ?></label>
+						<label>
+							<span class="icon-picture login-icon"></span>
+							<?php i18n("Theme");?>
+						</label>
 						<select name="theme" id="theme">
 							<option value="default"><?php i18n("Default");?></option>
 							<?php
 							include 'languages/code.php';
-                        foreach($themes as $theme): 
+							foreach( $themes as $theme ) {
+								
 								if( file_exists( THEMES . "/" . $theme . "/theme.json" ) ) {
+									
 									$data = file_get_contents(THEMES."/" . $theme . "/theme.json");
 									$data = json_decode($data,true);
+									?><option value="<?php echo $theme;?>" <?php if( $theme == THEME ) { echo "selected"; } ?>>
+										<?php if( $data[0]['name'] != '' ) { echo $data[0]['name']; } else { echo $theme; } ?>
+									</option>
+									<?php
+								} 
+							};
 							?>
-                            <option value="<?php echo $theme; ?>" <?php if($theme == THEME) { echo "selected"; } ?>><?php if($data[0]['name'] != '') { echo $data[0]['name']; } else { echo $theme; } ?></option>
-                        <?php } endforeach; ?>
 						</select>
-                    <label><span class="icon-language login-icon"></span> <?php i18n("Language"); ?></label>
+						<label>
+							<span class="icon-language login-icon"></span>
+							<?php i18n("Language"); ?>
+						</label>
 						<select name="language" id="language">
 							<?php
 							include 'languages/code.php';
-                        foreach(glob("languages/*.php") as $filename): 
+							foreach( glob( "languages/*.php" ) as $filename ) {
+								
 								$lang_code = str_replace( array( "languages/", ".php" ), "", $filename );
-                            if(!isset($languages[$lang_code])) continue;
+								if( ! isset( $languages[$lang_code] ) ) {
+									
+									continue;
+								}
 								$lang_disp = ucfirst( strtolower( $languages[$lang_code] ) );
 								?>
-                            <option value="<?php echo $lang_code; ?>" <?php if ($lang_code == "en"){echo "selected";}?>><?php echo $lang_disp; ?></option>
+								<option value="<?php echo $lang_code; ?>" <?php if( $lang_code == "en" ) { echo "selected"; }?>>
-                        <?php endforeach; ?>
+									<?php echo $lang_disp;?>
+								</option>
+								<?php
+							}
+							?>
 						</select>
 					</div>
-                
 					<button><?php i18n("Login"); ?></button>
-
 					<a class="show-language-selector"><?php i18n("More"); ?></a>
-
 				</form>
-
 				<script src="components/user/init.js"></script>
 				<script>
 					$( ".hide_field" ).on( "click", function( e ) {
 						
 						let password = document.querySelector( "input[name='password']" );
 						
-            		console.log( password, password.type );
-            		
 						if( password.type == "password" ) {
 							
 							password.type = "text";
@@ -196,30 +229,28 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 					});
 				</script>
 				<?php
-
 			}
+		} else {
 			
 			//////////////////////////////////////////////////////////////////
 			// AUTHENTICATED
 			//////////////////////////////////////////////////////////////////
 			
-    } else {
-	
 			define( "USER_WORKSPACE", WORKSPACE . '/' . preg_replace( '/[^\w-]/', '', strtolower( $_SESSION["user"] ) ) );
 			
 			if( ! is_dir( USER_WORKSPACE ) ) {
 				
 				mkdir( USER_WORKSPACE, 0755 );
 			}
-	
 			?>
-
 			<div id="workspace">
-
+				<div id="drop-overlay" class="drop-overlay"><span class="drop-overlay-message">Drop files or folders here.</span></div>
 				<div id="sb-left" class="sidebar">
 					<div id="sb-left-title">
 						<a id="lock-left-sidebar" class="icon-lock icon"></a>
-                <?php if (!common::isWINOS()) { ?>
+						<?php
+						if ( ! common::isWINOS() ) {
+							?>
 							<a id="finder-quick" class="icon icon-archive"></a>
 							<a id="tree-search" class="icon-search icon"></a>
 							<h2 id="finder-label"><?php i18n("Explore");?></h2>
@@ -235,12 +266,12 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 									<li><a data-action="search"><?php i18n("Search File Contents"); ?></a></li>
 								</ul>
 							</div>
-                <?php } ?>
+							<?php
+						}
+						?>
 					</div>
-
 					<div class="sb-left-content">
 						<div id="context-menu" data-path="" data-type="">
-
 							<?php
 							
 							////////////////////////////////////////////////////////////
@@ -250,21 +281,30 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 							foreach( $context_menu as $menu_item => $data ) {
 								
 								if( $data['title'] == 'Break' ) {
+									
 									echo( '<hr class="' . $data['applies-to'] . '">' );
 								} else {
+									
 									echo( '<a class="' . $data['applies-to'] . '" onclick="' . $data['onclick'] . '"><span class="' . $data['icon'] . '"></span>' . get_i18n( $data['title'] ) . '</a>' );
 								}
 								
 							}
 							
 							foreach( $plugins as $plugin ) {
+								
 								if( file_exists( PLUGINS . "/" . $plugin . "/plugin.json" ) ) {
+									
 									$pdata = file_get_contents( PLUGINS . "/" . $plugin . "/plugin.json" );
 									$pdata = json_decode( $pdata, true );
+									
 									if( isset( $pdata[0]['contextmenu'] ) ) {
+										
 										foreach( $pdata[0]['contextmenu'] as $contextmenu ) {
+											
 											if( ( ! isset( $contextmenu['admin'] ) || ( $contextmenu['admin'] ) && checkAccess() ) || ! $contextmenu['admin'] ) {
+												
 												if( isset( $contextmenu['applies-to'] ) && isset( $contextmenu['action'] ) && isset( $contextmenu['icon'] ) && isset( $contextmenu['title'] ) ) {
+													
 													echo( '<hr class="' . $contextmenu['applies-to'] . '">' );
 													echo( '<a class="' . $contextmenu['applies-to'] . '" onclick="' . $contextmenu['action'] . '"><span class="' . $contextmenu['icon'] . '"></span>' . $contextmenu['title'] . '</a>' );
 												}
@@ -273,20 +313,13 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 									}
 								}
 							}
-
 							?>
-
 						</div>
-
+						<div id="file-manager" class="file-manager"></div>
-                <div id="file-manager"></div>
-
 						<ul id="list-active-files"></ul>
-
 					</div>
-            
 					<div id="side-projects" class="sb-left-projects">
 						<div id="project-list" class="sb-project-list">
-                
 							<div class="project-list-title">
 								<h2><?php i18n("Projects"); ?></h2>
 								<a id="projects-collapse" class="icon-down-dir icon" alt="<?php i18n("Collapse"); ?>"></a>
@@ -295,18 +328,14 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 								<a id="projects-create" class="icon-plus icon" alt="<?php i18n("Create Project"); ?>"></a>
 								<?php //} ?>
 							</div>
-                    
 							<div class="sb-projects-content"></div>
-                    
 						</div>
 					</div>
-
+					<div class="sidebar-handle">
-            <div class="sidebar-handle"><span>||</span></div>
+						<span>||</span>
-
+					</div>
 				</div>
-
 				<div id="cursor-position"><?php i18n("Ln"); ?>: 0 &middot; <?php i18n("Col"); ?>: 0</div>
-
 				<div id="editor-region">
 					<div id="editor-top-bar">
 						<ul id="tab-list-active-files"></ul>
@@ -319,12 +348,11 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 						<ul id="dropdown-list-active-files"></ul>
 						<div class="bar"></div>
 					</div>
-
 					<div id="root-editor-wrapper"></div>
-
 					<div id="editor-bottom-bar">
-                <a id="settings" class="ico-wrapper"><span class="icon-doc-text"></span><?php i18n("Settings"); ?></a>
+						<a id="settings" class="ico-wrapper">
-                
+							<span class="icon-doc-text"></span><?php i18n("Settings");?>
+						</a>
 						<?php
 						
 						////////////////////////////////////////////////////////////
@@ -332,13 +360,19 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 						////////////////////////////////////////////////////////////
 						
 						foreach( $plugins as $plugin ) {
+							
 							if( file_exists( PLUGINS . "/" . $plugin . "/plugin.json" ) ) {
+								
 								$pdata = file_get_contents( PLUGINS . "/" . $plugin . "/plugin.json" );
 								$pdata = json_decode( $pdata, true );
 								if( isset( $pdata[0]['bottombar'] ) ) {
+								
 									foreach( $pdata[0]['bottombar'] as $bottommenu ) {
+										
 										if( ( ! isset( $bottommenu['admin'] ) || ( $bottommenu['admin'] ) && checkAccess()) || ! $bottommenu['admin'] ) {
+											
 											if( isset( $bottommenu['action'] ) && isset( $bottommenu['icon'] ) && isset( $bottommenu['title'] ) ) {
+												
 												echo( '<div class="divider"></div>' );
 												echo( '<a onclick="' . $bottommenu['action'] . '"><span class="' . $bottommenu['icon'] . '"></span>' . $bottommenu['title'] . '</a>' );
 											}
@@ -347,34 +381,33 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 								}
 							}
 						}
-
 						?>
-                
 						<div class="divider"></div>
 						<a id="split" class="ico-wrapper"><span class="icon-layout"></span><?php i18n("Split"); ?></a>
 						<div class="divider"></div>
-                <a id="current-mode"><span class="icon-layout"></span></a>                
+						<a id="current-mode">
+							<span class="icon-layout"></span>
+						</a>                
 						<div class="divider"></div>
 						<div id="current-file"></div>
 					</div>
-            <div id="changemode-menu" class="options-menu">
+					<div id="changemode-menu" class="options-menu"></div>
-            </div>
 					<ul id="split-options-menu" class="options-menu">
 						<li id="split-horizontally"><a> <?php i18n("Split Horizontally"); ?> </a></li>
 						<li id="split-vertically"><a> <?php i18n("Split Vertically"); ?> </a></li>
 						<li id="merge-all"><a> <?php i18n("Merge all"); ?> </a></li>
 					</ul>
 				</div>
-
 				<div id="sb-right" class="sidebar">
-
+					<div class="sidebar-handle">
-            <div class="sidebar-handle"><span><a class="icon-menu"></a></span></div>
+						<span>
+							<a class="icon-menu"></a>
+						</span>
+					</div>
 					<div id="sb-right-title">
 						<span id="lock-right-sidebar" class="icon-switch icon"></span>
 					</div>
-
 					<div class="sb-right-content">
-
 						<?php
 						
 						////////////////////////////////////////////////////////////
@@ -382,58 +415,72 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 						////////////////////////////////////////////////////////////
 						
 						foreach( $right_bar as $item_rb => $data ) {
+							
 							if( ! isset( $data['admin'] ) ) {
+								
 								$data['admin'] = false;
 							}
 							if( $data['title'] == 'break' ) {
+								
 								if( ! $data['admin'] || $data['admin'] && checkAccess() ) {
+									
 									echo( "<hr>" );
 								}
 							} elseif( $data['title'] != 'break' && $data['title'] != 'pluginbar' && $data['onclick'] == '' ) {
+								
 								if( ! $data['admin'] || $data['admin'] && checkAccess() ) {
+									
 									echo( "<hr><div class='sb-right-category'>" . get_i18n( $data['title'] ) . "</div>" );
 								}
 							} elseif( $data['title'] == 'pluginbar' ) {
+								
 								if( ! $data['admin'] || $data['admin'] && checkAccess() ) {
+									
 									foreach( $plugins as $plugin ) {
+										
 										if( file_exists( PLUGINS . "/" . $plugin . "/plugin.json" ) ) {
+											
 											$pdata = file_get_contents( PLUGINS . "/" . $plugin . "/plugin.json" );
 											$pdata = json_decode( $pdata, true );
 											if( isset( $pdata[0]['rightbar'] ) ) {
+												
 												foreach( $pdata[0]['rightbar'] as $rightbar ) {
+													
 													if( ( ! isset( $rightbar['admin'] ) || ( $rightbar['admin'] ) && checkAccess()) || ! $rightbar['admin'] ) {
+														
 														if( isset( $rightbar['action'] ) && isset( $rightbar['icon'] ) && isset( $rightbar['title'] ) ) {
+															
 															echo( '<a onclick="' . $rightbar['action'] . '"><span class="' . $rightbar['icon'] . '"></span>' . get_i18n( $rightbar['title'] ) . '</a>' );
 														}
 													}
 												}
-                                        //echo("<hr>");
 											}
 										}
 									}
 								}
 							} else {
+								
 								if( ! $data['admin'] || $data['admin'] && checkAccess() ) {
+									
 									echo( '<a onclick="' . $data['onclick'] . '"><span class="' . $data['icon'] . ' bigger-icon"></span>'. get_i18n( $data['title'] ) . '</a>' );
 								}
 							}
 							
 						}
-
 					?>
-
 					</div>
-
 				</div>
-
 			</div>
-
 			<div id="modal-overlay"></div>
-    <div id="modal"><div id="close-handle" class="icon-cancel" onclick="codiad.modal.unload();"></div><div id="drag-handle" class="icon-location"></div><div id="modal-content"></div></div>
+			<div id="modal">
-
+				<div id="close-handle" class="icon-cancel" onclick="codiad.modal.unload();"></div>
+				<div id="drag-handle" class="icon-location"></div>
+				<div id="modal-content"></div>
+			</div>
 			<iframe id="download"></iframe>
-
+			<div id="autocomplete">
-    <div id="autocomplete"><ul id="suggestions"></ul></div>
+				<ul id="suggestions"></ul>
+			</div>
 			
 			<!-- ACE -->
 			<script src="components/editor/ace-editor/ace.js"></script>
@@ -456,19 +503,21 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
 			
 			// JS
 			foreach( $components as $component ) {
+				
 				if( file_exists( COMPONENTS . "/" . $component . "/init.js" ) ) {
+					
 					echo( '<script src="components/' . $component . '/init.js"></script>"' );
 				}
 			}
 			
 			foreach( $plugins as $plugin ) {
+				
 				if( file_exists( PLUGINS . "/" . $plugin . "/init.js" ) ) {
+					
 					echo( '<script src="plugins/' . $plugin . '/init.js"></script>"' );
 				}
 			}
-
 		}
-
 		?>
 	</body>
 </html>

themes/default/filemanager/screen.css

@@ -1,4 +1,4 @@
-#file-manager {
+.file-manager {
     width: 100%;
     height: 100%;
     float: left;
@@ -6,32 +6,32 @@
     padding: 15px 15px 30px 15px;
     overflow: auto;
 }
-#file-manager ul {
+.file-manager ul {
     display: block;
     margin: 0;
     padding: 0;
 }
-#file-manager li {
+.file-manager li {
     display: block;
     margin: 0;
     padding: 2px 0;
     list-style: none;
 }
-#file-manager ul ul li {
+.file-manager ul ul li {
     margin-left: 20px;
     white-space: nowrap;
 }
-#file-manager a {
+.file-manager a {
     display: inline-block;
     min-width: 100%;
     cursor: pointer;
     padding: 5px;
     border-radius: 3px;
 }
-#file-manager a:hover, #file-manager a.context-menu-active {
+.file-manager a:hover, .file-manager a.context-menu-active {
     background-color: #333;
 }
-#file-manager span {
+.file-manager span {
     width:10px;
     height:10px;
     display: inline-block;
@@ -39,40 +39,40 @@
     padding-top: 0;
     line-height: 6px;
 }
-#file-manager .plus:before {
+.file-manager .plus:before {
     display: block;
     content: "\25b8";
     padding: 5px;
     margin-left: -10px;
     font-size: 16px;
 }
-#file-manager .plus {
+.file-manager .plus {
     color: gray;
     font-family: entypo;
     font-style: normal;
     display: inline-block;
 }
-#file-manager .none {
+.file-manager .none {
     background: none;
 }
-#file-manager .minus:before {
+.file-manager .minus:before {
     display: block;
     content: "\25be";
     padding: 5px;
     margin-left: -10px;
     font-size: 16px;
 }
-#file-manager .minus {
+.file-manager .minus {
     color: gray;
     font-family: entypo;
     font-style: normal;
     display: inline-block;
 }
-#file-manager .plus:hover {
+.file-manager .plus:hover {
     cursor: pointer;
     color: #fff;
 }
-#file-manager .minus:hover {
+.file-manager .minus:hover {
     cursor: pointer;
     color: #fff;
 }
@@ -214,214 +214,220 @@
 
 /* ICONS */
 
-#file-manager a {
+.file-manager a {
     background-repeat: no-repeat;
     background-position: 4px 4px;
     text-indent: 22px;
     padding-top: 5px;
 }
-#file-manager .directory {
+.file-manager .directory {
     background-image: url(images/directory.png);
 }
-#file-manager .directory.open {
+.file-manager .directory.open {
     background-image: url(images/directory_open.png);
 }
-#file-manager .file {
+.file-manager .file {
     background-image: url(images/file.png);
 }
 
 /* EXTENSIONS */
-#file-manager .ext-htaccess {
+.file-manager .ext-htaccess {
     background-image: url(images/config.png);
 }
-#file-manager .ext-conf {
+.file-manager .ext-conf {
     background-image: url(images/config.png);
 }
-#file-manager .ext-ini {
+.file-manager .ext-ini {
     background-image: url(images/config.png);
 }
-#file-manager .ext-3gp {
+.file-manager .ext-3gp {
     background-image: url(images/film.png);
 }
-#file-manager .ext-afp {
+.file-manager .ext-afp {
     background-image: url(images/code.png);
 }
-#file-manager .ext-afpa {
+.file-manager .ext-afpa {
     background-image: url(images/code.png);
 }
-#file-manager .ext-asp {
+.file-manager .ext-asp {
     background-image: url(images/code.png);
 }
-#file-manager .ext-aspx {
+.file-manager .ext-aspx {
     background-image: url(images/code.png);
 }
-#file-manager .ext-avi {
+.file-manager .ext-avi {
     background-image: url(images/film.png);
 }
-#file-manager .ext-bat {
+.file-manager .ext-bat {
     background-image: url(images/application.png);
 }
-#file-manager .ext-bmp {
+.file-manager .ext-bmp {
     background-image: url(images/picture.png);
 }
-#file-manager .ext-c {
+.file-manager .ext-c {
     background-image: url(images/code.png);
 }
-#file-manager .ext-cfm {
+.file-manager .ext-cfm {
     background-image: url(images/code.png);
 }
-#file-manager .ext-cgi {
+.file-manager .ext-cgi {
     background-image: url(images/code.png);
 }
-#file-manager .ext-com {
+.file-manager .ext-com {
     background-image: url(images/application.png);
 }
-#file-manager .ext-cpp {
+.file-manager .ext-cpp {
     background-image: url(images/code.png);
 }
-#file-manager .ext-css {
+.file-manager .ext-css {
     background-image: url(images/css.png);
 }
-#file-manager .ext-doc {
+.file-manager .ext-doc {
     background-image: url(images/doc.png);
 }
-#file-manager .ext-exe {
+.file-manager .ext-exe {
     background-image: url(images/application.png);
 }
-#file-manager .ext-gif {
+.file-manager .ext-gif {
     background-image: url(images/picture.png);
 }
-#file-manager .ext-fla {
+.file-manager .ext-fla {
     background-image: url(images/flash.png);
 }
-#file-manager .ext-h {
+.file-manager .ext-h {
     background-image: url(images/code.png);
 }
-#file-manager .ext-htm {
+.file-manager .ext-htm {
     background-image: url(images/html.png);
 }
-#file-manager .ext-html {
+.file-manager .ext-html {
     background-image: url(images/html.png);
 }
-#file-manager .ext-jar {
+.file-manager .ext-jar {
     background-image: url(images/java.png);
 }
-#file-manager .ext-jpg {
+.file-manager .ext-jpg {
     background-image: url(images/picture.png);
 }
-#file-manager .ext-jpeg {
+.file-manager .ext-jpeg {
     background-image: url(images/picture.png);
 }
-#file-manager .ext-js {
+.file-manager .ext-js {
     background-image: url(images/script.png);
 }
-#file-manager .ext-json {
+.file-manager .ext-json {
     background-image: url(images/script.png);
 }
-#file-manager .ext-lasso {
+.file-manager .ext-lasso {
     background-image: url(images/code.png);
 }
-#file-manager .ext-log {
+.file-manager .ext-log {
     background-image: url(images/text-plain.png);
 }
-#file-manager .ext-m4p {
+.file-manager .ext-m4p {
     background-image: url(images/music.png);
 }
-#file-manager .ext-mov {
+.file-manager .ext-mov {
     background-image: url(images/film.png);
 }
-#file-manager .ext-mp3 {
+.file-manager .ext-mp3 {
     background-image: url(images/music.png);
 }
-#file-manager .ext-mp4 {
+.file-manager .ext-mp4 {
     background-image: url(images/film.png);
 }
-#file-manager .ext-mpg {
+.file-manager .ext-mpg {
     background-image: url(images/film.png);
 }
-#file-manager .ext-mpeg {
+.file-manager .ext-mpeg {
     background-image: url(images/film.png);
 }
-#file-manager .ext-ogg {
+.file-manager .ext-ogg {
     background-image: url(images/music.png);
 }
-#file-manager .ext-pcx {
+.file-manager .ext-pcx {
     background-image: url(images/picture.png);
 }
-#file-manager .ext-pdf {
+.file-manager .ext-pdf {
     background-image: url(images/pdf.png);
 }
-#file-manager .ext-php {
+.file-manager .ext-php {
     background-image: url(images/php.png);
 }
-#file-manager .ext-png {
+.file-manager .ext-png {
     background-image: url(images/picture.png);
 }
-#file-manager .ext-ppt {
+.file-manager .ext-ppt {
     background-image: url(images/ppt.png);
 }
-#file-manager .ext-psd {
+.file-manager .ext-psd {
     background-image: url(images/psd.png);
 }
-#file-manager .ext-pl {
+.file-manager .ext-pl {
     background-image: url(images/script.png);
 }
-#file-manager .ext-py {
+.file-manager .ext-py {
     background-image: url(images/script.png);
 }
-#file-manager .ext-rb {
+.file-manager .ext-rb {
     background-image: url(images/ruby.png);
 }
-#file-manager .ext-rbx {
+.file-manager .ext-rbx {
     background-image: url(images/ruby.png);
 }
-#file-manager .ext-rhtml {
+.file-manager .ext-rhtml {
     background-image: url(images/ruby.png);
 }
-#file-manager .ext-rpm {
+.file-manager .ext-rpm {
     background-image: url(images/linux.png);
 }
-#file-manager .ext-ruby {
+.file-manager .ext-ruby {
     background-image: url(images/ruby.png);
 }
-#file-manager .ext-sql {
+.file-manager .ext-sql {
     background-image: url(images/db.png);
 }
-#file-manager .ext-swf {
+.file-manager .ext-swf {
     background-image: url(images/flash.png);
 }
-#file-manager .ext-tif {
+.file-manager .ext-tif {
     background-image: url(images/picture.png);
 }
-#file-manager .ext-tiff {
+.file-manager .ext-tiff {
     background-image: url(images/picture.png);
 }
-#file-manager .ext-txt {
+.file-manager .ext-txt {
     background-image: url(images/file.png);
 }
-#file-manager .ext-vb {
+.file-manager .ext-vb {
     background-image: url(images/code.png);
 }
-#file-manager .ext-wav {
+.file-manager .ext-wav {
     background-image: url(images/music.png);
 }
-#file-manager .ext-wmv {
+.file-manager .ext-wmv {
     background-image: url(images/film.png);
 }
-#file-manager .ext-xls {
+.file-manager .ext-xls {
     background-image: url(images/xls.png);
 }
-#file-manager .ext-xml {
+.file-manager .ext-xml {
     background-image: url(images/code.png);
 }
-#file-manager .ext-zip {
+.file-manager .ext-zip {
     background-image: url(images/zip.png);
 }
 
-#file-manager .loading {
+.file-manager .loading {
     background-image: url(images/spinner.gif);
 }
-#file-manager .drag_over {
+
+.file-manager .drag_start {
+	background-color: #333;
+	/*border-radius: 10px;*/
+}
+.file-manager .drag_over {
 	background-color: #4a4a4a;
 	border-radius: 10px;
 }
+

themes/default/screen.css

@@ -20,7 +20,7 @@
     background-color: #999;
 }
 
-::-webkit-scrollbar-thumb:horizontal {i
+::-webkit-scrollbar-thumb:horizontal {
     width: 5px;
     background-color: #666;
     -webkit-border-radius: 3px;
@@ -816,6 +816,7 @@ table [class^="icon-"], [class*=" icon-"] {
     background: url(loading.gif) no-repeat center;
 }
 
+
     /* Download iFrame */
 #download {
     display: none;
@@ -829,3 +830,29 @@ table [class^="icon-"], [class*=" icon-"] {
 	vertical-align: middle;
 	width: 25px;
 }
+
+.drop-overlay {
+	
+	display: none;
+	
+	border: 2px dashed #fff;
+	border-radius: 10px;
+
+	background: rgba( 255, 255, 255, 0.15 );
+	height: 100%;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+	z-index: 97;
+}
+
+.drop-overlay-message {
+	
+	text-align: center;
+	position: relative;
+	float: left;
+	top: 50%;
+	left: 50%;
+	transform: translate( -50%, -50% );
+}