MediaWiki:Common.js - Revision history

Timothy at 20:43, 14 April 2024

2024-04-14T20:43:45Z

← Older revision		Revision as of 16:43, 14 April 2024
Line 143:		Line 143:
	});		});
	});		});

	~~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);~~
	}

Timothy at 20:32, 14 April 2024

2024-04-14T20:32:11Z

← Older revision		Revision as of 16:32, 14 April 2024
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 => ({		grids = grids.map(grid => ({
	_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),
	ncol: 0 }));		ncol: 0
			}));

			function layout() {
			grids.forEach(grid => {
			/* get the post relayout number of columns */
			let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length;

	~~function layout() {~~		/* if the number of columns has changed */
	~~grids.forEach~~(grid => {		if(grid.ncol !== ncol) {
	/* ~~get the post relayout~~ number of columns */		/* update number of columns */
	~~let~~ ncol = ~~getComputedStyle(grid._el).gridTemplateColumns.split(' ').length~~;		grid.ncol = ncol;

	/* ~~if the number of columns has changed~~ */		/* revert to initial positioning, no margin */
	~~if (~~grid.~~ncol !~~=~~= ncol~~) {		grid.items.forEach(c => c.style.removeProperty('margin-top'));
	~~/* update number of columns */~~
	~~grid.ncol = ncol~~;

	/* ~~revert to initial positioning, no margin~~ */		/* if we have more than one column */
	grid.items.forEach(c => c.style.~~removeProperty('margin~~-~~top'~~));		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`
			})
			}
			}
			})
			}

	~~/* if we have more than one column */~~		addEventListener('load', e => {
	~~if (grid.ncol > 1) {~~		layout();
	~~grid.items.slice(ncol).forEach((c, i) => {~~		addEventListener('resize', layout, false);
	~~let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */,~~		}, false);
	~~curr_ini = c.getBoundingClientRect().top /* top edge of current item */;~~

	~~c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`;~~
	~~});~~
	}
	}
	~~});~~
	}

	addEventListener('load', e => {
	layout(); ~~/* initial load */~~
	addEventListener('resize', layout, false); ~~/* on resize */~~
	}, false);
	}		}

Timothy at 20:24, 14 April 2024

2024-04-14T20:24:58Z

← Older revision		Revision as of 16:24, 14 April 2024
Line 144:		Line 144:
	});		});

	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') {

Timothy at 20:23, 14 April 2024

2024-04-14T20:23:48Z

← Older revision		Revision as of 16:23, 14 April 2024
Line 144:		Line 144:
	});		});

	~~var~~ 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') {

Timothy at 20:22, 14 April 2024

2024-04-14T20:22:22Z

← Older revision		Revision as of 16:22, 14 April 2024
Line 144:		Line 144:
	});		});

	~~let~~ grids = ~~[...~~document.querySelectorAll('.grid--masonry')];		var grids = document.querySelectorAll('.grid--masonry');

	if (grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {		if (grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {

Timothy at 20:13, 14 April 2024

2024-04-14T20:13:51Z

← Older revision		Revision as of 16:13, 14 April 2024
Line 143:		Line 143:
	});		});
	});		});

			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(); /* initial load */
			addEventListener('resize', layout, false); /* on resize */
			}, false);
			}

Timothy at 02:42, 10 April 2024

2024-04-10T02:42:09Z

← Older revision		Revision as of 22:42, 9 April 2024
Line 115:		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 140:		Line 141:
	const walk = (x - startX) * 3; //scroll-fast		const walk = (x - startX) * 3; //scroll-fast
	slider.scrollLeft = scrollLeft - walk;		slider.scrollLeft = scrollLeft - walk;
			});
	});		});

Timothy at 03:15, 24 March 2024

2024-03-24T03:15:35Z

← Older revision		Revision as of 23:15, 23 March 2024
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]~~
	~~// 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) {		mw.hook('wikipage.content').add(function($content) {
	var $bandcamp = $content.find( '.bandcamp:not(.loaded)' );		var $bandcamp = $content.find( '.bandcamp:not(.loaded)' );

