[Dev] Support des Extensions phpBB ⇒ Breizh charts

[cabot]

yollo.png

C'est bon, j'ai viré la ligne ajoutée dans check.php et c'est reviendu à la normale.

[Sylver35]

Je dirait que tout est dédoublé.
Pour bien voir les choses comme il faut, va dans le hit parade et change de page dedans afin de faire bien prendre en compte la date de ta dernière visite.
Puis après cela, retourne sur la page d'index voir si le dédoublement a pris fin...

[cabot]

C'est bon

Capture d’écran 2025-01-26 à 17.08.02.png

[cabot]

Nouvelle erreur :

Error: 150
cette erreur est la même que celle définie par la valeur 101. Il s’agit simplement d’une erreur 101 masquée.

error.png

Tu noteras que j'ai aussi refait la modale.

Edit : ah oui nan mais c'est bon, j'ai vu l'erreur complète dans le sujet créé :

cette erreur est la même que celle définie par la valeur 101. Il s’agit simplement d’une erreur 101 masquée.
Erreur 101 : le propriétaire de la vidéo demandée n’autorise pas sa lecture dans des lecteurs intégrés.

Du coup je me demande s'il ne serait pas préférable de retourner le message explicite dans la modale (le propriétaire de la vidéo demandée n’autorise pas sa lecture dans des lecteurs intégrés) ?

[Sylver35]

En fait, je capte comme il se doit les erreurs retournées.
Pour être toujours bon, il faut bien retourner le bon code erreur, c'est pour cela que j'ai fait compléter le message de l'erreur 150 par le message de l'erreur 101.

Ainsi les codes erreurs sont bons et les utilisateurs sont informés avec la plus grande exactitude.

j'ai aussi refait la modale

Attention que le message ne soit pas en plein milieu de l'écran car en attribuant la note, j'ai fait exprès de placer le message dans le tiers supérieur afin de ne pas gêner.

[cabot]

Attention que le message ne soit pas en plein milieu de l'écran

Aucun souci, la modale a un margin de -30% de la hauteur du viewport.


Donc là je continue, je suis encore sur la validation et, toujours dans l'optique de séparer les langages, je voulais te suggérer d'utiliser uniquement des classes pour passer le style sur les messages. Au lieu de charger des images via JS.
Au lieu de :

code : Tout sélectionner

		$.ajax({
			type: 'POST',
			dataType: 'json',
			url: bcConfig.checkSong,
			data: 'id='+bcConfig.id+'&song='+encodeURIComponent($songName)+'&artist='+encodeURIComponent($artist),
			cache: false,
			success: function(result){
				if(result.sort === 1){
					$('#check-song').html(bcConfig.ajaxTrue+' <span style="color:green;">'+result.message+'</span>');
					$('#button').attr({'disabled': false, 'title': bcConfig.submit});
				}else{
					$('#check-song').html(bcConfig.ajaxFalse+' <span style="color:red;">'+result.message+'</span>');
					$('#button').attr({'disabled': true, 'title': bcConfig.error});
				}
				$('#check-song > span > strong').css('color','initial');
			},
			error: function(){
				$('#check').hide();
			}
		});

Remplacer par :

code : Tout sélectionner

		$.ajax({
			type: 'POST',
			dataType: 'json',
			url: bcConfig.checkSong,
			data: 'id='+bcConfig.id+'&song='+encodeURIComponent($songName)+'&artist='+encodeURIComponent($artist),
			cache: false,
			success: function(result){
				if(result.sort === 1){
					$('#check-song').removeClass('is-invalid').addClass('is-valid').html(result.message);
					$('#button').attr({'disabled': false, 'title': bcConfig.submit});
				}else{
					$('#check-song').removeClass('is-valid').addClass('is-invalid').html(result.message);
					$('#button').attr({'disabled': true, 'title': bcConfig.error});
				}
			},
			error: function(){
				$('#check').hide();
			}
		});

Et côté CSS :

code : Tout sélectionner

.vote-info,
.check-song {
	background: var(--validity-img, none) no-repeat 0 0 / 1em;
	padding-inline-start: 14px;
}

.rated,
.is-valid {
	--validity-img: url("./images/rated.svg");
}

.not-rated,
.is-invalid {
	--validity-img: url("./images/rated_no.svg");
}

.check-song strong { color: initial; }

.is-valid { color: green; }
.is-invalid { color: red; }

Comme j'avais déjà des svg pour le vote (peut voter, ne peut pas voter, toussa), j'ai regroupé le tout en un.
On pourrait aller plus loin dans la simplification et modifier php, (mais t'inquiète, je n'y ai pas touché ^^), pour déclarer des classes is-valid et is-invalid dans charts.php au lieu de rated et not-rated.
Pour une gestion simplifiée des états.

