composant image refactor (70%)

plugin/hackpoint/css/component.css

@@ -5,7 +5,31 @@ img[data-type="dropimage"]{
 	transition: all 0.2s ease-in-out;
 }
 
-img[data-type="dropimage"]:hover{
-	transform: scale(0.9);
-	opacity:0.8;
+.data-type-dropimage:hover img[data-type="dropimage"]{
+	filter: brightness(30%);
+}
+
+
+.data-type-dropimage .dropimage-edit{
+	position: absolute;
+	left:calc(50% - 20px);
+	top:calc(50% - 20px);
+	background-color: #222222;
+	padding-top: 4px;
+	text-align: center;
+	border-radius: 100%;
+	width:40px;
+	height:40px;
+	font-size: 20px;
+	display: none;
+	cursor: pointer;
+}
+.data-type-dropimage:hover .dropimage-edit{
+	display: block;
+}
+
+.data-type-dropimage{
+	position: relative;
+    display: inline-block;
+    vertical-align: top;
 }

plugin/hackpoint/js/component.js

@@ -5,40 +5,48 @@ function init_components_dropimage(input){
 	if(input.data('picker')){
 		var picker =  input.data('picker')
 	}else{
-		var picker = $('<input class="hidden" type="file">');
+		var picker = $('<div class="data-type-dropimage"><div class="dropimage-image"></div><input class="hidden" type="file"><div class="dropimage-edit" ><i class="fas fa-pencil-alt"></i></div></div>');
 		input.after(picker);
-		input.data('picker',picker);
-		input.css('cursor','pointer');
+		picker.find('.dropimage-image').append(input.detach());
+		input.data('picker',picker).css('cursor','pointer');
 	}
 
+	var fileInput = picker.find('input');
+	var imageInput = picker.find('.dropimage-image > img');
 
-	input.click(function(e){
-		e.preventDefault();
+	
+	fileInput.click(function(e){
 		e.stopPropagation();
-		
-		picker.trigger('click');
-		picker.change(function(){
+	});
+
+
+	picker.click(function(e){
+
+		e.preventDefault();
+	
+		fileInput.trigger('click');
+		fileInput.change(function(){
 			preloader(true);
-			var file = picker.get(0).files[0];
-			 var reader  = new FileReader();
-			 reader.addEventListener("load", function () {
+			var file = fileInput.get(0).files[0];
+			var reader  = new FileReader();
+			reader.addEventListener("load", function () {
 				
-			    input.attr('src',reader.result);
-			    if(input.attr('data-callback')!=""){
-			    	var callback = input.attr('data-callback');
-			    	window[callback](input,reader.result);
+			    imageInput.attr('src',reader.result);
+			    if(imageInput.attr('data-callback')!=""){
+			    	var callback = imageInput.attr('data-callback');
+			    	window[callback](picker,reader.result);
 			    	preloader(false);
 			    }
 
-			  }, false);
+			}, false);
 			reader.readAsDataURL(file);
 		});
 	});
-	input.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
+	picker.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
 		   e.preventDefault();
 		   e.stopPropagation();
 	})
-	input.on('drop', function (e) {
+	picker.on('drop', function (e) {
 		preloader(true);
 		var droppedFiles = e.originalEvent.dataTransfer.files;
 		var reader = new FileReader();