Framework7のプラグインAPI

Framework7には、独自のFramework7プラグインやエクステンションを作成することができるシンプルなプラグイン/エクステンションAPIが用意されています。

これは、拡張可能なクラスに基づいています。Framework7で使用されているすべてのJavaScriptクラス（コンポーネント）は、拡張可能です。

プラグインの構造

まず最初に、基本的なプラグインのJS構造を見てみましょう。基本的にはオブジェクトになっています。

var myPlugin = {
  // モジュール名
  name: 'demo-module',
  /* Install callback
  It will be executed right after component is installed
  Context of this callback points to Class where it was installed
  */
  install() {
    const Class = this;
    console.log(Class);
  },
  /* Create callback
  It will be executed in the very beginning of class initilization (when we create new instance of the class)
  */
  create(instance) {
    console.log('init', instance);
  },
  /*
  Object with default class/plugin parameters
  */
  params: {
    myPlugin: {
      a: 1,
      b: 2,
      c: 3,
    }
  },
  /* proto object extends Class prototype */
  proto: {
    demo() {
      return 'demo-module-proto-method';
    },
    demoStatic: 'demo-module-proto-static',
  },
  // 静的なプロップとメソッドを持つクラスを拡張する、例えばClass.myMethod
  static: {
    demo() {
      return 'demo-module-class-method';
    },
    demoStatic: 'demo-module-class-static',
  },
  /* Initialized instance Props & Methods */
  instance: {
    demoProp: true,
    demoMethod() {
      return 'demo-method';
    },
  },
  /* Event handlers */
  on: {
    demoEvent(a, b) {
      console.log('demo-event', a, b);
    },
  },
  /* Handle clicks */
  clicks: {
    // プロップ名は、クリックハンドラを追加する要素のCSSセレクタを意味する
    'p': function ($clickedEl, data) {
      // clickedEl: クリックされた要素のDom7インスタンス
      // data: 要素のデータセット(データ-属性)
    },
  }
};

プラグインのインストール

プラグインを作成したら、それを必要なクラスにインストールする必要があります。プラグインをインストールするには、クラスの .use() メソッドを呼び出す必要があります。例えば、これがCommon Framework7のプラグインの場合。

Framework7.use(myPlugin);

プラグインはクラスの初期化前（new Framework7()を呼び出す前）にインストールする必要があります。

デモプラグイン

簡単なデバッグのデモプラグインを作ってみましょう。このプラグインは何もせず、いくつかのイベントを記録するだけです。

/* framework7.debug.js */

var debugEnabled = false;

window.debugPlugin = {
  name: 'debugger',
  // アプリのパラメータをデバッガのパラメータで拡張
  params: {
    debugger: false,
  },
  create: function () {
    var app = this;
    // アプリのインスタンスが生成されたときに、アプリのメソッドをデバッガのメソッドで拡張する
    app.debugger = {
      enable: function () {
        debugEnabled = true;
      },
      disable: function () {
        debugEnabled = false;
      },
    }
  },
  on: {
    init: function () {
      var app = this;
      if (app.params.debugger) debugEnabled = true;
      if(debugEnabled) console.log('app init');
    },
    pageBeforeIn: function (page) {
      if(debugEnabled) console.log('pageBeforeIn', page);
    },
    pageAfterIn: function (page) {
      if(debugEnabled) console.log('pageAfterIn', page);
    },
    pageBeforeOut: function (page) {
      if(debugEnabled) console.log('pageBeforeOut', page);
    },
    pageAfterOut: function (page) {
      if(debugEnabled) console.log('pageAfterOut', page);
    },
    pageInit: function (page) {
      if(debugEnabled) console.log('pageInit', page);
    },
    pageBeforeRemove: function (page) {
      if(debugEnabled) console.log('pageBeforeRemove', page);
    },
  }
}

このプラグインをアプリにインクルードする必要があります。

<body>
    ...
    <script src="path/to/framework7.js"></script>
    <script src="path/to/framework7.debug.js"></script>
    <script src="path/to/myapp.js"></script>
</body>

/* myapp.js */

// まずプラグインをインストールします。
Framework7.use(debugPlugin);

// アプリの初期化
var app = new Framework7({
  //デバッガを有効にする
  debugger: true,
});

/*
  we can later disable it by calling
  app.debugger.disable();
*/