index.html

---
locate: cn
initItem: 3
perPageItem: 3
---
<!DOCTYPE html>
<html>

<head>
    {% include head.html %}
</head>
<body class="index">
    <div class="scanlines"></div>
    <header class="head">
        {% include nav.html %}
    </header>
    <div class="margin">
        <div class="searchArea">
            <iframe id="is_iframe" name="the_iframe" style="display:none;"></iframe>
            <form id="search-bar" action="" target="the_iframe" onsubmit="encodeKeyword();return false;">
                <div class="typeahead__container">
                    <div class="typeahead__field">
            
                        <span class="typeahead__query">
                            <input type="text" id="input-tags" name="q" class="js-typeahead demo-default selectized" value=""
                                tabindex="-1" style="display: none;" type="search" autocomplete="off">
                        </span>
                        <span class="typeahead__button" >
                            <button type="submit" id="btn">
                                <span class="typeahead__search-icon"></span>
                            </button>
                        </span>
                        <!-- <button id="btn" type="button">Search</button> -->
                    </div>
                </div>
            </form>
            
        </div>
        <div class="content">
            <!-- <div class="switch">
                    <div id="grid"><span></span></div>
                    <div id="classic"><span></span></div>
                </div> -->
            <div class="articles posts">
                
            </div>
        </div>
    </div>
    {% include footer.html %}
</body>
<script src="{{ "/public/js/search.js" | prepend: site.static_cdn_root }}"></script>

<script>
	/**
	 * encode the keyword before submit
	 */
    function encodeKeyword() {
        var keywordStr = $('input.js-typeahead').val();
        var ua = navigator.userAgent.toLowerCase();
        search(keywordStr);
    }
    var keyword = "";
    var pageNum = 0;
    var perPageItem = "{{ page.perPageItem }}";
    var totalTags = "";
    var startNum = 0;
    var endNum = "{{ page.initItem }}";
    var totalNum = 0;
    var $loading = $('<div class="loading" style="margin: 5em auto 2.5em;"><img src="{{ "/public/img/loading_list.svg" | prepend: site.static_cdn_root }}"></div>');
    var articles;
    $.getJSON("/gifootball/public/json/search.json").done(function (data) {
        articles = data;
        totalTags = getTotalTags(articles);
        totalNum = articles.length;
        initArticles(); 
        $('img.lazyload').lazyload({
            effect: 'fadeIn'
        });

    });
    function search(keywordStr) {
        keyword = keywordStr;
        startNum = 0;
        if (!!keyword && "null" != keyword) {
            $("#input-tags").val(keyword);
        }
        $(".posts").empty();
        $.getJSON("/gifootball/public/json/search.json").done(function (data) {
            articles = data;
            totalTags = getTotalTags(articles);
            totalNum = articles.length;
            initArticles();
            $('img.lazyload').lazyload({
                effect: 'fadeIn'
            });
        });
    }

    function getTotalTags(articles){
        var totalTagsArr = [];
        for(var i = 0, len = articles.length; i < len; i++){
            var tagsArr = articles[i].tags.split(",");
            totalTagsArr.push.apply(totalTagsArr, tagsArr);
        }
        var totalTagsMap = totalTagsArr.reduce(function (allElements, ele) {
            if (ele in allElements) {
                allElements[ele]++;
            } else {
                allElements[ele] = 1;
            }
            return allElements;
        }, {});
        return totalTagsMap;
    }
	/**
	 * get the param from url
	 * 
	 * @param {Object} name
	*/
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

	/**
	 * get the bottom offset of an element
	*/
    function getOffsetBottom(selector) {
        if ($(selector).offset() == undefined) {
            return 1;
        }
        var offsetTop = $(selector).offset().top;
        var documentHeight = $(selector).height();
        var offsetBottom = $(window).height() - (offsetTop + documentHeight);
        return offsetBottom;
    }

	/**
	 * init the frist batch of articles to activate waypoint
	 */
    function initArticles() {
        var offsetBottom = getOffsetBottom('div.posts .page-article:last');
        while (offsetBottom > 0 && startNum < totalNum) {
            getArticles();
            offsetBottom = getOffsetBottom('div.posts .page-article:last');
            increment();
        }
        if ($('div.posts .page-article:last').length == 0) {
            $('div.posts').html('<p style="margin: 5em auto 2.5em;">There are no post matches.</p>')
        } else {
            getArticlesInfinite();
        }
    }

    function getArticlesInfinite() {
        getArticles();
        createWaypoint();
    }

    function getArticles() {
        $('div.posts').append($loading);
        var htmlArr = '';
        var currentData = null;
        endNum = endNum > totalNum ? totalNum : endNum;
        for (var i = startNum; i < endNum; i++) {
            currentData = articles[i];
            if (!!keyword && !matchKeyword(currentData)) continue;
            htmlArr += '<article class="page-article">';
            if ("video" == currentData.category && !!currentData.videoUrl) {
                htmlArr += '<div class="video-container"><iframe src="https://player.youku.com/embed/' + currentData.videoUrl + '" allowfullscreen ></iframe></div>';
            } else if ("audio" == currentData.category && !!currentData.audioUrl) {
                htmlArr += '<div class="video-container"><iframe src="' + currentData.audioUrl + '"></iframe></div>';
            } else {
                if (!!currentData.featimg) {
                    htmlArr += '<a href="' + currentData.url + '" class="noline">\
                        <img class="lazyload" src="{{ "/public/img/loading.svg" | prepend: site.static_cdn_root }}" data-src="{{ site.pic_bed_featimg_root }}'+ currentData.featimg + '?type=img" alt="' + currentData.title + '"></a>';
                }
            }

            htmlArr += '<div class="actions">\
                            <a href = "'+ currentData.url + '">'+ currentData.title +'</a>\
                            <span style="display:inline-block;"><i class="iconfont icon-time"></i><span class="date">'+ currentData.date +'</span></span>\
                        </div>'; 
            htmlArr += '<div class="tagscloud"><ul>';
            htmlArr += tagsHtml(currentData.tags);
            htmlArr += '</ul></div>';
            htmlArr += '</article>';
        }
        $('div.loading').remove();
        $('.posts').append(htmlArr);
    }

    function tagsHtml(tags){
        var html = '';
        var tagArr = tags.split(",");
        for (i in tagArr){
            var aTag = tagArr[i];
            html+='<li><a href="/gifootball/tag?q='+ encodeURI(aTag) +'">' + aTag +'</a>\
                <span>'+ totalTags[aTag] +'</span></li>';
        }
        return html;
    }

    function createWaypoint() {
        $('div.posts .page-article:last').waypoint(function (direction) {
            if (startNum == totalNum) {
                this.destroy();
                return; //all articles have been loaded
            }
            if (direction == "down") {
                this.destroy();
                increment();
                getArticlesInfinite();
            }
        }, {
                offset: 'bottom-in-view'
            });
    }

	/**
	 * check whether the article matches the keyword 
	 * @param {Object} post
	 */
    function matchKeyword(post) {
        var contentAll = new Array();
        contentAll.push(post.tags);
        var keywordArr = keyword.split(",");
        for (j = 0, len = keywordArr.length; j < len; j++) {
            if(contentAll.join('').toString().indexOf(keywordArr[j]) == -1){
                return false;
            }
        }
        return true;
    }

    function increment() {
        startNum = endNum; //let next startNum equals last endNum
        pageNum++;
        endNum += perPageItem;
    }
    
</script>
</html>