Skip to content

Commit 969cc43

Browse files
ccaillyccailly
committed
chore: extract js to a module
1 parent ab48321 commit 969cc43

File tree

4 files changed

+113
-115
lines changed

4 files changed

+113
-115
lines changed

‎public/js/modules/TagDropdownColorizer.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* -------------------------------------------------------------------------
3+
* Tag plugin for GLPI
4+
* -------------------------------------------------------------------------
5+
*
6+
* LICENSE
7+
*
8+
* This file is part of Tag.
9+
*
10+
* Tag is free software; you can redistribute it and/or modify
11+
* it under the terms of the GNU General Public License as published by
12+
* the Free Software Foundation; either version 2 of the License, or
13+
* (at your option) any later version.
14+
*
15+
* Tag is distributed in the hope that it will be useful,
16+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
17+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
18+
* GNU General Public License for more details.
19+
*
20+
* You should have received a copy of the GNU General Public License
21+
* along with Tag. If not, see <http://www.gnu.org/licenses/>.
22+
* -------------------------------------------------------------------------
23+
* @copyright Copyright (C) 2014-2023 by Teclib'.
24+
* @license GPLv2 https://www.gnu.org/licenses/gpl-2.0.html
25+
* @link https://github.com/pluginsGLPI/tag
26+
* -------------------------------------------------------------------------
27+
*/
28+
29+
export class GlpiPluginTagTagDropdownColorizer {
30+
constructor(tagsColor, selector, $container) {
31+
this.tagsColor = tagsColor;
32+
this.selector = selector;
33+
this.$container = $container;
34+
35+
this.init();
36+
}
37+
38+
isDark(hexColor) {
39+
if (!hexColor) return false;
40+
hexColor = hexColor.replace('#', '');
41+
const r = parseInt(hexColor.substr(0, 2), 16);
42+
const g = parseInt(hexColor.substr(2, 2), 16);
43+
const b = parseInt(hexColor.substr(4, 2), 16);
44+
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
45+
return luminance < 0.5;
46+
}
47+
48+
applyTagColors($select) {
49+
const selectedIds = $select.find('option:selected').map(function() {
50+
return $(this).val();
51+
}).get();
52+
53+
const $container = $select.nextAll('.select2').find('.select2-selection__rendered');
54+
$container.find('.select2-selection__choice').each((index, element) => {
55+
const id = selectedIds[index];
56+
const color = this.tagsColor[id];
57+
if (color) {
58+
$(element).css('background-color', color);
59+
$(element).css('color', this.isDark(color) ? '#eeeeee' : '');
60+
61+
// Also style the remove button for better visibility
62+
$(element).find('.select2-selection__choice__remove').css('color', this.isDark(color) ? '#eeeeee' : '');
63+
}
64+
});
65+
}
66+
67+
init() {
68+
const $select = this.$container.find(this.selector);
69+
70+
$select.each((index, element) => {
71+
this.applyTagColors($(element));
72+
});
73+
74+
$select.on('change select2:select select2:unselect', (event) => {
75+
this.applyTagColors($(event.target));
76+
});
77+
78+
$select.on('select2:open', () => {
79+
setTimeout(() => {
80+
$('.select2-results__option').each((index, element) => {
81+
const matches = element.id.match(/result-[^-]+-(\d+)$/);
82+
if (matches && matches[1]) {
83+
const color = this.tagsColor[matches[1]];
84+
// Cible uniquement le span SANS la classe select2-rendered__match
85+
$(element).find('span:not(.select2-rendered__match)').css({
86+
'background-color': color ? color : '',
87+
'padding': color ? '2px' : '',
88+
'color': (color && this.isDark(color)) ? '#fff' : '',
89+
'border-radius': '2px'
90+
});
91+
}
92+
});
93+
}, 0);
94+
});
95+
}
96+
}

‎setup.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
* @link https://github.com/pluginsGLPI/tag
2828
* -------------------------------------------------------------------------
2929
*/
30+
31+
use Glpi\Application\ImportMapGenerator;
3032
use Glpi\Form\Form;
3133
use Glpi\Form\Migration\TypesConversionMapper;
3234
use Glpi\Form\QuestionType\QuestionTypesManager;
@@ -152,6 +154,8 @@ function plugin_init_tag()
152154
$PLUGIN_HOOKS[Hooks::ADD_JAVASCRIPT]['tag'][] = 'js/entity.js';
153155
}
154156

157+
ImportMapGenerator::getInstance()->registerModulesPath('tag', '/public/js/modules');
158+
155159
Plugin::registerClass('PluginTagProfile', ['addtabon' => ['Profile']]);
156160
Plugin::registerClass('PluginTagConfig', ['addtabon' => 'Config']);
157161

‎templates/dropdown.html.twig‎

Lines changed: 7 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -93,64 +93,13 @@
9393
) }}
9494

