jrtechs-NodeJSBlog/templates/blog/posts.html

{header}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

<link href="/includes/js/vis/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />


<style>

    :root {
        --primary:rgba(16,116,231,1);
        --secondary:rgba(46,188,79,1);
        --dark:rgba(36,41,46,1);
        --dark-2:rgba(43,49,55,1);
        --white:rgba(255,255,255,1);
    }

    .vis-timeline {
        border: none;
        font-size: 16px;
        color: var(--white);
        background-color: var(--dark);
    }
    .vis-item {
        font-size: 16px;
        color: var(--white);
        background-color: #317caf;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 6px rgba(0, 0, 0, 0.06);
        border-color: transparent;
    }
    .vis-item.vis-box {
        border-radius: 2px;
        padding: 0;
        border: none;
    }
    .vis-item .vis-item-content {
        padding: 8px 10px;
    }
    .vis-item.vis-box.vis-selected {
        border: 2px solid var(--primary);
    }
    .vis-item.vis-line {
        border-width: 2px;
        border-color: var(--primary)
    }
    .vis-item.vis-dot {
        border-color: var(--primary);
    }
    .vis-item.vis-selected {
        color: var(--dark);
        border-color: var(--primary);
        background-color: var(--white);
        box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.2), 0px 10px 10px rgba(0, 0, 0, 0.14);
    }
    .vis-time-axis .vis-text {
        color: var(--white)!important;
        padding-top: 8px;
        padding-left: 16px;
    }
    .vis-time-axis .vis-grid.vis-minor {
        border-width: 2px;
        border-color: rgba(255, 255, 255, .29);
    }
    .vis-labelset .vis-label {
        color: var(--white);
    }
    .vis-time-axis .vis-grid.vis-major {
        border-width: 1px;
        border-color: rgba(255, 255, 255, .5);
    }
</style>


<br><br><br><br><br>
<div id="timeline"></div>
<br><br>
<div class="container">

    <div class="row">
        <div class="col-md-8 col-12">
            <div class="blogPost">
                <div id=POST_PICTURE>
                </div>

                <div class="p-4">
                    <b><h3 id="POST_TITLE"></h3></b>
                    <h5>
                        <span class="w3-opacity"><div id="POST_PUBLISHED"></div></span>
                    </h5>
                    <div id="POST_BODY"></div>
                </div>
            </div>
            <br>
            <br><br>
        </div>
        <div class="col-md-4 col-12">
            {>sideBar}
        </div>
    </div>
</div>

<script src="/includes/js/vis/dist/vis-timeline-graph2d.min.js"></script>


<script type="text/javascript">

    /**
     * Runs a get request using ajax
     */
    function runAjax(url, successCallBack, errorCallBack)
    {
        console.log(url);
        $.ajax({
            type:'GET',
            url: url,
            crossDomain: true,
            dataType: "json",
            success: successCallBack,
            error:errorCallBack,
            timeout: 3000
        });
    }

    /** Lazy loads youtube videos on the page
     */
    function lazyLoad()
    {
        var youtube = document.querySelectorAll( ".youtube" );

        for (var i = 0; i < youtube.length; i++) {

            var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";

            var image = new Image();
            image.src = source;
            image.addEventListener( "load", function() {
                youtube[ i ].appendChild( image );
            }( i ) );

            youtube[i].addEventListener( "click", function() {

                var iframe = document.createElement( "iframe" );

                iframe.setAttribute( "frameborder", "0" );
                iframe.setAttribute( "allowfullscreen", "" );
                iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

                this.innerHTML = "";
                this.appendChild( iframe );
            } );
        };
    }


    function renderPostOnPage(postID)
    {
        runAjax("api/render/" + postID,
        (html)=>
        {
            //uses ajax to update blog page
            $('#POST_TITLE').text(html.name);
            $('#POST_PUBLISHED').text(html.published);
            $('#POST_BODY').html(html.blogBody);
            $('#POST_PICTURE').html(html.hasPicture ?
                '<img src="/blogContent/headerImages/' + html.picture_url + '" style="width:100%;">' :
            '');

            //lazy loads youtube videos
            lazyLoad();

            //highlights code
            Prism.highlightAll();

            //renders latex math
            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
        },
        (err)=>
        {
            console.log(err);
        });
    }


    /**
     * After a timeline event gets clicked this will
     * query the api for the blog post content and
     * display it on the page.
     */
    function timeLineClick(properties)
    {
        if(properties.item !== null)
        {
            renderPostOnPage(properties.item);
        }
    }

    /**
     * Fetches all the 
     */
    function fetchPosts()
    {
        return new Promise((resolve, reject)=>
        {
            runAjax("api/posts", (data)=>
            {
                var datasetContents = [];

                for(var i=0; i < data.length; i++)
                {
                    datasetContents.push(
                        {
                            start: new Date(data[i].published),
                            content: data[i].name,
                            id: data[i].post_id
                        }
                    );
                }
                resolve(datasetContents);
                renderPostOnPage(data[0].post_id);
            },
            (error)=>
            {
                resolve([]);
            });
        });
    }


    var container = document.getElementById('timeline');

    $(document).ready(function()
    {
        fetchPosts().then((data)=>
        {
            var options = 
            {
                editable: false,
                margin: {
                    item: 20,
                    axis: 40
                },
                start:data[12].start,
                end:data[0].start
            };

            var items = new vis.DataSet(data);
            var timeline = new vis.Timeline(container, items, options);
            timeline.on('click', timeLineClick);
        });
    });

</script>


{footer}