No edit summary Tags: Manual revert Reverted |
No edit summary Tag: Reverted |
||
Line 146: | Line 146: | ||
let grids = [...document.querySelectorAll('.grid--masonry')]; | let grids = [...document.querySelectorAll('.grid--masonry')]; | ||
if (grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') { | if(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') { | ||
grids = grids.map(grid => ({ | |||
_el: grid, | |||
gap: parseFloat(getComputedStyle(grid).gridRowGap), | |||
items: [...grid.childNodes].filter(c => c.nodeType === 1), | |||
ncol: 0 | |||
})); | |||
function layout() { | |||
grids.forEach(grid => { | |||
/* get the post relayout number of columns */ | |||
let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length; | |||
/* if the number of columns has changed */ | |||
if(grid.ncol !== ncol) { | |||
/* update number of columns */ | |||
grid.ncol = ncol; | |||
/* revert to initial positioning, no margin */ | |||
grid.items.forEach(c => c.style.removeProperty('margin-top')); | |||
/* if we have more than one column */ | |||
if(grid.ncol > 1) { | |||
grid.items.slice(ncol).forEach((c, i) => { | |||
let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */, | |||
curr_ini = c.getBoundingClientRect().top /* top edge of current item */; | |||
c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px` | |||
}) | |||
} | |||
} | |||
}) | |||
} | |||
addEventListener('load', e => { | |||
layout(); | |||
addEventListener('resize', layout, false); | |||
}, false); | |||
} | } |
Revision as of 16:32, 14 April 2024
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); var sliders = document.querySelectorAll(".cards"); sliders.forEach((slider)=>{ 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; }); }); let grids = [...document.querySelectorAll('.grid--masonry')]; if(grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') { grids = grids.map(grid => ({ _el: grid, gap: parseFloat(getComputedStyle(grid).gridRowGap), items: [...grid.childNodes].filter(c => c.nodeType === 1), ncol: 0 })); function layout() { grids.forEach(grid => { /* get the post relayout number of columns */ let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length; /* if the number of columns has changed */ if(grid.ncol !== ncol) { /* update number of columns */ grid.ncol = ncol; /* revert to initial positioning, no margin */ grid.items.forEach(c => c.style.removeProperty('margin-top')); /* if we have more than one column */ if(grid.ncol > 1) { grid.items.slice(ncol).forEach((c, i) => { let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */, curr_ini = c.getBoundingClientRect().top /* top edge of current item */; c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px` }) } } }) } addEventListener('load', e => { layout(); addEventListener('resize', layout, false); }, false); }