var
_cssClasses,
_cssClassElems = [];
Scene
.on("destroy.internal", function (e) {
Scene.removeClassToggle(e.reset);
});
/**
* Define a css class modification while the scene is active.
* When the scene triggers the classes will be added to the supplied element and removed, when the scene is over.
* If the scene duration is 0 the classes will only be removed if the user scrolls back past the start position.
* @method ScrollMagic.Scene#setClassToggle
* @example
* // add the class 'myclass' to the element with the id 'my-elem' for the duration of the scene
* scene.setClassToggle("#my-elem", "myclass");
*
* // add multiple classes to multiple elements defined by the selector '.classChange'
* scene.setClassToggle(".classChange", "class1 class2 class3");
*
* @param {(string|object)} element - A Selector targeting one or more elements or a DOM object that is supposed to be modified.
* @param {string} classes - One or more Classnames (separated by space) that should be added to the element during the scene.
*
* @returns {Scene} Parent object for chaining.
*/
this.setClassToggle = function (element, classes) {
var elems = _util.get.elements(element);
if (elems.length === 0 || !_util.type.String(classes)) {
log(1, "ERROR calling method 'setClassToggle()': Invalid " + (elems.length === 0 ? "element" : "classes") + " supplied.");
return Scene;
}
if (_cssClassElems.length > 0) {
// remove old ones
Scene.removeClassToggle();
}
_cssClasses = classes;
_cssClassElems = elems;
Scene.on("enter.internal_class leave.internal_class", function (e) {
var toggle = e.type === "enter" ? _util.addClass : _util.removeClass;
_cssClassElems.forEach(function (elem, key) {
toggle(elem, _cssClasses);
});
});
return Scene;
};
/**
* Remove the class binding from the scene.
* @method ScrollMagic.Scene#removeClassToggle
* @example
* // remove class binding from the scene without reset
* scene.removeClassToggle();
*
* // remove class binding and remove the changes it caused
* scene.removeClassToggle(true);
*
* @param {boolean} [reset=false] - If `false` and the classes are currently active, they will remain on the element. If `true` they will be removed.
* @returns {Scene} Parent object for chaining.
*/
this.removeClassToggle = function (reset) {
if (reset) {
_cssClassElems.forEach(function (elem, key) {
_util.removeClass(elem, _cssClasses);
});
}
Scene.off("start.internal_class end.internal_class");
_cssClasses = undefined;
_cssClassElems = [];
return Scene;
};