--- a/src_js/iconolab-bundle/src/components/diffviewer/diffviewer.vue	Fri Aug 26 18:48:30 2016 +0200
+++ b/src_js/iconolab-bundle/src/components/diffviewer/diffviewer.vue	Tue Aug 30 16:58:59 2016 +0200
@@ -1,20 +1,145 @@
 <template src='./template.html'></template>
+<style scoped src='./style.css'></style>
+
 <script>
+	
+	import ModalPanel from '../modalpanel/ModalPanel.vue'
+
+
 	export default {
-		props: ["close-with-escape"],
+		components: { 'modalpanel': ModalPanel },
+		mounted: function () {},
+		props: ['transform-matrix', 'image-path', 'image-height', 'image-width'],
 		data () {
+
 			return {
-				display: false
+				diffText: "",
+				tagMode: false,
+				textMode: false,
+				fragmentMode: false,
+				originalPath: "",
+				modifiedPath: "",
+				tags: []	
+			}
+		},
+
+		mounted () { return false; },
+
+		computed: {
+			matrixTransform: function () {
+				var matrixTransform = "";
+				if (this.transformMatrix) {
+					matrixTransform = "matrix(" + this.transformMatrix + ")";
+				}
+				return matrixTransform;
 			}
 		},
 
 		methods: {
-			close: function () {
-				this.display = false;
+
+			setContent: function (content) {
+				this.$refs.modalcontent.appendChild(content);
+			},
+			
+			switchMode: function (mode) {
+				var availableMode = ["tagMode", "textMode", "fragmentMode"];
+				this.tagMode = false;
+				this.textMode = false;
+				this.fragmentMode = false;
+				if (availableMode.indexOf(mode) !== -1) {
+					this[mode] = true;	
+				}
+			},
+
+
+			showTagDiff: function (tags, editedTags) {
+				this.switchMode("tagMode");
+				//si le label a changé considé qu'il a été effacé.
+				var diff = iconolab.JsonDiff.diff(tags, editedTags);
+				var tagsToRender = [];
+				
+				tags.forEach(function(tag, i) { 
+
+					var tag = JSON.parse(JSON.stringify(tag));
+					var deletedDiff = diff["_"+i];
+					var currentDiff = diff[i];
+
+					if (!deletedDiff && !currentDiff) {
+						tagsToRender.push(tag); //render this tag
+					}
+					
+					if (Array.isArray(deletedDiff)) {
+						tag.action = "del";
+						tagsToRender.push(tag);
+						return true;
+					}
+
+					if (currentDiff && (currentDiff.tag_label || currentDiff.relevancy || currentDiff.accuracy)) {
+						tag.action = (currentDiff.tag_label) ? "replace" : "update";
+						tag.new_label =  editedTags[i].tag_label;
+						tag.new_accuracy = editedTags[i].accuracy;
+						tag.new_relevancy = editedTags[i].relevancy;
+						tagsToRender.push(tag);
+						return true;
+					}
+					if (Array.isArray(currentDiff)) {
+						tag.action = "add";
+						tagsToRender.push(editedTags[i]);
+						return true;
+					}
+				});
+				/* deal with remain */
+				if (tags.length < editedTags.length) {
+					var remainedTags = editedTags.slice(tags.length);
+					remainedTags.forEach(function (tag, i) {
+						tag.action = "add";
+						tagsToRender.push(tag);	
+					});
+				}
+				this.tags = tagsToRender;
+			},
+
+			showTextDiff: function (original, mod) {
+				this.switchMode("textMode");
+				var diff = iconolab.JsDiff.diffWords(original, mod);
+				var fragment = document.createDocumentFragment();
+				for (var i=0; i < diff.length; i++) {
+
+					if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
+						var swap = diff[i];
+						diff[i] = diff[i + 1];
+						diff[i + 1] = swap;
+					}
+
+					var node;
+					if (diff[i].removed) {
+						node = document.createElement('del');
+						node.appendChild(document.createTextNode(diff[i].value));
+					} else if (diff[i].added) {
+						node = document.createElement('ins');
+						node.appendChild(document.createTextNode(diff[i].value));
+					} else {
+						node = document.createTextNode(diff[i].value);
+					}
+
+					fragment.appendChild(node);
+				}
+
+				this.diffText = jQuery('<div>').append(fragment).html();		
+			},
+			
+			showFragmentDiff: function (originalPath, modifiedPath) {
+				this.switchMode("fragmentMode");
+				this.originalPath = originalPath;
+				this.modifiedPath = modifiedPath;
 			},
 
 			show: function () {
-				this.display = true;
+				this.$refs.panel.show();
+			},
+
+			hide: function () {
+				this.$refs.panel.hide();
 			}
 		}
 	}