Question

As this animation grows more complex, I keep adding in parameters, so that they are available on each call back. 6 total currently.

For example now I want to disable the input box while the message is being displayed so I have to add in yet another element – in_element;

The Call:

    Mo.C.movePane( cover_element, pane_element, 0, 0, 0, 'begin' );

The Function:

    movePane: function( cover_element, pane_element, start, end, index, state ) {
        if( ( state === 'begin' ) ) {
            start = parseInt( window.getComputedStyle( pane_element, null ).getPropertyValue("top"), 10 );
            end = start + 40;
            index = start;
            state = 'down';
            cover_element.style.display = 'inline';
            Mo.C.movePane(cover_element, pane_element, start, end, index, 'down' );
        }
        if( ( state === 'down' ) && ( index < end ) ) {
            index += 1;
            pane_element.style.top = ( index ) + 'px';
            setTimeout( function( ){ Mo.C.movePane(cover_element, pane_element, start, end, index, state ); }, 1 );
        }
        else if( ( state === 'down' ) && index === end ) { 
            state = 'up';
            setTimeout( function( ){ Mo.C.movePane(cover_element, pane_element, start, end, index, state ); }, 2000 );
        }
        else if( ( state === 'up' ) && ( index > start ) ) {
            index -= 1;
            pane_element.style.top = ( index ) + 'px';
            setTimeout( function( ){ Mo.C.movePane(cover_element, pane_element, start, end, index, state ); }, 1 );
        }
        else if( ( state === 'up' ) && ( index === start ) ) {
            cover_element.style.display = 'none';
            // signup_pass_input.addEventListener( "keypress", Mo.UserNew.enter, false );
        }
    }
};

Possible Solutions

• Wrap all in a single object called object_all = {}, and pass just this one variable.
• Break up the functionality in some way – likely pull out the start and end conditions to separate functions
• Move from function parameters to object properties ( statics ) to keep needed variables persistent
• ?

Answer 1

It is normal to use an object when there are multiple parameters.
Below you find an example of what the refactored code could look like:

function( cover_element, pane_element, opt ) {
  var delay=1;
  if (!opt) {
    opt = {};
    opt.start =
      parseInt(
        window.getComputedStyle( pane_element, null ).
          getPropertyValue("top"),
        10
      );
    opt.end = opt.start + 40;
    opt.index = opt.start;
    opt.state = 'down';
    cover_element.style.display = 'inline';
  }

  switch(opt.state) {
    case 'down':
      opt.index += 1;
      if (opt.index >= opt.end) {
        opt.index = opt.end;
        opt.state = 'up';
        delay=2000;
      }
      break;
    case 'up':
      opt.index -= 1;
      if (opt.index <= opt.start) {
        cover_element.style.display = 'none';
        opt = null;
      }
  }

  if (opt) {
    pane_element.style.top = ( opt.index ) + 'px';
    setTimeout(
      function( ){
        Mo.C.movePane(cover_element, pane_element, opt);
      },
      delay
    );
  }
}

And call it like this:

Mo.C.movePane(elem1, elem2);

The delay when it switching directions is now 2000 instead of 2001.