Permalink
Browse files

Support data-transition-duration attributes for step elements.

If the next element has its own data-transition-duration attribute,
use that value instead of the global setting.

References:
impress#142
  • Loading branch information...
henrikingo committed Aug 17, 2016
1 parent e0a3d52 commit 2d10360215ca921523ee274c796092f8d63e55ca
Showing with 31 additions and 11 deletions.
  1. +5 −1 examples/classic-slides/index.html
  2. +13 −5 js/impress.js
  3. +4 −5 src/impress.js
  4. +7 −0 src/plugins/goto/goto.js
  5. +2 −0 src/plugins/skip/skip.js
@@ -391,8 +391,12 @@ <h2>Acme Inc Quarterly Profits</h2>
<!--
Finally, the relative positioning plugin also supports values that are a multiple of the windows size.
Add "w" or "h" to specify a multiple of window width or height, respectively.
This step also sets a custom data-transition-duration. All of the above steps used the value set
in the root div#impress element, but it is also allowed to set it for each step. Since transitioning
to this step will rotate twice around it's axis, we give the transition a bit more time here.
-->
<div id="moreinfo" class="step slide" data-rel-x="1.4w" data-rel-y="0.8w" data-rotate="720">
<div id="moreinfo" class="step slide" data-rel-x="1.4w" data-rel-y="0.8w" data-rotate="720" data-transition-duration="2000">
<h1>More info</h1>
<ul>
<li>Official documentation
View
@@ -354,6 +354,7 @@
z: toNumber(data.rotateZ || data.rotate)
},
scale: toNumber(data.scale, 1),
transitionDuration: toNumber(data.transitionDuration, config.transitionDuration),
el: el
};
@@ -483,22 +484,20 @@
// If you are reading this and know any better way to handle it, I'll be glad to hear about it!
window.scrollTo(0, 0);
var step = stepsData["impress-" + el.id];
// If we are in fact moving to another step, start with executing the registered preStepLeave plugins.
if (activeStep && activeStep !== el) {
// Execute the registered preStepLeave plugins
var event = { target: activeStep, detail : {} };
event.detail.next = el;
event.detail.transitionDuration = toNumber(duration, config.transitionDuration);
event.detail.transitionDuration = step.transitionDuration;
event.detail.reason = reason;
execPreStepLeavePlugins(event);
// Plugins are allowed to change the detail values
// We assign them back to corresponding vars purely to minimize diff against upstream
el = event.detail.next;
duration = event.detail.transitionDuration;
}
var step = stepsData["impress-" + el.id];
if ( activeStep ) {
activeStep.classList.remove("active");
body.classList.remove("impress-on-" + activeStep.id);
@@ -1214,12 +1213,15 @@
// Handle event.target data-goto-next attribute
if ( !isNaN(data.gotoNext) && event.detail.reason == "next" ) {
event.detail.next = steps[data.gotoNext];
// If the new next element has its own transitionDuration, we're responsible for setting that on the event as well
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
if ( data.gotoNext && event.detail.reason == "next" ) {
var newTarget = document.getElementById( data.gotoNext );
if ( newTarget && newTarget.classList.contains("step") ) {
event.detail.next = newTarget;
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
else {
@@ -1230,12 +1232,14 @@
// Handle event.target data-goto-prev attribute
if ( !isNaN(data.gotoPrev) && event.detail.reason == "prev" ) {
event.detail.next = steps[data.gotoPrev];
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
if ( data.gotoPrev && event.detail.reason == "prev" ) {
var newTarget = document.getElementById( data.gotoPrev );
if ( newTarget && newTarget.classList.contains("step") ) {
event.detail.next = newTarget;
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
else {
@@ -1246,12 +1250,14 @@
// Handle event.target data-goto attribute
if ( !isNaN(data.goto) ) {
event.detail.next = steps[data.goto];
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
if ( data.goto ) {
var newTarget = document.getElementById( data.goto );
if ( newTarget && newTarget.classList.contains("step") ) {
event.detail.next = newTarget;
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
else {
@@ -1892,6 +1898,8 @@
event.detail.next = getPrevStep( event.detail.next );
skip( event );
}
// If the new next element has its own transitionDuration, we're responsible for setting that on the event as well
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
}
};
View
@@ -354,6 +354,7 @@
z: toNumber(data.rotateZ || data.rotate)
},
scale: toNumber(data.scale, 1),
transitionDuration: toNumber(data.transitionDuration, config.transitionDuration),
el: el
};
@@ -483,22 +484,20 @@
// If you are reading this and know any better way to handle it, I'll be glad to hear about it!
window.scrollTo(0, 0);
var step = stepsData["impress-" + el.id];
// If we are in fact moving to another step, start with executing the registered preStepLeave plugins.
if (activeStep && activeStep !== el) {
// Execute the registered preStepLeave plugins
var event = { target: activeStep, detail : {} };
event.detail.next = el;
event.detail.transitionDuration = toNumber(duration, config.transitionDuration);
event.detail.transitionDuration = step.transitionDuration;
event.detail.reason = reason;
execPreStepLeavePlugins(event);
// Plugins are allowed to change the detail values
// We assign them back to corresponding vars purely to minimize diff against upstream
el = event.detail.next;
duration = event.detail.transitionDuration;
}
var step = stepsData["impress-" + el.id];
if ( activeStep ) {
activeStep.classList.remove("active");
body.classList.remove("impress-on-" + activeStep.id);
View
@@ -34,12 +34,15 @@
// Handle event.target data-goto-next attribute
if ( !isNaN(data.gotoNext) && event.detail.reason == "next" ) {
event.detail.next = steps[data.gotoNext];
// If the new next element has its own transitionDuration, we're responsible for setting that on the event as well
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
if ( data.gotoNext && event.detail.reason == "next" ) {
var newTarget = document.getElementById( data.gotoNext );
if ( newTarget && newTarget.classList.contains("step") ) {
event.detail.next = newTarget;
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
else {
@@ -50,12 +53,14 @@
// Handle event.target data-goto-prev attribute
if ( !isNaN(data.gotoPrev) && event.detail.reason == "prev" ) {
event.detail.next = steps[data.gotoPrev];
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
if ( data.gotoPrev && event.detail.reason == "prev" ) {
var newTarget = document.getElementById( data.gotoPrev );
if ( newTarget && newTarget.classList.contains("step") ) {
event.detail.next = newTarget;
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
else {
@@ -66,12 +71,14 @@
// Handle event.target data-goto attribute
if ( !isNaN(data.goto) ) {
event.detail.next = steps[data.goto];
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
if ( data.goto ) {
var newTarget = document.getElementById( data.goto );
if ( newTarget && newTarget.classList.contains("step") ) {
event.detail.next = newTarget;
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
return;
}
else {
View
@@ -55,6 +55,8 @@
event.detail.next = getPrevStep( event.detail.next );
skip( event );
}
// If the new next element has its own transitionDuration, we're responsible for setting that on the event as well
event.detail.transitionDuration = toNumber( event.detail.next.dataset.transitionDuration, event.detail.transitionDuration);
}
};

0 comments on commit 2d10360

Please sign in to comment.