Code Monkey home page Code Monkey logo

Comments (5)

michu2k avatar michu2k commented on June 20, 2024

Hi
During the tests, I didn't notice any similar problems that you describe. Can you provide more information on your use case?

from accordion.

kit52 avatar kit52 commented on June 20, 2024

Hi During the tests, I didn't notice any similar problems that you describe. Can you provide more information on your use case?

Im inited acc on page this code
` const accordionNewItems = [...document.querySelectorAll('.accordion')]
const initedAccordionsItems = accordionNewItems.filter(acc => !acc.classList.contains('not-inited'))
const notInitedAccordionsItems = accordionNewItems.filter(acc => acc.classList.contains('not-inited') &&
!acc.classList.contains('search-form__specialization-accordion'))

initedAccordions = new Accordion(initedAccordionsItems, {
elementClass: 'accordion__item',
triggerClass: 'accordion__head',
panelClass: 'accordion__content',
activeClass: 'active',
openOnInit: [0],
onOpen: (item) => {

  const header = document.querySelector('header')
  const instanceFromTop = item.getBoundingClientRect().top + window.pageYOffset - header.offsetHeight;
  window.scroll({
    top: instanceFromTop,
    left: 0,
    behavior: 'smooth'
  });
}

})
`

After on page when user click showMore i start this function

`export function getPriceFromApi(url, btnMore) {
const parentSection = btnMore.parentNode;
getData(url).then((res) => {
if (res.data.prices) {
btnMore.insertAdjacentHTML('beforebegin', res.data.prices)
btnMore.style = "display:none;";
if (res.data.url) {
btnMore.setAttribute('data-url', res.data.url)
btnMore.setAttribute('data-count', res.data.count)
btnMore.style = "display:inline-block;";
}
const accordions = [...parentSection.querySelectorAll('.accordion')];
const parentAccordion = initedAccordions.find(item => item.element == parentSection);
const initedAccordionsElements = initedAccordions.map(item => item.element)

        const notInitedAccorions = accordions.filter(item => !initedAccordionsElements.includes(item))
        if (notInitedAccorions.length > 0) {
            const newAccordionsInited = new Accordion(notInitedAccorions, {
                elementClass: 'accordion__item',
                triggerClass: 'accordion__head',
                panelClass: 'accordion__content',
                activeClass: 'active',
                onOpen: (item) => {
                    const header = document.querySelector('header')
                    const instanceFromTop = item.getBoundingClientRect().top + window.pageYOffset - header.offsetHeight;
                    window.scroll({
                        top: instanceFromTop,
                        left: 0,
                        behavior: 'smooth'
                    });
                }
            })
            initedAccordions.push(...newAccordionsInited)
        }
        parentAccordion.update()
    }
})

}`

and when i dell from init accordion func openOnInit: [0] - work well. But if i use with this func on init accordion => when i use update, added element be open.

from accordion.

kit52 avatar kit52 commented on June 20, 2024

` createDefinitions() {
const { elementClass, openOnInit } = this.options;

        this.elements = Array.from(this.container.childNodes)
            .filter((el) => el.classList && el.classList.contains(elementClass));

        this.firstElement = this.elements[0];
        this.lastElement = this.elements[this.elements.length - 1];
        console.log(this.elements);

        this.elements
            .filter((element) => !element.classList.contains(`js-enabled`))
            .map((element, idx) => {
                // When JS is enabled, add the class to the element
                element.classList.add('js-enabled');

                this.generateIDs(element);
                this.setARIA(element);
                this.setTransition(element);

                console.log(element);
                console.log(` includes`);
                console.log(openOnInit.includes(idx));
                uniqueId++;
                return openOnInit.includes(idx) ? this.showElement(element, false) : this.closeElement(element, false);
            });
    },`

in this you start openOnInit.includes(idx). This always be true for 0 if i use openOnInit[0],

from accordion.

michu2k avatar michu2k commented on June 20, 2024

Yea, you have right. I will fix it this week

from accordion.

michu2k avatar michu2k commented on June 20, 2024

Fixed in v3.3.0

from accordion.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.