Overview
Comment:Delete the custom image when the colors and the file are reset
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | dev
Files: files | file ages | folders
SHA1: 73f43f4d72aef87a654e46fd3ddcd97beda6a400
User & Date: bohwaz on 2020-11-16 21:04:04
Other Links: branch diff | manifest | tags
Context
2020-11-16
21:04
Restore previous background image check-in: 38158ce4d5 user: bohwaz tags: dev
21:04
Delete the custom image when the colors and the file are reset check-in: 73f43f4d72 user: bohwaz tags: dev
21:01
Use caching for account selector check-in: 15aa37bcb8 user: bohwaz tags: dev
Changes

Modified src/templates/admin/config/index.tpl from [28b9e1edb3] to [d03a1f4869].

112
113
114
115
116
117
118
119
120
121
122
123
124
            {input type="file" label="Image de fond" name="background" help="Il est conseillé d'utiliser une image en noir et blanc avec un fond blanc pour un meilleur rendu. Dimensions recommandées : 380x200"}
        </dl>
        <input type="hidden" name="image_fond" id="f_image_fond" data-source="{$background_image_source}" data-default="{$background_image_default}" value="{form_field name=image_fond}" />
    </fieldset>

    <p class="submit">
        {csrf_field key="config"}
        <input type="submit" name="save" value="Enregistrer &rarr;" />
    </p>

</form>

{include file="admin/_foot.tpl"}







|





112
113
114
115
116
117
118
119
120
121
122
123
124
            {input type="file" label="Image de fond" name="background" help="Il est conseillé d'utiliser une image en noir et blanc avec un fond blanc pour un meilleur rendu. Dimensions recommandées : 380x200"}
        </dl>
        <input type="hidden" name="image_fond" id="f_image_fond" data-source="{$background_image_source}" data-default="{$background_image_default}" value="{form_field name=image_fond}" />
    </fieldset>

    <p class="submit">
        {csrf_field key="config"}
        {button type="submit" name="save" label="Enregistrer" shape="right" class="main"}
    </p>

</form>

{include file="admin/_foot.tpl"}

Modified src/www/admin/static/scripts/color_helper.js from [589554cf09] to [4ac0c29350].

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

32
33
34
35
36
37
38
39
...
142
143
144
145
146
147
148
149

150
151
152
153
154
155
156
...
179
180
181
182
183
184
185
186
187







188
189
190
191
192
193
		|| !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);

		applyColors();

	}

	function applyColors()
	{

		var color = colorToRGB($('#f_couleur2').value);

		var img = new Image;
		img.crossOrigin = "Anonymous";

		img.onload = function() {
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
................................................................................
		for (var couleur in couleurs)
		{
			if (!couleurs.hasOwnProperty(couleur)) continue;

			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('button');
			reset_btn.className = 'resetButton icn-btn';
			reset_btn.type = 'button';
			reset_btn.innerHTML = 'RàZ';
................................................................................

		var reset_btn = document.createElement('button');
		reset_btn.className = 'resetButton icn-btn';
		reset_btn.type = 'button';
		reset_btn.innerHTML = 'RàZ';

		reset_btn.onclick = () => {
			$('#f_image_fond').value = '0';
			$('#f_image_fond').dataset.source = $('#f_image_fond').dataset.default;







			applyColors();
		};

		bg.parentNode.insertBefore(reset_btn, bg.nextSibling);
	});
})();







|




|


>
>
>
>
>
>
>



|





>




>
|







 







|
>







 







<

>
>
>
>
>
>
>






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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
...
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
...
189
190
191
192
193
194
195

196
197
198
199
200
201
202
203
204
205
206
207
208
209
		|| !window.CSS.supports('--var', 0))
	{
		return;
	}

	var logo_limit_x = 170;

	function colorToRGB(color, type)
	{
		// 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), type == 'gMainColor' ? 180 : 220);
		});
	}

	function RGBToHex(color) {
		// Conversion vers décimal RGB
		return '#' + color.split(/,/).map(function (el) {
			return ('0' + parseInt(el, 10).toString(16)).substr(-2);
		}).join('');
	}

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

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

		applyColors();
		return new_color;
	}

	function applyColors()
	{
		let input = $('#f_couleur2');
		var color = colorToRGB(input.value, 'gSecondColor');

		var img = new Image;
		img.crossOrigin = "Anonymous";

		img.onload = function() {
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
................................................................................
		for (var couleur in couleurs)
		{
			if (!couleurs.hasOwnProperty(couleur)) continue;

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

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

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

		var reset_btn = document.createElement('button');
		reset_btn.className = 'resetButton icn-btn';
		reset_btn.type = 'button';
		reset_btn.innerHTML = 'RàZ';

		reset_btn.onclick = () => {

			$('#f_image_fond').dataset.source = $('#f_image_fond').dataset.default;
			$('#f_image_fond').value = '0';

			var input = $('#f_couleur2');
			if (input.getAttribute('placeholder') == input.value) {
				return;
			}

			applyColors();
		};

		bg.parentNode.insertBefore(reset_btn, bg.nextSibling);
	});
})();