Improve dialogs, Add Skip button to Tour

build/main.js

@@ -30116,7 +30116,8 @@ var copy = _asyncToGenerator(function* (file, newPath) {
         if ((0, _utils.type)(child) === 'File') {
           Object.defineProperty(child, 'path', {
             value: oldPath + '/',
-            enumerable: true
+            enumerable: true,
+            configurable: true
           });
         }
 
@@ -30344,7 +30345,7 @@ var Dialog = (function (_Component) {
       var active = _props.active;
       var value = _props.value;
 
-      var conditionalInput = input ? _react2['default'].createElement('input', { ref: 'input', value: value }) : '';
+      var conditionalInput = input ? _react2['default'].createElement('input', { ref: 'input', defaultValue: value }) : '';
 
       var buttons = this.props.buttons.map(function (button, i) {
         return _react2['default'].createElement(
@@ -30361,7 +30362,7 @@ var Dialog = (function (_Component) {
         if (i % 2 === 0) {
           groupButtons.push(_react2['default'].createElement(
             'div',
-            { className: 'foot' },
+            { className: 'foot', key: i / 2 },
             buttons[i],
             buttons[i + 1]
           ));
@@ -30565,9 +30566,9 @@ var FileList = (function (_Component) {
       var els = files.map(function (file, index) {
         var selected = activeFile.indexOf(file) > -1;
         if ((0, _utils.type)(file) === 'File') {
-          return _react2['default'].createElement(_file2['default'], { selectView: selectView, selected: selected, key: index, index: index, name: file.name, size: file.size });
+          return _react2['default'].createElement(_file2['default'], { selectView: selectView, selected: selected, key: index, index: index, name: file.name, size: file.size, type: file.type });
         } else {
-          return _react2['default'].createElement(_directory2['default'], { selectView: selectView, selected: selected, key: index, index: index, name: file.name, children: file.children });
+          return _react2['default'].createElement(_directory2['default'], { selectView: selectView, selected: selected, key: index, index: index, name: file.name, children: file.children, type: file.type });
         }
       });
 
@@ -30667,8 +30668,6 @@ var File = (function (_Component) {
         label = _react2['default'].createElement('label', { htmlFor: checkId });
       }
 
-      console.log(this.props.type);
-
       var clickHandler = this.props.selectView ? this.select.bind(this) : this.open.bind(this);
 
       return _react2['default'].createElement(
@@ -30694,6 +30693,8 @@ var File = (function (_Component) {
   }, {
     key: 'open',
     value: function open(e) {
+      e.preventDefault();
+      e.stopPropagation();
       var file = _store2['default'].getState().get('files')[this.props.index];
 
       var name = file.type === 'application/pdf' ? 'view' : 'open';
@@ -30892,6 +30893,7 @@ var MENU_TOP_SPACE = 20;
 exports['default'] = {
   contextMenu: function contextMenu(e) {
     e.preventDefault();
+    e.stopPropagation();
 
     var file = store.getState().get('files')[this.props.index];
     var rect = _react2['default'].findDOMNode(this.refs.container).getBoundingClientRect();
@@ -30914,7 +30916,10 @@ exports['default'] = {
     store.dispatch((0, _actionsFile.active)([file]));
   },
 
-  select: function select() {
+  select: function select(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
     var current = (store.getState().get('activeFile') || []).slice(0);
     var file = store.getState().get('files')[this.props.index];
 
@@ -31326,6 +31331,11 @@ var Root = (function (_Component) {
           'div',
           { className: 'tour-dialog' },
           'Hello! Tap each highlighted button to get an understanding of how they work.'
+        ),
+        _react2['default'].createElement(
+          'button',
+          { id: 'skip-tour' },
+          'Skip'
         )
       );
     }
@@ -32537,89 +32547,40 @@ exports['default'] = function () {
   var tourRan = localStorage.getItem('tourRan');
   var wrapper = document.querySelector('#wrapper');
   var tour = document.querySelector('.tour-dialog');
+  var skip = document.querySelector('#skip-tour');
 
   var timeout = undefined;
   var shown = 0;
 
   if (!tourRan) {
-    var _iteratorNormalCompletion;
+    var _iteratorNormalCompletion2;
 
-    var _didIteratorError;
+    var _didIteratorError2;
 
-    var _iteratorError;
+    var _iteratorError2;
 
-    var _iterator, _step;
+    var _iterator2, _step2;
 
     (function () {
-      wrapper.classList.add('tour');
-
-      var items = [].concat(_toConsumableArray(document.querySelectorAll('.tour-item'))).sort(function (a, b) {
-        return +a.dataset.index - +b.dataset.index;
-      });
-
       var listeners = [];
 
-      _iteratorNormalCompletion = true;
+      wrapper.classList.add('tour');
-      _didIteratorError = false;
-      _iteratorError = undefined;
 
-      try {
+      skip.addEventListener('touchstart', function () {
-        var _loop = function () {
-          var item = _step.value;
-
-          var firstClass = item.className.slice(0, item.className.indexOf(' '));
-          var ev = firstClass === 'drawer' ? 'touchstart' : 'click';
-
-          item.addEventListener(ev, function listener(e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            clearTimeout(timeout);
-            listeners.push({ item: item, listener: listener, ev: ev });
-
-            shown++;
-
-            tour.innerHTML = MESSAGES[firstClass];
-
-            timeout = setTimeout(function () {
-              if (shown >= items.length) {
         wrapper.classList.remove('tour');
         localStorage.setItem('tourRan', 'true');
 
-                var _iteratorNormalCompletion2 = true;
+        var _iteratorNormalCompletion = true;
-                var _didIteratorError2 = false;
+        var _didIteratorError = false;
-                var _iteratorError2 = undefined;
+        var _iteratorError = undefined;
 
         try {
-                  for (var _iterator2 = listeners[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+          for (var _iterator = listeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                    var _step2$value = _step2.value;
+            var _step$value = _step.value;
-                    var _item = _step2$value.item;
+            var item = _step$value.item;
-                    var _listener = _step2$value.listener;
+            var listener = _step$value.listener;
-                    var _ev = _step2$value.ev;
 
-                    _item.removeEventListener(_ev, _listener);
+            item.removeEventListener('touchstart', listener);
-                  }
-                } catch (err) {
-                  _didIteratorError2 = true;
-                  _iteratorError2 = err;
-                } finally {
-                  try {
-                    if (!_iteratorNormalCompletion2 && _iterator2['return']) {
-                      _iterator2['return']();
-                    }
-                  } finally {
-                    if (_didIteratorError2) {
-                      throw _iteratorError2;
-                    }
-                  }
-                }
-              }
-            }, DIALOG_HIDE_DELAY);
-          });
-        };
-
-        for (_iterator = items[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          _loop();
           }
         } catch (err) {
           _didIteratorError = true;
@@ -32635,6 +32596,86 @@ exports['default'] = function () {
             }
           }
         }
+      });
+
+      var items = [].concat(_toConsumableArray(document.querySelectorAll('.tour-item'))).sort(function (a, b) {
+        return +a.dataset.index - +b.dataset.index;
+      });
+
+      _iteratorNormalCompletion2 = true;
+      _didIteratorError2 = false;
+      _iteratorError2 = undefined;
+
+      try {
+        var _loop = function () {
+          var item = _step2.value;
+
+          var firstClass = item.className.slice(0, item.className.indexOf(' '));
+
+          item.addEventListener('touchstart', function listener(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            clearTimeout(timeout);
+            listeners.push({ item: item, listener: listener });
+
+            shown++;
+
+            tour.innerHTML = MESSAGES[firstClass];
+
+            timeout = setTimeout(function () {
+              if (shown >= items.length) {
+                wrapper.classList.remove('tour');
+                localStorage.setItem('tourRan', 'true');
+
+                var _iteratorNormalCompletion3 = true;
+                var _didIteratorError3 = false;
+                var _iteratorError3 = undefined;
+
+                try {
+                  for (var _iterator3 = listeners[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+                    var _step3$value = _step3.value;
+                    var _item = _step3$value.item;
+                    var _listener = _step3$value.listener;
+
+                    _item.removeEventListener('touchstart', _listener);
+                  }
+                } catch (err) {
+                  _didIteratorError3 = true;
+                  _iteratorError3 = err;
+                } finally {
+                  try {
+                    if (!_iteratorNormalCompletion3 && _iterator3['return']) {
+                      _iterator3['return']();
+                    }
+                  } finally {
+                    if (_didIteratorError3) {
+                      throw _iteratorError3;
+                    }
+                  }
+                }
+              }
+            }, DIALOG_HIDE_DELAY);
+          });
+        };
+
+        for (_iterator2 = items[Symbol.iterator](); !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+          _loop();
+        }
+      } catch (err) {
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion2 && _iterator2['return']) {
+            _iterator2['return']();
+          }
+        } finally {
+          if (_didIteratorError2) {
+            throw _iteratorError2;
+          }
+        }
+      }
     })();
   }
 };

build/polyfill.js

@@ -29,7 +29,6 @@ function shimDirectory(directory) {
     directory.toString = function() { return '[object Directory]' };
     directory.getFilesAndDirectories = function getFilesAndDirectories() {
       var current = (this.path || '') + this.name;
-			console.log('gettingFilesAndDirectories of', this);
       var children = [];
 
       return new Promise(function(resolve, reject) {
@@ -50,7 +49,9 @@ function shimDirectory(directory) {
               type: this.result.type
             });
             Object.defineProperty(file, 'path', {
-              value: parts.slice(0, -1).join('/') + '/'
+              value: parts.slice(0, -1).join('/') + '/',
+							configurable: true,
+							enumerable: true
             });
             children.push(file);
 

build/style.css

@@ -209,7 +209,21 @@ input:checked + label::after {
   transform: translate(-50%, -50%);
   z-index: 5;
 }
-.tour-dialog {
+.tour #skip-tour {
+  font-size: 2rem;
+  display: block;
+  padding: 0.5rem 5rem;
+  margin: 1rem auto;
+  background: #b8e986;
+  position: fixed;
+  left: 50%;
+  top: 65%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 15px 24px 6px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+.tour-dialog,
+#skip-tour {
   display: none;
 }
 @keyframes pulse {

src/js/api/files.js

@@ -133,7 +133,8 @@ export async function copy(file, newPath) {
       if (type(child) === 'File') {
         Object.defineProperty(child, 'path', {
           value: oldPath + '/',
-          enumerable: true
+          enumerable: true,
+          configurable: true
         });
       }
 

src/js/components/dialog.js

@@ -4,7 +4,7 @@ import { template } from 'utils';
 export default class Dialog extends Component {
   render() {
     let { input, title, description, active, value } = this.props;
-    let conditionalInput = input ? <input ref='input' value={value} /> : '';
+    let conditionalInput = input ? <input ref='input' defaultValue={value} /> : '';
 
     let buttons = this.props.buttons.map((button, i) => {
       return (
@@ -20,7 +20,7 @@ export default class Dialog extends Component {
     for (let i = 0; i < buttons.length; i++) {
       if (i % 2 === 0) {
         groupButtons.push(
-          <div className='foot'>
+          <div className='foot' key={i / 2}>
             {buttons[i]}
             {buttons[i+1]}
           </div>

src/js/components/file-list.js

@@ -21,9 +21,9 @@ export default class FileList extends Component {
     let els = files.map((file, index) => {
       let selected = activeFile.indexOf(file) > -1;
       if (type(file) === 'File') {
-        return <File selectView={selectView} selected={selected} key={index} index={index} name={file.name} size={file.size} />;
+        return <File selectView={selectView} selected={selected} key={index} index={index} name={file.name} size={file.size} type={file.type} />;
       } else {
-        return <Directory selectView={selectView} selected={selected} key={index} index={index} name={file.name} children={file.children} />
+        return <Directory selectView={selectView} selected={selected} key={index} index={index} name={file.name} children={file.children} type={file.type} />
       }
     });
 

src/js/components/file.js

@@ -18,8 +18,6 @@ export default class File extends Component {
       label = <label htmlFor={checkId}></label>;
     }
 
-    console.log(this.props.type);
-
     let clickHandler = this.props.selectView ? this.select.bind(this)
                                              : this.open.bind(this);
 
@@ -39,6 +37,8 @@ export default class File extends Component {
   }
 
   open(e) {
+    e.preventDefault();
+    e.stopPropagation();
     let file = store.getState().get('files')[this.props.index];
 
     let name = file.type === 'application/pdf' ? 'view' : 'open';

src/js/components/mixins/entry.js

@@ -8,6 +8,7 @@ const MENU_TOP_SPACE = 20;
 export default {
   contextMenu(e) {
     e.preventDefault();
+    e.stopPropagation();
 
     let file = store.getState().get('files')[this.props.index];
     let rect = React.findDOMNode(this.refs.container).getBoundingClientRect();
@@ -27,7 +28,10 @@ export default {
     store.dispatch(active([file]));
   },
 
-  select() {
+  select(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
     let current = (store.getState().get('activeFile') || []).slice(0);
     let file = store.getState().get('files')[this.props.index];
 

src/js/components/root.js

@@ -55,6 +55,7 @@ export default class Root extends Component {
         <div className='tour-dialog'>
           Hello! Tap each highlighted button to get an understanding of how they work.
         </div>
+        <button id='skip-tour'>Skip</button>
       </div>
     );
   }

src/js/tour.js

@@ -15,30 +15,39 @@ export default function() {
   let tourRan = localStorage.getItem('tourRan');
   let wrapper = document.querySelector('#wrapper');
   let tour = document.querySelector('.tour-dialog');
+  let skip = document.querySelector('#skip-tour');
 
   let timeout;
   let shown = 0;
 
   if (!tourRan) {
+    let listeners = [];
+
     wrapper.classList.add('tour');
 
+    skip.addEventListener('touchstart', () => {
+      wrapper.classList.remove('tour');
+      localStorage.setItem('tourRan', 'true');
+
+      for (let {item, listener} of listeners) {
+        item.removeEventListener('touchstart', listener);
+      }
+    })
+
     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) {
+      item.addEventListener('touchstart', function listener(e) {
         e.preventDefault();
         e.stopPropagation();
 
         clearTimeout(timeout);
-        listeners.push({item, listener, ev});
+        listeners.push({item, listener});
 
         shown++;
 
@@ -49,8 +58,8 @@ export default function() {
             wrapper.classList.remove('tour');
             localStorage.setItem('tourRan', 'true');
 
-            for (let {item, listener, ev} of listeners) {
+            for (let {item, listener} of listeners) {
-              item.removeEventListener(ev, listener);
+              item.removeEventListener('touchstart', listener);
             }
           }
         }, DIALOG_HIDE_DELAY);

src/less/styles/tour.less

@@ -108,9 +108,32 @@
 
     z-index: 5;
   }
+
+  #skip-tour {
+    font-size: 2rem;
+
+    display: block;
+
+    padding: 0.5rem 5rem;
+
+    margin: 1rem auto;
+
+    .btn.success;
+
+    position: fixed;
+
+    left: 50%;
+    top: 65%;
+
+    transform: translate(-50%, -50%);
+
+    .shadow-16;
+
+    z-index: 1;
+  }
 }
 
-.tour-dialog {
+.tour-dialog, #skip-tour {
   display: none;
 }
 

src/polyfill.js

@@ -29,7 +29,6 @@ function shimDirectory(directory) {
     directory.toString = function() { return '[object Directory]' };
     directory.getFilesAndDirectories = function getFilesAndDirectories() {
       var current = (this.path || '') + this.name;
-			console.log('gettingFilesAndDirectories of', this);
       var children = [];
 
       return new Promise(function(resolve, reject) {
@@ -50,7 +49,9 @@ function shimDirectory(directory) {
               type: this.result.type
             });
             Object.defineProperty(file, 'path', {
-              value: parts.slice(0, -1).join('/') + '/'
+              value: parts.slice(0, -1).join('/') + '/',
+							configurable: true,
+							enumerable: true
             });
             children.push(file);