728x90
반응형
document.addEventListener("DOMContentLoaded", function () {
viewerInit();
iframeViewer.init();
const thumbnailList = document.querySelectorAll("mv-thumbnail");
const firstIframeViewer = new IframeViewer(thumbnailList)
window.firstIframeViewer = firstIframeViewer
IframeViewer.thumbnails = document.querySelectorAll("mv-thumbnail");
});
class IFrameUtil {
sayMyName() {
console.log('this is my name')
}
}
class IFrameUtilDate1 extends IFrameUtil {
sayYourName() {
}
}
class IFrameUtilDate2 extends IFrameUtil {
sayYourName() {
}
}
class IFrameUtilDate3 extends IFrameUtil {
sayYourName() {
}
}
class IframeViewer {
// 썸네일 리스트를 전역으로 사용하는 2번째 방법
static thumbnails;
mvThumbnailList;
iframeUtil;
// 썸네일 리스트를 전역으로 사용하는 1번째 방법
constructor(mvThumbnailList, iframeUtil) {
this.mvThumbnailList = mvThumbnailList;
this.init();
// static 으로 사용하는 방법
// IframeViewer.thumbnails = mvThumbnailList
// 강한 결합도 - 응고결저: 응집도는 높히고 결합도는 낮춰야 한다.
// this.iframeUtil = new IFrameUtil();
this.iframeUtil = iframeUtil;
}
init() {
this.setImgsFromP();
}
setImgsFromP(dataFiles) {
if (!dataFiles) return;
const { thumbnails, view } = window;
dataFiles.forEach((element) => {
element[0] = `${_contextPath}${element[0]}`;
});
// const x = dataFiles.filter((item) => !(item[0].endsWith(".json") || item[0].endsWith(".ann")));
thumbnails.setImg(dataFiles);
thumbnails.setDragable(true);
view.setFit("fit_vert");
view.setCurRatio();
//섬네일 클릭 이벤트 바인딩
this.clickThumbNail();
}
clickThumbNail() {
// const mvThumbnailList = document.querySelectorAll("mv-thumbnail");
this.mvThumbnailList.forEach((mvThumbnail, index) => {
mvThumbnail.addEventListener("click", function (event) {
const seq = mvThumbnail.getAttribute("seq");
const imgName = mvThumbnail.getAttribute("data-src").match(/\/([^\/?#]+)$/)[1];
const paramsJson = {
type: "mv-thumbnail_click",
title: event.target.props.title,
seq,
imgName,
index,
message: "good",
};
sendMsgToParent("setViewerThumbnailClickEvent", paramsJson, "Res", "Fail");
// window.parent.postMessage(JSON.stringify(paramsJson), "*");
});
});
}
}
728x90
댓글