Page MenuHomeWildfire Games
Paste P135

Generic GUI Grid Paged addon
ActivePublic

Authored by nani on Oct 13 2018, 12:40 AM.
Tags
None
Subscribers
Tokens
"Love" token, awarded by asterix."Love" token, awarded by smiley.
/*
* Function that arranges a list of "boxed-like" xml objects with centered and page based way.
* Needs a object as container and a object to display the page (if not make hidden object and assign it)
* boxWidth,boxHeight: dimensions of each grid box
* The grid will ajust in accordance to the screen size from when init() method is called
*
* To add advances more details or adanced object inside each box redefine
* the function defineChildren when the object is instantiated.
*
* For example look at mapbrowser.js implementation.
*/
function GridBrowser(containerName, pageCounterName, boxWidth, boxHeight)
{
// object name which contains all the grid objects
this.containerName = containerName;
// object name which constains a text object type for the numbering of each page
this.pageCounterName = pageCounterName;
this.boxW = boxWidth;
this.boxH = boxHeight;
}
// the list of whatever you are storing
GridBrowser.prototype.init = function(list)
{
this.container = Engine.GetGUIObjectByName(this.containerName);
this.pageCounter = Engine.GetGUIObjectByName(this.pageCounterName);
this.children = this.container.children;
this.rect = this.container.getComputedSize();
this.rect.width = Math.max(this.rect.right - this.rect.left, 0);
this.rect.height = Math.max(this.rect.bottom - this.rect.top, 0);
this.nColumns = Math.max(1, Math.floor(this.rect.width / this.boxW));
this.nRows = Math.max(1, Math.floor(this.rect.height / this.boxH));
this.numBoxesCreated = this.children.length; //hardcoded in the xml file
this.maxNumBoxesInScreen = Math.min(this.nColumns * this.nRows, this.numBoxesCreated);
this.xCenter = this.boxW * this.nColumns / 2;
this.setList(list);
}
GridBrowser.prototype.defineChildren = function(n, pageList)
{
//empty onpurpose, add modifications only at the object instances
}
GridBrowser.prototype.generatePage = function(page)
{
let nubOfBoxesToShow = (page == this.numOfPages - 1) ? this.list.length % this.maxNumBoxesInScreen : this.maxNumBoxesInScreen;
let subList = this.list.slice(page * this.maxNumBoxesInScreen, page * this.maxNumBoxesInScreen + nubOfBoxesToShow);
for (let n = 0; n < nubOfBoxesToShow; n++)
{
const x = n % this.nColumns;
const y = Math.floor(n / this.nColumns);
let xmin = this.boxW * x;
let xmax = this.boxW * (x + 1);
let ymin = this.boxH * y;
let ymax = this.boxH * (y + 1);
xmin = "50%" + "-" + this.xCenter + "+" + xmin;
xmax = "50%" + "-" + this.xCenter + "+" + xmax;
this.children[n].hidden = false;
this.children[n].size = [xmin, ymin, xmax, ymax].join(" ");
this.defineChildren(n, subList);
}
for (let n = nubOfBoxesToShow; n < this.numBoxesCreated; ++n)
{
this.children[n].hidden = true;
}
}
GridBrowser.prototype.calcNumPages = function()
{
return Math.ceil(this.list.length / this.maxNumBoxesInScreen);
}
GridBrowser.prototype.updateCounter = function()
{
this.pageCounter.caption = `${this.currentPage+1}/${this.numOfPages}`;
}
GridBrowser.prototype.nextPage = function()
{
this.currentPage = (this.currentPage + 1) % this.numOfPages;
this.update();
}
GridBrowser.prototype.previousPage = function()
{
this.currentPage = (this.currentPage + this.numOfPages - 1) % this.numOfPages;
this.update();
}
GridBrowser.prototype.update = function()
{
this.updateCounter();
this.generatePage(this.currentPage);
}
GridBrowser.prototype.setList = function(list)
{
this.currentPage = 0;
this.list = list;
this.numOfPages = this.calcNumPages();
this.update();
}

Event Timeline

nani added a comment.Oct 13 2018, 12:41 AM

Example of what is capable

nani changed the visibility from "All Users" to "Public (No Login Required)".Oct 13 2018, 1:22 AM
smiley added a subscriber: smiley.Oct 13 2018, 8:45 AM

In the future, instead of different pages it could be one page with a scroll bar. Needs scrollbars first ofcourse.