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                  
                // 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.

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./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.

• javascript

• add method? do you mean addEventListener? – Brian Glaz Commented Jan 19, 2015 at 14:56
• @BrianGlaz no it's part of that little library. OP It's just adding and removing classes from DOM nodes. – Pointy Commented Jan 19, 2015 at 14:57
• I don't see any method named add anywhere in the posted code, so I don't know what OP is talking about, – Brian Glaz Commented Jan 19, 2015 at 14:59
• 1 Yes, exactly :) In a library that tiny I'm not sure why it matters, but yes they're just shortcuts. And yes, all calls need to be of the form classie.something(). – Pointy Commented Jan 19, 2015 at 15:18
• 1 @AlexanderSolonik A = B = C just means to assign C to both A and B - in JavaScript, an assignment (A=B) has a value, that being B. Thus A=B=C is like A=(B=C); the value of B=C is C so it assigns that to A. – Pointy Commented Jan 20, 2015 at 14:52

1 Answer 1

Don't have enough rep to ment yet. The add() method is not a 'native' js function. If you look at the classie.js code, towards the end of it the is an object 'classie' which defines public shortcuts to the internal function addClass :

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

These shorcuts will let you call the internal functions (which cannot be accessed otherwise from the global scope) by calling classie.publicFunctionName(args) or window.classie.publicFunctionName(args) where "publicFunctionName" is the shorcut defined, which is exactly what the second chunk of code does :

...
classie.remove( container, 'modify' );
...    
classie.add( container, 'modify' );

All the addClass() method does is add a class to the html element it is called on.

I believe this is called the 'revealing module' design pattern, but not 100% sure.

Hope that helps at least a bit. If you want to learn a bit on js design patterns I warmly remend reading Addy Osmani's very good (and free) book here : http://addyosmani./resources/essentialjsdesignpatterns/book/