RanchiMall/rmtimes
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed images fetching logic

Browse Source
This commit is contained in:
sairaj mote 2022-02-20 23:40:29 +05:30
parent bb9fd9baa9
commit ea347ac27b
4 changed files with 166 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/main.css
View File

@ -23,7 +23,7 @@ body,
body * { body * {
--accent-color: #256eff; --accent-color: #256eff;
--text-color: 20, 20, 20; --text-color: 20, 20, 20;
--background-color: 252, 245, 239; --background-color: 252, 250, 245;
--foreground-color: rgb(255, 253, 251); --foreground-color: rgb(255, 253, 251);
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
@ -604,6 +604,7 @@ sm-copy {
} }
#main_header { #main_header {
position: relative;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
padding: 1rem; padding: 1rem;
@ -611,6 +612,7 @@ sm-copy {
grid-column: 1/-1; grid-column: 1/-1;
grid-template-columns: auto 1fr auto auto; grid-template-columns: auto 1fr auto auto;
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
z-index: 10;
} }
#expanding_search { #expanding_search {
@ -618,7 +620,10 @@ sm-copy {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
width: calc(100% - 2rem); top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1; z-index: 1;
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
} }
@ -628,7 +633,7 @@ sm-copy {
#search_suggestions { #search_suggestions {
position: absolute; position: absolute;
top: calc(100% + 0.5rem); top: 100%;
background-color: var(--foreground-color); background-color: var(--foreground-color);
padding: 0.3rem; padding: 0.3rem;
width: 100%; width: 100%;
@ -1121,14 +1126,10 @@ theme-toggle {
} }
#main_footer { #main_footer {
background-color: #256eff; border-top: solid thin rgba(var(--text-color), 0.3);
color: white;
padding: 3rem 0; padding: 3rem 0;
gap: 1.5rem 0; gap: 1.5rem 0;
} }
#main_footer a {
color: inherit;
}
.hide { .hide {
display: none !important; display: none !important;
@ -1152,6 +1153,16 @@ theme-toggle {
justify-self: flex-end; justify-self: flex-end;
} }
#expanding_search {
padding: 0 1.5rem 0 1rem;
background-color: var(--foreground-color);
}
#search_suggestions {
border-radius: 0 0 0.5rem 0.5rem;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1);
}
#article main { #article main {
padding: 0 1.5rem; padding: 0 1.5rem;
} }
@ -1216,7 +1227,6 @@ theme-toggle {
} }
#main_header { #main_header {
position: relative;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
@ -1237,10 +1247,13 @@ theme-toggle {
#expanding_search { #expanding_search {
margin: 1rem 1.5rem; margin: 1rem 1.5rem;
left: 0;
width: 20rem; width: 20rem;
} }
#search_suggestions {
top: calc(100% + 1rem);
}
#writer { #writer {
gap: 1.5rem 6vw; gap: 1.5rem 6vw;
padding: 2rem 8vw; padding: 2rem 8vw;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

30
css/main.scss
View File

@ -19,7 +19,7 @@ body {
* { * {
--accent-color: #256eff; --accent-color: #256eff;
--text-color: 20, 20, 20; --text-color: 20, 20, 20;
--background-color: 252, 245, 239; --background-color: 252, 250, 245;
--foreground-color: rgb(255, 253, 251); --foreground-color: rgb(255, 253, 251);
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
@ -567,6 +567,7 @@ sm-copy {
} }
#main_header { #main_header {
position: relative;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
padding: 1rem; padding: 1rem;
@ -574,13 +575,17 @@ sm-copy {
grid-column: 1/-1; grid-column: 1/-1;
grid-template-columns: auto 1fr auto auto; grid-template-columns: auto 1fr auto auto;
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
z-index: 10;
} }
#expanding_search { #expanding_search {
position: absolute; position: absolute;
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
width: calc(100% - 2rem); top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1; z-index: 1;
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
.icon-only { .icon-only {
@ -589,7 +594,7 @@ sm-copy {
} }
#search_suggestions { #search_suggestions {
position: absolute; position: absolute;
top: calc(100% + 0.5rem); top: 100%;
background-color: var(--foreground-color); background-color: var(--foreground-color);
padding: 0.3rem; padding: 0.3rem;
width: 100%; width: 100%;
@ -1065,13 +1070,9 @@ theme-toggle {
} }
#main_footer { #main_footer {
background-color: #256eff; border-top: solid thin rgba(var(--text-color), 0.3);
color: white;
padding: 3rem 0; padding: 3rem 0;
gap: 1.5rem 0; gap: 1.5rem 0;
a {
color: inherit;
}
} }
.hide { .hide {
@ -1092,6 +1093,14 @@ theme-toggle {
#search_button { #search_button {
justify-self: flex-end; justify-self: flex-end;
} }
#expanding_search {
padding: 0 1.5rem 0 1rem;
background-color: var(--foreground-color);
}
#search_suggestions {
border-radius: 0 0 0.5rem 0.5rem;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1);
}
#article { #article {
main { main {
padding: 0 1.5rem; padding: 0 1.5rem;
@ -1149,7 +1158,6 @@ theme-toggle {
display: none; display: none;
} }
#main_header { #main_header {
position: relative;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
.logo { .logo {
@ -1166,9 +1174,11 @@ theme-toggle {
} }
#expanding_search { #expanding_search {
margin: 1rem 1.5rem; margin: 1rem 1.5rem;
left: 0;
width: 20rem; width: 20rem;
} }
#search_suggestions {
top: calc(100% + 1rem);
}
#writer { #writer {
gap: 1.5rem 6vw; gap: 1.5rem 6vw;

