User:WindPower/Page.js

From Team Fortress Wiki
Jump to: navigation, search

Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
var nopeWiki = {
	nopeHeight: 873,
	innerNopeHeight: 552,
	nopeWidth: 450,
	maxInnerNeck: 150,
	currentWidth: -1,
	currentHeight: -1,
	currentTarget: -1,
	timer: null,
	stepInterval: 10,
	stepHeight: 2,
	stepMultiplier: 0.1,
	checkInterval: 100,
	clearNode: null,
	contentNode: null,
	headNode: null,
	neckNode: null,
	nopeNode: null,
	swingCenter: -120,
	swingOffset: -120,
	heightSwingAccelFactor: 0.001,
	heightSwingSpeed: 5,
	swingInterval: 15,
	getNeckTop: function(height) {
		return -height + 322;
	},
	getHeadTop: function(height) {
		return -height + 164;
	},
	getNeckSize: function(height) {
		if(height > nopeWiki.nopeHeight) {
			return nopeWiki.maxInnerNeck + height - nopeWiki.nopeHeight;
		}
		return height * nopeWiki.maxInnerNeck / nopeWiki.nopeHeight;
	},
	getNopeTop: function(height) {
		return nopeWiki.currentTarget - nopeWiki.nopeHeight;
	},
	updateHeight: function(height) {
		height = nopeWiki.getNeckSize(height + nopeWiki.swingOffset);
		nopeWiki.headNode.css('top', nopeWiki.getHeadTop(height) + 'px');
		nopeWiki.neckNode.css('top', nopeWiki.getNeckTop(height) + 'px').css('height', height + 'px');
		nopeWiki.nopeNode.css('top', nopeWiki.getNopeTop(height) + 'px');
	},
	step: function() {
		var difference = Math.abs(nopeWiki.currentTarget - nopeWiki.currentHeight);
		if(nopeWiki.currentTarget > nopeWiki.currentHeight) {
			nopeWiki.currentHeight = Math.min(nopeWiki.currentHeight + nopeWiki.stepHeight + nopeWiki.stepMultiplier * difference, nopeWiki.currentTarget);
		} else {
			nopeWiki.currentHeight = Math.max(nopeWiki.currentHeight - nopeWiki.stepHeight - nopeWiki.stepMultiplier * difference, nopeWiki.currentTarget);
		}
		nopeWiki.updateHeight(nopeWiki.currentHeight);
		if(nopeWiki.currentHeight == nopeWiki.currentTarget && nopeWiki.timer != null) {
			clearInterval(nopeWiki.timer);
			nopeWiki.timer = null;
		}
	},
	swing: function() {
		nopeWiki.swingOffset += nopeWiki.heightSwingSpeed;
		nopeWiki.heightSwingSpeed -= (nopeWiki.swingOffset - nopeWiki.swingCenter) * nopeWiki.heightSwingAccelFactor;
		nopeWiki.updateHeight(nopeWiki.currentHeight);
	},
	checkHeight: function() {
		var newWidth = nopeWiki.contentNode.width();
		if(newWidth != nopeWiki.currentWidth) {
			nopeWiki.clearNode.css('width', newWidth + 'px');
			nopeWiki.currentWidth = newWidth;
		}
		var newHeight = nopeWiki.contentNode.height();
		if(newHeight != nopeWiki.currentTarget) {
			// Need to move
			nopeWiki.currentTarget = newHeight;
			if(nopeWiki.timer == null) {
				nopeWiki.timer = setInterval(nopeWiki.step, nopeWiki.stepInterval);
			}
			nopeWiki.clearNode.css('height', Math.max(nopeWiki.nopeHeight, newHeight) + 'px');
		}
	},
	init: function() {
		nopeWiki.clearNode = $('#windpower-clear');
		nopeWiki.contentNode = $('#windpower-content');
		nopeWiki.headNode = $('#windpower-head');
		nopeWiki.neckNode = $('#windpower-neck');
		nopeWiki.nopeNode = $('#windpower-nope');
		nopeWiki.currentWidth = nopeWiki.contentNode.width();
		var height = nopeWiki.contentNode.height();
		nopeWiki.clearNode.css('width', nopeWiki.currentWidth + 'px').css('height', height + 'px');
		nopeWiki.currentHeight = height;
		nopeWiki.currentTarget = height;
		nopeWiki.updateHeight(height);
		setTimeout(function(){setInterval(nopeWiki.checkHeight, nopeWiki.checkInterval); setInterval(nopeWiki.swing, nopeWiki.swingInterval);}, 10);
	}
};
nopeWiki.init();

