`
Surmounting
  • 浏览: 62998 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
[原创] 动画效果左边可展开目录 galaxy war, 成功示例 未发布
/**
 * 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;
}
Global site tag (gtag.js) - Google Analytics