実現したいこと
レコード詳細画面で、特定のスペースフィールドが含まれているグループフィールドが開かれたこと（および閉じられたこと）をカスタマイズ上で検知して処理を実行したいです。
目的・背景
スペースの子要素にcanvas要素を追加することでWebGLを使用したコンテンツを描画するカスタマイズを作成しまして、現在は正しく動作しています。次に、グループの中にスペースを入れることで、コンテンツをグループ内に隠したり、表示されるまでコンテンツの読み込みを待つようにしたいと考えています。そこでフォームの設定でスペースをグループに入れたところ以下の点でつまづきました。
- スペース要素の縦幅・横幅をoffsetHeightおよびoffsetWidthプロパティから正しく読み出せません（0が返ってきます）。これはcanvasをスペースと同じ大きさで描画するために使用しており、グループに入っていない時は正しい値（幅のピクセル数）を返します。
- スペースが表示された（＝グループが開かれた）タイミングが分からないため、コンテンツの読み込みを待つことができません。
APIドキュメントを読みましたが、グループの開閉を検知するイベントはないようでした。一方、グループが開かれた後はoffsetHeight・offsetWidthプロパティが正しい値を返すので、グループ開閉の検知ができれば上記2つの目的が実現できると考えています。
試したこと
スペースフィールド要素の取得と幅の取得は下記のコードで行っています。閉じているグループ要素のスタイルはdisplay: noneになっており、それによりoffsetHeight・offsetWidthプロパティが0を返す仕様であることは承知です。
kintone.events.on('app.record.detail.show', function(event) {
var spaceEl = kintone.app.record.getSpaceElement('space-in-group');
var height = spaceEl.offsetHeight;
var width = spaceEl.offsetWidth;
// 以下canvas生成等の処理
});
以上、実現する方法はございますでしょうか。ご回答、アドバイス等いただければ幸いです。
1件のコメント
somakiさん
こんにちは。
要素の変化は、MutationObserverで監視できます。
グループの要素は、class「control-group-field-gaia」を持っていますので、これを取得します。
グループが複数ある場合は、監視対象によって添え字[0]が変わります。
MutationObserverは、何を監視するかをオプションで指定できます。
グループは、開くと「control-group-gaia-expanded」、閉じると「control-group-gaia-collapsed」がclassに追加されます。
そのため、classの変化を監視するために、 下記「const config」の通りオプションを指定します。
classの変化を検知すると、下記「const observer」内の処理が走ります。
ここでclassにどちらを含むかで開閉状態を判別できます。
(function() {
'use strict';
kintone.events.on('app.record.detail.show', function(event) {
// グループフィールドの要素
const target = document.getElementsByClassName('control-group-field-gaia')[0];
// ノードに変化があれば実行
const observer = new MutationObserver(function() {
if (target.className.indexOf('control-group-gaia-expanded') != -1) {
alert('開きました');
} else {
alert('閉じました');
}
});
const config = {
attributes: true,
attributeFilter: ['class'] // classの変化を監視
};
observer.observe(target, config); // 監視開始
});
})();