Skip to content

Commit

Permalink
set board width in options
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoseinzadehashraf
hoseinzadehashraf committed Apr 17, 2024
1 parent e96b916 commit ec5589e
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 78 deletions.
81 changes: 45 additions & 36 deletions dist/bundle-built.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37933,15 +37933,12 @@ define('app/masonryGrid',["require", "exports", "jquery"], function (require, ex
this.items = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
if (!this.parent || !this.items || !this.items.length)
return;
const that = this;
this.resizeObserver = new ResizeObserver(entries => {
clearTimeout(that.resizeId);
that.resizeId = setTimeout(function () {
that.drawGrid();
that.resizeId = undefined;
setTimeout(function () { that.parent.style.setProperty('opacity', '1'); }, 100);
}, 500);
});
const dataAttr = this.parent.getAttribute("data-min-column-width");
this.options.minColumnWidth = dataAttr ? parseInt(dataAttr) : 300;
const o = function (entries) {
this.drawGrid();
}.bind(this);
this.resizeObserver = new ResizeObserver(o);
this.resizeObserver.observe(this.parent);
this.items.forEach(item => this.resizeObserver.observe(item));
}
Expand All @@ -37952,33 +37949,45 @@ define('app/masonryGrid',["require", "exports", "jquery"], function (require, ex
}, 100);
}
}
setMinColumnWidth(w) {
this.options.minColumnWidth = w;
this.drawGrid();
}
drawGrid() {
const parentWidth = this.parent.clientWidth;
const columnCount = Math.max(parentWidth / this.options.minColumnWidth, 1);
const newItems = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
this.items.forEach(item => {
if (item.parentElement != this.parent)
this.parent.appendChild(item);
});
this.items = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
this.parent.querySelectorAll(".column").forEach(element => {
element.remove();
});
for (let i = 1; i <= columnCount; i++) {
this.parent.insertAdjacentHTML("beforeend", "<div class='column'></div>");
if (this.resizeId) {
clearTimeout(this.resizeId);
}
var result = [];
for (let i = 1; i <= columnCount; i++) {
result.push({ index: i - 1, height: 0 });
}
this.items.forEach(item => {
result.sort((a, b) => a.height - b.height);
const index = result[0].index;
const div = this.parent.querySelectorAll(".column")[index];
div.appendChild(item);
result[0].height += item.clientHeight;
});
newItems.forEach(item => this.resizeObserver.observe(item));
if (!this.parent || !this.items || !this.items.length)
return;
this.resizeId = setTimeout(function () {
const parentWidth = this.parent.clientWidth;
const columnCount = Math.max(parentWidth / this.options.minColumnWidth, 1);
const newItems = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
this.items.forEach(item => {
if (item.parentElement != this.parent)
this.parent.appendChild(item);
});
// this.items = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
this.parent.querySelectorAll(".column").forEach(element => {
element.remove();
});
for (let i = 1; i <= columnCount; i++) {
this.parent.insertAdjacentHTML("beforeend", "<div class='column'></div>");
}
var result = [];
for (let i = 1; i <= columnCount; i++) {
result.push({ index: i - 1, height: 0 });
}
this.items.forEach(item => {
result.sort((a, b) => a.height - b.height);
const index = result[0].index;
const div = this.parent.querySelectorAll(".column")[index];
div.appendChild(item);
result[0].height += item.clientHeight;
});
newItems.forEach(item => this.resizeObserver.observe(item));
this.resizeId = undefined;
}.bind(this), 500);
}
}
exports.default = MasonryGrid;
Expand Down Expand Up @@ -38097,6 +38106,7 @@ define('app/boardComponents',["require", "exports", "olive/components/url", "./m
if (!$(e.target).closest("a").is($(".manage-button,.add-button")))
$(".board-addable-items-container,.board-manage-items-container").fadeOut();
});
// TEST MASONARY GRID STRUCTURE
// const listItems = $("<div class='list-items'>");
// for (let index = 0; index < 20; index++) {
// var random = Math.random() * 500 + 100;
Expand All @@ -38105,8 +38115,7 @@ define('app/boardComponents',["require", "exports", "olive/components/url", "./m
// $('.board-components-result').append(listItems);
this.masonryGrid = new masonryGrid_1.default({
parentSelector: '.board-components-result > .list-items',
itemsSelector: ".item",
minColumnWidth: 300
itemsSelector: ".item"
});
this.relocateBoardComponentsHeaderActions();
this.removeBoardGap();
Expand Down
2 changes: 1 addition & 1 deletion dist/bundle-built.min.js
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion dist/types/hub/hubPage.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/// <reference path="../olive.mvc/typings-lib/moment/moment-node.d.ts" />
import OlivePage from 'olive/olivePage';
import { ServiceContainer } from 'olive/di/serviceContainer';
import BoardComponents from './boardComponents';
import 'jquery';
import 'jquery-ui-all';
import 'jquery-validate';
Expand Down Expand Up @@ -34,7 +35,7 @@ import 'bootstrap-select';
import 'flickity';
export default class HubPage extends OlivePage {
static IsFirstPageLoad: boolean;
private board;
board: BoardComponents;
constructor();
configureServices(services: ServiceContainer): void;
revive(): void;
Expand Down
1 change: 1 addition & 0 deletions dist/types/hub/masonryGrid.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,6 @@ export default class MasonryGrid {
resizeId: number | undefined;
constructor(options: any);
private initialize;
setMinColumnWidth(w: number): void;
drawGrid(): void;
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"url": "git://github.com/Geeksltd/Olive.Microservices.HubJs.git"
},
"author": "Geeks Ltd",
"version": "4.2.60",
"version": "4.2.61",
"license": "GPL-3.0",
"private": false,
"files": [
Expand Down
4 changes: 2 additions & 2 deletions src/boardComponents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ export default class BoardComponents implements IService {
$(".board-addable-items-container,.board-manage-items-container").fadeOut();
})

// TEST MASONARY GRID STRUCTURE
// const listItems = $("<div class='list-items'>");
// for (let index = 0; index < 20; index++) {
// var random = Math.random() * 500 + 100;
Expand All @@ -130,8 +131,7 @@ export default class BoardComponents implements IService {

this.masonryGrid = new MasonryGrid({
parentSelector: '.board-components-result > .list-items',
itemsSelector: ".item",
minColumnWidth: 300
itemsSelector: ".item"
});

this.relocateBoardComponentsHeaderActions();
Expand Down
2 changes: 1 addition & 1 deletion src/hubPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default class HubPage extends OlivePage {
// Here you can override any of the base standard functions.
// e.g: To use a different AutoComplete library, simply override handleAutoComplete(input).
public static IsFirstPageLoad: boolean = true;
private board: BoardComponents = null;
public board: BoardComponents = null;
constructor() {
super();
new FullMenuFiltering();
Expand Down
83 changes: 47 additions & 36 deletions src/masonryGrid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,13 @@ export default class MasonryGrid {

if (!this.parent || !this.items || !this.items.length) return;

const that = this;

this.resizeObserver = new ResizeObserver(entries => {
clearTimeout(that.resizeId);
that.resizeId = setTimeout(function () {
that.drawGrid();
that.resizeId = undefined;
setTimeout(function () { that.parent.style.setProperty('opacity', '1') }, 100);
}, 500);
});
const dataAttr = this.parent.getAttribute("data-min-column-width")
this.options.minColumnWidth = dataAttr ? parseInt(dataAttr) : 300;

const o = function (entries) {
this.drawGrid();
}.bind(this);
this.resizeObserver = new ResizeObserver(o);

this.resizeObserver.observe(this.parent);
this.items.forEach(item => this.resizeObserver.observe(item));
Expand All @@ -46,40 +43,54 @@ export default class MasonryGrid {
}
}

setMinColumnWidth(w: number) {
this.options.minColumnWidth = w;
this.drawGrid();
}

drawGrid() {
const parentWidth = this.parent.clientWidth;
const columnCount = Math.max(parentWidth / this.options.minColumnWidth, 1);
if (this.resizeId) {
clearTimeout(this.resizeId);
}

const newItems = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
if (!this.parent || !this.items || !this.items.length) return;

this.items.forEach(item => {
if (item.parentElement != this.parent)
this.parent.appendChild(item);
});
this.resizeId = setTimeout(function () {
const parentWidth = this.parent.clientWidth;
const columnCount = Math.max(parentWidth / this.options.minColumnWidth, 1);

this.items = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);
const newItems = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);

this.parent.querySelectorAll(".column").forEach(element => {
element.remove();
});
this.items.forEach(item => {
if (item.parentElement != this.parent)
this.parent.appendChild(item);
});

for (let i = 1; i <= columnCount; i++) {
this.parent.insertAdjacentHTML("beforeend", "<div class='column'></div>");
}
// this.items = this.parent.querySelectorAll(this.options.parentSelector + ' > ' + this.options.itemsSelector);

var result = [];
for (let i = 1; i <= columnCount; i++) {
result.push({ index: i - 1, height: 0 });
}
this.parent.querySelectorAll(".column").forEach(element => {
element.remove();
});

this.items.forEach(item => {
result.sort((a, b) => a.height - b.height);
const index = result[0].index;
const div = this.parent.querySelectorAll(".column")[index]
div.appendChild(item);
result[0].height += item.clientHeight;
});
for (let i = 1; i <= columnCount; i++) {
this.parent.insertAdjacentHTML("beforeend", "<div class='column'></div>");
}

var result = [];
for (let i = 1; i <= columnCount; i++) {
result.push({ index: i - 1, height: 0 });
}

this.items.forEach(item => {
result.sort((a, b) => a.height - b.height);
const index = result[0].index;
const div = this.parent.querySelectorAll(".column")[index]
div.appendChild(item);
result[0].height += item.clientHeight;
});

newItems.forEach(item => this.resizeObserver.observe(item));
newItems.forEach(item => this.resizeObserver.observe(item));
this.resizeId = undefined;
}.bind(this), 500);
}
}

0 comments on commit ec5589e

Please sign in to comment.