도움말 - 스킨 API

스킨 API

개요

스킨이 제공하는 기능, 정보를 활용 할 수 있습니다.

별도의 허락없이 유챗의 로고를 제거하면 안됩니다.

API를 포함해서, 사전 협의되지 않은 방법으로 유챗 로고를 변형및 제거할 경우 서비스 차단을 비롯하여 불이익이 있을 수 있습니다.

아래의 내용은 유챗의 기본 스킨에서 제공하는 기능만을 다룹니다. 사용하고 있는 스킨에 따라 제공되는 API가 다를 수 있습니다.

API 테스트용 채팅방

아래의 설명에 있는 "직접 해보기"를 실행할 채팅방 입니다. 모바일 버전에서는 "직접 해보기"의 결과를 보시려면 여기로 다시 오셔야 합니다.

room.skin.dom

스킨이 주로 사용하는 부분에 대한 JQuery 객체 모음입니다. 아래 JQuery 객체를 활용하여 원하는 영역의 색깔, 모습등을 바꾸거나 요소들을 추가할 수 있습니다.

room.skin.dom.wrap

채팅방을 감싸는 영역 입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.wrap.css('background', 'blue');
});

room.skin.dom.top

v1 JQuery Object

상단 바 입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.top.css('background', 'blue');
});

room.skin.dom.bottom

v1 JQuery Object

채팅입력칸과 메뉴바를 감싸는 영역 입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.bottom.css('background', 'blue');
});

room.skin.dom.menubar

v1 JQuery Object

bottom 안에 위치한 메뉴바 입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.menubar.css('background', 'blue');
});

room.skin.dom.setting

v1 JQuery Object

채팅방 우측 상단의 설정 버튼을 누르면 표시되는 메뉴입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.setting.css('background', 'blue');
});

room.skin.dom.settingBG

v1 JQuery Object

설정 버튼을 눌렸을때 표시되는 메뉴의 뒷 배경입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.settingBG.css('background', 'blue');
});

room.skin.dom.latest_chat

v1 JQuery Object

스크롤이 위로 올라가있을때, 새로운 대화가 발생하면 뜨는 레이어입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.latest_chat.css('background', 'blue');
});

room.skin.dom.chatInputHidden

v1 JQuery Object

채팅입력칸을 내용에 맞게 크기를 변경하기 위해 쓰는 dom 입니다.
사용자에게는 직접적으로 보이지 않습니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.chatInputHidden.css('background', 'blue');
});

room.skin.dom.inputContent

v1 JQuery Object

채팅입력칸입니다. 기본스킨에서는 div 에 editable 속성을 이용하여 작성하고 있습니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.inputContent.css('background', 'blue');
});

room.skin.dom.middle

v1 JQuery Object

채팅 표시되는곳과 유저리스트가 표시되는곳을 감싸고 있습니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.middle.toggle();
});

room.skin.dom.userList

v1 JQuery Object

접속자 목록이 표시되는 영역 입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.userList.css('background', 'blue');
});

room.skin.dom.content

v1 JQuery Object

채팅이 보이는 곳을 감싸고 있습니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.content.css('background', 'blue');
});

room.skin.dom.contour

v1 JQuery Object

유저리스트와 채팅보이는곳 사이에 있는 유저리스트 사이즈 조절하는 부분입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.contour.css('background', 'blue');
});

room.skin.dom.content_target

v1 JQuery Object

채팅이 보이는곳안에 실질적으로 채팅내용이 추가되는 곳입니다.

U.chat('*').on('after.create', function(room, data){
	room.skin.dom.content_target.css('background', 'blue');
});

room.skin.menubar

스킨의 메뉴바를 손쉽게 관리할 수 있게 하는 API 입니다. 메뉴바는 채팅 입력 옆의 + 버튼을 누르면 나오는 영역입니다. 이 곳에서 글씨 색깔, 스타일(굵게, 기울기, 밑줄), 이미지 업로드등을 할 수 있습니다.
메뉴바에 자신이 만든 플러그인을 등록하여 접속자들이 보다 편리하게 플러그인을 사용할 수 있습니다.

함수의 인자로 넘어오는 room은 룸 인스턴스이며, data는 room.skin.menubar.add에 넣어준 json입니다.

room.skin.menubar.add

v1 FUNCTION(data)

메뉴바에 메뉴를 등록하기 위해 사용됩니다. 함수에 사용되는 인자 data는 아래의 구조를 따르는 JSON이어야 합니다:

