server: add support for .json .csv and ?all=true

website/scripts/packages/flexmasonry/v0.2.3-modified/script.js

@@ -0,0 +1,198 @@
+const defaultOptions = {
+  /*
+   * If `responsive` is `true`, `breakpointCols` will be used to determine
+   * how many columns a grid should have at a given responsive breakpoint.
+   */
+  responsive: true,
+  /*
+   * A list of how many columns should be shown at different responsive
+   * breakpoints, defined by media queries.
+   */
+  breakpointCols: {
+    1500: 5,
+    1200: 4,
+    992: 3,
+    768: 2,
+    576: 1,
+  },
+  /*
+   * If `responsive` is `false`, this number of columns will always be shown,
+   * no matter the width of the screen.
+   */
+  numCols: 4,
+};
+
+let _resizeId = null;
+let _options = {};
+let _targets = [];
+
+function init(targets, options = {}) {
+  if (typeof targets === "string") {
+    _targets = document.querySelectorAll(targets);
+  } else {
+    _targets = targets;
+  }
+
+  _options = Object.assign(defaultOptions, options);
+
+  _targets.forEach(function (target) {
+    setUp(target);
+    // setHeight(target);
+  });
+
+  addEventListeners();
+
+  return this;
+}
+
+function setUp(target) {
+  target.classList.add("flexmasonry");
+
+  if (_options.responsive) {
+    target.classList.add("flexmasonry-responsive");
+  }
+
+  setColsClass(target);
+
+  Array.from(target.children).forEach(function (item) {
+    item.classList.add("flexmasonry-item");
+  });
+
+  addBreakElements(target);
+}
+
+// function onLoad() {
+//   _targets.forEach(function (target) {
+//     setHeight(target);
+//   });
+// }
+
+function onResize() {
+  if (_resizeId) {
+    window.cancelAnimationFrame(_resizeId);
+  }
+
+  _resizeId = window.requestAnimationFrame(function () {
+    refreshAll();
+  });
+}
+
+function addEventListeners() {
+  // window.addEventListener("load", onLoad);
+  window.addEventListener("resize", onResize);
+}
+
+function removeEventListeners() {
+  // window.removeEventListener("load", onLoad);
+  window.removeEventListener("resize", onResize);
+}
+
+// function setHeight(target) {
+//   if (getCurrentCols(target) < 2) {
+//     target.style.removeProperty("height");
+//     return;
+//   }
+
+// let heights = [];
+
+// Array.from(target.children).forEach(function (item) {
+//   if (item.classList.contains("flexmasonry-break")) {
+//     return;
+//   }
+
+// const comp = window.getComputedStyle(item);
+// const order = comp.getPropertyValue("order");
+// const height = comp.getPropertyValue("height");
+
+// if (!heights[order - 1]) {
+//   heights[order - 1] = 0;
+// }
+// heights[order - 1] += Math.ceil(parseFloat(height));
+// });
+
+// const maxHeight = Math.max(...heights);
+// target.style.height = maxHeight + "px";
+// }
+
+function addBreakElements(target) {
+  const breakEls = target.querySelectorAll(".flexmasonry-break");
+  if (Array.from(breakEls).length === getCurrentCols(target) - 1) {
+    return;
+  }
+
+  for (let i = 1; i < getCurrentCols(target); i++) {
+    const breakDiv = document.createElement("div");
+    breakDiv.classList.add("flexmasonry-break");
+    breakDiv.classList.add("flexmasonry-break-" + i);
+    target.appendChild(breakDiv);
+  }
+}
+
+function removeBreakElements(target) {
+  const breakEls = target.querySelectorAll(".flexmasonry-break");
+  if (Array.from(breakEls).length === getCurrentCols(target) - 1) {
+    return;
+  }
+
+  Array.from(breakEls).forEach(function (breakEl) {
+    breakEl.parentNode.removeChild(breakEl);
+  });
+}
+
+function setColsClass(target) {
+  if (target.classList.contains("flexmasonry-cols-" + getCurrentCols(target))) {
+    return;
+  }
+
+  target.className = target.className.replace(/(flexmasonry-cols-\d+)/, "");
+  target.classList.add("flexmasonry-cols-" + getCurrentCols(target));
+}
+
+function getCurrentCols(target) {
+  if (!_options.responsive) {
+    return _options.numCols;
+  }
+
+  const descendingMinWidths = Object.keys(_options.breakpointCols)
+    .map((key) => Number(key))
+    .sort()
+    .reverse();
+
+  for (const minWidth of descendingMinWidths) {
+    if (target.clientWidth >= minWidth) {
+      return _options.breakpointCols[minWidth];
+    }
+  }
+
+  return 1;
+}
+
+function refresh(target, options = {}) {
+  _options = Object.assign(defaultOptions, options);
+
+  setColsClass(target);
+  removeBreakElements(target);
+  addBreakElements(target);
+  // setHeight(target);
+
+  return this;
+}
+
+function refreshAll(options = {}) {
+  _targets.forEach(function (target) {
+    refresh(target, options);
+  });
+
+  return this;
+}
+
+function destroyAll() {
+  removeEventListeners();
+}
+
+export default {
+  init,
+  refresh,
+  refreshAll,
+  destroyAll,
+};