API.Side

사이드 패널에서 사용되는 기능들의 API입니다.
사이드 패널은 grid에서 사용되는 이미지들을 보관해두는 장소라고 볼 수 있으며 이미지를 업로드하여 등록할 수 있는 장소입니다.

API 섹션에서 ple 이름으로 인스턴스 변수를 만들어 접근할 수 있다는걸 참고하세요.

getKeys

이미지 항목의 key값을 가져옵니다.

• @param {String} mode (selected,value,all) : key를 가져오는 방식
  • selected: 선택한 요소의 key를 가져옵니다.
  • value: 두번째 인자값인 keys의 번호에 속해있는 요소의 key를 가져옵니다.
  • all: 모든 요소의 key를 가져옵니다.
• @param {Array} keys : mode인자값에서 value로 설정했을때 가져올 요소번호
• @return {Array}

Usage

let keys = ple.api.side.getKeys('all');

getItems

요소 정보를 가져옵니다.

• @param {Array} keys : 요소 key
• @return {Object}

Usage

let items = ple.api.side.getItems([1,2,3]);

getImages

요소의 이미지를 가져옵니다.

• @param {Array} keys : 요소 key
• @return {Array}

Usage

let images = this._ple.api.side.getImages(keys);

add

이미지 요소를 추가합니다.

• @param {Array} files : 이미지 파일주소의 목록

Usage

ple.api.side.add([
	'http://abc.com/image1.jpg',
	'http://abc.com/image2.jpg',
	'http://abc.com/image3.jpg'
]);

selection

선택한 key값들을 모두 켜거나 해제합니다.

• @param {Array} keys
• @param {Boolean} active

Usage

ple.api.side.selection([0,2,4], true);

select

요소를 선택하거나 해제합니다.

• @param {Object} value

Usage

ple.api.side.select({
	0: { active: false },
	1: { active: true },
	2: { active: false },
	3: { active: true }
});

toggleSelectAll

모든 요소를 선택하거나 해제합니다.

• @param {Boolean} active

Usage

ple.api.grid.toggleSelectAll();

remove

요소를 삭제합니다.

• @param {Array} keys : 요소 key

Usage

ple.api.grid.remove([1,2,3]);

clear

요소들을 모두 삭제합니다.

Usage

ple.api.side.clear();

upload

이미지를 업로드 합니다. <input type="file"/> 엘리먼트를 통하여 업로드 합니다.

• @param {FileList} files : 폼에서 나온 업로드 파일 목록
• @param {Object} callbacks : 여러 상황에 대한 callback들입니다. start, progress, complete, completeAll, fail

Usage

<input type="file" multiple={true} onChange={(e) => {
	this._ple.api.side.upload(value.target.files, {
		// start upload
		start: () => {
			console.log('upload start');
		},
		// progress upload file
		progress: (loaded, total, percent) => {
			console.log('upload progress', loaded, total, percent);
		},
		// complete upload file
		complete: (res) => {
			console.log('upload complete', res);
		},
		// complete all upload files
		completeAll: () => {
			console.log('upload complete all');
		},
		// fail upload file
		fail: (error) => {
			console.log('upload fail', error);
		},
	});
}}/>

attachToGrid

이미지 요소를 그리드 영역으로 넣어줍니다.
그리드에서 선택한 블럭이 있다면 거기에 이미지가 들어가며 없으면 빈 블럭으로 이미지가 들어가고 빈 블럭이 없으면 블럭을 만들고 이미지를 넣습니다.

• @param {Array} keys : 요소 key

Usage

ple.api.side.attachToGrid([1,2,3]);