first commit

node_modules/vitepress/dist/client/theme-default/composables/sponsor-grid.js

@@ -0,0 +1,94 @@
+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);
+    }
+}