Popover.ts 3.86 KB
Newer Older
Stefan Bürk's avatar
Stefan Bürk committed
1
2
3
4
5
6
7
8
9
10
11
12
13
/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */

14
import $ from 'jquery';
15
import {Popover as BootstrapPopover} from 'bootstrap';
Stefan Bürk's avatar
Stefan Bürk committed
16
17
18
19
20
21
22
23
24
25
26
27
28

/**
 * Module: TYPO3/CMS/Backend/Popover
 * API for popover windows powered by Twitter Bootstrap.
 * @exports TYPO3/CMS/Backend/Popover
 */
class Popover {

  /**
   * Default selector string.
   *
   * @return {string}
   */
29
  private readonly DEFAULT_SELECTOR: string = '[data-bs-toggle="popover"]';
Stefan Bürk's avatar
Stefan Bürk committed
30

31
32
33
34
  constructor() {
    this.initialize();
  }

Stefan Bürk's avatar
Stefan Bürk committed
35
36
37
38
39
  /**
   * Initialize
   */
  public initialize(selector?: string): void {
    selector = selector || this.DEFAULT_SELECTOR;
40
41
42
43
    $(selector).each((i, el) => {
      const popover = new BootstrapPopover(el)
      $(el).data('typo3.bs.popover', popover);
    });
Stefan Bürk's avatar
Stefan Bürk committed
44
45
46
47
48
49
50
51
  }

  // noinspection JSMethodCanBeStatic
  /**
   * Popover wrapper function
   *
   * @param {JQuery} $element
   */
52
53
54
55
56
  public popover($element: JQuery) {
    $element.each((i, el) => {
      const popover = new BootstrapPopover(el)
      $(el).data('typo3.bs.popover', popover);
    });
Stefan Bürk's avatar
Stefan Bürk committed
57
58
59
60
61
62
63
64
65
  }

  // noinspection JSMethodCanBeStatic
  /**
   * Set popover options on $element
   *
   * @param {JQuery} $element
   * @param {PopoverOptions} options
   */
66
67
  public setOptions($element: JQuery, options?: BootstrapPopover.Options): void {
    options = options || <BootstrapPopover.Options>{};
68
    const title: string|(() => void) = options.title || $element.data('title') || '';
69
    const content: string|(() => void) = options.content || $element.data('bs-content') || '';
Stefan Bürk's avatar
Stefan Bürk committed
70
    $element
71
72
73
74
75
76
77
      .attr('data-bs-original-title', (title as string))
      .attr('data-bs-content', (content as string))
      .attr('data-bs-placement', 'auto')

    $.each(options, (key, value) => {
      this.setOption($element, key, value);
    });
Stefan Bürk's avatar
Stefan Bürk committed
78
79
80
81
82
83
84
85
86
87
88
  }

  // noinspection JSMethodCanBeStatic
  /**
   * Set popover option on $element
   *
   * @param {JQuery} $element
   * @param {String} key
   * @param {String} value
   */
  public setOption($element: JQuery, key: string, value: string): void {
89
90
91
92
93
94
95
96
97
98
    if (key === 'content') {
      $element.attr('data-bs-content', value);
    } else {
      $element.each((i, el) => {
        const popover = $(el).data('typo3.bs.popover');
        if (popover) {
          popover.config[key] = value;
        }
      });
    }
Stefan Bürk's avatar
Stefan Bürk committed
99
100
101
102
103
104
105
106
107
  }

  // noinspection JSMethodCanBeStatic
  /**
   * Show popover with title and content on $element
   *
   * @param {JQuery} $element
   */
  public show($element: JQuery): void {
108
109
110
111
112
113
    $element.each((i, el) => {
      const popover = $(el).data('typo3.bs.popover');
      if (popover) {
        popover.show();
      }
    });
Stefan Bürk's avatar
Stefan Bürk committed
114
115
116
117
118
119
120
121
122
  }

  // noinspection JSMethodCanBeStatic
  /**
   * Hide popover on $element
   *
   * @param {JQuery} $element
   */
  public hide($element: JQuery): void {
123
124
125
126
127
128
    $element.each((i, el) => {
      const popover = $(el).data('typo3.bs.popover');
      if (popover) {
        popover.hide();
      }
    });
Stefan Bürk's avatar
Stefan Bürk committed
129
130
131
132
133
134
135
136
137
  }

  // noinspection JSMethodCanBeStatic
  /**
   * Destroy popover on $element
   *
   * @param {Object} $element
   */
  public destroy($element: JQuery): void {
138
139
140
141
142
143
    $element.each((i, el) => {
      const popover = $(el).data('typo3.bs.popover');
      if (popover) {
        popover.dispose();
      }
    });
Stefan Bürk's avatar
Stefan Bürk committed
144
145
146
147
148
149
150
151
152
  }

  // noinspection JSMethodCanBeStatic
  /**
   * Toggle popover on $element
   *
   * @param {Object} $element
   */
  public toggle($element: JQuery): void {
153
154
155
156
157
158
    $element.each((i, el) => {
      const popover = $(el).data('typo3.bs.popover');
      if (popover) {
        popover.toggle();
      }
    });
Stefan Bürk's avatar
Stefan Bürk committed
159
160
161
  }
}

162
export = new Popover();