[Ludique] Défis code en un tweet

**Barsy** · 26/07/2013, 16h46

Pour les chiffres romains, j'ai attendu et résultat, je me suis pris une grosse claque.

**Auteur** · 26/07/2013, 19h12

Envoyé par Barsy

Pour les chiffres romains, j'ai attendu et résultat, je me suis pris une grosse claque.

c'est clair, tu avais une solution à 9 caractères et moi 8.

**SylvainPV** · 28/07/2013, 16h22

Bon on va tâcher de trouver quelque-chose qui dure plus longtemps cette fois...

Numéro 9: inverser toutes les couleurs de la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function negatifPage(){
//votre code ici
}();

Cette fonction une fois exécutée doit parcourir l'intégralité des éléments DOM de la page en cours. Si un élément dispose d'une propriété CSS color ou background-color, la valeur de la couleur doit être inversée, c'est à dire :
new_red = 255 - old_red
new_green = 255 - old_green
new_blue = 255 - old_blue

BONUS pour les experts : si vous parvenez en plus à appliquer filter: invert(1); sur les images. Interdiction d'utiliser cette propriété pour les autres éléments que les images

**Auteur** · 28/07/2013, 17h57

Deux questions :
- as-tu une page de test ?
- les propriétés color et background-color sont définies dans une feuille de style ou dans la balise (attribut style) ?

**SylvainPV** · 28/07/2013, 19h55

Je n'ai pas pensé à faire une page de test, j'ai pensé que le résultat parlait de lui-même. Je vais poster un screen pour la page d'accueil de developpez.com

Pour info, j'y suis parvenu pour réaliser ce screen avec 400 caractères sur un code pas du tout optimisé. Donc je suis confiant sur le fait que ce soit faisable. Par contre je pense qu'exceptionnellement pour ce problème, je vais accepter les propositions qui ne fonctionnent que sur un seul navigateur.

Pour ta deuxième question, les styles peuvent venir de sources différentes ce qui rend la tâche compliquée, sauf si l'on utilise getComputedStyle qui regroupe toutes les règles CSS tout en uniformisant les formats de couleur (directement au format rgb/rgba)

**danielhagnoul** · 29/07/2013, 00h08

Bonne nuit

Même en jQuery c'est long, je fais pourtant appel au plugin officiel pour la gestion des couleurs.

Ceux qui arriveront à faire la même chose en Vanilla JS en moins de 140 caractères seront des champions !

