Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: refactor column.js

This commit is contained in:
Régis Hanol 2024-04-08 17:45:27 +02:00
parent b7a2d29b7b
commit db77803ca3
1 changed files with 14 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/assets/javascripts/discourse/app/lib/columns.js
View File

@ -25,11 +25,8 @@ export default class Columns {
} }
count() { count() {
// a 2x2 grid looks better in most cases for 2 or 4 items // 2x2 grid looks better for 2 or 4 items
if (this.items.length === 4 || this.items.length === 2) { return [2, 4].includes(this.items.length) ? 2 : this.options.columns;
return 2;
}
return this.options.columns;
} }
render() { render() {
@ -38,44 +35,34 @@ export default class Columns {
} }
this.container.dataset.columns = this.count(); this.container.dataset.columns = this.count();
this.container.replaceChildren(...this._distributeEvenly());
const columns = this._distributeEvenly();
while (this.container.firstChild) {
this.container.removeChild(this.container.firstChild);
}
this.container.append(...columns);
return this; return this;
} }
_prepareColumns(count) { _prepareColumns(count) {
const columns = []; return [...Array(count)].map(() => {
[...Array(count)].forEach(() => {
const column = document.createElement("div"); const column = document.createElement("div");
column.classList.add("d-image-grid-column"); column.classList.add("d-image-grid-column");
columns.push(column); return column;
}); });
return columns;
} }
_prepareItems() { _prepareItems() {
let targets = []; let targets = [];
Array.from(this.container.children).forEach((child) => { for (let child of this.container.children) {
// sometimes children are wrapped in a paragraph
if (child.nodeName === "P" && child.children.length > 0) { if (child.nodeName === "P" && child.children.length > 0) {
// sometimes children are wrapped in a paragraph for (let c of child.children) {
Array.from(child.children).forEach((c) => {
targets.push(this._wrapDirectImage(c)); targets.push(this._wrapDirectImage(c));
}); }
} else { } else {
targets.push(this._wrapDirectImage(child)); targets.push(this._wrapDirectImage(child));
} }
}); }
return targets.filter((item) => { return targets.filter((item) => !["BR", "P"].includes(item.nodeName));
return !["BR", "P"].includes(item.nodeName);
});
} }
_wrapDirectImage(item) { _wrapDirectImage(item) {
@ -92,16 +79,13 @@ export default class Columns {
_distributeEvenly() { _distributeEvenly() {
const count = this.count(); const count = this.count();
const columns = this._prepareColumns(count); const columns = this._prepareColumns(count);
const heights = Array(count).fill(0);
const columnHeights = [];
for (let n = 0; n < count; n++) {
columnHeights[n] = 0;
}
this.items.forEach((item) => { this.items.forEach((item) => {
let shortest = 0; let shortest = 0;
for (let j = 1; j < count; ++j) { for (let j = 1; j < count; ++j) {
if (columnHeights[j] < columnHeights[shortest]) { if (heights[j] < heights[shortest]) {
shortest = j; shortest = j;
} }
} }
@ -109,8 +93,7 @@ export default class Columns {
// use aspect ratio to compare heights and append to shortest column // use aspect ratio to compare heights and append to shortest column
// if element is not an image, assume ratio is 1:1 // if element is not an image, assume ratio is 1:1
const img = item.querySelector("img") || item; const img = item.querySelector("img") || item;
const aR = img.nodeName === "IMG" ? img.height / img.width : 1; heights[shortest] += img.nodeName === "IMG" ? img.height / img.width : 1;
columnHeights[shortest] += aR;
columns[shortest].append(item); columns[shortest].append(item);
}); });