Skip to content

Instantly share code, notes, and snippets.

@anevins12
Last active June 14, 2021 16:15
Show Gist options
  • Save anevins12/620d29bc9679a07000c2c819f1f36232 to your computer and use it in GitHub Desktop.
Save anevins12/620d29bc9679a07000c2c819f1f36232 to your computer and use it in GitHub Desktop.
Adds a button that views the gemstones in their real life measurements
// ==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;
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment