InterfaceLIFT | Autoselect Largest Wallpaper

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

当前为 2017-06-11 提交的版本,查看 最新版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name            InterfaceLIFT | Autoselect Largest Wallpaper
// @version         3.6.0
// @description     Adds a button to instantly download the optimum (largest) wallpaper image size, calculated on the base of megapixel 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 interfaceliftBaseurl = 'http://interfacelift.com/wallpaper/7yz4ma1/';


/**
 * @param {String} dimensionsString - Image dimensions as string (e.g. '800x600', '1920x1080')
 * @returns {Number} Image size in megapixels
 */
let calculateMegapixels = (dimensionsString) => {
    let width = dimensionsString.match(/\d+/g)[0];
    let height = dimensionsString.match(/\d+/g)[1];
    let megapixels = ((width*height)/1048576).toFixed(2);
    return megapixels;
};

/**
 * @typedef {Object} OptimumImageObject
 * @property {String} dimensions - Image dimensions as string
 * @property {Number} megapixels - Image size in megapixels
 * @property {String} url - Image url
 */

/**
 * @param {String} imageId - Wallpaper id
 * @param {String} imageName - Wallpaper name
 * @param {HTMLSelectElement} elementDropdown - Dropdown resolution selector
 * @returns {OptimumImageObject} Optimum (largest) image
 */
let getOptimumImageObject = (imageId, imageName, elementDropdown) => {
    let dimensionsList = [];
    
    let dimensionMax;
    let megapixelsMax;
    let urlMax;

    const imageIdPadded = imageId.length < 5 ? `0${imageId}` : `${imageId}`;
    const imageNameClean = imageName.replace(/_/g, '');

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

    dimensionMax = dimensionsList[0];
    megapixelsMax = calculateMegapixels(dimensionMax);
    urlMax = `${interfaceliftBaseurl}${imageIdPadded}_${imageNameClean}_${dimensionMax}.jpg`;

    return {
        dimensions: dimensionMax,
        megapixels: megapixelsMax,
        url: urlMax
    };
};

/**
 * Adds largest resolution download controls
 */
let addDownloadControls = () => {
    let itemList = document.querySelectorAll('#wallpaper .item');

    itemList.forEach((elem) => {
        // Parse DOM for image name and id
        let elemPreview = elem.getElementsByClassName('preview')[0];
        let elemPreviewAnchor = elemPreview.getElementsByTagName('a')[0];
        let elemPreviewSelect = elem.getElementsByClassName('select')[0];
        let wallpaperUrl = elemPreviewAnchor.getAttribute('href');
        let imageId = wallpaperUrl.match(/\d+/)[0];
        let imageName = wallpaperUrl.replace(/.*\/|\.[^.]*$/g, '');

        // Calculate dimensions maxima
        const imageMaximum = getOptimumImageObject(imageId, imageName, elemPreviewSelect);
        const imageDimensions  = imageMaximum.dimensions;
        const imageMegapixels  = imageMaximum.megapixels;
        const imageUrl  = imageMaximum.url;

        // Set form value
        let elemForm = elem.getElementsByClassName('select')[0];
        elemForm.value = imageDimensions;

        // Add button for download
        let elemDownload = document.createElement('div');
        elemPreview.appendChild(elemDownload);
        elemDownload.style.height='28px';
        elemDownload.style.marginLeft='44px';
        elemDownload.style.backgroundColor='rgba(150,50,50,0.1)';
        elemDownload.classList.add('download');
        elemDownload.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; -webkit-font-smoothing: subpixel-antialiased;"><b>Max:</b> ${imageDimensions} (${imageMegapixels}MP)</span><div id="download_4113" style="display: inline-block; float: right;"><a download href="${imageUrl}"><img src="/img_NEW/button_download.png" style="filter: hue-rotate(169deg) saturate(400%);"></a></div>`;
       });
};


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