// .notice { position: relative }
const removeDelay = 300;
const noticeContainer = document.querySelector('.notice-container');
noticeContainer?.querySelectorAll('.notice').forEach((el, i) => {
el.addEventListener('click', (e) => {
const first = noticeContainer.querySelector('.notice');
e.target.after(first);
e.target.animate([
{ // from
opacity: 1,
left: 0
},
{ // to
opacity: 0,
left: `${e.target.offsetWidth}px`
}
], removeDelay);
setTimeout(() => {
e.target.remove();
}, removeDelay);
}, false)
});
const btn = '<button class="start">Нажать</div>';
const btn2 = '<button class="start2">Нажать2</button>';
const main = '<div class="main"></div>';
$("body").append(btn);
$("body").on( "click", ".start", function () {
console.log('[btn][click]', $(this));
$(".main").remove(); // предварительно удаляем главный блок
$("body").append(main); // создаем по новой
$('.main').append(btn2);
});
$("body").on("click", ".start2", function () {
console.log('[btn2][click]', $(this));
});
const getImageSize = (src) => {
return new Promise((resolve, reject) => {
try {
const image = new Image();
image.src = src;
image.addEventListener('load', (e) => {
resolve({
width: e.target.width,
height: e.target.height,
quality: e.target.width * e.target.height
});
});
image.addEventListener('error', (e) => {
throw new Error('error');
});
} catch (error) {
reject(error);
}
});
};
const getDataUrl = (file) => {
return new Promise((resolve, reject) => {
try {
const fr = new FileReader();
fr.readAsDataURL(file);
fr.addEventListener('load', (e) => {
resolve(fr.result);
}, false);
fr.addEventListener('error', (e) => {
throw new Error('error');
});
fr.addEventListener('abort', (e) => {
throw new Error('abort');
});
} catch (error) {
reject(error);
}
});
};
const processFiles = async (files) => {
const dataArray = [];
for (let file of files) {
const dataUrl = await getDataUrl(file).catch((error) => {
console.log('[dataUrl][error]', error);
});
const imageSize = await getImageSize(dataUrl).catch((error) => {
console.log('[imageSize][error]', error)
});
console.log({
dataUrl: dataUrl,
imageSize: imageSize
});
dataArray.push({
quality: imageSize.quality,
name : file.name,
src: this.src,
});
//addImage(dataArray.length-1);
}
};
processFiles([filesList]);