Bureaucrats, editor, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
47,390
edits
MediaWiki:Gadget-musicMap-core.js: Difference between revisions
no edit summary
(Created page with "→Music map * Generates an interactive music map that has toggleable polygons on it. Can be used as a 'checklist' to track music track unlock progression. * See [[Map:Music tracks]]: var MM = {}; MM.touch = false; MM.getUnlocked = function() { var ls = localStorage.getItem('musicMap-'+mw.config.get('wgPageName')); if (!ls) return []; // map characters back to numbers and convert to var bitstr = Array.prototype.map.call(ls, function(x) { // go through each cha...") |
No edit summary |
||
Line 1:
"use strict";
/* Music map
* Generates an interactive music map that has toggleable polygons on it. Can be used as a 'checklist' to track music track unlock progression.
Line 6 ⟶ 8:
var MM = {};
MM.touch = false;
MM.getUnlocked = function () {
// go through each character in the string
return str.slice(-5); // the actual bits that were parsed, plus any leading zeroes if needed
// convert bitstring back into an array of bools
var bits = Array.prototype.map.call(bitstr, function (x) {
return parseInt(x);
});
return bits;
};
MM.saveUnlocked = function (arr) {
var bits = [];
for (var i = 0; i < arr.length; i++) bits[i] = arr[i] ? 1 : 0; // fill in empty array elements
var bitstr = bits.join(''); // array in bit representation
// Split up in chunks of 5 bits. The array length should be a multiple of 5 based on the musicMap function.
// Use 32-bit string, because toString(64) is not supported in plain JS.
var b32 = bitstr.match(/.{1,5}/g).map(function (x) {
return parseInt(x, 2).toString(32);
});
localStorage.setItem('musicMap-' + mw.config.get('wgPageName'), b32.join(''));
};
MM.arrIdx = function (arr, i) {
if (i < 0) {
return arr[arr.length + i];
} else {
return arr[i];
}
};
MM.toggleTrack = function (track, ids, state, $targets) {
if ($targets) {
$targets = $targets.add('.mw-kartographer-interactive');
} else {
$targets = $('.mw-kartographer-interactive');
}
if (state == undefined) {
state = MM.arrIdx(unlockedTracks, track) ? 0 : 1;
}
// update all maps when one map is clicked
$targets.each(function () {
for (var i in ids) {
var el = $(this).find('path.leaflet-interactive').eq(ids[i]);
if (state) el.addClass('unlocked');else el.removeClass('unlocked');
}
});
if (window.unlockedTracks) {
unlockedTracks[track] = state;
}
};
MM.unlockTrack = function (e) {
if (!e.ctrlKey && !e.metaKey && !(MM.touch && e.type == 'selectstart')) {
// not ctrl+click, AND not cmd+click, AND not a long press touch event
return; // neither ctrl+click nor longpress
}
var map = $(e.target).closest('.mw-kartographer-interactive').data('musicMap');
var i = $(e.target).index();
var el = $('#musicMap [value~="' + i + '"]');
MM.toggleTrack(parseInt(el.html()), el.val().split(' ').map(Number));
MM.saveUnlocked(unlockedTracks);
map.closePopup(); // close popups on current map if there were any that were open.
e.preventDefault();
e.stopPropagation();
return false;
};
MM.unlockAll = function (state) {
var btn = this;
btn.setDisabled(true);
// doing the track toggles ensures the button gets disabled properly before rendering the other DOM changes
setTimeout(function () {
$('#musicMap data').each(function () {
var track = parseInt(this.innerHTML);
var ids = this.value.split(' ').map(Number);
MM.toggleTrack(track, ids, state ? 1 : 0);
});
MM.saveUnlocked(unlockedTracks); // save once at the end
}, 1);
setTimeout(function () {
// prevent doubleclicking the button: disable for 3 seconds
btn.setDisabled(false);
}, 3000);
};
MM.musicMap = function (map) {
if ($('#musicMap').length == 0) return;
$target = $(map._container);
if ($target.data('musicMap')) return; // already added event handlers
$target.data('musicMap', map);
/* Local storage format:
* base32-encoded string
* All songs with an associated cache ID will be in the array at that position
* A gap to make this array's total length a multiple of 5 bits (since 2^5 = 32)
* A gap of 20 to prevent newly released songs from being marked as unlocked
* All N songs without a cache ID will be placed at the end, alphabetically sorted:
* with [length-1] being a, and [length-N] being z.
*/
var ls = MM.getUnlocked();
var unlocked = [],
idless = [];
$('#musicMap data').each(function () {
// rebuild local storage data based on the <data>, because the track list might have changed.
var track = parseInt(this.innerHTML);
var ids = this.value.split(' ').map(Number);
MM.toggleTrack(track, ids, 1, $target);
}
if (track >= 0) {
unlocked[track] = MM.arrIdx(ls, track) ? 1 : 0;
} else {
idless[-track - 1] = MM.arrIdx(ls, track) ? 1 : 0;
}
});
// gap of 5-(lengths%5) to make unlocked part a multiple of 5 bits (for base32enc). 20 empty slots as a spacer.
window.unlockedTracks = unlocked.concat(Array(5 - (unlocked.length + idless.length) % 5 + 20)).concat(idless);
MM.saveUnlocked(unlockedTracks);
$target.find('path').click(MM.unlockTrack).dblclick(function (e) {
if (e.ctrlKey || e.metaKey) {
// ctrl+dblclick already gets handled by the click handler; don't fullscreen etc.
e.preventDefault();
}
}).on('touchstart', function (e) {
// Handle long-press touch events to unlock tracks: https://stackoverflow.com/q/66546226/1256925
MM.touch = true;
}).on('touchend', function (e) {
MM.touch = false;
}).on('selectstart', MM.unlockTrack);
};
MM.playTrack = function (e) {
// This handler will trigger before the audioplayer.js event handler, because
// this handler is tied to the map container, and that handler is tied to body.
e.preventDefault();
var $clone = $(e.target).clone(); // make a copy to put back in the tooltip
var parent = e.target.parentElement; // where to insert the copy
$('#music-playlist .player').html(''); // remove previous player
$(e.target).appendTo('#music-playlist .player'); // move the song that will play to the play-box; audioplayer.js will replace this with <audio>.
$clone.appendTo(parent); // put the link back in the tooltip
};
MM.initMap = function (map, fullscreen) {
if (!$('#musicMap').length) return;
if (map instanceof Array) map = map[0];
// wait for this map to be ready and make it a musicmap
map.on('kartographerisready', function () {
MM.musicMap(this);
});
if (fullscreen === false) {
// make the fullscreen maps that may be created also turn into musicmaps
L.Map.addInitHook(function () {
MM.initMap(this, true);
});
}
if ($('#music-playlist .player').length == 0) {
$('#music-playlist').show().append('<div class="player">Click a link in a map tooltip to play that track.</div>');
$(map._container).on('click', 'a[href^="/w/File:"][href$=".ogg"]', MM.playTrack);
$(map._container).on('click', 'a:not([href^="/w/File:"][href$=".ogg"])', function () {
this.target = '_blank'; // open song links in new tab to prevent having to reload the map
});
}
if ($('.musicMap-buttons').length == 0) {
var unlockbtn = new OO.ui.ButtonWidget({
flags: ['progressive'],
label: 'Unlock all tracks'
});
unlockbtn.on('click', MM.unlockAll.bind(unlockbtn, 1));
var lockbtn = new OO.ui.ButtonWidget({
flags: ['destructive'],
label: 'Lock all tracks'
});
lockbtn.on('click', MM.unlockAll.bind(lockbtn, 0));
// place in a wrapper and add to body
$('<div>').addClass('musicMap-buttons').append(unlockbtn.$element, lockbtn.$element).appendTo('#musicMap-info');
}
return;
};
// hook init to maps loading
| |||