feat tour: Show new users around

src/js/components/header.js

@@ -13,12 +13,12 @@ export default class Header extends Component {
     if (this.props.search) {
       i = <i className='icon-cross' onClick={bind(search())} />
     } else {
-      i = <i className='icon-search' onClick={bind(show('searchDialog'))} />
+      i = <i className='icon-search tour-item' onClick={bind(show('searchDialog'))} />
     }
 
     return (
       <header>
-        <button className='drawer' onTouchStart={bind(toggle())} />
+        <button className='drawer tour-item' onTouchStart={bind(toggle())} />
         <h1 className='regular-medium'>Hawk</h1>
 
         {i}

src/js/components/root.js

@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
 import { hideAll as hideAllMenus } from 'actions/menu';
 import { hideAll as hideAllDialogs} from 'actions/dialog';
 
+import tour from 'tour';
 import changedir from 'actions/changedir';
 import store from 'store';
 
@@ -48,10 +49,18 @@ export default class Root extends Component {
         <SearchDialog />
 
         <Spinner />
+
+        <div className='tour-dialog'>
+          Hello! Tap each highlighted button to get an understanding of how they work.
+        </div>
       </div>
     );
   }
 
+  componentDidMount() {
+    tour();
+  }
+
   touchStart(e) {
     let active = document.querySelector('.active');
     let inside = e.target.closest('.active');

src/js/components/toolbar.js

@@ -9,11 +9,11 @@ export default class Toolbar extends Component {
   render() {
     return (
       <div className='toolbar'>
-        <button className='icon-plus' onClick={this.newFile} />
+        <button className='icon-plus tour-item' onClick={this.newFile} />
         <button className='icon-view coming-soon' onClick={bind(toggleView())} />
-        <button className='icon-refresh' onClick={bind(refresh())} />
-        <button className='icon-select' onClick={bind(selectView('toggle'))} />
-        <button className='icon-more' onClick={this.showMore.bind(this)} ref='more' />
+        <button className='icon-refresh tour-item' onClick={bind(refresh())} />
+        <button className='icon-select tour-item' onClick={bind(selectView('toggle'))} />
+        <button className='icon-more tour-item' onClick={this.showMore.bind(this)} ref='more' />
       </div>
     );
   }

src/js/tour.js

@@ -0,0 +1,56 @@
+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'
+}
+
+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) {
+      item.addEventListener('touchstart', function listener(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        clearTimeout(timeout);
+        listeners.push({item, listener});
+
+        shown++;
+
+        let firstClass = item.className.slice(0, item.className.indexOf(' '));
+        tour.innerHTML = MESSAGES[firstClass];
+
+        timeout = setTimeout(() => {
+          if (shown >= items.length) {
+            wrapper.classList.remove('tour');
+            localStorage.setItem('tourRan', 'true');
+
+            for (let {item, listener} of listeners) {
+              console.log(item, listener);
+              item.removeEventListener('touchstart', listener);
+            }
+          }
+        }, DIALOG_HIDE_DELAY);
+      });
+    }
+  }
+}