{
	id : '추가된 메뉴들을 구분할 아이디',
	title : '메뉴에 마우스를 올리면 표시될 내용(설명)',
	icon : '메뉴의 아이콘',
	html : '(선택) 메뉴바에서 사용할 HTML입니다. HTML가 없으면 스킨에서 자동으로 HTML 코드를 생성합니다.',
	condition : 'FUNCTION(room, data) 메뉴 로딩시 호출됩니다. 함수의 리턴값이 false이면 스킨을 표시하지 않습니다.',
	beforeLoad : 'FUNCTION(room, data) 최초 설치시에 실행될 함수',
	afterLoad: 'FUNCTION(room, data) 설치가 성공적으로 된 후에 발생하는 콜백',
	onClick: 'FUNCTION(room, data) 메뉴가 클릭될때 실행될 콜백. data.event에 클릭 이벤트가 담겨 있습니다.',
	beforeUnload: 'FUNCTION(room, data) condition의 실행 결과가 false인 경우를 포함하여, remove()등으로 삭제 대상이 되면 삭제 직전에 실행되는 콜백',
	afterUnload: 'FUNCTION(room, data) 메뉴가 삭제 된 후에 실행되는 콜백'
}

U.chat('*').on('after.create', function(room, data) {
	// room.skin json 은 create 에서 정의되므로 after이여야된다.
	room.skin.menubar.add({
		id: 'alert',
		title: "its alert!!",
		html: '<div>hi</div>',
		condition: function(room, data) {
			if (room.my.auth > 1) // 멤버이상이라면 표시하지 않는다.
				return false;
		},
		onClick: function(room, data) {
			room.print('hi ! ' + room.my.nick + '<br><span style="font-size:20px;">html야!!</span>');
		}
	});
});

room.skin.menubar.remove

v1 FUNCTION(id)

메뉴바에 등록된 메뉴를 제거합니다. 함수 인자로 플러그인의 ID를 받습니다. 플러그인 ID는 room.skin.menubar.add에 넘겨준 JSON중 ID 항목입니다.

메뉴 제거 전에 beforeUnload와, 메뉴 제거후 afterUnload가 실행됩니다.

U.chat('*').on('after.create', function(room, data) {
	room.skin.menubar.remove('alert');
});

room.skin.menubar.refresh

v1 FUNCTION

메뉴바를 새로고침합니다. 새로고침시 room.menubar.add에 넘겨준 JSON 내용중, condition(room, data) 을 이용하여 각 플러그인의 출력 여부를 검증합니다.

U.chat('*').on('after.create', function(room, data) {
	room.skin.menubar.fresh();
});

room.skin.menubar.hide

v1 FUNCTION

메뉴바 영역을 가립니다. 메뉴바에 들어가 있는 항목 자체에는 영향이 없습니다.

U.chat('*').on('after.create', function(room, data) {
	room.skin.menubar.hide();
});

room.skin.menubar.show

v1 FUNCTION

메뉴바 영역을 표시합니다. 메뉴바에 들어가 있는 항목 자체에는 영향이 없습니다.

U.chat('*').on('after.create', function(room, data) {
	room.skin.menubar.show();
});

room.skin.menubar.toggle

v1 FUNCTION

메뉴바 영역을 감추거나 표시합니다. 메뉴바가 보여지고 있는 상태라면 메뉴바를 감추고, 가려진 상태라면 표시합니다. 메뉴바에 들어가 있는 항목 자체에는 영향이 없습니다.

U.chat('*').on('after.create', function(room, data) {
	room.skin.menubar.toggle();
});

room.skin.popup

스킨 내부에서 레이어로 구성된 팝업을 띄울수 있습니다.

레이어 처리를 위해 내부에는 레이아웃 역할을 하는 room.skin.popup.html과, 그 안에 팝업 내용이 실제로 표시되는 room.skin.popup.pu, 그리고 팝업 창 외부 영역을 가리는room.skin.popup.pb가 있습니다.

room.skin.popup.add는 팝업을 만들기 위한 가장 저 수준의 함수입니다. 일반적인 상황에서는 이미 만들어진 room.skin.popup.alert, .prompt, .password, .confirm, .select를 활용해 팝업창을 구현하면 됩니다.

팝업 생성시, 이미 다른 팝업이 표시되고 있으면 내부의 팝업 대기 큐 존재하게 됩니다. 이후 표시되고 있는 팝업이 닫힘에 따라 대기줄에 있는 팝업이 순차적으로 표시됩니다.

아래 함수들의 콜백에 사용되는 인수중 하나인 layer는 다음과 같은 항목을 가진 JSON입니다:

