Properly close markerjs area.

capsule-prototype/css/popup.css

@@ -689,6 +689,8 @@ color: rgba(255,255,255,.75);   /*#FFF; */
 
 #edit_pic_modal {
   z-index: 10000001;
+  background-color: transparent;
+  box-shadow: none;
 }
 
 #edit_pic_modal img {

capsule-prototype/js/online-script.js

@@ -555,16 +555,14 @@ function setEditionControls() {
     markerArea.targetRoot = document.getElementById('edit_pic_modal');
     markerArea.addEventListener('render', () => {
       var state = markerArea.getState();
-      var data = btoa(JSON.stringify(state));
+      window.my_current_markerjs_data_in_ugly_global = state;
       markerArea.close(true);
-      setMetaFromDom(keyDoc.value, "Rekall->MarkerjsState", data);
-      // $('#edit_pic_modal').hide();
-    });
-    markerArea.addEventListener('close', () => {
-      $('#edit_pic_modal').hide();
+      setMetaFromDom(keyDoc.value, "Rekall->MarkerjsState", btoa(JSON.stringify(state)));
     });
+    markerArea.addEventListener('close', () => $('#edit_pic_modal').hide());
     markerArea.show();
-    if (window.my_current_markerjs_data_in_ugly_global) markerArea.restoreState(JSON.parse(window.my_current_markerjs_data_in_ugly_global));
+    if (window.my_current_markerjs_data_in_ugly_global)
+      markerArea.restoreState(window.my_current_markerjs_data_in_ugly_global);
 
   })
 }
@@ -972,8 +970,6 @@ function fillPopupEdit(tag) {
 	if(tag.isMarker()==true){
 		$("#popupImg").show();
 		$("#popupImg").attr("src","../shared/css/images/img-note.png");
-		$("#popupImg").unbind( "click" );
-
 	} else {
 		if(tag.thumbnail.url){
 			$("#popupImg").attr("src",tag.thumbnail.url);
@@ -988,7 +984,6 @@ function fillPopupEdit(tag) {
 			else if(type.indexOf("link") > -1) $("#popupImg").attr("src","../shared/css/images/img-link.png")
 			else $("#popupImg").attr("src","../shared/css/images/img-document.png");
 		}
-		$("#popupImg").unbind( "click" );
 		$("#popupImg").click(function(event){
 			event.stopPropagation();
 			if(tag.isLink()) {
@@ -999,17 +994,22 @@ function fillPopupEdit(tag) {
 				tag.openBrowser();
 		});
 	}
+  $("#popupImg").unbind( "click" );
 
 	$("#popupNom").css("color",tag.color);
 
+  window.my_current_markerjs_data_in_ugly_global = null;
   if (type.split('/')[0] == 'image') {
     $('#editAnnotationPic').html('edit');
     var data = tag.getMetadata('Rekall->MarkerjsState');
-    if (data) window.my_current_markerjs_data_in_ugly_global = atob(data);
-    else window.my_current_markerjs_data_in_ugly_global = null;
-    console.log('put ' + window.my_current_markerjs_data_in_ugly_global);
-  } else 
-    window.my_current_markerjs_data_in_ugly_global = null;
+    if (data) {
+      var _data = JSON.parse(atob(data));
+      window.my_current_markerjs_data_in_ugly_global = _data;
+      // var _mjs = new mjslive.MarkerView(document.getElementById('popupImg'));
+      // _mjs.targetRoot = document.getElementById('popupImg').parentElement;
+      // _mjs.show(_data);
+    }
+  }
 
 	$("#popupType").html(type).css("color",tag.color);