instasample.js

export default class Instagram {
  constructor(base, token, container) {
    console.log("Starting instagram...");
    this.social = container;
    this.base = base;
    this.token = token;
    this.fetchData(`${this.base}?access_token=${this.token}`)
      .then(data => this.changeDOM(data));
      .catch(error => console.log(error));
  }
  fetchData(url) {
    return fetch(url)
      .then(response => response.ok ? response.json() :
        Promise.reject(Error("response back is NOT ok")))
      .then(jsonDrulo => jsonDrulo ? Promise.resolve(jsonDrulo) :
        Promise.reject(Error("json object is undefined!")));
  }
  changeDOM(jsonDrulo) {
    const data = jsonDrulo.data;
    this.social.innerHTML = "";
    for (const post of data) {
      this.social.appendChild(this.newPost(post));
    }
    this.scrollContent();
  }
  newPost(post) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("social__post");
    newDiv.dataset.postid = post.id;
    newDiv.innerHTML = `
      <a href="${post.link}" target="_blank">
        <img src="${post.images.standard_resolution.url}" class="social__image" />
      </a>`;
    return newDiv;
  }
  scrollContent() {
    const newDivs = Array.from(document.querySelectorAll(".social__post"));
    const next = document.querySelector('.arrow--next');
    const back = document.querySelector('.arrow--back');
    const containerWidth = this.social.scrollWidth - this.social.offsetWidth
    const duration = 1000;
    
    let amountToScroll = window.innerWidth / 1.5;
    let accumulateScroll = null;
    let runScrollTimestamp = null;
    let directionScroll;
    
    const scrollEaseInOut = (progress) => (progress < .5) ? (Math.pow(progress, 2) * 2) : (-1 + (4 - 2 * progress) * progress);
    const scroll = (animationFrameTimestamp) => {
      let elapsed = animationFrameTimestamp - runScrollTimestamp;
      let progress = Math.min(elapsed / duration, 1);
      let position = scrollEaseInOut(progress) * amountToScroll;
      
      this.social.scrollLeft = directionScroll ? accumulateScroll + position : accumulateScroll - position;
      
      if (progress >= 1) {
        directionScroll ? accumulateScroll += position : accumulateScroll -= position;
        if (accumulateScroll >= containerWidth) accumulateScroll = containerWidth;
        if (accumulateScroll <= 0) accumulateScroll = 0;
      } else {
        requestAnimationFrame(scroll);
      }
    }
    const runScroll = () => {
      runScrollTimestamp = performance.now();
      requestAnimationFrame(scroll);
    }
    next.addEventListener('click', () => {
      directionScroll = true;
      runScroll();
    });
    back.addEventListener('click', () => {
      directionScroll = false;
      runScroll();
    });
  }
}