Ci-dessous, la totalité du code de ma page de test, il suffit de copier-coller pour tester.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			//"http://code.jquery.com/jquery-1.10.2.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
					$( "#draggable" ).draggable({
						"revert" : "invalid"
					});		 			 
 
					$( "#droppable" ).droppable({
						accept: ".mondrag",
						drop : function( event, ui ){
							$( this ).addClass( "ui-state-highlight" );
						}
					});
 
					$( "#droppable2" ).droppable({
						accept: ".mondrag",
						drop : function( event, ui ){
							$( this ).addClass( "ui-state-highlight" );
						}
					});
 
				});
 
				$( window ).load( function(){
 
					$( "*", "body" ).each( function( i, item ){
						if ( item.nodeName === "IMG" ){
							$( item ).css( "-webkit-filter", "invert(100%)" ); // invert est disponible uniquement sur Chrome
						} else {
							var jObj = $( item ),
								c = jObj.css( "color" ),
								b = jObj.css( "backgroundColor" ),
								r = jQuery.Color( c );
 
							jObj.css( "color", jQuery.Color( 255 - r.red(), 255 - r.green(), 255 - r.blue(), 255 - r.alpha() ).rgba() );
 
							r = jQuery.Color( b );
 
							jObj.css( "backgroundColor", jQuery.Color( 255 - r.red(), 255 - r.green(), 255 - r.blue(), 255 - r.alpha() ).rgba() );
						}
					});
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		#draggable { width: 10rem; height: 4rem; padding: 0.5rem; float: left; margin: 1rem 1rem 1rem 0; }
		#droppable, #droppable2 { width: 23rem; height: 12rem; padding: 0.5eem; float: left; margin: 1rem; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="draggable" class="ui-widget-content mondrag">
		    <p>Drag me to my target</p>
		</div>
 
		<div id="droppable" class="ui-widget-header"></div>
 
		<div id="droppable2" class="ui-widget-header"></div>
 
		<img src="http://danielhagnoul.developpez.com/images/imageTest.png">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-28T23:58:38.687+02:00" pubdate>2013-07-28T23:58:38.687+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**SylvainPV** · 29/07/2013, 00h42

Ha mais ici il n'est nul question de plug-in aux petits oignons, mais de code maison crado

Voilà une première version faite en 20 minutes et vu l'heure, je pense qu'on peut largement l'améliorer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for(a=document.querySelectorAll('*'),i=0;s=getComputedStyle(e=a[i++]);["backgroundColor","color"].map(function(p,j){if(j||s[p]!="rgba(0, 0, 0, 0)")e.style[p]=s[p].replace(/\d+/g,function(n){return 255-n})}));

208 caractères

J'ai été embêté avec les éléments sans background dont le computedStyle est interprété à "rgba(0, 0, 0, 0)" et non "transparent", donc passe dans ma regExp et met un background là où il n'y en a pas... Sauf si l'on considère qu'on inverse l'opacité également, mais le résultat n'est pas satisfaisant visuellement

**Auteur** · 29/07/2013, 08h59

je croyais que getComputedStyle ne fonctionnait pas avec IE

**SylvainPV** · 29/07/2013, 09h33

Il est implémenté depuis IE9 d'après http://caniuse.com/#feat=getcomputedstyle

Et si tu regardes les règles exposées dans le premier post de ce topic, je vous ai fait grâce d'IE

**Auteur** · 29/07/2013, 10h29

bon je dépasse largement les 400 caractères :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function negatifPage(){
 
var e = document.getElementsByTagName("*");
for (i=0;i<e.length; i++)
{
	a=window.getComputedStyle(e[i]);
	c=a.getPropertyValue("background-color").match(/\d+/g);
	if (c)
		e[i].style.backgroundColor = 
		'rgb('+(255-parseInt(c[0],10))+','+(255-parseInt(c[1],10))+','+(255-parseInt(c[2],10))+')';
 
	d=a.getPropertyValue("color").match(/\d+/g);
	if (d)
		e[i].style.color = 
		'rgb('+(255-parseInt(d[0],10))+','+(255-parseInt(d[1],10))+','+(255-parseInt(d[2],10))+')';
}
};

[edit]
un peu plus court :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function negatifPage(){
	function t(u){return 255-parseInt(u,10)};
	e=document.getElementsByTagName("*");
	for (i=0;i<e.length; i++)
	{
		a=window.getComputedStyle(e[i]);
		if (c=a.getPropertyValue("background-color").match(/\d+/g)) e[i].style.backgroundColor='rgb('+t(c[0])+','+t(c[1])+','+t(c[2])+')';
		if (d=a.getPropertyValue("color").match(/\d+/g)) e[i].style.color='rgb('+t(d[0])+','+t(d[1])+','+t(d[2])+')';
	}
};

[/edit]

**Kaamo** · 29/07/2013, 10h50

Un test sinon : si on exécute deux fois de suite la fonction, sur la home de DVP par exemple, ne devrait-on pas revenir à l'état initial ?
J'ai l'impression, en utilisant ton code Sylvain, que l'on ne retombe pas sur nos pattes.

Sympa l'idée en tout cas

**SylvainPV** · 29/07/2013, 13h58

Je n'y ai pas pensé Kaamo, mais en exécutant deux fois mon code sur la page d'accueil de developpez.com, je reviens bien à l'état initial. Enfin, à vue d'oeil... à part quelques problèmes sur certaines couleurs de police

**Kaamo** · 29/07/2013, 14h48

En effet, les petits textes annexés aux titres en gras n'ont pas l'air de suivre

**Auteur** · 29/07/2013, 15h33

avec mon code le résultat est légèrement différent. Le menu par exemple devient marron.

Et pareil, le texte en gras saute lorsque je reviens en arrière

**SylvainPV** · 29/07/2013, 17h13

Il faut sans doute faire une vérification supplémentaire pour les color:inherit, tout comme pour les background non précisés. Tout ça est fastidieux, on n'arrivera pas à faire tenir en moins de 140 caractères avec tous ces cas particuliers.

J'ai voulu travailler avec le DOM pour changer des autres problèmes, mais cela complique un peu trop les choses on dirait... Peut-être que je pourrais simplifier l'énoncé avec une page de test à respecter, je vais y réfléchir...

**Kaamo** · 29/07/2013, 20h21

On peut utiliser document.all ?

Pour reprendre le code de Sylvain (179 char) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function invertColor(){
for(i=0;e=document.all[i++];)['backgroundColor','color'].map(function(p){(d=getComputedStyle(e)[p])!='rgba(0, 0, 0, 0)'&&(e.style[p]=d.replace(/\d+/g,function(n){return 255-n}))})
})()

J'ai tenté une piste du coté de document.styleSheets, qu'il faut encore améliorer car tous les cas ne sont pas couverts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function negatifPage(){
for(i=0;e=document.styleSheets[i++];)for(j=0;r=e.rules[j++];)['backgroundColor','color'].map(function(p){r.style[p]=r.style[p].replace(/\d+/g,function(n){return 255-n})})
}())

**SylvainPV** · 29/07/2013, 21h06

Ha, document.styleSheets.rules, je n'y avais pas pensé ! Malheureusement ça ne couvre pas les inline et ça ne convertit pas les codes couleurs dans le format voulu. Bien vu pour document.all, ça fait une belle économie de caractères même si ça n'a jamais été un standard :p

Voilà un premier essai de page de test : http://jsfiddle.net/XvFpV/
Et le résultat à obtenir, avant/après :

**Auteur** · 29/07/2013, 21h36

j'ai le résultat

bon mon code est long mais il fonctionne.

**SylvainPV** · 30/07/2013, 02h25

Bon si on oublie l'opacité et le multi-support, ça peut se réduire à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for(i=0;s=getComputedStyle(e=document.all[i++]);)for(p in s)if(/(^c|dC)olor$/.test(p))e.style[p]=s[p].replace(/\d+/g,function(n){return 255-n})

143 caractères. Crade mais ça passe ma page de test (okay je suis pas très impartial dans l'histoire

)

**NoSmoking** · 30/07/2013, 17h23

Salut les fous furieux

document.all est compatible FireFox ?

Là il est vrai que tu as mis la barre haute mais avec les octets d'avance que vous avez mis de coté cela devrait le faire

Pas regardé de près mais cela semble impossible ne serait ce pas la longueur du nom des méthodes à utiliser.

[Ludique] Défis code en un tweet

JavaScript

Discussions similaires

Partager

Partager