Merge branch 'tuleap-205-create-an-image-annotation-from-clipboard' into 'main'

tuleap 205 add annotation from clipboard

See merge request !85

capsule-prototype/css/online-theme.css

@@ -7,6 +7,7 @@
 :root {
 	--tab_selector_height: 30px;
 	--rk-light-blue: #559299;
+	--rk-greyblue: #243538;
 }
 
 .flex-col, .flex-row, .flex-center, .flex { display: flex; }

capsule-prototype/css/popup.css

@@ -25,7 +25,7 @@ font-weight: 400;
 font-size: 1vw;
 display: inline-block;
 text-align: center;
-background: #243538;
+background: var(--rk-greyblue);
 }    */
 
 #popupSettings {
@@ -36,7 +36,7 @@ background: #243538;
 	font-size: 1vw;
 	display: inline-block;
 	text-align: left;
-	background: #243538;
+	background: var(--rk-greyblue);
 }
 
 #popupSettingsLeft {
@@ -246,7 +246,7 @@ font-weight: 400;
 font-size: 1vw;
 display: inline-block;
 text-align: center;
-background: #243538;
+background: var(--rk-greyblue);
 /*background-image: -webkit-linear-gradient(right bottom,  rgb(20,46,51) 0%, #475457 150%);
 /*box-shadow: 0px 0px 2px 3px rgba(255,255,255,.1) inset;  */
 
@@ -291,7 +291,7 @@ background: #243538;
 	font-size: 1vw;
 	display: inline-block;
 	text-align: left;
-	background: #243538;
+	background: var(--rk-greyblue);
 }
 
 #popupLeft {
@@ -712,3 +712,70 @@ color: rgba(255,255,255,.75);   /*#FFF; */
 	}
 }
 
+#paste_modal {
+	align-items: center;
+	position: absolute;
+	margin: 10%;
+	width: 60%;
+	min-width: 400px;
+	height: 60%;
+	min-height: 300px;
+	z-index: 50;
+
+	padding: 10px;
+
+	border-radius: 2px;
+	box-shadow: 0 5px 25px #000;
+	background-color: var(--rk-greyblue);
+
+	font-weight: 100;
+	color: rgba(255,255,255,.75);
+	text-align: center;
+	font-size: 1em;
+
+	display: none;
+}
+
+#paste_modal h1 {
+	margin: 5px;
+	padding: 5px;
+	font-weight: 100;
+	color: rgba(255,255,255,.75);
+	font-size: 15px;
+}
+
+#paste_modal button {
+	color: #fff;
+	background: rgba(255,255,255,.15);
+	box-shadow: 0 1px 3px rgba(0,0,0,.1);
+	border-radius: 3px;
+	cursor: pointer;
+	padding: 20px;
+	border: 0;
+	margin: 20px;
+	text-transform: uppercase;
+}
+
+#paste_modal button:hover {
+	background: rgba(255,255,255,.05);
+	color: #fff
+}
+
+#paste_modal div.content {
+	max-width: 90%;
+	max-height: 90%;
+	height: 80%;
+	width: 80%;
+	padding: 5px;
+	background-color: rgba(0, 0, 0, .3);
+	caret-color: transparent;
+}
+
+#paste_modal img {
+	max-height: 90%;
+	max-width: 90%;
+	height: auto;
+	width: auto;
+	margin: auto;
+	border: 2px dotted grey;
+}

capsule-prototype/index.html

@@ -195,6 +195,15 @@
 		<input type="file" name="fileToUpload[]" multiple="multiple" id="left_menu_item_btn_addfile">
 	</form>
 
+	<div id="paste_modal" class='flex-col'>
+		<h1>Paste your image below</h1>
+		<div id='paste_modal_content' class='content' contenteditable='true' autofocus='true'></div>
+		<div class='actions flex-row'>
+			<button class='validate'>validate</button>
+			<button class='cancel'>cancel/close</button>
+		</div>
+	</div>
+
 	<div id='left_menu' class='flex-col editmode'>
 		<div class='top'>
 			<a class="left_menu_item dropable" href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)">
