Forma correcta de agregar JS y CSS al nodo / editar y otras formas

10

Estoy haciendo un sitio con un montón de JS, y me pregunto dónde debería poner el código JS. De manera óptima, me gustaría mantener el JS con cada módulo y no con la capa de tema. Parte del contenido podría estar expuesto como bloques, etc.

Pero tengo algunos problemas con el caché. En mi ejemplo, necesito agregar JS y CSS al formulario de edición de nodos. He usado hook_block_view, pero está en caché. Por lo tanto, si hay un error en el formulario de edición de nodo, no se invocan las funciones drupal_add_js y drupal_add_css. Lo mismo parece ser cierto para hook_node_prepare.

¿Dónde ingresarías la capa JS y CSS? y hay ganchos que se llaman incluso si hay un error en el formulario de edición de nodos?

theming hooks

— Jens
fuente

6

Si desea agregar JS y CSS a la página de edición de nodos en particular (o cualquier forma en general), el mejor y el lugar correcto para hacerlo es hook_form_alter () y la propiedad que debe usar es #after_build.

Este comentario sobre DO le dice exactamente qué hacer: http://drupal.org/node/1253520#comment-4881588

Espero que esto ayude :-)

— Sumeet Pareek
fuente

Gracias, justo lo que necesitaba. Ahora tengo una buena forma, mucho mejor que la predeterminada. ¿Alguna opinión sobre la arquitectura de tal sitio?

— Jens

Me alegro de que funcionó. Cuando sea así, debe marcar la respuesta como 'respuesta aceptada' para que la pregunta no aparezca en la lista de preguntas sin respuesta y la persona que lo ayude obtenga "karma". Veo que eres nuevo aquí. Yo también, pero tengo cuentas más activas en otros servicios de StackOverflow, y me encanta este lugar.

— Sumeet Pareek

Y oh ... solo saber que necesitas JS CSS en un formulario e intentar comentar sobre la arquitectura del sitio no sería menos que un crimen :-p

— Sumeet Pareek

Claro, respondió ahora.

— Jens

1

@SumeetPareek He rechazado su respuesta (pero sin ofender) porque #attachedse recomienda su uso en casi cualquier caso. Además, drupal_add_js / css quedará obsoleto en Drupal 8.

— AyeshK

6

Debe usar la propiedad #attached para asegurarse de que JS / CSS siempre se cargue correctamente junto con otro elemento de representación.

— Letharion
fuente

Sentí que esto realmente se beneficiaría de un ejemplo de cómo usarlo #attached, y tal vez alguna información adicional sobre el problema que está evitando.

— Michael Greisman

@MichaelGreisman Tengo que decir que no veo inmediatamente el valor de agregar el código en línea aquí. Se mantendrá mejor en el enlace que proporcioné, que es la documentación oficial sobre cómo hacerlo. Mi respuesta explica qué hacer, pero la documentación de la API del formulario es el lugar correcto para saber cómo .

— Letharion

3

Sentí que estas respuestas y comentarios necesitaban desesperadamente código de ejemplo, particularmente los de @AyeshK y @Letharion. Esto es demasiado largo para un comentario, así que por favor, perdona la respuesta. Si es útil para usted, vote por la respuesta de Sumeet o Letharion. Además, el siguiente ejemplo obviamente agrega CSS, pero sería casi idéntico para agregar javascript.

Usando la respuesta de @ Sumeet, pero usando la #attachedpropiedad en lugar de drupal_add_css, se ve así:

/* 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;
}

Finalmente, la depreciación de drupal_add_cssse puede encontrar en esta publicación . Eso puede ser una novedad para muchos para quienes drupal_add_xxx funcionaba bien, como lo fue para mí.

— revs Michael Greisman
fuente

El #after_buildbit es, a mi leal saber y entender, y simplemente debe eliminarse. (Hay un comentario similar sobre la respuesta que proporciona la #after_buildsolución) Creo que esto en sí mismo explica por qué mi breve respuesta es buena. Si simplemente miraras el enlace que proporcioné, encontrarás el mismo código, pero sin los bits innecesarios.

— Letharion

0

Para Drupal 8, le aconsejaría que lea este artículo

bibliotecas.yml

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

.módulo

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

— Chris feliz
fuente