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 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==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();
});