{
	centering: function(){
	//pu의 사이즈를 측정하여, 자동으로 pu를 채팅방 중앙으로 배치합니다.
	//팝업에 사용되는 HTML을 조작할 경우, 팝업이 어느 방향으로 치우칠 수 있습니다.
	//이때 사용하면 팝업을 정 중앙으로 옮겨서 보다 깔끔하게 보일 수 있습니다.
	},
	close: function(){
	//해당 팝업을 닫습니다.
	}
}

var callback = function(layer, pu, pb){
	//팝업의 HTML을 조작하고...
	layer.centering();

	//팝업 닫기!
	layer.close();
}

room.skin.popup.add

v1 FUNCTION(HTML, TYPE, CALLBACK, AFTER)

원하는 팝업창을 만들 수 있습니다. 가장 저 수준의 함수로서, room.skin.popup.alert, .prompt, .password, .confirm, .select등, 사전 정의된 팝업 모듈중 원하는 팝업 모듈이 없을때만 사용하는것을 권장합니다.

함수가 정상적으로 실행된다면 해당 팝업의 ID를 리턴합니다. 해당 아이디로 room.skin.popup.close(id)등을 호출하여, 원하는 해당 팝업을 제어할 수 있습니다.

함수 인자에 들어가는 항목은 다음과 같습니다:

html string / JQuery Obeject

pu 안에 들어갈 내용입니다. 텍스트로 구성된 HTML 내용이나, JQuery 객체를 이용할 수 있습니다.

type string

팝업의 타입을 지정합니다. 차후에 room.skin.popup.closeByType(type)에서 타입별로 팝업을 닫을때 사용합니다.

callback function(layer, pb, pu)

팝업이 표시되면 실행되는 콜백입니다. 이미 표시되고 있는 팝업 때문에 대기큐로 간다면, 앞에 있는 팝업이 다 끝나고 자기 차례가 되어 실제로 표시될때 작동됩니다.

layer, pb, pu는 각각 해당 항목에 대한 JQuery 객체입니다.

after function()

팝업이 종료되면 실행되는 콜백입니다. 인자로 넘어온 pu를 이용해 사용자가 조작한 HTML 정보를 확인할 수도 있습니다.

layer는 해당 팝업을 조작할 수 있는 함수들을 모아둔 JSON이며, pb, pu는 각각 해당 항목에 대한 JQuery 객체입니다.

U.chat('*').on('after.create', function( room, data ) {
	var pu = '<div style="padding:10px"><select> <option value="값1">값1</option> <option value="값2">값2</option> <option value="값3">값3</option> </select> <button id="ok">확인</button> <button id="cancel">취소</button></div>';
	var popup_type = 'select';
	var callback = function(layer, pb, pu){
	//pu를 이용하여 해당 팝업을 조작할 수 있습니다.
	pu.find('select').append('<option value="js">동적으로 추가된 값</option>');
	pu.find('button#ok').click(function(){
		room.print('선택한 값은 ' + pu.find('select').val() + ' 입니다.' );
		layer.close();
	});
	pu.find('button#cancel').click(function(){
		layer.close();
	});

	pu.css({
		'background': 'white',
		'box-shadow': '0 0 3px black',
	});

	pb.css('background', 'rgba(0,0,0,0.3)');

	layer.centering();
	};

	var after = function(){
		room.print('팝업 닫힘');
	};

	var popupId = room.skin.popup.add(pu, popup_type, callback, after);
	room.print('팝업 인스턴스 ID' + popupId);
});

room.skin.popup.alert

v1 FUNCTION(TITLE, CONTENT, CALLBACK, AFTER)

간단한 안내를 표시하는 팝업을 표시합니다.

인수에 사용되는 TITLE STRING 은 팝업의 제목을, CONTENT STRING 은 안내할 내용을 의미합니다. CALLBACK function(layer, pb, pu)과 AFTER function()은 room.skin.popup.add의 것과 동일합니다.

팝업의 타입은 alert로서, room.skin.popup.closeByType('alert')를 이용하여 이 종류의 팝업을(대기열에 있는것을 포함해서) 모두 닫을 수 있습니다.

해당 함수를 실행하면, 팝업 인스턴스의 ID가 리턴됩니다. ID를 이용하여 room.skin.popup.close(ID)등으로 해당 팝업을 조작할 수 있습니다.

이미 열려있는 팝업이 존재한다면 팝업 대기큐에서 자신의 순서를 기다신 후에 팝업이 표시됩니다. 함수를 호출한 즉시 팝업을 표시하려면 표시되고 있는 팝업창이 없는 상태여야 합니다.

