tour, tutorial and hints

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

app/components/app-message.js

@@ -10,9 +10,10 @@ export default Ember.Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
-    Ember.$
-      .get(this.get('config.appMessage.messageEndpoint'))
-      .then(this._onMessageSuccess.bind(this), this._onMessageFailure.bind(this));
+    Ember.$.get(this.get('config.appMessage.messageEndpoint')).then(
+      this._onMessageSuccess.bind(this),
+      this._onMessageFailure.bind(this)
+    );
   },
 
   // Internal properties

app/components/pop-over.js

@@ -5,9 +5,12 @@ import MutationObserver from 'npm:mutation-observer';
 import PropTypesMixin, { PropTypes } from 'ember-prop-types';
 import {
   hasMoreViewportSpaceOnTop,
+  hasMoreViewportSpaceOnLeft,
   shouldAlignToLeftEdge,
-  buildFloatingStyles,
-  buildDimensionStyles
+  shouldAlignToTopEdge,
+  buildVerticalFloatingStyles,
+  buildHorizontalFloatingStyles,
+  buildVerticalDimensionStyles
 } from 'textup-frontend/utils/bounds';
 
 const { computed, RSVP, run, tryInvoke } = Ember;
@@ -21,10 +24,18 @@ export default Ember.Component.extend(PropTypesMixin, HasWormhole, HasEvents, {
     onClose: PropTypes.func,
     onReposition: PropTypes.func,
     bodyClickWillClose: PropTypes.bool,
-    position: PropTypes.oneOfType([PropTypes.null, PropTypes.string])
+    position: PropTypes.oneOfType([PropTypes.null, PropTypes.string]),
+    verticalPosition: PropTypes.bool,
+    focusOnOpen: PropTypes.bool,
+    closeWithOverlay: PropTypes.bool
   },
   getDefaultProps() {
-    return { bodyClickWillClose: true };
+    return {
+      bodyClickWillClose: true,
+      focusOnOpen: true,
+      closeWithOverlay: true,
+      verticalPosition: true
+    };
   },
   classNames: ['pop-over'],
 
@@ -73,7 +84,13 @@ export default Ember.Component.extend(PropTypesMixin, HasWormhole, HasEvents, {
   }),
   _previousPosition: null,
   _bodyPositionTop: null,
+  _bodyPositionLeft: null,
+  _bodyPositionRight: null,
+  _bodyPositionBottom: null,
   _bodyAlignLeft: null,
+  _bodyAlignRight: null,
+  _bodyAlignTop: null,
+  _bodyAlignBottom: null,
   _bodyFloatStyles: null,
   _safeBodyFloatStyles: computed('_bodyFloatStyles', function() {
     const stylesArray = this.get('_bodyFloatStyles');
@@ -119,7 +136,7 @@ export default Ember.Component.extend(PropTypesMixin, HasWormhole, HasEvents, {
     }
     this._adjustPosition().then(() => {
       const bodyContents = this.get('_bodyContents');
-      if (bodyContents && bodyContents.length) {
+      if (bodyContents && bodyContents.length && this.get('focusOnOpen')) {
         run.scheduleOnce('afterRender', () => bodyContents.focus());
       }
       this.setProperties({ _isOpening: false, '_publicAPI.isOpen': true });
@@ -146,7 +163,13 @@ export default Ember.Component.extend(PropTypesMixin, HasWormhole, HasEvents, {
         this.setProperties({
           _isClosing: true, // intermediate state for closing animation
           _bodyPositionTop: null,
+          _bodyPositionBottom: null,
+          _bodyPositionRight: null,
+          _bodyPositionLeft: null,
           _bodyAlignLeft: null,
+          _bodyAlignRight: null,
+          _bodyAlignTop: null,
+          _bodyAlignBottom: null,
           _bodyFloatStyles: null,
           _bodyDimesionStyles: null,
           _closeCounter: counter
@@ -179,24 +202,48 @@ export default Ember.Component.extend(PropTypesMixin, HasWormhole, HasEvents, {
     });
   },
   _adjustPosition() {
-    return new RSVP.Promise(resolve => {
-      const triggerEl = this.element,
-        bodyEl = this.get('_bodyContents')[0],
-        isTop = this._determineIsTop(),
-        alignLeft = shouldAlignToLeftEdge(triggerEl),
-        floatStyles = buildFloatingStyles(isTop, alignLeft, triggerEl, bodyEl),
-        dimensionStyles = buildDimensionStyles(isTop, alignLeft, triggerEl, bodyEl);
+    if (this.get('verticalPosition')) {
+      return new RSVP.Promise(resolve => {
+        const triggerEl = this.element,
+          bodyEl = this.get('_bodyContents')[0],
+          isTop = this._determineIsTop(),
+          alignLeft = shouldAlignToLeftEdge(triggerEl),
+          floatStyles = buildVerticalFloatingStyles(isTop, alignLeft, triggerEl, bodyEl),
+          dimensionStyles = buildVerticalDimensionStyles(isTop, alignLeft, triggerEl, bodyEl);
 
-      run(() => {
-        this.setProperties({
-          _bodyPositionTop: isTop,
-          _bodyAlignLeft: alignLeft,
-          _bodyFloatStyles: floatStyles,
-          _bodyDimesionStyles: dimensionStyles
+        run(() => {
+          this.setProperties({
+            _bodyPositionTop: isTop,
+            _bodyPositionBottom: !isTop,
+            _bodyAlignLeft: alignLeft,
+            _bodyAlignRight: !alignLeft,
+            _bodyFloatStyles: floatStyles,
+            _bodyDimesionStyles: dimensionStyles
+          });
         });
+        resolve();
       });
-      resolve();
-    });
+    } else {
+      return new RSVP.Promise(resolve => {
+        const triggerEl = this.element,
+          bodyEl = this.get('_bodyContents')[0],
+          isLeft = this._determineIsLeft(),
+          alignTop = shouldAlignToTopEdge(triggerEl),
+          floatStyles = buildHorizontalFloatingStyles(isLeft, alignTop, triggerEl, bodyEl),
+          dimensionStyles = null;
+        run(() => {
+          this.setProperties({
+            _bodyPositionLeft: isLeft,
+            _bodyPositionRight: !isLeft,
+            _bodyAlignTop: alignTop,
+            _bodyAlignBottom: !alignTop,
+            _bodyFloatStyles: floatStyles,
+            _bodyDimesionStyles: dimensionStyles
+          });
+        });
+        resolve();
+      });
+    }
   },
   _determineIsTop() {
     const position = this.get('position'),
@@ -210,6 +257,18 @@ export default Ember.Component.extend(PropTypesMixin, HasWormhole, HasEvents, {
     }
   },
 
+  _determineIsLeft() {
+    const position = this.get('position'),
+      constants = this.get('constants');
+    if (position === constants.POP_OVER.POSITION.LEFT) {
+      return true;
+    } else if (position === constants.POP_OVER.POSITION.RIGHT) {
+      return false;
+    } else {
+      return hasMoreViewportSpaceOnLeft(this.element);
+    }
+  },
+
   _attachListeners() {
     Ember.$(window)
       .on(this._event('resize'), this._repositionOnChange.bind(this))

app/components/tour-components/hint-drawer.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+import PropTypesMixin, { PropTypes } from 'ember-prop-types';
+
+export default Ember.Component.extend(PropTypesMixin, {
+  propTypes: {
+    hintTitle: PropTypes.string.isRequired,
+    hintText: PropTypes.string.isRequired,
+    closeWindowFunction: PropTypes.func.isRequired,
+    closeButton: PropTypes.bool,
+    closeButtonText: PropTypes.string
+  },
+  getDefaultProps() {
+    return {
+      closeButton: true,
+      closeButtonText: 'Got it!'
+    };
+  },
+  closeWindow: function() {
+    this.get('closeWindowFunction')();
+  }
+});

app/components/tour-components/hint.js

@@ -0,0 +1,59 @@
+import Ember from 'ember';
+import { PropTypes } from 'ember-prop-types';
+import * as HintUtil from 'textup-frontend/utils/hint-info';
+
+const { computed } = Ember;
+
+export default Ember.Component.extend({
+  // hintService: Ember.inject.service(),
+
+  propTypes: {
+    hintId: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    verticalPosition: PropTypes.bool
+  },
+  getDefaultProps() {
+    return {
+      verticalPosition: false
+    };
+  },
+
+  classNames: ['hint'],
+
+  shouldShow: computed(function() {
+    return true;
+  }),
+
+  dot: computed('type', function() {
+    const type = this.get('type');
+    return type === 'dot';
+  }),
+
+  focus: computed('type', function() {
+    const type = this.get('type');
+    return type === 'focus';
+  }),
+
+  hintTitle: computed('hintId', function() {
+    const hintId = this.get('hintId');
+    return HintUtil.getTitle(hintId);
+  }),
+  hintText: computed('hintId', function() {
+    const hintId = this.get('hintId');
+    return HintUtil.getMessage(hintId);
+  }),
+
+  focusIn() {
+    if (!this.get('mobile')) {
+      this.get('_popOver').actions.open();
+    }
+  },
+
+  focusOut() {
+    if (!this.get('mobile')) {
+      this.get('_popOver').actions.close();
+    }
+  }
+
+  // shouldShow: computed.alias("hintService.shouldShow"),
+});

app/components/tour-components/task-manager.js

@@ -0,0 +1,70 @@
+import Ember from 'ember';
+import { PropTypes } from 'ember-prop-types';
+
+const { computed, tryInvoke } = Ember;
+
+export default Ember.Component.extend({
+  tutorialService: Ember.inject.service(),
+
+  propTypes: {
+    doRegister: PropTypes.func,
+    firstIncompleteTask: PropTypes.object
+  },
+
+  init() {
+    this._super(...arguments);
+    tryInvoke(this, 'doRegister', [this.get('_publicAPI')]);
+  },
+
+  // didInsertElement() {
+  // this._resetTasks();
+  // this._closeIfAllComplete();
+  // },
+
+  classNames: ['task-manager'],
+
+  _publicAPI: computed(function() {
+    return {
+      actions: {
+        finishCompleteTask: this._finishCompleteTask.bind(this),
+        resetTasks: this._resetTasks.bind(this),
+        closeTaskManager: this._close.bind(this),
+        startCompleteTask: this._startCompleteTask.bind(this)
+      }
+    };
+  }),
+
+  _taskStep: null,
+
+  _close() {
+    this.destroy();
+  },
+
+  _closeIfAllComplete() {
+    const firstIncomplete = this.get('firstIncompleteTask');
+    if (firstIncomplete === null) {
+      this._close();
+    }
+  },
+
+  _getTaskStatus(taskId) {
+    const tutorialService = this.get('tutorialService');
+    return tutorialService.getTaskStatus(taskId);
+  },
+
+  _startCompleteTask(taskId, shouldShowCompleteMessage) {
+    const taskStep = this.get('_taskStep');
+    taskStep.actions.completeTask(taskId, shouldShowCompleteMessage);
+  },
+
+  _finishCompleteTask(taskId) {
+    const tutorialService = this.get('tutorialService');
+    tutorialService.finishCompleteTask(taskId);
+    // this._closeIfAllComplete();
+  },
+
+  _resetTasks() {
+    const tutorialService = this.get('tutorialService');
+    tutorialService.resetTasks();
+  }
+});