-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
101 lines (82 loc) · 2.82 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import { moveImage } from "/module/image_area/moveImage.js";
import { addImageDiv } from "/module/image_area/addImage.js";
import { updatePhoneImage } from "/module/phone_area/imageViewPhone.js";
// 미리보기 유무
export let previewFlag = { flag: "zero" };
// --- 이미지 ---
// 파일이동
const imageFileAreaDOM = document.querySelector(".image-file-area");
imageFileAreaDOM.addEventListener("dragover", moveImage);
// 파일이동
// 파일추가
const btnUploadInputDOM = document.querySelector("#btn-upload");
const fileAreaDOM = document.querySelector(".file-area");
// 1. 클릭했을 때
btnUploadInputDOM.addEventListener("change", (event) => {
const draggingDOM = document.querySelector(".image-file-container.dragging");
if (draggingDOM) return; // add가 아닌 드래그를 하는 상황에 대한 예외처리
previewFlag.flag = previewFlag.flag == "zero" ? "frist" : "afterSecond";
addImageDiv(event.target.files);
});
// 2. 드래그 앤 드롭
function stopandprevent(event) {
event.stopPropagation();
event.preventDefault();
}
fileAreaDOM.addEventListener(
"dragenter",
(event) => {
stopandprevent(event);
},
false
);
fileAreaDOM.addEventListener("dragover", stopandprevent, false);
fileAreaDOM.addEventListener(
"drop",
(event) => {
const draggingDOM = document.querySelector(".image-file-container.dragging");
if (draggingDOM) return; // add가 아닌 드래그를 하는 상황에 대한 예외처리
previewFlag.flag = previewFlag.flag == "zero" ? "frist" : "afterSecond";
stopandprevent(event);
addImageDiv(event.dataTransfer.files);
},
false
);
fileAreaDOM.addEventListener(
"dragleave",
(event) => {
stopandprevent(event);
},
false
);
// --- //이미지 ---
// --- 폰 화면 ---
imageFileAreaDOM.addEventListener("dragend", () => {
updatePhoneImage("move");
});
// --- //폰 화면 ---
// --- 폰 종류 ---
let phonetypesDOMs = document.querySelectorAll("input[name='phonetype']");
let phoneContainerDOM = document.querySelector(".phone-container");
function changePhone() {
const phonetype = document.querySelector("input[name='phonetype']:checked");
phoneContainerDOM.className = `phone-container ${phonetype.id}`;
}
for (const phonetype of phonetypesDOMs) {
phonetype.addEventListener("click", changePhone);
}
// --- //폰 종류 ---
// 미리보기 웹툰
async function setPreview() {
for (let i = 1; i <= 3; i++) {
fetch(`/assets/img/preview/미리보기_00${i}.png`)
.then((response) => {
return response.blob();
})
.then((blob) => {
const file = new File([blob], `미리보기_00${i}.png`);
addImageDiv([file]);
});
}
}
window.addEventListener("load", setPreview);