searxng/searx/static/themes/oscar/js/searx.js
Alexandre Flament 7a0fbdecc4 [enh] oscar: image thumbnail layout
Adjust thumbnail sizes to fill the container width
2021-04-05 11:29:17 +02:00

557 lines
21 KiB
JavaScript

/**
* searx is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* searx is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with searx. If not, see < http://www.gnu.org/licenses/ >.
*
* (C) 2019 by Alexandre Flament
*/
window.searx = (function(d) {
'use strict';
//
d.getElementsByTagName("html")[0].className = "js";
// add data- properties
var script = d.currentScript || (function() {
var scripts = d.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
return {
autocompleter: script.getAttribute('data-autocompleter') === 'true',
method: script.getAttribute('data-method'),
translations: JSON.parse(script.getAttribute('data-translations'))
};
})(document);
;/**
* searx is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* searx is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with searx. If not, see < http://www.gnu.org/licenses/ >.
*
* (C) 2014 by Thomas Pointhuber, <thomas.pointhuber@gmx.at>
*/
$(document).ready(function(){
var original_search_value = '';
if(searx.autocompleter) {
var searchResults = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: './autocompleter?q=%QUERY',
wildcard: '%QUERY'
}
});
searchResults.initialize();
$("#q").on('keydown', function(e) {
if(e.which == 13) {
original_search_value = $('#q').val();
}
});
$('#q').typeahead({
name: 'search-results',
highlight: false,
hint: true,
displayKey: function(result) {
return result;
},
classNames: {
input: 'tt-input',
hint: 'tt-hint',
menu: 'tt-dropdown-menu',
dataset: 'tt-dataset-search-results',
},
}, {
name: 'autocomplete',
source: searchResults,
});
$('#q').bind('typeahead:select', function(ev, suggestion) {
if(original_search_value) {
$('#q').val(original_search_value);
}
$("#search_form").submit();
});
}
});
;/**
* searx is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* searx is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with searx. If not, see < http://www.gnu.org/licenses/ >.
*
* (C) 2014 by Thomas Pointhuber, <thomas.pointhuber@gmx.at>
*/
$(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
*/
searx.image_thumbnail_layout = new searx.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200);
searx.image_thumbnail_layout.watch();
});
;window.addEventListener('load', function() {
// Hide infobox toggle if shrunk size already fits all content.
$('.infobox').each(function() {
var infobox_body = $(this).find('.infobox_body');
var total_height = infobox_body.prop('scrollHeight') + infobox_body.find('img.infobox_part').height();
var max_height = infobox_body.css('max-height').replace('px', '');
if (total_height <= max_height) {
$(this).find('.infobox_toggle').hide();
}
});
});
;/**
* searx is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* searx is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with searx. If not, see < http://www.gnu.org/licenses/ >.
*
* (C) 2014 by Thomas Pointhuber, <thomas.pointhuber@gmx.at>
*/
$(document).ready(function(){
$(".searx_overpass_request").on( "click", function( event ) {
var overpass_url = "https://overpass-api.de/api/interpreter?data=";
var query_start = overpass_url + "[out:json][timeout:25];(";
var query_end = ");out meta;";
var osm_id = $(this).data('osm-id');
var osm_type = $(this).data('osm-type');
var result_table = $(this).data('result-table');
var result_table_loadicon = "#" + $(this).data('result-table-loadicon');
// tags which can be ignored
var osm_ignore_tags = [ "addr:city", "addr:country", "addr:housenumber", "addr:postcode", "addr:street" ];
if(osm_id && osm_type && result_table) {
result_table = "#" + result_table;
var query = null;
switch(osm_type) {
case 'node':
query = query_start + "node(" + osm_id + ");" + query_end;
break;
case 'way':
query = query_start + "way(" + osm_id + ");" + query_end;
break;
case 'relation':
query = query_start + "relation(" + osm_id + ");" + query_end;
break;
default:
break;
}
if(query) {
//alert(query);
var ajaxRequest = $.ajax( query )
.done(function( html) {
if(html && html.elements && html.elements[0]) {
var element = html.elements[0];
var newHtml = $(result_table).html();
for (var row in element.tags) {
if(element.tags.name === null || osm_ignore_tags.indexOf(row) == -1) {
newHtml += "<tr><td>" + row + "</td><td>";
switch(row) {
case "phone":
case "fax":
newHtml += "<a href=\"tel:" + element.tags[row].replace(/ /g,'') + "\">" + element.tags[row] + "</a>";
break;
case "email":
newHtml += "<a href=\"mailto:" + element.tags[row] + "\">" + element.tags[row] + "</a>";
break;
case "website":
case "url":
newHtml += "<a href=\"" + element.tags[row] + "\">" + element.tags[row] + "</a>";
break;
case "wikidata":
newHtml += "<a href=\"https://www.wikidata.org/wiki/" + element.tags[row] + "\">" + element.tags[row] + "</a>";
break;
case "wikipedia":
if(element.tags[row].indexOf(":") != -1) {
newHtml += "<a href=\"https://" + element.tags[row].substring(0,element.tags[row].indexOf(":")) + ".wikipedia.org/wiki/" + element.tags[row].substring(element.tags[row].indexOf(":")+1) + "\">" + element.tags[row] + "</a>";
break;
}
/* jshint ignore:start */
default:
/* jshint ignore:end */
newHtml += element.tags[row];
break;
}
newHtml += "</td></tr>";
}
}
$(result_table).html(newHtml);
$(result_table).removeClass('hidden');
$(result_table_loadicon).addClass('hidden');
}
})
.fail(function() {
$(result_table_loadicon).html($(result_table_loadicon).html() + "<p class=\"text-muted\">"+searx.translations.could_not_load+"</p>");
});
}
}
// this event occour only once per element
$( this ).off( event );
});
$(".searx_init_map").on( "click", function( event ) {
var leaflet_target = $(this).data('leaflet-target');
var map_lon = $(this).data('map-lon');
var map_lat = $(this).data('map-lat');
var map_zoom = $(this).data('map-zoom');
var map_boundingbox = $(this).data('map-boundingbox');
var map_geojson = $(this).data('map-geojson');
if(map_boundingbox) {
southWest = L.latLng(map_boundingbox[0], map_boundingbox[2]);
northEast = L.latLng(map_boundingbox[1], map_boundingbox[3]);
map_bounds = L.latLngBounds(southWest, northEast);
}
// change default imagePath
L.Icon.Default.imagePath = "./static/themes/oscar/css/images/";
// init map
var map = L.map(leaflet_target);
// create the tile layer with correct attribution
var osmMapnikUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmMapnikAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
var osmMapnik = new L.TileLayer(osmMapnikUrl, {minZoom: 1, maxZoom: 19, attribution: osmMapnikAttrib});
var osmWikimediaUrl='https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png';
var osmWikimediaAttrib = 'Wikimedia maps beta | Maps data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
var osmWikimedia = new L.TileLayer(osmWikimediaUrl, {minZoom: 1, maxZoom: 19, attribution: osmWikimediaAttrib});
// init map view
setTimeout(function() {
if(map_bounds) {
map.fitBounds(map_bounds, {
maxZoom:17
});
} else if (map_lon && map_lat) {
if(map_zoom)
map.setView(new L.LatLng(map_lat, map_lon),map_zoom);
else
map.setView(new L.LatLng(map_lat, map_lon),8);
}
}, 0);
map.addLayer(osmMapnik);
var baseLayers = {
"OSM Mapnik": osmMapnik/*,
"OSM Wikimedia": osmWikimedia*/
};
L.control.layers(baseLayers).addTo(map);
if(map_geojson)
L.geoJson(map_geojson).addTo(map);
/*else if(map_bounds)
L.rectangle(map_bounds, {color: "#ff7800", weight: 3, fill:false}).addTo(map);*/
// this event occour only once per element
$( this ).off( event );
});
});
;$(document).ready(function(){
$("#allow-all-engines").click(function() {
$(".onoffswitch-checkbox").each(function() { this.checked = false;});
});
$("#disable-all-engines").click(function() {
$(".onoffswitch-checkbox").each(function() { this.checked = true;});
});
});
;/**
*
* Google Image Layout v0.0.1
* Description, by Anh Trinh.
* Heavily modified for searx
* https://ptgamr.github.io/2014-09-12-google-image-layout/
* https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
*
* @license Free to use under the MIT License.
*
*/
(function (w, d) {
function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
this.container_selector = container_selector;
this.results_selector = results_selector;
this.img_selector = img_selector;
this.margin = margin;
this.maxHeight = maxHeight;
this.isAlignDone = true;
}
/**
* Get the height that make all images fit the container
*
* width = w1 + w2 + w3 + ... = r1*h + r2*h + r3*h + ...
*
* @param {[type]} images the images to be calculated
* @param {[type]} width the container witdth
* @param {[type]} margin the margin between each image
*
* @return {[type]} the height
*/
ImageLayout.prototype._getHeigth = function (images, width) {
var i, img;
var r = 0;
for (i = 0; i < images.length; i++) {
img = images[i];
if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
r += img.naturalWidth / img.naturalHeight;
} else {
// assume that not loaded images are square
r += 1;
}
}
return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
};
ImageLayout.prototype._setSize = function (images, height) {
var i, img, imgWidth;
var imagesLength = images.length, resultNode;
for (i = 0; i < imagesLength; i++) {
img = images[i];
if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
imgWidth = height * img.naturalWidth / img.naturalHeight;
} else {
// not loaded image : make it square as _getHeigth said it
imgWidth = height;
}
img.style.width = imgWidth + 'px';
img.style.height = height + 'px';
img.style.marginLeft = '3px';
img.style.marginTop = '3px';
img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
img.style.marginBottom = this.margin - 7 + 'px';
resultNode = img.parentNode.parentNode;
if (!resultNode.classList.contains('js')) {
resultNode.classList.add('js');
}
}
};
ImageLayout.prototype._alignImgs = function (imgGroup) {
var isSearching, slice, i, h;
var containerElement = d.querySelector(this.container_selector);
var containerCompStyles = window.getComputedStyle(containerElement);
var containerPaddingLeft = parseInt(containerCompStyles.getPropertyValue('padding-left'), 10);
var containerPaddingRight = parseInt(containerCompStyles.getPropertyValue('padding-right'), 10);
var containerWidth = containerElement.clientWidth - containerPaddingLeft - containerPaddingRight;
while (imgGroup.length > 0) {
isSearching = true;
for (i = 1; i <= imgGroup.length && isSearching; i++) {
slice = imgGroup.slice(0, i);
h = this._getHeigth(slice, containerWidth);
if (h < this.maxHeight) {
this._setSize(slice, h);
// continue with the remaining images
imgGroup = imgGroup.slice(i);
isSearching = false;
}
}
if (isSearching) {
this._setSize(slice, Math.min(this.maxHeight, h));
break;
}
}
};
ImageLayout.prototype.align = function () {
var i;
var results_selectorNode = d.querySelectorAll(this.results_selector);
var results_length = results_selectorNode.length;
var previous = null;
var current = null;
var imgGroup = [];
for (i = 0; i < results_length; i++) {
current = results_selectorNode[i];
if (current.previousElementSibling !== previous && imgGroup.length > 0) {
// the current image is not connected to previous one
// so the current image is the start of a new group of images.
// so call _alignImgs to align the current group
this._alignImgs(imgGroup);
// and start a new empty group of images
imgGroup = [];
}
// add the current image to the group (only the img tag)
imgGroup.push(current.querySelector(this.img_selector));
// update the previous variable
previous = current;
}
// align the remaining images
if (imgGroup.length > 0) {
this._alignImgs(imgGroup);
}
};
ImageLayout.prototype.watch = function () {
var i, img;
var obj = this;
var results_nodes = d.querySelectorAll(this.results_selector);
var results_length = results_nodes.length;
function throttleAlign() {
if (obj.isAlignDone) {
obj.isAlignDone = false;
setTimeout(function () {
obj.align();
obj.isAlignDone = true;
}, 100);
}
}
w.addEventListener('pageshow', throttleAlign);
w.addEventListener('load', throttleAlign);
w.addEventListener('resize', throttleAlign);
for (i = 0; i < results_length; i++) {
img = results_nodes[i].querySelector(this.img_selector);
if (img !== null && img !== undefined) {
img.addEventListener('load', throttleAlign);
img.addEventListener('error', throttleAlign);
}
}
};
w.searx.ImageLayout = ImageLayout;
}(window, document));