search results modal
This commit is contained in:
Oleg Belyaev
parent
0b4fd5f468
commit
6e7cf5a3f1
3 changed files with 150 additions and 59 deletions
|
|
@ -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
|
||||
|
|
|
|||
115
static/abaev.js
115
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')) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<p>Map</p>
|
||||
<header>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue