Can now cancel editing

maloja/web/jinja/artist.jinja

@@ -6,6 +6,7 @@
 
 {% block scripts %}
 	<script src="/rangeselect.js"></script>
+	<script src="/edit.js"></script>
 {% endblock %}
 
 {% set artist = filterkeys.artist %}
@@ -32,6 +33,7 @@
 <script>
 	const entity_id = {{ info.id }};
 	const entity_type = 'artist';
+	const entity_name = {{ artist | tojson }};
 </script>
 
 

maloja/web/jinja/icons/edit.jinja

@@ -1,4 +1,3 @@
-<script src="/edit.js"></script>
 <div title="Edit" id="editicon" class="clickable_icon" onclick="editEntity()">
 	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
 		 viewBox="0 0 59.985 59.985" style="enable-background:new 0 0 59.985 59.985;" xml:space="preserve">

maloja/web/jinja/track.jinja

@@ -5,6 +5,7 @@
 
 {% block scripts %}
 	<script src="/rangeselect.js"></script>
+	<script src="/edit.js"></script>
 	<script>
 		function scrobble(encodedtrack) {
 			neo.xhttprequest('/apis/mlj_1/newscrobble?nofix&' + encodedtrack,data={},method="POST").then(response=>{window.location.reload()});
@@ -26,6 +27,7 @@
 <script>
 	const entity_id = {{ info.id }};
 	const entity_type = 'track';
+	const entity_name = {{ track.title | tojson }};
 </script>
 
 

maloja/web/static/js/edit.js

@@ -1,5 +1,7 @@
 // JS for all web interface editing / deletion of scrobble data
 
+
+
 function toggleDeleteConfirm(element) {
 	element.parentElement.parentElement.classList.toggle('active');
 }
@@ -22,15 +24,22 @@ function selectAll(e) {
 }
 
 function editEntity() {
+
 	var namefield = document.getElementById('main_entity_name');
 	namefield.contentEditable = "plaintext-only";
 
-	// dont allow new lines, done on enter
-	namefield.addEventListener('keypress',function(e){
-		if (e.which === 13) {
+	namefield.addEventListener('keydown',function(e){
+		// dont allow new lines, done on enter
+		if (e.key === "Enter") {
 			e.preventDefault();
 			namefield.blur(); // this leads to below
 		}
+		// cancel on esc
+		else if (e.key === "Escape" || e.key === "Esc") {
+			e.preventDefault();
+			namefield.innerHTML = entity_name;
+			namefield.blur();
+		}
 
 	})
 	// emergency, not pretty because it will move cursor
@@ -54,25 +63,30 @@ function editEntity() {
 function doneEditing() {
 	var namefield = document.getElementById('main_entity_name');
 	namefield.contentEditable = "false";
-	newname = document.getElementById('main_entity_name').innerHTML;
-	var searchParams = new URLSearchParams(window.location.search);
+	newname = namefield.innerHTML;
 
-	if (entity_type == 'artist') {
-		var endpoint = "/apis/mlj_1/edit_artist";
-	    searchParams.set("artist", newname);
-		var payload = {'id':entity_id,'name':newname};
-	}
-	else if (entity_type == 'track') {
-		var endpoint = "/apis/mlj_1/edit_track";
-	    searchParams.set("title", newname);
-		var payload = {'id':entity_id,'title':newname}
+	if (newname != entity_name) {
+		var searchParams = new URLSearchParams(window.location.search);
+
+		if (entity_type == 'artist') {
+			var endpoint = "/apis/mlj_1/edit_artist";
+		    searchParams.set("artist", newname);
+			var payload = {'id':entity_id,'name':newname};
+		}
+		else if (entity_type == 'track') {
+			var endpoint = "/apis/mlj_1/edit_track";
+		    searchParams.set("title", newname);
+			var payload = {'id':entity_id,'title':newname}
+		}
+
+		neo.xhttpreq(
+			endpoint,
+			data=payload,
+			method="POST",
+			callback=(()=>window.location = "?" + searchParams.toString()),
+			json=true
+		);
 	}
 
-	neo.xhttpreq(
-		endpoint,
-		data=payload,
-		method="POST",
-		callback=(()=>window.location = "?" + searchParams.toString()),
-		json=true
-	);
+
 }