6

問題

LiveView は、開いている要素を折りたたみます。

詳細

ページの読み込み時に折りたたまれて始まる要素があります。

<a class="collapse_trigger">...</a>
<div class="is-collapsible">
# content updated by liveview
</div>

ユーザーが折りたたみ可能オブジェクトをクリックすると、折りたたみ可能オブジェクトにはクラスがあり.is-activeます。

<a class="collapse_trigger">...</a>
<div class="is-collapsible is-active">
# content
</div>

しかし、ライブビューはそのクラスを削除します。ライブビューが親要素を無視する<div class="is-collapsible is-active">が、子要素を処理することを確認する方法はありますか? 私の最初の考えはでしたphx-update="ignore"。しかし今、折りたたみ可能なロジックをバックエンドに入れる必要があると考えています。:/

追加情報

CSS を 1 つ変更してbulma-collapsibleを使用します。

// the following is necessary because liveview does not work well with the bulma-collapsible. Otherwise elements would stay open but can be closed by clicking them twice.
.is-collapsible{
  height: 0;
  &.is-active{
    height: auto;
  }
}
4

3 に答える 3

0

@zhisme からの回答に基づいて、実用的なソリューションを作成しました。唯一の要件は、折りたたみ可能なものに ID があることです。

function initCollapsibles() {
  const bulmaCollapsibleInstances = bulmaCollapsible.attach('.is-collapsible');
  bulmaCollapsibleInstances.forEach(bulmaCollapsibleInstance => {
    const key = 'collapsible_' + bulmaCollapsibleInstance.element.id;
    // some id's from other pages might leak over if we don't clean the localstorage on page load
    localStorage.removeItem(key)

    bulmaCollapsibleInstance.on('before:expand', (e) => {
      localStorage.setItem(key, true)
    })

    bulmaCollapsibleInstance.on('after:collapse', (e) => {
      localStorage.removeItem(key)
    })
  });
}

function restoreCollapsiblesState() {
  const collapsibles = Array.prototype.slice.call(document.querySelectorAll('.is-collapsible'), 0);
  collapsibles.forEach(el => {
    if (localStorage.getItem('collapsible_' + el.id)) {
      // I'd love to call the collapsible open method, but haven't figured out how to get that instance without creating a new one or storing it to the window globally.
      el.classList.add('is-active')
    }
  });
}

document.addEventListener('phx:update', restoreCollapsiblesState);
document.addEventListener('DOMContentLoaded', initCollapsibles);
于 2021-02-21T13:32:11.943 に答える