Hawk/src/js/tour.js

const MESSAGES = {
  'icon-plus': 'Create Files and Folders',
  'icon-refresh': 'Refresh File List',
  'icon-select': 'Select files for batch actions',
  'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
  'drawer': 'Extra options, tools and links are here',
  'icon-search': 'Search your storage for a certain file',
  'swipe-instruction': 'Swipe from left to right to go to parent folder'
}

const DIALOG_HIDE_DELAY = 2000;

export default function() {
  let tourRan = localStorage.getItem('tourRan');
  let wrapper = document.querySelector('#wrapper');
  let tour = document.querySelector('.tour-dialog');

  let timeout;
  let shown = 0;

  if (!tourRan) {
    wrapper.classList.add('tour');

    let items = [...document.querySelectorAll('.tour-item')].sort((a, b) => {
      return (+a.dataset.index) - (+b.dataset.index);
    });

    let listeners = [];

    for (let item of items) {

      let firstClass = item.className.slice(0, item.className.indexOf(' '));
      let ev = firstClass === 'drawer' ? 'touchstart' : 'click';

      item.addEventListener(ev, function listener(e) {
        e.preventDefault();
        e.stopPropagation();

        clearTimeout(timeout);
        listeners.push({item, listener, ev});

        shown++;

        tour.innerHTML = MESSAGES[firstClass];

        timeout = setTimeout(() => {
          if (shown >= items.length) {
            wrapper.classList.remove('tour');
            localStorage.setItem('tourRan', 'true');

            for (let {item, listener, ev} of listeners) {
              item.removeEventListener(ev, listener);
            }
          }
        }, DIALOG_HIDE_DELAY);
      });
    }
  }
}