I also want to point out that font icons probably won't be supported by all the email clients. This builder will have both Download and Export options. When exporting or downloading with the intend of importing it into a newsletter service you should change the setting of your service provider to convert the CSS styles into inline styles.
The Downloading side of this tutorial is using a little bit of PHP which i had to use unfortunately. If you want to run this feature you will have to make sure you run the export.php file on a PHP server. If don't want this feature or you are not familiar with PHP the newsletter builder will work perfectly without this feature.
HTML
So let's start out the HTML section by talking about "newsletter-preloaded-download" element. This element is not visible when you load the page, you will see that there is a text area inside a form. I will use this form to add content so i can send it using Ajax to export.php file which will push the download."newsletter-preloaded-export" will also be invisible and it will be used to hold some HTML code for formatting when doing the export.
"newsletter-preloaded-rows" will be used to store the html template rows which will later be used for insertion inside the newsletter. Inside this element the actual template starts. I will not talk about the HTML of the template I created because there is so much to talk about the actual builder. The only thing I will say about the template is that it uses a row based system which will be a requirement when creating your own templates.
After the template rows the next important elements are 6 popup boxes that will be used to edit and export the template. I have created 5 popups for edit and 1 for export. These are the 5 edit popups: Image, Link, Title, Text and Icon.
The export popup only contains a text area and a cancel button. The export code will be generate inside the text area.
Edit image popup will have an input field, save button and a cancel button. The input field will be used to host the URL of the image.
Edit link popup will have a title, URL, save and cancel buttons.
Edit title field will host input field, which will be used to edit titles, save button and cancel button.
The edit text popup will be exactly like the edit title popup except instead of input field we have a text area to help us edit larger texts.
The icon edit popup it is a bit different than the rest of the edit popups. It will not contain a save button because the save will happen once someone clicks on an icon. To save time i only included 3 icons here. The final tutorial will have much more. You will find all the icons once you download the source code of this tutorial.
The main HTML element is "newsletter-builder". Inside this element we will host "newsletter-builder-sidebar" and "newsletter-builder-area".
Sidebar element will appear in the left and it will contain Download and Export buttons.
"newsletter-builder-area" has a series of child elements like "newsletter-builder-area-center" and "newsletter-builder-area-center-frame" which only purpose is to resize the building area nicely.
Inside "newsletter-builder-area-center-frame" there are two main elements the buttons part "newsletter-builder-area-center-frame-buttons" which is at the actual building area "newsletter-builder-area-center-frame-content". The top contains Add and Reset buttons. Inside Add button there is a dropdown that contains photos with all the template rows.
"newsletter-builder-area-center-frame-content" is where the real magic happens at the beginning it will store the default template but the content inside will changed using the edit buttons.
That is everything important regarding the HTML the rest of the content inside "newsletter-builder-area-center-frame-content" is the actual newsletter template which is not important for now because the purpose of this tutorial is to teach you how to create the builder not the template.
CSS
You will see that besides the Google Fonts and Font Awesome icons attached style sheets there two more attached style sheets, newsletter-builder.css is the style sheet for the builder and newsletter.css is the style sheet for the newsletter template used in this example. I will only talk about the newsletter-builder.css.I will go ahead and set #newsletter-builder position to relative so we can position other elements inside using absolute position as well as setting the overflow to hidden.
The #newsletter-builder-sidebar will be positioned at the left of the screen using the absolute position.
I have set the overflow of #newsletter-builder-area to auto so that the proper scrolling bars will appear when the content inside #newsletter-builder-area is larger than the actual element.
All popups are using the .sim-edit class which is set to a fixed position and it is used manly as the background.
.sim-edit-box is the actual popup box. Both .sim-edit-box and .sim-edit have the display set to none because I will turn those on and off individually from each other at different time intervals.
JavaScript
Let's start out by making some elements resizable. Because i have designed the builder with the sidebar floating to the left and when you resize the window only the #newsletter-builder-area will have the scrolling bars and not the whole page. To make this possible i had to create a resize function that changes the width and the height of some elements based on the size of the window. After i have declared the function you will see that i have set it up in the case of a browser resize the widths and the heights will have to be resized once again. Once i finished with the browser resize i have summoned the resize function so that this function will take effect every time you refresh the page.In order for the resize function to work we will have to apply the .resize-height class to #newsletter-builder and #newsletter-builder-area and .resize-width class to only #newsletter-builder-area.
Unfortunately guys i know i shouldn't include PHP in my tutorials because i only want my tutorials to be about CSS and JavaScript related stuff but i just had to do it. The download aspect could only be done using PHP and since this is a very nice aspect of the whole builder just being able to download the newly created template in a .html format was so awesome that i told myself, what the heck let's just do it. Before going over the JavaScript role in the download button i wanted to let you guys know that in order to download the files you need to run the export.php file on a PHP server. I will talk about the PHP code inside export.php in the next section but for now let's just talk about JavaScript. The add content, #newsletter-builder-area-center-frame-buttons-add contains the dropdown #newsletter-builder-area-center-frame-buttons-dropdown that will only be visible when the mouse is over the add button.
Inside the dropdown there is a list with 3 types of content and also a content area .newsletter-builder-area-center-frame-buttons-content filled up with elements which holds pictures. This content area will only be shown when someone hovers the mouse over #newsletter-builder-area-center-frame-buttons-dropdown.
Each tab element inside .newsletter-builder-area-center-frame-buttons-content has a data-type HTML5 attribute which is used to store the type of content which that image holds. There can be three types of values there: header, content and footer. We will show those elements accordingly. When they hover over #add-header we will only show the elements with the data-type equal to header and hide the rest. When they hover over #add-content we will only show the elements with the data-type equal to content and hide the rest. When they hover over #add-footer we will only show the elements with the data-type equal to footer and hide the rest.
You will notice that when you hover the mouse on the images inside content you will see a small insert button. The button is not inside the HTML but is inserted when the mouse is over the picture and removed when the mouse if off the picture. This adding and removing helps us to get rid of a lot of functions refresh. When the mouse is in a hover state we have to append the insert button to the tab in which that particular image is located. Inside this hover state function we will also run a click function which will expire in the off hover state. The click function will add the appropriate content when you click on the insert button. The whole builder works with elements called rows so when you click on a certain insert button we will pick the appropriate content which stays inside #newsletter-preloaded-rows and add it to #newsletter-builder-area-center-frame-content. How do we know which row to add ? You will see that each .newsletter-builder-area-center-frame-buttons-content-tab has it's own data-id attribute which coincides with the data-id attribute of one of the template rows .sim-row located inside #newsletter-preloaded-rows. At this point not only that we have to add the appropriate content but we also have to add the appropriate edit elements like the on hover pen icon as well as the delete icon on the newly added content inside the main building area. After doing this we will close the #newsletter-builder-area-center-frame-buttons-dropdown because i decided it makes for a better user experience if we close the add element section.
I will explain to you now how does the little pen icon appears when you hover the mouse on any element inside the building area. Before that i have to tell something i haven't previously talked about which is the newsletter template itself. You will see that every editable element inside each template row has the class .sim-row-edit attached to it as well as the data-type attribute. The data-type attribute can have 5 possible values which will indicate what kind of content are we dealing with. The values can be the following: image, link, title, text and icon. Now let's talk about the pen icon hover function. This functions similarly to the add content popup i talked previously. Every time you hover over the .sim-row-edit class this function will append the pen icon inside .sim-row-edit and disable the default link functions. The '.sim-row-edit-hover i' click function will be declared inside the hover section because we will get rid of it once the hove is over. At the time of the click we store the .sim-row-edit element inside the big_parent variable which is the second parent for the pen icon.
I have to point out that the whole .sim-row-edit hover function is inside hover_edit function because we have to refresh this function each time we add new content. There is also a click function for when you click the close button on one of the popups designed for edit.
As i stated in the title this is also a drag and drop builder so you can drag individually template rows around. We can do that with the following code:
Once we added and dragged the content we may want to remove it, for that purpose i created the following code that will add the little delete icons inside each template row. And a function for delete that template row.
When a user clicks on #newsletter-builder-sidebar-buttons-abutton the HTML inside #newsletter-builder-area-center-frame-content will be copied inside #newsletter-preloaded-export. We are doing this step so we can format the content in a container without effecting the main building area. Once we added the content inside #newsletter-preloaded-export we will perform the following formatting. We remove the .ui-draggable class, all the data-type attributes as well as all the .sim-row-edit class. After formatting the content inside #newsletter-preloaded-export we will go ahead and put the formatted HTML inside a variable. The #export-textarea which is the text area inside the #newsletter-preloaded-download will be submitted as a POST form to export.php defined in the form action target. Being done all that we will go ahead and remove the html inside #export-textarea so we are getting it ready for another download or export.
The exporting is done the same as the downloading until the point of submitting the form. We don't submit any form here but we will put the content of #newsletter-preloaded-export inside the export popup as well as attaching the newsletter.css file using Ajax.
