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: |
ba76f8a90c55cb17964ab972300172df |
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 | (function () { | | > > > > > > | 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 | 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) { | < | < < < | > | 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; |
︙ | ︙ |