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

Cleaned up dialogStack

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-16 15:34:03 +02:00
parent 041186059c
commit d4bec4f5e7
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,7 +52,8 @@ const heroAnimate = ({from, to, duration, useClone, callback}) => {
// Get the bounding rectangles of both elements // Get the bounding rectangles of both elements
const toRect = to.getBoundingClientRect(); const toRect = to.getBoundingClientRect();
const fromRect = from.getBoundingClientRect(); const fromRect = from.getBoundingClientRect();
let originalNode, originalVis; let originalNode;
let originalVis;
if (useClone){ if (useClone){
originalNode = to; originalNode = to;
to = originalNode.cloneNode(true); to = originalNode.cloneNode(true);
@@ -80,7 +81,7 @@ const heroAnimate = ({from, to, duration, useClone, callback}) => {
//The radius is defined in pixel units, so get the radius as a number //The radius is defined in pixel units, so get the radius as a number
const rad = +radius.match(/\d+\.?\d*/)[0]; const rad = +radius.match(/\d+\.?\d*/)[0];
// Set the x and y radius of the "to" element, compensating for scale // Set the x and y radius of the "to" element, compensating for scale
to.style.borderRadius = `${rad/deltaWidth}px / ${rad/deltaHeight}px`; to.style.borderRadius = `${rad / deltaWidth}px / ${rad / deltaHeight}px`;
} else if (/^\d+\.?\d*%$/.test(radius)) { } else if (/^\d+\.?\d*%$/.test(radius)) {
//The radius is defined as a percentage, so just use it as is //The radius is defined as a percentage, so just use it as is
to.style.borderRadius = radius; to.style.borderRadius = radius;
@@ -92,7 +93,8 @@ const heroAnimate = ({from, to, duration, useClone, callback}) => {
// Next frame, undo the imitation, let "to" animate into its place // Next frame, undo the imitation, let "to" animate into its place
_.defer(() => { _.defer(() => {
to.style.transition = `all ${duration/1000}s ease, box-shadow ${duration/1000}s linear 0.1s`; to.style.transition = `all ${duration / 1000}s ease, ` +
`box-shadow ${duration / 1000}s linear 0.1s`;
to.style.transform = ""; to.style.transform = "";
to.style.borderRadius = ""; to.style.borderRadius = "";
to.style.background = ""; to.style.background = "";
@@ -114,7 +116,7 @@ Template.dialogStack.uihooks({
".dialog": { ".dialog": {
container: ".dialog-sizer", container: ".dialog-sizer",
insert: function(node, next, tpl) { insert: function(node, next, tpl) {
$(node).insertBefore(next); $(node).insertBefore(next);
const data = Blaze.getData(node); const data = Blaze.getData(node);
if (data.element){ if (data.element){
data.element.style.visibility = "hidden"; data.element.style.visibility = "hidden";
@@ -133,12 +135,16 @@ Template.dialogStack.uihooks({
} else { } else {
node.remove(); node.remove();
} }
} },
} }
}); });
Template.testDialog.events({ Template.testDialog.events({
"click .testButton": function(event, template){ "click .testButton": function(event, template){
pushDialogStack({template: "testDialog", element: event.currentTarget, data: Random.id()}); pushDialogStack({
template: "testDialog",
element: event.currentTarget,
data: Random.id(),
});
}, },
}) })