U.chat('*').on('after.create', function( room, data ) {
	room.skin.popup.alert('title: 제목', 'content: 내용', function(layer, pb, pu){
	room.print('팝업이 표시됩니다.');
	}, function(){
	room.print('팝업이 닫혔습니다.');
	});
});

room.skin.popup.prompt

v1 FUNCTION(TITLE, SUBTITLE, VALUE, CALLBACK)

input 하나를 이용하여 값을 받을수 있는 팝업입니다. 비밀번호를 값으로 받고자 할 경우, room.skin.popup.password를 이용하시길 바랍니다.

인수에 사용되는 TITLE STRING 은 팝업의 제목을, SUBTITLE STRING 은 팝업의 내용을, VALUESTRING은 input의 기본값을 의미합니다. 사용자가 팝업의 확인 버튼을 눌려서 정상적으로 팝업을 닫았다면, CALLBACK function(data)의 data에 input의 값이 전달됩니다. 취소 버튼을 누르거나 팝업 영역외 다른 부분을 클릭하여 강제로 팝업을 끄면 data에 null이 전달됩니다.

팝업의 타입은 prompt으로서, room.skin.popup.closeByType('prompt')를 이용하여 이 종류의 팝업을(대기열에 있는것을 포함해서) 모두 닫을 수 있습니다.

해당 함수를 실행하면, 팝업 인스턴스의 ID가 리턴됩니다. ID를 이용하여 room.skin.popup.close(ID)등으로 해당 팝업을 조작할 수 있습니다.

U.chat('*').on('after.create', function( room, data ) {
	room.skin.popup.prompt('title: 제목', 'subtitle: 내용', 'input: 기본값', function(data){
	room.print('입력한 값': + data);
	});
});

room.skin.popup.password

v1 FUNCTION(TITLE, SUBTITLE, VALUE, CALLBACK)

인수에 사용되는 TITLE STRING 은 팝업의 제목을, SUBTITLE STRING 은 팝업의 내용을, VALUESTRING은 input의 기본값을 의미합니다. 사용자가 팝업의 확인 버튼을 눌려서 정상적으로 팝업을 닫았다면, CALLBACK function(data)의 data에 input의 값이 전달됩니다. 취소 버튼을 누르거나 팝업 영역외 다른 부분을 클릭하여 강제로 팝업을 끄면 data에 null이 전달됩니다.

팝업의 타입은 password로서, room.skin.popup.closeByType('password')를 이용하여 이 종류의 팝업을(대기열에 있는것을 포함해서) 모두 닫을 수 있습니다.

해당 함수를 실행하면, 팝업 인스턴스의 ID가 리턴됩니다. ID를 이용하여 room.skin.popup.close(ID)등으로 해당 팝업을 조작할 수 있습니다.

U.chat('*').on('after.create', function( room, data ) {
	room.skin.popup.password('title: 제목', 'subtitle: 내용', 'input: 기본값', function(data){
	room.print('입력한 값': + data);
	});
});

room.skin.popup.confirm

v1 FUNCTION(TITLE, SUBTITLE, CALLBACK)

팝업을 이용하여 사용자의 선택 (확인/취소)를 받을수 있습니다.

인수에 사용되는 TITLE STRING 은 팝업의 제목을, SUBTITLE STRING 은 팝업의 내용을 의미합니다. CALLBACK function(result)의 result를 통해 사용자의 선택을 확인할 수 있습니다. 사용자가 예를 눌렸다면 result는 true를, 아니오를 눌렸다면 result는 false를, 팝업외 다른 영역을 누르는 등 강제로 팝업이 꺼트리면 result는 null을 가집니다.

팝업의 타입은 confirm로서, room.skin.popup.closeByType('confirm')를 이용하여 이 종류의 팝업을(대기열에 있는것을 포함해서) 모두 닫을 수 있습니다.

해당 함수를 실행하면, 팝업 인스턴스의 ID가 리턴됩니다. ID를 이용하여 room.skin.popup.close(ID)등으로 해당 팝업을 조작할 수 있습니다.

