document.addEventListener("DOMContentLoaded", function(event) { const themes = require('./themes.js') const themeList = $('#theme-list'); const menuResponsive = require('./menu-responsive') const debounceResize = menuResponsive({ menuList: themeList, }) const Cookies = require('js-cookie') const themeCookieName = 'gitlist-bootstrap-theme' function getThemeCookie() { const theme = Cookies.get(themeCookieName) return theme || 'bootstrap-cosmo'; } gitlist.getThemeCookie = getThemeCookie; function setThemeCookie(theme) { Cookies.set(themeCookieName, theme, { expires: 3650, path: '/' }); } const currentCookie = getThemeCookie('gitlist-bootstrap-theme'); for(let key in themes) { const menu = '<li class="' + (currentCookie === key ? 'active' : '') + '" style="text-transform: capitalize"><a href="#" data-theme="' + key + '" class="theme-link">' + key.substring(10) + '</a></li>'; themeList.append(menu); }

gitlist.setTheme()

const themesheet = $('#bootstrap-theme'); $('.theme-link').click(function(event){

if (window.gitlist.lastloadSpan !== undefined && window.gitlist.lastloadSpan > 1000) { $('body').prepend(` <div class="p3x-gitlist-overlay"> <div> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> </div> <div> For a big page, it takes some time to switch the theme...<br/> The page rendering took about ${Math.ceil(window.gitlist.lastloadSpan / 1000)} seconds ...<br/> It means the theme will take <strong>about</strong> the same time ... </div> </div> `) }

debounceResize(); themeList.find('.active').removeClass('active'); const $this = $(this); $this.parent().addClass('active'); const themeurl = themes[$this.attr('data-theme')]; setThemeCookie($this.attr('data-theme'));

const href = (gitlist.basepath === '/' ? '' : gitlist.basepath) + themeurl; themesheet.attr('href', href);

gitlist.setTheme()

event.preventDefault(); }); });