fixing breadcrumbs on ajax loading of files

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 21f713b4a80eb4564f4bf9a2cd8dcd73d0e2afc2..b3955b3d22e0ed14c8e470ef9f7cc4c24d0ee6d1 100644 (file)
--- 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 ce72c7bcb5a3536df34ec2a046a934f5c8562ca7..1ea2f5fbcc276681aba39fee433ca4f7eda48855 100644 (file)
--- 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('<span>...</span>');
+                                       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('<span>...</span>');
-                                       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 85e21380c6d828cf8fa02d2f0b24d46297c99fbf..9ca115f771101c6140481abca00042f3fef08197 100644 (file)
--- a/apps/files/templates/index.php
+++ b/apps/files/templates/index.php
@@ -38,7 +38,9 @@
                                </form>
                        </div>
                        <?php if ($_['trash'] ): ?>
-                       <input id="trash" type="button" value="<?php p($l->t('Deleted files'));?>" class="button" <?php $_['trashEmpty'] ? p('disabled') : '' ?>></input>
+                               <div id="trash" class="button" <?php $_['trashEmpty'] ? p('disabled') : '' ?>>
+                                       <a><?php p($l->t('Deleted files'));?></a>
+                               </div>
                        <?php endif; ?>
                        <div id="uploadprogresswrapper">
                                <div id="uploadprogressbar"></div>