Et bien-entendu faire la même chose avec la gestion JS de tous les états, afin de supprimer toutes les déclarations de style dans le fichier breizhcharts.js et d'injecter uniquement des classes.

[Sylver35]

Oui, en mettant du svg, il y a bien optimisation et l'emploi de class toujours mieux, mais dans le bloc js proposé, ne pas enlever cette ligne :

code : Tout sélectionner

$('#check-song > span > strong').css('color','initial');

Elle permet de mettre en avant les noms de chanson et de groupe (noir (par defaut) gras) dans la phrase envoyée qui est en vert ou en rouge en fonction du résultat retourné.
Exemple :
La chanson The Emptiness Machine (Live) de Linkin Park est acceptée.

code : Tout sélectionner

<span style="color:green;">La chanson <strong style="color: initial;">The Emptiness Machine (Live)</strong> de <strong style="color: initial;">Linkin Park</strong> est acceptée.</span>

Ceci est un comportement voulu qui ne doit pas être altéré et qui fonctionnera toujours bien avec l'emploi des class is-invalid et is-valid

[cabot]

Je l'ai déjà géré via CSS

code : Tout sélectionner

.check-song strong { color: initial; }

check.png

[Sylver35]

Ha ben alors ça va, la class

Et, peut tu me refiler les deux images rated_no.svg et rated.svg ?
Que je puisse voir en direct le rendu.

[cabot]

rated.svg :

code : Tout sélectionner

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="green" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>

rated_no.svg :

code : Tout sélectionner

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#bc2a4d" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>

breizhcharts_add.html
Ajouter la classe check-info sur les div #check-song et #check-video :

code : Tout sélectionner

<dd id="check-song" class="check-info"></dd>
...
<dd id="check-video" class="check-info"></dd>

CSS :

code : Tout sélectionner

.vote-info,
.check-info {
	background: var(--validity-img, none) no-repeat 0 0 / 1.1em;
	padding-inline-start: 1.5em;
}

.rated,
.is-valid {
	--validity-img: url("./images/rated.svg");
}

.not-rated,
.is-invalid {
	--validity-img: url("./images/rated_no.svg");
}

.check-info strong,
.no-color {
	color: initial;
}

.is-valid { color: green; }
.is-invalid { color: #bc2a4d; }

JS :

code : Tout sélectionner

	breizhcharts.checkSongArtist = function(){
		var $songName = $('#song_name').val(), $artist = $('#artist').val();
		if($songName === '' || $artist === ''){
			return;
		}
		$('#check-song').html(bcConfig.loader).show();
		$.ajax({
			type: 'POST',
			dataType: 'json',
			url: bcConfig.checkSong,
			data: 'id='+bcConfig.id+'&song='+encodeURIComponent($songName)+'&artist='+encodeURIComponent($artist),
			cache: false,
			success: function(result){
				if(result.sort === 1){
					$('#check-song').removeClass('is-invalid').addClass('is-valid').html(result.message);
					$('#button').attr({'disabled': false, 'title': bcConfig.submit});
				}else{
					$('#check-song').removeClass('is-valid').addClass('is-invalid').html(result.message);
					$('#button').attr({'disabled': true, 'title': bcConfig.error});
				}
			},
			error: function(){
				$('#check').hide();
			}
		});
	}

	breizhcharts.checkVideo = function(){
		var $url = $('#video').val();
		if($url === ''){
			return;
		}
		if(breizhcharts.urlValide($url) == false){
			$('#check-video').addClass('is-invalid').html(bcConfig.errorUrl);
			return;
		}
		$.ajax({
			type: 'POST',
			dataType: 'json',
			url: bcConfig.checkUrl,
			data: 'url='+encodeURIComponent($url),
			cache: false,
			success: function(result){
				if(result.sort === 3){
					$('#check-video').removeClass('is-valid').addClass('is-invalid').html(bcConfig.presentError + langColon + ' <span class="no-color">'+result.name+'<br>'+result.time+'<br>'+bcConfig.videoAjax+'</span><br><a href="'+result.url+'"><img src="'+result.image+'" alt="" width="80" height="60"></a>');
					$('#button').attr({'disabled': true, 'title': bcConfig.error});
				}else if(result.sort === 1){
					$('#check-video').removeClass('is-invalid').addClass('is-valid').html(result.message+'<br><img src="'+result.content+'" width="80" height="60">');
				}else{
					$('#check-video').addClass('is-invalid').html(result.message);
					$('#button').attr({'disabled': true, 'title': bcConfig.error});
				}
			}
		});
	}

Et j'ai ajouté une constante dans overall_footer_after.html :

code : Tout sélectionner

const langColon = '{{ lang("COLON")|e("js") }}';

Edit trouze mille :
On va faire plus simple pour que tu puisses tester un peu le style temporaire :

all.zip

Il va de soit que rien n'est figé et que je suis en permanence en train de le modifier, c'est pour ça que j'ai pas encore faire de merge request.