Add ability to sort entries with directories first by adding `data-sort-directories-first` attribute to an element on the page. This fixes #55.

src/lib/DAV.js

@@ -7,6 +7,7 @@ export default class DAV extends EventObject {
   #bypassCheck;
   #cache;
   #http;
+  #sortDirectoriesFirst;
 
   #validDestination = (destination) => {
     const hostname = `${location.protocol}//${location.hostname}${location.port ? `:${location.port}` : ''}`,
@@ -46,11 +47,13 @@ export default class DAV extends EventObject {
   };
 
   constructor({
-    bypassCheck
+    bypassCheck,
+    sortDirectoriesFirst,
   }, cache = new Map(), http = new HTTP()) {
     super();
 
     this.#bypassCheck = bypassCheck;
+    this.#sortDirectoriesFirst = sortDirectoriesFirst;
     this.#cache = cache;
     this.#http  = http;
 
@@ -113,7 +116,9 @@ export default class DAV extends EventObject {
 
     const data = await this.#http.PROPFIND(uri),
       response = new Response(await data.text()),
-      collection = response.collection()
+      collection = response.collection({
+        sortDirectoriesFirst: this.#sortDirectoriesFirst
+      })
     ;
 
     this.#cache.set(uri, collection);

src/lib/DAV/Collection.js

@@ -5,13 +5,23 @@ import joinPath from '../joinPath.js';
 export default class Collection extends EventObject {
     #path;
     #entries;
+    #sortDirectoriesFirst;
 
     // don't need to handle equal paths as that's invalid
-    #sort = () => this.#entries.sort((a, b) => a.fullPath < b.fullPath ? -1 : 1);
-
-    constructor(items) {
+    #sort = () => this.#entries.sort((a, b) => this.#sortDirectoriesFirst &&
+      this.#sortDirectories(a, b) ||
+      this.#sortAlphabetically(a, b)
+    );
+    #sortAlphabetically = (a, b) => a.fullPath < b.fullPath ? -1 : 1;
+    #sortDirectories = (a, b) => b.directory - a.directory;
+
+    constructor(items, {
+      sortDirectoriesFirst =  false
+    } = {}) {
       super();
 
+      this.#sortDirectoriesFirst = sortDirectoriesFirst;
+
       this.#entries = items
         .map((item) => new Entry({
           ...item,

src/lib/DAV/Response.js

@@ -18,12 +18,17 @@ export default class Response {
     this.#document = parser.parseFromString(rawDocument, 'application/xml');
   }
 
-  collection() {
+  collection({
+    sortDirectoriesFirst = false
+  } = {}) {
     if (! this.#collection) {
       this.#collection = new Collection(
         this.responseToPrimitives(
           this.#document.querySelectorAll('response')
-        )
+        ),
+        {
+          sortDirectoriesFirst,
+        }
       );
     }
 

src/lib/UI/UI.js

@@ -7,8 +7,9 @@ export default class UI extends EventObject {
   #dav;
   #options;
 
-  constructor(container, options, dav = new DAV({
-    bypassCheck: options.bypassCheck
+  constructor(container, options = {}, dav = new DAV({
+    bypassCheck: options.bypassCheck,
+    sortDirectoriesFirst: options.sortDirectoriesFirst,
   })) {
     super();
 

src/webdav.js

@@ -6,7 +6,8 @@ import 'whatwg-fetch'; // IE11 compatibility
 import NativeDOM from './lib/UI/NativeDOM.js';
 
 const ui = new NativeDOM(document.body, {
-  bypassCheck: !! document.querySelector('[data-disable-check]')
+  bypassCheck: !! document.querySelector('[data-disable-check]'),
+  sortDirectoriesFirst: !! document.querySelector('[data-sort-directories-first]'),
 });
 
 if (document.readyState === 'loading') {