diff --git a/index.html b/index.html new file mode 100644 index 0000000..c56be1b --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + CodePen - File explorer + + + + + +
+ futurama +

dfjdjgkdfjkdfgjvdfjkvkjdfvjdfvkndkfvjd

+

fgfgbfgbfgbfgbfgb

+
+
+
+ +
+
+
+ +
+
+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..6998859 --- /dev/null +++ b/script.js @@ -0,0 +1,140 @@ +$('#view i').on('click', function(){ + var classe = $(this).attr('id'); + $('#content').attr('class', '').addClass(classe); +}); + +var clipboard = ['','']; + +var dir = '/directory/'; + +function updateContent(directory) { + var content = [ + ['css', 'js'], + ['favicon.ico', 'photo.jpg', 'access.php', 'index.php', 'save.php', 'file.txt'] + ]; + + var destination = $('#content').html(''); + var folders = content[0]; + var files = content[1]; + + //update path + var path = $('#directory').html(''); + var paths = directory.replace(/^\/+|\/+$/g, '').split('/'); + for(var i = 0; i < paths.length; i++) { + if(paths[i] !== '') { + var thispath = paths.slice(0,i+1).join('/'); + path.append('/' + paths[i] + ''); + } + } + + // update content + if(folders.length > 0) { + for(var i = 0; i < folders.length; i++) { + destination.append('
' + folders[i] + '
'); + } + } + if(files.length > 0) { + for(var i = 0; i < files.length; i++) { + destination.append('
' + files[i] + '
'); + } + } +} + +updateContent(dir) + +// http://i1-news.softpedia-static.com/images/news2/what-a-modern-version-of-windows-10-s-file-explorer-could-look-like-500353-3.jpg + +$(document).on('contextmenu', '*', function(e){ + openctxmenu($(this), e); +}); +$(document).on('click', '.custom-menu li', function(){ + ctxfunction($(this)); +}); +$(window).on('click resize', function(e){ + closectxmenu(); +}); +$(document).on('click', '#content > *', function(e){ + e.preventDefault(); + e.stopPropagation(); + $(this).parent().find(' > *').removeClass('hover'); + $(this).addClass('hover'); + closectxmenu(); +}); +$(document).on('click', '#content', function(e){ + $(this).find(' > *').removeClass('hover'); +}); + +var filectxmenu = ['file', ['Open', 'Download', 'Copy', 'Cut', 'Delete', 'Rename']]; + +var folderctxmenu = ['folder', ['Open', 'Copy', 'Cut', 'Delete', 'Rename']]; + +var contentctxmenu = ['content', ['Refresh', 'Paste', 'Upload file', 'New file', 'New folder']]; + +function addCtxMenu(array) { + var menu = $('').appendTo('body'); + for(var i =0; i < array[1].length; i++) { + menu.append('
  • ' + array[1][i] + '
    • '); + } +} +addCtxMenu(filectxmenu); +addCtxMenu(folderctxmenu); +addCtxMenu(contentctxmenu); + +function openctxmenu(element, e) { + e.stopPropagation(); + var type = element.closest("[class!=''][class]").attr('class').split(' ')[0]; + var id = element.attr('id'); + if(type == 'folder' || type == 'file' || id == 'content') { + var object = element.closest('a').attr('href'); + if(id) { type = id; object = $('#directory .current').attr('href'); } + e.preventDefault(); + var ctxmenu = $('.custom-menu[alt=' + type + ']'); + ctxmenu.show().css({ + top: e.pageY + "px", + left: e.pageX + "px" + }).attr('href', object); + if($(window).innerHeight() - e.pageY < ctxmenu.innerHeight()) { + ctxmenu.css('top', e.pageY-ctxmenu.innerHeight()); + } + } +} + +function closectxmenu() { + $('.custom-menu').hide(); +} + +function ctxfunction(element) { + var object = element.closest('.custom-menu').attr('href'); + var functionname = element.attr('data-action'); + switch(functionname) { + case 'renamefile': + case 'renamefolder': + var span = $('a[href="' + object + '"] span'); + var name = prompt('Choose new name', span.text()); + if(name !== '') { + span.text(name); + } + break; + case 'deletefile': + case 'deletefolder': + if(confirm("Delete ?")) { + $('a[href="' + object + '"]').remove(); + } + break; + case 'copyfile': + case 'copyfolder': + clipboard = ['copy', object]; + break; + case 'cutfile': + case 'cutfolder': + clipboard = ['cut', object]; + break; + case 'refreshcontent': + updateContent(dir); + break; + default: + alert('no function for : ' + functionname); + } +} + +$('#save #input input').focus(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..477d793 --- /dev/null +++ b/style.css @@ -0,0 +1,228 @@ +.popup { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.6); + padding: 10px; + text-align: center; +} +#main { + filter: blur(6px); +} +#explorer { + height: 540px; + max-height: 100%; + text-align: left; + padding: 0; + padding-top: 80px; + cursor: default; + background: #FAFAFA; +} +#explorer.save { + padding-bottom: 40px; +} +#explorer.save #save { + display: block; +} + +/* header */ + +#explorer #header { + background: #00589F; + color: white; + position: absolute; + top: 0; + left: 0; + right: 0; +} +#header h3, #header > i { + line-height: 15px; +} +#header h3 { + font-size: 14px; + padding: 10px; +} +#header > i { + position: absolute; + top: 0; + right: 0; + padding: 10px 14px; + cursor: pointer; +} +#header #dir { + background: #0078D7; + padding: 10px 0; + height: 45px; +} +#dir > *, #directory a { + margin: 0 5px; + line-height: 25px; + font-size: 1.1em; +} +#dir > i { + margin: 0 10px; + cursor: pointer; +} +#dir hr { + background: #00589F; + width: 1px; + height: 25px; + border: 0px none; +} +#dir a i { + display: block; +} +#header #view { + position: absolute; + bottom: 0; + right: 0; + height: 45px; + padding-right: 14px; +} +#view i { + margin-left: 14px; + cursor: pointer; +} + +/* content */ + +#explorer #content { + height: 100%; + padding: 10px 20px; + overflow-y: scroll; +} +#content.view-icons > * { + display: inline-block; + width: 90px; + height: 90px; + vertical-align: top; + text-align: center; +} +#content.view-icons a > *:before { + height: 60px; + width: 60px; + font-size: 60px; + display: block; + margin: 0 auto; +} +#content > * { + cursor: pointer; + padding: 2px 0; + display: block; +} +#content > *:hover, #content > *.hover { + background: #DCEAF5; +} +.folder:before { + content: "\f07b"; + font-family: "FontAwesome"; + margin-right: 5px; + margin-left: 5px; + width: 14px; + color: #446CB3; + display: inline-block; +} +.folder input, .file input { + width: 100%; +} +.folder, .file { + overflow: hidden; +} +.file, .file:before { + line-height: 20px; + font-size: 16px; +} +.file:before { + content: url(http://therolf.esy.es/workspace/img/icons/default.svg); + height: 22px; + width: 22px; + display: inline-block; + margin:-5px 0 -5px 1px; + vertical-align: middle; +} +.file.php:before { + content: url(http://therolf.esy.es/workspace/img/icons/php.svg); +} +.file.txt:before { + content: url(http://therolf.esy.es/workspace/img/icons/default.svg); +} +.file.svg:before { + content: url(http://therolf.esy.es/workspace/img/icons/svg.svg); +} +.file.css:before { + content: url(http://therolf.esy.es/workspace/img/icons/css.svg); +} +.file.js:before { + content: url(http://therolf.esy.es/workspace/img/icons/javascript.svg); +} +.file.psd:before { + content: url(http://therolf.esy.es/workspace/img/icons/photoshop.svg); +} +.file.ico:before { + content: url(http://therolf.esy.es/workspace/img/icons/favicon.svg); +} +.file.png:before, .file.jpg:before, .file.jpeg:before, .file.bmp:before { + content: url(http://therolf.esy.es/workspace/img/icons/image.svg); +} +.file.eot:before, .file.woff:before, .file.woff2:before, .file.ttf:before, .file.otf:before, .file.otc:before, .file.ttc:before { + content: url(http://therolf.esy.es/workspace/img/icons/font.svg); +} +.file.html:before { + content: url(http://therolf.esy.es/workspace/img/icons/html.svg); +} +/* CONTEXT MENU */ +.custom-menu { + display: none; + z-index: 1000; + position: fixed; + overflow: hidden; + white-space: nowrap; + background: #FAFAFA; + font-size: .9em; + -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3); +-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3); +-o-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3); +box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3); +filter:progid:DXImageTransform.Microsoft.Shadow(color=#rgba(0, 0, 0, 0.3), Direction=180, Strength=2); +} + +/* Each of the items in the list */ +.custom-menu li { + padding: 4px 12px; + cursor: pointer; +} + +.custom-menu li:hover { + background-color: #DCEAF5; +} + +/* save menu */ +#explorer #save { + position: absolute; + background: #F0F0F0; + bottom: 0; + left: 0; + right: 0; + height: 40px; + display: none; +} +#save > * { + height: 100%; +} +#save #input { + overflow: hidden; + padding: 0 10px; +} +#save .floatright { + width: 100px; + background: #0078D7; + color: #fff; + font-size: .7em; + height: 100%; + cursor: pointer; +} +#save > * > input { + width: 100%; +} \ No newline at end of file