195
index.html
View File

@ -461,9 +461,8 @@
</div> </div>
<label class="grid gap-0-5"> <label class="grid gap-0-5">
<h5>Hero image URL</h5> <h5>Hero image URL</h5>
<!-- <img src="" alt="" id="preview_image"> <img src="" alt="" id="preview_image">
<input id="select_image" type="file" accept="image"> --> <input id="select_image" type="file" accept="image">
<sm-input id="get_hero_image" type="url"></sm-input>
</label> </label>
</div> </div>
<div class="grid gap-1-5"> <div class="grid gap-1-5">
@ -1124,9 +1123,30 @@
<script> <script>
const openedArticles = {} const openedArticles = {}
const relativeTime = new RelativeTime({ style: 'narrow' }); const relativeTime = new RelativeTime({ style: 'narrow' });
// checks if an article image is already fetched and if not, fetches it and returns the image
const getImage = (articleID) => new Promise((resolve, reject) => {
const { heroImage: heroImageVC } = floGlobals.appObjects.rmTimes.articles[articleID]
if (mappedImages.hasOwnProperty(articleID)) {
compactIDB.readData('images', articleID).then(image => {
if (image) {
resolve(image.heroImage)
}
})
} else {
floCloudAPI.requestApplicationData('images', {
atVectorClock: heroImageVC
}).then(result => {
compactIDB.writeData('images', {
heroImage: result[heroImageVC].message,
}, articleID)
mappedImages[articleID] = true
resolve(result[heroImageVC].message)
})
}
})
const render = { const render = {
articleCard(details) { articleCard(details) {
const { uid: articleID, categories, title, readTime, published, heroImage } = details const { uid: articleID, categories, title, readTime, published } = details
const clone = getRef('article_card_template').content.cloneNode(true).firstElementChild const clone = getRef('article_card_template').content.cloneNode(true).firstElementChild
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
categories.forEach(category => { categories.forEach(category => {
@ -1138,14 +1158,17 @@
}) })
clone.querySelector('.article-card__categories').append(frag) clone.querySelector('.article-card__categories').append(frag)
clone.querySelector('.article-link').href = `#/article?articleID=${articleID}` clone.querySelector('.article-link').href = `#/article?articleID=${articleID}`
clone.querySelector('.article-card__image').src = heroImage
clone.querySelector('.article-card__title').textContent = title clone.querySelector('.article-card__title').textContent = title
clone.querySelector('.article-card__read-time').textContent = `${readTime} Min read` clone.querySelector('.article-card__read-time').textContent = `${readTime} Min read`
clone.querySelector('.article-card__published').textContent = relativeTime.from(published) clone.querySelector('.article-card__published').textContent = relativeTime.from(published)
getImage(articleID).then(image => {
if (image.thumbnail)
clone.querySelector('.article-card__image').src = image.thumbnail
})
return clone return clone
}, },
trendingArticleCard(details) { trendingArticleCard(details) {
const { uid: articleID, categories, title, readTime, published, summary, heroImage } = details const { uid: articleID, categories, title, readTime, published, summary } = details
const clone = getRef('trending_article_template').content.cloneNode(true).firstElementChild const clone = getRef('trending_article_template').content.cloneNode(true).firstElementChild
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
categories.forEach(category => { categories.forEach(category => {
@ -1157,11 +1180,14 @@
}) })
clone.querySelector('.trending-article__categories').append(frag) clone.querySelector('.trending-article__categories').append(frag)
clone.querySelector('.article-card--highlight').href = `#/article?articleID=${articleID}` clone.querySelector('.article-card--highlight').href = `#/article?articleID=${articleID}`
clone.querySelector('.trending-article__image').src = heroImage
clone.querySelector('.trending-article__title').textContent = title clone.querySelector('.trending-article__title').textContent = title
clone.querySelector('.trending-article__read-time').textContent = `${readTime} Min read` clone.querySelector('.trending-article__read-time').textContent = `${readTime} Min read`
clone.querySelector('.trending-article__published').textContent = relativeTime.from(published) clone.querySelector('.trending-article__published').textContent = relativeTime.from(published)
clone.querySelector('.trending-article__summary').textContent = summary clone.querySelector('.trending-article__summary').textContent = summary
getImage(articleID).then(image => {
if (image.thumbnail)
clone.querySelector('.trending-article__image').src = image.thumbnail
})
return clone return clone
}, },
requestCard(details) { requestCard(details) {
@ -1219,7 +1245,7 @@
sortedByVotes.slice(0, 4).forEach(articleDetail => { sortedByVotes.slice(0, 4).forEach(articleDetail => {
frag.append(render.trendingArticleCard({ frag.append(render.trendingArticleCard({
...articleDetail, ...articleDetail,
heroImage: allImages[articleDetail.uid] ? allImages[articleDetail.uid].heroImage.thumbnail : '' // heroImage: allImages[articleDetail.uid] ? allImages[articleDetail.uid].heroImage.thumbnail : ''
})) }))
}) })
getRef('trending_article_container').innerHTML = '' getRef('trending_article_container').innerHTML = ''
@ -1229,7 +1255,7 @@
sortedArticles.slice(0, 4).forEach(articleDetail => { sortedArticles.slice(0, 4).forEach(articleDetail => {
frag.append(render.articleCard({ frag.append(render.articleCard({
...articleDetail, ...articleDetail,
heroImage: allImages[articleDetail.uid] ? allImages[articleDetail.uid].heroImage.thumbnail : '' // heroImage: allImages[articleDetail.uid] ? allImages[articleDetail.uid].heroImage.thumbnail : ''
})) }))
}) })
getRef('latest_articles_list').innerHTML = '' getRef('latest_articles_list').innerHTML = ''
@ -1295,7 +1321,7 @@
} }
randomNumbers.forEach((index) => { randomNumbers.forEach((index) => {
const { uid } = searchResult[index] const { uid } = searchResult[index]
frag.append(render.articleCard({ ...searchResult[index], heroImage: allImages[uid] ? allImages[uid].heroImage.thumbnail : '' })) frag.append(render.articleCard({ ...searchResult[index], /* heroImage: allImages[uid] ? allImages[uid].heroImage.thumbnail : '' */ }))
}) })
getRef('related_articles').innerHTML = '' getRef('related_articles').innerHTML = ''
getRef('related_articles').append(frag) getRef('related_articles').append(frag)
@ -1380,13 +1406,11 @@
}, },
} }
let mappedImages = {}
const getArticles = async () => { const getArticles = async () => {
floCloudAPI.requestApplicationData('images').then((images) => { compactIDB.readAllData('images').then(allImages => {
for (const articleID in floGlobals.appObjects.rmTimes.articles) { for (const imageID in allImages) {
const { heroImage } = floGlobals.appObjects.rmTimes.articles[articleID] mappedImages[imageID] = true
compactIDB.writeData('images', {
heroImage: images[heroImage].message,
}, articleID)
} }
}) })
Promise.all([ Promise.all([
@ -1915,6 +1939,8 @@
const isPublished = floGlobals.appObjects.rmTimes.articles.hasOwnProperty(articleID) const isPublished = floGlobals.appObjects.rmTimes.articles.hasOwnProperty(articleID)
getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(async res => { getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(async res => {
if (res) { if (res) {
getRef('set_article_meta').innerHTML = '<sm-spinner></sm-spinner>'
getRef('set_article_meta').disabled = true
const { title, categories, summary, published, tags, contributors, heroImage } = getArticleMetaData() const { title, categories, summary, published, tags, contributors, heroImage } = getArticleMetaData()
floGlobals.appObjects.adminData.publishedVc[vectorClock] = true floGlobals.appObjects.adminData.publishedVc[vectorClock] = true
floGlobals.appObjects.articlesContent[articleID] = content floGlobals.appObjects.articlesContent[articleID] = content
@ -1931,15 +1957,20 @@
floGlobals.appObjects.rmTimes.articles[articleID].categories = categories floGlobals.appObjects.rmTimes.articles[articleID].categories = categories
floGlobals.appObjects.rmTimes.articles[articleID].contributors = contributors floGlobals.appObjects.rmTimes.articles[articleID].contributors = contributors
floGlobals.appObjects.rmTimes.articles[articleID].title = title floGlobals.appObjects.rmTimes.articles[articleID].title = title
floGlobals.appObjects.rmTimes.articles[articleID].heroImage = heroImage
floGlobals.appObjects.rmTimes.articles[articleID].tags = tags floGlobals.appObjects.rmTimes.articles[articleID].tags = tags
floGlobals.appObjects.rmTimes.articles[articleID].readTime = readTime floGlobals.appObjects.rmTimes.articles[articleID].readTime = readTime
floGlobals.appObjects.rmTimes.articles[articleID].summary = summary floGlobals.appObjects.rmTimes.articles[articleID].summary = summary
// compactIDB.writeData('images', { heroImage }, articleID) if (heroImage.hasOwnProperty('full')) {
// const response = await floCloudAPI.sendApplicationData(heroImage, 'images') try {
// for (const key in response) { compactIDB.writeData('images', { heroImage }, articleID)
// floGlobals.appObjects.rmTimes.articles[articleID].heroImage = response[key].vectorClock const response = await floCloudAPI.sendApplicationData(heroImage, 'images')
// } for (const key in response) {
floGlobals.appObjects.rmTimes.articles[articleID].heroImage = response[key].vectorClock
}
} catch (err) {
console.log(err)
}
}
Promise.all([ Promise.all([
floCloudAPI.updateObjectData('rmTimes'), floCloudAPI.updateObjectData('rmTimes'),
floCloudAPI.updateObjectData('adminData'), floCloudAPI.updateObjectData('adminData'),
@ -1951,6 +1982,12 @@
} }
document.querySelector(`.request-card[data-vc="${vc}"]`).remove() document.querySelector(`.request-card[data-vc="${vc}"]`).remove()
hidePopup() hidePopup()
}).catch(err => {
notify(`${isPublished ? 'Update' : 'Publish'} article failed`, 'error')
console.error(err)
}).finally(() => {
getRef('set_article_meta').textContent = `${isPublished ? 'Update' : 'Publish'}`
getRef('set_article_meta').disabled = false
}) })
} }
}) })
@ -2010,15 +2047,14 @@
} }
async function setArticleMetaData(details, articleID) { async function setArticleMetaData(details, articleID) {
const { categories, title, tags, summary, published, contributors, heroImage } = details const { categories, title, tags, summary, published, contributors } = details
// const articleImages = await compactIDB.readData('images', articleID) const articleImages = await compactIDB.readData('images', articleID)
// if (articleImages) { if (articleImages) {
// getRef('preview_image').src = articleImages.heroImage.thumbnail getRef('preview_image').src = articleImages.heroImage.thumbnail
// getRef('select_image').value = ''; getRef('select_image').value = '';
// } else { } else {
// getRef('preview_image').src = '' getRef('preview_image').src = ''
// } }
getRef('get_hero_image').value = heroImage
getRef('edit_title').value = title; getRef('edit_title').value = title;
getRef('edit_summary').value = summary || ''; getRef('edit_summary').value = summary || '';
setSelectedCategories(categories || ''); setSelectedCategories(categories || '');
@ -2031,7 +2067,7 @@
return { return {
title: getRef('edit_title').value.trim(), title: getRef('edit_title').value.trim(),
categories: getSelectedCategories(), categories: getSelectedCategories(),
heroImage: getRef('get_hero_image').value.trim(), heroImage: currentSelectedImage,
summary: getRef('edit_summary').value.trim(), summary: getRef('edit_summary').value.trim(),
published: new Date(getRef('edit_published').value).getTime(), published: new Date(getRef('edit_published').value).getTime(),
contributors: getRef('edit_contributors').value, contributors: getRef('edit_contributors').value,
@ -2076,21 +2112,34 @@
function updateArticleMetaData(articleID) { function updateArticleMetaData(articleID) {
getConfirmation('Update article meta data?').then(async res => { getConfirmation('Update article meta data?').then(async res => {
if (res) { if (res) {
getRef('set_article_meta').innerHTML = '<sm-spinner></sm-spinner>'
getRef('set_article_meta').disabled = true
const { title, categories, summary, published, tags, contributors, heroImage } = getArticleMetaData() const { title, categories, summary, published, tags, contributors, heroImage } = getArticleMetaData()
floGlobals.appObjects.rmTimes.articles[articleID].categories = categories floGlobals.appObjects.rmTimes.articles[articleID].categories = categories
floGlobals.appObjects.rmTimes.articles[articleID].title = title floGlobals.appObjects.rmTimes.articles[articleID].title = title
floGlobals.appObjects.rmTimes.articles[articleID].heroImage = heroImage
floGlobals.appObjects.rmTimes.articles[articleID].tags = tags floGlobals.appObjects.rmTimes.articles[articleID].tags = tags
floGlobals.appObjects.rmTimes.articles[articleID].summary = summary floGlobals.appObjects.rmTimes.articles[articleID].summary = summary
floGlobals.appObjects.rmTimes.articles[articleID].contributors = contributors floGlobals.appObjects.rmTimes.articles[articleID].contributors = contributors
// compactIDB.writeData('images', { heroImage }, articleID) if (heroImage.hasOwnProperty('full')) {
// const response = await floCloudAPI.sendApplicationData(heroImage, 'images') try {
// for (const key in response) { compactIDB.writeData('images', { heroImage }, articleID)
// floGlobals.appObjects.rmTimes.articles[articleID].heroImage = response[key].vectorClock const response = await floCloudAPI.sendApplicationData(heroImage, 'images')
// } for (const key in response) {
floGlobals.appObjects.rmTimes.articles[articleID].heroImage = response[key].vectorClock
}
} catch (e) {
notify(`Error uploading image`, 'error')
console.error(e)
}
}
floCloudAPI.updateObjectData('rmTimes').then(() => { floCloudAPI.updateObjectData('rmTimes').then(() => {
notify(`Updated article meta data`, 'success') notify(`Updated article meta data`, 'success')
hidePopup() hidePopup()
}).catch(err => {
notify(`Error updating article meta data: ${err}`, 'error')
}).finally(() => {
getRef('set_article_meta').textContent = 'UPDATE'
getRef('set_article_meta').disabled = false
}) })
} }
}) })
@ -2283,44 +2332,44 @@
} }
} }
// let currentSelectedImage = {} let currentSelectedImage = {}
// getRef('select_image').addEventListener('change', function (e) { getRef('select_image').addEventListener('change', function (e) {
// currentSelectedImage = {} currentSelectedImage = {}
// if (this.files.length === 0) return if (this.files.length === 0) return
// const selectedFile = this.files[0] const selectedFile = this.files[0]
// const reader = new FileReader(); const reader = new FileReader();
// reader.onload = function (e) { reader.onload = function (e) {
// // show selected image in the preview // show selected image in the preview
// getRef('preview_image').src = e.target.result; getRef('preview_image').src = e.target.result;
// getRef('preview_image').addEventListener('load', function (event) { getRef('preview_image').addEventListener('load', function (event) {
// // Dynamically create a canvas element // Dynamically create a canvas element
// const canvas = createElement("canvas"); const canvas = createElement("canvas");
// const context = canvas.getContext("2d"); const context = canvas.getContext("2d");
// const originalWidth = getRef('preview_image').width; const originalWidth = getRef('preview_image').width;
// const originalHeight = getRef('preview_image').height; const originalHeight = getRef('preview_image').height;
// const resizingFactor = parseFloat((1 / (originalWidth / 600)).toFixed(2)); const resizingFactor = parseFloat((1 / (originalWidth / 600)).toFixed(2));
// const canvasWidth = originalWidth * resizingFactor; const canvasWidth = originalWidth * resizingFactor;
// const canvasHeight = originalHeight * resizingFactor; const canvasHeight = originalHeight * resizingFactor;
// canvas.width = canvasWidth; canvas.width = canvasWidth;
// canvas.height = canvasHeight; canvas.height = canvasHeight;
// context.drawImage( context.drawImage(
// getRef('preview_image'), getRef('preview_image'),
// 0, 0,
// 0, 0,
// originalWidth * resizingFactor, originalWidth * resizingFactor,
// originalHeight * resizingFactor originalHeight * resizingFactor
// ); );
// currentSelectedImage['thumbnail'] = canvas.toDataURL(selectedFile.type); currentSelectedImage['thumbnail'] = canvas.toDataURL(selectedFile.type);
// }, { once: true }); }, { once: true });
// currentSelectedImage.name = selectedFile.name currentSelectedImage.name = selectedFile.name
// currentSelectedImage.type = selectedFile.type currentSelectedImage.type = selectedFile.type
// currentSelectedImage.full = e.target.result currentSelectedImage.full = e.target.result
// } }
// reader.readAsDataURL(this.files[0]); reader.readAsDataURL(this.files[0]);
// }) })
</script> </script>
<script id="onLoadStartUp"> <script id="onLoadStartUp">