Support des styles ⇒ Récupérer les styles statiques calculés depuis un fichier CSS contenant des variables.

[cabot]

Salut Sylver,

Je suis en train de bosser sur la possibilité de modifier facilement les couleurs de prosilver avec des curseurs qui agissent sur les valeurs hsl.

Jusque là pas de problème, il ne s'agit que d'utiliser des variables CSS couplées à la fonction calc() dans colours.css.

Démo en ligne (en cours de dev).

Mais l'idée serait de pouvoir compiler le résultat obtenu en un fichier CSS comportant les valeurs statiques calculées, et de le rendre téléchargeable pour que l'utilisateur puisse le coller dans son style. Un peu comme l'ancien site colorizeit de Arty mais utilisable directement sur un forum. La limite étant la couleur des images mais là je m'en cogne pour le moment.

Donc faire comme le navigateur qui, à partir de ça :

code : Tout sélectionner

.headerbar, .forumbg {
	background-color: hsl(var(--primary-h), calc(var(--primary-s) - 14%), var(--primary-l));
	background-image: linear-gradient(
		to bottom,
		hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 21%)) 0%,
		hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 15%)) 2px,
		hsl(var(--primary-h), calc(var(--primary-s) - 14%), var(--primary-l)) 92px,
		hsl(var(--primary-h), calc(var(--primary-s) - 14%), var(--primary-l)) 100%);
}

Calcule ça :

code : Tout sélectionner

.headerbar, .forumbg {
	background-color: rgb(18, 164, 237);
	background-image: linear-gradient(rgb(107, 206, 255) 0%, rgb(0, 119, 179) 2px, rgb(18, 164, 237) 92px, rgb(18, 164, 237) 100%)
}

J'ai bien trouvé ce plugin postCSS mais il ne gère pas la fonction calc().

Aussi, j'aurais voulu savoir si tu avais une idée de ce qu'il est possible de faire et, le cas échéant, pousser le vice à transformer tout ça en extension.

P.s j'ai mis ça dans le forum des styles car tu n'as pas de forum dev de trucs bizarres.

[Sylver35]

Salut,

J'ai pris un certain temps pour te répondre pour réfléchir sur le problème, mais rien ne me saute encore à l'esprit
C'est pourtant pas mal comme truc et le défi à relever intéressant

[cabot]

Je me doutais qu'un truc un peu tordu pourrait attirer ton attention.

Pour les images, comme j'utilise les .svg du GDK 3.2, je vais voir ce qu'il est possible de faire avec ce plugin PostCSS

[cabot]

Petit retour d'info, 3Di s'est proposé de m'aider après que j'ai publié un lien vers ma démo sur .com.
C'est dans les tuyaux et je suis en contact avec lui. Wait and see

[cabot]

Suite...

Alors il me dit que c'est compliqué mais qu'il a une idée.

Il me demande d'envoyer les valeurs stockées, jusque là c'est pas vraiment un problème avec Ajax.

code : Tout sélectionner

<input id="submit" type="submit" value="submit">
<div id="output"></div>

<script>
	var storedData = JSON.stringify(localStorage);
	console.log("storedData = " + storedData);

	$(function(){		
		$("#submit").click(function() {
			$.ajax({
				url:"fichier.php",
				method: "post",
				data: { data: storedData },
				success: function(data){
					$('#output').html(data);
				}
			});
		});		
	});
</script>

Pour tester côté PHP, au plus simple et c'est déjà assez pénible pour moi :

code : Tout sélectionner

<?php
$dataObject = $_POST['data'];
$json = json_decode($dataObject,true);

print "<pre>";
if (is_array($json) || is_object($json)) {
	foreach ($json as $key => $value) {
		print "<code>" . $key . ": " . $value . ";</code>";
	}
}
print "</pre>";
?>

En gros, même si c'est pas propre, le php retourne bien les couples clé/valeur.

Là où ça merde, outre l'histoire des superglobals, c'est quand j'ai voulu intégrer ça à phpBB pour tester en live.
colorize.php :

code : Tout sélectionner

<?php
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();

$vars = array('page_title');
extract($phpbb_dispatcher->trigger_event('core.index_modify_page_title', compact($vars)));

// Output page
page_header($page_title, true);

// temporarily enable superglobals
$request->enable_super_globals();

$dataObject = $_POST['data'];
$json = json_decode($dataObject,true);

if (is_array($json) || is_object($json)) {
	foreach ($json as $key => $value)
	{
		print "<pre>" . $key . ": " . $value . ";</pre>";
	}
}
 
// disable superglobals again
$request->disable_super_globals();


$template->set_filenames(array(
	'body' => 'colorize_body.html')
);

page_footer();
?>

colorize_body.html

code : Tout sélectionner

<!-- INCLUDE overall_header.html -->

<div class="panel">
	<div class="inner">
	<div class="content">
		<h2 class="title">Colorize</h2>
		<input id="submit" type="submit" value="submit">
		<code id="output"></code>
	</div>
	</div>
</div>

<!-- INCLUDE overall_footer.html -->

Bon, ça fonctionne. Mais tu te doutes bien que ça me retourne un truc tout foireux, la page dans la page.


Comment faire pour que ne retourner que la portion de code sur la page ?