Skip to content

Commit

Permalink
feat: more manuals; manuach mechanism
Browse files Browse the repository at this point in the history
  • Loading branch information
@jakubnakielskixebia
jakubnakielskixebia committed Aug 8, 2024
1 parent 4e6aba2 commit 9cb8b6b
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 49 deletions.
155 changes: 141 additions & 14 deletions src/xebia_email_signature/static/scripts-v3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,11 @@ function cloneRemoveBtnInit(btn) {

function handleFormSubmit(e) {
let previewContainer = document.querySelector('.preview-container');
let emailClientSelector = document.querySelector('.js-ec-choice');
let installationGuideSelector = previewContainer.querySelector('.js-installation-guide');
let { manual } = ecDropdownData().find(o => o.value === emailClientSelector.value);

installationGuideSelector.replaceChildren(buildOlList(manual))

if (validateForm()) {
setTimeout(() => {
Expand Down Expand Up @@ -663,20 +668,7 @@ function emailClientDropdownDataInit() {

emailClientSelector.options.length = 0

const options = [
{ id: 0, value: null, img: null, label: '--- Please Select ---' },
{ id: 1, value: 'outlook-new-win', img: '/static/win-ms-outlook-icon.png', label: 'Microsoft Outlook (new) for Windows' },
{ id: 2, value: 'outlook-win', img: '/static/win-ms-outlook-icon.png', label: 'Microsoft Outlook (old) for Windows' },
{ id: 3, value: 'outlook-new-mac', img: '/static/mac-ms-outlook-icon.png', label: 'Microsoft Outlook (new) for MacOS' },
{ id: 4, value: 'outlook-mac', img: '/static/mac-ms-outlook-icon.png', label: 'Microsoft Outlook (old) for MacOS' },
// { id: 5, value: 'mobile-outlook-ios', img: '/static/ios-ms-outlook-icon.png', label: 'Microsoft Outlook for iOS' },
{ id: 6, value: 'mobile-outlook-and', img: '/static/and-ms-outlook-icon.png', label: 'Microsoft Outlook for Android' },
{ id: 7, value: 'native-win', img: '/static/win-native-mail-icon.png', label: 'Mail for Windows' },
{ id: 8, value: 'native-mac', img: '/static/mac-native-mail-icon.png', label: 'Mail for MacOS' },
// { id: 9, value: 'mobile-native-ios', img: '/static/ios-native-mail-icon.png', label: 'Mail for iOS' },
]

options.map(({ value, img, label }) => {
ecDropdownData().map(({ value, img, label }) => {
let option = document.createElement("option");
option.value = value;
option.setAttribute('data-custom-properties', img);
Expand Down Expand Up @@ -722,6 +714,141 @@ async function toDataURL(url) {
});
}

function ecDropdownData() {
return [
{
id: 0,
value: null,
img: null,
label: '--- Please Select ---',
manual: []
},
{
id: 1,
value: 'outlook-new-win',
img: '/static/win-ms-outlook-icon.png',
label: 'Microsoft Outlook (new) for Windows',
manual: [
'Open Outlook.',
'Click on File in the top menu.',
'Select Options.',
'In the Mail category, click on Signatures.',
'Click the New button to create a new signature.',
'Enter a name for the signature.',
'In the Edit signature field, paste your new signature from the generator.',
'Click OK to save the signature.',
'To use the new signature, compose a new email and select the signature from the Signature dropdown menu.'
]
},
{
id: 2,
value: 'outlook-win',
img: '/static/win-ms-outlook-icon.png',
label: 'Microsoft Outlook (old) for Windows',
manual: [
'Open Outlook.',
'Click on File in the top menu.',
'Select Options.',
'In the Mail category, click on Signatures.',
'Click the New button to create a new signature.',
'Enter a name for the signature.',
'In the Edit signature field, paste your new signature from the generator.',
'Click OK to save the signature.',
'To use the new signature, compose a new email and select the signature from the Signature dropdown menu.'
]
},
{
id: 3,
value: 'outlook-new-mac',
img: '/static/mac-ms-outlook-icon.png',
label: 'Microsoft Outlook (new) for MacOS',
manual: [
'Select New Email.',
'Select Signature > Manage Signatures.',
'Select + and type a name for the signature',
'Under Signature, paste your new signature from the generator and click save.',
'Select Signature > Pick your new Signature.'
]
},
{
id: 4,
value: 'outlook-mac',
img: '/static/mac-ms-outlook-icon.png',
label: 'Microsoft Outlook (old) for MacOS',
manual: [
'Open Outlook.',
'Go to Outlook in the top menu and select Preferences.',
'Click on Signatures.',
'Click the + button to add a new signature.',
'Enter a name for the signature.',
'In the Signature field, paste your new signature from the generator.',
'Close the Signatures window to save the signature.',
'To use the new signature, go to New Email and select the signature from the Signature dropdown menu.'
]
},
// { id: 5, value: 'mobile-outlook-ios', img: '/static/ios-ms-outlook-icon.png', label: 'Microsoft Outlook for iOS' },
{
id: 6,
value: 'mobile-outlook-and',
img: '/static/and-ms-outlook-icon.png',
label: 'Microsoft Outlook for Android',
manual: [
'Create the signature on your desktop Outlook.',
'Compose a new email with the new signature and send it to yourself.',
'Open the email in Outlook on your mobile device.',
'Tap and hold on the signature to copy it.',
'Go to Outlook settings on your mobile device, navigate to <strong>Signature</strong>, and paste the copied signature.'
]
},
{
id: 7,
value: 'native-win',
img: '/static/win-native-mail-icon.png',
label: 'Mail for Windows',
manual: [
'Open the Mail app on your Windows device.',
'Click on the Settings gear icon at the bottom left.',
'Select Signature.',
'Toggle the Use an email signature switch to On.',
'Enter your desired signature in the text field.',
'Click Save to save your signature.'
]
},
{
id: 8,
value: 'native-mac',
img: '/static/mac-native-mail-icon.png',
label: 'Mail for MacOS',
manual: [
'Click Download button above and save your signature file.',
'Open the Mail app on your Mac.',
'Click on Mail in the top menu and select Settings.',
'Go to the Signatures tab.',
'Click the + button to create a new signature.',
'Enter a name for the signature.',
'Close the pop-up window and close Mac Mail completely.',
'Open Finder, Select Go -> Go to Folder, type ~/Library/Mail and press enter',
'Open folder V10 (or with higher number if exist) and go to MailData > Signatures.',
'Find the latest file with .mailsignature extension. Copy its name and use it to rename the downloaded file (with extension).',
'Replace downloaded file with file in Signatures. Right-click on the file, select Get Info > Lock the file and close pop-up.',
'Open Mail app > Create a new email and select new signature from the dropdown menu.'
]
},
// { id: 9, value: 'mobile-native-ios', img: '/static/ios-native-mail-icon.png', label: 'Mail for iOS' },
]
}


function buildOlList(arrayOfStrings) {
const list = document.createElement('ol');
for (const string of arrayOfStrings) {
const li = document.createElement('li');
li.innerHTML = string;
list.appendChild(li);
}
return list;
}


(() => {
emailClientDropdownDataInit();
Expand Down
37 changes: 2 additions & 35 deletions src/xebia_email_signature/templates/form_v3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,44 +330,11 @@ <h1 class="site-title">Email Signature Generator</h1>
</form>
</div>
<div class="preview-container hidden">
<div class="preview-manual js-preview-manual-native-mac">
<h2 class="preview-header">Installation guide:</h2>
<ol>
<li>
Click <strong>Download</strong> button above and save your
signature file.
</li>
<li>
Follow
<a
href="https://www.hubspot.com/email-signature-generator/add-html-signature-mail-mac"
target="_blank"
>
this article
</a>
add and replace signature content using downloaded file.
<strong>Replace all file content</strong>, not only html tag.
</li>
</ol>
</div>

<div
class="preview-manual js-preview-manual-mobile-outlook-ios js-preview-manual-mobile-outlook-and js-preview-manual-mobile-native-ios"
class="preview-manual"
>
<h2 class="preview-header">Installation guide:</h2>
<ol>
<li>Create the signature on your desktop Outlook.</li>
<li>
Compose a new email with the new signature and send it to
yourself.
</li>
<li>Open the email in Outlook on your mobile device.</li>
<li>Tap and hold on the signature to copy it.</li>
<li>
Go to Outlook settings on your mobile device, navigate to
<strong>Signature</strong>, and paste the copied signature.
</li>
</ol>
<div class="js-installation-guide"></div>
</div>

<h2 class="preview-header">Preview:</h2>
Expand Down

0 comments on commit 9cb8b6b

Please sign in to comment.