Implemented new design in entity selector

- Also showed entity path in search.
- Cleaned popular entity fetch logic.
- Cleaned entity selector JS code a little

resources/assets/js/components/entity-selector.js

@@ -6,8 +6,8 @@ class EntitySelector {
         this.search = '';
         this.lastClick = 0;
 
-        let entityTypes = elem.hasAttribute('entity-types') ? elem.getAttribute('entity-types') : 'page,book,chapter';
-        let entityPermission = elem.hasAttribute('entity-permission') ? elem.getAttribute('entity-permission') : 'view';
+        const entityTypes = elem.hasAttribute('entity-types') ? elem.getAttribute('entity-types') : 'page,book,chapter';
+        const entityPermission = elem.hasAttribute('entity-permission') ? elem.getAttribute('entity-permission') : 'view';
         this.searchUrl = window.baseUrl(`/ajax/search/entities?types=${encodeURIComponent(entityTypes)}&permission=${encodeURIComponent(entityPermission)}`);
 
         this.input = elem.querySelector('[entity-selector-input]');
@@ -26,6 +26,7 @@ class EntitySelector {
                 this.searchEntities(this.searchInput.value);
             }, 200);
         });
+
         this.searchInput.addEventListener('keydown', event => {
             if (event.keyCode === 13) event.preventDefault();
         });
