Only for testing

testing.js

class Helper {
    static set setData(data) {
        this.data = data;
        this.articles = this.feed.entry;
        this.articlesTemp = this.feed.entry;
        this.categories = this.feed.category;
    }

    static get feed() {
        return this.data.feed;
    }

    static get sitemapHeader() {
        var child = document.createElement('div');
        child.setAttribute('class', 'sitemap-header')
        let htm = '';
        this.sortingCategories = this.categories;
        htm += `<table>
                    <tr>
                        <td class="right">Urutkan artikel berdasarkan:</td>
                        <td>
                            <select onchange="showBy(value)">
                                <option value=1>Posting Terbaru</option>
                                <option value=2>Posting Diperbaharui</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="right">Filter artikel berdasarkan kategori:</td>
                        <td>
                            <select onchange="myFunction(value)">
                                <option value="">Semua Kategori</option>
                                ${this.categories.map(category => {
                                    return "<option value='"+ category.term+"'>"+category.term+"</option>"
                                }).join("")}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="right">Cari dengan kata kunci:</td>
                        <td>
                            <input type="text" oninput="searchFunction(value)"placeholder="Cari Artikel"/>
                        </td>
                    </tr>
                </table>`;
        child.innerHTML = htm;
        document.getElementById('sitemap').appendChild(child);
    }

    static get sitemapDescription() {
        var child = document.createElement('div');
        child.setAttribute('class', 'sitemap-description');
        var htm = `<div class="sitemap-group">
                    <strong>Total Article:</strong> ${this.totalArticle}
                </div>`;
        child.innerHTML = htm;
        document.getElementById('sitemap').appendChild(child);
    }

    static get sitemapBody() {
        var child = document.createElement('div');
        child.setAttribute('class', 'sitemap-body');
        child.setAttribute('id', 'sitemap-body');
        document.getElementById('sitemap').appendChild(child);
        this.reload();
    }


    static reload() {
        var htm = '';
        var articles = this.articles;
        for (let index = 0; index < 10; index++) {
            var article = articles[index];
            if (article) {
                var content = article.content.$t;
                var title = article.title.$t;
                var link = article.link[4].href;
                var totalComment = article.thr$total.$t;
                var categories = article.category;
                var lastUpdatedOn = article.updated.$t;
                var createdOn = article.published.$t;
                htm += `<div class="dc-content">
                    <div class="dc-content-image" style="background-image: url(${getImageUrl(content)})"></div>
                    <div class="dc-content-description">
                        <h4><a href="${link}">${title}</a></h4>
                        <p> 
                        ${categories.map(category => {
                            return "<span><a href='/search/label/>"+category.term+"'>"+category.term+"</a></span>"
                        }).join("")}
                        </p>
                    </div>
                </div>`;
            }
        }
        document.getElementById('sitemap-body').innerHTML = htm;
    }

    static set categories(category) {
        this.category = category;
    }

    static set sortingCategories(categories) {
        categories.sort(function(cat1, cat2) {
            if (cat1.term < cat2.term) return -1;
            if (cat1.term > cat2.term) return +1;
            return 0;
        });
        this.categories = categories;
    }

    static get categories() {
        return this.category;
    }

    static get totalArticle() {
        return this.articles.length;
    }

    static get totalCategory() {
        return this.categories.length;
    }

    static set setArticle(article) {
        this.articles = article;
    }

    static set getUrls(orderBy) {
        this.orderBy = orderBy;
    }

    static get getUrls() {
        const staticUrl = 'https://demo.bluegin.xyz';
        // const staticUrl = 'http://devonly4use.blogspot.com';
        return staticUrl + '/feeds/posts/default?orderby=published&alt=json-in-script&max-results=88888&callback=setSitemap'
    }
}

function setNew(latest, article) {
    var title = article.title.$t;
    var articleId = article.id.$t;
    for (let index in latest) {
        let latestId = latest[index].id.$t;
        if (articleId === latestId) {
            return title + ' <sup style="color:red; font-style: italic;">New!</sup>';
        }
    }
    return title;
}

