MediaWiki:Gadget-infoboxQty.js

 1 /**
 2  * Infobox quantity script
 3  * Adds a number input box next to specific numbers in tables
 4  * Primary use case: the price in Infobox Item
 5  * 
 6  * TODO: add infobox monster support (for what?)
 7  * 
 8  * USAGE:
 9  * <td><span class="infobox-quantity" data-val-each="100" data-value="1"><span class="infobox-quantity-replace">100</span> coins</span></td>
10  * 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)
11  * Inside that span, some part should be wrapped in another span with class=infobox-quantity-replace
12  *     this is the part that gets replaced with the result
13  * the result is input val * data-val-each
14  * The data-value attribute is used as the default value. If it is not specified, the input is initialised at '1'.
15  *
16  * this is safe for use with switch infoboxes - the input is placed outside (before) the outer span, inside the td
17  * [[MediaWiki:Common.js/switchInfobox2.js]] has an explicit exception to work with this and this only
18  *     (that is, $("input+span"), with the entirety of the span being replaced on a switch)
19  * 
20  * 
21  * originally based on [[User:Joeytje50/monstercalc.js]]
22  */ 
23 $(function () {
24 	/**
25 	* Detects support for <input type="number">
26 	* * @source http://diveintohtml5.info/detect.html#input-types
27 	*/
28 	var input_width = (function () {
29 		var i = document.createElement('input');
30 		i.setAttribute('type', 'number');
31 		return i.type !== 'text';
32 	})() ? '65px' : '50px';
33 	
34 	// Delegated event so it works for any new inputs that get generated later on.
35 	$('body').on('keyup click change mousewheel', 'input.QtyCalc', function (event) {
36 		var warn = '',
37 		warn2 = '',
38 		val = 1,
39 		$this = $(this),
40 		$ifbq = $(event.currentTarget).parent(),
41 		$rep = $ifbq.find('span.infobox-quantity-replace'),
42 		each = $ifbq.attr('data-val-each'),
43 		formula = $ifbq.attr('data-formula');
44 		// check if nonnumeric entered (generally if type=number not supported)
45 		// if so, setup warnings
46 		if ($this.val().search(/[^0-9]/g) != -1) {
47 			warn = '<abbr title="non-numeric characters are ignored" class="explain">';
48 			warn2 = '</abbr>';
49 		}
50 		//sanitise val, parse to int
51 		val = parseInt($this.val().replace(/[^0-9]/g, ''));
52 		if (isNaN(val)) {
53 			val = 1; // invalid number -> just use 1
54 		}
55 		
56 		$rep.html(warn + rswiki.addCommas(each * val) + warn2);
57 	});
58 	
59 	/**
60 	* generic one-value calc
61 	* compatible with most (switch) infoboxes made with [[Module:Infobox]]
62 	* Takes an argument `el` which must be a selector for the parent element, or the element itself.
63 	*/
64 	rswiki.initQtyBox = function(el) {
65 		$(el).find('td > span.infobox-quantity').not(':has(input)').each(function(i,e){
66 			var $self = $(e);
67 			var $input = $('<input>')
68 				.attr({
69 					id: 'QtyCalc'+i,
70 					class: 'QtyCalc',
71 					type: 'number',
72 					value: $self.data('value') || '1',
73 					maxlength: '10',
74 					min: '0',
75 					max: '9999999999',
76 				})
77 				.css({
78 					width: input_width,
79 					'margin-right': '0.25em',
80 				})
81 				.prependTo($self)
82 				.trigger('change');
83 		});
84 	};
85 
86 	// init boxes in on the whole page
87 	rswiki.initQtyBox('body');
88 })