Overview
Comment:Personnalisation des couleurs: nettoyage et commentaires du code JS
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | dev
Files: files | file ages | folders
SHA1: ba76f8a90c55cb17964ab972300172df1c2e6bb0
User & Date: bohwaz on 2017-05-24 07:38:02
Other Links: branch diff | manifest | tags
Context
2017-05-25
01:03
Sauvegarde : bloquer les écritures dans la base de données avant création de la sauvegarde check-in: af13e835b6 user: bohwaz tags: dev
2017-05-24
07:38
Personnalisation des couleurs: nettoyage et commentaires du code JS check-in: ba76f8a90c user: bohwaz tags: dev
07:21
Ajout fonctionnalité : personnalisation des couleurs de l'interface check-in: 6da22f423b user: bohwaz tags: dev
Changes

Modified src/www/admin/static/scripts/color_helper.js from [301f28f6e3] to [6b9d401c67].

1
2





3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

19
20
21
22
23
24
25
(function () {
	if (!document.documentElement.style.setProperty) return;






	var logo_limit_x = 170;

	function colorToRGB(color)
	{
		// Conversion vers décimal RGB
		return color.replace(/^#/, '').match(/.{1,2}/g).map(function (el) {
			// On limite la luminosité comme ça, c'est pas parfait mais ça marche
			return Math.min(parseInt(el, 16), 210);
		});
	}

	function changeColor(element, color)
	{
		var new_color = colorToRGB(color).join(', ');


		document.documentElement.style.setProperty('--' + element, new_color);

		applyLogoColors();
	}

	function applyLogoColors()
	{

|
>
>
>
>
>
















>







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function () {
	if (!document.documentElement.style.setProperty 
		|| !window.CSS || !window.CSS.supports
		|| !window.CSS.supports('--var', 0))
	{
		return;
	}

	var logo_limit_x = 170;

	function colorToRGB(color)
	{
		// Conversion vers décimal RGB
		return color.replace(/^#/, '').match(/.{1,2}/g).map(function (el) {
			// On limite la luminosité comme ça, c'est pas parfait mais ça marche
			return Math.min(parseInt(el, 16), 210);
		});
	}

	function changeColor(element, color)
	{
		var new_color = colorToRGB(color).join(', ');

		// Mise à jour variable CSS
		document.documentElement.style.setProperty('--' + element, new_color);

		applyLogoColors();
	}

	function applyLogoColors()
	{
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

58
59
60
61
62
63
64
			ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);

			var imgData = ctx.getImageData(0, 0, img.width, img.height);
			var data = imgData.data;

			for (var i = 0, n = data.length; i < n; i += 4)
			{
				var x = (i / 4) % canvas.width;

				var grayscale = data[i] * .3 + data[i+1] * .59 + data[i+2] * .11;
				var factor = (grayscale / 255);

				data[i] = color[0]; // red
				data[i+1] = color[1]; // green
				data[i+2] = color[2]; // blue
				//data[i+3] = Math.max(0, data[i+3] - (x >= 170 ? 100 : 50));
			}

			ctx.putImageData(imgData, 0, 0);

			var i = canvas.toDataURL('image/png');


			document.querySelector('html').style.backgroundImage = 'url("' + i + '")';
			document.querySelector('.menu').style.backgroundImage = 'url("' + i + '")';

			document.getElementById('f_image_fond').value = i.substr(i.indexOf(',')+1);

			delete canvas2;
			delete canvas;







<
|
<
<
<



|






>







42
43
44
45
46
47
48

49



50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
			ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);

			var imgData = ctx.getImageData(0, 0, img.width, img.height);
			var data = imgData.data;

			for (var i = 0, n = data.length; i < n; i += 4)
			{

				// Re-colorier l'image avec la couleur choisie



				data[i] = color[0]; // red
				data[i+1] = color[1]; // green
				data[i+2] = color[2]; // blue
				// i+3 = alpha channel, mais on n'y touche pas
			}

			ctx.putImageData(imgData, 0, 0);

			var i = canvas.toDataURL('image/png');

			// Prévisualisation
			document.querySelector('html').style.backgroundImage = 'url("' + i + '")';
			document.querySelector('.menu').style.backgroundImage = 'url("' + i + '")';

			document.getElementById('f_image_fond').value = i.substr(i.indexOf(',')+1);

			delete canvas2;
			delete canvas;
75
76
77
78
79
80
81

82
83
84
85
86
87
88

			var input = document.getElementById('f_' + couleur);

			input.oninput = function () {
				changeColor(couleurs[this.name], this.value);
			};


			var reset_btn = document.createElement('input');
			reset_btn.className = 'resetButton';
			reset_btn.type = 'button';
			reset_btn.value = 'RàZ';

			reset_btn.onclick = function() {
				var input = this.previousSibling;







>







78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

			var input = document.getElementById('f_' + couleur);

			input.oninput = function () {
				changeColor(couleurs[this.name], this.value);
			};

			// Ajout bouton remise à zéro de la couleur
			var reset_btn = document.createElement('input');
			reset_btn.className = 'resetButton';
			reset_btn.type = 'button';
			reset_btn.value = 'RàZ';

			reset_btn.onclick = function() {
				var input = this.previousSibling;