Modo giusto per aggiungere JS e CSS al nodo / modifica e altri moduli

10

Sto creando un sito con molti JS e mi chiedo dove dovrei inserire il codice JS. In modo ottimale, vorrei mantenere JS con ciascun modulo e non con il tema. Alcuni contenuti potrebbero essere esposti come blocchi, ecc.

Ma sto riscontrando alcuni problemi con la cache. Nel mio esempio ho bisogno di aggiungere JS e CSS al modulo di modifica del nodo. Ho usato hook_block_view, ma è memorizzato nella cache. Pertanto, se si verifica un errore nel modulo di modifica del nodo, le funzioni drupal_add_js e drupal_add_css non vengono chiamate. Lo stesso sembra essere vero per hook_node_prepare.

Dove inseriresti il livello JS e CSS? e ci sono hook che vengono chiamati anche se c'è un errore nel modulo di modifica del nodo?

theming hooks

— Jens
fonte

6

Se si desidera aggiungere JS e CSS alla pagina di modifica del nodo in particolare (o qualsiasi modulo in generale), il posto migliore e giusto per farlo è hook_form_alter () e la proprietà che si dovrebbe usare è #after_build.

Questo commento su DO ti dice esattamente cosa fare - http://drupal.org/node/1253520#comment-4881588

Spero che sia di aiuto :-)

— Sumeet Pareek
fonte

Grazie, proprio quello di cui avevo bisogno. Ha una bella forma ora, molto meglio del suo default. Qualche opinione sull'architettura di un tale sito?

— Jens,

Sono contento che abbia funzionato. In questo caso dovresti contrassegnare la risposta come "risposta accettata", in modo che la domanda non compaia nell'elenco delle domande senza risposta e la persona che ti aiuta ottiene "karma". Vedo che sei nuovo qui. Anche io lo sono, ma ho account più attivi su altri servizi StackOverflow e adoro questo posto.

— Sumeet Pareek,

E oh ... solo sapere che hai bisogno di JS CSS su un modulo e provare a commentare l'architettura del sito non sarebbe altro che un crimine :-p

— Sumeet Pareek,

Certo, rispose ora.

— Jens,

1

@SumeetPareek Ho annullato il voto della tua risposta (ma senza offesa) perché l'uso #attachedè raccomandato in quasi ogni caso. Inoltre, drupal_add_js / css sarà deprecato in Drupal 8.

— AyeshK

6

È necessario utilizzare la proprietà #attached per assicurarsi che JS / CSS venga sempre caricato correttamente insieme a un altro elemento di rendering.

— Letharion
fonte

Ho sentito che ciò trarrebbe beneficio da un esempio di come usare #attachede forse alcune informazioni aggiuntive sul problema che stai evitando.

— Michael Greisman,

@MichaelGreisman Devo dire che non vedo immediatamente il valore di aggiungere il codice in linea qui. Sarà meglio gestito al link che ho fornito, che è la documentazione ufficiale su come farlo. La mia risposta spiega cosa fare, ma il modulo di documentazione API è il posto giusto per come .

— Letharion,

3

Ho sentito che queste risposte e commenti avevano un disperato bisogno di un esempio di codice, in particolare quelli di @AyeshK e @Letharion. È troppo lungo per un commento, quindi ti prego di perdonare la risposta. Se ti è utile, vota per favore o la risposta di Sumeet o Letharion. Inoltre, l'esempio seguente aggiunge ovviamente CSS, ma sarebbe quasi identico per l'aggiunta di javascript.

L'utilizzo della risposta di @ Sumeet, ma l'utilizzo della #attachedproprietà anziché drupal_add_css, si presenta così:

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

Infine, la deprecazione di drupal_add_csspuò essere trovata in questo post . Questa potrebbe essere una novità per molti per i quali drupal_add_xxx stava lavorando bene, come per me.

— Michael Greisman
fonte

Il #after_buildpeggio è, per quanto ne so, senza senso, e dovrebbe semplicemente essere rimosso. (C'è un commento simile sulla risposta che fornisce la #after_buildsoluzione) Penso che questo di per sé spieghi perché la mia breve risposta è buona. Se semplicemente guardassi il link che ho fornito, troverai lo stesso codice, ma senza i bit inutili.

— Letharion,

0

Per Drupal 8, ti consiglio di leggere questo articolo

libraries.yml

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

.modulo

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

— Chris Happy
fonte