MediaWiki:Common.js: Difference between revisions

MediaWiki interface page
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
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].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) {
  const columns = getComputedStyle(grid.el).gridTemplateColumns.split(" ")
    .length
  for (const column of grid.items) {
    const { height } = column.getBoundingClientRect()
    const h = height.toString()
    if (h !== column.dataset?.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) {
mw.hook('wikipage.content').add(function($content) {
var $bandcamp = $content.find( '.bandcamp:not(.loaded)' );
var $bandcamp = $content.find( '.bandcamp:not(.loaded)' );
Line 178: Line 115:
})(jQuery, mediaWiki);
})(jQuery, mediaWiki);


const slider = document.querySelector(".cards");
var sliders = document.querySelectorAll(".cards");
let isDown = false;
sliders.forEach((slider)=>{
let startX;
let isDown = false;
let scrollLeft;
let startX;
let scrollLeft;


slider.addEventListener("pointerdown", (e) => {
slider.addEventListener("pointerdown", (e) => {
Line 203: Line 141:
const walk = (x - startX) * 3; //scroll-fast
const walk = (x - startX) * 3; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
slider.scrollLeft = scrollLeft - walk;
});
});
});

Latest revision as of 16:43, 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;
});
});