No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
export function masonryGridPolyfill(selectors = | 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) { | 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; | |||
} | } | ||
Revision as of 23:00, 23 March 2024
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; });