Skip to content

Commit

Permalink
Formatting and adding template
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bimmr
Bimmr committed Aug 24, 2021
1 parent ce09be4 commit faa19fa
Show file tree
Hide file tree
Showing 4 changed files with 292 additions and 27 deletions.
Binary file added imgs/template.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 35 additions & 26 deletions index.html
View file
Expand Up @@ -293,7 +293,8 @@ <h4 style="margin:0;" :style="{color: styles.header.textColor}">
Banking products and services are offered by referral arrangements through our related company
Manulife Bank of Canada. Please confirm with your advisor which company you are dealing with for each
of your products and services.
<br><br>
<br>
<img v-if="settings.footer.preset.disclaimer.logo" :src="isLight(styles.footer.textColor) ? 'https://s3.ca-central-1.amazonaws.com/files.siteforward.ca/Images/Logos/English/white/Manulife_Securities_linear_white.png' : 'https://s3.ca-central-1.amazonaws.com/files.siteforward.ca/Images/Logos/English/black/Manulife_Securities_linear_black.png'" width="300" height="auto"><br>
<em><a href="https://www.manulifesecurities.ca/corporate-disclaimers.html" target="_blank"
:style="{color: styles.footer.linkColor}">Legal
and Disclaimers</a> | <a href="https://www.manulife.ca/privacy-policies.html" target="_blank"
Expand Down Expand Up @@ -334,7 +335,7 @@ <h4 style="margin:0;" :style="{color: styles.header.textColor}">
<div class="card">
<h3 class="card-title">Email Preview Text</h3>
<span class="card-title-icon"><i class="fas fa-question-circle tool-icon"></i><span class="card-title-help" style="width:300px">
<p><strong>Email Preview Text</strong><br>
<p><strong><i class="fas fa-envelope-open-text"></i> Preview Text</strong><br>
<small>(The text below the subject line)</small><br>
This is the text that will be shown in an email client when showing a preview of the
email.
Expand All @@ -348,10 +349,10 @@ <h3 class="card-title">Email Preview Text</h3>
<div class="card">
<h3 class="card-title">Load Blog Posts From Your Website</h3>
<span class="card-title-icon"><i class="fas fa-question-circle tool-icon"></i><span class="card-title-help" style="width:300px">
<p><strong>Load Multiple Posts</strong><br>
<p><strong><i class="fas fa-mail-bulk"></i> Load Multiple Posts</strong><br>
This will load in multiple blog posts from your website.<br>
Make sure to use your Blog <strong>Page's</strong> URL</p>
<p><strong>Load Individual Posts</strong><br>
<p><strong><i class="fas fa-envelope"></i> Load Individual Posts</strong><br>
This will load in a single blog post from your website.<br>
Make sure to use your Blog <strong>Post's</strong> URL</p>

