1/*  DokuWiki MoaiEditor Hint.js file
2    Author  : MoaiTools <info@moaitools.org>
3    License : GPL 3 (http://www.gnu.org/licenses/gpl.html) */
4
5/*  Hint class
6    ‾‾‾‾‾‾‾‾‾‾
7    Creates a little animated graphical element to draw the user's attention to a GUI element.
8    It lasts only a few seconds on screen before dissapearing.
9
10    Example:                    ╭────────╮
11                  Click me  ━━▶ │ Button │
12                                ╰────────╯
13*/
14MoaiEditor.Hint = class {
15
16    constructor (type, text, parent, x, y) {
17        if (type == 'arrow-right')
18            this.element = this.arrowRight(text, parent, x, y);
19        if (type == 'arrow-corner-left-down')
20            this.element = this.arrowCornerLeftDown(text, parent, x, y);
21        parent.appendChild(this.element);
22    }
23
24    start () {
25        this.element.classList.add('moaied-hint-animate');
26    }
27
28    disable () {
29        this.element.classList.remove('moaied-hint-animate');
30    }
31
32    arrowRight(text, parent, x, y) {
33        const arrow = moaiEditor.icons.ico_arrowright;
34        const wrapper = moaiEditor.createHTML('<div class="moaied-hint moaied-hint-arrow-right"></div>');
35        const content = moaiEditor.createHTML('<span><i>'+text+'</i>'+arrow+'</span>');
36        wrapper.appendChild(content);
37        wrapper.style.top = y+'px';
38        wrapper.style.right = x+'px';
39        return wrapper;
40    }
41
42    arrowCornerLeftDown(text, parent, x, y) {
43        const arrow = moaiEditor.icons.ico_arrow_corner_leftdown;
44        const wrapper = moaiEditor.createHTML('<div class="moaied-hint moaied-hint-arrow-corner-left-down"></div>');
45        const content = moaiEditor.createHTML('<span>'+arrow+'<i>'+text+'</i></span>');
46        wrapper.appendChild(content);
47        wrapper.style.top = -y+'px';
48        wrapper.style.left = x+'px';
49        return wrapper;
50    }
51}; // End Class
52
53
54