Bug fixes and feature update

added article publication logic

css/main.css

@@ -101,7 +101,7 @@ button,
 
 .button {
   white-space: nowrap;
-  padding: 0.6rem 1rem;
+  padding: 0.5rem 0.8rem;
   border-radius: 0.3rem;
   background-color: rgba(var(--text-color), 0.06);
   color: rgba(var(--text-color), 0.8);
@@ -114,6 +114,11 @@ button,
   color: rgba(var(--background-color), 1);
 }
 
+.icon-only {
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+}
+
 button:disabled {
   opacity: 0.5;
 }
@@ -137,7 +142,7 @@ sm-textarea {
 }
 
 sm-button {
-  --padding: 0.6rem 0.8rem;
+  --padding: 0.5rem 0.8rem;
   -webkit-transition: -webkit-transform 0.3s;
   transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
@@ -224,10 +229,6 @@ ul {
   display: grid;
 }
 
-.grid-3 {
-  grid-template-columns: 1fr auto auto;
-}
-
 .flow-column {
   grid-auto-flow: column;
 }
@@ -513,6 +514,8 @@ menu-option {
 }
 
 #main_header {
+  position: sticky;
+  top: 0;
   display: grid;
   gap: 1rem;
   padding: 1rem;
@@ -975,23 +978,22 @@ menu-option {
 }
 
 @media screen and (max-width: 40rem) {
-  sm-button {
-    --padding: 0.9rem 1.6rem;
-  }
-
   #article_name_wrapper,
 #selected_content_options {
     grid-row: 2/3;
     grid-column: 1/-1;
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start;
   }
   #article_name_wrapper sm-menu,
 #selected_content_options sm-menu {
     margin-left: auto;
   }
 
+  #article_name_wrapper {
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+  }
+
   .hide-on-mobile {
     display: none;
   }

css/main.scss

@@ -92,7 +92,7 @@ button,
 }
 .button {
   white-space: nowrap;
-  padding: 0.6rem 1rem;
+  padding: 0.5rem 0.8rem;
   border-radius: 0.3rem;
   background-color: rgba(var(--text-color), 0.06);
   color: rgba(var(--text-color), 0.8);
@@ -102,6 +102,10 @@ button,
     color: rgba(var(--background-color), 1);
   }
 }
