【もりけん塾 @JS課題17】Vanilla JSでスライドショー作成①

const createArrowButtons = () => {
 const arrowBtnWrapper = createElementWithClassName("div", "arrow-btn__wrapper");
 const arrowDirections = ["previous", "next"];
 arrowDirections.forEach((arrowDirection) => {
  const button = createElementWithClassName("button", `arrow-btn --${arrowDirection}`);
   button.id = `js-${arrowDirection}`;
   button.value = arrowDirection;
    // 初期設定として previousの属性にdisabledを付与
   button.value === "previous" && button.setAttribute("disabled", true);
   arrowBtnWrapper.appendChild(button).appendChild(document.createElement("span"));
  });
  return arrowBtnWrapper;
}

const setClickEventInArrowButton = () => {
  const arrowButtons = document.querySelectorAll(".arrow-btn");
  arrowButtons.forEach(button => {
    button.addEventListener("click", (e) => {
      const eventTargetValue = e.currentTarget.value;
     // 画像の切り替え
      switchImage(`${eventTargetValue}ElementSibling`);
     // カウンターの更新
      updateOfCounter();
　　　　   // disabledの切り替え
      toggleTheDisabled(e.currentTarget);
    });
  });
}

const slideList = document.getElementById("js-slid-list");

// targetには previous or nextが渡る
const toggleTheDisabled = (target) => {
  const lastSlideItem = slideList.lastElementChild;
  const firstSlideItem = slideList.firstElementChild;
  const displayingEl = document.querySelector(".is-displaying");
  // 現在表示中の要素が最初 or　最後であれば disabledを付与
  if (displayingEl === lastSlideItem || displayingEl === firstSlideItem) {
    target.setAttribute("disabled", true);
  } else {
    const disabledEl = document.querySelector("[disabled]");
    disabledEl && disabledEl.removeAttribute("disabled")
  }
}

// directionには previousElementSibling or　nextElementSibling が渡ってくる
const switchImage = (direction) => {
  const displayingItem = document.querySelector(".is-displaying");
  const targetElement = displayingItem[direction];
  // 前の要素 or　次の要素 があればクラスを付け替える
  if (targetElement) {
    displayingItem.classList.remove("is-displaying");
    targetElement.classList.add("is-displaying");
  }
}

// 現在表示中のスライドの順番を返す
const findOrderOfDisplayedItem = () => {
  const slideItemArray = [...document.querySelectorAll(".slide-item")];
  const targetIndex = slideItemArray.findIndex(el => el.classList.contains("is-displaying"));
  return targetIndex + 1;
}

// カウンターの更新 
const updateOfCounter = () => {
  document.querySelector(".current-number").textContent = 　　　findOrderOfDisplayedItem();
}

const createSlideItem = ({ image }) => {
  const slideItem = createElementWithClassName("li", "slide-item");
  const slideImage = createElementWithClassName("img", "slide-img");
  slideImage.src = image;
  slideItem.appendChild(slideImage);
  return slideItem;   // DOMには追加せず、作成した値をかえす
}

// コメントコメントコメントコメント

/**
  * 
  */