Horizontal Timeline

horizontal-timeline.markdown

Horizontal Timeline

A Pen by Giuseppe Canale on CodePen.

License.

index.html

<div id="lineContainer"> 
  <div id="lineBack"></div>
  <div id="lineProgress"></div>
  <div id="halfTime"></div>
</div>

script.js

class TimeLine {

  constructor() {

    this.goal = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="ball" x="0px" y="0px" width="21px" height="21px" viewBox="0 0 952.1 952.1" xml:space="preserve"><path d="M812.55,139.4c-43.7-43.7-94.6-78-151.3-102C602.55,12.6,540.25,0,475.95,0c-64.2,0.1-126.5,12.6-185.2,37.5c-56.7,24-107.6,58.3-151.3,102c-43.7,43.7-78,94.6-102,151.3c-24.8,58.7-37.4,121-37.4,185.3c0,64.201,12.6,126.6,37.4,185.301c24,56.699,58.3,107.6,102,151.299c43.7,43.701,94.6,78,151.3,102c58.7,24.801,121,37.4,185.3,37.4c64.2,0,126.601-12.6,185.3-37.4c56.7-24,107.601-58.299,151.301-102c43.699-43.699,78-94.6,102-151.299c24.8-58.701,37.399-121,37.399-185.301c0-64.2-12.6-126.6-37.399-185.3C890.55,234,856.25,183.2,812.55,139.4z M212.55,107.5c4.3-3.3,8.5-6.8,12.9-9.9c23.1-16.2,48.7-29.3,74.7-40.2C355.55,34.2,415.75,22,475.95,22c40.1,0,81.2,5.4,119.899,16c-15.3,6.2-34,18-65.399,44.8c-26.101-2.8-52.5-2.9-79-0.4c-34.601,3.3-69.4,11-103.4,23c-30.7,10.8-55,23.1-71.4,32.5c-25.1-9-57.5-19.6-73.5-24.8C205.65,113.9,210.85,108.8,212.55,107.5z M646.15,226.5l-81.4,222.2l-195.3,37.5L208.05,319.5c10.9-75.6,62.7-142.6,62.7-142.6c0.3-0.2,34.1-24.6,88.3-43.5c31.601-11.1,63.8-18.2,95.9-21.2c26.2-2.4,52.3-2,78.1,1.1L646.15,226.5z M39.35,460.2c-5,32.3-6.1,65.8-3.5,99.5c-3.9-7.799-7-14.398-9.3-19.699c-3-20.9-4.5-42.301-4.5-64.1c0-67,14.5-130.7,40.6-188c-2.9,30-1.5,61.1,0.6,84.7C52.05,400.7,44.05,430,39.35,460.2z M78.85,633.301c-4.6-16.9-10-41.5-12.7-71c-3-33.301-2.1-66.4,2.9-98.101c3.8-24.3,9.9-47.899,18.3-70.6c32.9-27.8,76.5-44.1,100.6-51.6L346.35,505.6L329.75,684.9L174.95,736.6C135.55,707.6,103.35,669.199,78.85,633.301z M549.25,892.9c-34.5,22.6-121.7,28-157.1,29.299c-39-7.299-76.9-19.799-112.601-37c-31.2-15-60.8-33.6-87.8-55.398c0.5-0.9-4.2-48.602-4-66l156.4-52.201l180.5,78.1l24.899,102.9C549.35,892.801,549.25,892.9,549.25,892.9z M849.15,734.6C822.25,773.4,790.05,809.5,751.35,836.9c-36.3,25.6-84.899,34.4-128.1,41.5c-3.3,0.5-44.6,7.299-44.9,5.9l-24.899-103L680.55,649l168.3-15.5c2.601,26.801,6,65.9,8,89.801C854.25,727.1,851.75,730.9,849.15,734.6z M851.75,600c-0.6,1-1.2,2.1-1.8,3.301L682.35,618.699L592.15,460.9l81.6-222.7l115.2,7.3c24.5,20.5,46.2,43.3,64.6,67.9c23,30.9,40.9,64.8,53.101,100.7C893.85,525.301,864.35,580.699,851.75,600z M911.85,349.8c-9.899-19.1-21.5-37.5-34.6-55c-20.7-27.7-45.3-53.2-73.2-75.9c-5.1-25.3-19.1-65.1-56.7-106.9c0.7,0.5,1.4,1.1,2.101,1.6c2.3,1.7,4.5,3.5,6.8,5.2c25.9,20.4,49.5,43.5,70.4,68.9c38.8,47.3,68.1,102.2,85.3,161.1C911.85,349.2,911.85,349.5,911.85,349.8z"/></svg>';

    this.redCard = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="26"><rect width="19" height="25" rx="2.5" x="1" y="1" fill="#ff0000"/></svg>';
    this.yellowCard = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="26"><rect width="19" height="25" rx="2.5" x="1" y="1" fill="#ffce00"/></svg>';

  };

