Permalink
Browse files

Better activation events.

Rather than activating only when one slide is active, activate and deactivate
based on when slides are visible. Thus, up to two slides may be simultaneously
active.
  • Loading branch information...
1 parent 912969c commit 43fbb9ebf1168b9f510c39b567669cb4cc50dc37 @mbostock committed Jun 3, 2013
Showing with 27 additions and 6 deletions.
  1. +26 −5 stack.v0.js
  2. +1 −1 stack.v0.min.js
View
31 stack.v0.js
@@ -13,6 +13,7 @@ var stack = (function() {
yActual,
yFloor,
yTarget,
+ yActive = -1,
yMax,
yOffset,
n = section[0].length;
@@ -67,14 +68,35 @@ var stack = (function() {
// if scrolling up, jump to edge of previous slide
function leap(yNew) {
if ((yActual < n - 1) && (yActual == yFloor) && (yNew < yActual)) {
- event.deactivate.call(section[0][yFloor], yFloor);
- event.activate.call(section[0][--yFloor], yFloor);
yActual -= .5 - yOffset / size / 2;
scrollTo(0, yActual * size);
+ reactivate();
return true;
}
}
+ function reactivate() {
+ var yNewActive = Math.floor(yActual) + (yActual % 1 ? .5 : 0);
+ if (yNewActive !== yActive) {
+ var yNewActives = {};
+ yNewActives[Math.floor(yNewActive)] = 1;
+ yNewActives[Math.ceil(yNewActive)] = 1;
+ if (yActive >= 0) {
+ var yOldActives = {};
+ yOldActives[Math.floor(yActive)] = 1;
+ yOldActives[Math.ceil(yActive)] = 1;
+ for (var i in yOldActives) {
+ if (i in yNewActives) delete yNewActives[i];
+ else event.deactivate.call(section[0][+i], +i);
+ }
+ }
+ for (var i in yNewActives) {
+ event.activate.call(section[0][+i], +i);
+ }
+ yActive = yNewActive;
+ }
+ }
+
function resize() {
yOffset = (window.innerHeight - size) / 2;
yMax = 1 + yOffset / size;
@@ -115,7 +137,6 @@ var stack = (function() {
}
function scroll() {
-
// Detect whether to scroll with documentElement or body.
if (body !== root && root.scrollTop) body = root;
@@ -129,8 +150,6 @@ var stack = (function() {
yError = Math.min(yMax, (yActual % 1) * 2);
if (yFloor != yNewFloor) {
- if (yFloor != null) event.deactivate.call(section[0][yFloor], yFloor);
- event.activate.call(section[0][yNewFloor], yNewFloor);
location.replace("#" + yNewFloor);
yFloor = yNewFloor;
}
@@ -151,6 +170,8 @@ var stack = (function() {
.style("-moz-transform", yError ? "translate(0,0)" : null)
.style("transform", yError ? "translate(0,0)" : null)
.classed("active", yError > 0);
+
+ reactivate();
}
function snap() {
View
2 stack.v0.min.js
@@ -1 +1 @@
-var stack=function(){function t(t){return w-1>u&&u==d&&u>t?(p.deactivate.call(y[0][d],d),p.activate.call(y[0][--d],d),u-=.5-v/i/2,scrollTo(0,u*i),!0):void 0}function e(){v=(window.innerHeight-i)/2,f=1+v/i,d3.select(g).style("margin-top",v+"px").style("margin-bottom",v+"px").style("height",(w-.5)*i+v+"px")}function n(){var t=+location.hash.slice(1);isNaN(t)||t===d||h.position(t)}function a(){var t;switch(d3.event.keyCode){case 39:if(d3.event.metaKey)return;case 40:case 34:t=d3.event.metaKey?1/0:1;break;case 37:if(d3.event.metaKey)return;case 38:case 33:t=d3.event.metaKey?-1/0:-1;break;case 32:t=d3.event.shiftKey?-1:1;break;default:return}r&&(r=clearTimeout(r)),null==m&&(m=(t>0?Math.floor:Math.ceil)(u==d?d:u+(.5-v/i/2))),h.position(m=Math.max(0,Math.min(w-1,m+t))),d3.event.preventDefault()}function l(){g!==x&&x.scrollTop&&(g=x);var e=Math.max(0,g.scrollTop/i);if(e>=w-1.51+v/i&&(e=w-1),!t(e)){var n=Math.max(0,Math.floor(u=e)),a=Math.min(f,2*(u%1));d!=n&&(null!=d&&p.deactivate.call(y[0][d],d),p.activate.call(y[0][n],n),location.replace("#"+n),d=n),y.classed("active",!1),d3.select(y[0][d]).style("-webkit-transform",a?"translate3d(0,"+-a*i+"px,0)":null).style("-o-transform",a?"translate(0,"+-a*i+"px)":null).style("-moz-transform",a?"translate(0,"+-a*i+"px)":null).style("transform",a?"translate(0,"+-a*i+"px)":null).classed("active",a!=f),d3.select(y[0][d+1]).style("-webkit-transform",a?"translate3d(0,0,0)":null).style("-o-transform",a?"translate(0,0)":null).style("-moz-transform",a?"translate(0,0)":null).style("transform",a?"translate(0,0)":null).classed("active",a>0)}}function o(){var t=d3.event.clientY;if(t!==c&&(c=t,null==m)){var e=h.position(),n=Math.max(0,Math.round(e+.25));0>=e||e>=w-1.51+v/i||(n>e&&.5-v/i>n-e?scrollTo(0,n*i):n!==e&&h.position(n))}}function s(t){return function(){var e=d3.interpolateNumber(this.scrollTop,t*i);return function(t){scrollTo(0,e(t)),l()}}}var r,c,i,u,d,m,f,v,h={},p=d3.dispatch("activate","deactivate"),y=d3.selectAll("section"),k=d3.select(window),g=document.body,x=document.documentElement,M=250,b="cubic-in-out",w=y[0].length;return y.classed("stack",!0).style("z-index",function(t,e){return w-e}),y.classed("active",!0),i=y.node().getBoundingClientRect().height,y.classed("active",!1),h.position=function(e){var n=g.scrollTop/i;return arguments.length<1?n:(e>=w?e=w-1:0>e&&(e=Math.max(0,w+e)),e=Math.floor(e),n-e&&(k.on("scroll.stack",null),t(e),d3.select(g).transition().duration(M).ease(b).tween("scrollTop",s(m=e)).each("end",function(){m=null,k.on("scroll.stack",l)})),location.replace("#"+e),h)},y.style("display")!="block"?(k.on("keydown.stack",a).on("resize.stack",e).on("scroll.stack",l).on("mousemove.stack",o).on("hashchange.stack",n),e(),n(),l(),h.duration=function(t){return arguments.length?(M=t,h):M},h.ease=function(t){return arguments.length?(b=t,h):b},d3.rebind(h,p,"on"),h):void 0}();
+var stack=function(){function t(t){return K-1>d&&d==f&&d>t?(d-=.5-m/u/2,scrollTo(0,d*u),e(),!0):void 0}function e(){var t=Math.floor(d)+(d%1?.5:0);if(t!==T){var e={};if(e[Math.floor(t)]=1,e[Math.ceil(t)]=1,T>=0){var n={};n[Math.floor(T)]=1,n[Math.ceil(T)]=1;for(var a in n)a in e?delete e[a]:y.deactivate.call(k[0][+a],+a)}for(var a in e)y.activate.call(k[0][+a],+a);T=t}}function n(){m=(window.innerHeight-u)/2,v=1+m/u,d3.select(g).style("margin-top",m+"px").style("margin-bottom",m+"px").style("height",(K-.5)*u+m+"px")}function a(){var t=+location.hash.slice(1);isNaN(t)||t===f||p.position(t)}function l(){var t;switch(d3.event.keyCode){case 39:if(d3.event.metaKey)return;case 40:case 34:t=d3.event.metaKey?1/0:1;break;case 37:if(d3.event.metaKey)return;case 38:case 33:t=d3.event.metaKey?-1/0:-1;break;case 32:t=d3.event.shiftKey?-1:1;break;default:return}c&&(c=clearTimeout(c)),null==h&&(h=(t>0?Math.floor:Math.ceil)(d==f?f:d+(.5-m/u/2))),p.position(h=Math.max(0,Math.min(K-1,h+t))),d3.event.preventDefault()}function o(){g!==x&&x.scrollTop&&(g=x);var n=Math.max(0,g.scrollTop/u);if(n>=K-1.51+m/u&&(n=K-1),!t(n)){var a=Math.max(0,Math.floor(d=n)),l=Math.min(v,2*(d%1));f!=a&&(location.replace("#"+a),f=a),k.classed("active",!1),d3.select(k[0][f]).style("-webkit-transform",l?"translate3d(0,"+-l*u+"px,0)":null).style("-o-transform",l?"translate(0,"+-l*u+"px)":null).style("-moz-transform",l?"translate(0,"+-l*u+"px)":null).style("transform",l?"translate(0,"+-l*u+"px)":null).classed("active",l!=v),d3.select(k[0][f+1]).style("-webkit-transform",l?"translate3d(0,0,0)":null).style("-o-transform",l?"translate(0,0)":null).style("-moz-transform",l?"translate(0,0)":null).style("transform",l?"translate(0,0)":null).classed("active",l>0),e()}}function r(){var t=d3.event.clientY;if(t!==i&&(i=t,null==h)){var e=p.position(),n=Math.max(0,Math.round(e+.25));0>=e||e>=K-1.51+m/u||(n>e&&.5-m/u>n-e?scrollTo(0,n*u):n!==e&&p.position(n))}}function s(t){return function(){var e=d3.interpolateNumber(this.scrollTop,t*u);return function(t){scrollTo(0,e(t)),o()}}}var c,i,u,d,f,h,v,m,p={},y=d3.dispatch("activate","deactivate"),k=d3.selectAll("section"),M=d3.select(window),g=document.body,x=document.documentElement,b=250,w="cubic-in-out",T=-1,K=k[0].length;return k.classed("stack",!0).style("z-index",function(t,e){return K-e}),k.classed("active",!0),u=k.node().getBoundingClientRect().height,k.classed("active",!1),p.position=function(e){var n=g.scrollTop/u;return arguments.length<1?n:(e>=K?e=K-1:0>e&&(e=Math.max(0,K+e)),e=Math.floor(e),n-e&&(M.on("scroll.stack",null),t(e),d3.select(g).transition().duration(b).ease(w).tween("scrollTop",s(h=e)).each("end",function(){h=null,M.on("scroll.stack",o)})),location.replace("#"+e),p)},k.style("display")!="block"?(M.on("keydown.stack",l).on("resize.stack",n).on("scroll.stack",o).on("mousemove.stack",r).on("hashchange.stack",a),n(),a(),o(),p.duration=function(t){return arguments.length?(b=t,p):b},p.ease=function(t){return arguments.length?(w=t,p):w},d3.rebind(p,y,"on"),p):void 0}();

0 comments on commit 43fbb9e

Please sign in to comment.