search results modal

static/abaev-html.css

@@ -455,13 +455,40 @@ details[open] summary {}
 dialog {}
 dialog::backdrop {}
 
-dialog#modal_map > article {
+dialog > article {
     width: 75vw !important;
     height: 85vh !important;
     max-width: 75vw !important;
     max-height: 85vh !important;
 }
 
+dialog#modal_searchResults > article {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+dialog#modal_searchResults > article > table > thead {
+    position: sticky;
+    top: 0;
+    z-index: 1055;
+}
+
+dialog#modal_searchResults > article > header {
+    position: sticky;
+    top: 0;
+    z-index: 1055;
+}
+dialog#modal_searchResults > article > footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 1055;
+}
+
+/*dialog#modal_searchResults > article > p > table > tbody {
+    height:100%;
+    overflow-y: scroll;
+}*/
+
 /* Some form fields, `details`, elements with `tabindex`, and possibly other
 elements can be focussed. You should use `:focus-visible` instead of `:focus`
 whenever possible. As the former is not yet widely supported, you need to do it

static/abaev.js

@@ -1,28 +1,10 @@
 $( document ).ready(function() {
+    // GLOBALS
     // Link elements that do not have href out of the box
     $('.link').on("click", function () {
       window.location=$(this)[0].dataset.href+window.location.search+window.location.hash;
     });
 
-    function bindMapOpen() {
-        // $('#modal_map').data('abv-entry',$(this).data('abv-entry'));
-        // $('#modal_map')[0].showModal();
-        let url = `./dict/map-info/${$(this).data('abv-entry')}`;
-
-        fetch(url)
-        .then(res => res.json())
-        .then(out => {
-          $('#modal_map').data('map',out);
-          $('#modal_map')[0].showModal();
-        })
-        .catch(err => console.log(err));
-    }
-
-    // Event to open map modal. We have to bind it
-    // when the button is shown, otherwise it will
-    // not work for newly loaded entries.
-    $('.abv-map').on("click", bindMapOpen);
-
     // init Infinite Scroll
     $('main').infiniteScroll({
       path: '.pagination__next',
@@ -31,10 +13,71 @@ $( document ).ready(function() {
       //hideNav: '.pagination',
     });
 
+    // SEARCH RESULTS MODAL
+    $('#abv-btn-searchResults').on("click", function () {
+      $('#modal_searchResults')[0].showModal();
+    });
+
+    // Close search modal
+    $('.abv-close-search').on("click", function () {
+      $('#modal_searchResults')[0].close();
+    });
+
+    // MAP MODAL
+    // This event binding is done on page load and also whenever new entries are loaded.
+    bindMapOpen = function () {
+      let url = `./dict/map-info/${$(this).data('abv-entry')}`;
+
+      fetch(url)
+      .then(res => res.json())
+      .then(out => {
+        $('#modal_map').data('map',out);
+        $('#modal_map')[0].showModal();
+      })
+      .catch(err => console.log(err));
+    };
+
+    // Event to open map modal.
+    $('.abv-map').on("click", bindMapOpen);
+
     $('main').on( 'append.infiniteScroll', function( event, body, path, response ) {
         $('.abv-map').on("click", bindMapOpen);
     });
 
+    // Close map modal
+    $('.abv-close-map').on("click", function () {
+      $('#modal_map')[0].close();
+    });
+
+    // Load map data when dialog opens
+    $('#modal_map').on("toggle", function () {
+      map = document.getElementById('map_display');
+      var layout = {
+              // title: {
+              //     text: 'Canadian cities',
+              //     font: {
+              //         family: 'Droid Serif, serif',
+              //         size: 16
+              //     }
+              // },
+              geo: {
+                  scope: 'world',
+                  resolution: 50,
+                  fitbounds: 'locations',
+                  showrivers: true,
+                  rivercolor: '#fff',
+                  showlakes: true,
+                  lakecolor: '#fff',
+                  showland: true,
+                  landcolor: '#EAEAAE',
+                  showcountries: false,
+                  subunitcolor: '#d3d3d3'
+              }
+          };
+      Plotly.newPlot(map, [$(this).data('map')], layout);
+    });
+
+    // HASH NAVIGATION
     // If the hash is on the page, scroll a little bit above to account for top nav height
     if ( $(decodeURI(document.location.hash)).length > 0) {
       window.scrollBy(0,-$('header').height());
@@ -54,6 +97,7 @@ $( document ).ready(function() {
       }
     });
 
+    // ENTRY LIST SIDE PANEL
     // Function to scroll the entry list to the selected entry OR to the first entry displayed on the current page if there is no hash in the URL
     function scrollView() {
       var $container = $('#entrylist')
@@ -108,39 +152,6 @@ $( document ).ready(function() {
         return false;
     });
 
-    // Close map modal
-    $('.abv-close-map').on("click", function () {
-      $('#modal_map')[0].close();
-    });
-
-    // Load map data when dialog opens
-    $('#modal_map').on("toggle", function () {
-      map = document.getElementById('map_display');
-      var layout = {
-              // title: {
-              //     text: 'Canadian cities',
-              //     font: {
-              //         family: 'Droid Serif, serif',
-              //         size: 16
-              //     }
-              // },
-              geo: {
-                  scope: 'world',
-                  resolution: 50,
-                  fitbounds: 'locations',
-                  showrivers: true,
-                  rivercolor: '#fff',
-                  showlakes: true,
-                  lakecolor: '#fff',
-                  showland: true,
-                  landcolor: '#EAEAAE',
-                  showcountries: false,
-                  subunitcolor: '#d3d3d3'
-              }
-          };
-      Plotly.newPlot(map, [$(this).data('map')], layout);
-    });
-
       // Event handler to show subentries
       $('#show-re').on("change", function () {
         if($(this).prop('checked')) {

xq/restx_dict_cached.xq

@@ -120,7 +120,7 @@ declare function page:header($lang as xs:string, $href-other as xs:string) {
                     <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
                   </svg>              
                 </button>,
-                <button disabled="true">{session:get('searchN')}/{array:size(session:get('searchData'))}</button>
+                <button type="button" id="abv-btn-searchResults">{session:get('searchN')}/{array:size(session:get('searchData'))}</button>
                 ,
                 if (session:get('searchN') and session:get('searchN') < array:size(session:get('searchData'))) then
                 <button type="button" class="link" data-href="./search/next">
@@ -208,7 +208,17 @@ declare %rest:path("{$lang}/search/prev")
           let $r1 := session:set('searchN', $n)
           let $sd := session:get('searchData')
           return page:by-id($lang, $sd($n)('entry_id'), string-join($sd($n)('path')?*,"|"))
-        };              
+        };      
+        
+declare %rest:path("{$lang}/search/position")
+        %rest:query-param("p", "{$p}")
+        %output:method("html")
+        %output:html-version('5')
+        function page:search-position($lang,$p) {
+          let $r1 := session:set('searchN', $p)
+          let $sd := session:get('searchData')
+          return page:by-id($lang, $sd($p)('entry_id'), string-join($sd($p)('path')?*,"|"))
+        };                
         
 declare %rest:path("{$lang}/search/clear")
         %output:method("html")
@@ -543,18 +553,61 @@ declare %rest:path("{$lang}/dict")
       <!--  Modal for map display -->
       <dialog id="modal_map">
         <article>
-          <header><button class="abv-close-map" aria-label="Close" rel="prev"></button>
+          <header>
-          <p>Map</p>
+            <button class="abv-close-map" aria-label="Close" rel="prev">
+            </button>
+            <p>{if ($lang = 'ru') then 'Карта' else 'Map'}</p>
           </header>
           <p>
             <div id="map_display" style="width:100%;height:80%;"></div>
           </p>
-          <footer><button class="abv-close-map">Close</button></footer>
+          <footer><button class="abv-close-map">{if ($lang = 'ru') then 'Закрыть' else 'Close'}</button></footer>
         </article>
       </dialog>
       
-      {if (session:get('searchQuery')) then 
+      <!--  Modal for search results -->
+      {if (exists(session:get('searchData'))) then 
       <dialog id="modal_searchResults">
+        <article>
+          <header>
+            <button class="abv-close-search" aria-label="Close" rel="prev"/>
+            <p>{if ($lang = 'ru') then 'Результаты поиска' 
+                  else 'Search results'}</p>
+          </header>
+            <table>
+              <thead>
+                <tr>
+                  <td>{if ($lang = 'ru') then '№' else 'No.'}</td>
+                  <td>{if ($lang = 'ru') then 'Лемма' else 'Lemma'}</td>
+                  <td>{if ($lang = 'ru') then 'Фрагмент' else 'Fragment'}</td>
+                </tr>
+              </thead>
+              <tbody>
+              {
+                for $res in session:get('searchData')?*
+                count $pos
+                return <tr>
+                          <td>{$pos}</td>
+                          <td>
+                            <a href="./search/position?p={$pos}">
+                            {
+                              abv-m:entry-form-by-id($res('entry_id'))
+                            }
+                            </a>
+                          </td>
+                          <td>
+                          {
+                            xquery:eval($res('path')(1), {'': doc(`abaevdict_{$lang}/xml/{$res('entry_id')}.xml`)})
+                          }
+                          </td>
+                       </tr>
+              }
+              </tbody>
+            </table>
+          <footer>
+            <button class="abv-close-search">{if ($lang = 'ru') then 'Закрыть' else 'Close'}</button>
+          </footer>
+        </article>
       </dialog>}
     </body>
   </html>