skrollr-rails 0.6.22 → 0.6.23
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/skrollr-rails/version.rb +1 -1
- data/vendor/assets/javascripts/skrollr.js +83 -16
- data/vendor/assets/javascripts/skrollr.menu.js +5 -5
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7d129c8969be774ce9a3c6daded5a213e6b32107
|
4
|
+
data.tar.gz: 574fc526d377b22f74f677297d7d3445108b83f4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: dab9b26c46dda850da2444febc03dda3d1aef4affc5228602bb97d55ed00daa0d7ead9e1952cb49d0702288daff8e6a664f14f46bc5ed3c239fa220be31b4d50
|
7
|
+
data.tar.gz: 5f1a1c1d4e4fcc10b97a0a653f44cae0651be14fb37dbcb570bb7ce796ea64159f03d6bda3198855fdebdf07f1626a47a2e2308bf287203220a1b7925a71e9a0
|
@@ -72,7 +72,7 @@
|
|
72
72
|
//Easing function names follow the property in square brackets.
|
73
73
|
var rxPropEasing = /^([a-z\-]+)\[(\w+)\]$/;
|
74
74
|
|
75
|
-
var rxCamelCase = /-([a-
|
75
|
+
var rxCamelCase = /-([a-z0-9_])/g;
|
76
76
|
var rxCamelCaseFn = function(str, letter) {
|
77
77
|
return letter.toUpperCase();
|
78
78
|
};
|
@@ -248,7 +248,10 @@
|
|
248
248
|
beforerender: options.beforerender,
|
249
249
|
|
250
250
|
//Function to be called right after finishing rendering.
|
251
|
-
render: options.render
|
251
|
+
render: options.render,
|
252
|
+
|
253
|
+
//Function to be called whenever an element with the `data-emit-events` attribute passes a keyframe.
|
254
|
+
keyframe: options.keyframe
|
252
255
|
};
|
253
256
|
|
254
257
|
//forceHeight is true by default
|
@@ -331,9 +334,9 @@
|
|
331
334
|
_skrollableIdCounter = 0;
|
332
335
|
|
333
336
|
elements = document.getElementsByTagName('*');
|
334
|
-
} else {
|
335
|
-
//We accept a single element
|
336
|
-
elements = []
|
337
|
+
} else if(elements.length === undefined) {
|
338
|
+
//We also accept a single element as parameter.
|
339
|
+
elements = [elements];
|
337
340
|
}
|
338
341
|
|
339
342
|
elementIndex = 0;
|
@@ -350,6 +353,14 @@
|
|
350
353
|
//The edge strategy for this particular element.
|
351
354
|
var edgeStrategy = _edgeStrategy;
|
352
355
|
|
356
|
+
//If this particular element should emit keyframe events.
|
357
|
+
var emitEvents = false;
|
358
|
+
|
359
|
+
//If we're reseting the counter, remove any old element ids that may be hanging around.
|
360
|
+
if(ignoreID) {
|
361
|
+
delete el[SKROLLABLE_ID_DOM_PROPERTY];
|
362
|
+
}
|
363
|
+
|
353
364
|
if(!el.attributes) {
|
354
365
|
continue;
|
355
366
|
}
|
@@ -385,6 +396,13 @@
|
|
385
396
|
continue;
|
386
397
|
}
|
387
398
|
|
399
|
+
//Is this element tagged with the `data-emit-events` attribute?
|
400
|
+
if(attr.name === 'data-emit-events') {
|
401
|
+
emitEvents = true;
|
402
|
+
|
403
|
+
continue;
|
404
|
+
}
|
405
|
+
|
388
406
|
var match = attr.name.match(rxKeyframeAttribute);
|
389
407
|
|
390
408
|
if(match === null) {
|
@@ -394,7 +412,9 @@
|
|
394
412
|
var kf = {
|
395
413
|
props: attr.value,
|
396
414
|
//Point back to the element as well.
|
397
|
-
element: el
|
415
|
+
element: el,
|
416
|
+
//The name of the event which this keyframe will fire, if emitEvents is
|
417
|
+
eventType: attr.name.replace(rxCamelCase, rxCamelCaseFn)
|
398
418
|
};
|
399
419
|
|
400
420
|
keyFrames.push(kf);
|
@@ -471,7 +491,9 @@
|
|
471
491
|
anchorTarget: anchorTarget,
|
472
492
|
keyFrames: keyFrames,
|
473
493
|
smoothScrolling: smoothScrollThis,
|
474
|
-
edgeStrategy: edgeStrategy
|
494
|
+
edgeStrategy: edgeStrategy,
|
495
|
+
emitEvents: emitEvents,
|
496
|
+
lastFrameIndex: -1
|
475
497
|
};
|
476
498
|
|
477
499
|
_updateClass(el, [SKROLLABLE_CLASS], []);
|
@@ -582,6 +604,10 @@
|
|
582
604
|
return !!_scrollAnimation;
|
583
605
|
};
|
584
606
|
|
607
|
+
Skrollr.prototype.isMobile = function() {
|
608
|
+
return _isMobile;
|
609
|
+
};
|
610
|
+
|
585
611
|
Skrollr.prototype.setScrollTop = function(top, force) {
|
586
612
|
_forceRender = (force === true);
|
587
613
|
|
@@ -901,11 +927,14 @@
|
|
901
927
|
var element = skrollable.element;
|
902
928
|
var frame = skrollable.smoothScrolling ? fakeFrame : actualFrame;
|
903
929
|
var frames = skrollable.keyFrames;
|
904
|
-
var
|
905
|
-
var
|
906
|
-
var
|
907
|
-
var
|
908
|
-
var
|
930
|
+
var framesLength = frames.length;
|
931
|
+
var firstFrame = frames[0];
|
932
|
+
var lastFrame = frames[frames.length - 1];
|
933
|
+
var beforeFirst = frame < firstFrame.frame;
|
934
|
+
var afterLast = frame > lastFrame.frame;
|
935
|
+
var firstOrLastFrame = beforeFirst ? firstFrame : lastFrame;
|
936
|
+
var emitEvents = skrollable.emitEvents;
|
937
|
+
var lastFrameIndex = skrollable.lastFrameIndex;
|
909
938
|
var key;
|
910
939
|
var value;
|
911
940
|
|
@@ -918,7 +947,23 @@
|
|
918
947
|
}
|
919
948
|
|
920
949
|
//Add the skrollr-before or -after class.
|
921
|
-
|
950
|
+
if(beforeFirst) {
|
951
|
+
_updateClass(element, [SKROLLABLE_BEFORE_CLASS], [SKROLLABLE_AFTER_CLASS, SKROLLABLE_BETWEEN_CLASS]);
|
952
|
+
|
953
|
+
//This handles the special case where we exit the first keyframe.
|
954
|
+
if(emitEvents && lastFrameIndex > -1) {
|
955
|
+
_emitEvent(element, firstFrame.eventType, _direction);
|
956
|
+
skrollable.lastFrameIndex = -1;
|
957
|
+
}
|
958
|
+
} else {
|
959
|
+
_updateClass(element, [SKROLLABLE_AFTER_CLASS], [SKROLLABLE_BEFORE_CLASS, SKROLLABLE_BETWEEN_CLASS]);
|
960
|
+
|
961
|
+
//This handles the special case where we exit the last keyframe.
|
962
|
+
if(emitEvents && lastFrameIndex < framesLength) {
|
963
|
+
_emitEvent(element, lastFrame.eventType, _direction);
|
964
|
+
skrollable.lastFrameIndex = framesLength;
|
965
|
+
}
|
966
|
+
}
|
922
967
|
|
923
968
|
//Remember that we handled the edge case (before/after the first/last keyframe).
|
924
969
|
skrollable.edge = beforeFirst ? -1 : 1;
|
@@ -955,9 +1000,8 @@
|
|
955
1000
|
|
956
1001
|
//Find out between which two key frames we are right now.
|
957
1002
|
var keyFrameIndex = 0;
|
958
|
-
var framesLength = frames.length - 1;
|
959
1003
|
|
960
|
-
for(; keyFrameIndex < framesLength; keyFrameIndex++) {
|
1004
|
+
for(; keyFrameIndex < framesLength - 1; keyFrameIndex++) {
|
961
1005
|
if(frame >= frames[keyFrameIndex].frame && frame <= frames[keyFrameIndex + 1].frame) {
|
962
1006
|
var left = frames[keyFrameIndex];
|
963
1007
|
var right = frames[keyFrameIndex + 1];
|
@@ -978,6 +1022,22 @@
|
|
978
1022
|
}
|
979
1023
|
}
|
980
1024
|
|
1025
|
+
//Are events enabled on this element?
|
1026
|
+
//This code handles the usual cases of scrolling through different keyframes.
|
1027
|
+
//The special cases of before first and after last keyframe are handled above.
|
1028
|
+
if(emitEvents) {
|
1029
|
+
//Did we pass a new keyframe?
|
1030
|
+
if(lastFrameIndex !== keyFrameIndex) {
|
1031
|
+
if(_direction === 'down') {
|
1032
|
+
_emitEvent(element, left.eventType, _direction);
|
1033
|
+
} else {
|
1034
|
+
_emitEvent(element, right.eventType, _direction);
|
1035
|
+
}
|
1036
|
+
|
1037
|
+
skrollable.lastFrameIndex = keyFrameIndex;
|
1038
|
+
}
|
1039
|
+
}
|
1040
|
+
|
981
1041
|
break;
|
982
1042
|
}
|
983
1043
|
}
|
@@ -1371,6 +1431,7 @@
|
|
1371
1431
|
if(!e.preventDefault) {
|
1372
1432
|
e.preventDefault = function() {
|
1373
1433
|
e.returnValue = false;
|
1434
|
+
e.defaultPrevented = true;
|
1374
1435
|
};
|
1375
1436
|
}
|
1376
1437
|
|
@@ -1430,6 +1491,12 @@
|
|
1430
1491
|
_registeredEvents = [];
|
1431
1492
|
};
|
1432
1493
|
|
1494
|
+
var _emitEvent = function(element, name, direction) {
|
1495
|
+
if(_listeners.keyframe) {
|
1496
|
+
_listeners.keyframe.call(_instance, element, name, direction);
|
1497
|
+
}
|
1498
|
+
};
|
1499
|
+
|
1433
1500
|
var _reflow = function() {
|
1434
1501
|
var pos = _instance.getScrollTop();
|
1435
1502
|
|
@@ -1689,4 +1756,4 @@
|
|
1689
1756
|
window.skrollr = skrollr;
|
1690
1757
|
}
|
1691
1758
|
|
1692
|
-
}(window, document));
|
1759
|
+
}(window, document));
|
@@ -25,16 +25,16 @@
|
|
25
25
|
might not acutally be the link but a child.
|
26
26
|
*/
|
27
27
|
var findParentLink = function(element) {
|
28
|
-
//Yay, it's a link!
|
29
|
-
if(element.tagName === 'A') {
|
30
|
-
return element;
|
31
|
-
}
|
32
|
-
|
33
28
|
//We reached the top, no link found.
|
34
29
|
if(element === document) {
|
35
30
|
return false;
|
36
31
|
}
|
37
32
|
|
33
|
+
//Yay, it's a link!
|
34
|
+
if(element.tagName.toUpperCase() === 'A') {
|
35
|
+
return element;
|
36
|
+
}
|
37
|
+
|
38
38
|
//Maybe the parent is a link.
|
39
39
|
return findParentLink(element.parentNode);
|
40
40
|
};
|