U.chat('*').on('after.create', function( room, data ) {
	room.skin.popup.confirm('title: 제목', 'content: 내용', function(result){
		if(result == true){
			room.print('사용자가 확인을 눌렸습니다.');
		}else if(result == false){
			room.print('사용자가 취소를 눌렸습니다.');
		}else if(result == null){
			room.print('사용자가 팝업외 다른 영역을 클릭하였습니다.');
		}
	}
});

room.skin.popup.select

v1 FUNCTION(TITLE, SUBTITLE, DATA, CALLBACK)

HTML의 select를 이용하여 여러개의 선택지중 하나를 선택하도록 하는 팝업입니다.

인수에 사용되는 TITLE STRING 은 팝업의 제목을, SUBTITLE STRING 은 팝업의 내용을 의미합니다. DATA JSON는 선택지 목록으로 아래와 같은 구조를 가집니다. CALLBACK function(result)의 result를 통해 사용자의 선택을 확인할 수 있습니다. 항목을 선택하고 정상적으로 확인 버튼을 이용하여 팝업을 닫으면, result에 해당 값이 전달됩니다. 취소 버튼을 누르거나, 팝업을 강제로 팝업이 꺼트리면 result는 null을 가집니다.

팝업의 타입은 select로서, room.skin.popup.closeByType('select')를 이용하여 이 종류의 팝업을(대기열에 있는것을 포함해서) 모두 닫을 수 있습니다.

해당 함수를 실행하면, 팝업 인스턴스의 ID가 리턴됩니다. ID를 이용하여 room.skin.popup.close(ID)등으로 해당 팝업을 조작할 수 있습니다.

//data JSON 구조
{
	'option값1': '내용1',
	'option값2': '내용2'
	'option값3': '내용3'
	···
}

위의 DATA JSON는 다음과 같이 변환됩니다:

<select>
  <option value="option값1">내용1</option>
  <option value="option값1">내용2</option>
  <option value="option값1">내용3</option>
</select>

팝업의 타입은 select로서, room.skin.popup.closeByType('select')를 이용하여 이 종류의 팝업을(대기열에 있는것을 포함해서) 모두 닫을 수 있습니다.

해당 함수를 실행하면, 팝업 인스턴스의 ID가 리턴됩니다. ID를 이용하여 room.skin.popup.close(ID)등으로 해당 팝업을 조작할 수 있습니다.

U.chat('*').on('after.create', function( room, data ) {
	room.skin.popup.select('title: 제목', 'subtitle: 내용', {
		'uchat1': '유챗1 사용하기',
		'uchat2': '유챗2 사용하기',
		'uchat3': '유챗3 사용하기'
	}, function(data){
		if(data == null) room.print('취소하였습니다.');
		else if(data == 'uchat1') room.print('유챗1은 서비스 종료되었습니다.');
		else if(data == 'uchat2') room.print('지금 사용하고 계시는것이 유챗2 입니다!');
		else if(data == 'uchat3') room.print('유챗3은 10년 뒤에나 나올것 같습니다...');
	});
});

room.skin.popup.close

v1 FUNCTION(ID)

팝업의 ID로 특정 팝업을 닫습니다. 팝업이 대기열에 있을 경우, 대기열에서 해당 팝업을 삭제합니다.

팝업의 ID는 팝업을 만들때 리턴된 ID입니다. room.skin.popup.add로 팝업을 등록한 경우, CALLBACK의 layer.close()를 이용하여 창을 닫을수도 있습니다.

U.chat('*').on('after.create', function( room, data ) {
	var popup_id = room.skin.popup.alert('안녕하세요', '이 창은 5초후 닫힙니다.', function(layer, pb, pu){
		//이 경우, layer.close()을 이용해도 되지만, 여기서는 예제를 위해 사용치 않음.
		room.print('팝업이 표시되었습니다.');
	}, function(){
		room.print('팝업이 닫혔습니다.');
	});

	setTimeout(function(){
		room.skin.popup.close(popup_id);
		//이미 닫혀있는 경우에는, 아무런 작동도 하지 않습니다.
	}, 5 * 1000);
});

room.skin.popup.closeByType

v1 FUNCTION(TYPE)

지정한 타입을 가진 팝업을 전부 닫습니다. 팝업이 대기열에 있을 경우, 대기열에서 해당 팝업을 삭제합니다.

인자로 TYPESTRING을 받습니다.

U.chat('*').on('after.create', function( room, data ) {
	for(var i = 0; i < 10; ++i){
	//예제를 위해 10개의 팝업을 표시합니다.
	room.skin.popup.select('closeByType 예제', '2초후 select 타입의 팝업이 다 닫힙니다.', {
		'uchat1': '유챗1 사용하기',
		'uchat2': '유챗2 사용하기',
		'uchat3': '유챗3 사용하기'
	}, function(data){
		room.print('창 닫힘. 값:' + data);
	});
	}
	setTimeout(function(){
	//표시중인 팝업도 닫습니다.
		room.skin.popup.closeByType('select');
	}, 2 * 1000);
});