https://www.hurstbridgemedical.com/js/blog.js

1/**
2 * Blog Widget
3 * Takes the settings from the CMS and creates the blog widget for use on any page
4 * @author Alan Menhennet
5 */
6$.fn.blog = function() {
7	var articles = [];
8	var el = $(this)[0];
9    var title = "";
10    var readLabel = "";
11    var settings = {};
12    var date = new Date();
13
14    // Get the JSON
15    $.getJSON("/templateEngine-blog.js?v=" + date.getTime(), function(data){
16        // Check if blog file isn't empty
17        if(typeof data === "undefined"){
18            throw new Error("Blog data was undefined");
19        }
20        
21        // Check for articles
22        if(typeof data.articles === "undefined"){
23            throw new Error("Blog Articles were undefined");
24        }
25        
26        // Check for blog button
27        if(typeof data.readLabel === "undefined"){
28            throw new Error("Blog Read Label was undefined");
29        }
30        
31        // Check for blog heading
32        if(typeof data.title === "undefined"){
33            throw new Error("Blog Title was undefined");
34        }
35        
36        // Check for blog settings
37        if(typeof data.settings === "undefined"){
38            throw new Error("Blog Settings were undefined");
39        }
40        
41        // Set settings
42        articles = data.articles;
43        title = data.title;
44        readLabel = data.readLabel;
45        settings = data.settings;
46        
47        // Build the widget
48        buildWidget();
49    });
50
51    /**
52     * Create the widget HTML
53     * then appends it to the target div
54     */
55    var buildWidget = function(){
56        var html = '<div class="blog-widget">' + 
57            '<div class="blog-widget-heading">' + title + '</div>';
58        for(var i=0; i < articles.length; i++){
59            html += getArticle(articles[i]);
60        }
61        html += "</div>";
62        el.innerHTML = html;
63    }
64    
65    /**
66     * Get Article Html
67     * @param  {Article} article [article]
68     * @return {string}         [html for the article]
69     */
70    var getArticle = function(article){
71        var html = '<div class="blog-widget-article">';
72                        
73        // If show hero image
74        if(settings.showHeroImage){
75            if(article.heroImage.filename.length > 0){
76		 	    html += '<div class="blog-widget-article-img">'+
77            	 		'<div class="blog-widget-article-imgFrame" style="background:url(\'/thumbnailsmall/' + article.heroImage.filename + '\'"></div>' +
78	             	 '</div>';
79            } else {
80                html += '<div class="blog-widget-article-img noImage">'+
81                        '<div class="blog-widget-article-imgFrame"></div>' +
82                     '</div>';
83            }
84        }
85        
86        // Article Preview
87		html += '<div class="blog-widget-article-preview">' +
88                    '<div class="blog-widget-article-preview-title">' + article.title + '</div>';
89        
90        // Author
91        if(settings.showAuthor){
92            html += '<div class="blog-widget-article-author">' + article.author + '</div>';
93        }
94
95        // Date Time
96        if(settings.showDate || settings.showTime){
97            html += '<div class="blog-widget-article-date">';
98            // Show Date
99            if(settings.showDate){
100                html += '<div class="blog-widget-article-date-date">' + article.date.date + '</div>';
101            }
102            // Show Date
103            if(settings.showTime){
104                html += '<div class="blog-widget-article-date-time">' + article.date.time + '</div>';
105            }
106            html += '</div>';
107        }
108
109        // Sub Heading
110        if(settings.showSubHeading){
111            html += '<div class="blog-widget-article-content-subheading">' + article.subheading + '</div>';
112        }
113        
114        // Preview Text
115        if(settings.showPreviewText){
116            html += '<div class="blog-widget-article-content-text">' + article.preview + '</div>';
117        }
118  
119        // Read more button
120        html += '<a href="' + article.url + '" class="blog-widget-article-content-button">' + readLabel + '</a>' +
121            '</div>' +
122            '</div>';
123        return html;
124    }
125    
126};