Как вернуть первоначальное значение переменной при повторном выполнении функции?

Question

[Дарья Зибирова]

Реализован постраничный вывод элементов массива news - объектов с картинкой и заголовком (пагинация). Если длина заголовка слишком длинная (headlineArray.length > 29), он обрезается и добавляется троеточие (headlineArray = headlineArray.slice(0,28)+'...'). При каждом повторном нажатии на одну и ту же страницу заголовок обрезается ещё и ещё. Возможно ли вернуть первоначальное значение переменной headline при повторном выполнении функции обрезания заголовка (*закомментированный код - попытки это сделать)? Или нужно переместить функцию в другое место в коде? Извиняюсь за "кривую" реализацию, только только начала изучать JavaScript, и буду рада советам.

const news = [
    {image: '<img src="./assets/images/image-for-news-1.jpg">', headline: 'Poligraphy 2023. The best style ever'},
    {image: '<img src="./assets/images/image-for-news-2.jpg">', headline: 'History of Abstract: The Fashion in marketing'},
    {image: '<img src="./assets/images/image-for-news-3.jpg">', headline: 'Student in 2023. How will a future student changes'},
    {image: '<img src="./assets/images/image-for-news-4.jpg">', headline: 'New book about photography. Book of Isaiah'},
    {image: '<img src="./assets/images/image-for-news-5.jpg">', headline: 'Travel to Mexico. Who will go and why'},
    {image: '<img src="./assets/images/image-for-news-6.jpg">', headline: 'New disciplines'},
    {image: '<img src="./assets/images/image-for-news-7.jpg">', headline: 'Octopus dances in films'},
    {image: '<img src="./assets/images/image-for-news-8.jpg">', headline: 'Fugue of five contemporary abstract artists'},
    {image: '<img src="./assets/images/image-for-news-9.jpg">', headline: 'Notre Dame Cathedral will welcome visitors again'},
    {image: '<img src="./assets/images/image-for-news-10.jpg">', headline: 'Inside Gaudí: Retrospective in Orsay'},
    {image: '<img src="./assets/images/image-for-news-11.jpg">', headline: 'French contemporary art star Sophie Kahl'},
    {image: '<img src="./assets/images/image-for-news-12.jpg">', headline: 'Grand Palais Exhibition Palace reopens'},
    {image: '<img src="./assets/images/image-for-news-13.jpg">', headline: 'The long-awaited retrospective of Georg Baselitz'},
    {image: '<img src="./assets/images/image-for-news-14.jpg">', headline: 'Louvre attendance drops to 1986 levels'},
    {image: '<img src="./assets/images/image-for-news-15.jpg">', headline: 'Carnavalet Museum reopens'},
    {image: '<img src="./assets/images/image-for-news-16.jpg">', headline: 'Closing of the Pompidou Center for renovations will be postponed'},
]

let newsBlock = document.querySelector('.news-block__wrapper')
let pagination = document.querySelector('.news-block__pagination')

let articlesOnPage = 6
let countOfPages = Math.ceil(news.length / articlesOnPage)

let showPage = (function() {
    let activePage

    return function(item) {
        if (activePage) {
            activePage.classList.remove('news-block__li_active')
        }
        activePage = item
        item.classList.add('news-block__li_active')
        
        let pageNum = +item.innerHTML

        let start = (pageNum - 1) * articlesOnPage
        let end = start + articlesOnPage

        let articles = news.slice(start, end)

        newsBlock.innerHTML = ''
        for (let article of articles) {
            let articleElement = document.createElement('div')
            newsBlock.appendChild(articleElement)
            articleElement.classList.add('news-block__article')
            
            //const headlineResetting = article.headline
            //const headlineResetting = news.headline
            let headline = article.headline
            //headline = headlineResetting
            let headlineArray = headline.split('')
            if (headlineArray.length > 29) {
                headlineArray = headlineArray.slice(0,28)+'...'
            }
            headline = headlineArray.toString().replace(/,/g, '').link("./index.html")

            article.headline = headline

            createDiv(article.image, articleElement)
            createDiv(article.headline, articleElement)
        }
    }
}())

let pageItems = []
for (let i = 1; i <= countOfPages; i++) {
    let pageElement = document.createElement('li')
    pageElement.innerHTML = i
    pagination.appendChild(pageElement)
    pageItems.push(pageElement)
}

showPage(pageItems[0]);

for (let item of pageItems) {
    item.addEventListener('click', function() {
        showPage(this);
    })
}

function createDiv(content, articleElement) {
    let contentElement = document.createElement('div')
    contentElement.innerHTML = content
    articleElement.appendChild(contentElement)
    contentElement.classList.add('news-block__content')
}

Comments

[v3shin]

Ну так обрезайте заголовок сразу перед выводом на страницу и не меняйте исходный объект.

Answer 1

[Сергей Соколов]

можно стилями обрезать:

.truncate {
  width: 250px; /* подставьте вашу ширину блока */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Комментарии по коду в вопросе:

• метод строки link() — устаревший и не рекомендуется к использованию.
  
• метод slice() есть и у строки, т.ч. не обязательно преобразовывать строку в массив и обратно.
  
• вместо строки '...' можно использовать HTML-символ … (троеточие одним символом)
  
• ; в конце строк кода лучше не пропускать
  

Comments

[Дарья Зибирова]

Спасибо большое и за решение, и за советы! Всё работает!

Answer 2

[ThunderCat]

Если длина заголовка слишком длинная (headlineArray.length > 29), он обрезается и добавляется троеточие (headlineArray = headlineArray.slice(0,28)+'...').

Делайте через цсс, так не придется издеваться над кодом, и что самое главное, автоматически будет обрезаться лишний текст, не зависимо от количества символов, которые бывают разные по ширине.

Answer 3

[AUser0]

Подождите, вы строку длиной больше 29 символов превращаете в строку 28+3=31 символ? Что бы потом опять из 31 символа сделать 31 символ? И снова, и снова, и снова, и снова, и снова, и опять, потому что новая строка (31 символ, с троеточием) всё равно всегда длиннее 29 символов, как ни крути.

Comments

[AUser0]

Кстати, достаточно было сделать:

//article.headline = headline

            createDiv(article.image, articleElement)
            createDiv(headline, articleElement)

[Дарья Зибирова]

AUser0, хорошо, спасибо :)