jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrated the Feature page to Polymer 1

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-20 15:45:18 +02:00
parent 4261776d8c
commit 33ca60c2e6
20 changed files with 613 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
rpg-docs/client/globalHelpers/openParentDialog.js
View File

@@ -1,32 +1,23 @@
openParentDialog = function(parent, charId, heroId) {
var detail;
openParentDialog = function({
parent, charId, element, returnElement, callback,
}) {
let template;
let data;
if (parent.collection === "Characters" && parent.group === "racial") {
detail = {
template: "raceDialog",
data: {charId: parent.id},
};
template = "raceDialog";
data = {charId: parent.id};
} else if (parent.collection === "Features") {
detail = {
template: "featureDialog",
data: {featureId: parent.id},
};
template = "featureDialog";
data = {featureId: parent.id};
} else if (parent.collection === "Classes") {
detail = {
template: "classDialog",
data: {classId: parent.id},
};
template = "classDialog";
data = {classId: parent.id};
} else if (parent.collection === "Items") {
detail = {
template: "itemDialog",
data: {itemId: parent.id},
};
template = "itemDialog";
data = {itemId: parent.id};
} else if (parent.collection === "Spells") {
detail = {
template: "spellDialog",
data: {spellId: parent.id},
};
template = "spellDialog";
data = {spellId: parent.id};
}
detail.heroId = heroId;
detail.charId = charId;
GlobalUI.setDetail(detail);
pushDialogStack({template, data, element, returnElement, callback});
};

7
rpg-docs/client/style/main.css
View File

@@ -55,6 +55,8 @@ paper-icon-item::shadow #contentIcon {
position: fixed;
bottom: 24px;
right: 24px;
/* stop the fab from flashing during animation */
transform: translateZ(0);
}
paper-fab {
@@ -75,6 +77,11 @@ paper-button {
text-transform: uppercase;
}
dicecloud-selector paper-item {
white-space: nowrap;
overflow: hidden;
}
/*Style shortcuts*/
.scroll-y {
overflow-y: auto;

4
rpg-docs/client/views/character/characterSettings/shareDialog.html
View File

@@ -8,10 +8,10 @@
</app-header>
<div class="form flex">
<paper-dropdown-menu label="Who can view this character">
<paper-listbox class="visibilityDropdown dropdown-content" selected={{viewPermission}} attr-for-selected="name">
<dicecloud-selector class="visibilityDropdown dropdown-content" selected={{viewPermission}}>
<paper-item name="whitelist">Only people I share with</paper-item>
<paper-item name="public">Anyone with link</paper-item>
</paper-listbox>
</dicecloud-selector>
</paper-dropdown-menu>
<div class="layout horizontal center wrap">
<paper-input class="flex" id="userNameOrEmailInput" label="Share with username or email" floatinglabel></paper-input>

9
rpg-docs/client/views/character/characterSheet.js
View File

@@ -30,24 +30,21 @@ Template.characterSheet.events({
"color-change": function(event, instance){
Characters.update(this._id, {$set: {color: event.color}});
},
"tap #deleteCharacter": function(event, instance){
const menu = instance.find(".character-menu");
"click #deleteCharacter": function(event, instance){
pushDialogStack({
data: this,
template: "deleteCharacterConfirmation",
element: event.currentTarget.parentElement.parentElement,
});
},
"tap #shareCharacter": function(event, instance){
const menu = instance.find(".character-menu");
"click #shareCharacter": function(event, instance){
pushDialogStack({
data: this,
template: "shareDialog",
element: event.currentTarget.parentElement.parentElement,
});
},
"tap #characterSettings": function(event, instance){
const menu = instance.find(".character-menu");
"click #characterSettings": function(event, instance){
pushDialogStack({
data: this,
template: "characterSettings",

61
rpg-docs/client/views/character/features/featureDialog/featureDialog.html
View File

@@ -10,10 +10,9 @@
<template name="featureDetails">
{{#if or canEnable hasUses}}
<div layout horizontal center justified wrap>
<div class="layout horizontal center justified wrap">
{{#if canEnable}}
<div>enabled:</div>
<paper-checkbox class="sideMargin" checked={{enabled}}></paper-checkbox>
<paper-checkbox class="sideMargin" checked={{enabled}}>enabled</paper-checkbox>
{{/if}}
{{#if hasUses}}
<div class="subhead" style="margin-right: 16px">
@@ -21,7 +20,7 @@
</div>
{{/if}}
{{#if hasUses}}
<div layout horizontal>
<div class="layout horizontal">
<paper-button class="useFeature" disabled={{noUsesLeft}}>Use</paper-button>
<paper-button class="resetFeature" disabled={{usesFull}}>Reset</paper-button>
</div>
@@ -41,44 +40,36 @@
<template name="featureEdit">
<!--name-->
<paper-input id="featureNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
<paper-input id="featureNameInput" class="fullwidth" label="Name" value={{name}}></paper-input>
<hr class="vertMargin">
<div layout horizontal center style="height: 60px;">
<paper-dropdown-menu id="enabledDropdown" label="Enable Feature">
<paper-dropdown layered class="dropdown">
<core-menu id="enabledMenu" class="menu" selected={{enabledSelection}} on-tap="onStatMenuTap">
<paper-item name="alwaysEnabled"> Always Enabled </paper-item>
<paper-item name="enabled"> Enabled </paper-item>
<paper-item name="disabled"> Disabled </paper-item>
</core-menu>
</paper-dropdown>
<div class="layout horizontal center wrap justified">
<paper-dropdown-menu class=flex label="Enable Feature" style="flex-basis: 150px; max-width: 200px;">
<dicecloud-selector selected={{enabledSelection}} class="dropdown-content enabled-dropdown">
<paper-item name="alwaysEnabled" style="width: 150px;">
Always Enabled
</paper-item>
<paper-item name="enabled">
Enabled
</paper-item>
<paper-item name="disabled">
Disabled
</paper-item>
</dicecloud-selector>
</paper-dropdown-menu>
<div layout horizontal center class="sideMargin">
<div>Limit Uses: </div>
<paper-toggle-button id="limitUseCheck"
class="sideMargin"
checked={{usesSet}}
role="button"
aria-pressed="false"
tabindex="0"
touch-action="pan-y">
</paper-toggle-button>
</div>
<paper-toggle-button id="limitUseCheck" checked={{usesSet}} style="margin: 0 16px; height: 62px;">
Limit uses
</paper-toggle-button>
{{#if usesSet}}
<paper-input flex id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
<paper-input id="usesInput" type="number" allowed-pattern="[0-9]" class="flex"
label="Uses" value={{uses}} style="flex-basis: 100px; max-width: 200px">
</paper-input>
{{else}}
<div class="flex" style="flex-basis: 100px; max-width: 200px"></div>
{{/if}}
</div>
<hr class="vertMargin">
<!--description-->
<paper-input-decorator label="Description" floatinglabel layout vertical>
<paper-autogrow-textarea>
<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-textarea label="Description" id="featureDescriptionInput" value={{description}}></paper-textarea>
{{> effectsEditList parentId=_id parentCollection="Features" charId=charId name=name enabled=enabled}}
{{> proficiencyEditList parentId=_id parentCollection="Features" charId=charId enabled=enabled}}

65
rpg-docs/client/views/character/features/featureDialog/featureDialog.js
View File

@@ -31,11 +31,11 @@ Template.featureDetails.helpers({
});
Template.featureDetails.events({
"tap .useFeature": function(event){
"click .useFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$inc: {used: 1}});
},
"tap .resetFeature": function(event){
"click .resetFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$set: {used: 0}});
},
@@ -46,10 +46,6 @@ Template.featureDetails.events({
},
});
Template.featureEdit.onRendered(function(){
updatePolymerInputs(this);
});
Template.featureEdit.helpers({
usesSet: function(){
return _.isString(this.uses);
@@ -67,32 +63,53 @@ Template.featureEdit.helpers({
},
});
const debounce = (f) => _.debounce(f, 300);
Template.featureEdit.events({
"change #featureNameInput": function(event){
var name = Template.instance().find("#featureNameInput").value;
Features.update(this._id, {$set: {name: name}});
},
"change #featureDescriptionInput": function(event){
var description = Template.instance().find("#featureDescriptionInput").value;
Features.update(this._id, {$set: {description: description}});
},
"change #limitUseCheck": function(event){
"input #featureNameInput": debounce(function(event){
var name = event.currentTarget.value;
Features.update(this._id, {
$set: {name: name}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"input #featureDescriptionInput": debounce(function(event){
var description = event.currentTarget.value;
Features.update(this._id, {
$set: {description: description}
}, {
removeEmptyStrings: false,
trimStrings: false,
});
}),
"change #limitUseCheck": debounce(function(event){
var currentUses = this.uses;
var featureId = this._id;
if (event.target.checked && !_.isString(currentUses)){
Features.update(featureId, {$set: {uses: ""}}, {removeEmptyStrings: false});
Features.update(featureId, {
$set: {uses: ""}
}, {
removeEmptyStrings: false
});
} else if (!event.target.checked && _.isString(currentUses)){
Features.update(featureId, {$unset: {uses: ""}});
Features.update(featureId, {
$unset: {uses: ""}
});
}
},
"change #usesInput, input #quantityInput": function(event){
var value = event.target.value;
}),
"input #usesInput, input #quantityInput": debounce(function(event){
var value = event.currentTarget.value;
var featureId = this._id;
Features.update(featureId, {$set: {uses: value}});
},
"core-select #enabledDropdown": function(event){
Features.update(featureId, {
$set: {uses: value}
}, {
removeEmptyStrings: false,
});
}),
"iron-select .enabled-dropdown": function(event){
var detail = event.originalEvent.detail;
if (!detail.isSelected) return;
var value = detail.item.getAttribute("name");
var setter;
if (value === "enabled"){

4
rpg-docs/client/views/character/features/features.css
View File

@@ -3,10 +3,6 @@
}
.features {
display: flex !important;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
padding: 4px;
}

110
rpg-docs/client/views/character/features/features.html
View File

@@ -1,20 +1,19 @@
<template name="features">
<div fit>
<div class="scroll-y" fit>
<div class="column-container">
<!--expertiseDice-->
{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
<!--ki-->
{{>resource name="ki" title="Ki Points" color="teal" char=this}}
<!--rages-->
{{>resource name="rages" title="Rages" color="teal" char=this}}
<!--sorceryPoints-->
{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
<!--superiorityDice-->
{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
<div class="features">
<div class="column-container">
<!--expertiseDice-->
{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
<!--ki-->
{{>resource name="ki" title="Ki Points" color="teal" char=this}}
<!--rages-->
{{>resource name="rages" title="Rages" color="teal" char=this}}
<!--sorceryPoints-->
{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
<!--superiorityDice-->
{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
<!--Attacks-->
<div>
<!--Attacks-->
<div>
<paper-material class="card">
<div class="top white">
Attacks
@@ -22,23 +21,21 @@
<div class="bottom list">
{{#each attacks}}
<div class="item-slot">
<div class="flexible attack item"
hero-id="main" {{detailHero}}>
<div layout horizontal>
<div class="headline"
style="margin-right: 16px;"
layout horizontal center>
<div class="flexible attack item">
<div class="layout horizontal">
<div class="paper-font-headline layout horizontal center"
style="margin-right: 16px;">
{{evaluateSigned ../_id attackBonus}}
</div>
<div flex layout vertical>
<div class="body2">
<div class="flex layout vertical">
<div class="paper-font-body2">
{{name}}
</div>
<div>
{{evaluateString ../_id damage}}&nbsp;{{damageType}}
</div>
{{#if details}}
<div class="caption">
<div>
{{details}}
</div>
{{/if}}
@@ -49,46 +46,43 @@
{{/each}}
</div>
</paper-material>
</div>
</div>
<!--Proficiencies-->
<div>
<!--Proficiencies-->
<div>
<paper-material class="card">
<div class="white top">
Proficiencies
</div>
<div flex class="bottom list">
{{#if weaponProfs.count}}
<div class="subhead">Weapons</div>
<div class="paper-font-subhead">Weapons</div>
{{/if}}
{{#each weaponProfs}}
{{> proficiencyListItem}}
{{/each}}
{{#if armorProfs.count}}
<div class="subhead">Armor</div>
<div class="paper-font-subhead">Armor</div>
{{/if}}
{{#each armorProfs}}
{{> proficiencyListItem}}
{{/each}}
{{#if toolProfs.count}}
<div class="subhead">Tools</div>
<div class="paper-font-subhead">Tools</div>
{{/if}}
{{#each toolProfs}}
{{> proficiencyListItem}}
{{/each}}
</div>
</paper-material>
</div>
</div>
<!--features-->
{{#each features}}
<div>
<paper-material class="card featureCard"
hero-id="main" {{detailHero}}>
<div class="top {{colorClass}} subhead"
layout horizontal
hero-id="toolbar" {{detailHero}}>
<div flex hero-id="title" {{detailHero}}>
<!--features-->
{{#each features}}
<div>
<paper-material class="card featureCard" data-id={{_id}}>
<div class="top {{colorClass}} paper-font-subhead layout horizontal">
<div class="flex">
{{name}}
</div>
{{#if hasUses}}
@@ -97,22 +91,22 @@
</div>
{{/if}}
{{#if canEnable}}
<core-tooltip label="Feature enabled"
position="left">
<div>
<paper-checkbox class="enabledCheckbox"
checked={{enabled}}
disabled={{#unless canEditCharacter charId}}true{{/unless}}>
</paper-checkbox>
</core-tooltip>
<paper-tooltip position="left">Feature enabled</paper-tooltip>
</div>
{{/if}}
</div>
{{#if description}}
<div flex class="bottom">
<div class="bottom flex">
{{#markdown}}{{evaluateString charId shortDescription}}{{/markdown}}
</div>
{{/if}}
{{#if hasUses}}
<div layout horizontal center end-justified>
<div class="layout horizontal center end-justified">
<paper-button class="useFeature"
disabled={{noUsesLeft}}>
Use
@@ -124,20 +118,15 @@
</div>
{{/if}}
</paper-material>
</div>
{{/each}}
</div>
<div class="fab-buffer"></div>
</div>
{{/each}}
</div>
{{#if canEditCharacter _id}}
<paper-fab id="addFeature"
class="floatyButton"
icon="add"
title="Add"
role="button"
tabindex="0"
aria-label="Add"
hero-id="main"></paper-fab>
icon="add">
<paper-tooltip position="left">Add Feature</paper-tooltip>
</paper-fab>
{{/if}}
</div>
</template>
@@ -145,12 +134,8 @@
<template name="resource">
{{#if characterCalculate "attributeBase" char._id name}}
<div>
<paper-material class="card"
hero-id="main" {{detailHero name char._id}}
layout horizontal>
<div class="left {{getColor}} display1 white-text"
hero-id="toolbar" {{detailHero name char._id}}
layout horizontal center>
<paper-material class="card layout horizontal">
<div class="left {{getColor}} paper-font-display1 white-text layout horizontal center">
<div style="margin-right: 8px;">
<paper-icon-button class="resourceUp"
icon="arrow-drop-up"
@@ -164,8 +149,7 @@
<div>{{characterCalculate "attributeValue" char._id name}}</div>
<!--<div>/{{char.attributeBase name}}</div>-->
</div>
<div class="right clickable"
flex layout horizontal center>
<div class="right clickable flex layout horizontal center">
{{title}}
</div>
</paper-material>

51
rpg-docs/client/views/character/features/features.js
View File

@@ -43,54 +43,45 @@ Template.features.helpers({
});
Template.features.events({
"tap #addFeature": function(event){
"click #addFeature": function(event, instance){
var featureId = Features.insert({
name: "New Feature",
charId: this._id,
enabled: true,
alwaysEnabled: true,
});
GlobalUI.setDetail({
pushDialogStack({
template: "featureDialog",
data: {featureId: featureId, charId: this._id, startEditing: true},
heroId: featureId,
element: event.currentTarget,
returnElement: instance.find(`.featureCard[data-id='${featureId}']`),
});
},
"tap #addAttackButton": function(event){
var charId = this._id;
Attacks.insert({
charId: charId
}, function(error, id){
if (!error){
GlobalUI.setDetail({
template: "attackDialog",
data: {attackId: id, charId: charId},
heroId: id,
});
}
});
},
"tap .featureCard .top": function(event){
"click .featureCard .top": function(event){
var featureId = this._id;
var charId = Template.parentData()._id;
GlobalUI.setDetail({
pushDialogStack({
template: "featureDialog",
data: {featureId: featureId, charId: charId},
heroId: featureId,
element: event.currentTarget.parentElement,
});
},
"tap .attack": function(event){
openParentDialog(this.parent, this.charId, this._id);
"click .attack": function(event){
openParentDialog({
parent: this.parent,
charId: this.charId,
element: event.currentTarget,
});
},
"tap .useFeature": function(event){
"click .useFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$inc: {used: 1}});
},
"tap .resetFeature": function(event){
"click .resetFeature": function(event){
var featureId = this._id;
Features.update(featureId, {$set: {used: 0}});
},
"tap .enabledCheckbox": function(event){
"click .enabledCheckbox": function(event){
event.stopPropagation();
},
"change .enabledCheckbox": function(event){
@@ -122,7 +113,7 @@ Template.resource.helpers({
});
Template.resource.events({
"tap .resourceUp": function(event){
"click .resourceUp": function(event){
var value = Characters.calculate.attributeValue(this.char._id, this.name);
var base = Characters.calculate.attributeBase(this.char._id, this.name);
if (value < base){
@@ -131,7 +122,7 @@ Template.resource.events({
Characters.update(this.char._id, modifier, {validate: false});
}
},
"tap .resourceDown": function(event){
"click .resourceDown": function(event){
var value = Characters.calculate.attributeValue(this.char._id, this.name);
if (value > 0){
var modifier = {$inc: {}};
@@ -139,11 +130,11 @@ Template.resource.events({
Characters.update(this.char._id, modifier, {validate: false});
}
},
"tap .right": function(event, instance) {
GlobalUI.setDetail({
"click .right": function(event, instance) {
pushDialogStack({
template: "attributeDialog",
data: {name: this.title, statName: this.name, charId: this.char._id},
heroId: this.char._id + this.name,
element: event.currentTarget.parentElement,
});
},
});

2
rpg-docs/client/views/character/stats/stats.html
View File

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

0
rpg-docs/client/views/home/intro/intro.scss → rpg-docs/client/views/home/intro/intro.css
View File

5
rpg-docs/client/views/layout/layout.css
View File

@@ -1,10 +1,5 @@
#accountSummary {
padding: 16px;
min-height: 146px;
background-image: url(/png/paper-dice-crown.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: white;
}

26
rpg-docs/client/views/layout/layout.html
View File

@@ -1,17 +1,19 @@
<template name="layout">
<app-drawer-layout class="layout" responsiveWidth="905px" fullbleed>
<app-drawer-layout class="layout" responsive-width="905px" fullbleed>
<app-drawer>
<app-header-layout mode="seamed" class="white">
<div id="accountSummary">
{{#if currentUser}}
<a href="/account"
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
{{profileLink}}
</a>
{{else}}
<a href="/sign-in" style="color: white;">Sign in</a>
{{/if}}
</div>
<app-header-layout class="white" has-scrolling-region>
<app-header id="accountSummary" effects="waterfall parallax-background" condenses fixed>
<app-toolbar>
{{#if currentUser}}
<a href="/account"
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
{{profileLink}}
</a>
{{else}}
<a href="/sign-in" style="color: white; text-decoration: underline;">Sign in</a>
{{/if}}
</app-toolbar>
</app-header>
<div id="navPanel">
<a href="/" tabindex="-1">
<paper-icon-item id="homeNav">

4
rpg-docs/client/views/layout/polymerImports.html
View File

@@ -8,6 +8,7 @@
</script>
<link rel="import" href="/components/app-layout/app-layout.html">
<link rel="import" href="/components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="/components/app-layout/app-scroll-effects/effects/parallax-background.html">
<link rel="import" href="/components/app-layout/app-scroll-effects/effects/resize-title.html">
<link rel="import" href="/components/iron-icon/iron-icon.html">
@@ -23,6 +24,7 @@
<!--<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-selector/iron-selector.html">
<link rel="import" href="/components/neon-animation/neon-animation.html">
<link rel="import" href="/components/neon-animation/neon-animations.html">
@@ -39,6 +41,7 @@
<link rel="import" href="/components/paper-listbox/paper-listbox.html">
<link rel="import" href="/components/paper-material/paper-material.html">
<link rel="import" href="/components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="/components/paper-menu/paper-menu.html">
<link rel="import" href="/components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="/components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="/components/paper-ripple/paper-ripple.html">
@@ -48,6 +51,7 @@
<link rel="import" href="/components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="/components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="/custom_components/dicecloud-selector/dicecloud-selector.html">
<link rel="import" href="/custom_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
<link rel="import" href="/custom_components/app-theme.html">

1
rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
View File

@@ -6,7 +6,6 @@ Template.colorDropdown.helpers({
Template.colorDropdown.events({
"click paper-item": function(event, instance){
instance.find(".colorDropdown").close();
var color = event.currentTarget.getAttribute("name");
instance.$(".colorDropdown").trigger({
type: "color-change",

7
rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
View File

@@ -6,7 +6,7 @@
bottom: 0;
left: 0;
visibility: visible;
transition: visibility 0s;
transition: visibility 0s linear;
}
.dialog-stack.hide {
@@ -15,8 +15,9 @@
}
.dialog-stack .backdrop {
background: rgba(0,0,0,0.4);
opacity: 1;
background: #000;
transform: translateZ(0);
opacity: 0.4;
transition: opacity 400ms linear;
}

45
rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.js
View File

@@ -2,7 +2,7 @@ dialogs = new ReactiveArray();
const offset = 16;
const duration = 400;
pushDialogStack = function({template, data, element, callback}){
pushDialogStack = function({template, data, element, returnElement, callback}){
// Generate a new _id so that Blaze knows how to shuffle the array
const _id = Random.id();
dialogs.push({
@@ -10,6 +10,7 @@ pushDialogStack = function({template, data, element, callback}){
template,
data,
element,
returnElement,
callback,
});
};
@@ -20,11 +21,6 @@ popDialogStack = function(result){
dialog.callback && dialog.callback(result);
};
let cloneHolder;
Template.dialogStack.onRendered(function(){
cloneHolder = this.find(".clone-holder");
});
Template.dialogStack.helpers({
dialogStackClass(){
if (!dialogs.get().length) return "hide";
@@ -43,13 +39,8 @@ Template.dialogStack.helpers({
});
Template.dialogStack.events({
"click .dialog-stack": function(event){
popDialogStack();
},
"click .dialog-sizer": function(event){
// Returning false from an event handler is the same as calling both
// stopImmediatePropagation and preventDefault on the event.
return false;
"click .dialog-stack .backdrop": function(event){
if (event.target === event.currentTarget) popDialogStack();
},
});
@@ -76,10 +67,11 @@ const imitate = (
element.style.borderRadius = transformedRadius($(source).css("border-radius"));
}
const dialogOpenAnimation = ({element, dialog}) => {
const dialogOpenAnimation = ({element, returnElement, dialog}) => {
const dialogRect = dialog.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
element.style.visibility = "hidden";
if (returnElement) returnElement.style.visibility = "hidden";
// Get how must the element change to become the dialog
const deltaLeft = elementRect.left - dialogRect.left;
const deltaTop = elementRect.top - dialogRect.top;
@@ -103,7 +95,22 @@ const dialogOpenAnimation = ({element, dialog}) => {
}, duration);
}
const dialogCloseAnimation = ({element, dialog, callback}) => {
const dialogCloseAnimation = ({element, returnElement, dialog, callback}) => {
// We are returning to a different element
// pop the original element back in and use the returnElement in its place
if (returnElement){
let originalElement = element;
element = returnElement;
originalElement.style.visibility = "";
originalElement.style.transform = "scale(0)";
_.defer(() => {
originalElement.style.transition = `transform ${duration}ms ease`;
originalElement.style.transform = "";
});
_.delay(() => {
originalElement.style.transition = "";
}, duration);
}
// Reset the dialog if it is mid-transition
dialog.style.transition = "none";
dialog.style.transform = "none";
@@ -171,18 +178,22 @@ Template.dialogStack.uihooks({
if (data.element){
// Store the reference to the element on the DOM node itself,
// since Blaze won't keep the data around for the remove hook
node["data-element"] = data.element;
node._dialogStackElement = data.element;
node._dialogStackReturnElement = data.returnElement;
dialogOpenAnimation({
element: data.element,
returnElement: data.returnElement,
dialog: node,
});
}
},
remove: function(node, tpl) {
const element = node["data-element"];
const element = node._dialogStackElement;
const returnElement = node._dialogStackReturnElement;
if (element){
dialogCloseAnimation({
element,
returnElement,
dialog: node,
callback(){
node.remove();