Ajout de code javascript dans une page

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by yggy89 on

Bonjour à toute la communauté,

j'arrive vers vous car je ne sais pas trop où en arriver...

Voilà, je comprends bien le principe d'un CMS, avec les templates, différences entre contenu et contenant.
Mais, par exemple, étant un peu cartographe dans l'âme, j'aimerais bien mettre des cartes leaflet ou openlayers sur mon site drupal. Du coup, j'ai essayé avec les modules qui sont effectivement très bien fait! J'ai fait une carte leaflet avec la création d'un contenu et les coordonnées géographiques latitude/longitude, et ça rend très bien dans un bloc.

Mais, par exemple, quand on voit des tutoriels comme celui sur le site de leaflet ou encore celui ci il nous présente des codes complet...Est-il possible de les présenter sur Drupal ? Ou il faut absolument passer par les modules ?
En fait, j'aimerais pouvoir faire une simple carte customizable complètement via le code javascript et pouvoir l'insérer dans un bloc quoi...Mais je n'arrive pas à tout comprendre! Peut-être n'est ce juste pas possible!

En espérant compter sur vous pour m'apporter une réponse!

Forum : 
Support général
Version de Drupal : 
7.x
Tags : 
leaflet
openlayers
drupal
page

Soumis par yggy89 le 14 Février, 2014 - 12:08

Salut yoyojo! Merci pour ta réponse, ouais j'avais vu cette commande, à rajouter dans le fichier template si je ne m'abuse?!
Après, là, j'arrive au bout de mes compétences en code (qui sont de débutant), donc va falloir que je trouve des tutos...Genre comment faire pour que le code ne s'affiche que sur une page en particulier ?

Merci en tout cas!

Soumis par yggy89 le 3 Mars, 2014 - 12:51

Je déterre le topic car j'ai une application concrète que je n'arrive pas à comprendre...
Est-ce qu'on peut utiliser un CMS comme Drupal pour créer une carte Leaflet comme celle-ci présente dans le fichier html ?
fichier html de la carte

J'ai déjà expérimenté la méthode en créant des types de contenus et créer une carte via l'interface Drupal mais j'aimerais la créer directement via le fichier html comme dans l'exemple, est-ce possible avec drupal_add_js ?

Si oui, si vous avez un peu d'aide à me donner, ce se serait pas de refus...!

Merci à la communauté!

Soumis par Keyral le 3 Mars, 2014 - 22:57

bonsoir, biensur que tu peux si tu hide toutes tes autres regions , et que tu render que ton node.
Apres tu ajoute ton js en drupal_add_js
comme cela en gros

