searxng/searx/static/themes/oscar/src/js/element_modifiers.js
Alexandre Flament fd374d6322 [enh] simple theme: image detail
When an image is selected, the detail with the full size image is displayed
on the right side of the screen (or full screen on tablet and phone).

When Javascript is disabled, the thumbnail is a linked to the full size image,
as it was before.

When the image proxy is enabled, the full size image is also proxied,
in consequence this commit increases the bandwidth usage of instances.

The detail can be closed by the close button or the Esc key.
It is possible to go to the next and previous images using the j and k keys
or the button on the top right of the screen.
2021-10-28 08:28:21 +02:00

108 lines
3.7 KiB
JavaScript

/**
* @license
* (C) Copyright Contributors to the SearXNG project.
* (C) Copyright Contributors to the searx project (2014 - 2021).
* (C) 2014 by Thomas Pointhuber, <thomas.pointhuber@gmx.at>
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
$(document).ready(function(){
/**
* focus element if class="autofocus" and id="q"
*/
$('#q.autofocus').focus();
/**
* Empty search bar when click on reset button
*/
$("#clear_search").click(function () {
document.getElementById("q").value = "";
});
/**
* select full content on click if class="select-all-on-click"
*/
$(".select-all-on-click").click(function () {
$(this).select();
});
/**
* change text during btn-collapse click if possible
*/
$('.btn-collapse').click(function() {
var btnTextCollapsed = $(this).data('btn-text-collapsed');
var btnTextNotCollapsed = $(this).data('btn-text-not-collapsed');
if(btnTextCollapsed !== '' && btnTextNotCollapsed !== '') {
if($(this).hasClass('collapsed')) {
new_html = $(this).html().replace(btnTextCollapsed, btnTextNotCollapsed);
} else {
new_html = $(this).html().replace(btnTextNotCollapsed, btnTextCollapsed);
}
$(this).html(new_html);
}
});
/**
* change text during btn-toggle click if possible
*/
$('.btn-toggle .btn').click(function() {
var btnClass = 'btn-' + $(this).data('btn-class');
var btnLabelDefault = $(this).data('btn-label-default');
var btnLabelToggled = $(this).data('btn-label-toggled');
if(btnLabelToggled !== '') {
if($(this).hasClass('btn-default')) {
new_html = $(this).html().replace(btnLabelDefault, btnLabelToggled);
} else {
new_html = $(this).html().replace(btnLabelToggled, btnLabelDefault);
}
$(this).html(new_html);
}
$(this).toggleClass(btnClass);
$(this).toggleClass('btn-default');
});
/**
* change text during btn-toggle click if possible
*/
$('.media-loader').click(function() {
var target = $(this).data('target');
var iframe_load = $(target + ' > iframe');
var srctest = iframe_load.attr('src');
if(srctest === undefined || srctest === false){
iframe_load.attr('src', iframe_load.data('src'));
}
});
/**
* Select or deselect every categories on double clic
*/
$(".btn-sm").dblclick(function() {
var btnClass = 'btn-' + $(this).data('btn-class'); // primary
if($(this).hasClass('btn-default')) {
$(".btn-sm > input").attr('checked', 'checked');
$(".btn-sm > input").prop("checked", true);
$(".btn-sm").addClass(btnClass);
$(".btn-sm").addClass('active');
$(".btn-sm").removeClass('btn-default');
} else {
$(".btn-sm > input").attr('checked', '');
$(".btn-sm > input").removeAttr('checked');
$(".btn-sm > input").checked = false;
$(".btn-sm").removeClass(btnClass);
$(".btn-sm").removeClass('active');
$(".btn-sm").addClass('btn-default');
}
});
$(".nav-tabs").click(function(a) {
var tabs = $(a.target).parents("ul");
tabs.children().attr("aria-selected", "false");
$(a.target).parent().attr("aria-selected", "true");
});
/**
* Layout images according to their sizes
*/
searxng.image_thumbnail_layout = new searxng.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 3, 200);
searxng.image_thumbnail_layout.watch();
});