User:Kritixilithos/monobook.js

// Chinese dialectal maps, part of gadget zhDialMap // designed by User:Suzukaze-c, originally posted at User:Suzukaze-c/zhDialMap.js // discussion: Module talk:User:Suzukaze-c/zh-dial-map

// ideas: // * group locations in the popup by lect

'use strict';

mw.loader.load('oojs-ui-core');

var classes = { dotHover: 'dial-map__dot--hover', dotSuperHover: 'dial-map__dot--superHover', legendRowHover: 'dial-map__legend-row--hover', };

function link(data) { var element; if (data.type == 'lang') { element = $(' '); } else if (data.type == 'link') { element = $('').attr('href', '/wiki/' + data.word + '#Arabic'); }	element/*.addClass('Hani')*/.attr('lang', 'ar').text(data.alt ? data.alt : data.word); if (data.red) element.addClass('new');

return element; }

function updateGroupSelection { var groupSelectionStyle = $("style.dial-map__groupSelectionStyle"); var groupInputChecked = $("input.dial-map__groupItem:checked"); var checkedGroups = [];

for (var i = 0; i < groupInputChecked.length; i++) { checkedGroups.push($(groupInputChecked[i]).attr('data-group')); }

if (checkedGroups.length === 0) { groupSelectionStyle.text(''); } else { var checkedGroupsNotSelector = ''; for (var i = 0; i < checkedGroups.length; i++) { checkedGroupsNotSelector += ':not([data-group="' + checkedGroups[i] + '"])'; }

groupSelectionStyle.text('.dial-map__dot' + checkedGroupsNotSelector + ' { display: none; }'); } }

function main { var dots; var redLinks = {}; // Record which pages don't exist (for the "other terms" popup links) var wordLocations = {}; // Initialize object that will contain locations for each dialectal word. Cache instead of regenerating all the time var otherTerms = []; var activePopup; var popups = [];

var mapImg = $('.dial-map__map img');

// take original pixel dimensions from the image // and give them to the image and the container holding the image $('.dial-map__map, .dial-map__map img') .css('width', mapImg.attr('width') + 'em') .css('height', mapImg.attr('height') + 'em') ;

// change image source to svg // and remove dimension attributes mapImg .removeAttr('width') .removeAttr('height')

.attr('src', function(index, attr) {			return attr.replace('1200px', '2400px');		}) .removeAttr('srcset')

/*		.attr('src', function(index, attr) {		return attr.replace('thumb/', '').replace(/(svg).+/, '$1')		}) .removeAttr('srcset') */	;

$('.dial-map__legend-row').on("touchstart mouseenter",		function {			var word = $(this).data('word'); // Get the dialectal word for the active legend row			var tr = $(this).data('tr');			var isOther = (word == 'other'); // Is our row the "other terms" row?			var wordtr = word + (tr&&"/"+tr);

if (isOther) { dots = $('.dial-map__dot-other'); // Get all grey dots } else if (tr) { dots = $('.dial-map__dot[data-word=' + word + '][data-tr='+tr+']'); // Get every dot corresponding to our word } else { dots = $('.dial-map__dot[data-word=' + word + ']'); }

$(this).addClass(classes.legendRowHover); // Add hovered class to the legend row dots.addClass(classes.dotHover); // Add hovered class to every corresponding dot

if (! wordLocations[wordtr]) { wordLocations[wordtr] = [];

dots.each(					function(index) {						var location = [$(this).data('location-en'), $(this).data('location-ar'), $(this).data('group')]; // Get location of dot						wordLocations[wordtr].push(location);

if (isOther) { var otherWord = $(this).data('word'); // For "other terms", collect the terms too otherTerms.push(otherWord);

if (! redLinks[otherWord]) redLinks[otherWord] = $(this).parent.hasClass('new'); //console.log(otherWord, redLinks[otherWord]); }					}				);				//console.log(word, wordLocations[word]);				//if (isOther) { console.log(otherTerms) };			}

if (! popups[wordtr]) { var locationsList = $('').addClass('dial-map__legend-row-locations'); // Popup contents

$.each(wordLocations[wordtr], function(index, value) { // Do stuff related to each location recorded for this word					if (isOther) word = otherTerms[index];

var locationEn = value[0], locationAr = value[1], group = value[2]; var listItem = $('');

listItem.append(link({type: 'lang', word: locationAr + groupAR[group]})).append(' (' + locationEn + ' ' + group + ')'); // FIXME: this feels really hacky if (isOther) listItem.append(': ').append(link({type: 'link', word: otherTerms[index], red: redLinks[word]})); // FIXME: this too

var locationDot = $('[data-location-ar=' + locationAr + '][data-word=' + word + ']'); // Find the dot for this word at this location //console.log('[data-location-ar=' + locationAr + '][data-word=' + word + ']', locationDot); listItem.hover(						function {							locationDot.addClass(classes.dotSuperHover);						},						function {							locationDot.removeClass(classes.dotSuperHover);						}					);

listItem.appendTo(locationsList); });

popups[wordtr] = new OO.ui.PopupWidget({					$content: locationsList,					$container: $('.dial-map__container'),				});

$(this).append(popups[wordtr].$element); // Add cool popup to DOM }

popups[wordtr].toggle(true); // Make the popup visible activePopup = popups[wordtr]; }	);

$('.dial-map__legend-row').on("touchend mouseleave",		function {			$(this).removeClass(classes.legendRowHover); // Remove hovered class from legend row			dots.removeClass(classes.dotHover); // Remove hovered class from every dot that corresponds to that word			activePopup.toggle(false); // Hide popup		}	); }

if ($('.dial-map__map').length) { main; }