+.icon-only{
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+}
 
 button:disabled {
   opacity: 0.5;
@@ -117,7 +121,7 @@ sm-textarea {
   --border-radius: 0.3rem;
 }
 sm-button {
-  --padding: 0.6rem 0.8rem;
+  --padding: 0.5rem 0.8rem;
   transition: transform 0.3s;
   &[variant="primary"] {
     .icon {
@@ -203,11 +207,6 @@ ul {
 .grid {
   display: grid;
 }
-
-.grid-3 {
-  grid-template-columns: 1fr auto auto;
-}
-
 .flow-column {
   grid-auto-flow: column;
 }
@@ -448,6 +447,8 @@ menu-option {
 }
 
 #main_header {
+  position: sticky;
+  top: 0;
   display: grid;
   gap: 1rem;
   padding: 1rem;
@@ -849,18 +850,17 @@ menu-option {
 }
 
 @media screen and (max-width: 40rem) {
-  sm-button {
-    --padding: 0.9rem 1.6rem;
-  }
   #article_name_wrapper,
   #selected_content_options {
     grid-row: 2/3;
     grid-column: 1/-1;
-    justify-content: flex-start;
     sm-menu {
       margin-left: auto;
     }
   }
+  #article_name_wrapper{
+    justify-content: flex-start;
+  }
   .hide-on-mobile {
     display: none;
   }

index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CC</title>
+    <title>Content Collaboration</title>
     <script src="components.js" defer></script>
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -70,12 +70,11 @@
                         d="M14 16.591C16.2349 15.7182 17.8182 13.544 17.8182 11C17.8182 8.45602 16.2349 6.28183 14 5.40903C14.6762 5.14494 15.4121 5 16.1818 5C19.4955 5 22.1818 7.68629 22.1818 11C22.1818 14.3137 19.4955 17 16.1818 17C15.4121 17 14.6762 16.8551 14 16.591Z" />
                 </svg>
                 <div class="grid">
-                    <span class="label">RanchiMall</span>
+                    <h4>RanchiMall CC</h4>
-                    <h4>Content Collaboration</h4>
                 </div>
             </div>
             <div id="article_name_wrapper" class="flex gap-0-5 align-center justify-center">
-                <button title="Show all articles list" onclick="showPopup('article_list_popup')">
+                <button class="icon-only" title="Show all articles list" onclick="showPopup('article_list_popup')">
                     <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" />
@@ -84,15 +83,14 @@
                     </svg>
                 </button>
                 <text-field id="current_article_title"></text-field>
-                <button class="button" onclick="toggleFilterPanel()">
+                <button class="icon-only" title="Show filters" onclick="toggleFilterPanel()">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        fill="#000000">
                         <path d="M0 0h24v24H0V0z" fill="none" />
                         <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
                     </svg>
-                    Filters
                 </button>
-                <sm-menu align-options="right">
+                <sm-menu align-options="right" title="Admin options">
                     <menu-option onclick="showPopup('create_article_popup')">
                         <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
                             viewBox="0 0 24 24" width="24px" fill="#000000">
@@ -127,7 +125,16 @@
                     </menu-option>
                 </sm-menu>
             </div>
-            <div id="selected_content_options" class="flex hide-completely">
+            <div id="selected_content_options" class="flex space-between hide-completely">
+                <button onclick="clearSelection()" title="Clear selection">
+                    <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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                    </svg>
+                    <div id="selected_entries_no"></div>
+                </button>
                 <button class="button" onclick="renderPreview()">
                     <svg class="icon button__icon--left" 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">
@@ -181,14 +188,14 @@
                         d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" />
                 </svg>
             </button>
-            <button class="formatting-button" title="Add quote" onclick="insertBlockquote()">
+            <!-- <button class="formatting-button" title="Add quote" onclick="insertBlockquote()">
                 <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="M18.62 18h-5.24l2-4H13V6h8v7.24L18.62 18zm-2-2h.76L19 12.76V8h-4v4h3.62l-2 4zm-8 2H3.38l2-4H3V6h8v7.24L8.62 18zm-2-2h.76L9 12.76V8H5v4h3.62l-2 4z" />
                 </svg>
-            </button>
+            </button> -->
         </div>
         <div id="article_wrapper"></div>
         <aside id="version_history_panel" class="flex direction-column hide-completely">
@@ -227,50 +234,11 @@
                         Preview
                     </button>
                 </div>
-                <div class="flex align-center gap-0-5">
+                <div id="preview_options" class="flex align-center gap-0-5"></div>
-                    <sm-button variant="primary">
-                        <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
-                    </sm-button>
-                    <sm-menu align-options="right">
-                        <menu-option onclick="exportSelection()">
-                            <svg class="icon button__icon--left" 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>
-                            Download as HTML
-                        </menu-option>
-                        <menu-option onclick="sharePreview()">
-                            <svg class="icon button__icon--left" 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>
-                            Share preview
-                        </menu-option>
-                    </sm-menu>
-                </div>
             </div>
             <h1 id="preview__title" class="article__title"></h1>
         </header>
-        <div id="preview__body"></div>
+        <main id="preview__body"></main>
     </article>
     <sm-popup id="article_list_popup">
         <header slot="header" class="popup__header">
@@ -810,6 +778,7 @@
                 case 'preview':
                 case 'preview_page':
                     if (params.uid) {
+                        getRef('preview__title').textContent = floGlobals.appObjects.cc.articleList[params.articleID].title
                         getRef('preview__body').innerHTML = floGlobals.appObjects[params.articleID].preview.content
                     }
                     targetPage = 'preview_page'
@@ -1234,6 +1203,7 @@
                     easing: 'ease',
                 }
                 const selectedContentSize = selectedContent.size
+                getRef('selected_entries_no').textContent = `${selectedContentSize} selected`
                 if (selectedContentSize === 1 && !isContentSelected) {
                     getRef('article_name_wrapper').classList.remove('hide-completely')
                     getRef('selected_content_options').classList.add('hide-completely')
@@ -1257,6 +1227,7 @@
                 }
             }
         })
+
         function formatSelectedContent() {
             const composedDocumentStructure = {}
             floGlobals.appObjects[currentArticle.id].sections.forEach(section => composedDocumentStructure[section.id] = [])
@@ -1270,6 +1241,13 @@
             return composedDocumentStructure
         }
 
