历史纪录样式 功能 与 收藏栏的显示bug

resources/app/browser.html

@@ -32,6 +32,7 @@
         <ul class="MouseMenuMain" id="CampusInfoBrowserOnclickMenu" style="right: 1px;top:81px">
             <li onclick="US_Browser.CreatBrower('')">打开一个新的标签页<span>Ctrl+T</span></li>
             <li onclick="US_Browser.CreatBrowerWindow('')">打开新的窗口<span>Ctrl+N</span></li>
+            <li onclick="US_Browser.openshuqian()">打开/关闭标签栏<span></span></li>
             <li style="display: none">打开一个新的窗口</li>
             <li class="MouseMenuMainStep"></li>
             <li onclick="US_Browser.ShowHistory()">历史记录<span>Ctrl+H</span></li>
@@ -50,7 +51,6 @@
     </div>
     <div class="Favorites" style="z-index: 1;">
         <ul id="FavoritesUl">
-
         </ul>
         <div class="FavoritesMore"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
     </div>
@@ -58,13 +58,6 @@
 
     </ul>
 
-    <!-- 标签页右键菜单 -->
-    <ul id="US_TagSet" class="US_TagSet MouseMenuMain">
-        <li id="OpenTags" onclick="US_Browser.CreatBrower('')">打开新的标签页</li>
-        <li id="OpenTagser" onclick="US_Browser.reFresh();">重新加载</li>
-        <li id="DelectTags">关闭标签页</li>
-    </ul>
-
     <ul id="US_BookmarkSet" class="US_BookmarkSet MouseMenuMain">
         <li id="OpenBookmark">在新的标签页打开</li>
         <li id="OpenBookmarker">在新窗口打开</li>

resources/app/history.html

@@ -13,12 +13,36 @@
     <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>
@@ -34,26 +58,115 @@
         }
         return parent;
     }
