Page Comparison

LoaderEvents 概要

Yellowfin 9.4では、「loaderEvents」APIを通して、JavaScript APIにカスタマイズされたローダーを追加するオプションを有効にしました。

これにより、開発者はYellowfin要素内の要素にローダーが追加、または削除されているインスタンスをリッスンし、そのイベントに応答することができます。

以下のように、実行できる様々なアクションがあります。

• Yellowfin ローダーが追加されるのを防ぎ、同じ要素にカスタムローダーを追加します。
• 異なる関連する要素にローダーを添付します。
• ローダーの追加や削除をログに記録します（開発段階で役に立ちます）。

例えば、Yellowfinをホワイトラベル化して使用している企業は、Yellowfinのデフォルト設定である青い丸ではなく、独自のブランドに対応したローダーアイコンを使用したいと考えるかもしれません。

注意：LoaderEvents APIの性質により、固有のプロパティや関連するイベントはありません。

関数リファレンス

yellowfin.loaderEvents

Yellowfin API init()の呼び出しが完了したら、yellowfin.loaderEvents関数が利用できるようになります。これは、listenとstopListeningの2つの関数を提供し、必要に応じてローダーイベントを設定、または削除することができます。

listen(listenObject)

これは、渡されたlistenObject オブジェクトを使用して、ローダーイベントリスナーを作成します。

listenObject オブジェクトには、次のパラメーターが含まれます。

stopListening(listenObject)

ローダーイベントを削除します。渡されるlistenObjectは、listen関数に渡されたオブジェクトとまったく同じでなくてはならず、これが異なる場合、リスナーは削除されません。

LoaderEvent

onAdd、またはonRemove関数が呼び出される度に、LoaderEvent オブジェクトが作成されます。これには、ローダーが追加される要素と、イベントの処理方法を操作できるいくつかの関数が含まれます。

LoaderEvent.element

これはローダーが追加、または削除される要素です。

LoaderEvent.preventDefault()

このイベントは、ローダーが要素に追加、または要素から削除されるのを防ぎます。

例えば、イベントリスナーを以下のように初期化できます。

yellowfin.loaderEvents.listen({
 
    selector: ‘html *’,
 
    onAdd: function(event) {
 
        event.preventDefault();
 
    }
 
});

これにより、Yellowfin 要素にローダーは追加されません。これ単独では特に役に立ちませんが、独自にカスタマイズしたローダーを追加するコードと、preventDefaultを組み合わせることができます。

デフォルトを回避するonRemove関数のみを含むイベントリスナーを作成すると、次のようになります。

yellowfin.loaderEvents.listen({
 
    selector: ‘html *’,
 
    onRemove: function(event) {
 
        event.preventDefault();
 
    }
 
});

これにより、要素からローダーが削除されるの防ぎます。そのため通常は、onRemove関数でローダーの削除を自分で処理する場合にのみ、削除時にpreventDefaultを使用してください。

LoaderEvent.setOverrideElement(element)

LoaderEvent オブジェクトに渡された要素ではなく、標準的なYellowfin ローダーを追加する要素を定義します。

これにより、標準的なYellowfin ローダーを親要素上に置くことができます。この関数を使用する場合は、onAdd、およびonRemove関数の両方でsetOverrideElementを定義しなくてはいけません。

yellowfin.loaderEvents.listen({
 
    selector: ‘report-output > div’, //Listen for loaders on immediate children of all reports
 
    onAdd: function(event) {
 
        event.setOverrideElement(event.element.parentNode); //Adds a loader to the parent node of the passed element
 
    }, 
 
    onRemove: function(event) {
 
        event.setOverrideElement(event.element.parentNode); //Removes the loader from the parent node
 
    }
 
});