From 720fa6767c67951c382b714159db22758531f547 Mon Sep 17 00:00:00 2001 From: Areks Date: Thu, 26 Jun 2014 15:14:57 +0400 Subject: [PATCH 1/4] Implementing ability for adding/removing classes by common axpressions "@AddClass:SomeClass" "@RemoveClass:SomeClass" --- src/skrollr.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/src/skrollr.js b/src/skrollr.js index 2ff15f36..54af4d01 100644 --- a/src/skrollr.js +++ b/src/skrollr.js @@ -89,6 +89,10 @@ //Finds all gradients. var rxGradient = /[a-z\-]+-gradient/g; + //Find and parse expressions for handling classes + var _propAddRemoveClass = /^(@?(Add|Remove)Class)$/i; + var _propAddRemoveClassValue = /\|/; + //Vendor prefix. Will be set once skrollr gets initialized. var theCSSPrefix = ''; var theDashedCSSPrefix = ''; @@ -938,6 +942,8 @@ var key; var value; + _checkClassesAttrs(frame, skrollable.classRanges, element); + //If we are before/after the first/last frame, set the styles according to the given edge strategy. if(beforeFirst || afterLast) { //Check if we already handled this edge case last time. @@ -1054,6 +1060,22 @@ } }; + var _checkClassesAttrs = function(top, ranges, el) { + + for(var i = 0; i < ranges.length; i++) { + var range = ranges[i]; + if(range.range[0] < top && range.range[1] > top ) { + if (range.action) { + _updateClass(el, [range.cl], [] ) + } else { + _updateClass(el, [], [range.cl] ) + } + } + } + + } + + /** * Renders all elements. */ @@ -1162,6 +1184,7 @@ //Iterate over all key frames var keyFrameIndex = 0; var keyFramesLength = skrollable.keyFrames.length; + var classes = {}; for(; keyFrameIndex < keyFramesLength; keyFrameIndex++) { var frame = skrollable.keyFrames[keyFrameIndex]; @@ -1178,6 +1201,22 @@ easing = prop.match(rxPropEasing); + //Check Classes + if (_propAddRemoveClass.test(prop)) { + var classAction = _propAddRemoveClass.exec(prop)[2].toLowerCase(), + classArray = value.split(_propAddRemoveClassValue); + for (var j = 0; j < classArray.length; j++) { + if (!classes[classArray[j]]) { + classes[classArray[j]] = [] + } + classes[classArray[j]].push({ + frame: frame.frame, + a: (classAction == "add") ? 1 : 0 + }) + } + continue; + } + //Is there an easing specified for this prop? if(easing !== null) { prop = easing[1]; @@ -1198,6 +1237,42 @@ frame.props = props; } + + var classRanges = []; + for (var c in classes) { + if (classes.hasOwnProperty(c)) { + var points = classes[c]; + points.sort(function(a,b){ return a.frame - b.frame }) + var start = -1, + act = 1 - points[0].a; + for (var j = 0; j < points.length; j++ ) { + if (start == points[j].frame) { + act = points[j].a; + continue; + } + classRanges.push({ + range:[start,points[j].frame], + action: act, + cl:c + }) + start = points[j].frame; + act = points[j].a; + } + classRanges.push({ + range:[start,Infinity], + action: act, + cl:c + }) + } + } + + classRanges.sort(function(a,b){ + return a.range[0] - b.range[0] + }) + + skrollable.classRanges = classRanges; + + }; /** From 78ccefb9f06bede1d056875faa569b347e7d26fa Mon Sep 17 00:00:00 2001 From: Areks Date: Thu, 26 Jun 2014 17:59:12 +0400 Subject: [PATCH 2/4] Implementing ability for adding/removing classes by common axpressions "@AddClass:SomeClass" "@RemoveClass:SomeClass" --- src/skrollr.js | 122 ++++++++++++++++++++++++------------------------- 1 file changed, 61 insertions(+), 61 deletions(-) diff --git a/src/skrollr.js b/src/skrollr.js index 54af4d01..b9b401fc 100644 --- a/src/skrollr.js +++ b/src/skrollr.js @@ -1060,20 +1060,20 @@ } }; - var _checkClassesAttrs = function(top, ranges, el) { + var _checkClassesAttrs = function(top, ranges, el) { - for(var i = 0; i < ranges.length; i++) { - var range = ranges[i]; - if(range.range[0] < top && range.range[1] > top ) { - if (range.action) { - _updateClass(el, [range.cl], [] ) - } else { - _updateClass(el, [], [range.cl] ) - } - } - } + for(var i = 0; i < ranges.length; i++) { + var range = ranges[i]; + if(range.range[0] < top && range.range[1] > top ) { + if (range.action) { + _updateClass(el, [range.cl], [] ) + } else { + _updateClass(el, [], [range.cl] ) + } + } + } - } + } /** @@ -1184,7 +1184,7 @@ //Iterate over all key frames var keyFrameIndex = 0; var keyFramesLength = skrollable.keyFrames.length; - var classes = {}; + var classes = {}; for(; keyFrameIndex < keyFramesLength; keyFrameIndex++) { var frame = skrollable.keyFrames[keyFrameIndex]; @@ -1201,21 +1201,21 @@ easing = prop.match(rxPropEasing); - //Check Classes - if (_propAddRemoveClass.test(prop)) { - var classAction = _propAddRemoveClass.exec(prop)[2].toLowerCase(), - classArray = value.split(_propAddRemoveClassValue); - for (var j = 0; j < classArray.length; j++) { - if (!classes[classArray[j]]) { - classes[classArray[j]] = [] - } - classes[classArray[j]].push({ - frame: frame.frame, - a: (classAction == "add") ? 1 : 0 - }) - } - continue; - } + //Check Classes + if (_propAddRemoveClass.test(prop)) { + var classAction = _propAddRemoveClass.exec(prop)[2].toLowerCase(), + classArray = value.split(_propAddRemoveClassValue); + for (var j = 0; j < classArray.length; j++) { + if (!classes[classArray[j]]) { + classes[classArray[j]] = [] + } + classes[classArray[j]].push({ + frame: frame.frame, + a: (classAction == "add") ? 1 : 0 + }) + } + continue; + } //Is there an easing specified for this prop? if(easing !== null) { @@ -1238,39 +1238,39 @@ frame.props = props; } - var classRanges = []; - for (var c in classes) { - if (classes.hasOwnProperty(c)) { - var points = classes[c]; - points.sort(function(a,b){ return a.frame - b.frame }) - var start = -1, - act = 1 - points[0].a; - for (var j = 0; j < points.length; j++ ) { - if (start == points[j].frame) { - act = points[j].a; - continue; - } - classRanges.push({ - range:[start,points[j].frame], - action: act, - cl:c - }) - start = points[j].frame; - act = points[j].a; - } - classRanges.push({ - range:[start,Infinity], - action: act, - cl:c - }) - } - } - - classRanges.sort(function(a,b){ - return a.range[0] - b.range[0] - }) - - skrollable.classRanges = classRanges; + var classRanges = []; + for (var c in classes) { + if (classes.hasOwnProperty(c)) { + var points = classes[c]; + points.sort(function(a,b){ return a.frame - b.frame }) + var start = -1, + act = 1 - points[0].a; + for (var j = 0; j < points.length; j++ ) { + if (start == points[j].frame) { + act = points[j].a; + continue; + } + classRanges.push({ + range:[start,points[j].frame], + action: act, + cl:c + }) + start = points[j].frame; + act = points[j].a; + } + classRanges.push({ + range:[start,Infinity], + action: act, + cl:c + }) + } + } + + classRanges.sort(function(a,b){ + return a.range[0] - b.range[0] + }) + + skrollable.classRanges = classRanges; }; From d4e4a107d891e8af1ff363e54269c23e5c41b04c Mon Sep 17 00:00:00 2001 From: Areks Date: Thu, 26 Jun 2014 18:28:45 +0400 Subject: [PATCH 3/4] Implementing ability for adding/removing classes by common axpressions "@AddClass:SomeClass" "@RemoveClass:SomeClass" --- src/skrollr.js | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/skrollr.js b/src/skrollr.js index b9b401fc..14a32b88 100644 --- a/src/skrollr.js +++ b/src/skrollr.js @@ -1066,14 +1066,14 @@ var range = ranges[i]; if(range.range[0] < top && range.range[1] > top ) { if (range.action) { - _updateClass(el, [range.cl], [] ) + _updateClass(el, [range.cl], [] ); } else { - _updateClass(el, [], [range.cl] ) + _updateClass(el, [], [range.cl] ); } } } - } + }; /** @@ -1192,6 +1192,7 @@ var value; var prop; var props = {}; + var j = 0; var match; @@ -1205,14 +1206,14 @@ if (_propAddRemoveClass.test(prop)) { var classAction = _propAddRemoveClass.exec(prop)[2].toLowerCase(), classArray = value.split(_propAddRemoveClassValue); - for (var j = 0; j < classArray.length; j++) { + for (j = 0; j < classArray.length; j++) { if (!classes[classArray[j]]) { - classes[classArray[j]] = [] + classes[classArray[j]] = []; } classes[classArray[j]].push({ frame: frame.frame, - a: (classAction == "add") ? 1 : 0 - }) + a: (classAction == 'add') ? 1 : 0 + }); } continue; } @@ -1239,14 +1240,17 @@ } var classRanges = []; + var sortFunctionForClasses = function(a,b){ + return a.frame - b.frame; + }; for (var c in classes) { if (classes.hasOwnProperty(c)) { var points = classes[c]; - points.sort(function(a,b){ return a.frame - b.frame }) + points.sort(sortFunctionForClasses); var start = -1, act = 1 - points[0].a; - for (var j = 0; j < points.length; j++ ) { - if (start == points[j].frame) { + for (j = 0; j < points.length; j++ ) { + if (start === points[j].frame) { act = points[j].a; continue; } @@ -1254,7 +1258,7 @@ range:[start,points[j].frame], action: act, cl:c - }) + }); start = points[j].frame; act = points[j].a; } @@ -1262,13 +1266,13 @@ range:[start,Infinity], action: act, cl:c - }) + }); } } classRanges.sort(function(a,b){ - return a.range[0] - b.range[0] - }) + return a.range[0] - b.range[0]; + }); skrollable.classRanges = classRanges; From 1af9d1d56d0213b5c6aee1c68ca06ffee241da20 Mon Sep 17 00:00:00 2001 From: Areks Date: Thu, 26 Jun 2014 18:59:11 +0400 Subject: [PATCH 4/4] Implementing ability for adding/removing classes by common axpressions "@AddClass:SomeClass" "@RemoveClass:SomeClass" --- src/skrollr.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/skrollr.js b/src/skrollr.js index 14a32b88..0abb3b84 100644 --- a/src/skrollr.js +++ b/src/skrollr.js @@ -1185,6 +1185,7 @@ var keyFrameIndex = 0; var keyFramesLength = skrollable.keyFrames.length; var classes = {}; + var j = 0; for(; keyFrameIndex < keyFramesLength; keyFrameIndex++) { var frame = skrollable.keyFrames[keyFrameIndex]; @@ -1192,7 +1193,6 @@ var value; var prop; var props = {}; - var j = 0; var match; @@ -1249,7 +1249,8 @@ points.sort(sortFunctionForClasses); var start = -1, act = 1 - points[0].a; - for (j = 0; j < points.length; j++ ) { + + for ( j = 0; j < points.length; j++ ) { if (start === points[j].frame) { act = points[j].a; continue;