test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: email replied collapser for replied email

Browse Source
This commit is contained in:
Shariq Ansari 2024-07-12 17:28:18 +05:30
parent ee8fdf099f
commit f7449481df
1 changed files with 96 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/components/EmailContent.vue
View File

@ -27,6 +27,72 @@ const files = import.meta.globEager('/src/index.css', { query: '?inline' })
const css = files['/src/index.css'].default const css = files['/src/index.css'].default
const iframeRef = ref(null) const iframeRef = ref(null)
const _content = ref(props.content)
const parser = new DOMParser()
const doc = parser.parseFromString(_content.value, 'text/html')
const replyToContent = doc.querySelectorAll('p.reply-to-content')
if (replyToContent.length) {
_content.value = parseReplyToContent(doc)
}
function parseReplyToContent(doc) {
function handleAllInstances(doc) {
const replyToContentElements = doc.querySelectorAll('p.reply-to-content')
if (replyToContentElements.length === 0) {
return
}
const replyToContentElement = replyToContentElements[0]
replaceReplyToContent(replyToContentElement)
handleAllInstances(doc)
}
handleAllInstances(doc)
return doc.body.innerHTML
}
function replaceReplyToContent(replyToContentElement) {
let randomId = Math.random().toString(36).substring(2, 7)
const wrapper = doc.createElement('div')
wrapper.classList.add('replied-content')
const collapseLabel = doc.createElement('label')
collapseLabel.classList.add('collapse')
collapseLabel.setAttribute('for', randomId)
collapseLabel.innerHTML = '...'
wrapper.appendChild(collapseLabel)
const collapseInput = doc.createElement('input')
collapseInput.setAttribute('id', randomId)
collapseInput.setAttribute('class', 'replyCollapser')
collapseInput.setAttribute('type', 'checkbox')
wrapper.appendChild(collapseInput)
const allSiblings = Array.from(replyToContentElement.parentElement.children)
const replyToContentIndex = allSiblings.indexOf(replyToContentElement)
const followingSiblings = allSiblings.slice(replyToContentIndex + 1)
let clonedFollowingSiblings = followingSiblings.map((sibling) =>
sibling.cloneNode(true),
)
const div = doc.createElement('div')
div.append(...clonedFollowingSiblings)
wrapper.append(div)
for (let i = replyToContentIndex + 1; i < allSiblings.length; i++) {
replyToContentElement.parentElement.removeChild(allSiblings[i])
}
replyToContentElement.parentElement.replaceChild(
wrapper,
replyToContentElement,
)
}
const htmlContent = ` const htmlContent = `
<!DOCTYPE html> <!DOCTYPE html>
@ -35,6 +101,35 @@ const htmlContent = `
<style> <style>
${css} ${css}
.replied-content .collapse {
margin: 10px 0 10px 0;
visibility: visible;
cursor: pointer;
display: flex;
font-size: larger;
font-weight: 700;
height: 12px;
line-height: 0.1;
background: #e8eaed;
width: 23px;
justify-content: center;
border-radius: 5px;
}
.replied-content .collapse:hover {
background: #dadce0;
}
.replied-content .collapse + input {
display: none;
}
.replied-content .collapse + input + div {
display: none;
}
.replied-content .collapse + input:checked + div {
display: block;
}
.email-content { .email-content {
word-break: break-word; word-break: break-word;
} }
@ -110,7 +205,7 @@ const htmlContent = `
</style> </style>
</head> </head>
<body> <body>
<div ref="emailContentRef" class="email-content prose-f">${props.content}</div> <div ref="emailContentRef" class="email-content prose-f">${_content.value}</div>
</body> </body>
</html> </html>
` `