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

Fixed page routing for preview link sharing

Browse Source
This commit is contained in:
sairaj mote 2022-01-02 17:54:26 +05:30
parent ee26712514
commit 66ed2bd489
4 changed files with 97 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/main.css
View File

@ -537,13 +537,18 @@ sm-copy {
padding: 1.5rem 0;
}
#landing > section {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 6rem;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
#landing h1 {
margin-top: -2ch;
font-size: clamp(2rem,5vw,5rem);
}
#landing p {
max-width: 100%;
}
#sign_in,
#sign_up {
@ -1164,6 +1169,12 @@ sm-copy {
display: none;
}
}
@supports (-webkit-text-stroke: 1px black) {
#landing h1 {
-webkit-text-stroke: 1px rgba(var(--text-color), 1);
-webkit-text-fill-color: rgba(var(--background-color), 1);
}
}
@media screen and (min-width: 40rem) {
sm-popup {
--width: 24rem;
@ -1202,6 +1213,10 @@ sm-copy {
display: none;
}
#landing h1 {
-webkit-text-stroke-width: 0.1rem;
}
#main_header {
padding: 1rem 1.5rem;
grid-template-columns: auto 1fr auto auto;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

22
css/main.scss
View File

@ -464,11 +464,16 @@ sm-copy {
padding: 1.5rem 0;
}
& > section {
align-items: flex-start;
margin-top: 6rem;
height: 100%;
align-items: center;
text-align: center;
}
h1{
margin-top: -2ch;
font-size: clamp(2rem,5vw,5rem);
}
p{
max-width: 100%;
}
}
#sign_in,
@ -1009,6 +1014,12 @@ sm-copy {
display: none;
}
}
@supports (-webkit-text-stroke: 1px black) {
#landing h1 {
-webkit-text-stroke: 1px rgba(var(--text-color), 1);
-webkit-text-fill-color: rgba(var(--background-color), 1);
}
}
@media screen and (min-width: 40rem) {
sm-popup {
--width: 24rem;
@ -1041,6 +1052,9 @@ sm-copy {
.hide-on-desktop {
display: none;
}
#landing h1 {
-webkit-text-stroke-width: .1rem;
}
#main_header {
padding: 1rem 1.5rem;
grid-template-columns: auto 1fr auto auto;
@ -1150,4 +1164,4 @@ sm-copy {
opacity: 1;
}
}
}
}

190
index.html
View File

