Skip to content

Commit

Permalink
Placeholder, Icon, Toast Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@TsayAdobe
TsayAdobe committed Sep 20, 2024
1 parent 467c120 commit 8ee1b20
Show file tree
Hide file tree
Showing 14 changed files with 231 additions and 132 deletions.
9 changes: 5 additions & 4 deletions acrobat/blocks/prompt-card/prompt-card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
position: fixed;
top: 110px;
transform: translate(-50%, -50%);
z-index: 1;
z-index: 11
z-index: 9999
}

.prompt-toast--show {
Expand Down Expand Up @@ -61,6 +60,7 @@
padding: 20px 20px 24px;
transition-delay: 3s;
transition-property: border;
max-width: 276px;
}

.prompt-blade:hover {
Expand All @@ -73,7 +73,7 @@
}

.prompt-icon {
margin-right: 5px;
margin-inline-end: 5px;
position: relative;
top: 5px
}
Expand Down Expand Up @@ -153,5 +153,6 @@
min-width: 18px;
position: relative;
top: 5px;
width: 18px
width: 18px;
margin-inline-start: 8px
}
68 changes: 44 additions & 24 deletions acrobat/blocks/prompt-card/prompt-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,47 @@ const miloLibs = setLibs('/libs');
const { createTag } = await import(`${miloLibs}/utils/utils.js`);

const classToastShow = 'prompt-toast--show';
const getPlaceHolder = (x) => (window.mph?.[x] || x);

function copyPrompt(cfg) {
navigator.clipboard.writeText(cfg.prompt);

let toast = document.querySelector('.prompt-toast');
if (!toast) {
toast = createTag('div', { class: 'prompt-toast' }, cfg.toast);
const toastClose = createTag('i', { class: 'prompt-close' });
toast.appendChild(toastClose);
document.body.appendChild(toast);

toastClose.addEventListener('click', () => {
toast.classList.remove(classToastShow);
});
}
toast.childNodes[0].textContent = cfg.toast;
toast.classList.add(classToastShow);

setTimeout(() => toast.classList.remove(classToastShow), 5000);
}

async function createBlock(element, cfg) {
const blade = createTag('div', { class: 'prompt-blade' });
cfg.icon = cfg.icon || '/acrobat/img/icons/aichat.svg';
cfg.button = cfg.button || getPlaceHolder('Copy');
cfg.toast = cfg.toast || getPlaceHolder('Copied to clipboard');
const blade = createTag('div', {
class: 'prompt-blade',
title: cfg.prompt,
'data-toast': cfg.toast,
'daa-im': true,
'daa-lh': 'Featured prompts | Executive summary',
});
const prefix = createTag('div', { class: 'prompt-prefix' });
const icon = createTag('img', { class: 'prompt-icon', src: `/acrobat/img/icons/${cfg.icon}`, width: 18, height: 18 });
const icon = createTag('img', {
class: 'prompt-icon',
alt: 'AI Assistant Icon',
src: cfg.icon,
width: 18,
height: 18,
});
const title = createTag('div', { class: 'prompt-title' }, cfg.title);
const copy = createTag('div', { class: 'prompt-copy' }, cfg.prompt);
const prompt = createTag('input', { id: 'prompt', value: cfg.prompt });
Expand All @@ -19,33 +55,17 @@ async function createBlock(element, cfg) {
prefix.appendChild(createTag('span', null, cfg.prefix));
blade.append(prefix, title, copy, prompt, wrapper);
element.replaceChildren(blade);
const toast = createTag('div', { class: 'prompt-toast' }, cfg.toast);
const toastClose = createTag('i', { class: 'prompt-close' });
toast.appendChild(toastClose);
element.appendChild(toast);

const copyPrompt = () => {
prompt.select();
prompt.setSelectionRange(0, 99999);
navigator.clipboard.writeText(prompt.value);
toast.classList.add(classToastShow);
setTimeout(() => toast.classList.remove(classToastShow), 5000);
};

[copyBtn, blade].forEach((el) => el.addEventListener('click', () => {
copyPrompt();
}));

blade.addEventListener('click', () => {
copyPrompt(cfg);
});

copyBtn.addEventListener('keypress', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
copyPrompt();
copyPrompt(cfg);
}
});

toastClose.addEventListener('click', (e) => {
e.currentTarget.parentNode.classList.remove(classToastShow);
});
}