9595
<script>
96-
$(document).ready(function() {
97-
const tagsColor = {{ tags_color|json_encode|raw }};
98-
99-
function isDark(hexColor) {
100-
if (!hexColor) return false;
101-
hexColor = hexColor.replace('#', '');
102-
const r = parseInt(hexColor.substr(0,2),16);
103-
const g = parseInt(hexColor.substr(2,2),16);
104-
const b = parseInt(hexColor.substr(4,2),16);
105-
const luminance = (0.299*r + 0.587*g + 0.114*b)/255;
106-
return luminance < 0.5;
107-
}
108-
109-
function applyTagColors($select) {
110-
const selectedIds = $select.find('option:selected').map(function() {
111-
return $(this).val();
112-
}).get();
113-
114-
const $container = $select.nextAll('.select2').find('.select2-selection__rendered');
115-
$container.find('.select2-selection__choice').each(function(index) {
116-
const id = selectedIds[index];
117-
const color = tagsColor[id];
118-
if (color) {
119-
$(this).css('background-color', color);
120-
$(this).css('color', isDark(color) ? '#eeeeee' : '');
121-
122-
// Also style the remove button for better visibility
123-
$(this).find('.select2-selection__choice__remove').css('color', isDark(color) ? '#eeeeee' : '');
124-
}
125-
});
126-
}
127-
128-
const $select = $('select[data-glpi-plugin-tag-dropdown-uuid="{{ rand }}"]');
129-
130-
$select.each(function() {
131-
applyTagColors($(this));
132-
});
133-
134-
$select.on('change select2:select select2:unselect', function() {
135-
applyTagColors($(this));
136-
});
137-
138-
$select.on('select2:open', function() {
139-
setTimeout(() => {
140-
$('.select2-results__option').each(function() {
141-
const matches = this.id.match(/result-[^-]+-(\d+)$/);
142-
if (matches && matches[1]) {
143-
const color = tagsColor[matches[1]];
144-
// Cible uniquement le span SANS la classe select2-rendered__match
145-
$(this).find('span:not(.select2-rendered__match)').css({
146-
'background-color': color ? color : '',
147-
'padding': color ? '2px' : '',
148-
'color': (color && isDark(color)) ? '#fff' : '',
149-
'border-radius': '2px'
150-
});
151-
}
152-
});
153-
}, 0);
96+
import(GLPI_PLUGINS_PATH.tag + "/js/modules/TagDropdownColorizer.js").then((m) => {
97+
$(document).ready(function() {
98+
new m.GlpiPluginTagTagDropdownColorizer(
99+
{{ tags_color|json_encode|raw }},
100+
'select[data-glpi-plugin-tag-dropdown-uuid="{{ rand }}"]',
101+
$(document)
102+
);
154103
});
155104
});
156105
</script>

‎templates/question_dropdown.html.twig‎

Lines changed: 6 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -45,63 +45,12 @@
4545
<script>
4646
$(document).on('glpi-form-editor-question-type-changed', (event, question, type) => {
4747
if (type === 'PluginTagQuestionType') {
48-
const tagsColor = {{ tags_color|json_encode|raw }};
49-
50-
function isDark(hexColor) {
51-
if (!hexColor) return false;
52-
hexColor = hexColor.replace('#', '');
53-
const r = parseInt(hexColor.substr(0,2),16);
54-
const g = parseInt(hexColor.substr(2,2),16);
55-
const b = parseInt(hexColor.substr(4,2),16);
56-
const luminance = (0.299*r + 0.587*g + 0.114*b)/255;
57-
return luminance < 0.5;
58-
}
59-
60-
function applyTagColors($select) {
61-
const selectedIds = $select.find('option:selected').map(function() {
62-
return $(this).val();
63-
}).get();
64-
65-
const $container = $select.nextAll('.select2').find('.select2-selection__rendered');
66-
$container.find('.select2-selection__choice').each(function(index) {
67-
const id = selectedIds[index];
68-
const color = tagsColor[id];
69-
if (color) {
70-
$(this).css('background-color', color);
71-
$(this).css('color', isDark(color) ? '#eeeeee' : '');
72-
73-
// Also style the remove button for better visibility
74-
$(this).find('.select2-selection__choice__remove').css('color', isDark(color) ? '#eeeeee' : '');
75-
}
76-
});
77-
}
78-
79-
const $select = question.find('select[data-glpi-plugin-tag-dropdown-uuid="{{ rand }}"]');
80-
81-
$select.each(function() {
82-
applyTagColors($(this));
83-
});
84-
85-
$select.on('change select2:select select2:unselect', function() {
86-
applyTagColors($(this));
87-
});
88-
89-
$select.on('select2:open', function() {
90-
setTimeout(() => {
91-
$('.select2-results__option').each(function() {
92-
const matches = this.id.match(/result-[^-]+-(\d+)$/);
93-
if (matches && matches[1]) {
94-
const color = tagsColor[matches[1]];
95-
// Cible uniquement le span SANS la classe select2-rendered__match
96-
$(this).find('span:not(.select2-rendered__match)').css({
97-
'background-color': color ? color : '',
98-
'padding': color ? '2px' : '',
99-
'color': (color && isDark(color)) ? '#fff' : '',
100-
'border-radius': '2px'
101-
});
102-
}
103-
});
104-
}, 0);
48+
import(GLPI_PLUGINS_PATH.tag + "/js/modules/TagDropdownColorizer.js").then((m) => {
49+
new m.GlpiPluginTagTagDropdownColorizer(
50+
{{ tags_color|json_encode|raw }},
51+
'select[data-glpi-plugin-tag-dropdown-uuid="{{ rand }}"]',
52+
question
53+
);
10554
});
10655
}
10756
});

0 commit comments

Comments
 (0)