소스 검색

Complted browser prototype

Toby Chui 3 년 전
부모
커밋
9ab297c899
4개의 변경된 파일174개의 추가작업 그리고 7개의 파일을 삭제
  1. 3 0
      AGI Documentation.md
  2. 48 0
      web/Browser/functions/bookmark.js
  3. 2 2
      web/Browser/functions/proxy.js
  4. 121 5
      web/Browser/index.html

+ 3 - 0
AGI Documentation.md

@@ -220,6 +220,9 @@ sendJSONResp(json_string) => Response request with JSON header
 
 //Since v1.119
 sendJSONResp(object) => Overload function, allow the same API to send Javascript object directly without the need for manual stringify using JSON.stringify
+
+//Since AGI v2.0
+sendOK(); => Reply OK in plain text
 ```
 
 Customize header:

+ 48 - 0
web/Browser/functions/bookmark.js

@@ -0,0 +1,48 @@
+/*
+    bookmark.js
+
+    //Require paramter
+    opr = {write / read}
+    rtype = {bookmark / titles}
+    newBookmarkArray = JSON array to store into the database under write mode
+    newTitleArray = JSON array to store titles
+*/
+
+newDBTableIfNotExists("browser");
+
+if (typeof(rtype) == "undefined" || rtype == "bookmark"){
+    if (opr == "write"){
+        //Write
+        writeDBItem("browser", USERNAME, newBookmarkArray);
+        sendOK();
+    }else{
+        //Read
+        var bookmarks = readDBItem("browser", USERNAME);
+        if (bookmarks == ""){
+            //Not initiated
+            sendJSONResp([]);
+        }else{
+            sendJSONResp(bookmarks);
+        }
+        
+    }
+}else if ( rtype == "titles"){
+    //Write title
+    if (opr == "write"){
+        //Write
+        writeDBItem("browser", USERNAME + "/titles", newTitleArray);
+        sendOK();
+    }else{
+        //Read
+        var titleMap = readDBItem("browser", USERNAME + "/titles");
+        if (titleMap == ""){
+            //Not initiated
+            sendJSONResp({});
+        }else{
+            sendJSONResp(titleMap);
+        }
+        
+    }
+}
+
+

+ 2 - 2
web/Browser/functions/proxy.js

@@ -28,7 +28,7 @@ for (var i = 1; i < srcChunks.length; i++){
     var thisChunk = srcChunks[i];
     if (thisChunk.substr(0,1) == "/"){
         //Inject the root URL in front
-        patchedSrcChunks.push(rootURL + "/" + thisChunk);
+        patchedSrcChunks.push(rootURL + thisChunk);
     }else if (thisChunk.trim().substr(0,4) != "http" && thisChunk.trim().substr(0,5) != "data:"){
         //Inject the current dir into it
         patchedSrcChunks.push(currentDirUrl + "/" + thisChunk);
@@ -49,7 +49,7 @@ for (var j = 1; j < hrefChunks.length; j++){
     var thisChunk = hrefChunks[j];
     if (thisChunk.substr(0,1) == "/"){
         //Inject the root URL in front
-        patchedHrefChunks.push(rootURL + "/" + thisChunk);
+        patchedHrefChunks.push(rootURL + thisChunk);
     }else if (thisChunk.trim().substr(0,4) != "http"){
         //Inject the current dir into it
         patchedHrefChunks.push(currentDirUrl + "/" + thisChunk);

+ 121 - 5
web/Browser/index.html

@@ -40,7 +40,7 @@
 				border: 0px !important;
 			}
 
-			.rightMenuItem button{
+			.rightMenuItem button:not(.inverted){
 				background-color: white !important;
 			}
 
@@ -73,6 +73,22 @@
 				border-bottom: 2px solid #41e8e5;
 			}
 
+			#bookmarkbar{
+				position: fixed;
+				right: 0px;
+				top: 42px;
+				background-color: white;
+				height: calc(100% - 42px);
+				width: 25em;
+				padding: 1.2em;
+				border: 1px solid #dedede;
+
+				box-shadow: -10px 1px 11px -5px rgba(0,0,0,0.15);
+				-webkit-box-shadow: -10px 1px 11px -5px rgba(0,0,0,0.15);
+				-moz-box-shadow: -10px 1px 11px -5px rgba(0,0,0,0.15);
+
+			}
+
 		</style>
 	</head>
 	<body>
@@ -94,13 +110,13 @@
 			</div>
 			<div id="urlbar" class="ui tiny action fluid input">
 				<input id="urlText" type="text" value="about:blank" onkeydown="handleURLKeydown(event);">
-				<button id="starBtn" class="ui icon basic circular tiny button">
+				<button id="starBtn" class="ui icon basic circular tiny button" onclick="addBookMark();">
 					<i class="star icon"></i>
 				</button>
 			</div>
 			<div class="right menu">
 				<div class="ui rightMenuItem">
-					<button class="ui tiny icon button">
+					<button class="ui tiny icon button" onclick="toggleBookmark();">
 						<i class="blue bookmark icon"></i>
 					</button>
 				</div>
@@ -119,6 +135,13 @@
 		  <iframe id="xframe" src="./blank.html" allow="fullscreen" referrerpolicy="no-referrer">
 
 		  </iframe>
+		  <div id="bookmarkbar" style="display:none;">
+			<div class="ui container">
+				<div id="bookmarklist" class="ui middle aligned divided list">
+					
+				</div>
+			</div>
+		  </div>
 		  <div id="notvdiWarning">
 			<div class="ui yellow message">
 				<i class="close icon"></i>
@@ -132,6 +155,9 @@
 			let historyStack = [];
 			let historyPopStack = [];
 			let currentURL = "about:blank";
+			let currentTitle = "";
+			let bookmarkBuffer = [];
+			let titleBuffer = {};
 
 			//Check if currently under vdi mode
 			if (ao_module_virtualDesktop == false){
@@ -142,6 +168,9 @@
 				$(this).closest('.message').transition('fade');
 			});
 
+			function toggleBookmark(){
+				$("#bookmarkbar").fadeToggle('fast');
+			}
 
 			//Perform window resize element size calculation
 			$(window).on("resize", function(){
@@ -194,8 +223,12 @@
 				window.open(currentURL);
 			}
 
-			function getTitleFromURL(url){
-				var title = targetURL.substr(targetURL.indexOf("/") + 2, targetURL.length);
+			function getTitleFromURL(targetURL){
+				var title = targetURL;
+				if (targetURL.includes("//")){
+					title = targetURL.substr(targetURL.indexOf("/") + 2, targetURL.length);
+				}
+				
 				return title;
 			}
 
@@ -257,8 +290,10 @@
 									if (data == ""){
 										let title = getTitleFromURL(targetURL);
 										ao_module_setWindowTitle(title);
+										currentTitle = title;
 									}else{
 										ao_module_setWindowTitle(data);
+										currentTitle = data;
 									}
 								});
 								$("#xframe").off("load");
@@ -274,9 +309,11 @@
 								if (matches == null){
 									let title = getTitleFromURL(targetURL);
 									ao_module_setWindowTitle(title);
+									currentTitle = title;
 								}else{
 									var title = matches[0].replace(/(<([^>]+)>)/gi, "");
 									ao_module_setWindowTitle(title);
+									currentTitle = title;
 								}
     							
 							});
@@ -287,10 +324,89 @@
 							$("#urlText").val(redirectTarget);
 						}
 					}
+				});
+
+				updateBookmarkButtonColor();
+			}
+
+			function updateBookmarkButtonColor(){
+				if (insideBookmark(currentURL)){
+					$("#starBtn").addClass("yellow");
+				}else{
+					$("#starBtn").removeClass("yellow");
+				}
+			}
+
+
+			function initbookmark(){
+				ao_module_agirun("Browser/functions/bookmark.js", {opr: "read"}, function(bookmarkData){
+					bookmarkBuffer = bookmarkData;
+					console.log("BOOKMARK DATA", bookmarkData);
+					ao_module_agirun("Browser/functions/bookmark.js", {rtype: "titles", opr: "read"}, function(data){
+						titleBuffer = data;
+						$("#bookmarklist").html("");
+						bookmarkBuffer.forEach(bookmark => {
+							let matchingTitle = titleBuffer[bookmark];
+							if (matchingTitle == undefined){
+								matchingTitle = getTitleFromURL(bookmark);
+							}
+							//Render the bookmark table
+							$("#bookmarklist").append(`
+								<div class="item">
+									<div class="right floated content">
+									<div class="ui mini icon basic blue circular button" onclick="loadWebsite('${bookmark}');"><i class="ui linkify icon"></i></div>
+									</div>
+									<div class="content">
+										${matchingTitle}
+									</div>
+							</div>`);
+						});
+
+						if (bookmarkBuffer.length == 0){
+							$("#bookmarklist").append(`<div class="item">
+								<div class="content">
+									<i class="ui bookmark icon"></i> No bookmark saved
+									</div>
+								</div>`);
+						}
+						
+					});
+				});
+
+				
+			}
+			initbookmark();
+
+			function addBookMark(){
+				if (bookmarkBuffer.includes(currentURL)){
+					//Remove bookmark
+					bookmarkBuffer = bookmarkBuffer.filter(e => e !== currentURL);
+					delete(titleBuffer[currentURL]);
+				}else{
+					//Add bookmark
+					bookmarkBuffer.push(currentURL);
+
+					//Remove array in the table
+					bookmarkBuffer = bookmarkBuffer.filter(function(item, pos, self) {
+						return self.indexOf(item) == pos;
+					});
+
+					titleBuffer[currentURL] = currentTitle;
+				}
 				
+				ao_module_agirun("Browser/functions/bookmark.js", {"opr": "write", "newBookmarkArray": JSON.stringify(bookmarkBuffer)}, function(data){
+					ao_module_agirun("Browser/functions/bookmark.js", {"rtype": "titles", "opr": "write", "newTitleArray": JSON.stringify(titleBuffer)}, function(data){
+						console.log(data);
+						updateBookmarkButtonColor();
+						initbookmark();
+					});
 				});
 			}
 
+			function insideBookmark(url){
+				return bookmarkBuffer.includes(url);
+			}
+
 
 			function proxyWebContent(url, callback){
 				ao_module_agirun("Browser/functions/proxy.js", {