From 7918e4ed09a45a4e01b54a205a7cf09f641652cc Mon Sep 17 00:00:00 2001
From: zurg3 <20664125+zurg3@users.noreply.github.com>
Date: Mon, 26 Aug 2024 18:19:17 +0300
Subject: [PATCH] Edited image_galleries.html
---
html/image_galleries.html | 127 +++++++++++++++++++++++++++-----------
1 file changed, 92 insertions(+), 35 deletions(-)
diff --git a/html/image_galleries.html b/html/image_galleries.html
index 2af3880..26f38b3 100644
--- a/html/image_galleries.html
+++ b/html/image_galleries.html
@@ -21,11 +21,15 @@
padding: 10px;
}
- #loaded_counter_row {
+ th, td {
+ text-align: center;
+ }
+
+ .loaded_counter_col {
color: Green;
}
- #failed_counter_row {
+ .failed_counter_col {
color: Red;
}
@@ -53,6 +57,8 @@
const default_blur_radius = 16; // 16px
+ const statistics_help = 'L - Loaded\nF - Failed\nT - Total\nLR - Loaded Rate\n\nG - Gallery\nA - All';
+
if (is_mobile()) {
var current_blur_radius = 16;
}
@@ -108,6 +114,8 @@
function handle_loaded_image(img_num, search_option) {
document.images[img_num].style.border = '1px solid Black';
get_image_size(img_num);
+ document.getElementById('output').getElementsByTagName('p')[img_num].getElementsByTagName('br')[0].hidden = false;
+ document.getElementById('output').getElementsByTagName('p')[img_num].getElementsByTagName('br')[1].hidden = false;
document.getElementsByClassName('open_image_button')[img_num].hidden = false;
document.getElementsByClassName('copy_image_url_button')[img_num].hidden = false;
@@ -122,11 +130,13 @@
function search_image(img_url, search_engine) {
if (search_engine == 'google') {
- window.open(`https://lens.google.com/uploadbyurl?url=${img_url}`, '_blank');
+ var search_url = `https://lens.google.com/uploadbyurl?url=${img_url}`;
}
else if (search_engine == 'yandex') {
- window.open(`https://ya.ru/images/search?rpt=imageview&url=${img_url}`, '_blank');
+ var search_url = `https://ya.ru/images/search?rpt=imageview&url=${img_url}`;
}
+
+ window.open(search_url, '_blank');
}
function blur_image(image, radius) {
@@ -155,6 +165,29 @@
}
}
+ function update_loaded_rate_color() {
+ // Gallery
+ if (loaded_rate_gallery.innerText == '100') {
+ loaded_rate_gallery.parentNode.style.color = 'Green';
+ }
+ else if (loaded_rate_gallery.innerText == '0') {
+ loaded_rate_gallery.parentNode.style.color = 'Red';
+ }
+
+ // All
+ if (loaded_rate_all.innerText == '100') {
+ loaded_rate_all.parentNode.style.color = 'Green';
+ }
+ else if (loaded_rate_all.innerText == '0') {
+ loaded_rate_all.parentNode.style.color = 'Red';
+ }
+ }
+
+ function reset_loaded_rate_color() {
+ loaded_rate_gallery.parentNode.style.color = 'Black';
+ loaded_rate_all.parentNode.style.color = 'Black';
+ }
+
function load_gallery() {
if (document.getElementById('base_link').value != '' && document.getElementById('images_amount').value != '' && is_any_radio_checked('file_format')) {
var image_id = '';
@@ -234,9 +267,12 @@
var loaded_rate_all = document.getElementById('loaded_rate_all');
var galleries_counter = document.getElementById('galleries_counter');
+ var average_counter = document.getElementById('average_counter');
total_counter_gallery.innerText = images_amount;
total_counter_all.innerText = parseInt(total_counter_all.innerText, 10) + parseInt(total_counter_gallery.innerText, 10);
+
+ reset_loaded_rate_color();
}
clear_output();
@@ -247,9 +283,10 @@
image_item = `<p align="center">
<img style="max-width: ${current_img_scale}%; filter: blur(${blur_images ? `${current_blur_radius}px` : `0px`});" src="${image_url}" alt="image${image_id}" onload="handle_loaded_image(${get_last_img_index()}, ${is_any_radio_checked('search_engine')})" onerror="handle_failed_image(this, ${hide_failed_images}, ${blur_images})"${blur_images ? ` onclick="blur_image(this, ${current_blur_radius})"` : ''}>
- <br>
- <input type="button" class="open_image_button" value="Open" onclick="open_image('${image_url}')" title="${image_url}" hidden>
+ <br hidden>
<span class="image_size"></span>
+ <br hidden>
+ <input type="button" class="open_image_button" value="Open" onclick="open_image('${image_url}')" title="${image_url}" hidden>
<input type="button" class="copy_image_url_button" value="Copy URL" data-clipboard-text="${image_url}" data-clipboard-action="copy" hidden>
<input type="button" class="search_image_button" value="Search" onclick="search_image('${image_url}', '${search_engine}')" hidden>
</p>`;
@@ -270,6 +307,8 @@
// Loading progress
loading_progress.innerText = Math.floor((parseInt(loaded_counter_gallery.innerText, 10) + parseInt(failed_counter_gallery.innerText, 10)) / images_amount * 100);
+
+ update_loaded_rate_color();
};
img_test.onerror = function() {
// Gallery
@@ -280,6 +319,8 @@
// Loading progress
loading_progress.innerText = Math.floor((parseInt(loaded_counter_gallery.innerText, 10) + parseInt(failed_counter_gallery.innerText, 10)) / images_amount * 100);
+
+ update_loaded_rate_color();
};
img_test.src = image_url;
}
@@ -287,6 +328,7 @@
if (show_statistics) {
galleries_counter.innerText = parseInt(galleries_counter.innerText, 10) + 1;
+ average_counter.innerText = Math.floor(parseInt(total_counter_all.innerText, 10) / parseInt(galleries_counter.innerText, 10));
}
}
else {
@@ -302,23 +344,37 @@
document.getElementById('output').innerHTML = '';
}
- function reset_statistics(reset_scope) {
- document.getElementById('loading_progress_value').innerText = 0;
+ function reset_statistics_gallery() {
+ document.getElementById('loaded_counter_gallery').innerText = 0;
+ document.getElementById('failed_counter_gallery').innerText = 0;
+ document.getElementById('total_counter_gallery').innerText = 0;
+ document.getElementById('loaded_rate_gallery').innerText = 0;
+ }
+
+ function reset_statistics_all() {
+ document.getElementById('loaded_counter_all').innerText = 0;
+ document.getElementById('failed_counter_all').innerText = 0;
+ document.getElementById('total_counter_all').innerText = 0;
+ document.getElementById('loaded_rate_all').innerText = 0;
+
+ document.getElementById('galleries_counter').innerText = 0;
+ document.getElementById('average_counter').innerText = 0;
+ }
+ function reset_statistics(reset_scope) {
if (reset_scope == 'gallery') {
- document.getElementById('loaded_counter_gallery').innerText = 0;
- document.getElementById('failed_counter_gallery').innerText = 0;
- document.getElementById('total_counter_gallery').innerText = 0;
- document.getElementById('loaded_rate_gallery').innerText = 0;
+ document.getElementById('loading_progress_value').innerText = 0;
+ reset_statistics_gallery();
}
else if (reset_scope == 'all') {
- document.getElementById('loaded_counter_all').innerText = 0;
- document.getElementById('failed_counter_all').innerText = 0;
- document.getElementById('total_counter_all').innerText = 0;
- document.getElementById('loaded_rate_all').innerText = 0;
-
- document.getElementById('galleries_counter').innerText = 0;
+ reset_statistics_all();
+ }
+ else {
+ reset_statistics_gallery();
+ reset_statistics_all();
}
+
+ reset_loaded_rate_color();
}
function clear_input() {
@@ -408,32 +464,33 @@
<hr>
<table border="0">
<tr>
- <th></th>
- <th width="60" align="left">Gallery</th>
- <th width="60" align="left">All</th>
- </tr>
- <tr id="loaded_counter_row">
- <td>Loaded</td>
- <td id="loaded_counter_gallery">0</td>
- <td id="loaded_counter_all">0</td>
- </tr>
- <tr id="failed_counter_row">
- <td>Failed</td>
- <td id="failed_counter_gallery">0</td>
- <td id="failed_counter_all">0</td>
+ <th width="30"></th>
+ <th class="loaded_counter_col" width="40">L</th>
+ <th class="failed_counter_col" width="40">F</th>
+ <th width="40">T</th>
+ <th width="40">LR</th>
</tr>
<tr>
- <td>Total</td>
+ <td><b>G</b></td>
+ <td id="loaded_counter_gallery" class="loaded_counter_col">0</td>
+ <td id="failed_counter_gallery" class="failed_counter_col">0</td>
<td id="total_counter_gallery">0</td>
- <td id="total_counter_all">0</td>
+ <td><span id="loaded_rate_gallery">0</span>%</td>
</tr>
<tr>
- <td>Loaded rate</td>
- <td><span id="loaded_rate_gallery">0</span>%</td>
+ <td><b>A</b></td>
+ <td id="loaded_counter_all" class="loaded_counter_col">0</td>
+ <td id="failed_counter_all" class="failed_counter_col">0</td>
+ <td id="total_counter_all">0</td>
<td><span id="loaded_rate_all">0</span>%</td>
</tr>
</table>
<p>Galleries loaded: <span id="galleries_counter">0</span></p>
+ <p>Average images per gallery: <span id="average_counter">0</span></p>
+ <p>
+ <input type="button" id="reset_statistics_button" value="Reset" onclick="reset_statistics()">
+ <input type="button" id="statistics_help_button" value="Help" onclick="alert(statistics_help)">
+ </p>
</div>
<div id="scale_control" hidden>
<hr>