[WebDevCurriculum] folder method

Hyo Kyun Lee·2021년 10월 29일

목록 보기

12/44

1. folder method 구현 로직

특정 이벤트가 동작할때(폴더 창을 띄우기 위한 클릭 등), 나타날 창의 구성(layout)을 구현한다.
해당 창의 class에 display:none 속성을 나타내는 별도의 class를 추가하고, 특정 이벤트가 작동할때마다 화면에 나타나거나(remove) 없어지도록(add) logic을 구성한다.
해당 folder 역시 drag가 가능해야 하므로, 선택된 folder창에 대한 event logic을 mousevent와 같이 동일하게 구성해준다.

2. folder layout 구성

folder에 해당하는 구성을 overlay(외곽부), content(중심부)로 분할하여 구현한다.

folder layout, content는 모두 folderlayout에 종속되어, folderlayout class의 영향을 받는다.
※ 이 folderlayout class에 display:none 속성의 class를 추가하여, 특정 이벤트마다 class toggle하도록 설정하는 것이 핵심.

3-1. class 생성

folder 기능에 대한 class를 생성, 기존에 만든 icon class와 분리한다.

folder class에서 사용하는 변수들은 constructor를 통해 생성해야 하는데, 이를 위해 html 영역에서 해당 변수를 선언해주는 것이 좋다.

class Folder {
	constructor(isClicked, offsetX, offsetY, currentObject){
		this.isClicked = isClicked;
		this.offsetX = offsetX;
		this.offsetY = offsetY;
		this.currentObject = currentObject;
	}

3-2 drag 동작

script를 통한 동작생성보다는 class에서의 동작생성을 통해 코드의 효율을 높인다.

아래 코드는 특정 대상에 대해 mousemove event를 적용할 수 있도록 좌표값을 얻는 과정이다.

mousedown(e){
		if(e.target.classList.contains('button')){
			this.isClicked = true
			this.offsetX = e.offsetX;
			this.offsetY = e.offsetY;
			this.currentObject = e.target;
		}else if(e.target.classList.contains('folderContent')){
			this.isClicked = true
			this.offsetX = e.offsetX;
			this.offsetY = e.offsetY;
			this.currentObject = e.target;
		}
	}

※ 기존에 생성하였던 drag와 마찬가지 방식으로 동작을 구현한다.

3-3. folder open / close

folderoverlay와 foldercontent 모두 종속되어있는 folderlayout class에 display 속성을 추가한다.

//activatie folder window
	getFolderWindow(e, folderWindow){
		if(e.target.classList.contains('button')){
			folderWindow.classList.remove('hidden');
		}
	}

	removeFolderWindow(folderWindow){
		folderWindow.classList.add('hidden');
	}

위 로직을 구현하기 위해 특정 classList를 add하거나 remove하는 동작을 생성한다.
※ 최상위 class인 folderLayout은 hidden class를 추가한다.

<div class="folderLayout hidden">
				<div class="folderOverlay"></div>
				<div class="folderContent">
					<h1 class="title">WELCOM TO FOLDER</h1>
					<br><br><br><br><br><br>
					<button>EXIT</button>
				</div>
			</div>

4. HTML 변수 선언

//folder
let folder = new Folder(isClicked. offsetX, offsetY, currentObject);


//let folder = section.querySelector('.folderLayout');
let clickButtonLayer = section.querySelector('.folderContainer');
let clickButton = clickButtonLayer.querySelector('.button');

let folderWindow = section.querySelector('.folderLayout');
let folderWindowOverlay = folderWindow.querySelector('.folderOverlay');
let folderContent = folderWindow.querySelector('.folderContent');
let folderWindowOverlayExitButton = folderContent.querySelector('button');