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

feature update and bug fixes

Browse Source 
-- added option to refresh article without reloading whole page
This commit is contained in:
sairaj mote 2022-07-10 20:40:58 +05:30
parent 5b3bfffafd
commit 02b5b68016
4 changed files with 118 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/main.css
View File

@ -443,16 +443,19 @@ ul {
details summary { details summary {
display: flex; display: flex;
justify-content: space-between;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
align-items: center;
justify-content: space-between;
color: var(--accent-color);
} }
details[open] > summary {
details[open] summary {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
details[open] > summary .icon { details[open] > summary .down-arrow {
transform: rotate(180deg); transform: rotate(180deg);
} }
@ -574,9 +577,7 @@ sm-copy {
} }
#main_header { #main_header {
position: -webkit-sticky; position: relative;
position: sticky;
top: 0;
display: grid; display: grid;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
@ -615,8 +616,10 @@ sm-copy {
padding: 0.5rem 0; padding: 0.5rem 0;
text-align: left; text-align: left;
line-height: 1.7; line-height: 1.7;
width: 100%;
} }
.outline-button::before { .outline-button::before {
position: absolute;
content: ""; content: "";
width: 0.3rem; width: 0.3rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -627,11 +630,18 @@ sm-copy {
background-color: rgba(var(--text-color), 0.5); background-color: rgba(var(--text-color), 0.5);
opacity: 0; opacity: 0;
} }
.outline-button--active {
padding-left: 1rem;
}
.outline-button--active::before { .outline-button--active::before {
opacity: 1; opacity: 1;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
.enable-focus-button {
flex-shrink: 0;
}
.label { .label {
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
@ -667,12 +677,13 @@ sm-copy {
} }
#article_list { #article_list {
gap: 0 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr)); grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
} }
.article-link { .article-link {
position: relative; position: relative;
padding: 1rem; padding: 1rem 0;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
font-weight: 500; font-weight: 500;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -751,6 +762,9 @@ sm-copy {
.heading button { .heading button {
margin-left: auto; margin-left: auto;
} }
.heading .section-title {
line-height: 1.4;
}
.article-section { .article-section {
gap: 1rem; gap: 1rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

39
css/main.scss
View File

@ -419,19 +419,21 @@ ul {
stroke: none; stroke: none;
} }
} }
details { details summary {
summary { display: flex;
display: flex; user-select: none;
justify-content: space-between; cursor: pointer;
user-select: none; align-items: center;
cursor: pointer; justify-content: space-between;
} color: var(--accent-color);
}
&[open] > summary { details[open] {
& summary {
margin-bottom: 1rem; margin-bottom: 1rem;
.icon { }
transform: rotate(180deg); & > summary .down-arrow {
} transform: rotate(180deg);
} }
} }
sm-select, sm-select,
@ -538,8 +540,7 @@ sm-copy {
} }
#main_header { #main_header {
position: sticky; position: relative;
top: 0;
display: grid; display: grid;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
@ -574,7 +575,9 @@ sm-copy {
padding: 0.5rem 0; padding: 0.5rem 0;
text-align: left; text-align: left;
line-height: 1.7; line-height: 1.7;
width: 100%;
&::before { &::before {
position: absolute;
content: ""; content: "";
width: 0.3rem; width: 0.3rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -586,12 +589,16 @@ sm-copy {
opacity: 0; opacity: 0;
} }
&--active { &--active {
padding-left: 1rem;
&::before { &::before {
opacity: 1; opacity: 1;
background-color: var(--accent-color); background-color: var(--accent-color);
} }
} }
} }
.enable-focus-button {
flex-shrink: 0;
}
.label { .label {
font-size: 0.8rem; font-size: 0.8rem;
@ -625,12 +632,13 @@ sm-copy {
} }
} }
#article_list { #article_list {
gap: 0 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr)); grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
} }
.article-link { .article-link {
position: relative; position: relative;
padding: 1rem; padding: 1rem 0;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
font-weight: 500; font-weight: 500;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -706,6 +714,9 @@ sm-copy {
button { button {
margin-left: auto; margin-left: auto;
} }
.section-title {
line-height: 1.4;
}
} }
.article-section { .article-section {

91
index.html
View File

@ -174,6 +174,14 @@
<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" /> <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
</svg> </svg>
</button> </button>
<button class="icon-only" title="Refresh article" onclick="refreshArticle()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
</svg>
</button>
<sm-menu align-options="right" title="Admin options" class="admin-option"> <sm-menu align-options="right" title="Admin options" class="admin-option">
<menu-option onclick="openPopup('create_article_popup')"> <menu-option onclick="openPopup('create_article_popup')">
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
@ -510,13 +518,26 @@
<h3>plot</h3> <h3>plot</h3>
</div> </div>
</header> </header>
<details id="plot_wrapper" class="hidden"> <div class="grid gap-2">
<summary>Plot</summary> <details id="plot_wrapper" class="hidden">
<div id="plot_diagram"></div> <summary class="interact">
</details> <b style="font-size: 0.9rem;">See plot diagram</b>
<div class="grid gap-0-5"> <svg class="icon down-arrow" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
<h4>Article sections</h4> width="24px" fill="#000000">
<ul id="article_outline" class="flex flex-direction-column gap-1"></ul> <path d="M0 0h24v24H0V0z" fill="none" />
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
</svg>
</summary>
<div id="plot_diagram" style="line-height: 1.5;"></div>
</details>
<div class="grid gap-1">
<div class="flex align-center space-between">
<h4>Article sections</h4>
<button id="toggle_focus_mode" class="button hide" onclick="toggleFocusMode()">Turn on focus
mode</button>
</div>
<ul id="article_outline" class="flex flex-direction-column gap-1"></ul>
</div>
</div> </div>
</sm-popup> </sm-popup>
<sm-popup id="contributors_popup"> <sm-popup id="contributors_popup">
@ -789,6 +810,9 @@
case 'article_list_popup': case 'article_list_popup':
renderArticleList() renderArticleList()
break; break;
case 'plot_popup':
getRef('toggle_focus_mode').textContent = floGlobals.focusMode.active ? 'Turn off focus mode' : 'Turn on focus mode'
break;
} }
}) })
document.addEventListener('popupclosed', e => { document.addEventListener('popupclosed', e => {
@ -972,14 +996,6 @@
const urlSearchParams = new URLSearchParams('?' + searchParams); const urlSearchParams = new URLSearchParams('?' + searchParams);
params = Object.fromEntries(urlSearchParams.entries()); params = Object.fromEntries(urlSearchParams.entries());
} }
if (firstLoad || params.articleID !== pagesData.params.articleID) {
if (!params.articleID)
params['articleID'] = floGlobals.appObjects.cc.defaultArticle
await Promise.all([
floCloudAPI.requestObjectData(params.articleID),
floCloudAPI.requestGeneralData(`${params.articleID}_gd`)
])
}
switch (pageId) { switch (pageId) {
case 'landing': case 'landing':
targetPage = 'landing' targetPage = 'landing'
@ -998,6 +1014,14 @@
break; break;
case 'home': case 'home':
case 'main_page': case 'main_page':
if (firstLoad || params.articleID !== pagesData.params.articleID) {
if (!params.articleID)
params['articleID'] = floGlobals.appObjects.cc.defaultArticle
await Promise.all([
floCloudAPI.requestObjectData(params.articleID),
floCloudAPI.requestGeneralData(`${params.articleID}_gd`)
])
}
if (!floGlobals.currentArticle.id || params.articleID !== pagesData.params.articleID || params.focusMode !== pagesData.params.focusMode) { if (!floGlobals.currentArticle.id || params.articleID !== pagesData.params.articleID || params.focusMode !== pagesData.params.focusMode) {
closePopup() closePopup()
render.article(params.articleID, params.focusMode === 'true') render.article(params.articleID, params.focusMode === 'true')
@ -1152,6 +1176,7 @@
}) })
return anime return anime
} }
</script> </script>
<script> <script>
// JS Diff // JS Diff
@ -1664,7 +1689,10 @@
You are only seeing one section assigned to you. Turn off focus mode to see all sections. You are only seeing one section assigned to you. Turn off focus mode to see all sections.
</p> </p>
</div> </div>
<a id="focus_mode_button" href="${`#/home?articleID=${id}&focusMode=false`}" class="button">Turn off</a> <div class="flex gap-0-3">
<button class="button" onclick="openPopup('plot_popup')">View plot</button>
<a id="focus_mode_button" href="${`#/home?articleID=${id}&focusMode=false`}" class="button">Turn off</a>
</div>
</div> </div>
`) `)
floGlobals.focusMode = { floGlobals.focusMode = {
@ -1778,19 +1806,29 @@
}, },
sectionOutline() { sectionOutline() {
const sections = floGlobals.appObjects[floGlobals.currentArticle.id].sections.filter(v => v).map(({ id, title }) => { const sections = floGlobals.appObjects[floGlobals.currentArticle.id].sections.filter(v => v).map(({ id, title }) => {
let shouldBeDisabled = floGlobals.focusMode.active && floGlobals.focusMode.assignedSection !== id let shouldBeDisabled
let assignedState
if (floGlobals.focusMode.active) {
if (floGlobals.focusMode.assignedSection === id) {
assignedState = 'assigned'
assignedState = html`<span style="font-size: 0.8rem">Assigned</span>`
} else {
shouldBeDisabled = true
assignedState = html`<button class="button enable-focus-button" data-section-id="${id}">Assign</button>`
}
}
return html.for(getRef('article_outline'), id)` return html.for(getRef('article_outline'), id)`
<div class="flex gap-0-5 align-center"> <div class="flex gap-0-5 align-center">
<button class="outline-button" data-section-id="${id}" ?disabled=${shouldBeDisabled}> <button class="outline-button" data-section-id="${id}" ?disabled=${shouldBeDisabled}>
${title} ${title}
</button> </button>
${shouldBeDisabled ? html`<button class="button enable-focus-button" data-section-id="${id}">Focus</button>` : ''} ${assignedState}
</div> ` </div> `
}) })
renderElem(getRef('article_outline'), html`${sections}`) renderElem(getRef('article_outline'), html`${sections}`)
if (floGlobals.currentArticle.hasOwnProperty('plot')) { if (floGlobals.appObjects[floGlobals.currentArticle.id].hasOwnProperty('plot')) {
getRef('plot_diagram').textContent = floGlobals.currentArticle.plot getRef('plot_diagram').textContent = floGlobals.appObjects[floGlobals.currentArticle.id].plot
getRef('plot_wrapper').classList.remove('hidden') getRef('plot_wrapper').classList.remove('hidden')
} else { } else {
getRef('plot_wrapper').classList.add('hidden') getRef('plot_wrapper').classList.add('hidden')
@ -2166,6 +2204,19 @@
closePopup() closePopup()
} }
}) })
function toggleFocusMode() {
closePopup()
floGlobals.focusMode.active = !floGlobals.focusMode.active
location.hash = `#/home?articleID=${floGlobals.currentArticle.id}&focusMode=${floGlobals.focusMode.active}`
}
async function refreshArticle() {
await Promise.all([
floCloudAPI.requestObjectData(floGlobals.currentArticle.id),
floCloudAPI.requestGeneralData(`${floGlobals.currentArticle.id}_gd`)
])
render.article(floGlobals.currentArticle.id, floGlobals.focusMode.active)
notify('Article refreshed', 'success')
}
function transformScroll(event) { function transformScroll(event) {
if (!event.deltaY) { if (!event.deltaY) {
return; return;