h5.ui.jqm.manager JQMのpageshow/pagehide相当のイベントをhifiveでディスパッチする

[mtakeuchi]

Aページ表示後、Bページに遷移するパターンでトランジションありで遷移した場合、Bにdefineしたコントローラでpageshow/pagehideを拾うことができるが、トランジション無しで遷移すると、Bにdefineしたコントローラでpageshowやpagehideを拾うことができない。
ページの生成・破棄のタイミングはhifiveのライフサイクルイベントで知ることができるが、ページの表示・非表示のタイミングは知ることができないため、コントローラが有効または無効になったときにJQMマネージャでpageshow/pagehide相当のイベントを起こすようにする。

hifiveのイベントとJQMのイベントの発生タイミング

JQM ver.1.2.0 id:要素 type:イベント名

• A -> B トランジションあり
  id:BODY type:pagebeforechange
  id:BODY type:pagebeforeload
  id:B type:pagebeforecreate
  id:B type:pagecreate
  id:B type:pageinit
  id:BODY type:pageload
  id:BODY type:pagebeforechange
  id:A type:pagebeforehide
  id:B type:pagebeforeshow
  id:B type:h5controllerbound
  B __ready
  id:B type:h5controllerready
  id:A type:pagehide
  id:B type:pageshow
  id:BODY type:pagechange
• A -> B トランジションなし
  id:BODY type:pagebeforechange
  id:BODY type:pagebeforeload
  id:B type:pagebeforecreate
  id:B type:pagecreate
  id:B type:pageinit
  id:BODY type:pageload
  id:BODY type:pagebeforechange
  id:A type:pagebeforehide
  id:B type:pagebeforeshow
  id:A type:pagehide
  id:B type:pageshow
  id:BODY type:pagechange
  id:B type:h5controllerbound
  B __ready
  id:B type:h5controllerready

[mtakeuchi]

A -> B遷移後、 B -> A に戻った場合

• A -> B 表示後、B -> A にトランジションありで戻る
  id:BODY type:pagebeforechange
  id:B type:pagebeforehide
  id:A type:pagebeforeshow
  id:B type:pagehide
  id:B type:pageremove
  id:B type:h5controllerunbound
  id:A type:pageshow
  id:BODY type:pagechange
• B -> A にトランジションなしで戻る
  id:BODY type:pagebeforechange
  id:B type:pagebeforehide
  id:A type:pagebeforeshow
  id:B type:pagehide
  id:B type:pageremove
  id:B type:h5controllerunbound
  id:A type:pageshow
  id:BODY type:pagechange

戻った場合はトランジションの有無で違いなし。

[mtakeuchi]

A -> B -> C

id:BODY type:pagebeforechange
id:BODY type:pagebeforeload
id:C type:pagebeforecreate
id:C type:pagecreate
id:C type:pageinit
id:BODY type:pageload
id:BODY type:pagebeforechange
id:B type:pagebeforehide
id:C type:pagebeforeshow
id:C type:h5controllerbound
id:C __ready
id:C type:h5controllerready
id:B type:pagehide
id:B type:pageremove
id:B type:h5controllerunbound
id:C type:pageshow
id:BODY type:pagechange

[mtakeuchi]

h5jqmpageshowとh5jqmpagehideの発生順序 (仮

• 『Aを初期表示』
  A - __ready
  A - h5jqmpageshow
• 『A -> B』 に遷移
  A - h5jqmpagehide
  B - __ready
  B - h5jqmpageshow
• A -> B 遷移後、『B -> C』 に遷移]
  B - h5jqmpagehide
  C - __ready
  B - __dispose
  C - h5jqmpageshow
• A -> B 遷移後、 『B -> A』 に遷移
  B - h5jqmpagehide
  B - __dispose
  A - h5jqmpageshow

[mtakeuchi]

h5jqmpageshowとh5jqmpagehideの発生順序 (トランジションにアニメーションが適用されている場合

h5jqmpageshow = JQMのpageshowとほぼ同じタイミングで発生
h5jqmpagehide = JQMのpagehideとほぼ同じタイミングで発生

• 『Aを初期表示』
  A - __ready
  A - h5jqmpageshow
• 『A -> B』 に遷移
  B - __ready
  A - h5jqmpagehide
  B - h5jqmpageshow
• A -> B 遷移後、『B -> C』 に遷移]
  C - __ready
  B - h5jqmpagehide
  B - __dispose
  C - h5jqmpageshow
• A -> B 遷移後、 『B -> A』 に遷移
  B - h5jqmpagehide
  B - __dispose
  A - h5jqmpageshow

[mtakeuchi]

h5jqmpageshowとh5jqmpagehideの発生順序 (トランジションにアニメーションが適用されていない場合

h5jqmpageshow = JQMのpageshowとほぼ同じタイミングで発生
(初期表示時は、JQMコントローラがreadyになるよりも前にpageshowが発火してしまうため、h5controllerready後に発生する)
h5jqmpagehide = JQMのpagehideとほぼ同じタイミングで発生

• 『Aを初期表示』
  A - __ready
  A - h5jqmpageshow
• 『A -> B』 に遷移
  A - h5jqmpagehide
  B - __ready
  B - h5jqmpageshow
• A -> B 遷移後、『B -> C』 に遷移
  B - h5jqmpagehide
  B - __dispose
  C - __ready
  C - h5jqmpageshow
• A -> B 遷移後、 『B -> A』 に遷移
  B - h5jqmpagehide
  B - __dispose
  A - h5jqmpageshow

[mtakeuchi]

pageshowがJQMコントローラのバインドよりも早く実行されたときの挙動

1. h5jqmpageshowイベントは、__readyの完了(h5controllerreadyが発火)を待ってから1回だけ実行する。
   (Aのコントローラの__readyでPromiseが返され、__readyの処理が完了しないうちにA->B->Aと遷移した場合でも、Aのh5jqmpageshowは1回だけ実行される)
2. 1.以降は、JQMのpageshowと同じタイミングでh5jqmpageshowを実行する。

なお、アクティブページでのみh5jqmpageshow/hideは実行される。