Bonne façon d'ajouter JS et CSS au nœud / modifier et autres formulaires

10

Je fais un site avec beaucoup de JS, et je me demande où je dois mettre le code JS. Idéalement, je voudrais conserver le JS avec chaque module et non la couche de thème. Certains contenus peuvent être exposés sous forme de blocs, etc.

Mais j'ai des problèmes avec le cache. Dans mon exemple, je dois ajouter JS & CSS au formulaire d'édition de nœud. J'ai utilisé hook_block_view, mais il est mis en cache. Donc, s'il y a une erreur dans le formulaire d'édition de nœud, les fonctions drupal_add_js et drupal_add_css ne sont pas appelées. La même chose semble être vraie pour hook_node_prepare.

Où saisiriez-vous la couche JS & CSS? et y a-t-il des hooks qui sont appelés même s'il y a une erreur dans le formulaire d'édition du nœud?

theming hooks

— Jens
source

6

Si vous souhaitez ajouter JS et CSS à la page d'édition de noeud en particulier (ou à n'importe quelle forme en général), le meilleur et le bon endroit pour le faire est le hook_form_alter () et la propriété que vous devez utiliser est #after_build.

Ce commentaire sur DO vous dit exactement quoi faire - http://drupal.org/node/1253520#comment-4881588

J'espère que cela t'aides :-)

— Sumeet Pareek
source

Merci, juste ce dont j'avais besoin. J'ai maintenant une belle forme, bien meilleure que celle par défaut qu'il a. Des opinions sur l'architecture d'un tel site?

— Jens

Heureux que cela ait fonctionné. Lorsque c'est le cas, vous devez marquer la réponse comme «réponse acceptée» afin que la question n'apparaisse pas dans la liste des questions sans réponse et que la personne qui vous aide obtienne le «karma». Je vois que vous êtes nouveau ici. Moi aussi, mais j'ai des comptes plus actifs sur d'autres services StackOverflow, et j'adore cet endroit.

— Sumeet Pareek

Et oh .. juste savoir que vous avez besoin de JS CSS sur un formulaire et essayer de commenter l'architecture du site ne serait pas moins qu'un crime

— :-p

Bien sûr, répondit maintenant.

— Jens

1

@SumeetPareek J'ai rétrogradé votre réponse (mais aucune infraction) car l'utilisation #attachedest recommandée dans presque tous les cas. De plus, drupal_add_js / css sera déprécié dans Drupal 8.

— AyeshK

6

Vous devez utiliser la propriété #attached pour vous assurer que JS / CSS est toujours correctement chargé avec un autre élément de rendu.

— Létharion
source

Je pensais que cela bénéficierait vraiment d'un exemple d'utilisation #attached, et peut-être de quelques informations supplémentaires sur le problème que vous évitez.

— Michael Greisman

@MichaelGreisman Je dois dire que je ne vois pas immédiatement la valeur de l'ajout du code en ligne ici. Il sera mieux maintenu sur le lien que j'ai fourni, qui est la documentation officielle sur la façon de le faire. Ma réponse explique quoi faire, mais la documentation de l'API de formulaire est le bon endroit pour savoir comment .

— Letharion

3

J'ai senti que ces réponses et commentaires avaient désespérément besoin d'un exemple de code, en particulier ceux de @AyeshK et @Letharion. C'est trop long pour un commentaire, veuillez donc pardonner la réponse. Si cela vous est utile, veuillez voter pour la réponse de Sumeet ou de Letharion. De plus, l'exemple suivant ajoute évidemment CSS, mais serait presque identique pour l'ajout de javascript.

Utiliser la réponse de @ Sumeet, mais en utilisant la #attachedpropriété à la place de drupal_add_css, ressemble à ceci:

/* Implements hook_form_FORM_ID_alter() */
function MY_MODULE_form_MY_FORM_ID_alter(&$form, &$form_state, $form_id) {
  $form['#after_build'][] = 'MY_MODULE_some_function_name_after_build';
}

function MY_MODULE_some_function_name_after_build($form, &$form_state) {
  $style_path = drupal_get_path('module','MY_MODULE') . '/css/my_css.css';
  // drupal_add_css('file', $style_path);
  $form['#attached']['css'][] = $style_path;
  return $form;
}

Enfin, la dépréciation de drupal_add_csspeut être trouvée dans ce post . Cela peut être une nouvelle pour beaucoup pour qui drupal_add_xxx fonctionnait très bien, comme pour moi.

— Michael Greisman
source

Le #after_buildbit est, à ma connaissance un non-sens, et devrait simplement être supprimé. (Il y a un commentaire similaire sur la réponse apportant la #after_buildsolution) Je pense que cela en soi explique pourquoi ma brève réponse est bonne. Si vous regardiez simplement le lien que j'ai fourni, vous trouveriez le même code, mais sans les bits inutiles.

— Letharion

0

Pour Drupal 8, je vous conseille de lire cet article

bibliothèques.yml

something: 
  version: VERSION
  js: 
    js/something.js: {}
  dependencies: 
    - core/jquery

.module

function MODULE_page_attachments(array &$page) {
  $page['#attached']['library'][] = MODULE/something;
}

— Chris Happy
source