From 1304b511e9533dee4cf1125e625568c8a74719a1 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Sat, 17 Aug 2013 13:07:18 +0200 Subject: Ajax calls for "files" and "files_trashbin" apps Frontend: - The files app list now uses ajax calls to refresh the list. - Added support the browser back button (history API). - Added mask + spinner while loading file list Backend: - Added utility function in core JS for parsing query strings. - Moved file list + breadcrumb template data code to helper functions - Fixed some file paths in trashbin app to be similar to the files app --- apps/files/js/files.js | 48 +++++++++++++++++++++++++++++------------------- 1 file changed, 29 insertions(+), 19 deletions(-) (limited to 'apps/files/js/files.js') diff --git a/apps/files/js/files.js b/apps/files/js/files.js index d729077ea72..ce72c7bcb5a 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -94,29 +94,34 @@ Files={ OC.Notification.show(t('files_encryption', 'Encryption was disabled but your files are still encrypted. Please go to your personal settings to decrypt your files.')); return; } + }, + + setupDragAndDrop: function(){ + var $fileList = $('#fileList'); + + //drag/drop of files + $fileList.find('tr td.filename').each(function(i,e){ + if ($(e).parent().data('permissions') & OC.PERMISSION_DELETE) { + $(e).draggable(dragOptions); + } + }); + + $fileList.find('tr[data-type="dir"] td.filename').each(function(i,e){ + if ($(e).parent().data('permissions') & OC.PERMISSION_CREATE){ + $(e).droppable(folderDropOptions); + } + }); } }; $(document).ready(function() { Files.displayEncryptionWarning(); Files.bindKeyboardShortcuts(document, jQuery); - $('#fileList tr').each(function(){ - //little hack to set unescape filenames in attribute - $(this).attr('data-file',decodeURIComponent($(this).attr('data-file'))); - }); + + FileList.postProcessList(); + Files.setupDragAndDrop(); $('#file_action_panel').attr('activeAction', false); - //drag/drop of files - $('#fileList tr td.filename').each(function(i,e){ - if ($(e).parent().data('permissions') & OC.PERMISSION_DELETE) { - $(e).draggable(dragOptions); - } - }); - $('#fileList tr[data-type="dir"] td.filename').each(function(i,e){ - if ($(e).parent().data('permissions') & OC.PERMISSION_CREATE){ - $(e).droppable(folderDropOptions); - } - }); $('div.crumb:not(.last)').droppable(crumbDropOptions); $('ul#apps>li:first-child').data('dir',''); if($('div.crumb').length){ @@ -335,6 +340,9 @@ $(document).ready(function() { resizeBreadcrumbs(true); + // event handlers for breadcrumb items + $('#controls').delegate('.crumb a', 'click', onClickBreadcrumb); + // display storage warnings setTimeout ( "Files.displayStorageWarnings()", 100 ); OC.Notification.setDefault(Files.displayStorageWarnings); @@ -415,10 +423,6 @@ function boolOperationFinished(data, callback) { } } -function updateBreadcrumb(breadcrumbHtml) { - $('p.nav').empty().html(breadcrumbHtml); -} - var createDragShadow = function(event){ //select dragged file var isDragSelected = $(event.target).parents('tr').find('td input:first').prop('checked'); @@ -681,3 +685,9 @@ function checkTrashStatus() { } }); } + +function onClickBreadcrumb(e){ + var $el = $(e.target).closest('.crumb'); + e.preventDefault(); + FileList.changeDirectory(decodeURIComponent($el.data('dir'))); +} -- cgit v1.2.3 From 4e751cbb473b416f693473ae69e7c55e013e854b Mon Sep 17 00:00:00 2001 From: Thomas Müller Date: Tue, 27 Aug 2013 13:13:00 +0200 Subject: fixing breadcrumbs on ajax loading of files --- apps/files/js/filelist.js | 6 +- apps/files/js/files.js | 133 ++++++++++++++++++++++------------------- apps/files/templates/index.php | 4 +- 3 files changed, 78 insertions(+), 65 deletions(-) (limited to 'apps/files/js/files.js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 21f713b4a80..b3955b3d22e 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -218,8 +218,10 @@ var FileList={ if(typeof(result.data.breadcrumb) != 'undefined'){ $controls.find('.crumb').remove(); $controls.prepend(result.data.breadcrumb); - // TODO: might need refactor breadcrumb code into a new file - //resizeBreadcrumbs(true); + + var width = $(window).width(); + Files.initBreadCrumbs(); + Files.resizeBreadcrumbs(width, true); // in case svg is not supported by the browser we need to execute the fallback mechanism if(!SVGSupport()) { diff --git a/apps/files/js/files.js b/apps/files/js/files.js index ce72c7bcb5a..1ea2f5fbcc2 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -111,6 +111,72 @@ Files={ $(e).droppable(folderDropOptions); } }); + }, + + lastWidth: 0, + + initBreadCrumbs: function () { + Files.lastWidth = 0; + Files.breadcrumbs = []; + + // initialize with some extra space + Files.breadcrumbsWidth = 64; + if ( document.getElementById("navigation") ) { + Files.breadcrumbsWidth += $('#navigation').get(0).offsetWidth; + } + Files.hiddenBreadcrumbs = 0; + + $.each($('.crumb'), function(index, breadcrumb) { + Files.breadcrumbs[index] = breadcrumb; + Files.breadcrumbsWidth += $(breadcrumb).get(0).offsetWidth; + }); + + + $.each($('#controls .actions>div'), function(index, action) { + Files.breadcrumbsWidth += $(action).get(0).offsetWidth; + }); + }, + + resizeBreadcrumbs: function (width, firstRun) { + if (width != Files.lastWidth) { + if ((width < Files.lastWidth || firstRun) && width < Files.breadcrumbsWidth) { + if (Files.hiddenBreadcrumbs == 0) { + Files.breadcrumbsWidth -= $(Files.breadcrumbs[1]).get(0).offsetWidth; + $(Files.breadcrumbs[1]).find('a').hide(); + $(Files.breadcrumbs[1]).append('...'); + Files.breadcrumbsWidth += $(Files.breadcrumbs[1]).get(0).offsetWidth; + Files.hiddenBreadcrumbs = 2; + } + var i = Files.hiddenBreadcrumbs; + while (width < Files.breadcrumbsWidth && i > 1 && i < Files.breadcrumbs.length - 1) { + Files.breadcrumbsWidth -= $(Files.breadcrumbs[i]).get(0).offsetWidth; + $(Files.breadcrumbs[i]).hide(); + Files.hiddenBreadcrumbs = i; + i++ + } + } else if (width > Files.lastWidth && Files.hiddenBreadcrumbs > 0) { + var i = Files.hiddenBreadcrumbs; + while (width > Files.breadcrumbsWidth && i > 0) { + if (Files.hiddenBreadcrumbs == 1) { + Files.breadcrumbsWidth -= $(Files.breadcrumbs[1]).get(0).offsetWidth; + $(Files.breadcrumbs[1]).find('span').remove(); + $(Files.breadcrumbs[1]).find('a').show(); + Files.breadcrumbsWidth += $(Files.breadcrumbs[1]).get(0).offsetWidth; + } else { + $(Files.breadcrumbs[i]).show(); + Files.breadcrumbsWidth += $(Files.breadcrumbs[i]).get(0).offsetWidth; + if (Files.breadcrumbsWidth > width) { + Files.breadcrumbsWidth -= $(Files.breadcrumbs[i]).get(0).offsetWidth; + $(Files.breadcrumbs[i]).hide(); + break; + } + } + i--; + Files.hiddenBreadcrumbs = i; + } + } + Files.lastWidth = width; + } } }; $(document).ready(function() { @@ -273,72 +339,15 @@ $(document).ready(function() { //do a background scan if needed scanFiles(); - var lastWidth = 0; - var breadcrumbs = []; - var breadcrumbsWidth = 0; - if ( document.getElementById("navigation") ) { - breadcrumbsWidth = $('#navigation').get(0).offsetWidth; - } - var hiddenBreadcrumbs = 0; - - $.each($('.crumb'), function(index, breadcrumb) { - breadcrumbs[index] = breadcrumb; - breadcrumbsWidth += $(breadcrumb).get(0).offsetWidth; - }); - - - $.each($('#controls .actions>div'), function(index, action) { - breadcrumbsWidth += $(action).get(0).offsetWidth; - }); - - function resizeBreadcrumbs(firstRun) { - var width = $(this).width(); - if (width != lastWidth) { - if ((width < lastWidth || firstRun) && width < breadcrumbsWidth) { - if (hiddenBreadcrumbs == 0) { - breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth; - $(breadcrumbs[1]).find('a').hide(); - $(breadcrumbs[1]).append('...'); - breadcrumbsWidth += $(breadcrumbs[1]).get(0).offsetWidth; - hiddenBreadcrumbs = 2; - } - var i = hiddenBreadcrumbs; - while (width < breadcrumbsWidth && i > 1 && i < breadcrumbs.length - 1) { - breadcrumbsWidth -= $(breadcrumbs[i]).get(0).offsetWidth; - $(breadcrumbs[i]).hide(); - hiddenBreadcrumbs = i; - i++ - } - } else if (width > lastWidth && hiddenBreadcrumbs > 0) { - var i = hiddenBreadcrumbs; - while (width > breadcrumbsWidth && i > 0) { - if (hiddenBreadcrumbs == 1) { - breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth; - $(breadcrumbs[1]).find('span').remove(); - $(breadcrumbs[1]).find('a').show(); - breadcrumbsWidth += $(breadcrumbs[1]).get(0).offsetWidth; - } else { - $(breadcrumbs[i]).show(); - breadcrumbsWidth += $(breadcrumbs[i]).get(0).offsetWidth; - if (breadcrumbsWidth > width) { - breadcrumbsWidth -= $(breadcrumbs[i]).get(0).offsetWidth; - $(breadcrumbs[i]).hide(); - break; - } - } - i--; - hiddenBreadcrumbs = i; - } - } - lastWidth = width; - } - } + Files.initBreadCrumbs(); $(window).resize(function() { - resizeBreadcrumbs(false); + var width = $(this).width(); + Files.resizeBreadcrumbs(width, false); }); - resizeBreadcrumbs(true); + var width = $(this).width(); + Files.resizeBreadcrumbs(width, true); // event handlers for breadcrumb items $('#controls').delegate('.crumb a', 'click', onClickBreadcrumb); diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php index 85e21380c6d..9ca115f7711 100644 --- a/apps/files/templates/index.php +++ b/apps/files/templates/index.php @@ -38,7 +38,9 @@ - > +
-- cgit v1.2.3 From 3cf0820d3507349fa2d518c24579d8605db7cd2e Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Sun, 1 Sep 2013 14:24:01 +0200 Subject: Changed breadcrumb event handling to not use delegate Using delegate might break apps that embed themselves in the files container. When an app embeds itself and the user clicks a breadcrumb, it will simply reload the whole browser page. --- apps/files/js/files.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'apps/files/js/files.js') diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 1ea2f5fbcc2..7aef8ea1d11 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -131,10 +131,12 @@ Files={ Files.breadcrumbsWidth += $(breadcrumb).get(0).offsetWidth; }); - $.each($('#controls .actions>div'), function(index, action) { Files.breadcrumbsWidth += $(action).get(0).offsetWidth; }); + + // event handlers for breadcrumb items + $('#controls .crumb a').on('click', onClickBreadcrumb); }, resizeBreadcrumbs: function (width, firstRun) { @@ -349,9 +351,6 @@ $(document).ready(function() { var width = $(this).width(); Files.resizeBreadcrumbs(width, true); - // event handlers for breadcrumb items - $('#controls').delegate('.crumb a', 'click', onClickBreadcrumb); - // display storage warnings setTimeout ( "Files.displayStorageWarnings()", 100 ); OC.Notification.setDefault(Files.displayStorageWarnings); -- cgit v1.2.3 From 611075bf206555cf011b5fb70e117c93040e9027 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Sun, 1 Sep 2013 14:36:33 +0200 Subject: Fixed JS error in trashbin app --- apps/files/js/files.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'apps/files/js/files.js') diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 7aef8ea1d11..c2418cfa751 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -182,6 +182,10 @@ Files={ } }; $(document).ready(function() { + // FIXME: workaround for trashbin app + if (window.trashBinApp){ + return; + } Files.displayEncryptionWarning(); Files.bindKeyboardShortcuts(document, jQuery); -- cgit v1.2.3