root
/
UseStudio.Browers


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史记录</title>
    <link rel="stylesheet" href="./public/css/browser.css">
</head>
<body style="overflow: hidden">
<section style="-webkit-app-region: drag;height: 55px" class="bowerHeader">
    <section style="-webkit-app-region: no-drag" class="browerHeaderControl clearfix">
        <button type="button" class="icon-times close" style="font-size:16px;background: none;color: #fff"></button>
    </section>
    <div class="HistoryMain">
        <div class="HistoryHead">
            <p>历史记录</p>
            <div class="HistorySelect">
                <div>
                    <input type="text" id="SelectInp" placeholder="搜索历史记录" style="-webkit-app-region: no-drag" value="">
                </div>
            </div>
        </div>
        <div class="HistoryContainer">
        </div>
        <div class="Historyoperating">
            <ul>
                <li onclick="xianshi()" style="border-bottom: 2px solid #dadada">显示历史记录</li>
                <li onclick="HistoryCancelAll()" id="qingchu">
                    清除历史记录
                    <div class="item" onclick="HistoryCancelDone()">确定</div>
                    <div class="item">取消</div>
                </li>
                <li onclick="HistorySelect()">搜索</li>
            </ul>
        </div>
    </div>
    <div class="CampusInfoBrowserHistory"></div>
    <div class="HistoryBottom">
        <div class="HistoryBottomContent">
            <div class="Historycount">已选择<span class="HistoryCountSpan">1</span>项</div>
            <div class="HistoryPick">
                <div style="margin-right: 20px;" onclick="HistoryCancel()">取消</div>
                <div onclick="HistoryDelect()">删除</div>
            </div>
        </div>
    </div>
</section>
<script src="./public/js/uform.js"></script>
<script>
    var ipc=require('electron').ipcRenderer;
    $(".close")[0].onclick=function(){
        ipc.send('BrowserHistory-close');
    };
    addChild = function(parent,newChild){
        if(parent.firstChild){
            parent.insertBefore(newChild,parent.firstChild);
        } else {
            parent.addChild(newChild);
        }
        return parent;
    }
    const choose = () => {
        let numb = document.querySelectorAll("input[type='checkbox']:checked").length
        if (numb === 0) {
            $('.HistoryBottom')[0].style.bottom = '-55px';
        }else{
            $('.HistoryBottom')[0].style.bottom = '-0px';
            $('.HistoryCountSpan')[0].innerText = numb
        }
    }
    const HistoryCancel = () => {
        let numb = document.querySelectorAll("input[type='checkbox']:checked")
        if (numb.length) {
            for(var i=0; i < numb.length; i++){
                numb[i].checked = false;
            }
            $('.HistoryBottom')[0].style.bottom = '-55px';
            $('.HistoryCountSpan')[0].innerText = '0'
        }
    }
    const HistoryDelect = () => {
        let isclick = document.querySelectorAll("input[type='checkbox']:checked")
        for(let i = 0; i < isclick.length; i ++){
            console.log(isclick[i])
            Historyshanchu(isclick[i].parentNode.parentNode.parentNode.childNodes[0].innerHTML, isclick[i].value, isclick[i].parentNode)
        }
    }
    const Historyshanchu = (par, item, my) => {
        let arr = JSON.parse(localStorage[par])
        arr.splice(~~item, 1)
        localStorage[par] = JSON.stringify(arr)
        my.style.display = 'none'
        $('.HistoryBottom')[0].style.bottom = '-55px';
        $('.HistoryCountSpan')[0].innerText = '0'
    }
    const HistoryCancelAll = () => {
        [...document.querySelectorAll('.item')].map((i)=>{
            if(i.style.opacity === '0'){
                i.style.opacity = '1'
            }else{
                i.style.opacity = '0'
            }
        })
    }
    const HistorySelect = () => {
        let selectdata = document.querySelectorAll('#SelectInp')[0]
        let arr = []
        for (date in localStorage) {
            let data = JSON.parse(localStorage[date])
            for(let i = 0; i < data.length; i ++){
                if(data[i].title.indexOf(selectdata.value) >= 0 || data[i].url.indexOf(selectdata.value) >= 0){
                    arr.push(data[i])
                }
            }
        }
        xuanrang(arr)
    }
    let BrowserHistory = $(".HistoryContainer")[0];
    const xuanrang = (arr) => {
        BrowserHistory.innerHTML = ''
        let a = $$("div",{"className":"HistoryCard"},BrowserHistory);
        var a_head=$$("p",{"className":"HistoryCardHead","innerText":'搜索历史记录'},a);
        var a_container=$$("ul",{"className":"HistoryCardContainer"},a);
        // addChild(BrowserHistory,a);
        for(let i=0;i<arr.length;i++){
            let a_list=$$("li",{},a_container);
            let a_time=$$("span",{"innerText":arr[i].time},a_list);
            let a_content=$$("div",{},a_list);
            $$("img",{"src":arr[i].favicons,"draggable":"false"},a_content);
            $$("p",{"innerText":arr[i].title},a_content);
            $$("p",{"innerText":arr[i].url}, a_content)
            a_content.url=arr[i].url;
            a_content.onclick=function () {
                ipc.send('open-history',this.url);
                ipc.send('BrowserHistory-close');
            }
        }
    }
    const xianshi = () => {
        // BrowserHistory.innerHTML = ''
        for (date in localStorage) {
            var a = $$("div",{"className":"HistoryCard"});
            addChild(BrowserHistory,a);
            var a_head=$$("p",{"className":"HistoryCardHead","innerText":date},a);
            var a_container=$$("ul",{"className":"HistoryCardContainer"},a);
            var data = JSON.parse(localStorage[date]);
            for(var i=0;i<data.length;i++){
                var a_list=$$("li",{},a_container);
                $$("input",{"type":"checkbox","className":"Historyinput",'value': i,'onclick':function () {
                    choose()
                }},a_list)
                var a_time=$$("span",{"innerText":data[i].time},a_list);
                var a_content=$$("div",{},a_list);
                $$("img",{"src":data[i].favicons,"draggable":"false"},a_content);
                $$("p",{"innerText":data[i].title},a_content);
                $$("p",{"innerText":data[i].url}, a_content)
                a_content.url=data[i].url;
                a_content.onclick=function () {
                    ipc.send('open-history',this.url);
                    ipc.send('BrowserHistory-close');
                }
            }
        }
    }
    const HistoryCancelDone = () => {
        // localStorage = ''
    }
    window.onload = () => {
        xianshi()
    }
</script>

</body>
</html>