MediaWiki:Common.js
From Wiki_Recipe
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */
/* Dynamically scale recipe ingredients */
$(document).ready(function() {
if ($('.recipe-scale-container').length) {
var multipliers = [0.5, 1, 2, 3, 4, 10];
var $controls = $('<div style="margin: 15px 0; padding: 10px; background: #f8f9fa; border: 1px solid #a2a9b1; border-radius: 4px;"><strong>Scale Recipe: </strong></div>');
multipliers.forEach(function(m) {
var $btn = $('<button>')
.text(m + 'x')
.css({
'margin-left': '8px',
'padding': '4px 12px',
'cursor': 'pointer',
'border': '1px solid #c8ccd1',
'background-color': '#fff',
'border-radius': '2px'
})
.on('click', function() {
$('.scalable-amount').each(function() {
var baseVal = parseFloat($(this).attr('data-base'));
if (!isNaN(baseVal)) {
// Calculate new value and round to max 2 decimal places
var newVal = +(Math.round((baseVal * m) + "e+2") + "e-2");
$(this).text(newVal);
}
});
});
$controls.append($btn);
});
$('.recipe-scale-container').append($controls);
}
});