web-dev-qa-db-ja.com

コンテンツタイプ編集フォームにカスタムモジュールJavaScriptをロードするにはどうすればよいですか？

コンテンツタイプの管理者編集フォームにjQueryをロードしようとしています。

これを実現するために、次のディレクトリ構造を持つモジュール「exclusivetabs」を開発しました。

|-- exclusivetabs
    |-- exclusive_tabs.info.yml
    |-- exclusive_tabs.libraries.yml
    |-- exclusive_tabs.module
    |-- js
        |-- cse_banner_header.js

関連ファイルの内容は次のとおりです。

exclusive_tabs.libraries.yml

exclusive_tabs:
  version: 1.x
  js:
    js/cse_banner_header.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

exclusive_tabs.module

<?php

/**
 * Implements hook_form_alter().
 */
function exclusive_tabs_form_node_form_alter(&$form, &$form_state, $form_id) {
  /* @var Drupal\Core\Entity\FieldableEntityInterface $node */
  $node = $form_state->getFormObject()->getEntity();

  if ($node->getType() == 'unit_landing_page') {
   /* var_dump($node);*/
    $form['#attached']['library'][] = 'exclusive_tabs/cse_banner_header';
  }
}

cse_banner_header.js

(function($, Drupal) {

/* Add span to wysiwyg button classes for alignment
------------------------------------ */
Drupal.behaviors.calloutControl = {
        attach: function (context, settings) {
                console.log("I'm loaded!");
                $('#callout-link-options .single-link').click(function () {
                        $('input[type="checkbox"]').attr('checked', true);
                        console.log("I'm checked!");
                });
                $('#callout-link-options .multi-link').click(function () {
                        $('input[type="checkbox"]').attr('checked', false);
                        console.log("I'm unchecked!");
                });
        }
};

})(jQuery, Drupal);

モジュールは、意図したとおりに特定のコンテンツタイプの編集フォームに読み込まれます。私の問題は、jQueryをcse_banner_header.jsファイルからロードする方法を理解していないことです。また、ブラウザーで実行中のスクリプトを確認したところ、jsファイルがページに読み込まれていません。

何が欠けていますか？ jsファイルをページに読み込むにはどうすればよいですか？

8themingnodesjavascripthooks
3
lane

この行を変更する必要があります：

$form['#attached']['library'][] = 'exclusive_tabs/cse_banner_header';

に：

$form['#attached']['library'][] = 'exclusive_tabs/exclusive_tabs';

ライブラリ名はexclusive_tabsでありcse_banner_headerではないため、正しい方法は 'your_module/library_name'チェック Drupal 8 module にスタイルシート（CSS）とJavaScript（JS）を追加します。

5
Adrian Cid Almaguer