Skip to content

Commit

Permalink
Edited image_galleries.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@zurg3
zurg3 committed Aug 26, 2024
1 parent 23e6bf6 commit 7918e4e
Showing 1 changed file with 92 additions and 35 deletions.
127 changes: 92 additions & 35 deletions html/image_galleries.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;

Expand All @@ -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) {
Expand Down Expand Up @@ -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 = '';
Expand Down Expand Up @@ -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();
Expand All @@ -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>`;
Expand All @@ -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
Expand All @@ -280,13 +319,16 @@

// 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;
}
}

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 {
Expand All @@ -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() {
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 7918e4e

Please sign in to comment.