jQuery(function ($) {
function fix_size() {
var images = $('.img-container img');
images.each(setsize);
function setsize() {
var img = $(this),
img_dom = img.get(0),
container = img.parents('.img-container');
if (img_dom.complete) {
resize();
} else img.one('load', resize);
function resize() {
if ((container.width() / container.height()) < (img_dom.width / img_dom.height)) {
img.width('100%');
img.height('auto');
return;
}
img.height('100%');
img.width('auto');
}
}
}
$(window).on('resize', fix_size);
fix_size();
});
let array_for_flask = [];
const textarea = document.querySelector('textarea');
textarea.addEventListener( 'input', autosize );
function autosize(){
this.style.height = 'auto';
let applyNow = this.style.offsetHeight;
this.style.height = this.scrollHeight - 20 + 'px';
}
// check nonable placeholder and input after set display block for button
let button = document.querySelector('.upload-btn');
button.addEventListener('click', ()=>{
let cloth_name = document.getElementById('name').value;
let cloth_desc = document.getElementById('desc').value;
let cloth_count = document.getElementById('count').value;
let cloth_price = document.getElementById('price').value;
nonable_inputs = {
'name-error':cloth_name,
'desc-error':cloth_desc,
'count-error':cloth_count,
'price-error':cloth_price,
};
for (let key in nonable_inputs){
if (nonable_inputs[key] == ''){
setTimeout( () => {
document.getElementById(key).style.visibility = 'visible'
}, 0);
setTimeout( () => {
document.getElementById(key).style.visibility = 'hidden'
}, 1500);
};
};
if (cloth_name != '' && cloth_desc != '' && cloth_count != '' && cloth_price != ''){
for (let key in nonable_inputs){
array_for_flask.push(nonable_inputs[key]);
};
console.log(array_for_flask)
};
});
const buttonSelect = document.querySelector('.upload-files');
const fileInput = document.querySelector('.file-input');
buttonSelect.addEventListener('click', ()=>{
fileInput.click()
$('.img-container').css('display', 'flex')
});
fileInput.addEventListener('change', (event)=>{
event.preventDefault();
array_for_flask.push(...fileInput.files);
ShowFiles();
});
function del(name) {
const name_img = name.getAttribute('name');
const index = array_for_flask.findIndex(element => element.name === name_img);
$(`.${name_img}`).remove();
array_for_flask.splice(index, 1);
console.log(array_for_flask)
};
function ShowFiles(){
const UploadDiv = document.querySelector('.img-container');
UploadDiv.innerHTML = array_for_flask.map(images =>{
const fileReader = new FileReader();
const id = `F-${Math.random().toString(32).substring(7)}`;
fileReader.readAsDataURL(images);
fileReader.onload = ()=>{
const url = fileReader.result;
const name_img = images.name;
const img = `
<img class = '${name_img}' name = '${name_img} 'id='${id}' src = '${url}' alt = 'image' onclick='del(this)'>
`;
UploadDiv.innerHTML +=img;
};
}).join('');
};<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div class = 'logo' id = 'navbar'>
<h1>Ayesha</h1>
</div>
<section class="instruction">
<div class="text-block">
<h1>Admin</h1>
</div>
<div class="pic-block">
</div>
</section>
<div class ='card'>
<div class="text-in-card">
<h1>New Coth</h1>
</div>
<div class="name-cloth">
<ion-icon id = 'name-error' name="alert-circle-outline" class = 'error'></ion-icon>
<input id = 'name' type="text" value="" class="some-input" placeholder="name">
<ion-icon name="shirt-outline" class = 'icons-inp'></ion-icon>
</div>
<div class="description-cloth">
<ion-icon id = 'desc-error' name="alert-circle-outline" class = 'error'></ion-icon>
<textarea id = 'desc' placeholder="description" id="" cols="30" rows="1" maxlength="50"></textarea>
<ion-icon name="document-text-outline" class = 'icons-inp'></ion-icon>
</div>
<div class="count-cloth" >
<ion-icon id = 'count-error' name="alert-circle-outline" class = 'error'></ion-icon>
<input id = 'count' type="text" value="" class="some-input" placeholder="count">
<ion-icon name="layers-outline" class = 'icons-inp'></ion-icon>
</div>
<div class="price-cloth" >
<ion-icon id = 'price-error' name="alert-circle-outline" class = 'error'></ion-icon>
<input id = 'price' type="text" value="" class="some-input" placeholder="price">
<ion-icon name="card-outline" class = 'icons-inp'></ion-icon>
</div>
<div class = 'img-container'>
</div>
<div class="upload">
<button class = 'upload-files'><ion-icon name="images-outline"></ion-icon></button>
<input class = 'file-input' type="file" name = 'files' multiple accept='image/*' hidden>
<button class="upload-btn">
Upload
</button>
</div>
</div>
<div class="social-media">
<ion-icon class = 'git' name="logo-github"></ion-icon>
<ion-icon class = 'vk' name="logo-vk"></ion-icon>
<ion-icon class = 'ds' name="logo-discord"></ion-icon>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="static/js/script.js"></script>
</body>
</html>