[SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design
/*
ATTENTION - le design du site ne peut pas être passé en doctype html (html 5) dans la révision 1 du design.
bien qu'une révision 2 sera instanciée plus tard (l'année prochaine), il faudra se contenter de nombreux workaround en restant en HTML TRANSITIONAL 4.01
Du fait du nombre massif des éléments DE CETTE PAGE (et de ce qui en découlerait) qui seront à revoir pour transformer le design en design responsive..
.. il est alors plus judicieux de globaliser un TAG unique pour cette tâche pour ne pas alourdir de commentaires le code déjà suffisemment alourdi comme cela!
En gros, ici, pour cette méga-tâche, je vais utiliser un format maison de commentaires pour cette tâche précise:
--> pour en comprendre les méandres, voir le fichier /[!] - Saphyra-Interactive-TaskList-Explanations/[SI-LINDER-PARTNER-2][OSC]--semantic.php
*/
// <- [SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design
?>[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{
- 1/ il s'agit de l'entièrereté (excepté la valeur textuelle des CONSTANTES PHP, mais on en n'aura pas besoin), du système de DATE D'EVENEMENT créé en 2011/2012 pour Linder-Partner/LP-Divertissement, par Saphyra-Interactive, oui, oui, moi déjà à l'époque
ce système est très simpliste,
il se sert de jQuery (comme Framework Javascript)
et du plugin jQueryUI et de son composant DatePicker
pour afficher sur un bouton généré par jQueryUI un système de calendrier
pour choisir une date qui sera inscrite (via un évènement intercepté (bindé) javascript)
dans le seul champ de texte dans le formulaire de la page,
mais identifié par un ID précis: ChampDeCommentaire
le système fonctionne encore en 2020 très bien,
mais malheureusement, il utilise encore l'ancien design,
ici donc, on va "l'altérer" afin de lui insuffler le nouveau design
à noter que cette étape ne sera pas suffisante,
plus tard,
il faudra aussi modifier via une expression régulière (regex) son apparence à son affichage dans la page: /checkout_shipping.php
(voir CODETAG [ALTERATION_OF_OLD_DESIGN_BUTTON_DATE_OF_EVENT])
on va aussi en profiter pour réparer les accents cassés dans les commentaires ici
ATTENTION - il n'est PLUS GARANTI en 2020 que la partie de code "FIX uniquement pour les langages contenant des accents" soit encore fonctionne au niveau des caractères spéciaux: ÃÂ
NOTE - mais on s'en tape un peu dans le sens, où le site ne se sert plus de la variable $language et utilise plutôt directement une transition en "FR" car la traduction est instancée par Google Traduction
FIXME - toutefois, cette partie si déconnante (on ne sait pas si c'est le cas), n'est pas à laisser telle quelle, il faudra la fixer si ça pose problème, apparemment on ne dirait pas !
voir [1][VTAB-TEAM-LINDER-PARTNER-1]- 2/ on remplace l'intégralité de ce texte par une structure HTML: Choisir
(car on prépare ici la transformation dans le style des mêmes boutons visuels gérés par UI Kit sur les boutons)
ATTENTION
- avant octobre 2020, le client, aimait l'affichage du terme "Choisir"
- depuis octobre 2020, le client, finalement préfère l'affichage du terme utilisé pour le déclencheur de l'infobulle
voir [1][VTAB-TEAM-LINDER-PARTNER-1]- 3/ on masque l'ancienne image utilisée, car dans le nouveau design de 2020, elle n'est plus d'actualité
voir [1][VTAB-TEAM-LINDER-PARTNER-1]- 4/ on demande à ce que le bouton soit en réalité de type HTML (true = image graphique utilise valeur de buttonImage, false = bouton HTML utilise texte de buttonText)
- 5/ ici on a tenté d'empêcher que le système de date d'évènement soit traduit par Google Traduction
et donc de causer que les chiffres provoquent NaN (Not a Number) à l'inscription dans le champ de commentaire ayant pour id=ChampDeCommentaire..
pourquoi NaN ?
c'est simple, Google Traduction encadre les chaines traduites (de n'importe quel contenu) par des ...
en gros,
javascript via jQueryUI DatePicker sont incapables d'extraire
et de traiter le chiffre cliqué dans le calendrier
dans le sens où ils devraient avoir à traiter un simple chiffre en brut (ex: 15)
ne s'attendent pas à avoir de en plus l'entourant, (ex: 15)
pour enseigner à Google Traduction à ne pas traduire le calendrier qui s'affiche, (le bouton, il peut), on doit donner à son élément conteneur une classe notranslate !
ce qui fonctionnerait avec le code...
qui ajouterait en fin de chargement de la page une classe notranslate à l'élément portant l'ID ui-datepicker-div, qui n'est autre que le calendrier..
ATTENTION - malheureusement... haha, cela implique que l'élément EXISTE à la fin du chargement de la page, et pas quand on clique sur le bouton...
ce qui n'est pas le cas, car il est généré que si l'on clique sur le bouton
donc, on doit procéder autrement, et dans le code de génération de l'élément ui-datepicker-div on doit ajouter NOUS-MÊME la classe notranslate, ce qui permet alors d'afficher toujours l'élément
avec cette fichue classe pour empêcher Google Traduction de traduire le texte du calendrier !
NOTE - la question ne se serait pas posée si le système de traduction resterait celui natif de osCommerce à savoir, à l'aide de la vérification de la variable $language..
car jQueryUI DatePicker gère le multilangue programmé!
donc, on a besoin de nous même intercepter à la source cette auto-traduction non-désirée, (voir CODETAG [GOOGLE_NO_TRANSLATION_AUTHORITY_ON_JQUERYUI_DATEPICKER], fichier: /js_includes/jQueryUI/Modules/datePicker/jquery.ui.datepicker.js)
NOTE - finalement, la méthode ici sera un peu plus complexe:
- le troisième: ben.. ce fichier où vous lisez ces mots
il gère l'implémentation PHP du code généré du bouton/date d'évènement
pour ce fichier, on va ajouter un code jQuery qui ne se déclenchera QUE lorsque le DOM (la page HTML et ses éléments) seront tous chargés, le fameux $(document).ready() !
cela, nous permettra à ce moment de "reconstruire la structure du bouton en direct-live" à l'aide des différentes méthodes javascript de jQuery:
.wrap() => "https://api.jquery.com/wrap/" => Description: Wrap an HTML structure around each element in the set of matched elements
=> on l'utilise pour entourer d'une structure HTML l'élément HTML ciblé
.addClass() => "https://api.jquery.com/addclass/" => Description: Adds the specified class(es) to each element in the set of matched elements
=> on l'utilise pour ajouter des classes CSS à l'élément HTML ciblé
.prepend() => "https://api.jquery.com/prepend/" => Description: Insert content, specified by the parameter, to the beginning of each element in the set of matched elements
=> on l'utilise pour précéder d'une structure HTML l'élément HTML ciblé
.css() => "https://api.jquery.com/css/" => Description: Get the computed style properties or Set it for the first element in the set of matched elements
=> on l'utilise pour modifier une directive CSS spécifique pour l'élément HTML ciblé
FIXME - cela fixe le souci des boutons recouvrant honteusement le calendrier en réinitialisant leur type de positionnement (relative => initial)!
le bouton, comme le modèle de tout les autres dans cette nouvelle version du design, en altérant sa structure HTML une fois générée par le fichier /includes/date_event.php !
et tout cela en ne ciblant qu'un seul et même élément: le bouton (button) qu'on sait qu'il portera le nom de classe CSS (donné par jQueryUI DatePicker): ui-datepicker-trigger
(voir CODETAG [ALTERATION_OF_OLD_DESIGN_BUTTON_DATE_OF_EVENT_BUILT_FROM_HERE])
ATTENTION
- avant octobre 2020, le client, aimait l'affichage de l'icone date_range
- depuis octobre 2020, le client, finalement préfère que cet icone soit supprimé, donc au final on commente la ligne du .prepend()
- 6/ on ajoute deux sauts de lignes HTML, afin de pouvoir un peu espacer (sans utiliser de styles CSS, donc, impartial), le déclencheur d'infobulle tep_get_date_ofevent_infobulle() du bouton de choix de date
on donne à ces deux une classe qui ne sera utilisée en responsive que pour masquer ces éléments comme en responsive on masquera l'infobulle! (vu que le bouton "Continuer" dans checkout_shipping.php affiche déjà le même avertissement!
- 7/ on retire l'attribut href='#infos' qui est ajouté par la fonction tep_get_date_ofevent_infobulle() (se trouvant dans /includes/functions/general.php),
et qui si dans l'ancien design servait à quelquechose (ajouter un ancre fictif)
ben dans le nouveau design, cela ne sert absolument pas et en plus est embêtant!
en fait:
dans l'ancien design, le faux ancre href='#infos',
servait justement à émuler un aspect survolé au navigateur,
et afficher un curseur de souris différent,
désormais,
on le fait uniquement sans cet ancre,
mais surtout avec la directive cursor depuis sa classe CSS a.dov_infobulle
ATTENTION
- avant octobre 2020, le client, aimait l'affichage de l'infobulle
- depuis octobre 2020, le client, finalement préfère que cette infobulle soit supprimée (on va la dissimuler dans le fichier de classes css)
[VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique
voir: [13][VTAB-TEAM-LINDER-PARTNER-1] de checkout_shipping.php
- 1/ le nouveau concept de gestion de date d'événement invalide les étapes [2], [3], [4] de [SI-LINDER-PARTNER-2] et
- 2/ on change le style par défaut de l'object datepicker qui s'activera au changement de focus
- 3/ ... n'est plus affiché par défaut
- 4/ une fois une date sélectionnée on valide le formulaire
- 5/ on fait du ménage dans le code par rapport à des objets qui n'existent plus
}
*/
// ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN
if (CK_EVENT_DATE_ENABLED == 'true') {
?>
"en",
"french" => "fr",
"german" => "de",
"spanish" => "es"
);
// Et on va donner à la variable $LangueTrouvee la valeur.. trouvée justement :D
// Pour cela on se refère à l'index du tableau en utilisant la valeur contenue dans la variable $language qui est générée par osCommerce.
$LangueTrouvee = $ToutesLesLanguesParlees[$language];
?>
OSC-45: Modification de l'intitulé du message préventif de Date D'évènement obligatoire (du à la non-compréhension de certains clients):
// utilisation d'infobulle spécialement adaptée pour afficher le message de ce qu'est la date d'évènement à l'utilisateur ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>