Added custom tab pages animations

.jscsrc

@@ -13,7 +13,7 @@
 	"disallowMixedSpacesAndTabs": "smart",
 	"disallowTrailingWhitespace": true,
 	"disallowSpaceAfterPrefixUnaryOperators": true,
-	"disallowMultipleVarDecl": true,
+	"disallowMultipleVarDecl": false,
 	"disallowNewlineBeforeBlockStatements": true,
 	"disallowKeywordsOnNewLine": ["else"],
 

rpg-docs/.meteor/packages

@@ -44,3 +44,5 @@ shell-server
 seba:minifiers-autoprefixer
 nikogosovd:multiple-uihooks
 templates:array
+ecmascript
+es5-shim

rpg-docs/.meteor/versions

@@ -40,6 +40,7 @@ ecmascript-runtime@0.3.15
 ecwyne:mathjs@0.25.0
 ejson@1.0.13
 email@1.1.18
+es5-shim@4.6.15
 fastclick@1.0.13
 geojson-utils@1.0.10
 google@1.1.15

rpg-docs/client/style/main.css

@@ -56,7 +56,8 @@ paper-icon-item::shadow #contentIcon {
 	bottom: 24px;
 	right: 24px;
 	/* stop the fab from flashing during animation */
-	transform: translateZ(0);
+	transform: scale(1) translateZ(0px);
+	z-index: 3;
 }
 
 paper-fab {

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

@@ -1,28 +1,3 @@
-paper-tabs {
-	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
-}
-
-app-toolbar paper-tabs {
-	box-shadow: none;
-}
-
-paper-tabs[noink][nobar] paper-tab.core-selected {
-	color: #fff;
-}
-
-paper-tabs /deep/ #selectionBar, #onRadio  {
-	background-color: #d50000;
-}
-
-paper-tabs ::shadow #ink {
-	color: #b22 !important;
-}
-
-paper-tabs.transparent-brown {
-	background-color: transparent;
-	box-shadow: none;
-}
-
 app-toolbar.medium-tall {
 	height: 108px;
 }
@@ -37,3 +12,13 @@ app-toolbar.medium-tall {
 .character-menu paper-icon-item{
 	cursor: pointer;
 }
+
+.character-sheet app-header {
+    position: relative;
+    z-index: 1;
+}
+
+.character-sheet iron-pages > div {
+	overflow-y: auto;
+	overflow-x: hidden;
+}

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

@@ -1,6 +1,6 @@
 <template name="characterSheet">
-	<app-header-layout has-scrolling-region fullbleed>
-		<app-header fixed>
+	<div class="fit layout vertical character-sheet">
+		<app-header fixed effects="waterfall">
 			<app-toolbar class="medium-tall {{colorClass}}">
 				<div top-item class="layout horizontal center">
 					<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
@@ -42,17 +42,17 @@
 				</div>
 			</app-toolbar>
 		</app-header>
-		<div>
-			<neon-animated-pages id="tabPages" selected={{selectedTab}}>
-				<div name="stats">{{> stats}}</div>
-				<div name="features">{{> features}}</div>
-				<div name="inventory">{{> inventory}}</div>
+		<div class="flex" style="position: relative;">
+			<iron-pages id="tabPages" class="fit" selected={{selectedTab}}>
+				<div name="stats" class="tab-page fit">{{> stats}}</div>
+				<div name="features" class="tab-page fit">{{> features}}</div>
+				<div name="inventory" class="tab-page fit">{{> inventory}}</div>
 				{{#unless hideSpellcasting}}
-				<div name="spells">{{> spells}}</div>
+				<div name="spells" class="tab-page fit">{{> spells}}</div>
 				{{/unless}}
-				<div name="persona">{{> persona}}</div>
-				<div name="journal">{{> journal}}</div>
-			</neon-animated-pages>
+				<div name="persona" class="tab-page fit">{{> persona}}</div>
+				<div name="journal" class="tab-page fit">{{> journal}}</div>
+			</iron-pages>
 		</div>
-	</app-header-layout>
+	</div>
 </template>

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);
 };
 

rpg-docs/client/views/character/features/features.html

@@ -1,6 +1,6 @@
 <template name="features">
 	<div class="features">
-		<div class="column-container">
+		<div class="column-container animation-slider">
 			<!--expertiseDice-->
 			{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
 			<!--ki-->

rpg-docs/client/views/character/inventory/inventory.html

@@ -1,5 +1,5 @@
 <template name="inventory">
-	<div id="inventory">
+	<div id="inventory" class="animation-slider">
 		<div class="column-container">
 			<!--Net Worth-->
 			<div>

rpg-docs/client/views/character/stats/stats.html

@@ -1,5 +1,5 @@
 <template name="stats">
-	<div class="stats">
+	<div class="stats animation-slider">
 		<div style="padding: 8px 8px 0 8px">
 			{{> healthCard}}
 		</div>

rpg-docs/client/views/layout/polymerImports.html

@@ -24,10 +24,10 @@
 <!--<link rel="import" href="/components/iron-icons/places-icons.html">-->
 	<link rel="import" href="/components/iron-icons/social-icons.html">
 	<link rel="import" href="/components/iron-image/iron-image.html">
+	<link rel="import" href="/components/iron-pages/iron-pages.html">
 	<link rel="import" href="/components/iron-selector/iron-selector.html">
 
 	<link rel="import" href="/components/neon-animation/neon-animation.html">
-	<link rel="import" href="/components/neon-animation/neon-animations.html">
 
 	<link rel="import" href="/components/paper-button/paper-button.html">
 	<!--<link rel="import" href="/components/paper-checkbox/paper-checkbox.html"> Using custom one instead -->

rpg-docs/public/custom_components/app-theme.html

@@ -21,6 +21,12 @@
 		color: #dedede;
 		color: rgba(255,255,255,0.87);
 	}
+	paper-tabs {
+		--paper-tabs-selection-bar-color: var(--accent-color);
+	}
+	paper-tab {
+		--paper-tab-ink: var(--light-accent-color);
+	}
 	a {
 		color: inherit;
 		text-decoration: none;