summaryrefslogtreecommitdiff
path: root/searx/static/themes/oscar/src/js/image_layout.js
diff options
context:
space:
mode:
Diffstat (limited to 'searx/static/themes/oscar/src/js/image_layout.js')
-rw-r--r--searx/static/themes/oscar/src/js/image_layout.js224
1 files changed, 0 insertions, 224 deletions
diff --git a/searx/static/themes/oscar/src/js/image_layout.js b/searx/static/themes/oscar/src/js/image_layout.js
deleted file mode 100644
index c65351f7..00000000
--- a/searx/static/themes/oscar/src/js/image_layout.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
-*
-* 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.
-*
-* @example <caption>Example usage of searxng.ImageLayout class.</caption>
-* searxng.image_thumbnail_layout = new searxng.ImageLayout(
-* '#urls', // container_selector
-* '#urls .result-images', // results_selector
-* 'img.image_thumbnail', // img_selector
-* 14, // verticalMargin
-* 6, // horizontalMargin
-* 200 // maxHeight
-* );
-* searxng.image_thumbnail_layout.watch();
-*/
-
-
-(function (w, d) {
- function ImageLayout (container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
- this.container_selector = container_selector;
- this.results_selector = results_selector;
- this.img_selector = img_selector;
- this.verticalMargin = verticalMargin;
- this.horizontalMargin = horizontalMargin;
- this.maxHeight = maxHeight;
- this.trottleCallToAlign = null;
- this.alignAfterThrotteling = false;
- }
-
- /**
- * 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.verticalMargin) / 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.setAttribute('width', Math.round(imgWidth));
- img.setAttribute('height', Math.round(height));
- img.style.marginLeft = Math.round(this.horizontalMargin) + 'px';
- img.style.marginTop = Math.round(this.horizontalMargin) + 'px';
- img.style.marginRight = Math.round(this.verticalMargin - 7) + 'px'; // -4 is the negative margin of the inline element
- img.style.marginBottom = Math.round(this.verticalMargin - 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.throttleAlign = function () {
- var obj = this;
- if (obj.trottleCallToAlign) {
- obj.alignAfterThrotteling = true;
- } else {
- obj.alignAfterThrotteling = false;
- obj.align();
- obj.trottleCallToAlign = setTimeout(function () {
- if (obj.alignAfterThrotteling) {
- obj.align();
- }
- obj.alignAfterThrotteling = false;
- obj.trottleCallToAlign = null;
- }, 20);
- }
- };
-
- 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._monitorImages = function () {
- var i, img;
- var objthrottleAlign = this.throttleAlign.bind(this);
- var results_nodes = d.querySelectorAll(this.results_selector);
- var results_length = results_nodes.length;
-
- function img_load_error (event) {
- // console.log("ERROR can't load: " + event.originalTarget.src);
- event.originalTarget.src = w.searxng.static_path + w.searxng.theme.img_load_error;
- }
-
- for (i = 0; i < results_length; i++) {
- img = results_nodes[i].querySelector(this.img_selector);
- if (img !== null && img !== undefined && !img.classList.contains('aligned')) {
- img.addEventListener('load', objthrottleAlign);
- // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
- img.addEventListener('error', objthrottleAlign);
- img.addEventListener('timeout', objthrottleAlign);
- if (w.searxng.theme.img_load_error) {
- img.addEventListener('error', img_load_error, {once: true});
- }
- img.classList.add('aligned');
- }
- }
- };
-
- ImageLayout.prototype.watch = function () {
- var objthrottleAlign = this.throttleAlign.bind(this);
-
- // https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
- w.addEventListener('pageshow', objthrottleAlign);
- // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/load_event
- w.addEventListener('load', objthrottleAlign);
- // https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
- w.addEventListener('resize', objthrottleAlign);
-
- this._monitorImages();
-
- var obj = this;
-
- let observer = new MutationObserver(entries => {
- let newElement = false;
- for (let i = 0; i < entries.length; i++) {
- if (entries[i].addedNodes.length > 0 && entries[i].addedNodes[0].classList.contains('result')) {
- newElement = true;
- break;
- }
- }
- if (newElement) {
- obj._monitorImages();
- }
- });
- observer.observe(d.querySelector(this.container_selector), {
- childList: true,
- subtree: true,
- attributes: false,
- characterData: false,
- });
- };
-
- w.searxng.ImageLayout = ImageLayout;
-
-}(window, document));
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-13 16:49:08 +0000