@oat-sa/tao-core-ui 3.23.0 → 3.24.1

package/dist/resourcemgr/fileBrowser.js

@@ -1,11 +1,11 @@
-define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/handlebars/helpers'], function ($$1, _, request, paginationComponent, Handlebars, Helpers0) { 'use strict';
+define(['jquery', 'lodash', 'ui/pagination', 'handlebars', 'lib/handlebars/helpers', 'core/logger', 'ui/resourcemgr/assetSearchContract'], function ($$1, _, paginationComponent, Handlebars, Helpers0, loggerFactory, assetSearchContract) { 'use strict';
 
 	$$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
 	_ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
-	request = request && Object.prototype.hasOwnProperty.call(request, 'default') ? request['default'] : request;
 	paginationComponent = paginationComponent && Object.prototype.hasOwnProperty.call(paginationComponent, 'default') ? paginationComponent['default'] : paginationComponent;
 	Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
 	Helpers0 = Helpers0 && Object.prototype.hasOwnProperty.call(Helpers0, 'default') ? Helpers0['default'] : Helpers0;
+	loggerFactory = loggerFactory && Object.prototype.hasOwnProperty.call(loggerFactory, 'default') ? loggerFactory['default'] : loggerFactory;
 
 	if (!Helpers0.__initialized) {
 	  Helpers0(Handlebars);
@@ -14,12 +14,15 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
 	  this.compilerInfo = [4,'>= 1.0.0'];
 	helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
-	  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this;
+	  var buffer = "", stack1, self=this, functionType="function", escapeExpression=this.escapeExpression;
 
 	function program1(depth0,data) {
 	  
 	  var buffer = "", stack1, helper;
-	  buffer += "\n	<li class=\"root\">\n		<a\n			class=\"root-folder active\"\n			href=\"#\"\n			data-path=\"";
+	  buffer += "\n	<li class=\"root\">\n		<a\n			class=\"root-folder";
+	  stack1 = helpers.unless.call(depth0, (depth0 && depth0.showToggle), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
+	  if(stack1 || stack1 === 0) { buffer += stack1; }
+	  buffer += "\"\n			href=\"#\"\n			data-path=\"";
 	  if (helper = helpers.path) { stack1 = helper.call(depth0, {hash:{},data:data}); }
 	  else { helper = (depth0 && depth0.path); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
 	  buffer += escapeExpression(stack1)
@@ -31,13 +34,27 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	  if (helper = helpers.childrenLimit) { stack1 = helper.call(depth0, {hash:{},data:data}); }
 	  else { helper = (depth0 && depth0.childrenLimit); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
 	  buffer += escapeExpression(stack1)
-	    + "\"\n			data-level=\"0\"\n			style=\"--tree-level: 0;\">\n			";
+	    + "\"\n			data-level=\"0\"\n			style=\"--tree-level: 0;\">\n			<span class=\"tree-toggle";
+	  stack1 = helpers['if'].call(depth0, (depth0 && depth0.showToggle), {hash:{},inverse:self.noop,fn:self.program(4, program4, data),data:data});
+	  if(stack1 || stack1 === 0) { buffer += stack1; }
+	  buffer += "\" aria-hidden=\"true\"></span>\n			<span class=\"tree-folder icon-folder\" aria-hidden=\"true\"></span>\n			";
 	  if (helper = helpers.label) { stack1 = helper.call(depth0, {hash:{},data:data}); }
 	  else { helper = (depth0 && depth0.label); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
 	  buffer += escapeExpression(stack1)
 	    + "\n		</a>\n		<ul></ul>\n	</li>\n";
 	  return buffer;
 	  }
+	function program2(depth0,data) {
+	  
+	  
+	  return " is-leaf";
+	  }
+
+	function program4(depth0,data) {
+	  
+	  
+	  return " icon-right";
+	  }
 
 	  stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.read), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
 	  if(stack1 || stack1 === 0) { buffer += stack1; }
@@ -81,13 +98,30 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	  if (helper = helpers.level) { stack1 = helper.call(depth0, {hash:{},data:data}); }
 	  else { helper = (depth0 && depth0.level); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
 	  buffer += escapeExpression(stack1)
-	    + ";\"\n			href=\"#\">\n			";
+	    + ";\"\n			href=\"#\"\n			";
+	  stack1 = helpers.unless.call(depth0, (depth0 && depth0.showToggle), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
+	  if(stack1 || stack1 === 0) { buffer += stack1; }
+	  buffer += ">\n			<span class=\"tree-toggle";
+	  stack1 = helpers['if'].call(depth0, (depth0 && depth0.showToggle), {hash:{},inverse:self.noop,fn:self.program(4, program4, data),data:data});
+	  if(stack1 || stack1 === 0) { buffer += stack1; }
+	  buffer += "\" aria-hidden=\"true\"></span>\n			<span class=\"tree-folder icon-folder\" aria-hidden=\"true\"></span>\n			";
 	  if (helper = helpers.label) { stack1 = helper.call(depth0, {hash:{},data:data}); }
 	  else { helper = (depth0 && depth0.label); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
 	  buffer += escapeExpression(stack1)
 	    + "\n		</a>\n	</li>\n";
 	  return buffer;
 	  }
+	function program2(depth0,data) {
+	  
+	  
+	  return "class=\"is-leaf\"";
+	  }
+
+	function program4(depth0,data) {
+	  
+	  
+	  return " icon-right";
+	  }
 
 	  stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.read), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
 	  if(stack1 || stack1 === 0) { buffer += stack1; }
@@ -164,48 +198,171 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	 *
 	 * You should have received a copy of the GNU General Public License
 	 * along with this program; if not, write to the Free Software
-	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+	 * Foundation, Inc., 31 Milk St # 960789 Boston, MA 02196 USA.
 	 *
-	 * Copyright (c) 2018-2020 (original work) Open Assessment Technologies SA;
+	 * Copyright (c) 2018-2026 (original work) Open Assessment Technologies SA;
 	 */
-	const ns = 'resourcemgr';
+	const NS = 'resourcemgr';
+	const LOGGER = loggerFactory(`ui/${NS}`);
+	const DEFAULT_AJAX_TIMEOUT_MS = 30000;
+	const TREE_LOADING_REF_KEY = `${NS}TreeLoadingRefCount`;
+
+	/**
+	 * @param {Object} data
+	 * @returns {Array}
+	 */
+	function folderChildrenOnly(data) {
+	  return _.filter(data && data.children, function (child) {
+	    return child && child.path && !child.uri;
+	  });
+	}
 	function fileBrowser (options) {
+	  if (!options.browseUrl && options.url) {
+	    options.browseUrl = options.url;
+	  }
 	  const root = options.root || 'local';
 	  const rootPath = options.path || '/';
+	  const initialPath = options.initialPath || rootPath;
 	  const $container = options.$target;
 	  const $fileBrowser = $$1('.file-browser .file-browser-wrapper', $container);
 	  const $divContainer = $$1(`.${root}`, $fileBrowser);
 	  const $folderContainer = $$1('.folders', $divContainer);
+	  const $paginationContainer = $$1('.pagination-bottom', $container);
 	  const fileTree = {};
 	  // for pagination
 	  let selectedClass = {
 	    path: rootPath,
-	    childrenLimit: 10,
+	    childrenLimit: 11,
 	    total: 0,
 	    page: 1
 	  };
+	  let searchMode = false;
+	  let sort = Object.assign({}, assetSearchContract.DEFAULT_SORT);
+	  const splitBrowse = options.splitBrowse !== false;
+	  const ajaxTimeoutMs = Number.isFinite(Number(options.ajaxTimeoutMs)) && Number(options.ajaxTimeoutMs) > 0 ? Number(options.ajaxTimeoutMs) : DEFAULT_AJAX_TIMEOUT_MS;
+	  const $treeLoadingOverlay = $$1('.file-browser-tree-loading', $fileBrowser);
+	  const $treeLoadingStatus = $$1('.file-browser-tree-loading-status', $treeLoadingOverlay);
+
+	  /**
+	   * Ref-count in-flight browse requests and toggle the tree loading overlay.
+	   * @param {Boolean} increment - true when a load starts, false when it finishes
+	   */
+	  function setTreeLoading(increment) {
+	    let treeLoadingRefCount = Number($fileBrowser.data(TREE_LOADING_REF_KEY)) || 0;
+	    treeLoadingRefCount += increment ? 1 : -1;
+	    if (treeLoadingRefCount < 0) {
+	      treeLoadingRefCount = 0;
+	    }
+	    $fileBrowser.data(TREE_LOADING_REF_KEY, treeLoadingRefCount);
+	    const loading = treeLoadingRefCount > 0;
+	    $fileBrowser.toggleClass('is-tree-loading', loading);
+	    $fileBrowser.attr('aria-busy', loading ? 'true' : 'false');
+	    $treeLoadingOverlay.toggleClass('hidden', !loading).attr('aria-hidden', loading ? 'false' : 'true');
+	    $treeLoadingStatus.attr('aria-busy', loading ? 'true' : 'false');
+	  }
+
+	  /**
+	   * Show or hide the asset table loading overlay (browse mode only).
+	   * @param {Boolean} loading
+	   */
+	  function setFilesLoading(loading) {
+	    if (searchMode) {
+	      return;
+	    }
+	    $container.trigger(`filesloading.${NS}`, [!!loading]);
+	  }
+	  $container.on(`searchmode.${NS}`, function (e, enabled) {
+	    searchMode = !!enabled;
+	    if (searchMode) {
+	      $container.trigger(`filesloading.${NS}`, [false]);
+	    }
+	  });
+	  $container.on(`sortchange.${NS}`, function (e, nextSort) {
+	    sort = Object.assign({}, assetSearchContract.DEFAULT_SORT, nextSort || {});
+	    selectedClass.page = 1;
+	    invalidateFolderFiles(selectedClass.path);
+	    if (searchMode || !isActiveBrowser()) {
+	      return;
+	    }
+	    reloadSortedFolder();
+	  });
+	  $container.on(`searchclear.${NS}`, function (e, path) {
+	    const targetPath = path || selectedClass.path;
+	    selectedClass.page = 1;
+	    invalidateFolderFiles(targetPath);
+	    if (!isActiveBrowser()) {
+	      return;
+	    }
+	    const subTree = getByExactPath(fileTree, targetPath) || getByPath(fileTree, targetPath) || fileTree;
+	    if (!searchMode) {
+	      setFilesLoading(true);
+	    }
+	    getFolderContent(subTree, targetPath, function (content) {
+	      if (content) {
+	        selectFolder(content, targetPath);
+	      } else {
+	        setFilesLoading(false);
+	      }
+	    });
+	  });
+
+	  // Reopen with resolved parent (AC3 edit/change): leave search, open folder again.
+	  $container.on(`applycontext.${NS}`, function (e, ctx) {
+	    const path = ctx && ctx.path || rootPath;
+	    const pathIsTaomedia = path && String(path).indexOf('taomedia://') === 0;
+	    if (pathIsTaomedia && root === 'local') {
+	      return;
+	    }
+	    if (!pathIsTaomedia && root !== 'local') {
+	      return;
+	    }
+	    $container.data('activeFileBrowserRoot', root);
+	    if (searchMode) {
+	      $container.trigger(`requestexitsearch.${NS}`);
+	    }
+	    selectedClass.page = 1;
+	    openInitialPath(path);
+	  });
 
 	  //load the content of the ROOT
+	  const showInitialListLoading = !searchMode && root === 'local';
+	  if (showInitialListLoading) {
+	    setFilesLoading(true);
+	  }
 	  getFolderContent(fileTree, rootPath, function (content) {
+	    if (!content) {
+	      if (showInitialListLoading) {
+	        setFilesLoading(false);
+	      }
+	      return;
+	    }
 	    indexTree(content);
 
 	    //create the tree node for the ROOT folder by default once the initial content loaded
-	    $folderContainer.append(rootFolderTpl(content));
+	    $folderContainer.append(rootFolderTpl(Object.assign({}, content, {
+	      showToggle: hasNestedFolderChildren(content) !== false
+	    })));
 	    const $rootNode = $$1('.root-folder', $folderContainer);
 	    //create an inner list and append found elements
 	    const $innerList = $$1('.root ul', $folderContainer);
-	    if (content.children) {
+	    if (hasNestedFolderChildren(content)) {
 	      $rootNode.addClass('opened');
+	    } else if (hasNestedFolderChildren(content) === false) {
+	      setFolderToggleState($rootNode, false);
 	    }
 	    updateFolders(content, $innerList);
-	    if (content.permissions.read && !options.hasAlreadySelected) {
-	      $$1('.file-browser').find('li.active').removeClass('active');
-	      updateSelectedClass(content.path, content.total, content.childrenLimit);
-	      $container.trigger('folderselect.'.concat(ns), [content.label, getPage(content.children), content.path, content]);
-	      renderPagination();
+	    if (content.permissions && content.permissions.read && !options.hasAlreadySelected) {
+	      if (initialPath && initialPath !== rootPath) {
+	        openInitialPath(initialPath);
+	      } else {
+	        selectFolder(content, content.path);
+	        syncTreeActiveFolder(content.path || rootPath);
+	      }
 	      if (root !== 'local') {
 	        options.hasAlreadySelected = true;
 	      }
+	    } else if (showInitialListLoading) {
+	      setFilesLoading(false);
 	    }
 	  });
 
@@ -213,9 +370,16 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	  $divContainer.off('click', '.folders a').on('click', '.folders a', function (e) {
 	    e.preventDefault();
 	    const $selected = $$1(this);
-	    const $folders = $$1('.folders li', $fileBrowser);
 	    const fullPath = $selected.data('path');
-	    const subTree = getByPath(fileTree, fullPath);
+	    const subTree = getByExactPath(fileTree, fullPath);
+	    const openingFolder = !searchMode && fullPath !== selectedClass.path;
+	    if (openingFolder) {
+	      selectedClass.page = 1;
+	    }
+	    if (!searchMode) {
+	      setFilesLoading(true);
+	    }
+	    invalidateFolderFiles(fullPath);
 
 	    //get the folder content
 	    getFolderContent(subTree, fullPath, function (content) {
@@ -223,10 +387,12 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	      if (content) {
 	        //either create the inner list of the content is new or just show it
 	        let $innerList = $selected.siblings('ul');
-	        if (!$innerList.length && content.children && _.find(content.children, 'path') && !content.empty) {
+	        const nested = hasNestedFolderChildren(content);
+	        if (!$innerList.length && nested) {
 	          $innerList = $$1('<ul></ul>').insertAfter($selected);
 	          updateFolders(content, $innerList);
 	          $selected.addClass('opened');
+	          setFolderToggleState($selected, true);
 	        } else if ($innerList.length) {
 	          if ($innerList.css('display') === 'none') {
 	            $innerList.show();
@@ -235,106 +401,460 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	            $innerList.hide();
 	            $selected.removeClass('opened');
 	          }
+	        } else if (nested === false) {
+	          // Leaf folder: keep alignment spacer, hide expand chevron.
+	          setFolderToggleState($selected, false);
 	        }
-
-	        //toggle active element
-	        $folders.removeClass('active');
-	        $selected.parent('li').addClass('active');
+	        syncTreeActiveFolder(fullPath, $selected);
 
 	        //internal event to set the file-selector content
-	        updateSelectedClass(fullPath, content.total, content.childrenLimit);
-	        $container.trigger(`folderselect.${ns}`, [content.label, getPage(content.children), content.path, content]);
-	        renderPagination();
+	        selectFolder(content, fullPath);
+	      } else if (!searchMode) {
+	        setFilesLoading(false);
 	      }
 	    });
 	  });
-	  $container.on(`filenew.${ns}`, function (e, file, path) {
-	    const subTree = getByPath(fileTree, path);
-	    if (subTree) {
-	      if (!subTree.children) {
-	        subTree.children = [];
-	      }
-	      if (root !== 'local' || !_.find(subTree.children, {
-	        name: file.name
-	      })) {
-	        updatePermissions(file);
-	        const childrenFilesOnly = _.filter(subTree.children, function (child) {
-	          // Only file object has link property
-	          return Object.prototype.hasOwnProperty.call(child, 'link');
-	        });
-	        if (childrenFilesOnly.length === subTree.total) {
-	          // all children loaded new file can be pushed to the end of tree
-	          // if not all, new file will be loaded with next page
-	          subTree.children.push(file);
-	        }
-	        subTree.total = Number.isFinite(Number(subTree.total)) ? Number(subTree.total) + 1 : 1;
-	        if (selectedClass.path === path) {
-	          selectedClass.total = subTree.total;
-	        }
-	        $container.trigger(`folderselect.${ns}`, [subTree.label, getPage(subTree.children), path, subTree]);
-	        renderPagination();
-	      }
+	  $container.on(`filenew.${NS}`, function (e, file, path) {
+	    const targetPath = path || selectedClass.path;
+	    if (!targetPath || searchMode) {
+	      return;
 	    }
+	    const activeRoot = $container.data('activeFileBrowserRoot');
+	    if (activeRoot && activeRoot !== root) {
+	      return;
+	    }
+	    const subTree = getByExactPath(fileTree, targetPath) || getByPath(fileTree, targetPath);
+	    if (subTree && root === 'local' && file && file.name && _.find(subTree.children, {
+	      name: file.name
+	    })) {
+	      return;
+	    }
+	    if (targetPath !== selectedClass.path) {
+	      selectedClass.path = targetPath;
+	    }
+	    selectedClass.page = 1;
+	    invalidateFolderFiles(targetPath);
+	    const pendingUpload = file && !file.error && (file.uri || file.name) ? file : null;
+	    reloadSortedFolder(pendingUpload ? [pendingUpload] : []);
 	  });
-	  $container.on(`filedelete.${ns}`, function (e, path) {
-	    if (removeFromPath(fileTree, path)) {
-	      selectedClass.total--;
-	      loadPage();
+	  $container.on(`filedelete.${NS}`, function (e, path) {
+	    if (searchMode) {
+	      return;
+	    }
+	    const activeRoot = $container.data('activeFileBrowserRoot');
+	    if (activeRoot && activeRoot !== root) {
+	      return;
+	    }
+	    if (path) {
+	      removeFromPath(fileTree, path);
 	    }
+	    invalidateFolderFiles(selectedClass.path);
+	    reloadSortedFolder();
 	  });
+
+	  /**
+	   * Open and select an initial folder path after the root tree is available.
+	   * @param {String} path
+	   */
+	  function findFolderLink(path) {
+	    return $folderContainer.find('a').filter(function () {
+	      return $$1(this).data('path') === path;
+	    });
+	  }
+
+	  /**
+	   * Render directory children under an expanded folder anchor (replace / reopen).
+	   * @param {String} parentPath
+	   * @param {Object} parentContent
+	   */
+	  function mountFolderBranch(parentPath, parentContent) {
+	    const $parentLink = findFolderLink(parentPath);
+	    if (!$parentLink.length || !parentContent) {
+	      return;
+	    }
+	    let $innerList = $parentLink.siblings('ul');
+	    if (!$innerList.length) {
+	      $innerList = $$1('<ul></ul>').insertAfter($parentLink);
+	    }
+	    updateFolders(parentContent, $innerList);
+	    $parentLink.addClass('opened');
+	    if ($innerList.css('display') === 'none') {
+	      $innerList.show();
+	    }
+	    setFolderToggleState($parentLink, hasNestedFolderChildren(parentContent) !== false);
+	  }
+	  function markFolderActive(path) {
+	    const $targetLink = findFolderLink(path);
+	    if ($targetLink.length) {
+	      $targetLink.parents('li').each(function () {
+	        const $li = $$1(this);
+	        const $anchor = $li.children('a');
+	        const $list = $li.children('ul');
+	        $anchor.addClass('opened');
+	        if ($list.length) {
+	          $list.show();
+	        }
+	      });
+	      syncTreeActiveFolder(path, $targetLink);
+	    } else if (path === rootPath) {
+	      syncTreeActiveFolder(rootPath);
+	    }
+	  }
+	  function openInitialPath(path) {
+	    getFolderContent(fileTree, path, function (content) {
+	      indexTree(fileTree);
+	      if (!content) {
+	        const rootContent = getByPath(fileTree, rootPath) || fileTree;
+	        const fallbackPath = rootContent.path || rootPath;
+	        selectFolder(rootContent, fallbackPath);
+	        syncTreeActiveFolder(fallbackPath);
+	        return;
+	      }
+	      function finishOpen() {
+	        markFolderActive(path);
+	        selectFolder(content, path);
+	      }
+	      if (findFolderLink(path).length) {
+	        finishOpen();
+	        return;
+	      }
+	      const parentFolderPath = content.parentFolderPath;
+	      if (parentFolderPath && parentFolderPath !== path) {
+	        getFolderContent(fileTree, parentFolderPath, function (parentContent) {
+	          mountFolderBranch(parentFolderPath, parentContent);
+	          finishOpen();
+	        });
+	        return;
+	      }
+	      finishOpen();
+	    });
+	  }
+
+	  /**
+	   * Mark the folder row that matches path as active (open folder icon for leaves).
+	   * @param {String} path
+	   * @param {jQuery} [$link]
+	   */
+	  function syncTreeActiveFolder(path, $link) {
+	    $$1('.folders li', $fileBrowser).removeClass('active');
+	    const $target = $link && $link.length ? $link : $folderContainer.find('a').filter(function () {
+	      return $$1(this).data('path') === path;
+	    });
+	    if ($target.length) {
+	      $target.parent('li').addClass('active');
+	    }
+	  }
+
+	  /**
+	   * Whether this media source currently owns the file table.
+	   * @returns {Boolean}
+	   */
+	  function isActiveBrowser() {
+	    return $container.data('activeFileBrowserRoot') === root;
+	  }
+
+	  /**
+	   * Select a folder and publish its page of files to the selector.
+	   * @param {Object} content
+	   * @param {String} path
+	   */
+	  function selectFolder(content, path) {
+	    if (!content) {
+	      return;
+	    }
+	    $container.data('activeFileBrowserRoot', root);
+	    if (searchMode) {
+	      $container.trigger(`folderpath.${NS}`, [path, content.label]);
+	      $container.trigger(`folderselect.${NS}`, [content.label, getFilesForDisplay(content), path, content]);
+	      return;
+	    }
+	    updateSelectedClass(path, content.total, content.childrenLimit);
+	    $container.trigger(`folderpath.${NS}`, [path, content.label]);
+	    $container.trigger(`folderselect.${NS}`, [content.label, getFilesForDisplay(content), path, content]);
+	    renderPagination();
+	    if (!searchMode) {
+	      setFilesLoading(false);
+	    }
+	  }
+
 	  /**
 	   * Get files for page
 	   * @param {Array} children
 	   * @returns {Array} files for this page
 	   */
 	  function getPage(children) {
-	    const files = _.filter(children, function (item) {
+	    const files = assetSearchContract.sortAssetItems(_.filter(children, function (item) {
 	      return !!item.uri;
-	    });
+	    }), sort);
 	    if (selectedClass.childrenLimit) {
 	      return files.slice((selectedClass.page - 1) * selectedClass.childrenLimit, selectedClass.page * selectedClass.childrenLimit);
 	    }
 	    return files;
 	  }
+
+	  /**
+	   * Files for the table (split list payload or legacy children slice).
+	   * @param {Object} content
+	   * @returns {Array}
+	   */
+	  function getFilesForDisplay(content) {
+	    if (!content) {
+	      return [];
+	    }
+	    if (splitBrowse) {
+	      return content.listItems || [];
+	    }
+	    return getPage(content.children || []);
+	  }
+	  function listCacheKey() {
+	    return `${sort.field}:${sort.direction}:${selectedClass.page}`;
+	  }
+
+	  /**
+	   * Snapshot list request identity (folder + page/sort) when a browse starts.
+	   * @returns {{path: String, cacheKey: String}}
+	   */
+	  function captureListRequestContext() {
+	    return {
+	      path: selectedClass.path,
+	      cacheKey: listCacheKey()
+	    };
+	  }
+
+	  /**
+	   * Whether navigation changed before an in-flight list response should apply.
+	   * @param {{path: String, cacheKey: String}} captured
+	   * @returns {Boolean}
+	   */
+	  function isListRequestStale(captured) {
+	    return !captured || captured.path !== selectedClass.path || captured.cacheKey !== listCacheKey();
+	  }
+
+	  /**
+	   * @param {Object} response
+	   * @returns {Object}
+	   */
+	  function unwrapBrowseResponse(response) {
+	    if (response && response.success === false) {
+	      return Promise.reject(response);
+	    }
+	    let data = response && response.data ? response.data : response;
+	    data = updatePermissions(data);
+	    if (data.children && data.children.length > 0) {
+	      data.children = data.children.map(function (child) {
+	        return updatePermissions(child);
+	      });
+	    }
+	    if (data.items && data.items.length > 0) {
+	      data.items = data.items.map(function (item) {
+	        return updatePermissions(item);
+	      });
+	    }
+	    return data;
+	  }
+
+	  /**
+	   * @param {String} path
+	   * @param {Object} extraData
+	   * @returns {Promise}
+	   */
+	  function browseRequest(path, extraData) {
+	    const parameters = {};
+	    parameters[options.pathParam || 'path'] = path;
+	    return Promise.resolve($$1.ajax({
+	      url: options.browseUrl,
+	      method: 'GET',
+	      dataType: 'json',
+	      timeout: ajaxTimeoutMs,
+	      data: _.merge(parameters, options.params, extraData)
+	    })).then(unwrapBrowseResponse);
+	  }
+
+	  /**
+	   * @param {Object} tree
+	   * @param {String} path
+	   * @param {Object} data
+	   */
+	  function applyTreePayload(tree, path, data) {
+	    const folderData = Object.assign({}, data, {
+	      children: folderChildrenOnly(data)
+	    });
+	    if (!tree.path) {
+	      _.merge(tree, folderData);
+	    } else if (folderData.children) {
+	      setToPath(tree, path, folderData);
+	      if (!_.find(folderData.children, 'path')) {
+	        markFolderEmptyAtPath(tree, path);
+	      }
+	    } else {
+	      setToPath(tree, path, folderData);
+	      markFolderEmptyAtPath(tree, path);
+	    }
+	  }
+
+	  /**
+	   * @param {Object} tree
+	   * @param {String} path
+	   * @param {Object} listData
+	   * @param {String} cacheKey
+	   */
+	  function applyListPayload(tree, path, listData, cacheKey) {
+	    const node = getByExactPath(tree, path) || getByPath(tree, path);
+	    if (!node || !listData) {
+	      return;
+	    }
+	    node.listItems = listData.items || [];
+	    node.total = listData.total;
+	    node.childrenLimit = listData.pageSize || listData.childrenLimit || selectedClass.childrenLimit;
+	    node.listPage = listData.page;
+	    node.totalIsApproximate = listData.totalIsApproximate;
+	    node.listCacheKey = cacheKey;
+	  }
+
+	  /**
+	   * Ensure upload responses appear in the table before Elasticsearch catches up.
+	   * @param {String} path
+	   * @param {Array<Object>} uploads
+	   */
+	  function mergePendingUploads(path, uploads) {
+	    if (!uploads || !uploads.length) {
+	      return;
+	    }
+	    const node = getByExactPath(fileTree, path) || getByPath(fileTree, path);
+	    if (!node) {
+	      return;
+	    }
+	    if (!Array.isArray(node.listItems)) {
+	      node.listItems = [];
+	    }
+	    let added = 0;
+	    uploads.forEach(function (uploaded) {
+	      if (!uploaded || uploaded.error) {
+	        return;
+	      }
+	      const normalized = updatePermissions(uploaded);
+	      if (!normalized.uri && !normalized.name) {
+	        return;
+	      }
+	      const exists = _.some(node.listItems, function (item) {
+	        return normalized.uri && item.uri === normalized.uri || normalized.name && item.name === normalized.name;
+	      });
+	      if (exists) {
+	        return;
+	      }
+	      node.listItems.push(normalized);
+	      added++;
+	    });
+	    if (!added) {
+	      return;
+	    }
+	    if (splitBrowse) {
+	      node.listItems = assetSearchContract.sortAssetItems(node.listItems, sort);
+	    }
+	    const total = Number(node.total);
+	    if (Number.isFinite(total) && total >= 0) {
+	      node.total = total + added;
+	    }
+	  }
+
 	  /**
 	   * Get the content of a folder, either in the model or load it
 	   * @param {Object} tree - the tree model
 	   * @param {String} path - the folder path (relative to the root)
 	   * @param {Function} cb - called back with the content in 1st parameter
 	   */
+	  function markFolderEmptyAtPath(tree, path) {
+	    const node = getByExactPath(tree, path);
+	    if (node) {
+	      node.empty = true;
+	    }
+	  }
 	  function getFolderContent(tree, path, cb) {
+	    if (splitBrowse) {
+	      const existing = getByExactPath(tree, path) || getByPath(tree, path);
+	      const needTree = !existing || !existing.children && !existing.empty;
+	      const cacheKey = listCacheKey();
+	      const needList = !existing || existing.listCacheKey !== cacheKey;
+	      const treePromise = needTree ? (setTreeLoading(true), browseRequest(path, {
+	        part: 'tree',
+	        depth: 1,
+	        sortBy: sort.field,
+	        sortDir: sort.direction
+	      }).then(function (data) {
+	        setTreeLoading(false);
+	        return data;
+	      }, function (error) {
+	        setTreeLoading(false);
+	        return Promise.reject(error);
+	      })) : Promise.resolve(null);
+	      const listPromise = needList ? browseRequest(path, {
+	        part: 'list',
+	        page: selectedClass.page,
+	        pageSize: selectedClass.childrenLimit || 11,
+	        sortBy: sort.field,
+	        sortDir: sort.direction
+	      }) : Promise.resolve(null);
+	      Promise.all([treePromise, listPromise]).then(function (_ref) {
+	        let [treeData, listData] = _ref;
+	        if (treeData) {
+	          applyTreePayload(tree, path, treeData);
+	        }
+	        if (listData) {
+	          applyListPayload(tree, path, listData, cacheKey);
+	        }
+	        cb(getByExactPath(tree, path) || getByPath(tree, path));
+	      }).catch(function () {
+	        cb(null);
+	      });
+	      return;
+	    }
 	    let content = getByPath(tree, path);
 	    if (!content || !content.children && !content.empty) {
 	      loadContent(path).then(function (data) {
 	        if (!tree.path) {
 	          tree = _.merge(tree, data);
 	        } else if (data.children) {
+	          setToPath(tree, path, data);
 	          if (!_.find(data.children, 'path')) {
 	            // no subfolders inside folder
-	            tree.empty = true;
+	            markFolderEmptyAtPath(tree, path);
 	          }
-	          setToPath(tree, path, data);
 	        } else {
-	          tree.empty = true;
+	          setToPath(tree, path, data);
+	          markFolderEmptyAtPath(tree, path);
 	        }
 	        cb(data);
+	      }).catch(function () {
+	        cb(null);
 	      });
 	    } else if (content.children) {
 	      const files = _.filter(content.children, function (item) {
 	        return !!item.uri;
 	      });
-	      // if files less then total and need toload this page
-	      if (files.length < selectedClass.total && files.length < selectedClass.page * selectedClass.childrenLimit) {
+	      // Use folder total (not selectedClass): openInitialPath runs before selectFolder.
+	      const expectedTotal = Number(content.total);
+	      const pageSize = Number(content.childrenLimit) || selectedClass.childrenLimit || 11;
+	      const page = selectedClass.page || 1;
+	      // Missing/NaN total → unknown size; refetch so invalidated cache is not treated as complete.
+	      if (!Number.isFinite(expectedTotal) || files.length < expectedTotal && files.length < page * pageSize) {
 	        loadContent(path).then(function (data) {
 	          const loadedFiles = _.filter(data.children, function (item) {
 	            return !!item.uri;
 	          });
+	          const node = getByExactPath(tree, path);
+	          if (node && !Number.isFinite(expectedTotal)) {
+	            node.children = _.filter(node.children, function (item) {
+	              return !item.uri;
+	            });
+	          }
 	          setToPath(tree, path, {
 	            children: loadedFiles,
 	            total: data.total,
 	            childrenLimit: data.childrenLimit
 	          });
-	          content = getByPath(tree, path);
+	          content = getByExactPath(tree, path) || getByPath(tree, path);
+	          cb(content);
+	        }).catch(function () {
 	          cb(content);
 	        });
 	      } else {
@@ -384,6 +904,29 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	    return match;
 	  }
 
+	  /**
+	   * Get a subtree by exact path equality.
+	   * @param {Object} tree
+	   * @param {String} path
+	   * @returns {Object|undefined}
+	   */
+	  function getByExactPath(tree, path) {
+	    let match;
+	    if (tree) {
+	      if (tree.path === path) {
+	        match = tree;
+	      } else if (tree.children) {
+	        _.forEach(tree.children, function (child) {
+	          match = getByExactPath(child, path);
+	          if (match) {
+	            return false;
+	          }
+	        });
+	      }
+	    }
+	    return match;
+	  }
+
 	  /**
 	   * Merge data into at into the subtree
 	   * @param {Object} tree - the tree model
@@ -427,8 +970,11 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	        return child.path === path || child.name && tree.path + child.name === path || child.uri === path;
 	      });
 	      done = removed.length > 0;
-	      tree.total--;
-	      if (!done) {
+	      if (done) {
+	        if (Number.isFinite(Number(tree.total))) {
+	          tree.total = Math.max(0, Number(tree.total) - removed.length);
+	        }
+	      } else {
 	        _.forEach(tree.children, function (child) {
 	          done = removeFromPath(child, path);
 	          if (done) {
@@ -440,31 +986,136 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	    return done;
 	  }
 
+	  /**
+	   * Drop cached file rows for a folder so the next load hits the service
+	   * with the current sort. Nested folder nodes are kept.
+	   * @param {String} path
+	   */
+	  function invalidateFolderFiles(path) {
+	    const content = getByExactPath(fileTree, path);
+	    if (!content) {
+	      return;
+	    }
+	    if (splitBrowse) {
+	      delete content.listItems;
+	      delete content.listCacheKey;
+	      delete content.listPage;
+	      return;
+	    }
+	    if (Array.isArray(content.children)) {
+	      content.children = content.children.filter(function (child) {
+	        return child.path && !child.uri;
+	      });
+	    }
+	  }
+
+	  /**
+	   * Replace a folder node with a freshly loaded payload (files + folders).
+	   * @param {String} path
+	   * @param {Object} data
+	   */
+	  function replaceFolderContent(path, data, cacheKey) {
+	    const content = getByExactPath(fileTree, path);
+	    if (!content || !data) {
+	      return;
+	    }
+	    if (splitBrowse && Object.prototype.hasOwnProperty.call(data, 'items')) {
+	      applyListPayload(fileTree, path, data, cacheKey || listCacheKey());
+	      return;
+	    }
+	    if (Object.prototype.hasOwnProperty.call(data, 'children')) {
+	      content.children = data.children;
+	    } else {
+	      content.children = [];
+	      content.empty = true;
+	      content.total = 0;
+	    }
+	    if (Object.prototype.hasOwnProperty.call(data, 'total')) {
+	      content.total = data.total;
+	    }
+	    if (Object.prototype.hasOwnProperty.call(data, 'childrenLimit')) {
+	      content.childrenLimit = data.childrenLimit;
+	    }
+	    if (data.label) {
+	      content.label = data.label;
+	    }
+	    if (data.path) {
+	      content.path = data.path;
+	    }
+	  }
+
 	  /**
 	   * Get the content of a folder
 	   * @param {String} path - the folder path
-	   * @returns {jQuery.Deferred} the defferred object to run done/complete/fail
+	   * @returns {Promise} resolves with folder content
 	   */
 	  function loadContent(path) {
 	    const parameters = {};
-	    parameters[options.pathParam] = path;
-	    return request({
+	    parameters[options.pathParam || 'path'] = path;
+	    setTreeLoading(true);
+	    return Promise.resolve($$1.ajax({
 	      url: options.browseUrl,
 	      method: 'GET',
 	      dataType: 'json',
+	      timeout: ajaxTimeoutMs,
 	      data: _.merge(parameters, options.params, {
-	        childrenOffset: (selectedClass.page - 1) * selectedClass.childrenLimit
-	      }),
-	      noToken: true
-	    }).then(response => response.data).then(response => {
-	      response = updatePermissions(response);
-	      if (response.children && response.children.length > 0) {
-	        response.children.map(responseChildren => updatePermissions(responseChildren));
-	      }
-	      return response;
+	        // depth=2 so each rendered child folder includes its own dir children,
+	        // allowing leaf folders to hide the expand chevron without an extra click.
+	        depth: 2,
+	        childrenOffset: (selectedClass.page - 1) * selectedClass.childrenLimit,
+	        sortBy: sort.field,
+	        sortDir: sort.direction
+	      })
+	    })).then(function (response) {
+	      if (response && response.success === false) {
+	        return Promise.reject(response);
+	      }
+	      let data = response && response.data ? response.data : response;
+	      data = updatePermissions(data);
+	      if (data.children && data.children.length > 0) {
+	        data.children.map(responseChildren => updatePermissions(responseChildren));
+	      }
+	      return data;
+	    }).then(function (data) {
+	      setTreeLoading(false);
+	      return data;
+	    }, function (error) {
+	      setTreeLoading(false);
+	      return Promise.reject(error);
 	    });
 	  }
 
+	  /**
+	   * Whether a folder node has nested directory children.
+	   * @param {Object} node
+	   * @returns {boolean|null} true/false when known; null when children were not loaded yet
+	   */
+	  function hasNestedFolderChildren(node) {
+	    if (!node || node.empty === true) {
+	      return false;
+	    }
+	    if (!Array.isArray(node.children)) {
+	      return null;
+	    }
+	    return Boolean(_.find(node.children, 'path'));
+	  }
+
+	  /**
+	   * Show or hide the expand chevron on a folder anchor (keep spacer width).
+	   * @param {jQuery} $anchor
+	   * @param {boolean} hasNested
+	   */
+	  function setFolderToggleState($anchor, hasNested) {
+	    const $toggle = $anchor.children('.tree-toggle');
+	    if (hasNested) {
+	      $toggle.addClass('icon-right').removeClass('is-leaf');
+	      $anchor.removeClass('is-leaf');
+	    } else {
+	      $toggle.removeClass('icon-right').addClass('is-leaf');
+	      $anchor.removeClass('opened').addClass('is-leaf');
+	    }
+	  }
+
 	  /**
 	   * Update the HTML Tree
 	   * @param {Object} data - the tree data
@@ -476,7 +1127,10 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	      if (typeof data.relPath === 'undefined') {
 	        data.relPath = data.path;
 	      }
+	      // Unknown nested state (lazy depth) keeps the chevron until the folder is opened.
+	      data.showToggle = hasNestedFolderChildren(data) !== false;
 	      $parent.append(folderTpl(data));
+	      return;
 	    }
 	    if (data && data.children && _.isArray(data.children) && !data.empty) {
 	      _.forEach(data.children, function (child) {
@@ -497,7 +1151,7 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	    selectedClass = {
 	      path,
 	      total: Number.isFinite(normalizedTotal) && normalizedTotal >= 0 ? normalizedTotal : 0,
-	      childrenLimit: Number.isFinite(normalizedChildrenLimit) && normalizedChildrenLimit > 0 ? normalizedChildrenLimit : selectedClass.childrenLimit || 10,
+	      childrenLimit: Number.isFinite(normalizedChildrenLimit) && normalizedChildrenLimit > 0 ? normalizedChildrenLimit : selectedClass.childrenLimit || 11,
 	      page: 1
 	    };
 	  }
@@ -505,7 +1159,11 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	   * Render pagination
 	   */
 	  function renderPagination() {
-	    const $paginationContainer = $$1('.pagination-bottom', $container);
+	    if (searchMode) {
+	      // Drop browse pagination controls/handlers when search owns the table.
+	      $paginationContainer.empty();
+	      return;
+	    }
 	    const total = Number(selectedClass.total);
 	    const childrenLimit = Number(selectedClass.childrenLimit);
 	    $paginationContainer.empty();
@@ -527,18 +1185,92 @@ define(['jquery', 'lodash', 'core/request', 'ui/pagination', 'handlebars', 'lib/
 	      }).render($paginationContainer);
 	    }
 	  }
+	  /**
+	   * Re-fetch the current folder with the active sort and publish files.
+	   */
+	  function reloadSortedFolder(pendingUploads) {
+	    const listRequest = captureListRequestContext();
+	    const path = listRequest.path;
+	    if (!searchMode && isActiveBrowser()) {
+	      setFilesLoading(true);
+	    }
+	    const loadPromise = splitBrowse ? browseRequest(path, {
+	      part: 'list',
+	      page: selectedClass.page,
+	      pageSize: selectedClass.childrenLimit || 11,
+	      sortBy: sort.field,
+	      sortDir: sort.direction
+	    }) : loadContent(path);
+	    loadPromise.then(function (data) {
+	      if (!data) {
+	        setFilesLoading(false);
+	        return;
+	      }
+	      if (isListRequestStale(listRequest)) {
+	        setFilesLoading(false);
+	        return;
+	      }
+	      replaceFolderContent(path, data, listRequest.cacheKey);
+	      mergePendingUploads(path, pendingUploads);
+	      const content = getByExactPath(fileTree, path) || data;
+	      selectFolder(content, content.path || path);
+	    }).catch(function (error) {
+	      LOGGER.error(error);
+	      setFilesLoading(false);
+	    });
+	  }
+
 	  /**
 	   * Load page
 	   */
 	  function loadPage() {
-	    const subTree = getByPath(fileTree, selectedClass.path);
+	    const listRequest = captureListRequestContext();
+	    if (!searchMode && isActiveBrowser()) {
+	      setFilesLoading(true);
+	    }
+	    if (splitBrowse) {
+	      const path = listRequest.path;
+	      browseRequest(path, {
+	        part: 'list',
+	        page: selectedClass.page,
+	        pageSize: selectedClass.childrenLimit || 11,
+	        sortBy: sort.field,
+	        sortDir: sort.direction
+	      }).then(function (data) {
+	        if (isListRequestStale(listRequest)) {
+	          setFilesLoading(false);
+	          return;
+	        }
+	        applyListPayload(fileTree, path, data, listRequest.cacheKey);
+	        const content = getByExactPath(fileTree, path);
+	        if (content) {
+	          $container.trigger(`folderselect.${NS}`, [content.label, getFilesForDisplay(content), content.path, content]);
+	          renderPagination();
+	        }
+	        setFilesLoading(false);
+	      }).catch(function (error) {
+	        LOGGER.error(error);
+	        setFilesLoading(false);
+	      });
+	      return;
+	    }
+	    const subTree = getByPath(fileTree, selectedClass.path) || fileTree;
 
 	    //get the folder content
 	    getFolderContent(subTree, selectedClass.path, function (content) {
+	      if (isListRequestStale(listRequest)) {
+	        if (!searchMode) {
+	          setFilesLoading(false);
+	        }
+	        return;
+	      }
 	      indexTree(fileTree);
 	      if (content) {
 	        //internal event to set the file-selector content
-	        $container.trigger(`folderselect.${ns}`, [content.label, getPage(content.children), content.path]);
+	        $container.trigger(`folderselect.${NS}`, [content.label, getFilesForDisplay(content), content.path, content]);
+	      }
+	      if (!searchMode) {
+	        setFilesLoading(false);
 	      }
 	    });
 	  }