async function processGroup(element, startIndex, templateCfg) {
Expand All @@ -59,7 +79,7 @@ async function processGroup(element, startIndex, templateCfg) {
for (const cfg of blockArray) {
const blockEl = createTag('div', { class: 'prompt-card' });
await createBlock(blockEl, { ...templateCfg, ...cfg });
element.parentNode.insertBefore(blockEl, element.nextSibling);
element.parentNode.insertBefore(blockEl, element.previousSibling);
}
element.remove();
}
Expand Down
28 changes: 21 additions & 7 deletions acrobat/img/icons/aichat.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions test/blocks/prompt-card/mocks/body-block-icon.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<main>
<div class="prompt-card">
<div>
<div>Icon</div>
<div>https://main--dc--adobecom.hlx.live/dc-shared/assets/images/frictionless/verb-footer-images/word-to-pdf.svg</div>
</div>
<div>
<div>Prefix</div>
<div>Ask</div>
</div>
<div>
<div>Title</div>
<div>Sum it up</div>
</div>
<div>
<div>Prompt</div>
<div>Summarize this document in 3 sentences.</div>
</div>
<div>
<div>Button</div>
<div>Copy</div>
</div>
<div>
<div>Toast</div>
<div>Copied to clipboard</div>
</div>
</div>
</main>
4 changes: 0 additions & 4 deletions test/blocks/prompt-card/mocks/body-block.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<main>
<div class="prompt-card">
<div>
<div>Icon</div>
<div>aichat.svg</div>
</div>
<div>
<div>Prefix</div>
<div>Ask</div>
Expand Down
52 changes: 52 additions & 0 deletions test/blocks/prompt-card/mocks/body-group-placeholder.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<main>
<div>
<div class="prompt-card template">
<div>
<div>Prefix</div>
<div>{{Ask}}</div>
</div>
</div>
</div>
<div>
<div class="prompt-card group">
<div>
<div>Title</div>
<div>Prompt</div>
</div>
<div>
<div>Sum it up</div>
<div>Summarize this document in 3 sentences.</div>
</div>
<div>
<div>Organize your thoughts</div>
<div>Suggest a few essay topics based on this reading that can help me get started.</div>
</div>
<div>
<div>Refresh your memory.</div>
<div>Provide 10 sample test questions that my professor could ask me.</div>
</div>
<div>
<div>Point out tech advantages</div>
<div>What are the key benefits for users of this proposed technology solution?</div>
</div>
<div>
<div>Point out tech advantages</div>
<div>What are the key benefits for users of this proposed technology solution?</div>
</div>
<div>
<div>Shorten up the intro</div>
<div>Rewrite the introduction so it has only 200 words and a Flesch reading score above 50.</div>
</div>
</div>
<div class="section-metadata">
<div>
<div>style</div>
<div>Four up, xl-spacing</div>
</div>
<div>
<div>background</div>
<div>#f8f8f8</div>
</div>
</div>
</div>
</main>
14 changes: 1 addition & 13 deletions test/blocks/prompt-card/mocks/body-group.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
<main>
<div>
<div class="prompt-card template">
<div>
<div>Icon</div>
<div>aichat.svg</div>
</div>
<div>
<div>Prefix</div>
<div>Ask</div>
</div>
<div>
<div>Button</div>
<div>Copy</div>
</div>
<div>
<div>Toast</div>
<div>Copied to Clipboard!</div>
</div>
</div>
</div>
</div>
<div>
Expand Down
56 changes: 2 additions & 54 deletions test/blocks/prompt-card/mocks/body-section.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,6 @@
<main>
<div>
<div class="prompt-card">
<div>
<div>Icon</div>
<div>aichat.svg</div>
</div>
<div>
<div>Button</div>
<div>Copy</div>
</div>
<div>
<div>Toast</div>
<div>Copied to Clipboard</div>
</div>
<div>
<div>Prefix</div>
<div>Ask</div>
Expand All @@ -27,17 +15,13 @@
</div>
</div>
<div class="prompt-card">
<div>
<div>Icon</div>
<div>aichat.svg</div>
</div>
<div>
<div>Button</div>
<div>Copy</div>
<div>My Copy</div>
</div>
<div>
<div>Toast</div>
<div>Copied to Clipboard</div>
<div>My Copied to Clipboard</div>
</div>
<div>
<div>Prefix</div>
Expand All @@ -53,18 +37,6 @@
</div>
</div>
<div class="prompt-card">
<div>
<div>Icon</div>
<div>aichat.svg</div>
</div>
<div>
<div>Button</div>
<div>Copy</div>
</div>
<div>
<div>Toast</div>
<div>Copied to Clipboard</div>
</div>
<div>
<div>Prefix</div>
<div>Brainstorm</div>
Expand All @@ -79,18 +51,6 @@
</div>
</div>
<div class="prompt-card">
<div>
<div>Icon</div>
<div>aichat.svg</div>
</div>
<div>
<div>Button</div>
<div>Copy</div>
</div>
<div>
<div>Toast</div>
<div>Copied to Clipboard</div>
</div>
<div>
<div>Prefix</div>
<div>Analyze</div>
Expand All @@ -105,18 +65,6 @@
</div>
</div>
<div class="prompt-card">
<div>
<div>Icon</div>
<div>aichat.svg</div>
</div>
<div>
<div>Button</div>
<div>Copy</div>
</div>
<div>
<div>Toast</div>
<div>Copied to Clipboard</div>
</div>
<div>
<div>Prefix</div>
<div>Modify</div>
Expand Down
12 changes: 0 additions & 12 deletions test/blocks/prompt-card/mocks/body-template-group.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
<main>
<div>
<div class="prompt-card template group">
<div>
<div>Icon</div>
<div>aichat.svg</div>
</div>
<div>
<div>Prefix</div>
<div>Ask</div>
</div>
<div>
<div>Button</div>
<div>Copy</div>
</div>
<div>
<div>Toast</div>
<div>Copied to Clipboard!</div>
</div>
<div>
<div></div>
</div>
Expand Down
Loading

0 comments on commit 8ee1b20

Please sign in to comment.