[jquery] Script optimieren?

[Dustin84]

Hallo,

ich habe hier ein Script und würde gerne wissen, wie ich es verbessern kann. Ich wiederhole teilweise Codeblöcke...
Das Script steuert den Vor- und Zurückbutton einer Timeline. Im Prinzip wird nur das margin-left der Timeline geändert, die sich in einen Wrapper mit overflow:hidden befindet.

$(".timeline-prev").click(function() {
    tl_curr_pos = parseInt($('.gt-timeline').css("margin-left").replace("-", ""));
    tl_pos_left = tl_curr_pos - tl_wrapper_width;
    
    if(tl_curr_pos <= tl_wrapper_width){
        tl_pos_left = 0
    }
    // Animate timeline position
    pos_timeline(tl_pos_left);
});


$(".timeline-next").click(function() {
    tl_curr_pos = parseInt($('.gt-timeline').css("margin-left").replace("-", ""));
    tl_pos_left = tl_curr_pos + tl_wrapper_width;
    
    if((tl_full_width - (tl_curr_pos+tl_wrapper_width)) < tl_wrapper_width){
        tl_pos_left = tl_curr_pos + (tl_full_width%tl_wrapper_width); // Modulo: Ergibt den Restwert einer Division
    }
    // Animate timeline position
    pos_timeline(tl_pos_left);
});

 

[ComFreek]

Hi Dustin,

erstmal würde ich folgendes auslagern:

function getCurPanelPos() {
  return parseInt($('.gt-timeline').css("margin-left").replace("-", ""));
}

Und folgende Fkts. einfügen:

function moveLeft() {
  tl_pos_left = getCurPanelPos() - tl_wrapper_width;
    
  if(tl_curr_pos <= tl_wrapper_width){
      tl_pos_left = 0;
  }
  return tl_pos_left;
}

function moveRight() {
  tl_pos_left = getCurPanelPos() + tl_wrapper_width;

  if((tl_full_width - (tl_curr_pos+tl_wrapper_width)) < tl_wrapper_width){
        tl_pos_left = tl_curr_pos + (tl_full_width%tl_wrapper_width); // Modulo: Ergibt den Restwert einer Division
  }
  return tl_pos_left;
}

Und die Eventlisteners so umschreiben:

$(".timeline-prev, .timeline-next").click(function () {
  var newPos;
  if (this.classList.contains("timeline-prev")) {
    newPos = moveLeft();
  }
  else {
    newPos = moveRight();
  }

  // Animate timeline position
  pos_timeline(newPos);
});

 

[Dustin84]

Danke, dass sieht doch schonmal professioneller als mein Maurerfusch aus

 

[Parantatatam]

Ich glaube, dass die Eigenschaft "className" keine Methode "has" besitzt. Dazu sollte man wohl lieber "classList.contains" nutzen. Oder man arbeitet sauber mit jQuery:

$( ".timeline-prev, .timeline-next" ).on( "click", function() {
  var newPos;
  if ( $( this ).hasClass( "timeline-prev" ) ) {
    newPos = moveLeft();
  } else {
    newPos = moveRight();
  }
 
  // Animate timeline position
  pos_timeline( newPos );
});

PS: Ich habe es mal nach dem jQuery-Style-Guide umformatiert und die Short-Hand-Methode "click" in "on" umgewandelt – aber das ist auch nur eine persönliche Präferenz meinerseits.