-    var BrowserHistory = $(".HistoryContainer")[0];
-    for (date in localStorage) {
-        var a=$$("div",{"className":"HistoryCard"});
-        addChild(BrowserHistory,a);
-        var a_head=$$("p",{"className":"HistoryCardHead","innerText":date},a);
+    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);
-        var data=JSON.parse(localStorage[date]);
-        for(var i=0;i<data.length;i++){
-            var a_list=$$("li",{},a_container);
-            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);
-            a_list.url=data[i].url;
-            a_list.onclick=function () {
+        // 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>

resources/app/public/js/browser.js

@@ -3,7 +3,6 @@ const {ipcRenderer} = require('electron');
 let ipc=require('electron').ipcRenderer;
 /*注册命名空间*/
 let US_Browser=[];
-let BrowersWindow=require('electron').remote.getCurrentWindow();
 Namespace.register("US_Browser");
 /*浏览器函数*/
 US_Browser.CreatBrower=function (address,flag) {//创建窗口,url，是否为用户选择文件
@@ -12,7 +11,7 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url，是否为
     let www=/^(www)/;
     let m=/^(m)/;
     let li=$$("li", {//创建ul下的li
-        "className": "BrowerList","draggable":"true"
+        "className": "BrowerList"
     }, US_Browser.NavContainer);
     let ListBody=$$("div", {//创建li下的div
         "className": "BrowerListBody","ripple":""
@@ -29,15 +28,14 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url，是否为
         "favicons":'public/img/tray/logo.png'
     };
     ListBody.tag_favicon=$$("img", {//标签页图标
-        "className": "tag_favicon", "alt":""
+        "className": "tag_favicon", "draggable":"false", "alt":""
     }, ListBody);
-    ListBody.tag_favicon.setAttribute("draggable","false");
     ListBody.tag_favicon.style.display=(address&&address!==null)?"block":"none";
     ListBody.tag_favicon.onerror=function () {//不存在时显示的标签页图标
         this.src='public/img/tray/logo.png';
     };
     ListBody.Webname=$$("p", {//标签页标题
-        "className": "Webname","innerHTML":address?"正在加载":"新建标签",
+        "className": "Webname","innerHTML":address?"正在加载":"新建标签","draggable":"false"
     }, ListBody);
     ListBody.tag_close=$$("i", {//标题页关闭按钮
         "className":"icon-cancel tag_close"
@@ -188,15 +186,6 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url，是否为
         US_Browser.NavContainer.removeChild(webview.tag);//移除当前li
         document.body.removeChild(BrowerContainer);//移除当前webview
     };
-    // 标签页右键‘关闭标签’
-    li.onmousedown = function (e) {
-        if(e.button == 2 ){
-            US_Browser.MouseMenu($("#US_TagSet")[0],this,event);
-            $("#DelectTags")[0].onclick = function(){
-                ListBody.tag_close.click(0)
-            }
-        }
-    }
     webview.src=address;//给webview的src传值
     US_Browser.Bind();
     ListBody.click();//点击li下的包裹节点
@@ -215,12 +204,12 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url，是否为
         }
         webview.tag.getElementsByTagName('img')[0].style.display = "block";//标签页图标显示
     }
-    US_Browser.BrowerList.drag();
 };//创建一个新的浏览器选项卡
 US_Browser.MouseMenu=function (menu_main,data,e,flag) {//右键菜单事件
     let createNode=document.body;//获取第一和参数父元素
     let MouseMenuMain=$('.MouseMenuMain');//获取右键菜单事件的ul元素
     US_Browser.MouseMenuMainer.style.display='none';
+    $('#US_BookmarkSet')[0].style.display = 'none'
     for(let i=0;i<MouseMenuMain.length;i++){//隐藏右键菜单事件所有
         MouseMenuMain[i].style.display='none';
     }
@@ -326,7 +315,8 @@ US_Browser.SourceCode = function () {//查看源代码
     US_Browser.CreatBrower("view-source:"+US_Browser.Head[5].value);
 };
 US_Browser.Exit=function(){
-    BrowersWindow.close();
+    window.close();
+    // ipc.send('window-all-closed');
 };
 US_Browser.goBack = function(){//执行后退
     US_Browser.SelecteWebview.goBack();
@@ -425,12 +415,10 @@ US_Browser.Bind=function(){//绑定
                     US_Browser.BrowersTag[0].className='BrowerList Listindex';
                     US_Browser.BrowerContainer[j].style.opacity='0';
                     US_Browser.BrowerContainer[j].style.zIndex='1';
-                    US_Browser.BrowerContainer[j].style.left='-100%';
                 }
                 US_Browser.BrowersTag[i].className+=' BrowerActive';
                 US_Browser.BrowerContainer[i].style.opacity='1';
                 US_Browser.BrowerContainer[i].style.zIndex='1';
-                US_Browser.BrowerContainer[i].style.left='0';
                 US_Browser.Head[5].value=this.data.url;
                 US_Browser.SelecteWebview=US_Browser.BrowerContainer[i].children[0];
                 if(US_Browser.SelecteWebview.FindKey){
@@ -485,26 +473,26 @@ US_Browser.HeadBind=function(){
     US_Browser.AddButton=$(".BrowwerAdd")[0];//获取新建标签页按钮
     US_Browser.ControlButton=$(".browerHeaderControl button");
     US_Browser.ControlButton[0].onclick=function(){//最小化
-        BrowersWindow.minimize();
+        ipc.send('hide-window');
     };
     US_Browser.ControlButton[1].onclick=function(){//最大化
         if(isBig){
-            BrowersWindow.maximize();
+            ipc.send('show-window');
             this.className='icon-window-restore';
             US_Browser.NavContainer.style.padding = "5px 0 0";
             US_Browser.RightMenu.style.top='71px';
             US_Browser.BrowerContainer.each(function (index,elm) {
-                elm.style.top='70px';
-                elm.style.height='calc(100% - 70px)';
+                elm.style.top='106px';
+                elm.style.height='calc(100% - 107px)';
             })
         }else{
-            BrowersWindow.restore();
+            ipc.send('orignal-window');
             this.className='icon-window-maximize';
             US_Browser.NavContainer.style.padding = "15px 0 0";
             US_Browser.RightMenu.style.top='81px';
             US_Browser.BrowerContainer.each(function (index,elm) {
-                elm.style.top='81px';
-                elm.style.height='calc(100% - 80px)';
+                elm.style.top='116px';
+                elm.style.height='calc(100% - 117px)';
             })
         }
         isBig=!isBig;
@@ -562,7 +550,7 @@ US_Browser.HeadBind=function(){
             alert("窗口太多，请关闭一些再使用");//弹出提示
             return false;
         }
-        US_Browser.CreatBrower('./new.html');
+        US_Browser.CreatBrower(null);
         US_Browser.Head[5].focus();
         US_Browser.RightMenu.style.display='none';
         US_Browser.MouseMenuMainer.style.display='none';
@@ -596,6 +584,18 @@ US_Browser.HeadBind=function(){
         $('#LoveWebSize')[0].className = 'fa fa-heart'
         US_Browser.drag()
     }
+    var isop = false
+    US_Browser.openshuqian = () => {
+        if (isop) {
+            $('.Favorites')[0].style.top = '0px';
+            $('.Favorites')[0].style.zIndex = '1';
+            isop = false
+        }else {
+            $('.Favorites')[0].style.zIndex = '-1';
+            $('.Favorites')[0].style.top = '-35px';
+            isop = true
+        }
+    }
     US_Browser.Loveitem = () => {
         if (window.localStorage.getItem('arr') === null){
             let data = [
@@ -832,60 +832,6 @@ US_Browser.HeadBind=function(){
         ipc.send('openlove', US_Browser.DelectBookmarktar.getAttribute('data'))
         $('#US_BookmarkSet')[0].style.display = 'none';
     }
-    // 标签页拖动、右键单击事件
-    US_Browser.BrowerList.drag = function () {
-        US_Browser.tags = document.querySelectorAll('.bowerCreaterWindow .BrowerList');
-        US_Browser.tagEL = null;    
-        [].forEach.call(US_Browser.tags,function(BrowerList){
-            // 用户开始拖动元素或文本选择时会触发该事件
-            BrowerList.addEventListener('dragstart',US_Browser.tagdragstart,false)
-            // 当拖动的元素或文本选择进入有效的放置目标时，将触发该事件
-            BrowerList.addEventListener('dragenter',US_Browser.tagdragenter,false)
-            // 当在有效放置目标上拖动元素或文本选择时（每几百毫秒），将触发该事件。
-            // 该事件在放置目标上触发。
-            BrowerList.addEventListener('dragover',US_Browser.tagdragover,false)
-            // 当拖动的元素或文本选择留下有效的放置目标时，将触发该事件
-            BrowerList.addEventListener('dragleave',US_Browser.tagdragleave,false)
-            // 在有效放置目标上删除元素或文本选择时会触发该事件
-            BrowerList.addEventListener('drop',US_Browser.tagdrop,false)
-            // 当拖动操作结束时（通过释放鼠标按钮或按下转义键）将触发该事件
-            BrowerList.addEventListener('dragend',US_Browser.tagdragend,false)
-            // 标签页右键单击事件
-            BrowerList.addEventListener('mousedown',US_Browser.tagmousedown,false)
-        })
-    }
-    US_Browser.tagdragstart = function(e) {
-        tagEL = e.target;
-    }
-    US_Browser.tagdragenter = function(e) {
-        
-    }
-    US_Browser.tagdragover = function(e) {
-        // 防止默认行为
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'move';
-    }
-    US_Browser.tagdragleave = function(e) {
-         tagELf=false;
-    }
-    US_Browser.tagdrop = function(e) {
-        e.preventDefault();
-        if (tagEL.nextSibling == this) {
-            US_Browser.NavContainer.insertBefore(this,tagEL);
-        } else if (tagEL.previousSibling == this) {
-            US_Browser.NavContainer.insertBefore(tagEL,this);
-        } else if (tagEL != this) {
-            US_Browser.NavContainer.insertBefore(tagEL,this.nextSibling);
-        }
-        tagELf=false;
-    }
-    US_Browser.tagdragend = function(e) {
-        [].forEach.call(US_Browser.tags,function(BrowerList){});
-    }
-    US_Browser.tagmousedown = function(e) {
-        let TagSet = document.getElementById("US_TagSet");
-        US_Browser.MouseMenu(TagSet,this,event);
-    }
     US_Browser.Head[0].style.color = '#d3d3d3';
     US_Browser.Head[1].style.color = '#d3d3d3';
     US_Browser.Head[2].style.color = '#d3d3d3';
@@ -896,7 +842,6 @@ US_Browser.Init=function () {//初始化
     US_Browser.isready = false
     US_Browser.Love = window.localStorage.getItem('arr')
     US_Browser.NavContainer=$(".bowerCreaterWindow")[0];//获取标签页ul
-    US_Browser.BrowerList = $(".BrowerList");// 获取标签页li
     US_Browser.MouseMenuMain=$("#webviewBrowserMenu")[0];//获取网页右键菜单
     US_Browser.RightMenu=$("#CampusInfoBrowserOnclickMenu")[0];//获取浏览器菜单
     US_Browser.RightMenubtn=$("#MouseMenuMainerBtn")[0];//获取浏览器菜单
@@ -931,5 +876,4 @@ US_Browser.Init=function () {//初始化
 }();
 window.onload = function () {
     US_Browser.drag();
-    US_Browser.BrowerList.drag();
 }