Maneira correta de adicionar JS e CSS ao nó / editar e outras formas

10

Estou criando um site com muitas JS e me pergunto onde devo colocar o código JS. Idealmente, gostaria de manter o JS em cada módulo e não na camada do tema. Algum conteúdo pode ser exposto como blocos, etc.

Mas estou tendo alguns problemas com o cache. No meu exemplo, preciso adicionar JS e CSS ao formulário de edição do nó. Eu usei hook_block_view, mas está em cache. Portanto, se houver um erro no formulário de edição do nó, as funções drupal_add_js & drupal_add_css não serão chamadas. O mesmo parece ser verdadeiro para hook_node_prepare.

Onde você inseriria a camada JS & CSS? e existem ganchos que são chamados mesmo se houver um erro no formulário de edição do nó?

theming hooks

— Jens
fonte

6

Se você deseja adicionar JS e CSS à página de edição do nó em particular (ou qualquer formato em geral), o melhor e o lugar certo para fazer isso é o hook_form_alter () e a propriedade que você deve usar é #after_build.

Este comentário no DO diz exatamente o que fazer - http://drupal.org/node/1253520#comment-4881588

Espero que isto ajude :-)

— Sumeet Pareek
fonte

Obrigado, exatamente o que eu precisava. Tem uma boa forma agora, muito melhor do que o padrão que ele. Alguma opinião sobre a arquitetura de um site desse tipo?

— Jens

Ainda bem que funcionou. Quando é assim, você deve marcar a resposta como 'resposta aceita' para que a pergunta não apareça na lista de perguntas não respondidas e a pessoa que está ajudando você receba "carma". Vejo que você é novo aqui. Também sou, mas tenho contas mais ativas em outros serviços StackOverflow e adoro esse lugar.

— Sumeet Pareek

E oh .. basta saber que você precisa JS CSS em um formulário e tentar comentário sobre a arquitetura do site seria nada menos do que um ser :-P crime

— Sumeet Pareek

Claro, respondeu agora.

— Jens

11

@SumeetPareek Eu diminuí a votação da sua resposta (mas sem ofensa) porque o uso #attachedé recomendado em quase todos os casos. Além disso, drupal_add_js / css será suspenso em Drupal 8.

— AyeshK

6

Você deve usar a propriedade #attached para garantir que o JS / CSS sempre seja carregado corretamente junto com outro elemento de renderização.

— Letharion
fonte

Eu senti que isso realmente se beneficiaria de um exemplo de como usar #attached, e talvez algumas informações adicionais sobre o problema que você está evitando.

— Michael Greisman

@MichaelGreisman Devo dizer que não vejo imediatamente o valor de adicionar o código em linha aqui. Será melhor mantido no link que forneci, que é a documentação oficial sobre como fazê-lo. Minha resposta explica o que fazer, mas a documentação da API do formulário é o lugar certo para saber como .

— Letharion

3

Senti que essas respostas e comentários precisavam desesperadamente de código de exemplo, particularmente os de @AyeshK e @Letharion. Isso é muito longo para um comentário, então, perdoe a resposta. Se for útil para você, vote novamente na resposta de Sumeet ou Letharion. Além disso, o exemplo a seguir obviamente adiciona CSS, mas seria quase idêntico ao adicionar javascript.

Usar a resposta de @ Sumeet, mas usar a #attachedpropriedade em vez de drupal_add_css, fica assim:

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

Por fim, a descontinuação de drupal_add_csspode ser encontrada neste post . Isso pode ser novidade para muitos para quem drupal_add_xxx estava funcionando bem, como foi para mim.

— Michael Greisman
fonte

A parte #after_buildé, na melhor das hipóteses, um absurdo, e deve simplesmente ser removida. (Existe um comentário semelhante sobre a resposta que fornece a #after_buildsolução) Acho que isso explica por que minha resposta breve é boa. Se você simplesmente olhasse para o link que forneci, encontraria o mesmo código, mas sem os bits desnecessários.

— Letharion

0

Para o Drupal 8, aconselho você a ler este artigo

libraries.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 Happy
fonte