Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
export function masonryGridPolyfill(selectors = '.masonry-group') {
const elements = [...document.querySelectorAll(selectors)];
// Bail if no elements where found
if (!elements.length)
return;
// Bail if masonry layouts are already supported by the browser
if (getComputedStyle(elements[0]).gridTemplateRows === 'masonry')
return;
for (const el of elements) {
const grid = {
el,
items: [...el.childNodes]
// Make sure the child nodes are element nodes
.filter(i => i.nodeType === 1),
gap: parseFloat(getComputedStyle(el).rowGap),
columns: 0,
count: 0,
};
renderGrid(grid);
const resizeObserver = new ResizeObserver(() => renderGrid(grid));
resizeObserver.observe(grid.el);
}
}
function renderGrid(grid) {
var _a;
const columns = getComputedStyle(grid.el).gridTemplateColumns.split(' ').length;
for (const column of grid.items) {
const { height } = column.getBoundingClientRect();
const h = height.toString();
if (h !== ((_a = column.dataset) === null || _a === void 0 ? void 0 : _a.h)) {
column.dataset.h = h;
grid.count++;
}
}
// Bail if the number of columns hasn't changed
if (grid.columns === columns && grid.count)
return;
// Update the number of columns
grid.columns = columns;
// Revert to initial positioning, no margin
for (const { style } of grid.items)
style.removeProperty('margin-top');
// If we have more than one column
if (grid.columns > 1) {
for (const [index, column] of grid.items.slice(columns).entries()) {
// Bottom edge of item above
const { bottom: prevBottom } = grid.items[index].getBoundingClientRect();
// Top edge of current item
const { top } = column.getBoundingClientRect();
column.style.marginTop = `${prevBottom + grid.gap - top}px`;
}
}
grid.count = 0;
}
mw.hook('wikipage.content').add(function($content) {
var $bandcamp = $content.find( '.bandcamp:not(.loaded)' );
if ( !$bandcamp.length ) return;
$bandcamp.each( function() {
var elem = $( this );
var width = elem.attr( 'data-width' ),
height = elem.attr( 'data-height' ),
data_src = elem.attr( 'data-src' );
if ( !/^https?:\/\/bandcamp\.com\//.test( data_src ) ) return;
elem.empty();
var is_px = [ true, true ]; // width, height
if ( /%/.test( width ) || !/\d+/.test( width ) ) is_px[ 0 ] = false;
if ( /%/.test( height ) ) is_px[ 1 ] = false;
var frame_width = parseFloat( width, 10 ) || 100;
frame_height = height ? ( parseFloat( height, 10 ) || 'auto' ) : '';
$( '<iframe />', {
style: 'border: 0',
width: frame_width + ( is_px[ 0 ] ? 'px' : '%' ),
height: frame_height + ( frame_height ? ( is_px[ 1 ] ? 'px': '%' ) : '' ),
src: data_src
}).appendTo( elem );
elem.addClass( 'loaded' );
});
});
if(!players) {
var players = document.querySelectorAll(".player-wrapper");
players.forEach((player)=>{
let btn = player.querySelector(".btn");
let record = player.querySelector(".record");
let toneArm = player.querySelector(".tone-arm");
let song = player.querySelector(".my-song");
let slider = player.querySelector(".slider");
btn.addEventListener("click", () => {
if (record.classList.contains("on")) {
record.classList.remove("on");
toneArm.classList.remove("play");
song.pause();
} else {
record.classList.add("on");
toneArm.classList.add("play");
setTimeout(() => {
song.play();
}, 1000);
}
});
slider.addEventListener("input", (e) => {
song.volume = Number(e.target.value);
});
})
}
/**
* Name: DataTables.js
* Author: KockaAdmiralac <wikia@kocka.tech>
* Description: Loads CSS and JavaScript from https://datatables.net and
* initializes all tables with the `datatable` class as data tables
*/
(function($, mw) {
'use strict';
var initialized = false, queue = [];
function process($content) {
$content.find('.datatable:not(.datatable-loaded)').each(function() {
var $table = $(this).addClass('datatable-loaded'),
$tableHeader = $('<thead>');
$table.prepend($tableHeader);
$table.find('> tbody > tr').first().appendTo($tableHeader);
$table.DataTable( {
layout: {
top1: 'searchPanes',
},
searchPanes: {
cascadePanes: true,
initCollapsed: true
},
columnDefs: [
{
targets: [0, 1, 2, 3, 4, 5],
className: 'dt-nowrap'
},
{
searchPanes: {
show: true
},
targets: [6]
}
]
});
});
}
function initialize($content) {
if (initialized) {
process($content);
} else {
queue.push($content);
}
}
mw.loader.load('https://cdn.datatables.net/v/dt/dt-2.0.0/r-3.0.0/sp-2.3.0/sl-2.0.0/datatables.min.css', 'text/css');
mw.loader.getScript('https://cdn.datatables.net/v/dt/dt-2.0.0/r-3.0.0/sp-2.3.0/sl-2.0.0/datatables.min.js').then(function() {
initialized = true;
queue.forEach(process);
});
mw.hook('wikipage.content').add(initialize);
mw.hook('datatables.loaded').fire();
})(jQuery, mediaWiki);
const slider = document.querySelector(".cards");
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener("pointerdown", (e) => {
isDown = true;
slider.classList.add("active");
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("pointerleave", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("pointerup", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("pointermove", (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
});