abaevdict/abaev-basex-htmx
1
0
Fork 0
forked from abaevdict/abaev-basex
Code Issues 1 Pull requests Activity

search results modal

Browse source
This commit is contained in:
Oleg Belyaev 2025-03-23 12:35:13 +03:00
parent 0b4fd5f468
commit 6e7cf5a3f1
3 changed files with 150 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

29
static/abaev-html.css
View file

@ -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
View file

@ -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')) {