Bonjour à tous,
Je voudrais lier une feuille CSS différente en fonction du périphérique de l'utilisateur (desktop, mobile, tablet). Rien de compliqué à priori...
Pour détecter le périphérique, je combine plusieurs méthodes : user agent, résolution du périphérique et détection de la "tactibilité" du périphérique. Je suis obligé de faire tout cela en JavaScript car d'une part le user agent en php pose problème car drupal fait du cache côté serveur, et d'autre part la résolution et la tactibilité du périphérique ne sont pas décelable côté serveur et php. Pour la résolution j'utilise l'objet "screen" de JS et pour la tactibilité, je détecte la présence de l'événement JS "ontouchstart".
Donc je n'ai pas le choix, je suis obligé de faire cela côté client, donc en JS. A priori ça ne pose pas de problème, on peux linker une feuille CSS côté client et qu'elle soit prise en compte en utilisant ceci :
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "mon_path/monStyle.css";
headID.appendChild(cssNode);Sauf que cela ne fonctionne pas avec Drupal... Je cherche donc si Drupal permet de faire ce lien, en gros un équivalent de la fonction drupal_add_css disponible dans l'API en PHP.
Est-ce que quelqu'un saurait faire cela ?
Merci de vos réponses :)
Antoine
- Vous devez vous identifier ou créer un compte pour écrire des commentaires
Je ne vois pas pourquoi ça ne fonctionnerait pas sous Drupal si ça fonctionne ailleurs.
Où as-tu placé ce code ?
Numerizen
1822
Merci Numerizen pour ta réponse !
Mon script JS est dans un fichier à part, je voulais le déclarer dans le .info avec :
scripts[] = mon_path/mon_script.jsMais cela ne fonctionne pas, donc pour le moment il est déclaré dans le template.php comme ceci :drupal_add_js(drupal_get_path('theme', 'mon_theme').'mon_path/mon_script.js', 'theme');Cela fonctionne car j'ai mis un alert en fin de script et je le vois bien au chargement de chaque page mais le linkage du CSS ne fonctionne pas...D'autre part j'ai testé cette façon de lier un CSS (décrite dans le post précédent) dans un fichier html test à part juste pour vérifier, ça donne cela :
<html><head>
<meta charset="utf-8" />
<title>
Device detection
</title>
<script type="text/javascript">
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "redBody.css";
headID.appendChild(cssNode);
</script>
</head>
<body>
<p>Test</p>
</body>
</html>
Mon CSS ne fait qu'afficher un body background rouge, et ceci fonctionne correctement... donc je ne comprends pas pourquoi cette méthode ne fonctionne pas quand je passe sous Drupal, enfin je sais pas si c'est du à Drupal où si je fait mal mais bon... en attendant je trouve pas de solution...
antoine.v
16
Il faudrait implémenter ça avec la syntaxe des behaviors : http://drupal.org/update/modules/6/7#drupal_behaviors, histoire d’être sûr que le code s’intègre naturellement. Ensuite, si ça ne fonctionne toujours pas, on verra.
Numerizen
1822
Oui je ne l’avais pas précisé mais mon script JS utilise la syntaxe des behaviours, je vais regarder le lien que tu m’as laissé mais de ce que j’en ai compris, il faut juste ça :
Drupal.behaviors.deviceDetection = function(context){//mon script...
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = "../css/styleTablet.css";
headID.appendChild(cssNode);
alert("End");
}
Après c’est peut-être un problème de path du CSS aussi, mais bon j’ai tout essayé je crois, y compris le chemin absolu en dur…
antoine.v
16
Si c’est un problème de chemin, tu dois avoir une erreur 404 dans l’onglet Réseau de Firebug sur ta CSS.
Je répète : il n’y a aucune raison que ça fonctionne hors Drupal et pas sous Drupal.
Numerizen
1822
Bon tout est de ma faute…
Le fait de repenser au path m’a fait faire quelques tests et en effet, il ne s’agissait que d’un problème de path…, même mettre le chemin en dur ne convenait pas, il faut démarrer le path du fichier à partir de sites/
Toutes mes excuses pour ce problème qui n’en n’était pas un… mais bon l’astuce pourra servir…
Merci de tes réponses Numerizen !!!
Antoine
[EDIT] : en effet j’avais une 404 dans la console de Chrome mais je n’avais pas regarder… Shame on me :P !
antoine.v
16
Ah oué… Malin… mais le problème c’est que ça va bien quand je suis sur ma Home, dès que je navigue sur le site, le path est plus bon du coup…
Je sais pas trop si j’ai une solution… Comme je suis client-side…
Je connais pas trop JQuery, certains ont des idées pour résoudre cela ?!
antoine.v
16
Bon j’avance mais j’ai un gros problème dans le JS…
J’ai ce code la :
var headID = document.getElementsByTagName("head")[0];var cssNode = document.createElement("link");
cssNode.type = "text/css";
cssNode.rel = "stylesheet";
cssNode.href = themePath + "/css/styleTablet.css";
headID.appendChild(cssNode);
Ma variable themePath est envoyé depuis le template.php de cette façon :
drupal_add_js("var hlnThemePath = \"" . drupal_get_path('theme', 'hln') . "\";", 'inline');Donc en gros, c’est le path de mon thème depuis sites/. Donc à priori j’ai le path complet de ma CSS… Sauf que le lien que créé JS pour le CSS est toujours après l’url en cours de visite… Donc sur la home ça va, j’ai un truc du genre :
localhost/sites/default/themes/mon_theme/css/monStyle.cssMais dès que je passe sur une autre URL, mettons dans les topics, il me ressort ce lien pour la CSS :
localhost/topics/sites/default/themes/mon_theme/css/monStyle.cssNormal en fait, mais je n’y pensais plus… Du coup j’ai plus trop de solutions la, je sais pas comment lui passer un lien relatif sachant que je sais pas à quoi il va le coller…
Des idées ?
antoine.v
16
Ce n’est pas trop orthodoxe comme façon d’insérer une variable ; normalement, on passe par un Drupal.setting, mais bon, le souci ne vient pas de là.
Je coderais plutôt la variable comme ça :
drupal_add_js("var hlnThemePath = \"/" . drupal_get_path('theme', 'hln') . "\";", 'inline');… avec le slash en début de chemin. Ça indique à Drupal que le chemin est absolu et pas relatif.
Ou alors :
cssNode.href = "/" + themePath + "/css/styleTablet.css";Numerizen
1822
Je n’avais pas posté mais effectivement c’était uniquement du à ça !!!
Merci, à priori ça marche à tout les coups maintenant.
Désolé c’est un peu bête comme erreur mais bon ça arrive…
Antoine
antoine.v
16
Pas de souci. Nous avons tous nos petits moments d’absence. Et puis c’est aussi à ça que servent les forums.
Numerizen
1822