Timothy at 03:00, 24 March 2024

2024-03-24T03:00:52Z

← Older revision		Revision as of 23:00, 23 March 2024
Line 1:		Line 1:
	export function masonryGridPolyfill(selectors = ".masonry-group") {		export function masonryGridPolyfill(selectors = '.masonry-group') {
	const elements = [...document.querySelectorAll(selectors)]		const elements = [...document.querySelectorAll(selectors)];
			// Bail if no elements where found
	// Bail if no elements where found		if (!elements.length)
	if (!elements.length) return		return;
			// Bail if masonry layouts are already supported by the browser
	// Bail if masonry layouts are already supported by the browser		if (getComputedStyle(elements[0]).gridTemplateRows === 'masonry')
	if (getComputedStyle(elements[0]).gridTemplateRows === "masonry") return		return;
			for (const el of elements) {
	for (const el of elements) {		const grid = {
	const grid = {		el,
	el,		items: [...el.childNodes]
	items: [...el.childNodes].filter(i => i.nodeType === 1),		// Make sure the child nodes are element nodes
	gap: parseFloat(getComputedStyle(el).rowGap),		.filter(i => i.nodeType === 1),
	columns: 0,		gap: parseFloat(getComputedStyle(el).rowGap),
	count: 0		columns: 0,
			count: 0,
			};
			renderGrid(grid);
			const resizeObserver = new ResizeObserver(() => renderGrid(grid));
			resizeObserver.observe(grid.el);
	}		}

	~~renderGrid(grid)~~

	~~const resizeObserver = new ResizeObserver(() => renderGrid(grid))~~
	~~resizeObserver.observe(grid.el)~~
	}
	}		}

	function renderGrid(grid) {		function renderGrid(grid) {
	const columns = getComputedStyle(grid.el).gridTemplateColumns.split(~~" "~~)		var _a;
	.length		const columns = getComputedStyle(grid.el).gridTemplateColumns.split(' ').length;
			for (const column of grid.items) {
	for (const column of grid.items) {		const { height } = column.getBoundingClientRect();
	const { height } = column.getBoundingClientRect()		const h = height.toString();
	const h = height.toString()		if (h !== ((_a = column.dataset) === null \|\| _a === void 0 ? void 0 : _a.h)) {
			column.dataset.h = h;
	if (h !== column.dataset?.h) {		grid.count++;
	column.dataset.h = h		}
	grid.count++
	}		}
	}		// Bail if the number of columns hasn't changed
			if (grid.columns === columns && grid.count)
	// Bail if the number of columns hasn't changed		return;
	if (grid.columns === columns && grid.count) return		// Update the number of columns
			grid.columns = columns;
	// Update the number of columns		// Revert to initial positioning, no margin
	grid.columns = columns		for (const { style } of grid.items)
			style.removeProperty('margin-top');
	// Revert to initial positioning, no margin		// If we have more than one column
	for (const { style } of grid.items) style.removeProperty("margin-top")		if (grid.columns > 1) {
			for (const [index, column] of grid.items.slice(columns).entries()) {
	// If we have more than one column		// Bottom edge of item above
	if (grid.columns > 1) {		const { bottom: prevBottom } = grid.items[index].getBoundingClientRect();
	for (const [index, column] of grid.items.slice(columns).entries()) {		// Top edge of current item
	// Bottom edge of item above		const { top } = column.getBoundingClientRect();
	const { bottom: prevBottom } = grid.items[index].getBoundingClientRect()		column.style.marginTop = `${prevBottom + grid.gap - top}px`;
	// Top edge of current item		}
	const { top } = column.getBoundingClientRect()

	column.style.marginTop = `${prevBottom + grid.gap - top}px`
	}		}
	}		grid.count = 0;

	grid.count = 0
	}		}

Timothy at 02:56, 24 March 2024

2024-03-24T02:56:12Z

← Older revision		Revision as of 22:56, 23 March 2024
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)' );