// Mini 3-tab system; so simple, no need for arrays
var windTabs = {
	switchDuration: 400,
	selectorDuration: 200,
	inactiveOpacity: 0.25,
	hoverOpacity: 0.6,
	tab1: null,
	tab2: null,
	tab3: null,
	tab1Selector: null,
	tab2Selector: null,
	tab3Selector: null,
	selected: 1,
	hoverTab:function(tab) {
		if(tab == windTabs.selected) return;
		if(tab == 1) windTabs.tab1Selector.animate({opacity: windTabs.hoverOpacity}, windTabs.selectorDuration);
		if(tab == 2) windTabs.tab2Selector.animate({opacity: windTabs.hoverOpacity}, windTabs.selectorDuration);
		if(tab == 3) windTabs.tab3Selector.animate({opacity: windTabs.hoverOpacity}, windTabs.selectorDuration);
	},
	unhoverTab:function(tab) {
		if(tab == windTabs.selected) return;
		if(tab == 1) windTabs.tab1Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration);
		if(tab == 2) windTabs.tab2Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration);
		if(tab == 3) windTabs.tab3Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration);
	},
	changeTab:function(tab) {
		if(tab == windTabs.selected) return;
		if(windTabs.selected == 1) {
			windTabs.tab1.hide(windTabs.switchDuration);
			windTabs.tab1Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration);
		}
		if(windTabs.selected == 2) {
			windTabs.tab2.hide(windTabs.switchDuration);
			windTabs.tab2Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration);
		}
		if(windTabs.selected == 3) {
			windTabs.tab3.hide(windTabs.switchDuration);
			windTabs.tab3Selector.animate({opacity: windTabs.inactiveOpacity}, windTabs.selectorDuration);
		}
		windTabs.selected = tab;
		if(tab == 1) {
			windTabs.tab1.show(windTabs.switchDuration);
			windTabs.tab1Selector.animate({opacity: 1}, windTabs.selectorDuration);
		}
		if(tab == 2) {
			windTabs.tab2.show(windTabs.switchDuration);
			windTabs.tab2Selector.animate({opacity: 1}, windTabs.selectorDuration);
		}
		if(tab == 3) {
			windTabs.tab3.show(windTabs.switchDuration);
			windTabs.tab3Selector.animate({opacity: 1}, windTabs.selectorDuration);
		}
	},
	init: function() {
		windTabs.tab1 = $('#windpower-content-1');
		windTabs.tab1Selector = $('#windpower-selector-1').click(function(){windTabs.changeTab(1); return false;}).css('opacity', 1);
		windTabs.tab1Selector.hover(function(){windTabs.hoverTab(1);}, function(){windTabs.unhoverTab(1);});
		windTabs.tab2 = $('#windpower-content-2');
		windTabs.tab2Selector = $('#windpower-selector-2').click(function(){windTabs.changeTab(2); return false;}).css('opacity', windTabs.inactiveOpacity);
		windTabs.tab2Selector.hover(function(){windTabs.hoverTab(2);}, function(){windTabs.unhoverTab(2);});
		windTabs.tab3 = $('#windpower-content-3');
		windTabs.tab3Selector = $('#windpower-selector-3').click(function(){windTabs.changeTab(3); return false;}).css('opacity', windTabs.inactiveOpacity);
		windTabs.tab3Selector.hover(function(){windTabs.hoverTab(3);}, function(){windTabs.unhoverTab(3);});
	}
};
windTabs.init();