function setSitemap(data) {
    Helper.setData = data;
    // get header sitemap
    Helper.sitemapHeader;
    // get sitemapDescription;
    Helper.sitemapDescription;
    // get sitemapBody
    Helper.sitemapBody;
}

function getImageUrl(str) {
    var urls = str.match(/<img [^>]*src="[^"]*"[^>]*>/gm);

    if (urls) {
        urls = urls.map(x => x.replace(/.*src="([^"]*)".*/, '$1'));
        return typeof urls[0] === 'undefined' ? '/no-image.jpg' : urls[0];
    } else {
        return '/no-image.jpg';
    }
}


function myFunction(value) {
    var articles = Helper.articlesTemp;
    var articleTemp = [];
    if (value) {
        for (let i = 0; i < articles.length; i++) {
            let category = articles[i].category;
            if (category) {
                var categoryExists = category.find(category => category.term === value);
                if (typeof categoryExists !== 'undefined') {
                    articleTemp.push(articles[i]);
                }
            }
        }
    } else {
        articleTemp = articles;
    }

    articleTemp = Array.from(new Set(articleTemp.map(article => article)));
    Helper.setArticle = articleTemp;
    Helper.reload();
}

function searchFunction(searchString) {
    var indices = getIndicesOf(searchString, "I learned to play the Ukulele in Lebanon.");
    var articles = Helper.articlesTemp;
    var articleTemp = [];
    var artileTempNoTitle = [];

    if (searchString) {
        for (let i = 0; i < articles.length; i++) {
            let indices = getIndicesOf(searchString, articles[i].title.$t);
            if (indices.length !== 0) {
                articleTemp.push(articles[i]);
            } else {
                artileTempNoTitle.push(articles[i]);
            }
        }

        for (let i = 0; i < artileTempNoTitle.length; i++) {
            let indices = getIndicesOf(searchString, articles[i].content.$t);
            if (indices.length !== 0) {
                articleTemp.push(articles[i]);
            }
        }

    } else {
        articleTemp = Helper.articlesTemp;
    }
    articleTemp = Array.from(new Set(articleTemp.map(article => article)));
    Helper.setArticle = articleTemp;
    Helper.reload();
}

function showBy(value) {
    var articles = Helper.articles;
    var articleTemp = [];
    if (value == 1) {
        articles.sort((article1, article2) => {
            var date1 = new Date(article1.published.$t).getTime();
            var date2 = new Date(article2.published.$t).getTime();

            if (date1 < date2) return +1;
            if (date1 > date2) return -1;
            return 0;
        });
    } else {
        articles.sort((article1, article2) => {
            var date1 = new Date(article1.updated.$t).getTime();
            var date2 = new Date(article2.updated.$t).getTime();

            if (date1 < date2) return +1;
            if (date1 > date2) return -1;
            return 0;
        });
    }

    Helper.setArticle = articles;
    Helper.reload();
}

function onLoad() {
    var myAwesomeScript = document.createElement('script');
    myAwesomeScript.setAttribute('src', Helper.getUrls);
    document.body.appendChild(myAwesomeScript);
};

function setDateTime(date) {
    var month = 'Januari,Februari,Maret,April,Mei,Juni,Juli,Agustus,September,Oktober,November,Desember'.split(',');
    date = new Date(date);

    let tanggal = date.getDate();
    let bulan = date.getMonth();
    let tahun = date.getFullYear();
    let jam = date.getHours();
    let menit = date.getMinutes();
    let detik = date.getSeconds();

    return tanggal + ' ' + month[bulan] + ' ' + tahun + '; ' + jam + ':' + menit + ':' + detik;
}

onLoad();


function getIndicesOf(searchStr, str, caseSensitive) {
    var searchStrLen = searchStr.length;
    if (searchStrLen == 0) {
        return [];
    }
    var startIndex = 0,
        index, indices = [];
    if (!caseSensitive) {
        str = str.toLowerCase();
        searchStr = searchStr.toLowerCase();
    }
    while ((index = str.indexOf(searchStr, startIndex)) > -1) {
        indices.push(index);
        startIndex = index + searchStrLen;
    }
    return indices;
}