Expand All @@ -365,7 +366,7 @@ <h3 class="card-title">Load Blog Posts From Your Website</h3>
<input type="text" id="loadPosts" required ref="loadPosts" title=" ">
<label for="loadPosts">Post Page's URL</label>
</div>
<input type="number" id="loadPostsCount" required ref="loadPostsCount" value="6" class="compact"
<input type="number" id="loadPostsCount" required ref="loadPostsCount" value="3" class="compact"
aria-label="Number of posts to load">
<button @click="loadPostsFromURL"><i class="fas fa-file-import"></i> Load Posts</button>
</div>
Expand Down Expand Up @@ -531,6 +532,15 @@ <h3 class="card-title">Footer Settings</h3>
<label for="footer-preset-disclaimer-insuranceOBA">Insurance OBA</label>
</div>
</div>
<div class="form-item split even">
<div class="border">
<input type="checkbox" id="footer-preset-disclaimer-logo"
v-model="settings.footer.preset.disclaimer.logo" aria-label="Toggle using Securities Logo" checked required>
<label for="footer-reset-disclaimer-logo">Manulife Securities Logo</label>
</div>
<div ></div>
<div></div>
</div>
</div>
</div>
<div class="accordion" :class="{open: settings.footer.style == 2}" @click="settings.footer.style = 2">
Expand All @@ -551,8 +561,8 @@ <h3 class="card-title">Footer Settings</h3>
<div class="card">
<h3 class="card-title">Colour Settings</h3>
<span class="card-title-icon"><i class="fas fa-question-circle tool-icon"></i><span class="card-title-help" style="width:200px">
<p><strong>Colour Settings</strong><br>
These colours can also be set per post in the Edit tab</p>
<p><strong><i class="fas fa-palette"></i> Colour Settings</strong><br>
These settings will affect all posts, but individual post colours can also be set per post in the Edit tab</p>
</span></span>
<div class="form-item split even">
<div>
Expand Down Expand Up @@ -617,9 +627,9 @@ <h3 class="card-title">Colour Settings</h3>
<div class="card">
<h3 class="card-title">Style Settings</h3>
<span class="card-title-icon"><i class="fas fa-question-circle tool-icon"></i><span class="card-title-help" style="width:300px">
<p><strong>Style Settings</strong><br>
Some of these settings also be set per post in the Edit tab</p>
<p><strong>Border Radius(Rounded)</strong><br>
<p><strong><i class="fas fa-pen-fancy"></i> Style Settings</strong><br>
These settings will affect all posts, but individual post styles can also be set per post in the Edit tab</p>
<p><strong><i class="fas fa-border-style"></i> Border Radius(Rounded)</strong><br>
Due to Outlook's limitations, this will not be displayed in Outlook for Desktop or Web.
</p>
</span></span>
Expand Down Expand Up @@ -667,6 +677,11 @@ <h3 class="card-title">Style Settings</h3>
<div class="card">
<h3 class="card-title">Edit Newsletter</h3>
<span class="card-title-icon" title="Add Custom Post" @click="addPost"><i class="far fa-plus-square tool-icon"></i></span>
<span class="card-title-icon" style="right:50px"><i class="fas fa-question-circle tool-icon"></i><span class="card-title-help" style="width:200px">
<p><strong><i class="fa fa-image"></i> Looking for some images to use?</strong><br>Try SiteForward's image bank:<br><a href="https://siteforward.ca/tools/image-bank"
target="_blank">https://siteforward.ca/tools/image-bank</a></p>

</span></span>
<div class="edit-newsletter">
<ul class="newsletter-list">
<li v-if="posts.length == 0">
Expand Down Expand Up @@ -843,10 +858,10 @@ <h3 class="card-title">How To View Analytics?</h3>
<div class="card">
<h3 class="card-title">Newsletter Management</h3>
<span class="card-title-icon"><i class="fas fa-question-circle tool-icon"></i><span class="card-title-help" style="width:400px">
<p><strong>Local <small>(Web browser)</small></strong><br>
<p><strong><i class="fas fa-download"></i> Local <small>(Web browser)</small></strong><br>
This will load/save the newsletter into your web browser's local storage.<br>
Clearing your browser's cache will delete this saved version.</p>
<p><strong>File <small>(JSON file)</small></strong><br>
<p><strong><i class="fas fa-file-download"></i> File <small>(JSON file)</small></strong><br>
This will load/save the newsletter into a .json file that can be moved and saved on your
computer</p>
</span></span>
Expand Down Expand Up @@ -890,13 +905,13 @@ <h3 class="card-title">Start from a Template</h3>
<p>Make sure to save your current newsletter if you think you may want to revert back to it.
</p>
<div class="form-item">
<button @click="loadTemplate(1)" title="Load the Template" style="margin-left: 0; margin-top: 10px;">
<button @click="loadTemplate()" title="Load the Template" style="margin-left: 0; margin-top: 10px;">
<i class="fas fa-file-download"></i> Load Template
</button>
</div>
</div>
<div class="col col-left">
<img class="template-thumbnail" src="https://via.placeholder.com/200x300.png?text=Template+Image"
<img class="template-thumbnail" src="imgs/template.png"
alt="Template Thumbnail">
</div>
</div>
Expand Down Expand Up @@ -930,15 +945,10 @@ <h3 class="card-title">Use The Newsletter</h3>
<div id="banner" class="main-view" :class="{open: app.activeView === 'banner'}">
<div class="card">
<h3 class="card-title">Create a Custom Banner Image</h3>
<span class="card-title-icon"><i class="fas fa-question-circle tool-icon"></i><span class="card-title-help" style="width:300px">
Looking for some premade image banner backgrounds?<br>
Visit: <a href="https://siteforward.ca/tools/image-bank" target="_blank">https://siteforward.ca/tools/image-bank</a>
<hr>
<div class="row">
<div class="col">If you can't change the color, try changing the vertical slider first
</div>
<div class="col"><img src="imgs\colourSlider.png" width="128px" alt="Colour Slider Example"></div>
</div>
<span class="card-title-icon"><i class="fas fa-question-circle tool-icon"></i><span class="card-title-help" style="width:200px">
<p><strong><i class="fa fa-image"></i> Looking for some images to use?</strong><br>Try SiteForward's image bank:<br><a href="https://siteforward.ca/tools/image-bank"
target="_blank">https://siteforward.ca/tools/image-bank</a></p>

