Trang chủ Khám phá Trợ giúp
Đăng nhập
mirrors
/
SingleFile
mirror of https://github.com/gildas-lormeau/SingleFile
1
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Browse Source

added "edit filename" feature

Gildas lormeau 14 năm trước cách đây
mục cha
b7ca85b93e
commit
7faed402e8
4 tập tin đã thay đổi với 77 bổ sung và 12 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 34 7
      WebContent/ui/pages/banner.css
  2. 3 0
      WebContent/ui/pages/banner.html
  3. 1 1
      WebContent/ui/scripts/bg/background.js
  4. 39 4
      WebContent/ui/scripts/content/banner.js

+ 34 - 7
WebContent/ui/pages/banner.css
Xem Tập Tin 

@@ -1,18 +1,15 @@
 
 body {
 
 body {
 
 	overflow: hidden;
 
 	overflow: hidden;
 
-	margin-top: 4px;
 
-	margin-left: 4px;
 
-	margin-bottom: 0px;
 
-	margin-right: 0px;
 
 	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgb(253,
 
 	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgb(253,
 
 		237, 166) ), color-stop(1, rgb(250, 229, 146) ) );
 
 		237, 166) ), color-stop(1, rgb(250, 229, 146) ) );
 
+	background-repeat: repeat-x;
 
+	color: black;
 
+	font-family: Arial;
 
+	font-size: 11pt;
 
 }
 
 }
 
 
 
 .link {
 
 .link {
 
-	color: black;
 
-	font-family: Arial;
 
 	text-decoration: none;
 
 	text-decoration: none;
 
-	font-size: 11pt;
 
 	padding-left: 20px;
 
 	padding-left: 20px;
 
 }
 
 }
 
 
 
@@ -31,6 +28,36 @@ body {
 
 	left: -14px;
 
 	left: -14px;
 
 }
 
 }
 
 
 
+.filename-container {
 
+	position: absolute;
 
+	padding: 2px;
 
+	right: 50px;
 
+	top: 8px;
 
+	opacity: .5;
 
+	-webkit-transition: opacity 250ms;
 
+}
 
+
 
+.filename-container:hover {
 
+	opacity: 1;
 
+}
 
+
 
+.filename {
 
+	padding: 2px;
 
+	max-width: 400px;
 
+	overflow: hidden;
 
+	text-overflow: ellipsis;
 
+	white-space: nowrap;
 
+	display: inline-block;
 
+}
 
+
 
+.filename[contenteditable=true] {
 
+	background-color: #fff8d6;
 
+}
 
+
 
+.edit {
 
+	padding-left: 5px;
 
+}
 
+
 
 .close-button {
 
 .close-button {
 
 	text-shadow: 1px 1px #333;
 
 	text-shadow: 1px 1px #333;
 
 	display: inline-block;
 
 	display: inline-block;

+ 3 - 0
WebContent/ui/pages/banner.html
Xem Tập Tin 

@@ -7,6 +7,9 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 	<a id="link" class="link">Click here to save the page</a><a id="close" class="close-button"></a>
 
 	<a id="link" class="link">Click here to save the page</a><a id="close" class="close-button"></a>
 
+	<div class="filename-container">
 
+		<span id="filename" class="filename"></span><img id="edit" class="edit" src="../resources/edit.png" title="edit filename">
 
+	</div>
 
 	<script src="../scripts/content/banner.js"></script>
 
 	<script src="../scripts/content/banner.js"></script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 1 - 1
WebContent/ui/scripts/bg/background.js
Xem Tập Tin 

@@ -20,7 +20,7 @@
 
 
 
 (function() {
 
 (function() {
 
 
 
-	var dev = false;
 
+	var dev = true;
 
 
 
 	var extensionDetected = [];
 
 	var extensionDetected = [];

+ 39 - 4
WebContent/ui/scripts/content/banner.js
Xem Tập Tin 

@@ -20,14 +20,49 @@
 
 
 
 (function() {
 
 (function() {
 
 	var link = document.getElementById("link");
 
 	var link = document.getElementById("link");
 
+	var filenameInput = document.getElementById("filename");
 
+	var closeButton = document.getElementById("close");
 
+	var editButton = document.getElementById("edit");
 
 	var params = location.search.substring(1).split("&");
 
 	var params = location.search.substring(1).split("&");
 
 	var date = new Date();
 
 	var date = new Date();
 
 	var time = date.toISOString().split("T")[0] + " " + date.toLocaleTimeString();
 
 	var time = date.toISOString().split("T")[0] + " " + date.toLocaleTimeString();
 
-	link.href = decodeURIComponent(params[0]);
 
-	link.download = decodeURIComponent(params[1]) + " (" + time + ")" + ".htm";
 
-	link.onclick = document.getElementById("close").onclick = function() {
 
+	var filename = decodeURIComponent(params[1]) + " (" + time + ")" + ".htm";
 
+
 
+	function close() {
 
 		chrome.extension.sendRequest({
 
 		chrome.extension.sendRequest({
 
 			closeBanner : true
 
 			closeBanner : true
 
 		});
 
 		});
 
-	};
 
+	}
 
+
 
+	function resetFilename() {
 
+		filenameInput.style.textOverflow = "ellipsis";
 
+		filenameInput.blur();
 
+		filenameInput.contentEditable = false;
 
+		filenameInput.removeEventListener("keydown", onkeydown, false);
 
+	}
 
+
 
+	function onkeydown(event) {
 
+		if (event.keyIdentifier == "U+001B") {
 
+			resetFilename();
 
+			filenameInput.textContent = filenameInput.title = filename;
 
+		}
 
+		if (event.keyIdentifier == "Enter") {
 
+			resetFilename();
 
+			filename = link.download = filenameInput.title = filenameInput.textContent;
 
+			event.preventDefault();
 
+		}
 
+	}
 
+
 
+	function editName() {
 
+		filenameInput.style["text-overflow"] = "clip";
 
+		filenameInput.contentEditable = true;
 
+		filenameInput.focus();
 
+		filenameInput.addEventListener("keydown", onkeydown, false);
 
+	}
 
+
 
+	link.href = decodeURIComponent(params[0]);
 
+	link.download = filenameInput.textContent = filenameInput.title = filename;
 
+	link.addEventListener("click", close, false);
 
+	closeButton.addEventListener("click", close, false);
 
+	editButton.addEventListener("click", editName, false);
 
 })();
 
 })();