Procházet zdrojové kódy

收藏栏的设计与功能的实现

gitname před 8 roky
rodič
revize
8d538f0776

+ 33 - 9
resources/app/browser.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>有思浏览器</title>
     <link rel="stylesheet" href="./public/css/browser.css">
+    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 </head>
 <body>
 <section style="-webkit-app-region: no-drag" class="bowerTop"></section>
@@ -23,7 +24,7 @@
     <button class="icon-cw"></button>
     <div class="BrowerUrlArea">
         <span class="icon-lock"></span>
-        <input type="text" placeholder="在此输入网址或关键词" id="search">
+        <input type="text" placeholder="在此输入网址或关键词" id="search" />
     </div>
     <button class="icon-ellipsis-vert"></button>
     <ul class="MouseMenuMain" id="CampusInfoBrowserOnclickMenu" style="right: 1px;top:81px">
@@ -43,16 +44,39 @@
         <li class="MouseMenuMainStep"></li>
         <li onclick="US_Browser.Exit()">退出<span>Ctrl+Shift+Q</span></li>
     </ul>
-    <button class="icon-ellipsis-vert" id="MouseMenuMainerBtn"></button>
-    <ul class="MouseMenuMainer" style="right: 1px;top:81px;display: none">
-        <li>www.baidu.com</li>
-        <li class="MouseMenuMainStep"></li>
-        <li>www.jd.com</li>
-        <li class="MouseMenuMainStep"></li>
-        <li>www.taobao.com</li>
-        <li class="MouseMenuMainStep"></li>
+    <button class="icon-ellipsis-verter" id="MouseMenuMainerBtn"><i class="fa fa-heart-o" aria-hidden="true" id="LoveWebSize"></i></button>
+</div>
+<div class="Favorites" style="z-index: 1;">
+    <ul id="FavoritesUl">
+        <li onclick="US_Browser.gotoLove('http://www.1473.cn/')">
+            <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
+            <p class="Webname" draggable="true">云端 - 1473.cn</p>
+        </li>
+        <li onclick="US_Browser.gotoLove('http://dafen.1473.cn/')">
+            <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
+            <p class="Webname" draggable="true">云评分官网</p>
+        </li>
+        <li onclick="US_Browser.gotoLove('http://task.1473.cn/')">
+            <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
+            <p class="Webname" draggable="true">有思任务系统</p>
+        </li>
     </ul>
+    <div class="FavoritesMore"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
 </div>
+<ul class="MouseMenuMainer" style="right: 1px;top:81px;display: none">
+    <li onclick="US_Browser.gotoLove('http://www.1473.cn/')" class="FavoritesLI">
+        <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
+        <p class="Webname" draggable="true">云端 - 1473.cn</p>
+    </li>
+    <li onclick="US_Browser.gotoLove('http://www.1473.cn/')" class="FavoritesLI">
+        <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
+        <p class="Webname" draggable="true">云评分官网</p>
+    </li>
+    <li onclick="US_Browser.gotoLove('http://www.1473.cn/')" class="FavoritesLI">
+        <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
+        <p class="Webname" draggable="true">有思任务系统</p>
+    </li>
+</ul>
 <ul class="MouseMenuMain" id="webviewBrowserMenu">
     <li class="US_OpenLinkInNew"  style="display: none">在新标签页中打开链接</li>
     <li class='US_OpenImgInNew' style="display: none">在新标签页中打开图片</li>

+ 0 - 1
resources/app/history.html

@@ -41,7 +41,6 @@
         var a_head=$$("p",{"className":"HistoryCardHead","innerText":date},a);
         var a_container=$$("ul",{"className":"HistoryCardContainer"},a);
         var data=JSON.parse(localStorage[date]);
