Почему не вызывается метод экземпляра класса?

Question

[suchrile]

Не могу понять в чем я ошибаюсь или чего не знаю. Я создаю новый экземпляр класса Progress у которого есть метод progress. Если вызвать этот метод сразу после создания экземпляра - все супер. Как только я пытаюсь его вызвать в какой-то функции - ничего не работает…

const progress = new Progress('.progress-pie', {
 type: 'pie',
 size: 16,
 stroke: 8,
 pieStroke: 2
});
progress.progress(30)

Вызвать я этот метод хочу в коллбэке экземпляра другого класса, который абсолютно точно возвращает нужное значение. В данном случае число 12.

const modal = new Modal('body', {
 title: 'Заголовок',
 text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. <b>Et, explicabo?</b>',
 actions: [
 {type: 'default', text: 'Отмена', action: 'reject'},
 {type: 'success', text: 'Окей', action: 'accept'}
 ]
}, (value) => {
 progress.progress(value)
})

Сам класс Progress и метод progress:

const init = (type, size, stroke, pieStroke, textStatus=[]) => {
    let progressType = type ?? 'circle'
    let statusSize = textStatus.size ?? '15'
    let statusWeight = textStatus.weight ?? '500'
    let strokeType = ''
    let strokeColor = '#FFFFFF'
    let statusView = ''
    let stokeWidth = stroke ?? 3
    let pieBorder = pieStroke ?? 2
    let progressBorder = `style="width: ${size + stokeWidth}px; height: ${size + stokeWidth}px; border: ${pieBorder}px solid; border-color: #5fca7a;"`
    let progressBg = ''
    const radius = size / 2 - stokeWidth / 2
    if (textStatus.enabled) {
        statusView = `<span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: ${statusWeight}; font-size: ${statusSize}px;">100%</span>`
    }
    if (progressType === 'circle') {
        strokeType = 'stroke-linecap="round"'
        strokeColor = '#e6e6e6'
        progressBorder = ''
        progressBg = `<div class="progress-bg" style="border-width: ${stokeWidth}px;"></div>`
    }
    return `
        <div class="progress" ${progressBorder}>${progressBg}
            <svg class="progress-track"
                style="width: ${size}px; height: ${size}px;">
                <circle class="progress-thumb"
                stroke="#5fca7a" ${strokeType} stroke-width="${stokeWidth}" cx="${size / 2}" cy="${size / 2}" r="${radius}" fill="transparent"></circle>
            </svg>
            ${statusView}
        </div>
        `
}

export class Progress {
    constructor(selector, options) {
        this.$el = document.querySelector(selector)
        this.options = options

        this.#render()

        this.$thumb = document.querySelector(`${selector} .progress-thumb`)
        this.$progress = document.querySelector(`${selector} span`)
        this.$pieBorder = document.querySelector(`${selector} .progress`)
    }

    #render() {
        const {type, size, stroke, pieStroke, textStatus} = this.options
        this.$el.style.width = size + 'px';
        this.$el.style.height = size + 'px';
        this.$el.style.position = 'relative';
        this.$el.innerHTML = init(type, size, stroke, pieStroke, textStatus)
    }

    progress(percent) {
        const progressType = this.$el.classList.contains('pie-progress') ? 'pie' : 'circle'
        const progressBar = this.$thumb
        const pieBorder = this.$pieBorder
        const progress = this.$progress
        const status = this.options.textStatus
        const circumference = 2 * Math.PI * progressBar.r.baseVal.value

        progressBar.style.strokeDasharray = `${circumference} ${circumference}`
        progressBar.style.strokeDashoffset = circumference

        function setProgress(value) {
            progressBar.style.strokeDashoffset = circumference - value / 100 * circumference
            if (percent > 100) {
                progressBar.style.strokeDashoffset = 0
                return
            } else if (percent < 15) {
                if (progressType === 'pie') {
                    pieBorder.style.borderColor = '#86868b'
                }
                progressBar.style.stroke = '#86868b'
            } else if (percent < 40) {
                if (progressType === 'pie') {
                    pieBorder.style.borderColor = '#ffcc00'
                }
                progressBar.style.stroke = '#ffcc00'
            } else if (percent < 70) {
                if (progressType === 'pie') {
                    pieBorder.style.borderColor = '#ff9500'
                }
                progressBar.style.stroke = '#ff9500'
            } else if (percent > 70) {
                if (progressType === 'pie') {
                    pieBorder.style.borderColor = '#5fca7a'
                }
                progressBar.style.stroke = '#5fca7a'
            }
            if (status) {
                progress.innerHTML = value + '%'
            }
        }
        setProgress(percent)
    }

    destroy() {
        this.$el.remove()
    }
}

Подскажите, что не так? Почему не работает? :( В консоли выводится значение, а если передать его в метод progress`а – тишина.

https://jsfiddle.net/suchrile/w9zguamc/11/

Comments

[Алексей Ярков]

ничего не работает

Это не описание проблемы. В консоли что пишет?

[suchrile]

Алексей Ярков, если вызвать progress.progress(60) в консоли – возвращается undefined. при вызове внутри функции консоль молчит

[Алексей Ярков]

suchrile, сделайте в песочнице воспроизводимый пример и прикрепите к вопросу ссылку. Так быстрее помогут.

[Алексей Ярков]

suchrile, кстати... А если так сделать, то что в консоль выводится?

const modal = new Modal('body', {
 title: 'Заголовок',
 text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. <b>Et, explicabo?</b>',
 actions: [
 {type: 'default', text: 'Отмена', action: 'reject'},
 {type: 'success', text: 'Окей', action: 'accept'}
 ]
}, (value) => {
 console.log(value)
})

[suchrile]

Алексей Ярков, выводит число, которое нужно.
https://jsfiddle.net/suchrile/a8ed5gsL/4/

[Алексей Ярков]

suchrile, https://jsfiddle.net/yarkov_aleksei/mkb4tpy7/6/
Ну я console.log понатыкал и всё вызывается

[suchrile]

Алексей Ярков, наверное я не совсем корректно вопрос сформулировал. Метод получается вызвался, но сам прогресс-бар не изменился после вызова этого метода

[suchrile]

Алексей Ярков, я сейчас тоже проверил консоль логами все внутри метода, если перед

progress.innerHTML = value + '%'

вывести в консоль

console.log(progress)

там все меняется, а на самой странице то почему нет о_О

Answer 1

[suchrile]

Метод на самом деле вызывался. Проблема была в том, что экземпляр класса Modal создавался после экземпляра класса Progress, поэтому стили объекта progress1 не менялись при вызове метода progress в callback`е модалки.