https://www.canal-sport.fr/backoffice/settings/settingsCusto.js

1class Custo {
2  constructor(params) {
3    this.parentDiv = params.parentDiv;
4    this.data = params.data;
5  }
6
7  getData() {
8    return this.data;
9  }
10}
11
12let mvCusto;
13
14if (['fr-FR', 'fr'].includes(navigator.language)) {
15  // Color picker
16  var lng_custo_bg_color = 'Couleur du fond';
17  var lng_custo_text_color = 'Couleur du texte';
18  var lng_custo_primary_color = 'Couleur primaire';
19  var lng_custo_secondary_color = 'Couleur secondaire';
20  var lng_custo_primary_color_hover = 'Couleur primaire au survol';
21  var lng_custo_secondary_color_hover = 'Couleur secondaire au survol';
22  // Checkbox
23  var lng_custo_reverse = 'Utiliser la couleur primaire pour la barre de navigation';
24  // Vendor Url
25  var lng_custo_vendor_url = 'Url du site web';
26  var lng_help_custo_vendor_url = 'Utilisé pour rendre le logo clicable depuis le lecteur vidéo';
27  // Watermark
28  var lng_custo_watermark = 'Logo en surimpression';
29  var lng_custo_watermark_users = 'Imposer pour';
30} else {
31  // Color picker
32  var lng_custo_bg_color = 'Background color';
33  var lng_custo_text_color = 'Text color';
34  var lng_custo_primary_color = 'Primary color';
35  var lng_custo_secondary_color = 'Secondary color';
36  var lng_custo_primary_color_hover = 'Primary color on hover';
37  var lng_custo_secondary_color_hover = 'Secondary color on hover';
38  // Checkbox
39  var lng_custo_reverse = 'Use the primary color for the navigation bar';
40  // Vendor Url
41  var lng_custo_vendor_url = 'Website url';
42  var lng_help_custo_vendor_url = 'Used to make the logo clicable from the video player';
43  // Watermark
44  var lng_custo_watermark = 'Watermark logo';
45  var lng_custo_watermark_users = 'Imposed for';
46}
47
48function buildCustomisationPanel(tab) {
49  let parentDiv = tab.parentDiv;
50  mvCusto = new Custo(tab);
51  custoTab.getData = mvCusto.getData.bind(mvCusto); // To access the data out of the class
52
53  $(parentDiv).empty();
54  let custoDiv = $("<div class='custo' />'").appendTo(parentDiv);
55
56  ['logo', 'bg'].forEach((name) => {
57    buildUploadImgCusto(custoDiv, name, mvCusto); // common.js
58  });
59
60  ['bg_color', 'text_color', 'primary_color', 'primary_color_hover', 'secondary_color', 'secondary_color_hover'].forEach((name) => {
61    buildColorInputCusto(custoDiv, name);
62  });
63
64  buildCheckboxCusto(custoDiv, 'reverse');
65
66  buildVendorUrlInputCusto(custoDiv, 'vendor_url');
67
68  // If the key 'watermark_path' exists in the data, it means that the watermark feature is enabled and we can display the related inputs
69  if (mvCusto.data.hasOwnProperty('watermark_path')) {
70    buildUploadImgCusto(custoDiv, 'watermark', mvCusto); // common.js
71    buildMultipleSelectCusto(custoDiv, 'watermark_users', mvCusto); // common.js
72  }
73}
74
75function buildColorInputCusto(parentDiv, name) {
76  // Header
77  let colorPickerDiv = buildInputHeader(parentDiv, name);
78
79  // Color picker
80  $("<input type='text' class='color-input' />")
81    .val(mvCusto.data[name])
82    .on('change', function () {
83      mvCusto.data[name] = $(this).val();
84      $('.custo-container #' + name).css('background-color', $(this).val());
85    })
86    .appendTo(colorPickerDiv);
87
88  // Color previsualisation
89  $("<div id='" + name + "' class='color-preview' />")
90    .css('background-color', mvCusto.data[name])
91    .appendTo(colorPickerDiv);
92}
93
94function buildCheckboxCusto(parentDiv, name) {
95  // Header
96  let checkboxDiv = buildInputHeader(parentDiv, name);
97
98  // Checkbox
99  $(`<input type='checkbox' class='checkbox-input' ${mvCusto.data[name] === '1' && 'checked'} />`)
100    .on('change', function () {
101      mvCusto.data[name] = $(this).is(':checked') ? 1 : 0;
102    })
103    .appendTo(checkboxDiv);
104}
105
106function buildVendorUrlInputCusto(parentDiv, name) {
107  // Header
108  let urlInputDiv = buildInputHeader(parentDiv, name);
109
110  // url
111  $("<input type='url' class='url-input' />")
112    .val(mvCusto.data[name])
113    .on('change', function () {
114      mvCusto.data[name] = $(this).val();
115    })
116    .appendTo(urlInputDiv);
117}
118
119function buildMultipleSelectCusto(parentDiv, name) {
120  // Header
121  let selectDiv = buildInputHeader(parentDiv, name);
122
123  // Multiple select
124  let selectize = $(`<select multiple class='custo-selectize' id='select-${name}' />`)
125    .change(function () {
126      mvCusto.data['imposed_sharing_with']['selected'][name] = $(this).val().join(',');
127    })
128    .appendTo(selectDiv);
129
130  const imposedSharingData = mvCusto.data['imposed_sharing_with'];
131  buildOptionsForSelect(selectize, imposedSharingData['options']['users'], 'id', 'login', imposedSharingData['selected'][name].split(',')); // common.js
132  buildSelectize(selectize, { placeholder: lngNone, plugins: ['remove_button'] }); // common.js
133}