// вспомогательная функция для нахождения всех элементов определенного типа
const findAll = (parent, selector) => parent.querySelectorAll(selector)
const hide = (...els) => [...els].forEach(el => el.style.display = 'none')
// пример
hide(findAll(document, 'img')) // находим и скрываем все элементы "img" на странице

// вспомогательная функция для нахождения одного элемента определенного типа
const findOne = (parent, selector) => parent.querySelector(selector)
const hasClass = (el, className) => el.classList.contains(className)
// пример
hasClass(findOne(document, 'p'), 'special') // true

const toggleClass = (el, className) => el.classList.toggleClass(className)
// пример
toggleClass(findOne('p'), 'special') // параграф больше не имеет класса "special"

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
})
// пример
getScrollPosition() // { x: 0, y: 200 }

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {
    requestAnimationFrame(scrollToTop)
    scrollTo(0, c - c / 8)
  }
}
// или
scrollTo({
  top: 0,
  behavior: 'smooth'
})
// пример
scrollToTop()

const elementContains = (parent, child) => parent !== child && parent.contains(child)
// пример
elementContains(findOne(document, 'head'), findOne(document, 'title')) // true
elementContains(findOne(document, 'body'), findOne(document, 'body')) // false

const elemIsVidibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect()
  const { innerHeight, innerWidth } = window
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
      ((left > 0 && left < innerWidth || right > 0 && right < innerWidth))
    : top >= 0 & left >=0 && bottom <= innerHeight && rigth <= innerWidth
}
// пример
elemIsVidibleInViewport(el) // элемент должен быть виден полностью
elemIsVidibleInViewport(el, true) // может быть виден частично

const getImages = (el, includeDuplicates = false) => {
  const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'))
  return includeDuplicates ? images : [...new Set(images)]
}
// пример
getImages(document, true) // получаем все изображения на странице
getImages(document, false) // получаем только уникальные изображения

const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? 'Mobile'
    : 'Desktop'
// Example
detectDeviceType()

const getURLParams = url => (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
  (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
  {}
)
// пример
getURLParams('http://url.com/page?f=John&l=Smith') // { f: 'John', l: 'Smith' }
getURLParams('https://google.com') // { }

const formToObject = form =>
  Array.from(new FormData(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  )
// пример
formToObject(findOne(document, 'form')) // { name: 'John', email: "myemail@example.com" }

const getProps = (from, ...selectors) =>
  [...selectors].map(s =>
    s
      .replace(/\[([^\[\]]*)\]/g, '.$1.')
      .split('.')
      .filter(t => t !== '')
      .reduce((prev, cur) => prev && prev[cur], from)
  )
const obj = { selector: { to: { value: 'value to select' } }, target: [ 1, 2, { a: 'test' } ] }
// пример
getProps(obj, 'selector.to.value', 'target[0]', 'target[2].a') // [ 'value to select', 1, 'test' ]

// вспомогательная функция для вывода сообщения в консоль
const log = (value) => console.log(value)
const delay = (fn, wait, ...rest) => setTimeout(fn, wait, ...rest)
// пример
delay(
  text => log(text),
  1000,
  'позже'
)
// 'позже' через 1 секунду

// вспомогательная функция для добавления обработчика
addListener = (el, evt, cb) => el.addEventListener(evt, cb)
const removeListener = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts)
const fn = () => log('!')
// пример
;((B) => {
  addListener(B, 'click', fn)
  removeListener(B, 'click', fn) // сообщение "!" больше не выводится в консоль после клика
})(document.body)

const formatDuration = ms => {
  if (ms < 0) ms = -ms
  const time = {
    // ~~ = Math.floor
    day: ~~(ms / 86400000),
    hour: ~~(ms / 3600000) % 24,
    minute: ~~(ms / 60000) % 60,
    second: ~~(ms / 1000) % 60,
    millisecond: ~~(ms) % 1000
  }
  return Object.entries(time)
    .filter(val => val[1] !== 0)
    .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
    .join(', ')
}
// пример
formatDuration(1001); // 1 second, 1 millisecond
formatDuration(34325055574); // 397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds

const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24)
// пример
log(
  getDaysDiffBetweenDates(new Date('2020-11-01'), new Date('2020-11-09'))
) // 8

// XMLHttpRequest
const httpGet = (url, cb, err = console.error) => {
  const req = new XMLHttpRequest()
  req.open('GET', url, true)
  req.onload = () => cb(req.responseText)
  req.onerror = () => err(req)
  req.send()
}
httpGet(
  'https://jsonplaceholder.typicode.com/posts/1',
  log
) // { "userId": 1, "id": 1, "title": "some title", "body": "some text" }
// fetch
const httpGet = (url, cb, err = console.error) =>
  fetch(url)
    .then(response => response.json())
    .then(result => cb(result))
    .catch(error => err(error))
// async/await
const httpGet = async (url, cb, err = console.error) => {
  try {
    const response = await fetch(url);
    const result = await response.json();
    cb(result);
  } catch (error) {
    err(error)
  }
}

// XMLHttpsRequest
const httpPost = (url, data, cb, err = console.error) => {
  const req = new XMLHttpRequest()
  req.open('POST', url, true)
  req.setRequestHeader('Content-Type', 'application/json')
  req.onload = () => cb(req.responseText)
  req.onerror = () => err(req)
  req.send(data)
}
const newPost = {
  userId: 1234,
  title: 'foo',
  body: 'bar baz qux'
}
const data = JSON.stringify(newPost)
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  data,
  log
) // { "id": 101, "userId": 1234, "title": "foo", "body": "bar baz qux" }
// async/await
const httpPost = async (url, data, cb, err = console.error) => {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    const result = await response.json()
    cb(result)
  } catch (error) {
    err(error)
  }
}
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  newPost,
  log
)

const counter = (selector, start, end, step = 1, duration = 2000) => {
  let current = start,
    _step = (end - start) * step < 0 ? -step : step,
    timer = setInterval(() => {
      current += _step
      findOne(document, selector).innerHTML = current
      if (current >= end) findOne(document, selector).innerHTML = end
      if (current >= end) clearInterval(timer)
    }, Math.abs(~~(duration / (end - start))))
    return timer
}
// пример
counter('#some_id', 1, 1000, 5, 2000) // создаем двухсекундный таймер для элемента с идентификатором "some_id"

const copyToClipboard = str => {
  const el = document.createElement('textarea')
  el.value = str
  el.setAttribute('readonly')
  el.style.position = 'absolute'
  el.style.left = '-999px'
  document.body.append(el)
  const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false
  el.select()
  document.execCommand('copy')
  el.remove()
  if (selected) {
    document.getSelection().removeAllRanges()
    document.getSelection().addRange(selected)
  }
}
// пример
copyToClipboard('some text') // строка "some text" скопирована в буфер обмена