Skip to content

Commit

Permalink
Support data-transition-duration atrtributes for step elements.
Browse files Browse the repository at this point in the history 
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
henrikingo committed Aug 17, 2016
1 parent e0a3d52 commit 4deace9
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 11 deletions.
6 changes: 5 additions & 1 deletion examples/classic-slides/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
18 changes: 13 additions & 5 deletions js/impress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,7 @@
z: toNumber(data.rotateZ || data.rotate)
},
scale: toNumber(data.scale, 1),
transitionDuration: toNumber(data.transitionDuration, config.transitionDuration),
el: el
};

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}
};

Expand Down
9 changes: 4 additions & 5 deletions src/impress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,7 @@
z: toNumber(data.rotateZ || data.rotate)
},
scale: toNumber(data.scale, 1),
transitionDuration: toNumber(data.transitionDuration, config.transitionDuration),
el: el
};

Expand Down Expand Up @@ -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);
Expand Down
7 changes: 7 additions & 0 deletions src/plugins/goto/goto.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
2 changes: 2 additions & 0 deletions src/plugins/skip/skip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};

Expand Down

0 comments on commit 4deace9

Please sign in to comment.