Właściwy sposób na dodanie JS i CSS do węzła / edycji i innych formularzy

10

Tworzę witrynę z dużą ilością JS i zastanawiam się, gdzie powinienem umieścić kod JS. Optymalnie chciałbym zachować JS z każdym modułem, a nie warstwą motywu. Niektóre treści mogą być widoczne jako bloki itp.

Ale mam pewne problemy z pamięcią podręczną. W moim przykładzie muszę dodać JS i CSS do formularza edycji węzła. Użyłem widoku hook_block_view, ale jest on buforowany. Jeśli więc wystąpi błąd w formularzu edycji węzła, funkcje drupal_add_js i drupal_add_css nie są wywoływane. To samo wydaje się być prawdziwe w przypadku hook_node_prepare.

Gdzie wpisałbyś warstwę JS i CSS? i czy istnieją haki, które są wywoływane, nawet jeśli występuje błąd w formularzu edycji węzła?

theming hooks

— Jens
źródło

6

Jeśli chcesz dodać JS i CSS w szczególności do strony edycji węzła (lub jakiejkolwiek innej formy), najlepszym i właściwym miejscem do tego jest hook_form_alter (), a właściwość, której powinieneś użyć to #after_build.

Ten komentarz do DO mówi dokładnie, co robić - http://drupal.org/node/1253520#comment-4881588

Mam nadzieję że to pomoże :-)

— Sumeet Pareek
źródło

Dzięki, właśnie tego potrzebowałem. Teraz ma ładną formę, znacznie lepszą niż domyślna. Jakieś opinie na temat architektury takiej strony?

— Jens

Cieszę się, że to zadziałało. Kiedy tak jest, powinieneś oznaczyć odpowiedź jako „odpowiedź zaakceptowana”, aby pytanie nie pojawiło się na liście pytań bez odpowiedzi, a osoba, która ci pomaga, otrzyma „karmę”. Widzę, że jesteś tu nowy. Ja też, ale mam bardziej aktywne konta w innych usługach StackOverflow i uwielbiam to miejsce.

— Sumeet Pareek

I och ... sama wiedza o tym, że potrzebujesz JS CSS w formularzu i próba skomentowania architektury witryny byłaby nie mniej niż przestępstwem :-p

— Sumeet Pareek

Jasne, odpowiedziałem teraz.

— Jens

1

@SumeetPareek Głosowałem za odpowiedzią (ale bez obrazy), ponieważ używanie #attachedjest zalecane w prawie każdym przypadku. Co więcej, drupal_add_js / css będzie przestarzałe w Drupal 8.

— AyeshK

6

Należy użyć właściwości #attached, aby upewnić się, że JS / CSS zawsze jest poprawnie ładowany wraz z innym elementem renderującym.

— Letharion
źródło

Czułem, że to naprawdę skorzysta z przykładu użycia #attachedi może dodatkowych informacji na temat problemu, którego unikasz.

— Michael Greisman,

@MichaelGreisman Muszę powiedzieć, że nie widzę od razu wartości dodania kodu tutaj. Będzie lepiej utrzymany pod linkiem, który podałem, który jest oficjalną dokumentacją, jak to zrobić. Moja odpowiedź wyjaśnia, co robić, ale dokumentacja interfejsu API jest właściwym miejscem na to, jak to zrobić .

— Letharion

3

Czułem, że te odpowiedzi i komentarze desperacko potrzebowały przykładowego kodu, szczególnie tych z @AyeshK i @Letharion. To jest za długie na komentarz, więc proszę wybaczyć odpowiedź. Jeśli okaże się to przydatne, proszę głosować za odpowiedzią Sumeet lub Letharion. Ponadto poniższy przykład oczywiście dodaje CSS, ale byłby prawie identyczny przy dodawaniu javascript.

Użycie odpowiedzi @ Sumeet, ale użycie #attachedwłaściwości zamiast drupal_add_csswygląda następująco:

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

Wreszcie, wycofanie drupal_add_cssmożna znaleźć w tym poście . To może być wiadomość dla wielu, dla których drupal_add_xxx działał dobrze, tak jak dla mnie.

— rev Michael Greisman
źródło

Chodzi o #after_buildto, że według mojej najlepszej wiedzy bzdury i powinny zostać po prostu usunięte. (Istnieje podobny komentarz do odpowiedzi dostarczającej #after_buildrozwiązanie) Myślę, że to samo w sobie wyjaśnia, dlaczego moja krótka odpowiedź jest dobra. Jeśli po prostu spojrzysz na link, który podałem, znajdziesz ten sam kod, ale bez zbędnych elementów.

— Letharion

0

W przypadku Drupala 8 radzę zajrzeć do tego artykułu

libraries.yml

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

.moduł

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

— Chris Happy
źródło