☰

InterfaceLIFT | Auto-Select Largest Available Wallpaper Size

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

目前为 2017-05-26 提交的版本。查看 最新版本。

// ==UserScript==
// @name            InterfaceLIFT | Auto-Select Largest Available Wallpaper Size
// @description     Adds a button to instantly download the optimum (largest) wallpaper image size, calculated on the base of megapixel total.
// @version         3.5.6
// @namespace       sidneys
// @author          sidneys
// @source          https://gist.github.com/sidneys/32af71f8a3260cee2baef026837151a5
// @icon            https://interfacelift.com/favicon.ico
// @include         http*://interfacelift.com/wallpaper/*
// @grant           GM_addStyle
// @grant           GM_getValue
// @grant           GM_setValue
// @grant           GM_xmlhttpRequest
// @require         https://code.jquery.com/jquery-latest.min.js
// @require         https://greasyfork.org/scripts/5392-waitforkeyelements/code/WaitForKeyElements.js?version=19641
// ==/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();
});