doc.yeswiki.pro/node_modules/vitepress/dist/client/theme-default/composables/sponsor-grid.js
2023-05-20 19:38:02 +03:00

94 lines
2.5 KiB
JavaScript

import { onMounted, onUnmounted } from 'vue';
import { throttleAndDebounce } from '../support/utils';
/**
* Defines grid configuration for each sponsor size in tuple.
*
* [Screen width, Column size]
*
* It sets grid size on matching screen size. For example, `[768, 5]` will
* set 5 columns when screen size is bigger or equal to 768px.
*
* Column will set only when item size is bigger than the column size. For
* example, even we define 5 columns, if we only have 1 sponsor yet, we would
* like to show it in 1 column to make it stand out.
*/
const GridSettings = {
xmini: [[0, 2]],
mini: [],
small: [
[920, 6],
[768, 5],
[640, 4],
[480, 3],
[0, 2]
],
medium: [
[960, 5],
[832, 4],
[640, 3],
[480, 2]
],
big: [
[832, 3],
[640, 2]
]
};
export function useSponsorsGrid({ el, size = 'medium' }) {
const onResize = throttleAndDebounce(manage, 100);
onMounted(() => {
manage();
window.addEventListener('resize', onResize);
});
onUnmounted(() => {
window.removeEventListener('resize', onResize);
});
function manage() {
adjustSlots(el.value, size);
}
}
function adjustSlots(el, size) {
const tsize = el.children.length;
const asize = el.querySelectorAll('.vp-sponsor-grid-item:not(.empty)').length;
const grid = setGrid(el, size, asize);
manageSlots(el, grid, tsize, asize);
}
function setGrid(el, size, items) {
const settings = GridSettings[size];
const screen = window.innerWidth;
let grid = 1;
settings.some(([breakpoint, value]) => {
if (screen >= breakpoint) {
grid = items < value ? items : value;
return true;
}
});
setGridData(el, grid);
return grid;
}
function setGridData(el, value) {
el.dataset.vpGrid = String(value);
}
function manageSlots(el, grid, tsize, asize) {
const diff = tsize - asize;
const rem = asize % grid;
const drem = rem === 0 ? rem : grid - rem;
neutralizeSlots(el, drem - diff);
}
function neutralizeSlots(el, count) {
if (count === 0) {
return;
}
count > 0 ? addSlots(el, count) : removeSlots(el, count * -1);
}
function addSlots(el, count) {
for (let i = 0; i < count; i++) {
const slot = document.createElement('div');
slot.classList.add('vp-sponsor-grid-item', 'empty');
el.append(slot);
}
}
function removeSlots(el, count) {
for (let i = 0; i < count; i++) {
el.removeChild(el.lastElementChild);
}
}