<style> .nobj{ display: flex; justify-content: space-between; margin: auto; /* margin-bottom: 50px; */ } #img_file{ text-overflow:ellipsis; max-width:100px; } .img_preview{ /* width: 50px; height: 20px; */ display: flex; } #img_prev{ object-fit: fill; width: 200px; height: 200px; border: 1px black dotted; } </style> <form action="#" class="nobj"> <style> #img_prev_div:hover{ border: 1px solid black; border-radius: 0.5vw; cursor: pointer; } </style> <div id="img_file_div" > <div class="img_preview"> <label for="img_file">Изменение изображения</label><br> <input hidden type="file" id="img_file" onchange="previewFile()" accept="image/*" value="" maxlength="1"><br> </div> <div id="img_prev_div" style="min-width: 200px;min-height: 200px;margin-block: 2vh;" onclick="document.getElementById('img_file').click();msg('помните что граници обозначают элемент с которым можно взаимодействовать даже если он прозрачный',{time:10,type:'help'});msg('старайтесь не оставлять пустые/прозрачные отступы',{time:15,type:'help'})"> <img src="" id="img_prev" height="100" alt="изображение не выбрано"> </div> <div> <input type="checkbox" id="obj_color_check" onchange="color_warning()"> <label for="obj_color_check">возможность менять цвет</label> <script> old_prev = document.getElementById("img_prev"); function color_warning(){ let color_check = document.getElementById("obj_color_check"); let old_prev = document.getElementById("img_prev").src; if(color_check.checked == true){ obj_colors_load(); removeImageBackground(document.getElementById("img_prev").src).then((out)=>{ document.getElementById("img_prev").src = out; }) msg("помните что только hex:#c8c8c8 или rgb:200,200,200 цвета будут заменины при смене цвета ",{type:"help",time:10}); } else{ document.getElementById("img_prev").src = old_prev; } } </script> </div> </div> <div> <div id="object_edit_type" style="display: flex;justify-content: space-between;margin-bottom: 2vh;"><div>Добавление</div></div> <div class="nobj_options" style="margin-bottom: 3vh;"> <input type="text" id="nobj_name" placeholder="название товара" class="btn_white"> <input type="submit" onclick="create_obj()" id="obj_apply_btn" value="создать товар" class="btn_blue"> </div> <div id="obj_input"> <div> <div style="display: flex;width: 40%;justify-content: space-between;"> <label for="obj_height">Высота</label> <div style="display: flex;"><input type="text" class="btn_white" style="width: 50px;" id="obj_height_value" value="100" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');obj_size_change('height','text')"> <div class="vc">см</div></div> </div> <input style="width: 100%;" type="range" step="1" min="1" max="300" id="obj_height" value="100" oninput="obj_size_change('height','range')"> </div> <div> <div style="display: flex;width: 40%;justify-content: space-between;"> <label for="obj_width" class="vc">Ширина</label> <div style="display: flex;"><input type="text" class="btn_white" style="width: 50px;" id="obj_width_value" value="100" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');obj_size_change('width','text')"> <div class="vc">см</div></div> </div> <input style="width: 100%;" type="range" step="1" min="1" max="300" id="obj_width" value="100" oninput="obj_size_change('width','range')"> </div> </div> <div> <div style="display: flex;width: 90%;justify-content: space-between;"> <label for="obj_width" class="vc">Цена</label> <div style="display: flex;"> <input style="text-align: right; width: 40%;" id="obj_cost" type="text" class="btn_white" oninput="this.value = this.value.replace(/[^0-9.]/g, '0').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" > <div class="vc">руб.</div> </div> </div> </div> <div> <button onclick="set_obj_edit_params()" style="width: 100%;margin-block:10px;" class="btn_blue">очистить параметры</button> </div> </div> </form> <script> let cm_mult = 2; let obj_edit_type = "new"; set_obj_edit_params(); function obj_size_change(type,inp){ if(type == "height"){ let img = document.getElementById('img_prev'); let range = document.getElementById('obj_height'); let text = document.getElementById('obj_height_value'); if (inp == "text"){ range.value = `${text.value}`; } else{ text.value = `${range.value}`; } img.style.height = `${range.value * cm_mult}px`; }else if (type == "width"){ let img = document.getElementById('img_prev'); let range = document.getElementById('obj_width'); let text = document.getElementById('obj_width_value'); if (inp == "text"){ range.value = `${text.value}`; } else{ text.value = `${range.value}`; } img.style.width = `${range.value * cm_mult}px`; } } function set_obj_edit_params(img = "/img/placeholder.png",name = "",height = 100,width = 100,cost = 0,gid = 0,colors = false, id = null){ // поменять на if id == null усё if(id == null){ obj_edit_type = "new"; document.getElementById("object_edit_type").innerText = "добавление"; document.getElementById("obj_apply_btn").value = "добавить товар"; document.getElementById("obj_apply_btn").setAttribute("onclick","create_obj()"); }else { obj_edit_type = "edit"; document.getElementById("object_edit_type").innerText = "редактирование"; let del_btn = document.createElement("button"); del_btn.setAttribute("onclick",`obj_del(${id})`); del_btn.innerText = "удалить товар"; del_btn.classList.add("btn_blue"); document.getElementById("object_edit_type").append(del_btn); document.getElementById("obj_apply_btn").value = "сохранить"; document.getElementById("obj_apply_btn").setAttribute("onclick",`save_edited_obj(${id})`); // document.getElementById("group_select").selectedIndex = document.getElementById("group_select").options[`obj_group_${gid}`].index; if (gid != 0){gids = [parseInt(gid)]} } let img_file = document.getElementById("img_file"); let img_prev = document.getElementById("img_prev"); let name_div = document.getElementById("nobj_name"); let height_slider = document.getElementById("obj_height"); let height_text = document.getElementById("obj_height_value"); let width_slider = document.getElementById("obj_width"); let width_text = document.getElementById("obj_width_value"); let cost_text = document.getElementById("obj_cost"); let colors_div = document.getElementById("obj_color_check"); name_div.value = name; img_file.value = null; img_prev.src = img; img_prev.style.height = `${height* cm_mult}px`; img_prev.style.width = `${width* cm_mult}px`; cost_text.value = cost; colors_div.checked = JSON.parse(colors); height_slider.value = height; width_slider.value = width; height_text.value = `${height}`; width_text.value = `${width}`; } function previewFile() { var preview = document.querySelector('#img_prev'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); } else { preview.src = "/img/placeholder.png"; } } function new_obj(cost,name,img,height,width,gid,colors,callback){ let wait_msg = msg("добавление товара",{type:"wait"}); if(gid != null){ if(name!=""){ $.post( "/admin/objects/new", { cost:cost,name:name,img:img,height:height,width:width,gid:gid,colors:colors}) .done(function( res ) { // if(res["out"] == "good"){ // console.log(res["body"]); // } msg_del(wait_msg.id); callback(res); }); } else{ msg("название не должно быть пустым",{type:"warning"}) } } else{ msg("группа не выбранна",{type:"warning"}) } } function create_obj(){ let gid = gids.at(-1); let name = document.getElementById("nobj_name").value; let height = document.getElementById("obj_height").value; let width = document.getElementById("obj_width").value; var img = document.querySelector('#img_prev').src; var cost = document.getElementById("obj_cost").value; var colors = document.getElementById("obj_color_check").checked; name = name.replaceAll(" ","$"); if(gid != null){ if(name != ""){ if (img != "/img/placeholder.png"){ new_obj(cost,name,img,height,width,gid,colors,(res)=>{ if(res["out"] == "bad" && res["err"] == "name"){ msg("товар уже существует",{type:"warning"}); } else if (res["out"] == "bad" ){ msg("ошибка при добавлении товара",{type:"warning"}); } else if(res["out"] == "good"){ msg("товар добавлен"); edit_get_objs(); } }); } else{ msg("картинка не выбрана",{type:"warning"}) } } else{ msg("название не должно быть пустым",{type:"warning"}) } } else{ msg("группа не выбранна",{type:"warning"}) } } </script>