@@ -53,7 +54,7 @@ class EntitySelector {
 
     searchEntities(searchTerm) {
         this.input.value = '';
-        let url = this.searchUrl + `&term=${encodeURIComponent(searchTerm)}`;
+        let url = `${this.searchUrl}&term=${encodeURIComponent(searchTerm)}`;
         window.$http.get(url).then(resp => {
             this.resultsContainer.innerHTML = resp.data;
             this.hideLoading();
@@ -68,48 +69,47 @@ class EntitySelector {
     }
 
     onClick(event) {
-        let t = event.target;
-
-        if (t.matches('.entity-list-item  *')) {
+        const listItem = event.target.closest('[data-entity-type]');
+        if (listItem) {
             event.preventDefault();
             event.stopPropagation();
-            let item = t.closest('[data-entity-type]');
-            this.selectItem(item);
-        } else if (t.matches('[data-entity-type]')) {
-            this.selectItem(t)
+            this.selectItem(listItem);
         }
-
     }
 
     selectItem(item) {
-        let isDblClick = this.isDoubleClick();
-        let type = item.getAttribute('data-entity-type');
-        let id = item.getAttribute('data-entity-id');
-        let isSelected = !item.classList.contains('selected') || isDblClick;
+        const isDblClick = this.isDoubleClick();
+        const type = item.getAttribute('data-entity-type');
+        const id = item.getAttribute('data-entity-id');
+        const isSelected = (!item.classList.contains('selected') || isDblClick);
 
         this.unselectAll();
         this.input.value = isSelected ? `${type}:${id}` : '';
 
-        if (!isSelected) window.$events.emit('entity-select-change', null);
         if (isSelected) {
             item.classList.add('selected');
-            item.classList.add('primary-background');
+        } else {
+            window.$events.emit('entity-select-change', null)
         }
+
         if (!isDblClick && !isSelected) return;
 
-        let link = item.querySelector('.entity-list-item-link').getAttribute('href');
-        let name = item.querySelector('.entity-list-item-name').textContent;
-        let data = {id: Number(id), name: name, link: link};
+        const link = item.getAttribute('href');
+        const name = item.querySelector('.entity-list-item-name').textContent;
+        const data = {id: Number(id), name: name, link: link};
 
-        if (isDblClick) window.$events.emit('entity-select-confirm', data);
-        if (isSelected) window.$events.emit('entity-select-change', data);
+        if (isDblClick) {
+            window.$events.emit('entity-select-confirm', data)
+        }
+        if (isSelected) {
+            window.$events.emit('entity-select-change', data)
+        }
     }
 
     unselectAll() {
         let selected = this.elem.querySelectorAll('.selected');
-        for (let i = 0, len = selected.length; i < len; i++) {
-            selected[i].classList.remove('selected');
-            selected[i].classList.remove('primary-background');
+        for (let selectedElem of selected) {
+            selectedElem.classList.remove('selected', 'primary-background');
         }
     }
 

resources/assets/sass/_lists.scss

@@ -198,10 +198,10 @@
     border-radius: 1px;
     opacity: 0.6;
   }
-  .entity-list-item  .icon:after {
+  .entity-list-item .icon:after {
     opacity: 1;
   }
-  .entity-list-item  .icon svg {
+  .entity-list-item .icon svg {
     display: none;
   }
 }
@@ -399,6 +399,15 @@ ul.pagination {
   }
 }
 
+.entity-list-item-path-sep {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  top: 1px;
+  svg {
+    margin-right: 0;
+  }
+}
 
 .card .entity-list-item:not(.no-hover):hover {
   background-color: #F2F2F2;

resources/assets/sass/styles.scss

@@ -187,23 +187,22 @@ $btt-size: 40px;
     overflow-y: scroll;
     height: 400px;
     background-color: #EEEEEE;
+    margin-right: 0;
+    margin-left: 0;
+  }
+  .entity-list-item {
+    background-color: #FFF;
+  }
+  .entity-list-item p {
+    margin-bottom: 0;
+  }
+  .entity-list-item.selected {
+    background-color: rgba(0, 0, 0, 0.15) !important;
   }
   .loading {
     height: 400px;
     padding-top: $-l;
   }
-  .entity-list > p {
-    text-align: center;
-    padding-top: $-l;
-    font-size: 1.333em;
-  }
-  .entity-list > div {
-    padding-left: $-m;
-    padding-right: $-m;
-    background-color: #FFF;
-    transition: all ease-in-out 120ms;
-    cursor: pointer;
-  }
   &.compact {
     font-size: 10px;
     .entity-item-snippet {

resources/views/components/entity-selector.blade.php

@@ -5,5 +5,4 @@
         <div class="text-center loading" entity-selector-loading>@include('partials.loading-icon')</div>
         <div entity-selector-results></div>
     </div>
-</div>
-{{--TODO--}}
+</div>

resources/views/partials/entity-list-item.blade.php

@@ -1,5 +1,15 @@
 @component('partials.entity-list-item-basic', ['entity' => $entity])
 <div class="entity-item-snippet">
+
+    @if($showPath ?? false)
+        @if($entity->book_id)
+            <span class="text-book">{{ $entity->book->getShortName(42) }}</span>
+            @if($entity->chapter_id)
+                <span class="text-muted entity-list-item-path-sep">@icon('chevron-right')</span> <span class="text-chapter">{{ $entity->chapter->getShortName(42) }}</span>
+            @endif
+        @endif
+    @endif
+
     <p class="text-muted break-text">{{ $entity->getExcerpt() }}</p>
 </div>
 @endcomponent

resources/views/partials/entity-list.blade.php

@@ -2,7 +2,7 @@
 <div class="entity-list {{ $style ?? '' }}">
     @if(count($entities) > 0)
         @foreach($entities as $index => $entity)
-            @include('partials.entity-list-item', ['entity' => $entity])
+            @include('partials.entity-list-item', ['entity' => $entity, 'showPath' => $showPath ?? false])
         @endforeach
     @else
         <p class="text-muted empty-text">

resources/views/search/all.blade.php

@@ -192,7 +192,7 @@
                     <h1 class="list-heading">{{ trans('entities.search_results') }}</h1>
                     <h6 class="text-muted">{{ trans_choice('entities.search_total_results_found', $totalResults, ['count' => $totalResults]) }}</h6>
                     <div class="book-contents">
-                        @include('partials.entity-list', ['entities' => $entities])
+                        @include('partials.entity-list', ['entities' => $entities, 'showPath' => true])
                     </div>
                     @if($hasNextPage)
                         <div class="text-right mt-m">

resources/views/search/entity-ajax-list.blade.php

@@ -1,21 +1,15 @@
-<div class="entity-list @if(isset($style)){{ $style }}@endif">
+<div class="entity-list">
     @if(count($entities) > 0)
         @foreach($entities as $index => $entity)
-            @if($entity->isA('page'))
-                @include('pages/list-item', ['page' => $entity, 'showPath' => true])
-            @elseif($entity->isA('book'))
-                @include('books/list-item', ['book' => $entity])
-            @elseif($entity->isA('chapter'))
-                @include('chapters/list-item', ['chapter' => $entity, 'hidePages' => true, 'showPath' => true])
-            @endif
 
+            @include('partials.entity-list-item', ['entity' => $entity, 'showPath' => true])
             @if($index !== count($entities) - 1)
                 <hr>
             @endif
 
         @endforeach
     @else
-        <p class="text-muted">
+        <p class="text-muted text-large p-xl">
             {{ trans('common.no_items') }}
         </p>
     @endif