Added experimental breadcrumb traversal

resources/assets/js/components/breadcrumb-listing.js

@@ -0,0 +1,60 @@
+
+
+class BreadcrumbListing {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.searchInput = elem.querySelector('input');
+        this.loadingElem = elem.querySelector('.loading-container');
+        this.entityListElem = elem.querySelector('.breadcrumb-listing-entity-list');
+        this.toggleElem = elem.querySelector('[dropdown-toggle]');
+
+        // this.loadingElem.style.display = 'none';
+        const entityDescriptor = elem.getAttribute('breadcrumb-listing').split(':');
+        this.entityType = entityDescriptor[0];
+        this.entityId = Number(entityDescriptor[1]);
+
+        this.toggleElem.addEventListener('click', this.onShow.bind(this));
+        this.searchInput.addEventListener('input', this.onSearch.bind(this));
+    }
+
+    onShow() {
+        this.loadEntityView();
+    }
+
+    onSearch() {
+        const input = this.searchInput.value.toLowerCase().trim();
+        const listItems = this.entityListElem.querySelectorAll('.entity-list-item');
+        console.log(listItems);
+        for (let listItem of listItems) {
+            const match = !input || listItem.textContent.toLowerCase().includes(input);
+            console.log(match);
+            listItem.style.display = match ? 'flex' : 'none';
+        }
+    }
+
+    loadEntityView() {
+        this.toggleLoading(true);
+
+        const params = {
+            'entity_id': this.entityId,
+            'entity_type': this.entityType,
+        };
+
+        window.$http.get('/search/entity/siblings', {params}).then(resp => {
+            this.entityListElem.innerHTML = resp.data;
+        }).catch(err => {
+            console.error(err);
+        }).then(() => {
+            this.toggleLoading(false);
+            this.onSearch();
+        });
+    }
+
+    toggleLoading(show = false) {
+        this.loadingElem.style.display = show ? 'block' : 'none';
+    }
+
+}
+
+export default BreadcrumbListing;

resources/assets/js/components/dropdown.js

@@ -6,7 +6,7 @@ class DropDown {
 
     constructor(elem) {
         this.container = elem;
-        this.menu = elem.querySelector('ul');
+        this.menu = elem.querySelector('ul, [dropdown-menu]');
         this.toggle = elem.querySelector('[dropdown-toggle]');
         this.setupListeners();
     }

resources/assets/js/components/index.js

@@ -21,7 +21,7 @@ import homepageControl from "./homepage-control";
 import headerMobileToggle from "./header-mobile-toggle";
 import listSortControl from "./list-sort-control";
 import triLayout from "./tri-layout";
-
+import breadcrumbListing from "./breadcrumb-listing";
 
 const componentMapping = {
     'dropdown': dropdown,
@@ -47,6 +47,7 @@ const componentMapping = {
     'header-mobile-toggle': headerMobileToggle,
     'list-sort-control': listSortControl,
     'tri-layout': triLayout,
+    'breadcrumb-listing': breadcrumbListing,
 };
 
 window.components = {};