function hook_preprocess_page(&$var) {
if($var['node']->type == 'mon type de contenu' ) {
      
       drupal_add_js('mon super fichier js');

}

en esperant que tous cela t'aidera.

Soumis par yggy89 le 6 Mars, 2014 - 10:49

Salut Keyral et merci pour ta réponse! Mais là, j'atteinds vraiment la limite en terme de connaissances chez moi...J'ai beaucoup de mal à comprendre ce que je fais...

La fonction hook_preprocess_page permet de cacher les autres régions, si je comprends bien ? Mais si je décide de mettre mon script dans un bloc par exemple, je n'en ai pas besoin, donc voilà ce que je met dans mon bloc avec php code

<?php
drupal_add_js('var map;
            /* initialisation de la fonction initmap */
            function initmap() {
                // paramétrage de la carte
                map = new L.Map('map');
                // création des "tiles" avec open street map
                var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
                var osmAttrib='Map data de OpenStreetMap';
                var osm = new L.TileLayer(osmUrl, {minZoom: 2, maxZoom: 10, attribution: osmAttrib});           
                // on centre sur la France
                map.setView(new L.LatLng(46.85, 2.3518),6);
                map.addLayer(osm);
            }
            /* on va procéder à l'initialisation de la carte */
            initmap();');
?>

Ma librairie Leaflet ? Elle est bien dans mon sites/all/libraries, peut-être faut-elle que je la renseigne dans le .info de mon thème ? Ou ailleurs ? pour que la fonction drupal_add_js sache où aller ?

Si tu as le temps de m'orienter vers une possible réponse, merci à toi!

Soumis par AlanT le 11 Mars, 2014 - 11:39

Salut,

Est-ce que cette carte sera visible sur toutes les pages ou pas ?
drupal_add_js est certes pratique, mais inutile si tu affiches ta carte sur toutes tes pages (ou si ton site est une simple page).

Si tu as besoin de ta carte sur toute tes pages, mets ton scripts.js dans un répertoire js de ton template, et déclare scripts.js dans le .info de ton theme (scripts[] = js/scripts.js).

Ensuite dans scripts.js tu mets proprement le js :

(function ($, Drupal, window, document, undefined) {

// ton code

})(jQuery, Drupal, this, this.document);

Sinon, si tu préfère charger le Js uniquement là où tu en as besoin, tu peux passer par drupal_add_js, mais sans passer le Js en "inline" car c'est cracra vu la taille de ton code, passe plutôt le fichier .js directement :

Ex :

function tontheme_preprocess_page($vars){

if() { // mets ici ta logique pour déclarer le js uniquement sur la/les pages souhaitée(s).
  drupal_add_js(drupal_get_path('theme', 'tontheme') .'/js/scripts.js', array('type' => 'file', 'scope' => 'footer'));
}

}

Soumis par yggy89 le 23 Mars, 2014 - 22:47

Salut AlanT et merci pour ta réponse!

Désolé pour le retard, je n'ai plus trop le temps de m'occuper de mon site en ce moment, donc c'est un peu en stand by, mais je tenais à te remercier pour ta réponse que j'expérimenterai dès que je pourrai!

je testerai les deux options, même si mon but premier était de placer une carte sur une seule page, donc la deuxième solution parait nickel.

Soumis par yggy89 le 21 Mai, 2014 - 18:39

Salut à tous, alors suivant les conseils précédents, j'ai tenté de faire au mieux...

1/ D'abords, je veux afficher cette carte que sur une page et si possible dans un bloc, donc je crée d'abords ce bloc

2/ Ensuite, grâce à cette fonction :

function corkedscrewer2_preprocess_html(&$variables, $hook) {
  $options = array('type' => 'file');  // indique à Drupal que le javascript dans drupal_add_js est un fichier
   if ((in_array('block-block-3', $variables['classes_array'])))
    drupal_add_js(drupal_get_path('theme', 'corkedscrewer'). '/js/script.js', $options);//Chargement du fichier js.
  }

je mets cette fonction dans mon fichier template.php et mon fichier leaflet en javascript en dans un fichier script.js que je place dans le dossier "js" à la racine de mon thème, n'est-ce pas ?
mon thème est "corkedscrewer", je pense l'avoir bien mis là où il le fallait ?
Il y a un "2" au début car j'ai déjà une fonction preprocess_html (variable) pour le CSS responsive, si IE8 toussa

3/ Le bloc que j'ai créé et dans lequel je veux insérer mon code javascript est bien #block-block-3, faut-il lui mettre une classe pour que cela fonctionne ?

4/ Rien ne se passe dans mon bloc lorsque j'actualise ma page, où ai-je raté quelque chose ?

Merci d'avance aux personnes m'ayant répondu auparavant et à celles qui voudront bien me répondre :)

Soumis par vincent59 le 21 Mai, 2014 - 21:59

Le nom des "hook" est normalisé. Si ton thème s'appelle corkedscrewer, la fonction doit s'appeler corkedscrewer_preprocess_html, sinon Drupal ne va pas l'appeler.

Si tu as déjà une fonction preprocess_html, il suffit d'y ajouter ton code.

Soumis par yggy89 le 21 Mai, 2014 - 22:47

Salut Vincent et merci pour ta réponse, qui m'a un peu éclairé!

Alors concernant la mise en place de la fonction voilà ce que j'avais dans mon code :

<?php
/**
* Override or insert variables into the html template.
*/
function corkedscrewer_preprocess_html(&$variables) {
   if (!theme_get_setting('responsive_respond','corkedscrewer')):
drupal_add_css(path_to_theme() . '/css/basic-layout.css', array('group' => CSS_THEME, 'browsers' => array('IE' => '(lte IE 8)&(!IEMobile)', '!IE' => FALSE), 'preprocess' => FALSE));
endif;

    drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('!IE' => FALSE), 'preprocess' => FALSE));

   }

ça c'est que j'ai au début de mon fichier template, avant d'autres fonctions notamment pour slideshow.

Pour insérer ma fonction je décide de la mettre avant celle du responsive respond comme cela :

function corkedscrewer_preprocess_html(&$variables)
{if ((in_array('block-block-3.block', $variables['classes_array'])))
   drupal_add_js(drupal_get_path('theme', 'corkedscrewer') .'/js/scripts.js', array('type' => 'file', 'scope' => 'footer'));
if (!theme_get_setting('r...

Mais je dois faire une erreur quelque part...Je touche, retouche, change des trucs, modifie mon bloc, change la classe, change le type du js, modifie mon js,...Rien ne bouge

Soumis par vincent59 le 22 Mai, 2014 - 13:36

Est-ce que tu passes bien dans le if ?
et si oui, est-ce que le scripts.js est ajouté à la page (dans le source de la page html tu dois voir quelque chose).

Tu peux mettre un var_dump ($variables['classes_array']) au début de ta fonction pour vérifier si tu retrouves ta classe blockxxx

Il faut aussi vider le cache.

Soumis par yggy89 le 23 Mai, 2014 - 14:10

Salut et merci pour ta réponse...

Alors après vérif, je n'ai pas le scripts.js qui est ajouté à la page donc ça va pas marché c'est sûr...
le code que j'ai mis ne doit pas prendre en compte le "if" du coup, je l'ai soit mal placé, soit ça vient de ma classe (j'ai crée un nouveau bloc exprès pour mettre la carte, avec son id block-block-3 que j'ai rajouté à mon css.
Mais quand je mets le var_dump, effectivement, j'ai un unexpected VARIABLE à la ligne où je dois la déclarer...Mon "if" ne serait pas pris en compte ?

EDIT : Je crois que l'erreur est dans mon code si j'ajoute les : ou pas...

EDIT 2 : Bon, j'ai fini par y arriver mais pas dans les règles de l'art...Encore de la bidouille! J'ai mis mon code javascript dans un bloc drupal et mis php filter...Je suis ouvert à toute aide pour pouvoir le faire de la même manière mais avec drupal add js !!