@@ -219,6 +228,10 @@
 				<div class="left_menu_item_icn" id="left_menu_item_icn_addnote"></div>
 				<div class="left_menu_item_title">Add Note</div>
 			</div>
+			<div class="left_menu_item dropable" id="left_menu_item_pastefile" title="PasteFile">
+				<div class="left_menu_item_icn" id="left_menu_item_icn_pastefile"></div>
+				<div class="left_menu_item_title">Paste File</div>
+			</div>
 			<div class="left_menu_item dropable" id="left_menu_item_addfile" title="AddFile">
 				<div class="left_menu_item_icn" id="left_menu_item_icn_addfile"></div>
 				<div class="left_menu_item_title">Add File</div>

capsule-prototype/js/online-script.js

@@ -6,6 +6,8 @@ window.onload = function() {
 	pubSub = window.top.PubSub;
 	pubSub.subscribe('mosaic', openMosaic);
 	pubSub.subscribe('video', openVideo);
+	pubSub.subscribe('open_paste_modal', openPasteModal);
+	pubSub.subscribe('close_paste_modal', closePasteModal);
 };
 
 $(document).ready(function() {
@@ -44,6 +46,7 @@ $(document).ready(function() {
 				setEditionControls();
 			
 				//Geoloc en mode édition
+				/*
 				if((false) && (navigator.geolocation)) {
 					navigator.geolocation.getCurrentPosition(function(position) {
 						rekall_common.owner.locationGps = position.coords.latitude + "," + position.coords.longitude;
@@ -60,6 +63,7 @@ $(document).ready(function() {
 						});
 					});
 				}
+				*/
 
 			} else {
 				$(".empty").hide();
@@ -174,10 +178,12 @@ function setEditionControls() {
 		drop: function(event) { $("#flattentimeline").removeClass("draggable").removeClass("drag");  }
 	});
 
+	/*
 	$("#left_menu_bottom").click(function(event){
 		//var tmp = $(".vjs-marker").css("z-index");
 		//alert("val = "+tmp);
 	});
+	*/
 
 	$("#left_menu_item_settings").click(function(event){
 		event.stopPropagation();
@@ -325,6 +331,30 @@ function setEditionControls() {
 		uploadFiles($("#left_menu_item_btn_addfile").get(0).files);
 	});
 
+	$("#left_menu_item_pastefile").click(function(event) { pubSub.publish('open_paste_modal'); });
+	$("#paste_modal button.cancel").click(function(event) { pubSub.publish('close_paste_modal'); });
+
+	$("#paste_modal_content").on("paste", function(event) {
+		$('#paste_modal_content').empty();
+	});
+
+	$("#paste_modal button.validate").click(function(event) {
+		var img = $("#paste_modal img");
+		if (img.length < 1)
+			return;
+		var b64img = img[0].src;
+		var data = b64img.match(/data:([a-z]+)\/([a-z]+);base64,(.*)/);
+		var type = data[1], subtype = data[2], b64data = data[3];
+		var bin_str = atob(b64data);
+		var n = b64data.length;
+		var uar = new Uint8Array(n);
+		while (n--) uar[n] = bin_str.charCodeAt(n);
+		var file = new File([uar], 'pasted_' + Math.floor(random()*100000) + '.' + subtype, {type: type+'/'+subtype});
+		$('#left_menu_item_btn_addfile').files += file;
+		uploadFiles([file]);
+		pubSub.publish('close_paste_modal');
+	});
+
 	$("#left_menu_item_addlink").click(function(event){
 		event.stopPropagation();
 		rekall.timeline.pause();
@@ -1277,3 +1307,6 @@ $(window).resize(function(e) {
 	}
 });
 $(window).trigger("resize");
+
+function openPasteModal() { $('#paste_modal').css('display', 'flex'); $('#paste_modal_content').first().focus() }
+function closePasteModal() { $('#paste_modal').hide(); $('#paste_modal_content').empty();  }

[Ghost User]

This commit references: TULEAP-205.