MediaWiki:Gadget-infoboxQty.js

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);