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

changed image hosting logic

Browse Source
This commit is contained in:
sairaj mote 2022-03-28 16:55:08 +05:30
parent b8c8d3e8d9
commit 50ec37aca2
2 changed files with 95 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/image-15645.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

174
index.html
View File

@ -456,11 +456,18 @@
<h5>Select category</h5> <h5>Select category</h5>
<fieldset id="edit_category"></fieldset> <fieldset id="edit_category"></fieldset>
</div> </div>
<label class="grid gap-0-5"> <div class="grid gap-0-5">
<h5>Hero image</h5>
<!-- <img src="" alt="" id="preview_image"> -->
<sm-input id="select_full_image" placeholder="High-res image name" animate></sm-input>
<sm-input id="select_thumbnail_image" placeholder="Thumbnail image name" animate></sm-input>
</div>
<!-- <label class="grid gap-0-5">
<h5>Hero Image</h5> <h5>Hero Image</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">
</label> </label> -->
</div> </div>
<div class="grid gap-1-5"> <div class="grid gap-1-5">
<div class="grid gap-0-5"> <div class="grid gap-0-5">
@ -1147,7 +1154,7 @@
}) })
const render = { const render = {
articleCard(details) { articleCard(details) {
const { uid: articleID, categories, title, readTime, published } = details const { uid: articleID, categories, title, readTime, published, heroImage } = 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 => {
@ -1162,14 +1169,15 @@
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 => { clone.querySelector('.article-card__image').src = `./images/${heroImage.thumbnail}`
if (image.thumbnail) // getImage(articleID).then(image => {
clone.querySelector('.article-card__image').src = image.thumbnail // 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 } = details const { uid: articleID, categories, title, readTime, published, summary, heroImage } = 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 => {
@ -1185,10 +1193,11 @@
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 => { clone.querySelector('.trending-article__image').src = heroImage ? heroImage.thumbnail : ''
if (image.thumbnail) // getImage(articleID).then(image => {
clone.querySelector('.trending-article__image').src = image.thumbnail // if (image.thumbnail)
}) // clone.querySelector('.trending-article__image').src = image.thumbnail
// })
return clone return clone
}, },
requestCard(details) { requestCard(details) {
@ -1264,8 +1273,9 @@
}, },
async article(articleID, firstLoad = true) { async article(articleID, firstLoad = true) {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
const [allArticles, allImages] = await Promise.all([compactIDB.readData('appObjects', 'articlesContent'), compactIDB.readAllData('images')]) // const [allArticles, allImages] = await Promise.all([compactIDB.readData('appObjects', 'articlesContent'), compactIDB.readAllData('images')])
const { title, published, readTime, contributors, updated, summary, categories } = floGlobals.appObjects.rmTimes.articles[articleID] const allArticles = await compactIDB.readData('appObjects', 'articlesContent');
const { title, published, readTime, contributors, updated, summary, categories, heroImage } = floGlobals.appObjects.rmTimes.articles[articleID]
categories.forEach(category => { categories.forEach(category => {
frag.append(createElement('a', { frag.append(createElement('a', {
className: 'article-card__category interact', className: 'article-card__category interact',
@ -1279,7 +1289,7 @@
getRef('article_summary').textContent = summary getRef('article_summary').textContent = summary
getRef('published_time').textContent = `${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}` getRef('published_time').textContent = `${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}`
getRef('reading_time').textContent = `${readTime} Min read` getRef('reading_time').textContent = `${readTime} Min read`
getRef('article_image').src = allImages[articleID] ? allImages[articleID].heroImage.full : '' getRef('article_image').src = heroImage.full
getRef('article_body').innerHTML = DOMPurify.sanitize(allArticles[articleID]) getRef('article_body').innerHTML = DOMPurify.sanitize(allArticles[articleID])
const allHeadings = getRef('article_body').querySelectorAll('h3') const allHeadings = getRef('article_body').querySelectorAll('h3')
allHeadings.forEach(heading => { allHeadings.forEach(heading => {
@ -1994,17 +2004,18 @@
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
if (heroImage.hasOwnProperty('full')) { floGlobals.appObjects.rmTimes.articles[articleID].heroImage = heroImage
try { // if (heroImage.hasOwnProperty('full')) {
compactIDB.writeData('images', { heroImage }, articleID) // try {
const response = await floCloudAPI.sendApplicationData(heroImage, 'images') // compactIDB.writeData('images', { heroImage }, articleID)
for (const key in response) { // const response = await floCloudAPI.sendApplicationData(heroImage, 'images')
floGlobals.appObjects.rmTimes.articles[articleID].heroImage = response[key].vectorClock // for (const key in response) {
} // floGlobals.appObjects.rmTimes.articles[articleID].heroImage = response[key].vectorClock
} catch (err) { // }
console.log(err) // } catch (err) {
} // console.log(err)
} // }
// }
Promise.all([ Promise.all([
floCloudAPI.updateObjectData('rmTimes'), floCloudAPI.updateObjectData('rmTimes'),
floCloudAPI.updateObjectData('adminData'), floCloudAPI.updateObjectData('adminData'),
@ -2080,13 +2091,14 @@
} }
async function setArticleMetaData(details, articleID) { async function setArticleMetaData(details, articleID) {
const { categories, title, tags, summary, published, contributors } = details const { categories, title, tags, summary, published, contributors, heroImage } = details
const articleImages = await compactIDB.readData('images', articleID) // const articleImages = await compactIDB.readData('images', articleID)
if (articleImages) { if (heroImage && heroImage.hasOwnProperty('full')) {
getRef('preview_image').src = articleImages.heroImage.thumbnail // getRef('preview_image').src = `./images/${heroImage}`
getRef('select_image').value = ''; getRef('select_full_image').value = '';
getRef('select_thumbnail_image').value = '';
} else { } else {
getRef('preview_image').src = '' // getRef('preview_image').src = ''
} }
getRef('edit_title').value = title; getRef('edit_title').value = title;
getRef('edit_summary').value = summary || ''; getRef('edit_summary').value = summary || '';
@ -2100,7 +2112,10 @@
return { return {
title: getRef('edit_title').value.trim(), title: getRef('edit_title').value.trim(),
categories: getSelectedCategories(), categories: getSelectedCategories(),
heroImage: currentSelectedImage, heroImage: {
full: getRef('select_full_image').value,
thumbnail: getRef('select_thumbnail_image').value,
},
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,
@ -2152,18 +2167,19 @@
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
if (heroImage.hasOwnProperty('full')) { floGlobals.appObjects.rmTimes.articles[articleID].heroImage = heroImage
try { // if (heroImage.hasOwnProperty('full')) {
compactIDB.writeData('images', { heroImage }, articleID) // try {
const response = await floCloudAPI.sendApplicationData(heroImage, 'images') // compactIDB.writeData('images', { heroImage }, articleID)
for (const key in response) { // const response = await floCloudAPI.sendApplicationData(heroImage, 'images')
floGlobals.appObjects.rmTimes.articles[articleID].heroImage = response[key].vectorClock // for (const key in response) {
} // floGlobals.appObjects.rmTimes.articles[articleID].heroImage = response[key].vectorClock
} catch (e) { // }
notify(`Error uploading image`, 'error') // } catch (e) {
console.error(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()
@ -2364,43 +2380,43 @@
} }
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">