AngularJSでfullPage.jsを使う

概要

AngularJS から fullPage.js を使う場合の備忘録．

angular-fullpage.js はあるが，npm で配布されているバージョンはイベントハンドラが動いていないので，
GitHub にある最新版を利用する．

また，fullPage.js は各セクションが兄弟ノードにあることを期待しているが，
コンポーネントの関係によっては全てのセクションを兄弟ノードに集めることが難しい場合もある．
その場合は，修正した fullPage.js を使う．

angular-fullpage.js

AngularJS 用に fullPage.js のディレクティブを提供してくれるライブラリ．
ただし，npm に登録されているものは少し古いバージョンなので，
GitHub からインストールする様に package.json を編集する．

package.json

{
  "dependencies": {
    "angular-fullpage.js": "hellsan631/angular-fullpage.js",
    ...
  },
  ...
}

dependencies に上記を追加して，npm install すれば良い．（参考：node.jsのnpm（package.json）にGitHubを指定する：更新の止まったモジュールを勝手に改修して使う）

利用方法は，fullPage.js を適用したい要素に full-page 属性を付ける．

<div full-page>
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  …
</div>

また，オプションは options 属性経由で渡す．
例えば，コントローラを次の様にしておいて，

controller.js

class FullpageCtrl {

  constructor() {

    this.options = {
      sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
      scrollingSpeed: 1000,
      onLeave: (index, nextIndex, direction) => {
        // 何らかの処理
      }
    };

  }

}

テンプレートを

template.html

<div full-page options="$ctrl.options">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  ...
</div>

とすれば良い．

兄弟関係にないセクションに fullPage.js を適用

fullPage.js は次の例の様に，各セクションが兄弟関係にあることを仮定している．

<div full-page>
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  ...
</div>

この仕様は，セクションを定義する複数のコンポーネントを組み合わせる場合問題になる．
（そうならない様に設計するべきかも知れないが）

例えば， component1, component2 のテンプレートがそれぞれ，

component1.html

<div class="section" ng-repeat="item in $ctrl.items">
   <!—- item を使った内容 -—>
</div>

component2.html

<div class="section" ng-repeat="item in $ctrl.items">
   <!—- item を使った別の内容 -—>
</div>

となっていて，これらを合わせたコンポーネント parent が fullPage.js を使いたい場合，
テンプレートは次の様になると思う．

parent.html

<div full-page>
  <component1></component1>
  <component2></component2>
</div>

これは展開されると，

<div full-page>
  <component1>
    <div class="section">
     <!—- item を使った内容 -->
    </div>
    <div class="section">
     <!—- item を使った内容 -—>
    </div>
    ...
  </component1>
  <component2>
    <div class="section">
     <!—- item を使った別の内容 -->
    </div>
    <div class="section">
     <!—- item を使った別の内容 -->
    </div>
    ...
  </component2>
</div>

の様になる．
各セクションが兄弟関係になっていないので，fullPage.js は期待通り動作しない．

この問題を解決する修正版を作ったので，必要であればこちらを使う．
package.json に GitHub のブランチを次の様に指定して npm install すれば良い．

package.json

{
  "dependencies": {
    "fullpage.js": "jkawamoto/fullPage.js#deeper-section-spike",
    ...
  },
  ...
}

なお，兄弟ノード以外も探索しているため本家に比べて多少重くなっているかも知れない．