{"size": 1517, "ext": "js", "max_stars_repo_path": "js/01-gallery.js", "max_stars_repo_name": "6e3veR6k/goit-js-hw-07", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "js/01-gallery.js", "max_issues_repo_name": "6e3veR6k/goit-js-hw-07", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "js/01-gallery.js", "max_forks_repo_name": "6e3veR6k/goit-js-hw-07", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.1551724138, "max_line_length": 71, "alphanum_fraction": 0.677653263}
import { galleryItems } from './gallery-items.js';

const galleryRef = document.querySelector('.gallery');
let instance;

// creates img container
const createGalleryItem = ({ preview, original, description }) => {
  const resultDiv = document.createElement('div');
  resultDiv.classList.add('gallery__item');

  const galleryItem = `<a class="gallery__link" href="${original}">
      <img class="gallery__image"
          src="${preview}"
          data-source="${original}"
          alt="${description}"/>
    </a>`;

  resultDiv.insertAdjacentHTML('afterbegin', galleryItem);
  return resultDiv;
};

// render all galleries items
galleryRef.append(...galleryItems.map((i) => createGalleryItem(i)));

galleryRef.addEventListener('click', onImgClick);

// handle img click
function onImgClick(e) {
  e.preventDefault();
  if (e.target.nodeName !== 'IMG') {
    return;
  }
  const html = getImgHtml(e);
  instance = createModalInstance(html);
  instance.show();
}

// create markup based on img attributes from event.target
function getImgHtml(e) {
  const imgLink = e.target.dataset.source;
  const imgAlt = e.target.alt;
  return `<img src="${imgLink}" alt="${imgAlt}" width="1280">`;
}

// creates modal
function createModalInstance(html) {
  return basicLightbox.create(html, {
    onShow: () => window.addEventListener('keydown', onKeyPressed),
    onClose: () => window.removeEventListener('keydown', onKeyPressed),
  });
}

function onKeyPressed(e) {
  if (e.code === 'Escape') {
    instance.close();
  }
}
