[메모] 이벤트 처리, 검색결과
const onClick = e => {
const {
code,
className,
value,
dataset: { key: isLeft }
} = e.target;
if (className == 'arrow') {
do somthing
}
if (code == 'Enter') {
func(value);
}
}
class SearchResult {
$searchResult = null;
data = null;
onClick = null;
images = new Set();
isRequesting = false;
constructor({ $target, initialData, onClick, onRandom }) {
this.$searchResult = document.createElement('section');
this.$searchResult.className = 'SearchResult';
$target.appendChild(this.$searchResult);
this.data = initialData;
this.onClick = onClick;
this.onRandom = onRandom;
this.$searchResult.onclick = this.handleOnClick;
this.render();
// this.lazyLoad();
console.log('[CREATED]', 'SearchResult', this);
}
handleOnClick = ({ target }) => {
if (target.tagName == 'IMG') {
console.log('SearchResult', target.dataset);
this.onClick(this.data[target.dataset.key.split('_')[1]]);
}
};
setState(nextData) {
this.data = nextData;
this.render();
console.log('[UPDATED]', 'searchResult ', { nextData });
}
clearResults = () => {
console.log('clearResults');
this.$searchResult.innerHTML = '';
// this.$searchResult.appendChild(this.createNoItem());
};
createItem = (cat, i) => {
const article = document.createElement('article');
article.classList.add('item');
const img = new Image();
img.src = window.cats.LAZY_IMG_SRC;
img.dataset.src = cat.url;
img.alt = cat.name;
img.title = cat.name;
img.dataset.key = `${cat.id}_${i}`;
// 상태에 이미지 엘리먼트 등록 시킴
this.images.add(img);
article.appendChild(img);
return article;
};
createNoItem = () => {
const article = document.createElement('article');
article.classList.add('NoItem');
article.style = 'flex:1; justify-content: center; display: flex;';
const h1 = document.createElement('h1');
h1.innerText = '검색결과 없음';
article.appendChild(h1);
return article;
};
loadLazyImages = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// console.log('loadLazyImages', entry.target.dataset.src, 'fetch data');
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
// set에 등록된 이미지 삭제하기
this.images.delete(lazyImage);
lazyImage.classList.remove('lazy');
observer.unobserve(lazyImage);
}
});
if (this.images.size <= 30 && !this.isRequesting) {
this.onRandom();
}
// console.log(this.images.size);
// console.log('entries', entries);
};
lazyOptions = {
threshold: 0,
trackVisibility: true,
delay: 200,
};
lazyImageObserver = new IntersectionObserver(
this.loadLazyImages,
this.lazyOptions
);
registerImagesToLazyObserver = (lazyImages, lazyImageObserver) => {
lazyImages.forEach(function (lazyImage) {
lazyImageObserver.observe(lazyImage);
});
};
lazyLoad = () => {
this.registerImagesToLazyObserver([...this.images], this.lazyImageObserver);
};
setIsRequesting = (isRequesting) => {
console.log('!! isRequesting', isRequesting);
this.isRequesting = isRequesting;
};
// 검색결고 없음 안 사라짐
// 검색했을 땐 생성자를 안 들려서 레이지 로딩 등록이 안 됨
// 레이지 로딩 등록을 앞에서 해야 할 듯 App => onSearch function에서
//
render() {
if (this.data == undefined || this.data.length == 0)
this.$searchResult.appendChild(this.createNoItem());
else
this.data.map((cat, i) =>
this.$searchResult.appendChild(this.createItem(cat, i))
);
this.lazyLoad();
}
}
Author And Source
이 문제에 관하여([메모] 이벤트 처리, 검색결과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@victor/메모-이벤트-처리-검색결과저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)