accordion broken with elastic search #44

New Issue

jorge · 2021-11-19T16:31:57+01:00

jorge commented

2021-11-19 16:31:57 +01:00

I have noticed that after adding elastic search accordions do break if serach provides nos results of if button "load more" loads other content.

@chris can you double check this at
https://collections.arc-hive.zone/s/collections/page/index

seems that the js is not writing all the needed html code

it first presents this:

<li data-v-abbdcac0="" data-accordion-item="" class="accordion-item" role="presentation">
    <a data-v-abbdcac0="" href="#" class="accordion-title" aria-controls="5zkrhv-accordion" role="tab" id="5zkrhv-accordion-label" aria-expanded="false" aria-selected="false">
      <ul data-v-abbdcac0="">
        <li data-v-abbdcac0="" class="title">50 cc Air de Troy</li>
        <li data-v-abbdcac0="" class="curator">Kathy High</li>
        <li data-v-abbdcac0="" class="collection-name">collection1</li>
        <li data-v-abbdcac0="" class="date">2015-05-31</li>
      </ul>
    </a>
</li>

then if we do a search and cancel the search or we click the "load more" button, the next view generated has this code

<li data-v-abbdcac0="" data-accordion-item="" class="accordion-item">
    <a data-v-abbdcac0="" href="#" class="accordion-title">
      <ul data-v-abbdcac0="">
        <li data-v-abbdcac0="" class="title">50 cc Air de Troy</li>
        <li data-v-abbdcac0="" class="curator">Kathy High</li>
        <li data-v-abbdcac0="" class="collection-name">collection1</li> 
        <li data-v-abbdcac0="" class="date">2015-05-31</li>
      </ul>
    </a>
</li>

thus proces the accordion to malfunction... might be also an issue between js from elasticsearch and foundation-accordion

the main different part for the code to work in each single accordion is the randomly generated id for the <a> element, in this example is aria-controls="5zkrhv-accordion" wich is used for accessibility.

I have noticed that after adding elastic search accordions do break if serach provides nos results of if button "load more" loads other content. @chris can you double check this at https://collections.arc-hive.zone/s/collections/page/index seems that the js is not writing all the needed `html` code it first presents this: ```html <li data-v-abbdcac0="" data-accordion-item="" class="accordion-item" role="presentation"> <a data-v-abbdcac0="" href="#" class="accordion-title" aria-controls="5zkrhv-accordion" role="tab" id="5zkrhv-accordion-label" aria-expanded="false" aria-selected="false"> <ul data-v-abbdcac0=""> <li data-v-abbdcac0="" class="title">50 cc Air de Troy</li> <li data-v-abbdcac0="" class="curator">Kathy High</li> <li data-v-abbdcac0="" class="collection-name">collection1</li> <li data-v-abbdcac0="" class="date">2015-05-31</li> </ul> </a> </li> ``` then if we do a search and cancel the search or we click the "load more" button, the next view generated has this code ```html <li data-v-abbdcac0="" data-accordion-item="" class="accordion-item"> <a data-v-abbdcac0="" href="#" class="accordion-title"> <ul data-v-abbdcac0=""> <li data-v-abbdcac0="" class="title">50 cc Air de Troy</li> <li data-v-abbdcac0="" class="curator">Kathy High</li> <li data-v-abbdcac0="" class="collection-name">collection1</li> <li data-v-abbdcac0="" class="date">2015-05-31</li> </ul> </a> </li> ``` thus proces the accordion to malfunction... might be also an issue between js from elasticsearch and foundation-accordion the main different part for the code to work in each single accordion is the randomly generated `id` for the `<a>` element, in this example is `aria-controls="5zkrhv-accordion"` wich is used for accessibility.

chris commented

2021-11-25 13:12:31 +01:00

Hi @jorge

I think the problem was that foundation js only works on accordian items that are rendered when the page loads. In our case, with the 'Load more' button, we are adding more items, items that are not registered on document.load.

So, I have removed some tags

https://git.hangar.org/arcHIVE-tech/Arc-hive-list/src/branch/main/src/components/archiveList.vue#L67

and handle item exapnd/collapse with custom js
https://git.hangar.org/arcHIVE-tech/Arc-hive-omeka-theme/src/branch/develop/asset/js/expand-site-list-item.js

How does that seem to you now?

https://dev-archive.hangar.org/s/collections/page/index

Hi @jorge I think the problem was that foundation js only works on accordian items that are rendered when the page loads. In our case, with the 'Load more' button, we are adding more items, items that are not registered on document.load. So, I have removed some tags https://git.hangar.org/arcHIVE-tech/Arc-hive-list/src/branch/main/src/components/archiveList.vue#L67 and handle item exapnd/collapse with custom js https://git.hangar.org/arcHIVE-tech/Arc-hive-omeka-theme/src/branch/develop/asset/js/expand-site-list-item.js How does that seem to you now? https://dev-archive.hangar.org/s/collections/page/index

jorge commented

2021-11-29 13:47:53 +01:00

foundation makes changes to the html using js, thank you for checking that out :D good

it works nice ... great!!!

so this could be closed.

foundation makes changes to the html using js, thank you for checking that out :D good it works nice ... great!!! so this could be closed.

jorge closed this issue

2021-11-29 13:47:53 +01:00

chris commented

2021-11-29 16:20:39 +01:00

ok. I've loaded https://collections.arc-hive.zone/s/collections/page/index with the develop branch. You need to do a F5 to reload the js. Works well I think.

Sign in to join this conversation.

No Label

No Milestone

No project

No Assignees

2 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: arcHIVE-tech/Arc-hive-omeka-theme#44