hey guys a i downloaded some simple effect coded in JS . the plugin is called classie.js and the guy has written some custom code that interacts with this plugin classie.js
a similar question got asked a while ago classie.js Question and the guy really perfectly answered how the code inside classie.js is functioning . thats great , so now i understand how the code inside classie.js works , now my problem is , there is a lot of code written that actually interacts with this plugin called classie.js and and i have some difficulty understanding . so let me explain what elaboratly is my problem :
The classie.js code :
( function( window ) {
'use strict';
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
// console.log(document.documentElement);
hasClass = function( elem, c ) {
// cons100%ole.log("elem is : " + elem + " c is " + c);
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
console.log('elem Logged');
console.log(elem);
elem.classList.add( c );
};
removeClass = function( elem, c ) {
console.log('removeClass function got used in if statement')
elem.classList.remove
( c );
};
}
else {
// I have deleted this part as its only a fallback for older browsers. :)
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else if ( typeof exports === 'object' ) {
// CommonJS
module.exports = classie;
} else {
// browser global
window.classie = classie;
}
})( window );
The code that Interacts with classie.js :
(function() {
// disable/enable scroll (mousewheel and keys) from https://stackoverflow.com/a/4770179
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [32, 37, 38, 39, 40], wheelIter = 0;
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function touchmove(e) {
preventDefault(e);
}
function wheel(e) {
// for IE
//if( ie ) {
//preventDefault(e);
//}
}
function disable_scroll() {
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
document.body.ontouchmove = touchmove;
}
function enable_scroll() {
window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;
}
var docElem = window.document.documentElement,
scrollVal,
isRevealed,
noscroll,
isAnimating,
container = document.getElementById( 'container' ),
trigger = container.querySelector( 'button.trigger' );
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
function scrollPage() {
scrollVal = scrollY();
// console.log(scrollVal);
if( classie.has( container, 'notrans' ) ) {
classie.remove( container, 'notrans' );
return false;
}
if( isAnimating ) {
return false;
}
if( scrollVal <= 0 && isRevealed ) {
toggle(0);
}
else if( scrollVal > 0 && !isRevealed ){
toggle(1);
}
}
function toggle( reveal ) {
isAnimating = true;
if( reveal ) {
classie.add( container, 'modify' );
}
else {
noscroll = true;
disable_scroll();
classie.remove( container, 'modify' );
}
// simulating the end of the transition:
setTimeout( function() {
isRevealed = !isRevealed;
isAnimating = false;
if( reveal ) {
noscroll = false;
enable_scroll();
}
}, 600 );
}
// refreshing the page...
var pageScroll = scrollY();
noscroll = pageScroll === 0;
disable_scroll();
if( pageScroll ) {
isRevealed = true;
classie.add( container, 'notrans' );
classie.add( container, 'modify' );
}
window.addEventListener( 'scroll', scrollPage );
// trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );
})();
alot of the code that interacts with classie.js is actually derived from a thread directly from stackoverflow : how to disable and enable scroll
now all the above is just for your clear understanding , what my question really is , is i don't quite understand the usage of the add method in the code that interacts with the classie.js API , its somehow does't make any sense to me and MDN doc's says very little about this method . what is that method really really doing ?? .
Edit :: The confusing part :
function toggle( reveal ) {
isAnimating = true;
if( reveal ) {
classie.add( container, 'modify' );
}
else {
noscroll = true;
disable_scroll();
classie.remove( container, 'modify' );
}
// simulating the end of the transition:
setTimeout( function() {
isRevealed = !isRevealed;
isAnimating = false;
if( reveal ) {
noscroll = false;
enable_scroll();
}
}, 600 );
}
The above is the part that confuses me , am i right when i am guessing , that if any function from classie.js gotta be used , it has to be used like follows :
classie.functionname(); ?? and can't be directly assessed ?? eg. functionname();
My Second Big Problem (understanding JS syntax of classie.js) :
also as a supplementary question , you can choose not to answer , but certain parts of the code that interacts with classie.js has a lot of confusing syntax , let me point it out .
in the disable_scroll function there is this :
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
and in the enable scroll function there is this :
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
now i understand
A = B ;
where ur assigning A the value of B ;
But The above Syntex is more like , A = B = C ; and thats totally over my head .
can somebody clarify Please
if somebody can be elaborate and explain , it would be great .
Thank you.
Alexander.
