MediaWiki:Gadget-infoboxQty.js
Revision as of 08:11, 16 February 2022 by Soulgazer (talk | contribs) (Created page with "/** * Infobox quantity script * Adds a number input box next to specific numbers in tables * Primary use case: the price in Infobox Item * * TODO: add infobox monster support (for what?) * * USAGE: * <td><span class="infobox-quantity" data-val-each="100" data-value="1"><span class="infobox-quantity-replace">100</span> coins</span></td> * Everything inside the td should be wrapped in the outer span, which has class=infobox-quantity and attr data-val-each=(value...")
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/** * Infobox quantity script * Adds a number input box next to specific numbers in tables * Primary use case: the price in Infobox Item * * TODO: add infobox monster support (for what?) * * USAGE: * <td><span class="infobox-quantity" data-val-each="100" data-value="1"><span class="infobox-quantity-replace">100</span> coins</span></td> * Everything inside the td should be wrapped in the outer span, which has class=infobox-quantity and attr data-val-each=(value of each item) * Inside that span, some part should be wrapped in another span with class=infobox-quantity-replace * this is the part that gets replaced with the result * the result is input val * data-val-each * The data-value attribute is used as the default value. If it is not specified, the input is initialised at '1'. * * this is safe for use with switch infoboxes - the input is placed outside (before) the outer span, inside the td * [[MediaWiki:Common.js/switchInfobox2.js]] has an explicit exception to work with this and this only * (that is, $("input+span"), with the entirety of the span being replaced on a switch) * * * originally based on [[User:Joeytje50/monstercalc.js]] */ (function ($, rswiki) { /** * Detects support for <input type="number"> * * @source http://diveintohtml5.info/detect.html#input-types */ var input_width = (function () { var i = document.createElement('input'); i.setAttribute('type', 'number'); return i.type !== 'text'; })() ? '65px' : '50px'; // Delegated event so it works for any new inputs that get generated later on. $('body').on('keyup click change mousewheel', 'input.QtyCalc', function (event) { var warn = '', warn2 = '', val = 1, $this = $(this), $ifbq = $(event.currentTarget).parent(), $rep = $ifbq.find('span.infobox-quantity-replace'), each = $ifbq.attr('data-val-each'), formula = $ifbq.attr('data-formula'); // check if nonnumeric entered (generally if type=number not supported) // if so, setup warnings if ($this.val().search(/[^0-9]/g) != -1) { warn = '<abbr title="non-numeric characters are ignored" class="explain">'; warn2 = '</abbr>'; } //sanitise val, parse to int val = parseInt($this.val().replace(/[^0-9]/g, '')); if (isNaN(val)) { val = 1; // invalid number -> just use 1 } $rep.html(warn + rswiki.addCommas(each * val) + warn2); }); /** * generic one-value calc * compatible with most (switch) infoboxes made with [[Module:Infobox]] * Takes an argument `el` which must be a selector for the parent element, or the element itself. */ rswiki.initQtyBox = function(el) { $(el).find('td > span.infobox-quantity').not(':has(input)').each(function(i,e){ var $self = $(e); var $input = $('<input>') .attr({ id: 'QtyCalc'+i, class: 'QtyCalc', type: 'number', value: $self.data('value') || '1', maxlength: '10', min: '0', max: '9999999999', }) .css({ width: input_width, 'margin-right': '2px', }) .prependTo($self) .trigger('change'); }); }; // init boxes in on the whole page $(function() { rswiki.initQtyBox('body'); }); })(jQuery, rswiki);