all files / addon/components/ step.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { readOnly } from '@ember/object/computed';
import Component from '@ember/component';
 
export default Component.extend({
  // Optionally define the number (priority) of step
  step: 0,
 
  // The tooltip text of step
  intro: null,
 
  // Optionally define a CSS class for tooltip
  tooltipClass: null,
 
  // Optionally append a CSS class to the helperLayer
  highlightClass: null,
 
  // Optionally define the position of tooltip, top, left, right,
  // bottom, bottom-left-aligned (same as bottom), bottom-middle-aligned,
  // bottom-right-aligned or auto (to detect the position of element
  // and assign the correct position automatically). Default is bottom
  position: 'bottom',
 
  // The tooltip text of hint
  hint: null,
 
  // Optionally define the position of hint. Options: top-middle, top-left,
  // top-right, bottom-left, bottom-right, bottom-middle,
  // middle-left, middle-right, middle-middle. Default: top-middle
  hintPosition: 'top-middle',
 
  // PRIVATE interface - INTRO JS implementation
 
  attributeBindings: [
    'data-step',
    'data-intro',
    'data-position',
    'data-tooltipClass',
    'data-highlightClass',
    'data-hint',
    'data-hintPosition'
  ],
 
  'data-step': readOnly('step'),
 
  'data-hint': readOnly('hint'),
  'data-intro': readOnly('intro'),
 
  'data-tooltipClass': readOnly('tooltipClass'),
  'data-highlightClass': readOnly('highlightClass'),
 
  'data-position': readOnly('position'),
  'data-hintPosition': readOnly('hintPosition'),
});