Adds a button that views the gemstones in their real life measurements

bluenile-lifesize-gem.js

// ==UserScript==
// @name         Bluenile view gem in real size.
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds a button that resizes the gem imagery to the approximate measurement of the gem.
// @author       anevins12
// @match        https://www.bluenile.com/uk/build-your-own-ring/*
// @icon         https://www.google.com/s2/favicons?domain=bluenile.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const $originalMeasurementValues = jQuery('.measurements-column-1');

    if ($originalMeasurementValues.length) {
        const unit = 'mm';
        const values = $originalMeasurementValues.text().replace(' mm', '').split(' x ');
        const $trigger = jQuery('<button data-js-view-in-life-size>View in life size</button>');
        const canvasPadding = 24; // Spacing around the diamond in the image.
        const $controls = jQuery('.image-player-controls');

        $trigger.on('click', function() {
            jQuery('.image-player-container, img.unzoomed').css({
                'width': `calc(${values[0]}mm + ${canvasPadding}px)`,
                'height': `calc(${values[1]}mm + ${canvasPadding}px)`,
                'overflow': 'visible',
            });
            $controls.css({
                'height': 'auto',
                'left': 'auto',
                'right': '-200%',
            });
            jQuery('.icon-component', $controls).css('width', '12px');
        });

        jQuery('.add-remove-heart-container').append($trigger);
    }

    /**
     * Custom function that calculates the percent of a number.
     *
     * @param float percent The percent that you want to get.
     * @param float|int num The number that you want to calculate the percent of.
     * @returns {Number}
     */
    function calculatePercent(percent, num){
        return (percent / 100) * num;
    }
})();