Усечение заголовков из reddit API с использованием multi-зажим.js - PullRequest
0 голосов
/ 26 января 2019

Я пытаюсь использовать (https://www.npmjs.com/package/multi-clamp)[multi-clamp.js] для зажима / усечения моих заголовков, которые возвращаются из API Reddit.

Однако, он работает только над 1-ым перенастроенным заголовком, а невсе заголовки.Как я могу убедиться, что функция работает на всех заголовках, возвращаемых из API, а не только 1-го?

const reddit = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"

async function getData() {
    try {
        let response = await fetch(reddit);
        let data = await response.json()
        return data;
    } catch (error) {
        console.log("error", error);
    }
}

getData()
    .then(data => data.data.children)
    .then(data => data.map(post => ({
        source: post.data.domain,
        author: post.data.author,
        link: post.data.url,
        img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
        title: post.data.title,
    })))
    .then(data => data.map(render))

const app = document.querySelector('#app');

const render = post => {
    //console.log(post.data);
    const node = document.createElement('div');
    node.classList.add('news-item', `news-item--${ post.class }`);
    node.innerHTML = `
    <a class="news-item-link" href="${post.link}">
        <div style="background-image: url('${post.img}')" class="news-item-bg"></div>
        <div class="news-item-content">
            <h3 class="news-item-source">${post.source}</h3>
            <h2 class="news-item-title mb-2">${post.title}</h2>
        </div>
    </a>`;
    app.appendChild(node);

    new MultiClamp(document.querySelector('.news-item-title'), {
        ellipsis: '...',
        clamp: 2
    });
}

new MultiClamp.., где зажим работает на селекторе заголовков, ноэто только зажим первого возвращенного заголовка, а не всех.

Как заставить его работать на всех заголовках?

1 Ответ

0 голосов
/ 26 января 2019

document.querySelector возвращает только первый элемент, соответствующий селектору.Поскольку вы выполняете его в целом document, он всегда получит первый заголовок, который вы добавили к документу, и создаст для него множество new MultiClamp.

Вместо этого вам нужно выбрать одинНовый элемент заголовка в вашем новом узле:

function render(post) {
    const node = document.createElement('div');
    node.classList.add('news-item', `news-item--${ post.class }`);
    node.innerHTML = `
    <a class="news-item-link" href="${post.link}">
        <div style="background-image: url('${post.img}')" class="news-item-bg"></div>
        <div class="news-item-content">
            <h3 class="news-item-source">${post.source}</h3>
            <h2 class="news-item-title mb-2">${post.title}</h2>
        </div>
    </a>`;
    app.appendChild(node);

    new MultiClamp(node.querySelector('.news-item-title'), {
//                 ^^^^
        ellipsis: '...',
        clamp: 2
    });
}

Кстати, использование innerHTML с неэкранированными значениями интерполяции открывает ваше приложение для атак XSS.Лучше собрать все содержимое узла, используя DOM API.

...