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

Added loader to Publish and update article meta process

Browse Source
This commit is contained in:
sairaj mote 2022-02-21 16:16:19 +05:30
parent ea347ac27b
commit 8b2d20e32d
5 changed files with 61 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components.js
View File

@ -1457,12 +1457,11 @@ spinner.innerHTML = `
}
:host{
--accent-color: #4d2588;
--height: 1.6rem;
--width: 1.6rem;
--size: 1.6rem;
}
.loader {
height: var(--height);
width: var(--weight);
height: var(--size);
width: var(--size);
stroke-width: 8;
overflow: visible;
stroke: var(--accent-color);

11
css/main.css
View File

@ -119,8 +119,9 @@ button,
.cta {
text-transform: uppercase;
font-size: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.icon-only {
@ -160,14 +161,16 @@ sm-button[variant=primary] .icon {
sm-button[disabled] .icon {
fill: rgba(var(--text-color), 0.6);
}
sm-button.uppercase {
letter-spacing: 0.05em;
}
sm-button.danger {
--background: var(--danger-color);
color: rgba(var(--background-color), 1);
}
sm-spinner {
--size: 1rem;
--stroke-width: 0.1rem;
}
ul {
list-style: none;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
css/main.scss
View File

@ -116,8 +116,9 @@ button,
}
.cta {
text-transform: uppercase;
font-size: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.icon-only {
padding: 0.5rem;
@ -151,14 +152,15 @@ sm-button {
fill: rgba(var(--text-color), 0.6);
}
}
&.uppercase {
letter-spacing: 0.05em;
}
&.danger {
--background: var(--danger-color);
color: rgba(var(--background-color), 1);
}
}
sm-spinner {
--size: 1rem;
--stroke-width: 0.1rem;
}
ul {
list-style: none;
}

57
index.html
View File

@ -460,7 +460,7 @@
<fieldset id="edit_category"></fieldset>
</div>
<label class="grid gap-0-5">
<h5>Hero image URL</h5>
<h5>Hero Image</h5>
<img src="" alt="" id="preview_image">
<input id="select_image" type="file" accept="image">
</label>
@ -482,8 +482,10 @@
<h5>Publishing date</h5>
<input type="datetime-local" id="edit_published">
</label>
<sm-button id="set_article_meta" class="cta" onclick="defineArticle()" variant="primary">Save
</sm-button>
<div class="flex align-center w-100">
<button id="set_article_meta" class="button button--primary cta w-100"
onclick="defineArticle()">Save</button>
</div>
</div>
</section>
</sm-popup>
@ -1934,13 +1936,46 @@
getRef('edit_category').append(frag)
}
function showLoader(loadingText) {
const animOptions = {
fill: 'forwards',
duration: 150,
ease: 'easing',
}
animateTo(getRef('set_article_meta'), slideOutUp, animOptions)
.onfinish = () => {
getRef('set_article_meta').disabled = true
getRef('set_article_meta').classList.add('hide')
const loader = createElement('div', {
className: 'flex align-center justify-center gap-0-5 cta w-100',
innerHTML: `<sm-spinner></sm-spinner> ${loadingText}`
})
getRef('set_article_meta').after(loader)
animateTo(loader, slideInUp, animOptions)
}
}
function hideLoader(loadingText) {
const animOptions = {
fill: 'forwards',
duration: 150,
ease: 'easing',
}
animateTo(getRef('set_article_meta').nextElementSibling, slideOutUp, animOptions)
.onfinish = () => {
getRef('set_article_meta').disabled = false
getRef('set_article_meta').textContent = loadingText
getRef('set_article_meta').nextElementSibling.remove()
getRef('set_article_meta').classList.remove('hide')
animateTo(getRef('set_article_meta'), slideInUp, animOptions)
}
}
function publishArticle(vc) {
const { message: { articleID, content, contributors, title, readTime }, vectorClock } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc];
const isPublished = floGlobals.appObjects.rmTimes.articles.hasOwnProperty(articleID)
getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(async res => {
if (res) {
getRef('set_article_meta').innerHTML = '<sm-spinner></sm-spinner>'
getRef('set_article_meta').disabled = true
showLoader(` ${isPublished ? 'UPDATING...' : 'PUBLISHING...'}`)
const { title, categories, summary, published, tags, contributors, heroImage } = getArticleMetaData()
floGlobals.appObjects.adminData.publishedVc[vectorClock] = true
floGlobals.appObjects.articlesContent[articleID] = content
@ -1983,11 +2018,10 @@
document.querySelector(`.request-card[data-vc="${vc}"]`).remove()
hidePopup()
}).catch(err => {
notify(`${isPublished ? 'Update' : 'Publish'} article failed`, 'error')
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
hideLoader(` ${isPublished ? 'UPDATE' : 'PUBLISH'}`)
})
}
})
@ -2112,8 +2146,7 @@
function updateArticleMetaData(articleID) {
getConfirmation('Update article meta data?').then(async res => {
if (res) {
getRef('set_article_meta').innerHTML = '<sm-spinner></sm-spinner>'
getRef('set_article_meta').disabled = true
showLoader('UPDATING...')
const { title, categories, summary, published, tags, contributors, heroImage } = getArticleMetaData()
floGlobals.appObjects.rmTimes.articles[articleID].categories = categories
floGlobals.appObjects.rmTimes.articles[articleID].title = title
@ -2138,8 +2171,7 @@
}).catch(err => {
notify(`Error updating article meta data: ${err}`, 'error')
}).finally(() => {
getRef('set_article_meta').textContent = 'UPDATE'
getRef('set_article_meta').disabled = false
hideLoader('UPDATE')
})
}
})
@ -2391,7 +2423,6 @@
getRef('writers_list').addEventListener('click', handleWritersClick);
getRef('approved_ids').addEventListener('click', handleApprovedIDsClick);
document.querySelectorAll('.admin-option').forEach(elem => elem.classList.remove('hide'));
location.hash = '#/dashboard'
} else {
getRef('publishing_requests').removeEventListener('click', handleRequestClick)
getRef('article_analytics').removeEventListener('click', handleAnalyticsClick);