https://meteofrance.re/modules/custom/mf_bms_domtom/js/src/index-diroi.js?v=1.x

1(function($, drupalSettings) {
2  Drupal.behaviors.bmsModule = {
3      attach: function(context, settings) {
4          var mfRes = Drupal.behaviors.tools.wrapper;
5          $(document).on('click', '.close, .modal-overlay', function() {
6              $('.modal').fadeOut(
7                  300,
8                  function() {
9
10                  }
11              );
12          });
13
14          var mf_bms = new Vue({
15              el: '#bms',
16              delimiters: ['${', '}'],
17              data: {
18                  display_1: false,
19                  init1: false,
20                  init2: false,
21                  initBms1: false,
22                  initBms2: false,
23                  display_2: false,
24                  map1: false,
25                  map2: false,
26                  maps: [],
27                  warning_phenomenous: [],
28                  all_bms: [],
29                  parsedBMS: [],
30                  modal_drawn: [],
31                  all_bms: {
32                    cote: [],
33                    large: []
34                  }
35              },
36              mounted: function() {
37                // this.initBms('cote');
38                // this.initBms('large');
39
40                for(var i = 0; i < drupalSettings.mf_bms_domtom_cote.length; i++) {
41                  this.getBms(drupalSettings.mf_bms_domtom_cote[i], 'cote');
42                }
43                // for(var y = 0; y < drupalSettings.mf_bms_domtom_large.length; y++) {
44                //   this.getBms(drupalSettings.mf_bms_domtom_large[y], 'large');
45                // }
46
47              },
48              methods: {
49                getBms: function(id_bms, bms_type) {
50                  var self = this;
51
52                  Drupal.behaviors.tools.wrapper.reportRaw(id_bms, "marine", 'BMS_' + bms_type + '_fr', "json").then(function(data) {
53
54                    if(data) {
55                      self.all_bms[bms_type].push(data);
56                      var typeTitle = bms_type;
57                      if(typeTitle == 'cote') {
58                        typeTitle = 'Côte';
59                      }
60                      else if(typeTitle == 'large') {
61                        typeTitle = 'Large';
62                      }
63                      var title = 'Avis de houle en cours';
64                      var href = 'href="/marine/cote"';
65                      switch(id_bms) {
66                        case 'BMSLARGE-04':
67                        case 'BMSLARGE-03':
68                        case 'BMSLARGE-05':
69                        case 'BMSLARGE-06':
70                        case 'BMSLARGE-07':
71                          href = 'href="/marine/large"';
72                        break;
73                      }
74
75
76                      var newBms = '<a ' + href + '><h4 class="display-modal-bms" data-bms="' + data.domain_id + '">' + title + '</h4></a>';
77                      jQuery('#bms-' + bms_type + ' .bms-list').append(newBms);
78                      self.drawModal(id_bms, data);
79                    }
80                  });
81                },
82
83                drawModal: function(id_bms, data) {
84                  var title = data.report_title;
85                  var content = "<div style='margin-top:20px;'>";
86
87
88                  for(var key in data.text_bloc_item) {
89                    var block = data.text_bloc_item[key];
90                    if(block.bloc_title && block.bloc_title != "") {
91                      content += '<h2 style="margin-bottom:10px;">' + block.bloc_title + '</h2>';
92                    }
93                    for(var key2 in block.text_items) {
94                      var text = block.text_items[key2];
95                      if(text.title) {
96                        content += '<h3>' + text.title + '</h3>';
97                      }
98                      if(text.text) {
99                        content += '<p>' + text.text + '</p>';
100                      }
101                    }
102                  }
103                  content += "</div>"
104                  var modal = '';
105                  modal +="<div id='weather-caption-modal-" + id_bms + "' class='modal modal-bms' style='display: none;'>"
106                  modal +=  "<div class='modal-overlay'></div>";
107                  modal +=    "<div class='modal-content'>";
108                  modal +=        "<div class='modal-header'>";
109                  modal +=          "<span class='close' ></span>";
110                  modal +=          "<h2>" + title + "</h2>";
111                  modal +=        "</div>";
112
113
114                  modal +=        "<div class='modal-body'>";
115
116                  modal += content;
117                  modal +=       "</div>";
118                  modal +=    "</div>";
119                  modal +="</div>";
120                  $('#bms').after(modal);
121                }
122
123              }
124          });
125      },
126  }
127})(jQuery, drupalSettings)