  addEvent( time, team, event, player ){

    let position = ( time / 90 * 100 ) - 1;
    if ( team == "U" ){
      document.getElementById("lineBack").insertAdjacentHTML( "beforeend", "<div class='circle' style='left: " + position + "%;'><div class='labelDown'>" + time + "'</div></div>" );
      document.getElementById("lineBack").insertAdjacentHTML( "beforeend", "<div class='circle' style='left: " + position + "%;'><div class='eventUp'>" + player + "<br/>" + this[event] + "</div></div>" );
    }else{
      document.getElementById("lineBack").insertAdjacentHTML( "beforeend", "<div class='circle' style='left: " + position + "%;'><div class='labelUp'>" + time + "'</div></div>" );
      document.getElementById("lineBack").insertAdjacentHTML( "beforeend", "<div class='circle' style='left: " + position + "%;'><div class='eventDown'>" + this[event] + player + "</div></div>" );
    };
  };
  
  upddateTime( time ){
    let progress = ( time / 90 * 100 );
    document.getElementById("lineProgress").style.width =  progress + "%";
  };
  
};

let timeline = new TimeLine();
timeline.addEvent( 1, 'U', 'yellowCard', "player1" );
timeline.addEvent( 17, 'D', 'goal', "playerA" );
timeline.addEvent( 22, 'U', 'redCard', "playerK" ); 
timeline.addEvent( 35, 'D', 'goal', "player11" );
timeline.addEvent( 38, 'U', 'yellowCard', "playerZB" );
timeline.addEvent( 49, 'D', 'goal', "player2" );
timeline.addEvent( 90, 'D', 'redCard', "player3" );
timeline.addEvent( 94, 'U', 'goal', "player7" );

timeline.upddateTime( 45 );

style.css

body {
  background: #4e4e4e;
  font-family: Arial;
}

#lineContainer {
  position: absolute;
  left: 50px;
  top: 100px;
  width: 900px;
}

#lineBack {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 10px;
  width: 900px;
  background: #e61921;
  border-radius: 5px;
  margin: auto;
}

#lineProgress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 10px; 
  background: #aabe21;
  border-radius: 5px;
}

#halfTime {
  position: absolute;
  top: -20px;
  left: 50%;
  height: 50px;
  width: 2px;
  background: #aabe21;
  border-radius: 5px;
}

.circle {
  width: 20px;
  height: 20px;
  background: #4e4e4e;
  border-radius: 15px;
  position: absolute;
  top: -5px;
  border: 1px solid #4e4e4e;
  cursor: pointer;
  box-sizing: border-box;
  z-index: 2;
}

.circle:before {
  content: '';
  width: 10px;
  height: 10px;
  background: #4e4e4e;
  position: absolute;
  border-radius: 100%;
  top: 2px;
  left: 2px;
  border: 2px solid white;
}

.labelUp {
  display: flex;
  color: #fff;
  position: absolute;
  top: -25px;
  padding
}

.eventUp {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  align-items: left;
  color: #fff;
  position: absolute;
  top: -65px;
}

.labelDown {
  display: flex;
  color: #fff;
  position: absolute;
  top: 25px;
}

.eventDown {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  align-items: left;
  color: #fff;
  position: absolute;
  top: 25px;
  padding
}