@ -79,7 +79,7 @@
<section class="grid justify-center">
<div class="grid gap-0-5">
<h1 class="h1">Create. Collaborate. <br>Publish.</h1>
<p>Write content with collaboration </p>
<p>Write something great... <strong>Together</strong>.</p>
</div>
</section>
</article>
@ -932,7 +932,7 @@
}
async function showPage(targetPage, options = {}) {
const { firstLoad, hashChange } = options
const { firstLoad, hashChange, isPreview } = options
let pageId
let params = {}
let searchParams
@ -959,6 +959,9 @@
pageId = targetPage
}
}
if (isPreview) {
floGlobals.preview = location.hash;
}
if (typeof myFloID === "undefined" && !(['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) return
if (searchParams) {
const urlSearchParams = new URLSearchParams('?' + searchParams);
@ -1206,7 +1209,7 @@
]
const cc = {
createNewArticle() {
if (isSubAdmin) {
if (floGlobals.isSubAdmin) {
const title = getRef('get_article_title').value.trim()
const setDefault = getRef('set_default_checkbox').checked
const sectionTitles = getRef('get_section_titles').value.trim()
@ -1249,7 +1252,7 @@
}
function setDefaultArticle() {
if (isSubAdmin) {
if (floGlobals.isSubAdmin) {
getConfirmation('Set as default article?').then(res => {
if (res) {
floGlobals.appObjects.cc['defaultArticle'] = floGlobals.currentArticle.id
@ -1274,7 +1277,6 @@
contentCard.querySelector('.submit-entry').classList.add('hide-completely')
} else {
const clean = DOMPurify.sanitize(contentArea.innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'] })
.replace(/b>/gi, 'strong>').replace(/i>/gi, 'em>')
const hash = Crypto.SHA256(clean)
let previousHash
if (!isUniqueEntry) {
@ -1304,7 +1306,6 @@
const parentSection = contentCard.closest('.article-section')
const sectionID = parentSection.dataset.sectionId
const clean = DOMPurify.sanitize(contentArea.innerHTML.split('\n').map(v => v.trim()).filter(v => v).join('\n'), { FORBID_ATTR: ['style'] })
.replace(/b>/gi, 'strong>').replace(/i>/gi, 'em>')
if (clean === '') return
const hash = Crypto.SHA256(clean)
let previousVersion, previousHash
@ -1429,14 +1430,14 @@
})
floGlobals.currentArticle.sections[sectionID].expanded = true
}
} else if (e.target.closest('.score-button') && isSubAdmin) {
} else if (e.target.closest('.score-button') && floGlobals.isSubAdmin) {
floGlobals.versionHistory.currentEntry = e.target.closest('.content-card').dataset.vectorClock
getRef('update_score_field').value = e.target.closest('.score-button').children[1].textContent
showPopup('scoring_popup')
}
})
getRef('version_timeline').addEventListener('click', e => {
if (e.target.closest('.score-button') && isSubAdmin) {
if (e.target.closest('.score-button') && floGlobals.isSubAdmin) {
floGlobals.versionHistory.currentEntry = e.target.closest('.history-entry').dataset.vectorClock
getRef('update_score_field').value = e.target.closest('.score-button').children[1].textContent
showPopup('scoring_popup')
@ -1459,7 +1460,7 @@
const contentCard = e.target.closest('.content-card')
const contentID = contentCard.dataset.uid
contentCard.classList.toggle('selected')
if (!isSubAdmin)
if (!floGlobals.isSubAdmin)
contentCard.querySelector('.content__area').toggleAttribute('contenteditable')
if (selectedContent.has(contentID)) {
selectedContent.delete(contentID)
@ -1619,7 +1620,7 @@
bodyTemplate.querySelector('#reading_time').textContent = `${readingTime} min read`
let bodyAttributes = ''
let extraScripts = ''
if (isSubAdmin) {
if (floGlobals.isSubAdmin) {
bodyAttributes = `data-article-id="${floGlobals.currentArticle.id}" onload="onLoadStartUp()"`
// copy script already present in this file instead of storing a duplicate
extraScripts = `
@ -1658,7 +1659,7 @@
window.location.hash = `#/home?articleID=${pagesData.params.articleID}`
}
function sharePreview() {
if (isSubAdmin) {
if (floGlobals.isSubAdmin) {
let allContributors = new Set()
selectedContent.forEach(({ contributors }) => {
contributors.forEach(id => allContributors.add(id))
@ -1694,7 +1695,7 @@
}
function publishArticle() {
if (isSubAdmin) {
if (floGlobals.isSubAdmin) {
const category = getRef('published_article_category').value
const tags = getRef('article_tags').value
console.log(category, tags)
@ -1830,8 +1831,6 @@
hidePopup()
}).catch(err => notify(err, 'error'))
}
</script>
<script>
floGlobals.currentArticle = {}
const sectionIntersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
@ -1839,7 +1838,7 @@
const section = entry.target.parentNode
const frag = document.createDocumentFragment();
const arrayOfElements = floGlobals.currentArticle.sections[section.dataset.sectionId].uniqueEntries
const startIndex = isSubAdmin ? section.children.length : section.children.length - 1
const startIndex = floGlobals.isSubAdmin ? section.children.length : section.children.length - 1
arrayOfElements.slice(startIndex, startIndex + 5).forEach(elem => frag.append(render.contentCard(elem)))
entry.target.parentNode.append(frag)
}
@ -1872,7 +1871,7 @@
handleMobileChange(mobileQuery)
function getScoreElement(score) {
let scoreElement
if (isSubAdmin) {
if (floGlobals.isSubAdmin) {
scoreElement = createElement('button', {
className: 'score-button',
attributes: { 'title': 'Score this content' }
@ -1904,7 +1903,7 @@
frag.append(render.section(sectionID, sections[sectionID], index))
index += 1
}
if (!isSubAdmin) {
if (!floGlobals.isSubAdmin) {
getRef('current_article_title').setAttribute('disabled', '')
}
getRef('current_article_title').value = title
@ -1940,7 +1939,7 @@
const clone = getRef('content_card_template').content.cloneNode(true).firstElementChild;
clone.dataset.uid = id
clone.dataset.vectorClock = vectorClock
if (!isSubAdmin) {
if (!floGlobals.isSubAdmin) {
clone.querySelector('.content__area').setAttribute('contentEditable', true)
}
clone.querySelector('.content__area').innerHTML = DOMPurify.sanitize(data)
@ -2002,7 +2001,7 @@
section.children[0].dataset.index = index
section.children[0].dataset.sectionId = sectionID
section.children[1].dataset.sectionId = sectionID
if (isSubAdmin) {
if (floGlobals.isSubAdmin) {
section.querySelector('.content-card--empty').remove()
} else {
section.querySelector('text-field').setAttribute('disabled', '')
@ -2184,7 +2183,7 @@
allContentCards[card.dataset.uid] = card.cloneNode(true)
})
let emptyCard
if (!isSubAdmin)
if (!floGlobals.isSubAdmin)
emptyCard = section.firstElementChild.cloneNode(true)
section.innerHTML = ''
const frag = document.createDocumentFragment()
@ -2196,7 +2195,7 @@
toRender.forEach((entry, index) => {
frag.append(allContentCards[entry] || render.contentCard(entry))
})
if (!isSubAdmin)
if (!floGlobals.isSubAdmin)
section.append(emptyCard)
section.append(frag)
}
@ -2204,7 +2203,7 @@
}
getRef('sort_content_list').addEventListener('change', sortSectionEntries)
function renderSectionList() {
if (!isSubAdmin) return
if (!floGlobals.isSubAdmin) return
const frag = document.createDocumentFragment()
floGlobals.appObjects[floGlobals.currentArticle.id].sections.forEach(section => {
frag.append(render.sectionCard(section))
@ -2236,7 +2235,7 @@
})
function saveSectionEdit() {
if (isSubAdmin) {
if (floGlobals.isSubAdmin) {
const newSections = []
getRef('section_list_container').querySelectorAll('.section-card--new').forEach(section => {
const title = section.querySelector('input').value.trim()
@ -2497,110 +2496,18 @@
}
}
const replaceBetween = (origin, startIndex, endIndex, insertion) =>
`${origin.substring(0, startIndex)}${insertion}${origin.substring(endIndex)}`;
const make = {
bold() {
replaceSelectedText(createElement('strong'))
},
italic() {
document.execCommand('italic')
},
underlined() {
replaceSelectedText(createElement('u'))
},
link() {
replaceSelectedText(createElement('a', {
attributes: { href: 'google.com' }
}))
}
}
function replaceSelectedText(node) {
const selection = window.getSelection();
if (!selection.isCollapsed && selection.rangeCount) {
const range = selection.getRangeAt(0);
const originalText = range.toString()
const { isBold, isItalic, isUnderlined } = getSelectionFormatting()
if (isBold || isItalic || isUnderlined) {
if (range.cloneContents().firstElementChild) {
range.deleteContents()
const textNode = document.createTextNode(originalText)
range.insertNode(textNode);
} else {
const temp = document.createTextNode(originalText)
const textNode = document.createTextNode(originalText)
range.insertNode(temp);
temp.parentNode.after(textNode)
temp.parentNode.remove()
}
normalizeText(selection.anchorNode.parentNode.closest('.content__area'))
} else {
range.deleteContents()
node.textContent = originalText
range.insertNode(node);
}
range.deleteContents()
node.textContent = originalText
range.insertNode(node);
selection.anchorNode.parentNode.closest('.content__area')?.focus()
}
}
function getSelectionFormatting() {
const sel = window.getSelection();
const raw_html = getSelectionAsHtml();
// This is if nothing is selected
if (raw_html === "") return false;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = raw_html;
const areBoldNodes = []
const areItalicNodes = []
const areUnderlinedNodes = []
for (let node of tempDiv.childNodes) {
let tags = [node.nodeName.toLowerCase()];
while (tags.includes("#text")) {
let start_tag = sel.anchorNode.parentNode.nodeName.toLowerCase();
let end_tag = sel.focusNode.parentNode.nodeName.toLowerCase();
tags = [start_tag, end_tag]
}
areBoldNodes.push(containsOnly(['strong'], tags));
areItalicNodes.push(containsOnly(['em'], tags));
areUnderlinedNodes.push(containsOnly(['u'], tags));
}
return {
isBold: !areBoldNodes.includes(false),
isItalic: !areItalicNodes.includes(false),
isUnderlined: !areUnderlinedNodes.includes(false),
}
}
function getSelectionAsHtml() {
let html = "";
if (typeof window.getSelection != "undefined") {
let sel = window.getSelection();
if (sel.rangeCount) {
let container = document.createElement("div");
for (let i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
function containsOnly(array1, array2) {
return !array2.some(elem => !array1.includes(elem))
}
function insertNode(node) {
const selection = window.getSelection();
if (selection.rangeCount) {
@ -2618,12 +2525,22 @@
function insertBlockquote() {
insertNode(createQuote())
}
function getRelativeCount(count) {
if (count < 1000)
return count
else if (count < 1000000)
return parseFloat((count / 1000).toFixed(1)) + 'K'
else if (count < 1000000000)
return parseFloat((count / 1000000).toFixed(1)) + 'M'
}
function getSignedIn() {
return new Promise((resolve, reject) => {
if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
showPage(window.location.hash)
} else {
showPage('landing')
showPage('landing', { isPreview: location.hash.includes('preview') })
}
getRef('sign_in_button').onclick = () => {
resolve(getRef('private_key_field').value.trim())
@ -2648,7 +2565,7 @@
}
</script>
<script id="onLoadStartUp">
let isSubAdmin = false
floGlobals.isSubAdmin = false
let maxCardsPerSection
function onLoadStartUp() {
@ -2659,9 +2576,9 @@
floDapps.launchStartUp().then(async result => {
getRef('user_flo_id').value = myFloID
isSubAdmin = floGlobals.subAdmins.includes(myFloID)
maxCardsPerSection = isSubAdmin ? 3 : 2
if (isSubAdmin) {
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
maxCardsPerSection = floGlobals.isSubAdmin ? 3 : 2
if (floGlobals.isSubAdmin) {
document.querySelectorAll('.admin-option').forEach(elem => elem.classList.remove('hide-completely'))
} else {
document.querySelectorAll('.admin-option').forEach(elem => elem.classList.add('hide-completely'))
@ -2670,7 +2587,7 @@
floCloudAPI.requestObjectData('cc'),
])
getRef('preview_options').innerHTML = `
${isSubAdmin ? `
${floGlobals.isSubAdmin ? `
<button class="icon-only" title="Share preview" onclick="sharePreview()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <path d="M16,5l-1.42,1.42l-1.59-1.59V16h-1.98V4.83L9.42,6.42L8,5l4-4L16,5z M20,10v11c0,1.1-0.9,2-2,2H6c-1.11,0-2-0.9-2-2V10 c0-1.11,0.89-2,2-2h3v2H6v11h12V10h-3V8h3C19.1,8,20,8.89,20,10z" /> </g> </svg>
</button>
@ -2678,8 +2595,8 @@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z" /> </g> </svg>
</button>
`: ''}
<sm-button variant="primary" onclick="${isSubAdmin ? "showPopup('publish_article_popup')" : 'exportSelection()'}">
${isSubAdmin ? `
<sm-button variant="primary" onclick="${floGlobals.isSubAdmin ? "showPopup('publish_article_popup')" : 'exportSelection()'}">
${floGlobals.isSubAdmin ? `
<svg class="icon button__icon--left" 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="M5 4h14v2H5zm0 10h4v6h6v-6h4l-7-7-7 7zm8-2v6h-2v-6H9.83L12 9.83 14.17 12H13z" /> </svg>
Publish
`: `
@ -2689,7 +2606,8 @@
</sm-button>
`
if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
history.replaceState(null, null, ' ')
const hash = floGlobals.preview ? floGlobals.preview : ' '
history.replaceState(null, null, hash)
}
showPage(window.location.hash, { firstLoad: true })
console.log(result)
@ -13184,11 +13102,11 @@
}
const tempCount = document.createElement('div')
tempCount.classList.add('temp-count')
tempCount.textContent = totalVotes
tempCount.textContent = getRelativeCount(totalVotes)
getRef('like_count').after(tempCount)
tempCount.animate(slideInUp, animOptions)
.onfinish = () => {
getRef('like_count').textContent = totalVotes
getRef('like_count').textContent = getRelativeCount(totalVotes)
tempCount.remove()
}
}
@ -13291,6 +13209,14 @@
animateTo(getRef('sign_up'), slideInLeft, animOptions)
}
}
function getRelativeCount(count) {
if (count < 1000)
return count
else if (count < 1000000)
return parseFloat((count / 1000).toFixed(1)) + 'K'
else if (count < 1000000000)
return parseFloat((count / 1000000).toFixed(1)) + 'M'
}
function goToSignIn() {
const animOptions = {
fill: 'forwards',
@ -13316,7 +13242,7 @@
</script>
<script id="onLoadStartUp">
let isSubAdmin = false
floGlobals.isSubAdmin = false
let isLoggedIn = false
let totalVotes = 0
function onLoadStartUp() {
@ -13336,7 +13262,7 @@
totalVotes++
}
}
getRef('like_count').textContent = totalVotes
getRef('like_count').textContent = getRelativeCount(totalVotes)
} else {
animateLikeCount()
}
@ -13362,7 +13288,7 @@
floDapps.launchStartUp().then(async result => {
isLoggedIn = true
isSubAdmin = floGlobals.subAdmins.includes(myFloID)
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
getRef('user_flo_id').value = myFloID
getRef('user_button').classList.remove('hide-completely')