Collapsible Drag 'n Drop
Drupalのドラッグ可能なテーブルに折りたたみ・展開機能を追加し、メニューなどの大規模な階層構造の管理を容易にします。
collapsible_dnd
インストール
composer require 'drupal/collapsible_dnd:^3.0'
composer require 'drupal/collapsible_dnd:8.x-2.1'
概要
Collapsible Drag 'n Dropは、Drupal組み込みのドラッグ可能なテーブル機能を強化し、階層的なサブツリーの折りたたみと展開機能を追加します。これにより、大規模なメニュー構造や深いネストを持つドラッグ可能なテーブルで整理されたコンテンツを管理する際の重大なユーザビリティの問題を解決します。
Drupalのメニューシステムで作業する際、メニューが大きくなるにつれて、アイテムをドラッグして並べ替えたり階層を変更したりすることが難しくなります。親アイテムに多くの子がある場合、サブツリーが画面の高さを簡単に超えてしまい、ドラッグ操作が面倒になったり、ほぼ不可能になったりします。このモジュールは、子を持つ各行に折りたたみ/展開ボタンを追加し、管理者がドラッグ操作中にサブツリーを一時的に非表示にできるようにします。
このモジュールは、メニューだけでなく、Drupalの管理インターフェースにあるすべてのドラッグ可能なテーブルで自動的に動作します。DrupalのCore tabledragライブラリの依存関係として自身をアタッチするため、追加の設定は不要です - モジュールをインストールするだけで、ドラッグ可能なテーブルが使用されている場所ですぐに機能が利用可能になります。
Features
- ドラッグ可能なテーブルの子を持つ行に折りたたみ/展開トグルボタンを追加
- 親行が折りたたまれると子アイテムを自動的に非表示にし、ドラッグ操作を容易に
- よりすっきりした初期表示のため、デフォルトですべての階層を折りたたんだ状態で開始
- ドラッグ操作完了後に親子関係を動的に再計算
- メニュー管理、Taxonomy用語の並べ替え、カスタム実装など、Drupalのすべてのドラッグ可能なテーブルで動作
- SevenおよびClaro管理テーマ用の特定の調整を含むテーマ対応スタイリング
- MutationObserverを使用してアイテムのドラッグ＆ドロップを検出し、折りたたみ状態を適切に更新
- 折りたたまれた親にドロップされたアイテムをフェードアニメーションでスムーズに非表示
Use Cases
大規模なナビゲーションメニューの管理
サイトに多くのネストされたアイテムを持つ複雑なメニュー構造（例：複数のレベルを持つメガメニュー）がある場合、展開されたメニューが画面より長くなる可能性があるため、メニューアイテムをドラッグして並べ替えることが非常に困難になります。このモジュールを使用すると、親メニューアイテムを折りたたんで子を一時的に非表示にでき、親を新しい位置にドラッグしたり、同じレベルのアイテムを並べ替えたりすることが簡単になります。
深い階層を持つTaxonomy用語の整理
多くのレベルのネストされた用語を持つTaxonomyボキャブラリを使用するサイトは、用語を並べ替える際に同様の課題に直面します。このモジュールを使用すると、階層のセクションを折りたたむことができ、数百の用語があってもドラッグ＆ドロップインターフェースを管理しやすくなります。
エンティティ参照フィールドの並べ替え作業
一部のDrupal設定では、参照されたエンティティの並べ替えにドラッグ可能なテーブルを使用します。これらの参照に階層関係がある場合、このモジュールはサブツリーの折りたたみを可能にすることで、並べ替えインターフェースをより使いやすくします。
カスタムのドラッグ可能なテーブル実装
Drupalのtabledragライブラリを使用してドラッグ可能なテーブルを実装するカスタムモジュールがある場合、このモジュールは追加のコード変更なしに自動的に折りたたみ/展開機能で強化します。
Tips
- すべてのアイテムはデフォルトで折りたたまれた状態で開始され、よりすっきりした初期表示になります - 必要に応じて矢印アイコンをクリックしてセクションを展開してください
- アイテムをドラッグした後、モジュールは自動的にどのアイテムに子があるかを再計算し、折りたたみボタンを適切に更新します
- 非常に大きな階層で作業している場合は、作業していないアイテムを折りたたんでインターフェースを管理しやすく保ちましょう
- モジュールはアイテムの折りたたみと展開時にスムーズな視覚的フィードバックのためにCSSトランジションを使用します
Technical Details
Hooks 3
hook_library_info_alter
collapsible_dndライブラリをDrupal Coreのdrupal.tabledragライブラリの依存関係としてアタッチするために使用され、ドラッグ可能なテーブルが使用されている場所で折りたたみ/展開機能が自動的に利用可能になります。
hook_preprocess_html
アクティブな管理テーマを示すCSSクラス（例：'theme-claro'、'theme-seven'）をbody要素に追加し、折りたたみ/展開ボタンのテーマ固有のスタイリングを可能にします。
hook_help
モジュールのヘルプページを実装し、README.mdの内容をプレーンテキストとして、またはMarkdownモジュールが利用可能な場合はレンダリングして表示します。
Troubleshooting 3
モジュールが有効になっていることを確認し、DrupalのCacheをクリアしてください。モジュールはそのライブラリをCoreのtabledragにアタッチするため、依存関係を有効にするにはCacheのクリアが必要な場合があります。
モジュールにはSevenとClaroテーマ用の特定のスタイルが含まれています。カスタム管理テーマの場合、CSSオーバーライドを追加する必要があるかもしれません。モジュールはbody要素に'theme-[テーマ名]'のようなクラスを追加するので、これをターゲットに使用できます。
これは期待される動作です - 折りたたまれた親にアイテムをドロップすると、他の折りたたまれた子と一緒に非表示になります。親を展開して、新しい位置のアイテムを確認してください。