☰

InterfaceLIFT | Autoselect Largest Wallpaper

Adds a button to instantly download the optimum (largest) wallpaper image size, calculated on the base of megapixels total.

当前为 2017-09-07 提交的版本，查看 最新版本。

// ==UserScript==
// @name            InterfaceLIFT | Autoselect Largest Wallpaper
// @version         4.1.0
// @description     Adds a button to instantly download the optimum (largest) wallpaper image size, calculated on the base of megapixels total.
// @namespace       https://gist.github.com/sidneys
// @author          sidneys
// @icon            https://InterfaceLIFT.com/favicon.ico
// @include         http*://InterfaceLIFT.com/wallpaper/*
// @grant           GM_addStyle
// @require         https://code.jquery.com/jquery-latest.min.js
// @require         https://greasyfork.org/scripts/5392-waitforkeyelements/code/WaitForKeyElements.js?version=19641
// @run-at          document-end
// ==/UserScript==

/**
 * @default
 * @constant
 */
const debugMode = false;

/**
 * Logger
 */
const logger = {
    debug() {
        if (!debugMode) { return; }

        const color = 'rgb(0, 0, 200)';

        console.info.call(this, `%c${GM_info.script.name} %c${Array.from(arguments).join(' ')}`, `font-weight: 600; color: ${color};`, `font-weight: 400; color: ${color};`);
    },
    info() {
        const color = 'rgb(0, 150, 0)';

        console.info.call(this, `%c${GM_info.script.name} %c${Array.from(arguments).join(' ')}`, `font-weight: 600; color: ${color};`, `font-weight: 400; color: ${color};`);
    }
};


/**
 * @default
 * @constant
 */
const InterfaceLIFTBaseurl = 'http://InterfaceLIFT.com/wallpaper/7yz4ma1/';


/**
 * Convert image dimensions to megapixels
 * @param {String} dimensions - Image dimensions (e.g. '1920x1080')
 * @returns {Number} Image megapixels (e.g. 2.07)
 */
let convertDimensionsToMegapixels = (dimensions) => {
    logger.debug('convertDimensionsToMegapixels');

    let width = dimensions.match(/\d+/g)[0];
    let height = dimensions.match(/\d+/g)[1];

    return parseFloat(((width * height) / 1048576).toFixed(2));
};


/**
 * Get wallpaper id
 * @param {String} url - InterfaceLIFT wallpaper url
 * @returns {String} InterfaceLIFT wallpaper id
 */
let getWallpaperId = (url) => {
    logger.debug('getWallpaperId');

    const wallpaperId = url.match(/\d+/)[0];

    return wallpaperId.length < 5 ? `0${wallpaperId}` : `${wallpaperId}`;
};

/**
 * Get wallpaper name
 * @param {String} url - InterfaceLIFT wallpaper url
 * @returns {String} InterfaceLIFT wallpaper name
 */
let getWallpaperName = (url) => {
    logger.debug('getWallpaperName');

    return url.replace(/.*\/|\.[^.]*$/g, '');
};

/**
 * Get wallpaper url
 * @param {String} id - InterfaceLIFT wallpaper id
 * @param {String} name - InterfaceLIFT wallpaper name
 * @param {String} dimensions - Image dimensions (e.g. '1920x1080')
 * @returns {String} InterfaceLIFT wallpaper name
 */
let getWallpaperUrl = (id, name, dimensions) => {
    logger.debug('getWallpaperName');

    const wallpaperNameClean = name.replace(/_/g, '');

    return `${InterfaceLIFTBaseurl}${id}_${wallpaperNameClean}_${dimensions}.jpg`;
};


/**
 * Parse optimum image dimensions from InterfaceLIFT selector
 * @param {HTMLElement} selectElement - InterfaceLIFT resolution selector dropdown
 * @returns {String} Image dimensions (e.g. '1920x1080')
 */
let parseOptimumDimensions = (selectElement) => {
    logger.debug('parseOptimumDimensions');

    const dimensionsList = [];

    const elementOptionList = selectElement.querySelectorAll('optgroup');

    elementOptionList.forEach((elem) => {
        dimensionsList.push(elem.querySelector('option').value);
        dimensionsList.sort((a, b) => {
            const megapixelsA = convertDimensionsToMegapixels(a);
            const megapixelsB = convertDimensionsToMegapixels(b);
            if (megapixelsA > megapixelsB) { return -1; }
            if (megapixelsA < megapixelsB) { return 1; }
            return 0;
        });
    });

    logger.debug('dimensionsList', dimensionsList);

    return dimensionsList[0];
};

/**
 * Adds largest resolution download controls
 */
let addDownloadControls = () => {
    logger.debug('addDownloadControls');

    // Get wallpaper previews
    let itemList = document.querySelectorAll('#wallpaper .item .preview');

    // Extend wallpaper previews
    itemList.forEach((element) => {
        // Get id, name
        const defaultWallpaperUrl = element.querySelector('a').getAttribute('href');
        const wallpaperId = getWallpaperId(defaultWallpaperUrl);
        const wallpaperName = getWallpaperName(defaultWallpaperUrl);

        // Get url
        const selectElement = element.querySelector('select');

        // Get optimal wallpaper data
        const optimumDimensions = parseOptimumDimensions(selectElement);
        const optimumMegapixels = convertDimensionsToMegapixels(optimumDimensions);
        const optimumUrl = getWallpaperUrl(wallpaperId, wallpaperName, optimumDimensions);

        // Form: Select optimal image
        selectElement.value = optimumDimensions;

        // Button: Add url to optimal image
        const buttonElement = document.createElement('div');
        element.appendChild(buttonElement);
        buttonElement.style.height = '28px';
        buttonElement.style.marginLeft = '44px';
        buttonElement.style.backgroundColor = 'rgba(150, 50, 50, 0.05)';
        buttonElement.classList.add('download');
        buttonElement.innerHTML = `
            <span style="display: inline-block; margin: 4px 8px; width: 145px; max-width: 145px; text-align: left; font-family: Arial, sans-serif; font-size: 11px; white-space: nowrap;">
                <b>${optimumDimensions}</b> (${optimumMegapixels} MP)
            </span>
            <div id="download_4113" style="display: inline-block; float: right;">
                <a download href="${optimumUrl}">
                    <img src="/img_NEW/button_download.png" style="filter: hue-rotate(169deg) saturate(400%);">
                </a>
            </div>
        `;

        // Status
        logger.info(wallpaperName, optimumUrl, optimumDimensions);
    });
};


/**
 * Init
 */
let init = () => {
    logger.debug('init');

    waitForKeyElements('#wallpaper', () => {
        addDownloadControls();
    });
};


/**
 * @listens window:Event#load
 */
window.addEventListener('load', () => {
    logger.debug('window#load');

    init();
});