toolbox/view/index/default/index/index.html

{extend name="common/layout" /}
{block name="title"}{:config_get('title')} - {:config_get('subtitle')}{/block}
{block name="main"}
<div class="nk-content nk-content-lg nk-content-fluid pt-5 pb-5 bannerbg" style="background: url(/static/images/back.png);">
    <div class="container-xl">
        <div class="form-control-wrap circle">
            <div class="form-text-hint-lx">
                <span class="overline-title"><em class="icon ni ni-search"></em></span>
            </div>
            <input type="text" class="form-control form-control-lx btn-round" id="searchkw" placeholder="搜索工具(Ctrl+F)" autocomplete="off">
        </div>
    </div>
</div>
<!-- content @s -->
<div class="nk-content nk-content-fluid p-0">
    <div class="nk-block">
        <div class="card">
            <div class="card-inner p-2">
                <div class="container-xl">
                    <nav>
                        <ul class="breadcrumb breadcrumb-pipe">
                            <li class="breadcrumb-item fs-16px category-all active"><a href="javascript:show_tool_list(0)">全部</a></li>
                            {foreach $category as $v}
                            <li class="breadcrumb-item fs-16px category-item" data-id="{$v.id}"><a href="javascript:show_tool_list({$v.id})">{$v.title}</a></li>
                            {/foreach}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- content @s -->
<div class="nk-content nk-content-lg nk-content-fluid">
    <div class="container-xl">
        <div class="nk-content-body">
            {:config_get('head_banner')}
            <div id="toollist"></div>
            <div class="card card-preview" id="link_content" style="display:none">
                <div class="card-inner mt-3">
                    <div class="nya-title nk-ibx-action-item progress-rating">
                        <em class="icon ni ni-link"></em>
                        <span class="nk-menu-text font-weight-bold">友情链接</span>
                    </div>
                    <div class="row g-2">
                        <div class="col-12">
                        <ul class="preview-list">
                            {foreach $link as $v}
                            <li class="preview-item">
                                <a href="{$v.url}" class="btn btn-wider btn-outline-info btn-sm" target="_blank">{$v.name}</a>
                            </li>
                            {/foreach}
                        </ul>
                        </div>
                    </div>
                </div>
            </div>
            {:config_get('foot_banner')}
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
var tool_list = {:json_encode($tool)};
var tools = [];
var searchkw = '';
function show_category_btn(catid){
    if(catid == 0){
        $("#link_content").show();
        $(".category-all").addClass("active");
        $(".category-item").removeClass("active");
    }else{
        $("#link_content").hide();
        $(".category-all").removeClass("active");
        $(".category-item").removeClass("active");
        $.each($(".category-item"), function(index,value){
            if($(value).attr('data-id') == catid){
                $(value).addClass("active");
            }
        })
    }
}
function show_tool_list(catid){
    searchkw = '';$("#searchkw").val('');
    show_category_btn(catid);
    tools = [];
    var html = '';
    $.each(tool_list, function(index, value){
        if(catid!=0 && value.id!=catid) return;
        html += `
<div class="card card-preview category-card" data-category-id="${value.id}">
    <div class="card-inner mt-3">
        <div class="nya-title nk-ibx-action-item progress-rating">
            <em class="${value.icon}"></em>
            <span class="nk-menu-text font-weight-bold">${value.title}</span>
        </div>
    <div class="row g-2">`;
        $.each(value.items, function(index, value){
            tools.push(value);
            html += `
            <div class="col-lg-3 col-md-4 col-6">
                <a href="${value.url}" data-id="${value.id}" class="btn btn-wider btn-block btn-xl btn-outline-light tool-link" ${value.out?'target="_blank"':''}>${value.title}</a>
            </div>`
        })
        html += `
        </div>
    </div>
</div>`;
    });
    $("#toollist").html(html);
    bind_statistics();
}
function show_search_list(){
    var list = tools.filter(v => {
        return v.title.indexOf(searchkw) !== -1 || v.keyword!=null && v.keyword.indexOf(searchkw) !== -1
    })
    var html = '';
    html += `
<div class="card card-preview category-card">
    <div class="card-inner mt-3">
        <div class="nya-title nk-ibx-action-item progress-rating">
            <em class="icon ni ni-search"></em>
            <span class="nk-menu-text font-weight-bold">搜索结果</span>
        </div>
    <div class="row g-2">`;
    if(list.length>0){
        $.each(list, function(index, value){
            html += `
            <div class="col-lg-3 col-md-4 col-6">
                <a href="${value.url}" data-id="${value.id}" class="btn btn-wider btn-block btn-xl btn-outline-light tool-link" ${value.out?'target="_blank"':''}>${value.title}</a>
            </div>`
        })
    }else{
        html += `<p class="search-placeholder">暂无搜索结果</p>`
    }
    html += `
        </div>
    </div>
</div>`;
    $("#toollist").html(html);
    bind_statistics();
    $("#link_content").hide();
    $(".category-all").removeClass("active");
    $(".category-item").removeClass("active");
}
function watch_searchkw(kw){
    if(kw != searchkw){
        searchkw = kw;
        if(searchkw == ''){
            show_tool_list(0)
        }else{
            show_search_list()
        }
    }
}
function bind_statistics(){
    $(".tool-link").click(function(){
	    var id = $(this).attr('data-id');
        $.ajax({
            type : "POST",
            url : "/clitool",
            data : {id: id},
            dataType : 'json',
            async: true,
            success : function(data) {
                console.log('statistics ok '+id)
            }
        });
    });
}
$(document).ready(function(){
    show_tool_list(0);
    $("#searchkw").on('input', function(){
        watch_searchkw($(this).val().trim().toLowerCase())
    });
    $("#searchkw").change(function(){
        watch_searchkw($(this).val().trim().toLowerCase())
    });
    $(document).keydown(function(event){
        if(event.ctrlKey && event.keyCode==70){
            $("#searchkw").focus();
            return false;
        }
    });
})
</script>
{/block}