forked from enviPath/enviPy
fix: open and close search modal
Modal now opens on badge click. Modal now closes on random click around
This commit is contained in:
@ -178,6 +178,23 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Open search modal function
|
||||||
|
function openSearchModal() {
|
||||||
|
const searchModal = document.getElementById("search_modal");
|
||||||
|
if (searchModal) {
|
||||||
|
searchModal.showModal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Click handler for search badge
|
||||||
|
const searchTrigger = document.getElementById("search-trigger");
|
||||||
|
if (searchTrigger) {
|
||||||
|
searchTrigger.addEventListener("click", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
openSearchModal();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
|
// Global keyboard shortcut for search (Cmd+K on Mac, Ctrl+K on Windows/Linux)
|
||||||
document.addEventListener("keydown", function (event) {
|
document.addEventListener("keydown", function (event) {
|
||||||
// Check if user is typing in an input field
|
// Check if user is typing in an input field
|
||||||
@ -198,7 +215,7 @@
|
|||||||
|
|
||||||
if (isCorrectModifier && event.key === "k") {
|
if (isCorrectModifier && event.key === "k") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
search_modal.showModal();
|
openSearchModal();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -57,7 +57,7 @@
|
|||||||
|
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
{% if not public_mode %}
|
{% if not public_mode %}
|
||||||
<a href="/search" role="button">
|
<a id="search-trigger" role="button" class="cursor-pointer">
|
||||||
<div
|
<div
|
||||||
class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1"
|
class="flex items-center badge badge-dash space-x-1 bg-base-200 text-base-content/50 p-2 m-1"
|
||||||
>
|
>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,197 +0,0 @@
|
|||||||
{% extends "framework.html" %}
|
|
||||||
{% load static %}
|
|
||||||
{% block content %}
|
|
||||||
|
|
||||||
<div id=searchContent>
|
|
||||||
<div id="packSelector">
|
|
||||||
<label>Select Packages</label><br>
|
|
||||||
<select id="selPackages" name="selPackages" data-actions-box='true' class="selPackages" multiple
|
|
||||||
data-width='100%'>
|
|
||||||
{% if unreviewed_objects %}
|
|
||||||
<option disabled>Reviewed Packages</option>
|
|
||||||
{% endif %}
|
|
||||||
{% for obj in reviewed_objects %}
|
|
||||||
<option value="{{ obj.url }}" selected>{{ obj.name|safe }}</option>
|
|
||||||
{% endfor %}
|
|
||||||
{% if unreviewed_objects %}
|
|
||||||
<option disabled>Unreviewed Packages</option>
|
|
||||||
{% endif %}
|
|
||||||
{% for obj in unreviewed_objects %}
|
|
||||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<p></p>
|
|
||||||
<div>
|
|
||||||
<label>Search Term</label><br>
|
|
||||||
<div class="input-group" id="index-form-bar">
|
|
||||||
<input type="text" class="form-control" id='searchbar' placeholder="Benfuracarb">
|
|
||||||
<div class="input-group-btn">
|
|
||||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
|
||||||
id="mode-button"
|
|
||||||
aria-haspopup="true" aria-expanded="false">Text <span class="caret"></span></button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li class="dropdown-header">Text</li>
|
|
||||||
<li><a id="dropdown-predict-text-text">Text</a></li>
|
|
||||||
<li class="dropdown-header">SMILES</li>
|
|
||||||
<li><a id="dropdown-search-smiles-default" data-toggle="tooltip">Default</a></li>
|
|
||||||
<li><a id="dropdown-search-smiles-canonical">Canonical</a></li>
|
|
||||||
<li><a id="dropdown-search-smiles-exact">Exact</a></li>
|
|
||||||
<li class="dropdown-header">InChI</li>
|
|
||||||
<li><a id="dropdown-search-inchi-inchikey">InChIKey</a></li>
|
|
||||||
</ul>
|
|
||||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="search-button">
|
|
||||||
Go!
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p></p>
|
|
||||||
<div id="results"></div>
|
|
||||||
<p></p>
|
|
||||||
<div id="loading"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
function modeDropdownClicked() {
|
|
||||||
var suffix = ' <span class="caret"></span>';
|
|
||||||
var dropdownVal = $(this).text();
|
|
||||||
$('#mode-button').html(dropdownVal + suffix);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSearchResponse(id, data) {
|
|
||||||
content = `
|
|
||||||
<div class='panel-group' id='search-accordion'>
|
|
||||||
<div class='panel panel-default'>
|
|
||||||
<div class='panel-heading' id='headingPanel' style='font-size:2rem;height: 46px'>
|
|
||||||
Results
|
|
||||||
</div>
|
|
||||||
<div id='descDiv'></div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
function makeContent(objs) {
|
|
||||||
links = "";
|
|
||||||
for (idx in objs) {
|
|
||||||
obj = objs[idx];
|
|
||||||
links += `<a class='list-group-item' href='${obj.url}'>${obj.name}</a>`
|
|
||||||
}
|
|
||||||
return links;
|
|
||||||
}
|
|
||||||
|
|
||||||
allEmpty = true;
|
|
||||||
for (key in data) {
|
|
||||||
if (key === 'searchterm') {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data[key].length < 1) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
allEmpty = false;
|
|
||||||
content += `
|
|
||||||
<div class='panel panel-default panel-heading list-group-item' style='background-color:silver'>
|
|
||||||
<h4 class='panel-title'>
|
|
||||||
<a id='${key}_link' data-toggle='collapse' data-parent='#search-accordion' href='#${key}_panel'>
|
|
||||||
${key}
|
|
||||||
</a>
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<div id='${key}_panel' class='panel-collapse collapse in'>
|
|
||||||
<div class='panel-body list-group-item'>
|
|
||||||
${makeContent(data[key])}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
if (allEmpty) {
|
|
||||||
$('#' + id).append('<div class="alert alert-danger" role="alert"><p>' + "No results..." + '</p></div>');
|
|
||||||
} else {
|
|
||||||
$('#' + id).append(content);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function search(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
query = $("#searchbar").val()
|
|
||||||
|
|
||||||
if (!query) {
|
|
||||||
// Nothing to search...
|
|
||||||
console.log("Search phrase empty, won't do search")
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var selPacks = [];
|
|
||||||
$("#selPackages :selected").each(function () {
|
|
||||||
var id = this.value;
|
|
||||||
selPacks.push(id);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (selPacks.length < 1) {
|
|
||||||
console.log("No package selected, won't do search")
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var mode = $('#mode-button').text().trim().toLowerCase();
|
|
||||||
|
|
||||||
var par = {};
|
|
||||||
par['packages'] = selPacks;
|
|
||||||
par['search'] = query;
|
|
||||||
par['mode'] = mode;
|
|
||||||
|
|
||||||
console.log(par);
|
|
||||||
|
|
||||||
var queryString = $.param(par, true);
|
|
||||||
|
|
||||||
makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
|
|
||||||
|
|
||||||
$("#results").empty();
|
|
||||||
|
|
||||||
$.getJSON("{{ SERVER_BASE }}/search?" + queryString, function (result) {
|
|
||||||
handleSearchResponse("results", result);
|
|
||||||
$("#loading").empty();
|
|
||||||
}).fail(function (d) {
|
|
||||||
$("#loading").empty();
|
|
||||||
console.log(d.responseText);
|
|
||||||
handleError(JSON.parse(d.responseText));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
|
|
||||||
tooltips = {
|
|
||||||
'dropdown-predict-text-text': 'The inserted pattern will be searched on all enviPath object names and descriptions',
|
|
||||||
'dropdown-search-smiles-default': 'Search by SMILES, stereochemistry and charge are ignored',
|
|
||||||
'dropdown-search-smiles-canonical': 'Search by SMILES, stereochemistry is ignored but charge is preserved',
|
|
||||||
'dropdown-search-smiles-exact': 'Search by SMILES, exact match for stereochemistry and charge',
|
|
||||||
'dropdown-search-inchi-inchikey': 'Search by InChIKey',
|
|
||||||
}
|
|
||||||
|
|
||||||
Object.keys(tooltips).forEach(key => {
|
|
||||||
$('#' + key).tooltip({
|
|
||||||
placement: "top",
|
|
||||||
title: tooltips[key]
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#' + key).on('click', modeDropdownClicked);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#selPackages").selectpicker();
|
|
||||||
$("#search-button").on("click", search);
|
|
||||||
|
|
||||||
$("#searchbar").on("keydown", function (e) {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
e.preventDefault();
|
|
||||||
search(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
{% if search_result %}
|
|
||||||
$('#searchbar').val('{{ search_result.searchterm }}')
|
|
||||||
handleSearchResponse("results", {{ search_result|safe }});
|
|
||||||
{% endif %}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% endblock content %}
|
|
||||||
Reference in New Issue
Block a user