@using Markdig
@using Microsoft.Extensions.Configuration
@model List<VmTimeline>
@inject IConfiguration _configuration
@* <link href="/css/timeline.css" rel="stylesheet"/> *@
<div class="blog-container">
    <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
        <a href="/" title="网站首页" data-pjax>网站首页</a>
        <a><cite></cite>时间轴</a>
    </blockquote>
    <div class="blog-main">
        <div class="layui-container">
            <div class="layui-row layui-col-space10">
                <section id="cd-timeline" class="cd-container">
                    @foreach (var item in Model)
                    {
                        <div class="cd-timeline-block">
                            <div class="cd-timeline-img cd-picture">
                                <img src="@(_configuration["CDNBaseAddress"])/images/cd-icon-location.svg" alt="Location">
                            </div>
                            <div class="cd-timeline-content">
                                <h2>@item.Title</h2>
                                @if (!string.IsNullOrEmpty(item.Content))
                                {
                                    <div class="content">@Html.Raw(Markdown.ToHtml(item.Content))</div>    
                                }
                                @if (!string.IsNullOrEmpty(item.More))
                                {
                                    <a href="@item.More" target="_blank" class="cd-read-more">阅读更多</a>
                                }
                                <span class="cd-date">@item.Date.ToString("yyyy-MM-dd")</span>
                            </div>
                        </div>    
                    }
                </section>
            </div>
        </div>
    </div>
</div>
<script>
        $(function () {
            let $timeline_block = $('.cd-timeline-block');
            $timeline_block.each(function () {
                if ($(this).offset().top > $(window).scrollTop() + $(window).height() *
                    0.75) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').addClass(
                        'is-hidden');
                }
            });
            //时光轴根据滚动条动画展示
            $(window).on('scroll', function () {
                $timeline_block.each(function () {
                    if ($(this).offset().top <= $(window).scrollTop() + $(window)
                        .height() * 0.75 && $(this).find('.cd-timeline-img')
                            .hasClass('is-hidden')) {
                        $(this).find('.cd-timeline-img, .cd-timeline-content')
                            .removeClass('is-hidden').addClass('bounce-in');
                    }
                });
            });
        });
</script>