MediaWiki:Gadget-compare-core.js

/**
 * Adds links for compare popups
 * 
 * @author Quarenon
 * @author Ryan PM
 * @author Joeytje50
 * @author Cqm
 * @author JaydenKieran
 * 
 * @license GPLv3 <https://www.gnu.org/licenses/gpl-3.0.html>
 *
 * @todo try to find a standard img url domain to use
 * @todo re-center (vertical & horizontally) with new items added, or find a way to do it with pure CSS
 *	 might require overhaul to #overlay structure/styles
 */

'use strict';

var modalOpenedPrev = false;

var conf = mw.config.get( [
		'stylepath',
		'wgTitle'
	] ),

	self = {
		/**
		 * Inital loading method
		 */
		init: function () {
			self.buildModal();
			
			var $compare = $( '.cioCompareLink' ),
				$ibox = $( '.infobox-bonuses' );

			$compare.each( function () {
				var $this = $( this ),
					props = ( $this.attr( 'title' ) || '' ).split( '|' ),
					text = props[0] !== '' ? props[0] : 'Compare items',
					items = props.length >= 2 ? props.slice( 1 ) : [conf.wgTitle],
					$a = $( '<a>' )
						.attr( {
							href: '#',
							title: 'Compare this item with other items',
							'data-items': items.join( '|' )
						} )
						.text( text )
						.on( 'click', self.open );

					$this
						.empty()
						.append( $a )
						.parent()
							.show();
			} );

			$ibox.each( function () {
				var $this = $( this )
				// insert new row with compare link
				var button = new OO.ui.ButtonWidget( {
					label: 'Compare',
					title: 'Compare this item with other items',
					flags: 'primary'
				} );

				$this.after( button.$element
						.attr( {
							'data-items': conf.wgTitle
						})
						.on( 'click', self.open )
					);
			} );

		},

		/**
		 * Images
		 *
		 * These are functions to avoid us having to use .clone()
		 * and to avoid potential memory leaks
		 */
		img: {
			/**
			 * Delete image
			 *
			 * @return {jquery object}
			 */
			del: function () {
				return $( '<img>' )
					.attr( {
						src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23d33'%3E%3Cpath d='m4.3 2.9 12.8 12.8-1.4 1.4L2.9 4.3z'/%3E%3Cpath d='M17.1 4.3 4.3 17.1l-1.4-1.4L15.7 2.9z'/%3E%3C/g%3E%3C/svg%3E%0A",
						width: 16,
						height: 16,
						alt: 'Delete'
					} );
			},

			/**
			 * Loading image
			 *
			 * @return {jquery object}
			 */
			loading: function () {
				return $( '<img>' )
					.attr( {
						// .gif can't be converted to data: URI
						src: 'https://oldschool.runescape.wiki/images/2/23/Progress-wheel.gif?0a2fe',
						width: 16,
						height: 16,
						alt: '...'
					} );
			},

			/**
			 * Error image
			 *
			 * @return {jquery object}
			 */
			error: function () {
				return $( '<img>' )
					.attr( {
						src: "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23d33'%3E%3Cpath d='M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z'/%3E%3C/g%3E%3C/svg%3E%0A",
						width: 16,
						height: 16,
						alt: 'Error'
					} );
			}
		},

		/**
		 * Modal open method
		 *
		 * Callback to on click event
		 *
		 * @param e {jquery.event}
		 */
		open: function ( e ) {
			e.preventDefault();
			window.OOUIWindowManager.openWindow( 'compare' );
			
			if (!modalOpenedPrev) { // avoid init-ing
				modalOpenedPrev = true;
				var items = $( this ).attr( 'data-items' ).split( '|' );
				items.forEach( self.submit );
			}
		},

		/**
		 * Builds the compare modal
		 *
		 * @return {jquery object}
		 */
		buildModal: function () {
			var init = function (modal) {
			  modal.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );

				var button1 = new OO.ui.ButtonWidget( {
				  flags: [ 'destructive' ],
				  label: 'Cancel'
				} );
				var b1click = ('click', function(modal) {
					window.OOUIWindowManager.closeWindow(modal);
				});
				button1.on('click', b1click, [modal]);
				
				var button2 = new OO.ui.ButtonWidget( {
					label: 'Submit',
					flags: [ 'progressive' ],
				});
				button2.on('click', function() {
					self.submit();  
				});
				
				var input1 = new OO.ui.TextInputWidget({ id: 'cioItem' });
				input1.on('enter', function(){
					self.submit();
				});
				
				// Create OOUI JS fieldset
				var fieldset = new OO.ui.FieldsetLayout( { 
				  label: 'Comparing ' + conf.wgTitle,
				  id: 'cioCompare'
				} );
				
				fieldset.addItems( [ 
				  new OO.ui.ActionFieldLayout(
					  input1,
					  button2,
					  { label: 'Compare with', align: 'inline', notices: [new OO.ui.HtmlSnippet('<div id="cioStatus"></div>')] }
				  )
				] );

			  modal.content.$element.append($('<div>').append(fieldset.$element).append(
					$( '<table>' )
						.addClass( 'wikitable' )
						.attr( 'id', 'cioItems' )
						.append(
							$( '<thead>' )
								.append(
									$( '<tr>' )
										.append(
											$( '<th>' )
												.attr( 'rowspan', '2' )
												.text( 'Name' ),
											$( '<th>' )
												.attr( 'colspan', '5' )
												.text( 'Attack bonuses' ),
											$( '<th>' )
												.attr( 'colspan', '5' )
												.text( 'Defence bonuses' ),
											$( '<th>' )
												.attr( 'colspan', '4' )
												.text( 'Other bonuses' ),
											$( '<th>' )
												.attr( 'width', '30' )
												.text( 'Speed' ),
											$( '<th>' )
												.attr( 'width', '30' )
												.text( 'Weight' ),
											$( '<th>' )
												.attr( 'width', '30' )
												.text( 'GE' )
										),
									$( '<tr>' )
										.attr( 'height', '35' )
										.append(
											$( '<th>' )
												.attr( {
													class: 'cioIcon-stab',
													title: 'Stab bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-slash',
													title: 'Slash bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-crush',
													title: 'Crush bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-magic',
													title: 'Magic bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-ranged',
													title: 'Ranged bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-stab',
													title: 'Stab bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-slash',
													title: 'Slash bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-crush',
													title: 'Crush bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-magic',
													title: 'Magic bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-ranged',
													title: 'Ranged bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-strength',
													title: 'Strength bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-rangedstrength',
													title: 'Ranged Strength bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-magicdamage',
													title: 'Magic Damage bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-prayer',
													title: 'Prayer bonus',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-speed',
													title: 'Speed',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-weight',
													title: 'Weight (kg)',
													width: '35'
												} ),
											$( '<th>' )
												.attr( {
													class: 'cioIcon-price',
													title: 'Grand Exchange Price',
													width: '35'
												} )
										)
								),
							$( '<tbody>' )
								.append(
									$( '<tr>' )
										.attr( 'id', 'cioTotals' )
										// .addClass('table-bg-green')
								)
						),
					button1.$element
			  ));
			  modal.$body.append( modal.content.$element );
			};
			rs.createOOUIWindow('compare', 'Compare with other items', {size: 'larger', classes: ['rs-compare-modal', 'oo-ui-compare-width']}, init);
		},

		/**
		 * Initial callback for adding new items to the UI
		 *
		 * @param elem {string} (optional)
		 */
		submit: function ( elem ) {
			var item = elem || $( '#cioItem > input' ).val();

			$( '#cioStatus' )
				.empty()
				.attr( 'class', 'cioLoading' )
				.append(
					self.img.loading(),
					' Loading...'
				);

			// make sure first letter of item is uppercase
			// otherwise price data won't be found
			item = item.charAt( 0 ).toUpperCase() + item.slice( 1 );
			
			var mwApiResult, excg, main, excgData;

			( new mw.Api() )
				.get( {
					action: 'query',
					prop: 'revisions',
					titles: item + '|Module:Exchange/' + item,
					rvprop: 'content',
					redirects: ''
				} )
				.then( function (data) {
					mwApiResult = data;
					
					for ( var x in mwApiResult.query.pages ) {
						if ( mwApiResult.query.pages.hasOwnProperty( x ) ) {
							if ( x < 0 ) {
								// the page does not exist
								mw.log( mwApiResult.query.pages[x] );
								continue;
							} else if ( mwApiResult.query.pages[x].ns === 828 ) {
								excg = mwApiResult.query.pages[x];
							} else if ( mwApiResult.query.pages[x].ns === 0 ) {
								main = mwApiResult.query.pages[x];
							}
						}
					}
					
					if ( excg ) {
						excgData = rs.parseExchangeModule( excg.revisions[0]['*'] );
						excgData.itemId = excgData.itemId || excgData.itemid; // make this more robust?

						$.getJSON("https://api.weirdgloop.org/exchange/history/osrs/latest?id=" + excgData.itemId)
							.done( function (res) {
								self.done(main, res[excgData.itemId]);
							} )
							.fail( self.fail );
					} else {
						self.done(main, {});
					}
				} )
				.fail( self.fail );

			return false;
		},

		/**
		 * Success callback for `jQuery.ajax` promise
		 */
		done: function ( main, apiRes ) {
			var bonuses = [
					'astab',
					'aslash',
					'acrush',
					'amagic',
					'arange',
					'dstab',
					'dslash',
					'dcrush',
					'dmagic',
					'drange',
					'str',
					'rstr',
					'mdmg',
					'prayer',
					'speed'
				],
				main,
				x,
				title,
				content,
				bonusData,
				itemData,
				$tr;

			mw.log( main, apiRes );

			if ( !main ) {
				self.showError( 'Could not find that item.' );
				return;
			}

			title = main.title;
			content = main.revisions[0]['*'];
			bonusData = rs.parseTemplate( 'infobox bonuses', content );
			itemData = rs.parseTemplate( 'infobox item', content );

			if ( $.isEmptyObject( bonusData ) ) {
				self.showError( 'No bonus data found for the item.' );
				return;
			}

			$tr = $( '<tr>' )
				.append(
					$( '<th>' )
						.append(
							$( '<a>' )
								.attr( {
									href: '#',
									title: 'Remove this row'
								} )
								.on( 'click', function () {
									$( this ).closest( 'tr' ).fadeOut( 'slow', function () {
										$( this ).remove();
										self.calcTotals();
										window.OOUIWindowManager.getCurrentWindow().updateSize();
									} );

									return false;
								} )
								.append( self.img.del() ),
							'&nbsp;',
							$( '<a>' )
								.attr( {
									href: mw.util.getUrl( title ),
									title: title
								} )
								.text( title )
						)
				);

			bonuses.forEach( function ( el ) {
				// Use default version if defined, otherwise check if bonus has a version1
				var defaultVersion = $.isEmptyObject( itemData ) || (itemData.defver === undefined) ? '1' : itemData.defver;
				var versionSpecificBonus = bonusData[el + defaultVersion]; 
				$tr.append( self.format( versionSpecificBonus === undefined ? bonusData[el] : versionSpecificBonus ) );
			} );

			$tr.append( self.format( !$.isEmptyObject( itemData ) ? itemData.weight : null ) );
			$tr.append( self.format( !$.isEmptyObject( apiRes ) ? rs.addCommas( apiRes.price ) : null ) );

			$( '#cioTotals' ).before( $tr );

			self.calcTotals();
			$( '#cioStatus' ).empty();
			$( '#cioItem > input' ).val( '' );
			
			window.OOUIWindowManager.getCurrentWindow().updateSize();
		},

		/**
		 * Error callback for `jQuery.ajax` promise
		 */
		fail: function ( _, error ) {
			self.showError( 'Error: ' + error );
		},

		/**
		 * Outputs error to the UI
		 *
		 * @param str {string} Error to display
		 */
		showError: function ( str ) {
			$( '#cioStatus' )
				.empty()
				.attr( 'class', 'cioError' )
				.append(
					self.img.error(),
					' ' + str
				);
		},

		/**
		 * Formats each attribute's value and inserts it into a td cell
		 *
		 * @param str {string} Attribute value to format
		 *
		 * @return {jquery object} td cell to insert into the associated item's row
		 */
		format: function ( str ) {
			var $td = $( '<td>' ),
				first;

			// set `null` or `undefined` to an empty string
			/*jshint eqnull:true */
			if ( str == null ) {
			/* jshint eqnull:false */
				str = '';
			}

			// remove comments
			str = str.replace( /no|<!--.*?-->/gi, '' ).trim();

			// cache first character of `str`
			first = str.substring( 0, 1 );

			if ( !str ) {
				$td
					.addClass( 'cioEmpty' )
					.text( '--' );
			} else if ( /\d/.test( first ) ) {
				$td
					.addClass( 'cioPos' )
					.text( '+' + str );
			} else if ( first === '-' ) {
				$td
					.addClass( 'cioNeg' )
					.text( str );
			} else {
				$td
					.text( str );
			}

			return $td;
		},
		
		formatTotals: function (str, index) {
			var $td = $( '<td>' ),
				first;

			// set `null` or `undefined` to an empty string
			/*jshint eqnull:true */
			if ( str == null || str === "null" ) {
			/* jshint eqnull:false */
				str = '';
			}

			// remove comments
			str = str.replace( /no|<!--.*?-->/gi, '' ).trim();

			// cache first character of `str`
			first = str.substring( 0, 1 );
			
			// lower is better for speed and weight - reverse colors
			var lowerBetter = [14, 15].includes(index);

			if ( !str ) {
				$td
					.addClass( 'cioEmpty' )
					.text( '--' );
			} else if (parseFloat(str, 10) === 0) {
				$td
					.addClass( 'table-bg-yellow ')
					.text(str);
			} else if ( /\d/.test( first ) ) {
				$td
					.addClass( lowerBetter ? 'table-bg-red' : 'table-bg-green' )
					.text( '+' + str );
			} else if ( first === '-' ) {
				$td
					.addClass( lowerBetter ? 'table-bg-green' : 'table-bg-red' )
					.text( str );
			} else {
				$td.text( str );
			}
			
			// context dependent whether higher or lower price is better - just don't color it
			if (index === 16) {
				$td.removeClass("table-bg-green table-bg-yellow table-bg-red");
			}

			return $td;
		},

		/**
		 * Calculate bonus totals
		 */
		calcTotals: function () {
				// 19 0's, one for each attribute
			var totals = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				$totals = $( '#cioTotals' );
				
			// don't show totals row when not comparing 2 or more items
			if ($( '#cioItems tbody tr:not( #cioTotals )' ).length < 2) {
				$totals.empty();
				return;
			}
			
			$( '#cioItems tbody tr:not( #cioTotals ):first td' ).each(function(i) {
				var num = parseFloat($(this).text().replace(/,/g, ""));
				totals[i] = isNaN(num) ? null : num;
			});

			$( '#cioItems tbody tr:not( #cioTotals ):not(:first)' ).each( function () {
				$( this ).children( 'td' ).each( function ( i ) {
					if (totals[i] !== null) {
						var num = parseFloat($(this).text().replace(/,/g, ""));
						if (isNaN(num)) {
							totals[i] = null;
						}
						else {
							totals[i] -= num;
						}
					}
				} );
			} );

			$totals
				.empty()
				.append(
					$( '<th>' )
						.text( 'Diff' )
				);
				
			totals.forEach( function ( elem, index ) {
				$totals.append(
					self.formatTotals(
						// don't total speed
						// 14th index/column respectively
						// [14].indexOf( index ) > -1 ? null : rs.addCommas( elem )
						rs.addCommas(elem), index
					)
				);
			} );
		},
		checkSign: function (value) {
			return value === 0 ? true : (value > 0 ? true : false);
		}
	};

$(function(){mw.loader.using( ['mediawiki.util', 'mediawiki.api', 'ext.gadget.rsw-util'], self.init )});