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

Le support pour tout ce qui concerne les styles de phpBB toutes versions.
Avatar de cabot
France cabot
Auteur du sujet
Messages : 12
Enregistré le : 13 décembre 2021
Liquide : 138.35
Pays :
France (fr)
France

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

Message par France cabot » 30 janv. 2022, 13:35
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. haaa*

P.s j'ai mis ça dans le forum des styles car tu n'as pas de forum dev de trucs bizarres. :mrgreen:
Avatar de Sylver35
France Sylver35
Administrateur du site
Messages : 619
Enregistré le : 13 janvier 2018
Liquide : 3 722.50
Relax-Arcade :  2
Localisation : Bretagne
Pays :
France (fr)
France

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

Message par France Sylver35 » 31 janv. 2022, 20:54
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 :shock:
C'est pourtant pas mal comme truc 8-) et le défi à relever intéressant :mrgreen:
Des chercheurs qui cherchent, on en trouve, mais des chercheurs qui trouvent, on en cherche !
Avatar de cabot
France cabot
Auteur du sujet
Messages : 12
Enregistré le : 13 décembre 2021
Liquide : 138.35
Pays :
France (fr)
France

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

Message par France cabot » 01 févr. 2022, 12:44
Je me doutais qu'un truc un peu tordu pourrait attirer ton attention. :mrgreen:

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
Avatar de cabot
France cabot
Auteur du sujet
Messages : 12
Enregistré le : 13 décembre 2021
Liquide : 138.35
Pays :
France (fr)
France

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

Message par France cabot » 06 févr. 2022, 19:29
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
Avatar de cabot
France cabot
Auteur du sujet
Messages : 12
Enregistré le : 13 décembre 2021
Liquide : 138.35
Pays :
France (fr)
France

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

Message par France cabot » 22 févr. 2022, 16:12
Suite...

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

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. whistle*
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.
Image

Comment faire pour que ne retourner que la portion de code sur la page ?
  • Sujets similaires
    Réponses
    Vues
    Dernier message