Toggle `details` elements

[CraigClark]

OP timer

https://openplus.monday.com/boards/4092908516/pulses/6021661632

---

There is a feature we are using on the data dictionary in the data catalogue that expands and collapses a bunch of <details> elements.

Right now it is specific.

this should be made generic and be put into the base-build.

the idea is that an author would add a class, say details-toggle to a wrapper around a bunch of details elements and it just works.

The JS needed for this is already written https://github.com/bcgov/MFIN-Data-Catalogue/blob/1.0.x/html/themes/custom/dc_theme/js/mr.js

After this is done, do https://github.com/bcgov/MFIN-Data-Catalogue/issues/356

[CraigClark]

This is working for the data dictionary. but I can't attach it to a view

@lkmorlan , is the JS attached to everything, or just MR content type?

I tried applying it to this view /admin/structure/views/view/dependency_report. and it failed. What I did was:

1. in the view header, add <button id="bcbb-toggle-details-button" class="btn btn-outline-secondary mt-3" aria-expanded="false" style="display: block;">Open all</button>
2. in view header, change text format to full html
3. add the class bcbb-toggle-details-wrapper to the view wrapper.

This gives me the following html, which doesn't work.

<div class="views-element-container contextual-region">
  <div class="bcbb-toggle-details-wrapper p-4 contextual-region view view-dependency-report view-id-dependency_report view-display-id-dependency_report_page js-view-dom-id-43e354c5a95bb106f3fe1ac09a0633ffa15198354e8d8fb474706c8d9d070485" data-once="ajax-pager">
    <!-- Content inside bcbb-toggle-details-wrapper -->
  </div>
  <div class="view-header">
    <h2>Dependency report</h2>
    <button id="bcbb-toggle-details-button" class="btn btn-outline-secondary mt-3" aria-expanded="false" style="display: block;">Open all</button>
  </div>
  <div class="view-content">
    <div>
      <div class="views-field views-field-nothing">
        <span class="field-content">
          <div class="bcbb-toggle-details-wrapper">
            <details class="border-top-0 border-start-0 border-end-0 pb-4 mb-4">
              <summary>Who can unpublish - published by editor (referenced by 2 assets)</summary>
              <div class="pt-4 ps-4 pe-4">
                <div class="view view-referenced-datasets view-id-referenced_datasets view-display-id-referenced_datasets js-view-dom-id-a2d31d43ca1bbd03cc2382ef340cc6a9b56fda238e9dae67057cbf979d74950b">
                  <div class="view-header">
                    <p class="fw-bold fst-italic fs-6">Showing 1 - 2 of 2 total references to this asset.</p>
                  </div>
                  <div class="view-content">
                    <div class="item-list">
                      <ol class="ps-0">
                        <li>
                          <div class="views-field views-field-title">
                            <span class="field-content"><a href="/omly-imb-can-see" hreflang="en">OMLY IMB CAN SEE THIS</a></span>
                          </div>
                        </li>
                        <li>
                          <div class="views-field views-field-title">
                            <span class="field-content"><a href="/omly-imb-can-see" hreflang="en">OMLY IMB CAN SEE THIS</a></span>
                          </div>
                        </li>
                      </ol>
                    </div>
                  </div>
                  <div class="view-footer">
                    <p>
                      <a class="btn btn-secondary btn-sm" href="/who-can-unpublish-published-editor">View all references on this item</a>
                    </p>
                  </div>
                </div>
              </div>
            </details>
          </div>
        </span>
      </div>
    </div>
  </div>
</div>

I also tried applying bcbb-toggle-details-wrapper as a row class, that doesn't work either

[CraigClark]

@lkmorlan I also tried on a basic page here https://dv14.openplus.ca/toggle-test and it isn't working

[lkmorlan]

@CraigClark the library needs to be attached to any page that is using it. See:

https://github.com/bcgov/MFIN-Data-Catalogue/commit/cbdd4ea2f8b35a181a146d900d90bec93029ae54#diff-ae6e519fdd042b9060891bc4307b91a1a7eba990cad04841a112587381768a92R88

[CraigClark]

@lkmorlan please attach library so it can be used anywhere. We should do that for any feature that a site builder might want to use.

[lkmorlan]

@CraigClark I have attached it to all pages here: https://github.com/bcgov/MFIN-Data-Catalogue/commit/7cb4da5835a2606e8098f0c77c440bac66b1d12e

[CraigClark]

@lkmorlan since this is base-build, shouldn't it be attached to the base-build theme?

[CraigClark]

@lkmorlan I'm ready to close this providing the documentation is good. Could you please review the docs and get back to me?

[lkmorlan]

Reviewed. I made one minor correction.