https://www.psbedu.paris/themes/contrib/ui_suite_bootstrap/assets/js/misc/progress.js?tlv4k9

1/**
2 * @file
3 * Extends methods from core/misc/progress.js.
4 */
5
6(($, Drupal) => {
7  /**
8   * Theme function for the progress bar.
9   *
10   * @param {string} id
11   *   The HTML ID of the progress bar.
12   *
13   * @return {string}
14   *   The HTML for the progress bar.
15   */
16  Drupal.theme.progressBar = (id) => {
17    // @todo use the pattern progress directly if possible in JS.
18    return (
19      `<div class="progress-wrapper" aria-live="polite">` +
20      `<div class="progress__label"></div>` +
21      `<div id="${id}" class="progress" role="progressbar" aria-label="${Drupal.t(
22        'Progress bar',
23      )}" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">` +
24      `<div class="progress-bar-striped progress-bar-animated progress-bar">` +
25      `</div>` +
26      `</div>` +
27      `<div class="progress__description"></div>` +
28      `</div>`
29    );
30  };
31
32  $.extend(
33    Drupal.ProgressBar.prototype,
34    /** @lends Drupal.ProgressBar */ {
35      /**
36       * Set the percentage and status message for the progressbar.
37       *
38       * @param {number} percentage
39       *   The progression percentage.
40       * @param {string} message
41       *   The progression message.
42       * @param {string} label
43       *   The progress bar label.
44       */
45      setProgress(percentage, message, label) {
46        if (percentage >= 0 && percentage <= 100) {
47          $(this.element)
48            .find('.progress-bar')
49            // eslint-disable-next-line func-names
50            .each(function () {
51              this.style.width = `${percentage}%`;
52            });
53          $(this.element).find('.progress-bar').html(`${percentage}%`);
54          $(this.element).find('.progress').attr('aria-valuenow', percentage);
55        }
56        if (message) {
57          // Remove the unnecessary whitespace at the end of the message.
58          message = message.replace(/<br\/>&nbsp;|\s*$/, '');
59
60          $('.progress__description', this.element).html(message);
61        }
62        if (label) {
63          $('.progress__label', this.element).html(label);
64        }
65        if (this.updateCallback) {
66          this.updateCallback(percentage, message, this);
67        }
68      },
69
70      /**
71       * Display errors on the page.
72       *
73       * @param {string} string
74       *   The error message. In a 'pre' tag.
75       */
76      displayError(string) {
77        // @todo use the pattern alert directly if possible in JS.
78        // @todo use the pattern button_close directly if possible in JS.
79        const newError = $(
80          `<div class="alert-danger alert-dismissible fade show alert">` +
81            `<h4 class="alert-heading">${Drupal.t(
82              'Error message',
83            )}</h4>${string}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="${Drupal.t(
84              'Close',
85            )}"></button>` +
86            `</div>`,
87        );
88        $(this.element).before(newError).hide();
89
90        if (this.errorCallback) {
91          this.errorCallback(this);
92        }
93      },
94    },
95  );
96})(jQuery, Drupal);