Merge branch 'feature-guided-tour' into dev

.gitignore

@@ -16,3 +16,4 @@
 npm-debug.log
 testem.log
 yarn-error.log
+.DS_Store

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "printWidth": 100,
-    "singleQuote": true,
-    "trailingComma": "es5",
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5"
 }

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/care-record.js

@@ -46,6 +46,7 @@ export default Ember.Component.extend(PropTypesMixin, {
     onAddImage: PropTypes.func,
     onAddAudio: PropTypes.func,
     onRemoveMedia: PropTypes.func,
+    onOptionsClose: PropTypes.func,
     // record modification handlers
     onAddNote: PropTypes.func,
     onCall: PropTypes.func,
@@ -142,6 +143,9 @@ export default Ember.Component.extend(PropTypesMixin, {
   _onRemoveMedia() {
     tryInvoke(this, 'onRemoveMedia', [...arguments]);
   },
+  _onOptionsClose() {
+    tryInvoke(this, 'onOptionsClose', [...arguments]);
+  },
 
   // record modification handlers
   _addNoteInPast(addAfterRecordItem) {

app/components/hide-show.js

@@ -19,6 +19,7 @@ export default Ember.Component.extend(PropTypesMixin, HasAppRoot, HasEvents, {
     clickOutToClose: PropTypes.bool,
     ignoreCloseSelector: PropTypes.oneOfType([PropTypes.null, PropTypes.string]),
     focusOutToClose: PropTypes.bool,
+    animate: PropTypes.bool, // TODO
     disabled: PropTypes.bool
   },
   getDefaultProps() {
@@ -27,6 +28,7 @@ export default Ember.Component.extend(PropTypesMixin, HasAppRoot, HasEvents, {
       clickOutToClose: false,
       ignoreCloseSelector: '.slideout-pane, .c-notification__container',
       focusOutToClose: false,
+      animate: false,
       disabled: false
     };
   },

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,21 @@ 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,
+    startOpen: PropTypes.bool,
+    bodyClass: PropTypes.string
   },
   getDefaultProps() {
-    return { bodyClickWillClose: true };
+    return {
+      bodyClickWillClose: true,
+      focusOnOpen: true,
+      closeWithOverlay: true,
+      verticalPosition: true,
+      startOpen: false
+    };
   },
   classNames: ['pop-over'],
 
@@ -35,6 +49,9 @@ export default Ember.Component.extend(PropTypesMixin, HasWormhole, HasEvents, {
   didInsertElement() {
     this._super(...arguments);
     run.scheduleOnce('afterRender', this, this._attachListeners);
+    if (this.get('startOpen')) {
+      run.scheduleOnce('afterRender', this, this._toggle);
+    }
   },
   // only do this on subsequent render this pop-over happens to be open
   didUpdateAttrs() {
@@ -73,7 +90,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 +142,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 +169,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 +208,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 +263,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/record-actions-control.js

@@ -20,6 +20,7 @@ export default Ember.Component.extend(PropTypesMixin, {
     onAddImage: PropTypes.func,
     onAddAudio: PropTypes.func,
     onRemoveMedia: PropTypes.func,
+    onOptionsClose: PropTypes.func,
     // record modification handlers
     onAddNoteInPast: PropTypes.func,
     onAddNote: PropTypes.func,
@@ -117,6 +118,10 @@ export default Ember.Component.extend(PropTypesMixin, {
     tryInvoke(this, 'onRemoveMedia', [...arguments]);
   },
 
+  _onOptionsClose() {
+    tryInvoke(this, 'onOptionsClose', [...arguments]);
+  },
+
   // record modification handlers
   _addNoteInPast() {
     tryInvoke(this, 'onAddNoteInPast');

app/components/tour-components/hint.js

@@ -0,0 +1,24 @@
+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({
+  tutorialService: Ember.inject.service(),
+
+  propTypes: {
+    hintId: PropTypes.string.isRequired
+  },
+
+  classNames: ['hint'],
+
+  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);
+  })
+});

app/components/tour-components/overlay.js

@@ -0,0 +1,66 @@
+import Ember from 'ember';
+import PropTypesMixin, { PropTypes } from 'ember-prop-types';
+import HasWormhole from 'textup-frontend/mixins/component/has-wormhole';
+
+const { computed, $, tryInvoke } = Ember;
+
+export default Ember.Component.extend(PropTypesMixin, HasWormhole, {
+  propTypes: {
+    elementToHighlight: PropTypes.string,
+    showOverlay: PropTypes.bool,
+    doRegister: PropTypes.func,
+    svgClasses: PropTypes.string
+  },
+
+  getDefaultProps() {
+    return {
+      showOverlay: true
+    };
+  },
+
+  init() {
+    this._super(...arguments);
+    tryInvoke(this, 'doRegister', [this.get('_publicAPI')]);
+  },
+
+  _publicAPI: computed(function() {
+    return {
+      actions: {
+        calculateCutout: this._setElementDimensions.bind(this),
+        removeCutout: this._removeDimensions.bind(this)
+      }
+    };
+  }),
+
+  _elementDimensions: null,
+  _elementToWormhole: computed('_svgId', function() {
+    return this.$('#' + this.get('_svgId'));
+  }),
+
+  _svgId: computed(function() {
+    return `tour-manager--${this.elementId}`;
+  }),
+
+  _removeDimensions() {
+    if (this.get('isDestroying') || this.get('isDestroyed')) {
+      return;
+    }
+    this.set('_elementDimensions', null);
+  },
+
+  _setElementDimensions() {
+    if (this.get('isDestroying') || this.get('isDestroyed')) {
+      return;
+    }
+    const elementToHighlight = $(this.get('elementToHighlight'))[0];
+    if (elementToHighlight) {
+      const dimensions = elementToHighlight.getBoundingClientRect();
+      this.set('_elementDimensions', {
+        x: dimensions.x,
+        y: dimensions.y,
+        width: dimensions.width,
+        height: dimensions.height
+      });
+    }
+  }
+});