BookStack Code Mirror - bookstack/blob - resources/assets/js/components/breadcrumb-listing.js

   1
   2
   3 class BreadcrumbListing {
   4
   5     constructor(elem) {
   6         this.elem = elem;
   7         this.searchInput = elem.querySelector('input');
   8         this.loadingElem = elem.querySelector('.loading-container');
   9         this.entityListElem = elem.querySelector('.breadcrumb-listing-entity-list');
  10         this.toggleElem = elem.querySelector('[dropdown-toggle]');
  11
  12         // this.loadingElem.style.display = 'none';
  13         const entityDescriptor = elem.getAttribute('breadcrumb-listing').split(':');
  14         this.entityType = entityDescriptor[0];
  15         this.entityId = Number(entityDescriptor[1]);
  16
  17         this.toggleElem.addEventListener('click', this.onShow.bind(this));
  18         this.searchInput.addEventListener('input', this.onSearch.bind(this));
  19     }
  20
  21     onShow() {
  22         this.loadEntityView();
  23     }
  24
  25     onSearch() {
  26         const input = this.searchInput.value.toLowerCase().trim();
  27         const listItems = this.entityListElem.querySelectorAll('.entity-list-item');
  28         for (let listItem of listItems) {
  29             const match = !input || listItem.textContent.toLowerCase().includes(input);
  30             listItem.style.display = match ? 'flex' : 'none';
  31         }
  32     }
  33
  34     loadEntityView() {
  35         this.toggleLoading(true);
  36
  37         const params = {
  38             'entity_id': this.entityId,
  39             'entity_type': this.entityType,
  40         };
  41
  42         window.$http.get('/search/entity/siblings', {params}).then(resp => {
  43             this.entityListElem.innerHTML = resp.data;
  44         }).catch(err => {
  45             console.error(err);
  46         }).then(() => {
  47             this.toggleLoading(false);
  48             this.onSearch();
  49         });
  50     }
  51
  52     toggleLoading(show = false) {
  53         this.loadingElem.style.display = show ? 'block' : 'none';
  54     }
  55
  56 }
  57
  58 export default BreadcrumbListing;