Made active tab for each character a session variable
This commit is contained in:
@@ -8,23 +8,23 @@
|
||||
<paper-icon-button icon="more-vert" role="button"></paper-icon-button>
|
||||
<div class="bottom fit" horizontal layout>
|
||||
<paper-tabs flex horizontal center layout id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}">
|
||||
<paper-tab>Stats</paper-tab>
|
||||
<paper-tab>Features</paper-tab>
|
||||
<paper-tab>Inventory</paper-tab>
|
||||
<paper-tab>Spells</paper-tab>
|
||||
<paper-tab>Persona</paper-tab>
|
||||
<paper-tab>Journal</paper-tab>
|
||||
<paper-tab name="stats">Stats</paper-tab>
|
||||
<paper-tab name="features">Features</paper-tab>
|
||||
<paper-tab name="inventory">Inventory</paper-tab>
|
||||
<paper-tab name="spells">Spells</paper-tab>
|
||||
<paper-tab name="persona">Persona</paper-tab>
|
||||
<paper-tab name="journal">Journal</paper-tab>
|
||||
</paper-tabs>
|
||||
</div>
|
||||
</core-toolbar>
|
||||
<div fit>
|
||||
<core-animated-pages id="tabPages" selected={{selectedTab}} transitions="slide-from-right" fit>
|
||||
<section flex>{{> stats}}</section>
|
||||
<section flex>{{> features}}</section>
|
||||
<section flex>{{> inventory}}</section>
|
||||
<section flex>{{> spells}}</section>
|
||||
<section flex>{{> persona}}</section>
|
||||
<section flex>{{> journal}}</section>
|
||||
<section flex name="stats">{{> stats}}</section>
|
||||
<section flex name="features">{{> features}}</section>
|
||||
<section flex name="inventory">{{> inventory}}</section>
|
||||
<section flex name="spells">{{> spells}}</section>
|
||||
<section flex name="persona">{{> persona}}</section>
|
||||
<section flex name="journal">{{> journal}}</section>
|
||||
</core-animated-pages>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,58 +1,26 @@
|
||||
Template.characterSheet.created = function(){
|
||||
Template.instance().selectedTab = new ReactiveVar(0)
|
||||
Session.setDefault(this.data._id + ".selectedTab", "stats");
|
||||
}
|
||||
|
||||
var setTab = function(charId, tab){
|
||||
return Session.set(charId + ".selectedTab", tab);
|
||||
};
|
||||
|
||||
var setTab = function(instance, num){
|
||||
instance.selectedTab.set(num);
|
||||
};
|
||||
|
||||
var incTab = function(instance, num){
|
||||
var current = +instance.selectedTab.get();
|
||||
var selected = current + num;
|
||||
if (selected < 0) return;
|
||||
if (selected >= document.querySelector('#tabPages').children.length) return;
|
||||
setTab(instance, selected);
|
||||
};
|
||||
|
||||
Template.characterSheet.rendered = function(){
|
||||
var observer = new ObjectObserver(document.querySelector('#characterSheetTabs'));
|
||||
var instance = Template.instance();
|
||||
observer.open(function(added, removed, changed, getOldValueFn) {
|
||||
Object.keys(changed).forEach(function(property) {
|
||||
if(property === "selected"){
|
||||
var selected = changed[property];
|
||||
setTab(instance, selected);
|
||||
}
|
||||
})
|
||||
});
|
||||
var getTab = function(charId){
|
||||
return Session.get(charId + ".selectedTab");
|
||||
};
|
||||
|
||||
Template.characterSheet.helpers({
|
||||
selectedTab: function(){
|
||||
return Template.instance().selectedTab.get();
|
||||
return getTab(this._id);
|
||||
}
|
||||
});
|
||||
|
||||
Template.characterSheet.events({
|
||||
"#tabPages track": function(event){
|
||||
console.log(event);
|
||||
},
|
||||
"swipeleft": function(event){
|
||||
incTab(Template.instance(), 1);
|
||||
},
|
||||
"swiperight": function(event){
|
||||
incTab(Template.instance(), -1);
|
||||
},
|
||||
"core-animated-pages-transition-end #tabPages": function(event) {
|
||||
event.stopPropagation();
|
||||
},
|
||||
"tap #characterSheetTabs paper-tab": function(event, instance){
|
||||
setTab(this._id, event.currentTarget.getAttribute("name"));
|
||||
}
|
||||
});
|
||||
|
||||
/* requires the following templates
|
||||
stats
|
||||
features
|
||||
persona
|
||||
inventory
|
||||
spellbook
|
||||
journal
|
||||
*/
|
||||
Reference in New Issue
Block a user