</span></span>
<div class="form-item split even border">
<div>
Expand Down Expand Up @@ -1324,9 +1334,8 @@ <h3 class="card-title">How to <strong>Load / Save</strong> the Newsletter Option
</div>
<div class="card">
<h3 class="card-title">How to use a <strong>Custom Banner</strong></h3>
<p><strong><small>If you're looking for pre-made banner image urls please look here: <a
href="https://siteforward.ca/tools/image-bank"
target="_blank">https://siteforward.ca/tools/image-bank</a></small></strong></p>
<p><strong><small>Looking for pre-made banner images? Try SiteForward's image bank: <a
href="https://siteforward.ca/tools/image-bank" target="_blank">https://siteforward.ca/tools/image-bank</a></small></strong></p>
<ol>
<li>Go to the <strong>Tools</strong> tab</li>
<li>Insert a banner image URL</li>
Expand Down
19 changes: 18 additions & 1 deletion js/scripts.js
View file
@@ -1,3 +1,5 @@
let siteForwardNewsletterTemplate = ''

let tinyMCE_settings = {
selector: ".editable",
menubar: false,
Expand Down Expand Up @@ -57,7 +59,7 @@ Vue.component("editable", {
//Create Popup component
Vue.component("popup", {
template:
'<div class="popup"><i class="fas fa-cog tool-icon"></i><div class="popup-outerWrapper"><div class="card popup-wrapper"><h3 class="card-title">{{title}}</h3><span title="Close Popup" class="card-title-icon popup-close"><i class="far fa-window-close tool-icon"></i></span><div class="popup-content"><slot></slot></div></div></div></div>',
'<div class="popup"><i class="fas fa-cog tool-icon" title="Open Post Settings"></i><div class="popup-outerWrapper"><div class="card popup-wrapper"><h3 class="card-title">{{title}}</h3><span title="Close Popup" class="card-title-icon popup-close"><i class="far fa-window-close tool-icon"></i></span><div class="popup-content"><slot></slot></div></div></div></div>',
props: ["title"],
data: function () {
return {
Expand Down Expand Up @@ -339,6 +341,7 @@ let app = new Vue({
disclaimer: {
enable: true,
insuranceOBA: null,
logo: true,
licenses: {
iiroc: false,
mfda: false,
Expand Down Expand Up @@ -496,6 +499,9 @@ let app = new Vue({
if (typeof this.footer.preset.disclaimer.licenses.iiroc == "undefined")
this.$set(this.footer.preset.disclaimer.licenses, "iiroc", false);

if (typeof this.footer.preset.disclaimer.logo == "undefined")
this.$set(this.footer.preset.disclaimer, "logo", true);

if (typeof this.colors.background == "undefined")
this.$set(this.colors, "background", "#ffffff");

Expand Down Expand Up @@ -672,6 +678,9 @@ let app = new Vue({
if (file.options.loadPost)
this.$refs.loadPost.value = file.options.loadPost;

if (file.options.previewText)
this.newsletter.previewText = file.options.previewText;

if (file.options.analytics)
this.settings.analytics = file.options.analytics;

Expand Down Expand Up @@ -809,6 +818,14 @@ let app = new Vue({
importOptions() {
loadJSONFile((d) => this.loadOptions(d));
},
loadTemplate(){
fetch("templates\Newsletter - Template 1.json")
.then(res => res.json())
.then(data => {
this.loadNewsletter(data);
})
.catch(error => sendError("Unable to load template. ", error))
},

//Load posts from blog page url
loadPostsFromURL() {
Expand Down

0 comments on commit faa19fa

Please sign in to comment.