+        function clearSelection() {
+            selectedContent.forEach((v, key) => {
+                getRef('article_wrapper').querySelector(`.content-card[data-uid="${key}"] sm-checkbox`).checked = false
+            })
+            selectedContent.clear()
+        }
+
         function renderPreview() {
             const composedDocumentStructure = formatSelectedContent()
             let frag = document.createDocumentFragment()
@@ -1279,7 +1257,7 @@
                     textContent: currentArticle.sections[section].title
                 }))
                 composedDocumentStructure[section].forEach(({ content, uid }) => {
-                    const group = createElement('div', {
+                    const group = createElement('section', {
                         className: 'preview-group',
                         attributes: { 'data-section-id': section, 'data-uid': uid },
                         innerHTML: content
@@ -1325,28 +1303,21 @@
             document.body.removeChild(element);
         }
 
+        function getCleanExportContent() {
+            const exportContent = getRef('preview__body').cloneNode(true)
+            exportContent.querySelectorAll('.preview-group').forEach(section => {
+                section.lastElementChild.remove()
+                section.replaceWith(...section.childNodes)
+            })
+            return DOMPurify.sanitize(exportContent.innerHTML)
+        }
+
         function exportSelection() {
             const bodyTemplate = getRef('body_template').content.cloneNode(true)
-            const composedDocumentStructure = formatSelectedContent()
-            let frag = document.createDocumentFragment()
-
-            for (const section in composedDocumentStructure) {
-                frag.append(createElement('h3', {
-                    textContent: currentArticle.sections[section].title
-                }))
-                composedDocumentStructure[section].forEach(({ content, uid }) => {
-                    const group = createElement('section', {
-                        className: 'grid gap-1',
-                        innerHTML: content
-                    })
-                    frag.append(group)
-                })
-            }
             const articleTitle = floGlobals.appObjects.cc.articleList[currentArticle.id].title
             bodyTemplate.querySelector('#exported_title').textContent = articleTitle
             bodyTemplate.querySelector('#exported_time').textContent = `Exported on ${getFormattedTime(Date.now())}`
-            bodyTemplate.querySelector('#export_body').innerHTML = ''
+            bodyTemplate.querySelector('#export_body').innerHTML = getCleanExportContent()
-            bodyTemplate.querySelector('#export_body').append(frag)
             let bodyAttributes = ''
             let extraScripts = ''
             if (isSubAdmin) {
@@ -1385,35 +1356,6 @@
         function goHome() {
             window.location.hash = `#/home?articleID=${pagesData.params.articleID}`
         }
-        getRef('preview_page').addEventListener('click', e => {
-            if (e.target.closest('.move-up')) {
-                const currentElement = e.target.closest('.preview-group')
-                const previousSibling = currentElement.previousElementSibling
-                if (previousSibling?.dataset.sectionId === currentElement.dataset.sectionId) {
-                    const clone = currentElement.cloneNode(true)
-                    previousSibling.before(clone)
-                    currentElement.remove()
-                }
-            } else if (e.target.closest('.move-down')) {
-                const currentElement = e.target.closest('.preview-group')
-                const nextSibling = currentElement.nextElementSibling
-                if (nextSibling?.dataset.sectionId === currentElement.dataset.sectionId) {
-                    const clone = currentElement.cloneNode(true)
-                    nextSibling.after(clone)
-                    currentElement.remove()
-                }
-            } else if (e.target.closest('.remove-group')) {
-                const currentElement = e.target.closest('.preview-group')
-                const uid = currentElement.dataset.uid
-                if (currentArticle.id) {
-                    getRef('article_wrapper').querySelector(`.content-card[data-uid="${uid}"] sm-checkbox`).checked = false
-                }
-                if (!currentElement.nextElementSibling && currentElement.previousElementSibling.tagName === 'H3') {
-                    currentElement.previousElementSibling.remove()
-                }
-                currentElement.remove()
-            }
-        })
         function sharePreview() {
             if (isSubAdmin) {
                 if (floGlobals.appObjects[pagesData.params.articleID].preview.uid) {
@@ -1445,6 +1387,63 @@
             }
         }
 
+        function publishArticle() {
+            if (isSubAdmin) {
+                getConfirmation('Request publishing?', {
+                    message: 'Send this article as publishing candidate on RanchiMall TImes',
+                    confirmText: 'Request'
+                })
+                    .then(res => {
+                        if (res) {
+                            floCloudAPI.sendGeneralData({
+                                articleID: pagesData.params.articleID,
+                                title: floGlobals.appObjects.cc.articleList[currentArticle.id].title,
+                                content: getCleanExportContent(),
+                            }, 'publishing_requests', {
+                                application: 'Test_RM_Times',
+                                receiverID: 'FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf'
+                            })
+                                .then(res => {
+                                    console.log(res)
+                                    notify('Publication request sent', 'success')
+                                })
+                                .catch(err => notify(err, 'error'))
+                        }
+                    })
+            } else {
+                notify('This action requires sub-admin privileges', 'error')
+            }
+        }
+
+        getRef('preview_page').addEventListener('click', e => {
+            if (e.target.closest('.move-up')) {
+                const currentElement = e.target.closest('.preview-group')
+                const previousSibling = currentElement.previousElementSibling
+                if (previousSibling?.dataset.sectionId === currentElement.dataset.sectionId) {
+                    const clone = currentElement.cloneNode(true)
+                    previousSibling.before(clone)
+                    currentElement.remove()
+                }
+            } else if (e.target.closest('.move-down')) {
+                const currentElement = e.target.closest('.preview-group')
+                const nextSibling = currentElement.nextElementSibling
+                if (nextSibling?.dataset.sectionId === currentElement.dataset.sectionId) {
+                    const clone = currentElement.cloneNode(true)
+                    nextSibling.after(clone)
+                    currentElement.remove()
+                }
+            } else if (e.target.closest('.remove-group')) {
+                const currentElement = e.target.closest('.preview-group')
+                const uid = currentElement.dataset.uid
+                if (currentArticle.id) {
+                    getRef('article_wrapper').querySelector(`.content-card[data-uid="${uid}"] sm-checkbox`).checked = false
+                }
+                if ((!currentElement.nextElementSibling || currentElement.nextElementSibling.tagName === 'H3') && currentElement.previousElementSibling.tagName === 'H3') {
+                    currentElement.previousElementSibling.remove()
+                }
+                currentElement.remove()
+            }
+        })
         getRef('current_article_title').addEventListener("change", e => {
             floGlobals.appObjects.cc.articleList[currentArticle.id].title = e.target.value.trim()
             floCloudAPI.updateObjectData('cc')
@@ -1718,11 +1717,15 @@
                     section.querySelectorAll('.content-card').forEach(card => {
                         allContentCards[card.dataset.uid] = card.cloneNode(true)
                     })
-                    const emptyCard = section.firstElementChild.cloneNode(true)
+                    let emptyCard
+                    if (!isSubAdmin)
+                        emptyCard = section.firstElementChild.cloneNode(true)
                     section.innerHTML = ''
                     const frag = document.createDocumentFragment()
                     currentArticle.sections[sectionID].uniqueEntries.forEach((entry, index) => frag.append(allContentCards[entry]))
-                    section.append(emptyCard, frag)
+                    if (!isSubAdmin)
+                        section.append(emptyCard)
+                    section.append(frag)
                 }
             }
         }
@@ -2081,6 +2084,25 @@
                 await Promise.all([
                     floCloudAPI.requestObjectData('cc'),
                 ])
+                getRef('preview_options').innerHTML = `
+                    ${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>
+                        <button class="icon-only" title="Export selection" onclick="exportSelection()">
+                            <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 ? 'publishArticle()' : 'exportSelection()'}">
+                        ${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
+                            `: `
+                            <svg class="icon button__icon--left" 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>
+                            Download
+                        `}
+                    </sm-button>
+                `
                 showPage(window.location.hash, { firstLoad: true })
 
                 console.log(result)
@@ -12601,21 +12623,28 @@
 
                 //floDapps.addStartUpFunction('Sample', Promised Function)
                 //floDapps.setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}})
+                let firstLoad = true
                 floDapps.setMidStartup(() => new Promise(async (resolve, reject) => {
                     await floCloudAPI.requestObjectData('RMT')
                     await floCloudAPI.requestGeneralData(`article_${currentArticleID}_votes`, {
                         callback: (d, e) => {
-                            animateLikeCount()
+                            if (firstLoad) {
+                                const allVotes = floGlobals.generalData[`article_${currentArticleID}_votes|${floGlobals.adminID}|${floGlobals.application}`]
+
+                                for (const vote in allVotes) {
+                                    const { message: { articleID } } = allVotes[vote]
+                                    if (allVotes[vote].message.articleID === currentArticleID) {
+                                        totalVotes++
+                                    }
+                                }
+                                getRef('like_count').textContent = totalVotes
+                            } else {
+                                animateLikeCount()
+                            }
+                            firstLoad = false
                         }
                     })
-                    const allVotes = floGlobals.generalData[`article_${currentArticleID}_votes|${floGlobals.adminID}|${floGlobals.application}`]
+
-                    for (const vote in allVotes) {
-                        const { message: { articleID } } = allVotes[vote]
-                        if (allVotes[vote].message.articleID === currentArticleID) {
-                            totalVotes++
-                        }
-                    }
-                    getRef('like_count').textContent = totalVotes
                     resolve(true)
                 }))
                 floDapps.setCustomPrivKeyInput(() => new Promise((resolve, reject) => {