組み込みJSのイベントハンドラ

イベントハンドラを設定する事で、ある特定のJavaScriptのイベント（クリックイベントなど）が発生した時に処理を挟み込めます。a-blog cmsでは組み込みJSが実行したイベントの後に処理を実行できるようにするため、いくつかのイベントハンドラを用意しています。

a-blog cms が用意しているイベントは ACMS.addListener を利用することでイベントに対してリスナーを登録することができます。

ACMS.addListener('eventName', function (event) {
  console.log(event);
});

また、event オブジェクトの detail プロパティにアクセスすることでイベント独自のカスタムデータを参照することができます。

ACMS.addListener('eventName', function (event) {
  console.log(event.detail); // or console.log(event.obj)
});

acmsReady

組み込みJSの実行が出来る段階で発火するイベント。js/config.js などをカスタマイズする時は、このイベントが発火してから設定を行う。またよく使うイベントなのでエイリアスが用意されている ACMS.Ready(function() {});

ACMS.Ready(function() {
  ACMS.Config.postIncludeEffect = 'fade';
});

// 以下でも同じです。
ACMS.addListener('acmsReady', function() {
  ACMS.Config.postIncludeEffect = 'fade';
});

acmsAdminReady

管理画面用の組み込みJSが実行出来る段階で発火するイベント。

ACMS.addListener("acmsAdminReady", function() {
});

acmsDispatch

組み込みJSのディスパッチ処理が終わった時のイベントハンドラ。正確には、ACMS.Dispatch()の処理が終わった後に実行される処理を記述できます。以下の例では、組み込みJSの処理が終わった段階で、bxsliderのCSSを読み込んでいるlinkタグを削除しています。

ACMS.addListener("acmsDispatch", function() {
    $("[href*=bxslider]").remove();
});

acmsAddUnit

エントリーの編集画面にてユニットが追加された時のイベントハンドラ。カスタムユニットでJavaScriptを利用したい場合などに利用します。

ACMS.addListener("acmsAddUnit", function(e) {
   console.log(e.target); // ユニットの dom が入っています。
});

acmsAfterPostInclude

PostIncludeで動的にHTMLが読み込まれた後に実行されるイベントハンドラ。webフォントや、配置を揃えるJSなどの利用が考えられます。

ACMS.addListener("acmsAfterPostInclude",function(){
   //ここに処理が入ります。
});

acmsAddCustomFieldGroup

カスタムフィールドグループで項目が追加された時のイベントハンドラ。以下の例では、カスタムフィールドグループで項目が追加された時、その項目に対して、DatepickerのJSが動くようにしています。

ACMS.addListener("acmsAddCustomFieldGroup",function(e)　{
    console.log(e.target); // カスタムフィールドグループの dom が入っています。
});

acmsDialogOpened

モジュールID編集用ダイアログや、ブログ編集用ダイアログなどのダイアログウィンドウが表示されるタイミングで発火するイベントです。

ACMS.addListener("acmsDialogOpened", function() {

});

acmsAdminSelectTab

管理画面で使われているタブパネルが切り替わったタイミングで発火するイベントです。

ACMS.addListener("acmsAdminSelectTab", function() {

});

acmsValidateFailed

フォームのsubmitボタンを押した時に組み込みJSによるバリデーションに失敗したタイミングで発生するイベントです。

ACMS.addListener("acmsValidateFailed", function(event) {
  console.log(event.detail); // バリデーション結果を取得できます。
});

acmsFormInvalid

「組み込みJSによるバリデーション」に失敗したタイミングで発生するイベントです。

ACMS.addListener("acmsFormInvalid", function(event) {
  console.log(event.detail); // バリデーション結果を取得できます。
});

acmsFormValid

「組み込みJSによるバリデーション」に成功したタイミングで発生するイベントです。

ACMS.addListener("acmsFormInvalid", function(event) {
  console.log(event.detail); // バリデーション結果を取得できます。
});

acmsFormValidated

「組み込みJSによるバリデーション」によるバリデーションが行われたタイミングで発生するイベントです。

ACMS.addListener("acmsFormValidated", function(event) {
  console.log(event.detail); // バリデーション結果を取得できます。
});

acmsAdminDelayedContents

ダイアログや、タブなど後から表示されるコンテンツが表示されるタイミングで発火するイベントです。

ACMS.addListener("acmsAdminDelayedContents", function() {

});

acmsLazyLoaded

組み込みJSの「遅延読み込み」により要素の遅延読み込みが完了したタイミングで発火するイベントです。

ACMS.addListener("acmsLazyLoaded", function() {

});

オリジナルのイベントハンドラを用意する

また、独自にイベントハンドラを用意することも可能です。以下のように、ACMS.dispatchEventでイベントを発行します。

//イベントの発行
ACMS.dispatchEvent("イベントハンドラ名");
ACMS.dispatchEvent("イベントハンドラ名", dom, detail, options);

第１引数（必須）: イベントハンドラ名
第２引数（オプション）: リスナーでイベントが発行されたdomを取得できます。
第３引数（オプション）: 任意のオブジェクトをリスナーで取得できます。

//ハンドラの実行
ACMS.addListener("イベントハンドラ名", function(event) {
    // dispatchEventで渡した dom が取得できます。指定していない場合は、window.document が入っています。
    console.log(event.target); 
    
    // dispatchEventで渡した detail が取得できます。
    console.log(event.detail); // or console.log(event.obj);
});