User:Whiteligh/common.js

From Library of Ruina Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
//adapted form AbnormailityPage.js.
$(function () {
	var globalNavigationWidth = 66;	//NavigationWidth of left
	var scrollbarWidth = 14;	//scrollbar's Width

	//tooltip-left and tooltip-right
	var tooltipLeftWidth = 254;
	var tooltipLeftHeight = 317;
	var tooltipRightWidth = 294;
	var tooltipLeftRightDistance = -39;	
	var tooltipRightExtraHeight = 5;	


	var page = $("body");		//main element of page
	var mains = $(".abnormalitypage-main");	//main element of abnormalitypage
	mains.find("a").removeAttr("title");
	mains.one("mouseenter", function () {
		var main = $(this);
		if (main.attr("data-pageid") != undefined) {
			appendTooltip(main);
		}
		else {
			adjustTooltipPosition(main);
			adjustEffectHeight(main);
			adjustTextSize(main);
		}
	});
	mains.mouseenter(function () {
		adjustTooltipPosition($(this));
	});
	
	function appendTooltip(main) {
		var ID = main.attr("data-pageid");
		if (ID == undefined) return;
		$.ajax({
			url: "/api.php",
			data: {
				action: 'parse',
				text: "{{#invoke:AbnormalityPage|abnormalitypageTooltip|ID=" + ID + "}}",
				format: 'json'
			},
			dataType: 'jsonp',
			success: function (data) {
				var templateContent = data.parse.text['*'];
				var tooltip = $(templateContent).children().eq(0).children().eq(0);
				main.append(tooltip);
				//回调
				adjustTooltipPosition(main);
				adjustTextSize(main);
			}
		});
	}
	function adjustTooltipPosition(main) {
		var tooltipMain = main.children().eq(1);	//tooltip's main element

		var width;	//tooltip's width
		var height;	//tooltip's height
		var extraTopHeight;		//tooltip'extraTopHeight
		var extraBottomHeight;	//tooltip's extraBottomHeight
		var extraLeft;	//left's replenish
		switch (tooltipMain.children().length) {
			case 1:	
				width = tooltipLeftWidth;
				height = tooltipLeftHeight;
				extraTopHeight = 0;
				extraBottomHeight = 0;
				extraLeft = 0;
				break;
			case 2:	
				width = tooltipLeftWidth + tooltipLeftRightDistance + tooltipRightWidth;
				height = tooltipLeftHeight + tooltipRightExtraHeight;
				extraTopHeight = 0;
				extraBottomHeight = tooltipRightExtraHeight;
				extraLeft = 0;
				break;
			case 3:	
				width = tooltipLeftWidth + tooltipLeftRightDistance + tooltipRightWidth;
				height = tooltipLeftHeight + tooltipRightExtraHeight;
				extraLeft = 0;
				break;
			default:
				break;
		}

		var pagePosition = page.offset();
		var mainPosition = main.offset();

		var pageLeft = pagePosition.left + globalNavigationWidth;
		var pageRight = pagePosition.left + page.outerWidth() - scrollbarWidth;

		var mainLeft = mainPosition.left;
		var mainRight = mainLeft + main.outerWidth();

		//If works well,tooltip's border's distance from page's border
		//usually,there's "right" and "bottom" is the distance from left and top+width and height,not from bottom and right.
		var leftDistance = (mainLeft - width + extraLeft) - pageLeft;
		var rightDistance = (mainLeft + extraLeft) - pageRight;	

		//left and right
		if (leftDistance > 0) {	//if left space is enough
			if (rightDistance < 0) {	//if right space is enough
				tooltipMain.css("left", (- width + extraLeft) + "px");	//normally it views on the left
			}
			else {	//if right space is not enough
				tooltipMain.css("left", ((- width + extraLeft) - rightDistance) + "px");
			}
		}
		else {	//if left space is enough,views on the right
			rightDistance = (mainRight + width) - pageRight;
			if (rightDistance < 0) {	//if right space is enough
				tooltipMain.css("left", "initial");	//views on the right
			}
			else {	//if right space is also not enough
				tooltipMain.css("left", ((- width + extraLeft) - leftDistance) + "px");
			}
		}
	}

	//main is combatpage-main's jQuery target
    function adjustTextSize(main) {
        var texts = main.find(".abnormalitypage-desc");
        texts.each(function () {
            var text = $(this);
            var maxSize = 12; 
            var minSize = 1; 
            var step = 1; 
            var fontSize = maxSize; 

            do {
                text.css("font-size", fontSize + "px");
                fontSize = fontSize - step;
            } while (text.prop("scrollHeight") > text.prop("clientHeight") || fontSize < minSize);
		});
	}
});