Added custom tab pages animations

rpg-docs/client/views/character/characterSheet.js

@@ -1,11 +1,158 @@
+let tabPages, tabSliders, tabFabs, tabFabMenus;
 Template.characterSheet.onRendered(function() {
 	//default to the stats tab
 	Session.setDefault(this.data._id + ".selectedTab", "0");
+
+	// Keep the header's scroll target up to date with the currently selected tab
+	const header = this.find("app-header");
+	this.autorun(() => {
+		const tab = getTab(Template.currentData()._id);
+		Tracker.afterFlush(() => {
+			header.scrollTarget = this.find("#tabPages .iron-selected");
+			header._scrollHandler();
+		});
+	});
+
+	// Store all the tab page components for use in animations
+	tabPages = _.times(6, (n) =>
+		this.$(`.tab-page:nth-child(${n + 1})`)
+	);
+	tabSliders = _.times(6, (n) =>
+		tabPages[n].find(".animation-slider")
+	);
+	tabFabs = _.times(6, (n) =>
+		tabPages[n].find(".floatyButton")
+	);
+	tabFabMenus = _.times(6, (n) =>
+		tabPages[n].find(".mini-holder")
+	);
+
 	//watch this character and make sure their encumbrance is updated
 	//trackEncumbranceConditions(this.data._id, this);
 });
 
+/**
+ * Page change animations that suck less than neon-animated-pages
+ */
+const tabAnimation = ({oldTab, newTab, duration}) => {
+	if (newTab === oldTab) return;
+	duration = duration || 400;
+	const delay = (element, f) => {
+		element.on(
+			"transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
+			(event) => {
+				if (event.target == event.currentTarget){
+					f();
+					$(this).off(event);
+				}
+			}
+		);
+	}
+	const isForward = newTab > oldTab;
+	const entryAnimation = {
+		before: {
+			transform: isForward ? "translateX(100%)" : "translateX(-100%)",
+		},
+		during: {
+			transition: `transform ${duration}ms ease`,
+			transform: "",
+		},
+		after: {
+			transition: "",
+			transform: "",
+		},
+	}
+	const exitAnimation = {
+		before: {
+			transform: "translateZ(0)",
+		},
+		during: {
+			transition: `transform ${duration}ms ease`,
+			transform: isForward ? "translateX(-100%)" : "translateX(100%)",
+		},
+		after: {
+			transition: "",
+			transform: "",
+			display: "",
+		},
+	}
+	const oldPage = tabPages[oldTab];
+	const newPage = tabPages[newTab];
+	if (oldPage.length && newPage.length){
+		oldPage[0].style.setProperty("display", "initial", "important");
+		oldPage.css({zIndex: "1"});
+		newPage.css({zIndex: "0"});
+		_.defer(() => {
+			oldPage.css({
+				transition: `z-index ${duration}ms linear`,
+				zIndex: "0",
+			});
+			newPage.css({
+				transition: `z-index ${duration}ms linear`,
+				zIndex: "1",
+			});
+		});
+		delay(oldPage, () => oldPage.css({
+			display: "",
+			transition: "",
+			zIndex: "",
+		}));
+		delay(newPage, () => newPage.css({
+			transition: "",
+			zIndex: "",
+		}));
+	}
+	const oldSlider = tabSliders[oldTab];
+	if (oldSlider.length){
+		oldSlider.css(exitAnimation.before);
+		_.defer(() => oldSlider.css(exitAnimation.during));
+		delay(oldSlider, () => oldSlider.css(exitAnimation.after));
+	}
+	const newSlider = tabSliders[newTab];
+	if (newSlider.length){
+		newSlider.css(entryAnimation.before);
+		_.defer(() => newSlider.css(entryAnimation.during));
+		delay(newSlider, () => newSlider.css(entryAnimation.after));
+	}
+	slideDown = ({element, reverse}) => {
+		element.css({
+			transform: reverse ? "translateY(80px)" : "",
+		});
+		const fraction = duration / 4;
+		_.defer(() => element.css({
+			transition: reverse ?
+				`transform ${fraction}ms ease-out ${duration - fraction}ms` :
+				`transform ${fraction}ms ease-in`,
+			transform: reverse ? "" : "translateY(80px)",
+		}));
+		delay(element, () => element.css({
+			transition: "",
+		}));
+	}
+
+	const oldFab = tabFabs[oldTab];
+	const newFab = tabFabs[newTab];
+	if (oldFab.length && !newFab.length){
+		slideDown({element: oldFab});
+	}
+	if (newFab.length && !oldFab.length){
+		slideDown({element: newFab, reverse: true});
+	}
+	if (newFab.length && oldFab.length){
+		newFab.css({transform: ""});
+	}
+
+	const oldFabMenu = tabFabMenus[oldTab];
+	if (oldFabMenu.length) {
+		Blaze.getView(oldFabMenu[0]).templateInstance().active.set(false);
+	}
+}
+
 var setTab = function(charId, tab){
+	tabAnimation({
+		oldTab: +Session.get(charId + ".selectedTab"),
+		newTab: +tab,
+	});
 	return Session.set(charId + ".selectedTab", tab);
 };