☰

Enlarge Images on HTTP File Server

Enlarge images on the webpage with adjustable size and preview option (retained across refresh)

// ==UserScript==
// @name         Enlarge Images on HTTP File Server
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Enlarge images on the webpage with adjustable size and preview option (retained across refresh)
// @author       chaoscreater
// @match        https://*:8080/files/DCIM/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Set default zoom value to 100 if not present in localStorage
    var defaultZoomValue = 100;
    var savedZoomValue = localStorage.getItem('imageSize');
    var initialZoomValue = savedZoomValue !== null ? savedZoomValue : defaultZoomValue;

    // Set default preview value to false if not present in localStorage
    var defaultPreviewValue = false;
    var savedPreviewValue = localStorage.getItem('previewImages');
    var initialPreviewValue = savedPreviewValue !== null ? JSON.parse(savedPreviewValue) : defaultPreviewValue;

    // Create a checkbox for preview images
    var previewCheckbox = document.createElement('input');
    previewCheckbox.type = 'checkbox';
    previewCheckbox.style.position = 'fixed';
    previewCheckbox.style.bottom = '50px'; // Adjusted height
    previewCheckbox.style.left = '10px';
    previewCheckbox.style.zIndex = '9999';
    previewCheckbox.checked = initialPreviewValue;
    previewCheckbox.id = 'previewCheckbox';

    var previewLabel = document.createElement('label');
    previewLabel.setAttribute('for', 'previewCheckbox');
    previewLabel.style.position = 'fixed';
    previewLabel.style.bottom = '50px'; // Adjusted height
    previewLabel.style.left = '30px';
    previewLabel.style.zIndex = '9999';
    previewLabel.textContent = 'Preview';

    // Create a slider element
    var slider = document.createElement('input');
    slider.type = 'range';
    slider.min = 50;
    slider.max = 500;
    slider.value = initialZoomValue;
    slider.style.position = 'fixed';
    slider.style.bottom = '10px';
    slider.style.left = '10px';
    slider.style.zIndex = '9999';

    // Create a text input box for modifying the zoom percentage
    var zoomInputBox = document.createElement('input');
    zoomInputBox.type = 'text';
    zoomInputBox.style.position = 'fixed';
    zoomInputBox.style.bottom = '10px';
    zoomInputBox.style.left = slider.style.left;
    zoomInputBox.style.width = '40px';
    zoomInputBox.style.zIndex = '9999';
    zoomInputBox.value = initialZoomValue;

    // Add an event listener to handle changes in the zoom input box
    zoomInputBox.addEventListener('input', function() {
        var newZoomValue = parseInt(zoomInputBox.value);
        if (!isNaN(newZoomValue) && newZoomValue >= slider.min && newZoomValue <= slider.max) {
            slider.value = newZoomValue;
            updateImageSize(newZoomValue + 'px', previewCheckbox.checked);
            localStorage.setItem('imageSize', newZoomValue); // Store in localStorage
        }
    });

    // Add an event listener to handle slider changes
    slider.addEventListener('input', function() {
        var newSize = slider.value + 'px';
        updateImageSize(newSize, previewCheckbox.checked);
        localStorage.setItem('imageSize', slider.value); // Store in localStorage
        zoomInputBox.value = slider.value; // Update the zoom input box value
        adjustZoomInputBoxPosition(); // Adjust the position dynamically
    });

    // Add an event listener to handle preview checkbox changes
    previewCheckbox.addEventListener('change', function() {
        var isPreviewChecked = previewCheckbox.checked;
        localStorage.setItem('previewImages', isPreviewChecked); // Store in localStorage
        updateImageSize(slider.value + 'px', isPreviewChecked);
    });

    // Append the preview checkbox, label, slider, and zoom input box to the document body
    document.body.appendChild(previewCheckbox);
    document.body.appendChild(previewLabel);
    document.body.appendChild(slider);
    document.body.appendChild(zoomInputBox);

    // Initial image size adjustment
    updateImageSize(slider.value + 'px', initialPreviewValue);
    adjustZoomInputBoxPosition(); // Adjust the position initially

    // Function to update image size based on the slider value
function updateImageSize(size, isPreview) {
    // Get all anchor elements containing images on the webpage
    var imageLinks = document.querySelectorAll('.item-list a[href$=".jpg"], .item-list a[href$=".jpeg"], .item-list a[href$=".png"], .item-list a[href$=".gif"]');

    // Get the current path without the domain
    var currentPath = window.location.pathname;

    // Adjust currentPath to include "/preview/" directly after the domain
    currentPath = currentPath.replace(/\/files/, '/preview');

    // Loop through each image link and set the new size and source
    imageLinks.forEach(function(link) {
        var img = link.querySelector('img');
        if (img) {
            img.style.width = size;
            img.style.height = 'auto';  // Maintain the aspect ratio
            if (isPreview) {
                // If preview is checked, construct the preview URL without the dot
                var href = link.getAttribute('href');
                var previewURL = currentPath + (href.startsWith('/') ? '' : '/') + href;
                console.log('Setting preview source:', previewURL);
                img.src = previewURL;
            } else {
                // If preview is not checked, set the image source to the original URL
                console.log('Setting original source:', link.href);
                img.src = link.href;
            }
        }
    });
}








    // Function to adjust the position of the zoom input box
    function adjustZoomInputBoxPosition() {
        zoomInputBox.style.left = (parseInt(slider.style.left) + slider.offsetWidth + 10) + 'px';
    }
})();