hackpoint/plugin/hackpoint/js/component.js

function init_components_part(input){
		if(input.is(":visible")) {
			var partPicker = input.clone();

			input.before(partPicker);
			if(input.parent().hasClass("input-group")){
				input.parent().after(input.detach());
				input.before('<div id="part-anchor" class="dropdown-anchor"></div>');
			}
			input.hide();
			partPicker.addClass('data-type-part').removeAttr("data-type").removeAttr('name').removeAttr('id').removeAttr('onchange');
			partPicker.attr('data-source',input.attr('id'));
		}else{
			partPicker = $('[data-source="'+input.attr('id')+'"]');
		}

		
			

		input.change(function(){
			partPicker.prop('disabled',true).val('Chargement...');
			$.action({
				action : 'get_part_by_id',
				id : input.val(),
		
				before : input.attr('data-before'),
			},function(r){
				partPicker.prop('disabled',input.prop('disabled'));
				if(r.part && r.part.label){
					partPicker.val(r.part.label);
				}else{
					partPicker.val('');
				}
			});
		});


		if(input.val() !=''){
			partPicker.prop('disabled',true).val('Chargement...');
			$.action({
				action : 'get_part_by_id',
				id : input.val(),
				
				before : input.attr('data-before'),
			},function(r){
				partPicker.prop('disabled',input.prop('disabled'));
				if(r.part && r.part.label){
					partPicker.val(r.part.label);
				}else{
					partPicker.val('');
				}
			});
		}
		
		
		partPicker.keyup(function(){
			input.val('');
		});
		var parent = input.attr('data-parent');
		partPicker.autocomplete({
			action : 'autocomplete_part',
			data : {
			
				before : input.attr('data-before'),
				parent:function(){ return $(parent).val(); }
			},
			skin : function(item){
				var html = '';
					name = item.name;
				/*var re = new RegExp(partPicker.val(),"gi");

				name = item.name.replace(re, function (x) {
					return '<strong>'+x+'</strong>';
				});*/

				html += '<div class="part-logo d-inline mr-2"><img src="data:'+item.picture+'" class="avatar-mini avatar-rounded"></div>'; 
				html += '<div class="user-infos d-inline"><span>'+name+'</span>'; 
				html += '<div class="clear"></div>';
				
				return html;
			},
			highlight : function(item){
						return item;
			},
			onClick : function(selected,element){
				console.log(selected,element);
				var li = $(element).closest('li');
				li.attr('data-part',selected.id);
				li.find('.price input').val(selected.price);
				li.find('.brand input').val(selected.brand);
				li.find('.part-image').css('background','url(data:'+selected.picture+') 0% 0% / cover');
				li.find('.part-image').attr('data-stream','data:'+selected.picture);
				input.val(selected.id);
				input.trigger('change');
			},
			onBlur : function(selected,element){
				if(input.attr('data-force')!='false' && input.val()=='') partPicker.val('');
				if(partPicker.val()=='') {
					input.val('');
				}
				input.trigger('blur');
			}
		});
}



function init_components_dropimage(input){

	if(input.data('picker')){
		var picker =  input.data('picker')
	}else{
		var picker = $('<input class="hidden" type="file">');
		input.after(picker);
		input.data('picker',picker);
		input.css('cursor','pointer');
	}


	input.click(function(e){
		e.preventDefault();
		e.stopPropagation();
		
		picker.trigger('click');
		picker.change(function(){
			preloader(true);
			var file = picker.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);
			    	preloader(false);
			    }

			  }, false);
			reader.readAsDataURL(file);
		});
	});
	input.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
		   e.preventDefault();
		   e.stopPropagation();
	})
	input.on('drop', function (e) {
		preloader(true);
		var droppedFiles = e.originalEvent.dataTransfer.files;
		var reader = new FileReader();
		   reader.readAsDataURL(droppedFiles[0]);
		   reader.onload = function () {
		   
		    input.attr('src',reader.result);
		    if(input.attr('data-callback')!=""){
			    var callback = input.attr('data-callback');
			    window[callback](input,reader.result);
			    preloader(false);
			 }
		   };
		   reader.onerror = function (error) {
		     console.log('Error: ', error);
		     preloader(false);
		   };

	});
}