/**
* Galaxy War Encyclopedia
* catalogue.js independently from 2012-4-14 Saturday 17:53:38 PM
* ---------- ---------- ---------- ----------
* Copyright(c) 2012-2022 Entertainment Ltd.
* E-mail: developer@gamecenternow.com
* ---------- ---------- ---------- ----------
* Galaxy War Encyclopedia is a detail of every game element.
*/
/**
* Program config.
*/
var config = {
// px, height per sub catalogue.
subHeight: 30,
// millis
smoothGap: 10,
// px
smoothStep: 2,
// millis
checkGap: 500
};
/**
* Record each catalogue is opened (true) or floded (false).
*/
var eachCatalogueStatus = { };
/**
* Record last opened catalogue page element's id
*/
var lastOpenedCatalogueId = null;
/**
* Lock is used to prevent the choas from multiple click.
*/
var lock = null;
/**
* Change sub catalogue. Change means open or fold.
* When click on a catalogue, this method will be invoked.
*/
var catalogueChange = function(catalogueId, type)
{
// Get sub catalogue element.
var subCatalogue = etm$(catalogueId + "-sub");
// Record element real height.
var realHeight = subCatalogue.getElementsByTagName("div").length * config.subHeight;
if (!(eachCatalogueStatus[catalogueId].realHeightStr))
{ eachCatalogueStatus[catalogueId].realHeightStr = realHeight + "px"; }
// Do different with SHOW and HIDE.
switch (type)
{
case catalogueChange.SHOW:
showSubCatalogue(catalogueId, subCatalogue, realHeight);
break;
case catalogueChange.HIDE:
hideSubCatalogue(catalogueId, subCatalogue, realHeight);
break;
}
};
catalogueChange.SHOW = { operation: "show" };
catalogueChange.HIDE = { operation: "hide" };
/**
* Open a sub catalogue area by catalogue id.
*/
var showSubCatalogue = function(catalogueId, subCatalogue, realHeight)
{
subCatalogue.style.height = "0px";
subCatalogue.hidden = false;
delete subCatalogue.hidden;
subCatalogue.style.display = "block";
var intervalCode =
"registerProcess(0, " + realHeight + ", \"" + catalogueId + "\", catalogueChange.SHOW);";
eachCatalogueStatus[catalogueId].threadId = setInterval(intervalCode, config.smoothGap);
};
/**
* Fold a sub catalogue area by catalogue id.
*/
var hideSubCatalogue = function(catalogueId, subCatalogue, realHeight)
{
subCatalogue.style.height = realHeight + "px";
var intervalCode =
"registerProcess(" + realHeight + ", 0, \"" + catalogueId + "\", catalogueChange.HIDE);";
eachCatalogueStatus[catalogueId].threadId = setInterval(intervalCode, config.smoothGap);
};
/**
* The effect on click at a catalogue
* This method will do differently, according to whether the clicked catalogue is opened.
* If it is opened, this method will fold it and clean "last opened" record.
* If it is not opened, this method will fold last opened catalogue, and open this one.
*/
var catalogueOnClick = function()
{
// If locked, do nothins.
if (lock) { return; } else { lock = true; }
var targetId = this.id.split("-")[0];
// If clicked catalogue has been opened.
if (eachCatalogueStatus[targetId].open)
{
// Hide it.
catalogueChange(targetId, catalogueChange.HIDE);
// Register an interval function to keep lock until finish hiding.
eachCatalogueStatus[targetId].checkThreadId =
setInterval("whenCheckHidingSelf(\"" + targetId + "\");", config.checkGap);
}
// If clicked catalogue is folded.
else
{
// If there is another catalogue is opened, fold it.
if (lastOpenedCatalogueId != null)
{ catalogueChange(lastOpenedCatalogueId, catalogueChange.HIDE); }
// Open this catalogue.
catalogueChange(targetId, catalogueChange.SHOW);
// Register an interval function to keep lock
// until finish opening this catalogue and folding last opened catalogue.
eachCatalogueStatus[targetId].checkThreadId =
setInterval("whenCheckOpenNew(\"" + targetId + "\");", config.checkGap);
}
};
/**
* The effect on click sub catalogue.
* Change the main page to the title content of the clicked sub catalogue.
*/
var subCatalogueOnClick = function()
{
var contentIframe = window.parent.document.getElementById("pagecontent");
contentIframe.src = this.title;
};
/**
* Register all click method etc.
*/
var catalogueInit = function()
{
var baseBody = etm$("catalogueBody");
var allCatalogue = baseBody.childNodes;
for (var index = -1; ++index != allCatalogue.length; )
{
var element = allCatalogue[index];
if (element.nodeType != 1) { continue; }
var targetId = element.id;
eachCatalogueStatus[targetId] = new Object();
eachCatalogueStatus[targetId].open = false;
etm$(targetId + "-main").onclick = catalogueOnClick;
var allSub = etm$(targetId + "-sub").childNodes;
for (var subIndex = -1; ++subIndex != allSub.length; )
{
var subElement = allSub[subIndex];
if (subElement.nodeType != 1) { continue; }
subElement.onclick = subCatalogueOnClick;
}
}
};
/**
* Smooth effect function.
*/
var registerProcess = function(start, end, catalogueId, type)
{
var heightStr = etm$(catalogueId + "-sub").style.height;
var realHeight = heightStr.substring(0, heightStr.length - 2) * 1;
if (start <= end && realHeight >= end || start >= end && realHeight <= end)
{
switch (type)
{
case catalogueChange.SHOW:
whenFinishShowing(catalogueId);
return;
case catalogueChange.HIDE:
whenFinishHiding(catalogueId);
return;
}
return;
}
if (start <= end && realHeight < end) { realHeight += config.smoothStep; }
else if (start >= end && realHeight > end) { realHeight -= config.smoothStep; }
etm$(catalogueId + "-sub").style.height = realHeight + "px";
};
/**
* Call back function when finish showing.
*/
var whenFinishShowing = function(catalogueId)
{
var threadId = eachCatalogueStatus[catalogueId].threadId;
if (threadId) { clearInterval(threadId); }
eachCatalogueStatus[catalogueId].open = true;
};
/**
* Call back function when finish hiding.
*/
var whenFinishHiding = function(catalogueId)
{
var threadId = eachCatalogueStatus[catalogueId].threadId;
if (threadId) { clearInterval(threadId); }
var subCatalogue = etm$(catalogueId + "-sub");
subCatalogue.style.display = "none";
subCatalogue.hidden = "hidden";
subCatalogue.style.height = eachCatalogueStatus[catalogueId].realHeightStr;
eachCatalogueStatus[catalogueId].open = false;
};
/**
* Keeping lock when changing one sub catalogue display state.
* This method is used to check if the changing process has been finished.
*/
var whenCheckHidingSelf = function(catalogueId)
{
// If hiding process hasn't been finished, return.
if (eachCatalogueStatus[catalogueId].open) { return; }
var checkThreadId = eachCatalogueStatus[catalogueId].checkThreadId;
if (checkThreadId) { clearInterval(checkThreadId); }
lastOpenedCatalogueId = null;
lock = false;
}
/**
* Keeping lock when changing one sub catalogue display state.
* This method is used to check if the changing process has been finished.
*/
var whenCheckOpenNew = function(catalogueId)
{
// If opening process hasn't been finished, return.
if (lastOpenedCatalogueId != null && eachCatalogueStatus[lastOpenedCatalogueId].open
|| !(eachCatalogueStatus[catalogueId].open)) { return; }
var checkThreadId = eachCatalogueStatus[catalogueId].checkThreadId;
if (checkThreadId) { clearInterval(checkThreadId); }
lastOpenedCatalogueId = catalogueId;
lock = false;
}
|