Răsfoiți Sursa

added "edit filename" feature

Gildas lormeau 14 ani în urmă
părinte
comite
7faed402e8

+ 34 - 7
WebContent/ui/pages/banner.css

@@ -1,18 +1,15 @@
 body {
 	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,
 		237, 166) ), color-stop(1, rgb(250, 229, 146) ) );
+	background-repeat: repeat-x;
+	color: black;
+	font-family: Arial;
+	font-size: 11pt;
 }
 
 .link {
-	color: black;
-	font-family: Arial;
 	text-decoration: none;
-	font-size: 11pt;
 	padding-left: 20px;
 }
 
@@ -31,6 +28,36 @@ body {
 	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 {
 	text-shadow: 1px 1px #333;
 	display: inline-block;

+ 3 - 0
WebContent/ui/pages/banner.html

@@ -7,6 +7,9 @@
 </head>
 <body>
 	<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>
 </body>
 </html>

+ 1 - 1
WebContent/ui/scripts/bg/background.js

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

+ 39 - 4
WebContent/ui/scripts/content/banner.js

@@ -20,14 +20,49 @@
 
 (function() {
 	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 date = new Date();
 	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({
 			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);
 })();