-        console.log(data)
         for(var i=0;i<data.length;i++){
             var a_list=$$("li",{},a_container);
             var a_time=$$("span",{"innerText":data[i].time},a_list);

+ 72 - 9
resources/app/public/css/browser.css

@@ -111,6 +111,43 @@ button:hover {
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
 }
+.Favorites {
+    width: 100%;
+    height: 26px;
+    display: inline-flex;
+    padding: 4px 0;
+    background: #ffffff;
+    /* border-top: 1px solid #ccc; */
+    border-bottom: 1px solid #ccc;
+}
+.Favorites > ul > li {
+    height: 25px;
+    margin: 0 3px;
+    border-radius: 5px;
+    padding: 0 5px;
+    -webkit-transition: all .3s;
+    -moz-transition: all .3s;
+    -ms-transition: all .3s;
+    -o-transition: all .3s;
+    transition: all .3s;
+    cursor: pointer;
+    float: left;
+}
+.Favorites > ul > li:hover {
+    background: #f1f1f1;
+}
+.Favorites > ul > li img{
+    width: 20px;
+    float: left;
+    line-height: 25px;
+    margin: 3px 3px;
+}
+.Favorites > ul > li p{
+    float: left;
+    font-size: 12px;
+    line-height: 25px;
+    margin: 0 3px;
+}
 .BrowerHead button{
     float: left;
     overflow: hidden;
@@ -132,6 +169,9 @@ button:hover {
     background: #fff;
     border-radius: 3px;
 }
+.BrowerUrlArea > i{
+    margin: 2px;
+}
 .BrowerUrlArea *{
     float: left;
 }
@@ -144,7 +184,7 @@ button:hover {
 }
 .BrowerUrlArea input {
     float: left;
-    width: calc(100% - 21px) !important;
+    width: calc(100% - 42px) !important;
     height: 20px;
     border: 0 solid #d2d2d2;
     outline: none;
@@ -159,6 +199,22 @@ button:hover {
     font-size: 18px;
     padding-top: 2px;
 }
+.FavoritesMore {
+    position: absolute;
+    right: 5px;
+    padding: 2px;
+    cursor: pointer;
+    color: #CCCCCC;
+}
+#FavoritesUl {
+    overflow: hidden;
+}
+.icon-ellipsis-verter{
+    color: #8c8c8c;
+    font-weight: lighter;
+    font-size: 18px;
+    padding-top: 2px;
+}
 .bowerHeaderSeach .bowerMenu {
     float: right;
 }
@@ -309,11 +365,11 @@ button.BrowwerAdd {
 }
 /*浏览器显示网页部分样式*/
 .BrowerContainer {
-    height: calc(100% - 80px);
+    height: calc(100% - 115px);
     position: absolute;
     width: 100%;
     left: 0;
-    top: 81px;
+    top: 116px;
 }
 .BrowerContainer webview, webview object{
     height: 100% !important;
@@ -370,6 +426,9 @@ button.BrowwerAdd {
     -khtml-user-select:none;
     user-select:none;
 }
+.MouseMenuMainer {
+    width: 300px;
+}
 .MouseMenuMainer li{
     width: auto;
     max-width: 400px;
@@ -380,18 +439,22 @@ button.BrowwerAdd {
     white-space: nowrap;
     margin-bottom: 2px;
 }
-.MouseMenuMainer li span{
-    float: right;
-    margin-left: 40px;
-    color: #bfbfbf;
+.MouseMenuMainer li img{
+    width: 20px;
+    float: left;
+    line-height: 25px;
+    margin: 3px 3px;
+}
+.MouseMenuMainer li p{
+    font-size: 12px;
+    line-height: 25px;
+    margin: 0 3px;
 }
 .MouseMenuMainer li:hover{
     background-color:#eee;
     color:#000;
     cursor:pointer;
 }
-
-
 .MouseMenuMainStep{
     width: 100%;
     padding: 0 !important;

+ 69 - 7
resources/app/public/js/browser.js

@@ -117,6 +117,7 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url,是否为
     });
     webview.addEventListener('load-commit',function (e) {
         US_Browser.LoadTips.innerHTML=e.url;
+        US_Browser.IsLove(e.url)
     });
     webview.addEventListener('found-in-page', function(e) {
         if (e.result.finalUpdate) {
@@ -130,6 +131,9 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url,是否为
         }
     });
     webview.addEventListener('did-fail-load',function (e) {
+        if (e.errorCode === -3) {
+            return
+        }
         US_Browser.SelecteWebview.src = './blank.html'
     });
     /*webview.addEventListener('did-fail-load',function (e) {
@@ -204,7 +208,7 @@ US_Browser.CreatBrower=function (address,flag) {//创建窗口,url,是否为
 US_Browser.MouseMenu=function (menu_main,data,e,flag) {//右键菜单事件
     let createNode=document.body;//获取第一和参数父元素
     let MouseMenuMain=$('.MouseMenuMain');//获取右键菜单事件的ul元素
-    $('.MouseMenuMainer')[0].style.display='none';
+    US_Browser.MouseMenuMainer.style.display='none';
     for(let i=0;i<MouseMenuMain.length;i++){//隐藏右键菜单事件所有
         MouseMenuMain[i].style.display='none';
     }
@@ -405,7 +409,7 @@ US_Browser.Bind=function(){//绑定
                     US_Browser.BrowersTag[j].className='BrowerList';
                     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.zIndex='1';
                 }
                 US_Browser.BrowersTag[i].className+=' BrowerActive';
                 US_Browser.BrowerContainer[i].style.opacity='1';
@@ -511,12 +515,15 @@ US_Browser.HeadBind=function(){
     US_Browser.Head[5].onkeydown=function (e) {//获取搜索框值
         if(e.keyCode===13){//keycode为13
             let secondary = /([a-z0-9--]{1,200})\.([a-z]{2,10})(\.[a-z]{2,10})?/
+            let file = /^(file|ftp)/
             if(this.value.length){//如果存在值
                 if(this.value.match(http) || this.value.match(https)){//判断是否存在http或https
                     US_Browser.SelecteWebview.src=this.value;//给webview的src传值
                 }else if(this.value.match(www)||this.value.match(m)){
                     US_Browser.SelecteWebview.src='http://'+this.value;//给webview的src传值
-                }else if (secondary.test(this.value)) {
+                }else if (file.test(this.value)) {
+                    US_Browser.SelecteWebview.src = this.value
+                } else if (secondary.test(this.value)) {
                     US_Browser.SelecteWebview.src = 'http://' + this.value
                 } else {
                     US_Browser.SelecteWebview.src='https://www.baidu.com/s?cl=3&wd='+this.value;//给webview的src传值
@@ -541,14 +548,65 @@ US_Browser.HeadBind=function(){
         US_Browser.CreatBrower(null);
         US_Browser.Head[5].focus();
         US_Browser.RightMenu.style.display='none';
+        US_Browser.MouseMenuMainer.style.display='none';
     };
     US_Browser.RightMenubtn.onclick = function () {
-        let MouseMenuMainer  = $('.MouseMenuMainer')[0]
-        if (MouseMenuMainer.style.display === "none") {
-            MouseMenuMainer.style.display = "block"
+        if (window.localStorage.getItem('arr') === null) {
+            window.localStorage.setItem('arr', `[{"url": "${US_Browser.SelecteWebview.src}","icon": "${$('.BrowerActive')[0].children[0].children[0].src}", "title": "${US_Browser.SelecteWebview.getTitle()}"}]`)
+        } else if (window.localStorage.getItem('arr').indexOf(US_Browser.SelecteWebview.src) != -1) {
+            let b = JSON.parse(window.localStorage.getItem('arr'))
+            b.map((i, j) => {
+                if (i.url === US_Browser.SelecteWebview.src) {
+                    let arr = JSON.parse(window.localStorage.getItem('arr'))
+                    arr.splice(j, 1);
+                    window.localStorage.setItem('arr', JSON.stringify(arr))
+                    $('#LoveWebSize')[0].className = 'fa fa-heart-o'
+                    $('#FavoritesUl')[0].removeChild($('#FavoritesUl')[0].children[j + 3])
+                }
+            })
             return
+        } else {
+            let c = JSON.parse(window.localStorage.getItem('arr'))
+            c.push({
+                "url": US_Browser.SelecteWebview.src,
+                "icon": $('.BrowerActive')[0].children[0].children[0].src,
+                "title": US_Browser.SelecteWebview.getTitle()
+            })
+            window.localStorage.setItem('arr', JSON.stringify(c))
         }
-        MouseMenuMainer.style.display = "none"
+        $('#FavoritesUl')[0].innerHTML += `<li onclick="US_Browser.gotoLove('${US_Browser.SelecteWebview.src}')">
+            <img class="tag_favicon" draggable="true" style="display: block;" src=${$('.BrowerActive')[0].children[0].children[0].src}>
+            <p class="Webname" draggable="true">${US_Browser.SelecteWebview.getTitle()}</p>
+        </li>`
+        $('#LoveWebSize')[0].className = 'fa fa-heart'
+    }
+    US_Browser.Loveitem = () => {
+        if (window.localStorage.getItem('arr') === null){ return }
+        JSON.parse(window.localStorage.getItem('arr')).map((i, j) => {
+            $('#FavoritesUl')[0].innerHTML += `<li onclick="US_Browser.gotoLove('${i.url}')">
+                <img class="tag_favicon" draggable="true" style="display: block;" src=${i.icon}>
+                <p class="Webname" draggable="true">${i.title}</p>
+            </li>`
+            $('.MouseMenuMainer')[0].innerHTML += `<li onclick="US_Browser.gotoLove('${i.url}')">
+                <img class="tag_favicon" draggable="true" style="display: block;" src=${i.icon}>
+                <p class="Webname" draggable="true">${i.title}</p>
+            </li>`
+        })
+    }
+    US_Browser.IsLove = (msg) => {
+        if (window.localStorage.getItem('arr') === null){ return }
+        if (window.localStorage.getItem('arr').indexOf(msg) != -1) {
+            $('#LoveWebSize')[0].className = 'fa fa-heart'
+        } else {
+            $('#LoveWebSize')[0].className = 'fa fa-heart-o'
+        }
+    }
+    US_Browser.gotoLove = (msg) => {
+        US_Browser.SelecteWebview.src = msg
+        US_Browser.MouseMenuMainer.style.display = 'none'
+    }
+    US_Browser.FavoritesMore.onclick = () => {
+        US_Browser.MouseMenuMainer.style.display = 'block'
     }
     window.addEventListener('dragleave',function (e) {
         e.preventDefault();
@@ -645,6 +703,7 @@ US_Browser.HeadBind=function(){
 };//浏览器头部事件绑定
 US_Browser.Init=function () {//初始化
     US_Browser.isready = false
+    US_Browser.Love = window.localStorage.getItem('arr')
     US_Browser.NavContainer=$(".bowerCreaterWindow")[0];//获取标签页ul
     US_Browser.MouseMenuMain=$("#webviewBrowserMenu")[0];//获取网页右键菜单
     US_Browser.RightMenu=$("#CampusInfoBrowserOnclickMenu")[0];//获取浏览器菜单
@@ -654,6 +713,8 @@ US_Browser.Init=function () {//初始化
     US_Browser.Elm=$(".BrowerFind *");//查找菜单的子级
     US_Browser.MenuBack= $(".US_Browers_Back")[0];
     US_Browser.MenuGo=$(".US_Browers_go")[0];
+    US_Browser.FavoritesMore = $('.FavoritesMore')[0]
+    US_Browser.MouseMenuMainer = $('.MouseMenuMainer')[0]
     US_Browser.Elm[0].onkeyup=function (e) {//查找的input
         if(this.value.length&&e.keyCode!==8){//如果存在值
             US_Browser.SelecteWebview.findInPage(this.value);
@@ -670,4 +731,5 @@ US_Browser.Init=function () {//初始化
     };
     US_Browser.HeadBind();
     US_Browser.IpcBind();
+    US_Browser.Loveitem();
 }();