Tags: Undo Reverted |
No edit summary Tag: Reverted |
||
Line 5: | Line 5: | ||
_el: grid, | _el: grid, | ||
gap: parseFloat(getComputedStyle(grid).gridRowGap), | gap: parseFloat(getComputedStyle(grid).gridRowGap), | ||
items: [...grid.childNodes].filter(c => c.nodeType === 1), | items: [...grid.childNodes].filter(c => c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1), | ||
ncol: 0 })); | ncol: 0, | ||
mod: 0 })); | |||
Line 13: | Line 14: | ||
/* get the post relayout number of columns */ | /* get the post relayout number of columns */ | ||
let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length; | let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length; | ||
grid.items.forEach(c => { | |||
let new_h = c.getBoundingClientRect().height; | |||
if (new_h !== +c.dataset.h) { | |||
c.dataset.h = new_h; | |||
grid.mod++; | |||
} | |||
}); | |||
/* if the number of columns has changed */ | /* if the number of columns has changed */ | ||
if (grid.ncol !== ncol) { | if (grid.ncol !== ncol || grid.mod) { | ||
/* update number of columns */ | /* update number of columns */ | ||
grid.ncol = ncol; | grid.ncol = ncol; | ||
Line 31: | Line 41: | ||
}); | }); | ||
} | } | ||
grid.mod = 0; | |||
} | } | ||
}); | }); |
Revision as of 21:19, 23 March 2024
let grids = [...document.querySelectorAll(".masonry-group")]; 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 && +getComputedStyle(c).gridColumnEnd !== -1), ncol: 0, mod: 0 })); function layout() { grids.forEach(grid => { /* get the post relayout number of columns */ let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length; grid.items.forEach(c => { let new_h = c.getBoundingClientRect().height; if (new_h !== +c.dataset.h) { c.dataset.h = new_h; grid.mod++; } }); /* if the number of columns has changed */ if (grid.ncol !== ncol || grid.mod) { /* 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`; }); } grid.mod = 0; } }); } addEventListener('load', e => { layout(); /* initial load */ addEventListener('resize', layout, false); /* on resize */ }, false); } 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; });