- - - - - - - - - - - - - - - - - - - - - - - - - - - - - Loading RM Times + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Loading RM Times + - + - - Trending - - - - - Latest - See all + + + + + + + Trending - + + + + + + + + + + Latest + + See all + + @@ -397,6 +414,19 @@ + + + + + + + + + + + + @@ -761,6 +791,9 @@ articleTitleObserver.disconnect() } } + if (pageId !== 'loading') { + document.querySelector('main').classList.remove('hide') + } document.querySelectorAll('.page').forEach(page => page.classList.add('hide')) getRef(targetPage).classList.remove('hide') if (pagesData.lastPage !== pageId) { @@ -871,6 +904,18 @@ clone.querySelector('.article-card__published').textContent = relativeTime.from(published) return clone }, + trendingArticleCard(details) { + const { uid: articleID, category, title, readTime, published, summary } = details + const clone = getRef('trending_article_template').content.cloneNode(true).firstElementChild + clone.querySelector('.article-card__category').textContent = category + clone.querySelector('.article-card__category').href = `#/explore?type=category&query=${category}` + clone.querySelector('.article-card--highlight').href = `#/article?articleID=${articleID}` + clone.querySelector('.trending-article__title').textContent = title + clone.querySelector('.trending-article__read-time').textContent = `${readTime} Min read` + clone.querySelector('.trending-article__published').textContent = relativeTime.from(published) + clone.querySelector('.trending-article__summary').textContent = summary + return clone + }, requestCard(details) { const { message: { articleID, category, title }, time, vectorClock } = details if (!floGlobals.appObjects.publishedVc.hasOwnProperty(vectorClock)) { @@ -924,33 +969,17 @@ }))) getRef('news_categories_list').innerHTML = '' getRef('news_categories_list').append(frag) - // render latest articles const arrOfArticles = getArrayOfObj(floGlobals.appObjects.articles) - const sortedArticles = arrOfArticles.sort((a, b) => b.published - a.published) - sortedArticles.slice(0, 4).forEach(articleDetail => frag.append(render.articleCard(articleDetail))) + // Render trending article card + let sortedByVotes = arrOfArticles.sort((a, b) => b.votes - a.votes) + sortedByVotes.slice(0, 3).forEach(articleDetail => frag.append(render.trendingArticleCard(articleDetail))) + getRef('trending_article_container').innerHTML = '' + getRef('trending_article_container').append(frag) + // render latest articles + const sortedArticles = sortedByVotes.slice(3, 6).sort((a, b) => b.published - a.published) + sortedArticles.forEach(articleDetail => frag.append(render.articleCard(articleDetail))) getRef('latest_articles_list').innerHTML = '' getRef('latest_articles_list').append(frag) - // Render trending article card - let highestRatedArticle = arrOfArticles[0] - for (let i = 1; i < arrOfArticles.length; i++) { - if (highestRatedArticle.votes < arrOfArticles[i].votes) { - highestRatedArticle = arrOfArticles[i] - } - } - const { category, title, published, readTime, summary, uid } = highestRatedArticle - getRef('trending_article_container').innerHTML = ` - - ${category} - - ${title} - - ${readTime} Min read${relativeTime.from(published)} - - ${summary} - - - ` } const openedArticles = {} @@ -997,11 +1026,16 @@ function renderExplorePage(params) { const { type, query } = params const frag = document.createDocumentFragment() - const options = (type === 'category') ? { keys: ['category'], threshold: 0 } : { keys: ['title', 'category', 'tags'], threshold: 0.3 } - const fuse = new Fuse(getArrayOfObj(floGlobals.appObjects.articles).sort((a, b) => b.published - a.published), options) - const searchResult = fuse.search(query).map(v => v.item) - searchResult.forEach(articleDetail => frag.append(render.articleCard(articleDetail))) - getRef('explore_heading').textContent = `${type === 'category' ? 'Explore' : 'Related to'} ${query}` + const sortedByTime = getArrayOfObj(floGlobals.appObjects.articles).sort((a, b) => b.published - a.published) + if (type === 'recent') { + sortedByTime.forEach(articleDetail => frag.append(render.articleCard(articleDetail))) + } else { + const options = (type === 'category') ? { keys: ['category'], threshold: 0 } : { keys: ['title', 'category', 'tags'], threshold: 0.3 } + const fuse = new Fuse(sortedByTime, options) + const searchResult = fuse.search(query).map(v => v.item) + searchResult.forEach(articleDetail => frag.append(render.articleCard(articleDetail))) + getRef('explore_heading').textContent = `${type === 'category' ? 'Explore' : 'Related to'} ${query}` + } getRef('query_results_list').innerHTML = '' getRef('query_results_list').append(frag) }