LoginSignup
2
1

More than 5 years have passed since last update.

【a-blog cms】acms.js+組み込みJSの実行後に処理が書ける隠しイベントハンドラがあった

Last updated at Posted at 2016-09-06

株式会社データファームのtakneoriです。

a-blog cmsのテンプレートで読み込む事が、(ほぼ)必須のacms.jsですが、
実行タイミングが非同期だったり、acms.js自体のドキュメントが少なかったりと、
けっこうややこしいです。。

一番、悩ましいのが
acms.js+組み込みJSを実行した後のタイミングに、処理を書きたい場合です。
現在(2016/09/06)のところ、公式には詳しいドキュメントはないようです。。

しかし、じつはあった隠しイベントハンドラ!

ところが、じつはacms.jsには、そのような処理を設定できるイベントハンドラが存在していたようです。(!?)
a-blog cmsの公式フォーラムで、
私が得た情報・みつけた情報をここにまとめておきます。

acmsDispatchイベントハンドラ

acms.js+組み込みJSを実行した後に処理をしたい場合、
acmsDispatchイベントハンドラに処理を追加します。

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

引用元:組み込みJS(bxslider)のライブラリ依存CSSを読み込まないようにしたい - a-blog cms公式フォーラム

上記例では、
acms.jsが組み込みJSのために読み込んだbxslider.cssを、
linkタグごと消去しています。

acmsAddCustomFieldGroupイベント

カスタムフィールドグループを動的に追加した後に
処理をしたい場合は、acmsAddCustomFieldGroupイベントハンドラに処理を追加します。

たとえば、下記画像のような場合です。

スクショ.jpg

この場合、下記のソースのように、
フィールドを追加した後 js-datepickerをもう一度実行する事で解決ができました。

ACMS.addListener("acmsAddCustomFieldGroup",function(item){
    $(".js-datepicker").removeClass("hasDatepicker");
    $(".js-datepicker").each(function(i){
        var id = $(this).attr("id");
        $(this).attr("id",id+i);
        $(this).datepicker(ACMS.Config.dpicConfig);
    });
});

引用元:(ver 2.6.0.2) カスタムフィールドグループに、動的にjs-datepickerを反映させるには - a-blog cms公式フォーラム

おわりに

これで、かゆい所に手が届きますね!

現在、フォーラムを見る限り2つまでイベントハンドラが見つかっていますが、
他にもあるかもしれません。

公式ドキュメントの充実も期待したいですね。
また、acms.jsについては次期バージョンで、かなりの改善がされるとの噂ですので
個人的にはそちらにも期待したいです。

それでは!

(こちらの記事は、2016/09/06の情報です)

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1