diff --git a/.jscsrc b/.jscsrc index 85965732..aed9e33e 100644 --- a/.jscsrc +++ b/.jscsrc @@ -13,7 +13,7 @@ "disallowMixedSpacesAndTabs": "smart", "disallowTrailingWhitespace": true, "disallowSpaceAfterPrefixUnaryOperators": true, - "disallowMultipleVarDecl": true, + "disallowMultipleVarDecl": false, "disallowNewlineBeforeBlockStatements": true, "disallowKeywordsOnNewLine": ["else"], diff --git a/rpg-docs/.meteor/packages b/rpg-docs/.meteor/packages index eb28a84f..edc8ae21 100644 --- a/rpg-docs/.meteor/packages +++ b/rpg-docs/.meteor/packages @@ -44,3 +44,5 @@ shell-server seba:minifiers-autoprefixer nikogosovd:multiple-uihooks templates:array +ecmascript +es5-shim diff --git a/rpg-docs/.meteor/versions b/rpg-docs/.meteor/versions index 191af8e6..92a5bf99 100644 --- a/rpg-docs/.meteor/versions +++ b/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 diff --git a/rpg-docs/client/style/main.css b/rpg-docs/client/style/main.css index 16f04ec8..93a8d7dc 100644 --- a/rpg-docs/client/style/main.css +++ b/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 { diff --git a/rpg-docs/client/views/character/characterSheet.css b/rpg-docs/client/views/character/characterSheet.css index 461055e4..5ce11aa5 100644 --- a/rpg-docs/client/views/character/characterSheet.css +++ b/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; +} diff --git a/rpg-docs/client/views/character/characterSheet.html b/rpg-docs/client/views/character/characterSheet.html index c163b663..bb9ce825 100644 --- a/rpg-docs/client/views/character/characterSheet.html +++ b/rpg-docs/client/views/character/characterSheet.html @@ -1,6 +1,6 @@ diff --git a/rpg-docs/client/views/character/characterSheet.js b/rpg-docs/client/views/character/characterSheet.js index 8a46c4b7..41848cff 100644 --- a/rpg-docs/client/views/character/characterSheet.js +++ b/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); }; diff --git a/rpg-docs/client/views/character/features/features.html b/rpg-docs/client/views/character/features/features.html index 16eba8f4..0da844f0 100644 --- a/rpg-docs/client/views/character/features/features.html +++ b/rpg-docs/client/views/character/features/features.html @@ -1,6 +1,6 @@