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