MediaWiki:Gadget-externalsearch.js

/**
 * Add Google Search to the simple MediaWiki Search bar per simple toggle arrow.
 *
 * Created by [[User:Perhelion]] 2018-09, similar to [[d:User:Bene*]]/externalsearch.js 2013-06
 * Dependencies: mediawiki.language
 */
/* eslint indent:["error","tab",{"outerIIFEBody":0}] */
/* global mediaWiki, jQuery */

(function (mw, $) {
'use strict';

var i18nData = {
		en: {
			title: 'Google for Wiki',
			description: 'Use the Google Search for ',
			placeholder: ' Google', // append
			// default writing directionality
			dir: 'ltr',
			left: 'left',
			right: 'right'
		},
		de: {
			title: 'Google für Wiki',
			description: 'Verwende die Google-Suche für ',
			placeholder: ' mit Google'
		},
		es: {
			title: 'Google para wiki',
			description: 'Use la búsqueda de Google para ',
			placeholder: ' con Google'
		},
		fr: {
			title: 'Google pour Wiki',
			description: 'Utilisez Google Search pour ',
			placeholder: ' avec Google'
		},
		it: {
			title: 'Google per Wiki',
			description: 'Utilizza la Ricerca Google per ',
			placeholder: ' con Google'
		},
		pl: {
			title: 'Google dla Wiki',
			description: 'Użyj wyszukiwarki Google dla ',
			placeholder: ' z Google'
		},
		ru: {
			title: 'Google для Wiki'
		}
		// TODO: extend translations here
	}, i18nLang = mw.config.get('wgUserLanguage'),
	// cologneblue has no ids
	isGoBtn = ['vector', 'minerva'].indexOf(mw.config.get('skin')) < 0, // 'timeless', 'monobook', 'modern'
	checked = false,
	options = {},
	arrowDown = 'url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 fill=%22%2354595d%22 %3E%3Cpath d=%22M1 4h10L6 9 1 4%22/%3E%3C/svg%3E")',
	color = / stroke=%22(?:%23|#)?([\d\w]+)%22/,
	$search,
	$searchG,
	searchIcon,
	$searchButton,
	$toggleArrow = {
		'cursor': 'pointer',
		'position': 'absolute',
		'margin-top': '.19em',
		'width': '1em',
		'height': '1em',
		'background-repeat': 'no-repeat',
		'background-position': 'center',
		'backgroundImage': arrowDown
	};

if ($('body').is('.rtl') || isGoBtn) {
	i18nData.en.dir = 'rtl';
	i18nData.en.left = 'right';
	i18nData.en.right = 'left';
}

/**
* @param {string} key - of the message
* @return {string} the localized version of the message.
*/
function i18n(key) {
	return (i18nData[i18nLang].hasOwnProperty(key) ?
		i18nData[i18nLang][key] :
		i18nData.en[key]);
}

function toggle() {
	var g = 1, o;
	if ((checked = !checked)) {
		g = 2;
		$search.hide();
		$searchG.show().focus();
		setTimeout(function () {
			options.fieldset[0].css({
				borderColor: '#47E',
				boxShadow: '',
				transition: 'all 0.3s' });
		}, 40);
	} else {
		$searchG.hide();
		$search.show().focus();
	}
	for (o in options) {
		o = options[o];
		var attrs = o[g];
		if (attrs.hasOwnProperty('style')) {
			for (var a in attrs) {
				if (a === 'style') o[0].css(attrs[a]);
				else o[0].attr(a, attrs[a]);
			}
		} else { o[0].attr(attrs); }
	}
	// Theoretically searchIcon should not change, but it does!?!
	if (searchIcon)
		options.searchButton[0].css({ backgroundImage: searchIcon.replace(color[g - 1], color[g - 2]) });
}

function init() {
	var $searchform = $('#searchform'),
		$fieldset = $('#simpleSearch, #searchBody'),
		$simpleSearch = $fieldset.find('*[name=title]'),
		arrowRTL = { ltr: 'M8 11V1L3 6l5 5', rtl: 'M4 1v10l5-5-5-5' },
		hoverColor = function (evt) {
			var e = $(evt.target),
				doColor = ['000%22', color[checked ? 0 : 1] + '%22'];
			if (evt.type === 'mouseenter') doColor[1] = doColor.shift(); // reverse
			e.css({ backgroundImage: String.prototype.replace.apply(e.css('backgroundImage'), doColor) });
		};
	arrowRTL = arrowDown
		.replace(/M1 4h10L6 9 1 4/, arrowRTL[i18nData.en.dir])
		.replace(/%2354595d/, '%2347E');

	searchIcon = $searchButton.css('backgroundImage');
	if (!searchIcon || searchIcon === 'none')
		searchIcon = '';
	color = ['47E', (searchIcon && (color = searchIcon.match(color)) && color[1]) || '54595d'];
	$searchG = $search.clone();
	$searchG.attr({
		name: 'q',
		placeholder: $.trim($search.attr('placeholder').replace(mw.config.get('wgSiteName'), '')) + i18n('placeholder')
	}).insertAfter($search.hide());

	options = {
		searchButton: [$searchButton, {
			title: $searchButton.attr('title'),
			name: $searchButton.attr('name')
		}, {
			title: i18n('description') + mw.config.get('wgSiteName'),
			name: ''
		}],
		searchform: [$searchform, {
			action: mw.config.get('wgScript'), target: '' }, // $searchform.attr( 'action' )
		{ action: '//www.google.com/search', target: '_blank' }],
		fieldset: [$fieldset, { style: { borderColor: $fieldset.css('borderColor'), transition: '' } }, { style: { borderColor: '#E43', boxShadow: '0 0 8px #FB1' } }],
		simpleSearch: [$simpleSearch, {
			name: 'title', // $simpleSearch.attr( 'name' )
			value: 'Special:Search' // $simpleSearch.val()
		}, {
			name: 'sitesearch',
			value: mw.config.get('wgServer').replace(/\/\//, '') + mw.config.get('wgArticlePath').replace(/\$1$/, '')
		}],
		toggleArrow: [$toggleArrow, { title: i18n('title'), style: { backgroundImage: arrowDown } }, { title: $search.attr('placeholder'), style: { backgroundImage: arrowRTL } }]
	};

	if (searchIcon)
		$searchButton.on('mouseenter mouseleave', hoverColor);
	$toggleArrow.on('mouseenter mouseleave', hoverColor);
}

$(function () {
	i18nLang = i18nLang.split('-')[0];
	if (!(i18nLang in i18nData)) {
		i18nLang = 'en';
		// Try better fallback
		var chain = mw.language.getFallbackLanguages();
		for (var i = chain.length - 1; i >= 0; i--) {
			if (chain[i] in i18nData)
				i18nLang = chain[i]; // no break as lower i is better
		}
	}
	$search = $('#searchInput');
	// Nothing to do
	if (!$search.length) return;

	if (isGoBtn) {
		isGoBtn = '.4em';
	} else {
		$search.css('width', '96%');
		isGoBtn = '1.1em';
	}
	$searchButton = $('#searchButton, #mw-searchButton').css(i18nData.en.right, 'auto');
	$toggleArrow[i18n('right')] = isGoBtn;
	$toggleArrow = $('<span>', {
		'id': 'toggleArrow',
		'class': 'mw-collapsible-arrow mw-collapsible-toggle-expanded', // has PNG fallback
		'title': i18n('title'),
		'mouseup': toggle
	}).css($toggleArrow).one('mousedown', init)
		.appendTo($search.parent());
});

}(mediaWiki, jQuery));