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

This reverts commit 4f159103bd9f008a49435d6d0ca8d0f3c9f8517c.

resources/app/browser.html

@@ -32,7 +32,6 @@
         <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>
@@ -51,6 +50,7 @@
     </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,6 +58,13 @@
 
     </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,36 +13,12 @@
     <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>
@@ -58,115 +34,26 @@
         }
         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 BrowserHistory = $(".HistoryContainer")[0];
+    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);
-        // 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 () {
+        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 () {
                 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,6 +3,7 @@ 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，是否为用户选择文件
@@ -11,7 +12,7 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url，是否为
     let www=/^(www)/;
     let m=/^(m)/;
     let li=$$("li", {//创建ul下的li
-        "className": "BrowerList"
+        "className": "BrowerList","draggable":"true"
     }, US_Browser.NavContainer);
     let ListBody=$$("div", {//创建li下的div
         "className": "BrowerListBody","ripple":""
@@ -28,14 +29,15 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url，是否为
         "favicons":'public/img/tray/logo.png'
     };
     ListBody.tag_favicon=$$("img", {//标签页图标
-        "className": "tag_favicon", "draggable":"false", "alt":""
+        "className": "tag_favicon", "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?"正在加载":"新建标签","draggable":"false"
+        "className": "Webname","innerHTML":address?"正在加载":"新建标签",
     }, ListBody);
     ListBody.tag_close=$$("i", {//标题页关闭按钮
         "className":"icon-cancel tag_close"
@@ -186,6 +188,15 @@ 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下的包裹节点
@@ -204,12 +215,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';
     }
@@ -315,8 +326,7 @@ US_Browser.SourceCode = function () {//查看源代码
     US_Browser.CreatBrower("view-source:"+US_Browser.Head[5].value);
 };
 US_Browser.Exit=function(){
-    window.close();
-    // ipc.send('window-all-closed');
+    BrowersWindow.close();
 };
 US_Browser.goBack = function(){//执行后退
     US_Browser.SelecteWebview.goBack();
@@ -415,10 +425,12 @@ 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){
@@ -473,26 +485,26 @@ US_Browser.HeadBind=function(){
     US_Browser.AddButton=$(".BrowwerAdd")[0];//获取新建标签页按钮
     US_Browser.ControlButton=$(".browerHeaderControl button");
     US_Browser.ControlButton[0].onclick=function(){//最小化
-        ipc.send('hide-window');
+        BrowersWindow.minimize();
     };
     US_Browser.ControlButton[1].onclick=function(){//最大化
         if(isBig){
-            ipc.send('show-window');
+            BrowersWindow.maximize();
             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='106px';
-                elm.style.height='calc(100% - 107px)';
+                elm.style.top='70px';
+                elm.style.height='calc(100% - 70px)';
             })
         }else{
-            ipc.send('orignal-window');
+            BrowersWindow.restore();
             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='116px';
-                elm.style.height='calc(100% - 117px)';
+                elm.style.top='81px';
+                elm.style.height='calc(100% - 80px)';
             })
         }
         isBig=!isBig;
@@ -550,7 +562,7 @@ US_Browser.HeadBind=function(){
             alert("窗口太多，请关闭一些再使用");//弹出提示
             return false;
         }
-        US_Browser.CreatBrower(null);
+        US_Browser.CreatBrower('./new.html');
         US_Browser.Head[5].focus();
         US_Browser.RightMenu.style.display='none';
         US_Browser.MouseMenuMainer.style.display='none';
@@ -584,18 +596,6 @@ 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,6 +832,60 @@ 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';
@@ -842,6 +896,7 @@ 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];//获取浏览器菜单
@@ -876,4 +931,5 @@ US_Browser.Init=function () {//初始化
 }();
 window.onload = function () {
     US_Browser.drag();
+    US_Browser.BrowerList.drag();
 }