Minitalk.ui

정의 파일 /scripts/widget.ui.js

미니톡 채팅위젯 UI 관련 변수 및 함수가 정의되어 있습니다.

표시	의미
사용중단	이 기능은 문제의 소지가 있어 제거되었거나 제거될 예정입니다.
불안정	아직 안정적이라고 고려될만큼 충분한 테스트를 거치지 않았습니다.(합당하다면 하위호환성이 보장됩니다.)
안정	API가 충분히 검증되었지만, 기반이 되는 코드의 정리 때문에 마이너한 변경이 있을 수 있습니다.(하위호환성이 보장됩니다.)
잠김	심각한 버그가 발견되지 않는 한 이 코드는 절대 변경되지 않습니다.

메서드 (Methods)

이름	설명
appendTool()	미니톡 채팅위젯 툴바에 툴버튼을 추가한다.
closeAlert()	경고창을 닫습니다.
disable()	미니톡 채팅위젯 UI 를 비활성화합니다.
enable()	미니톡 채팅위젯 UI 를 활성화합니다.
printError()	미니톡 채팅위젯에 에러메시지창을 출력한다.
printSystemMessage()	채팅창에 시스템 메시지를 출력합니다.
printTitle()	미니톡 채팅위젯의 타이틀을 변경한다.
printUserCount()	미니톡 채팅위젯의 타이틀바에 접속자수를 출력한다.
removeMessage()	특정 메시지 아이디를 가진 메시지를 화면상에서 제거합니다.
setPlaceholder()	메시지 입력창에 기본 안내 메시지를 설정합니다.
showAlert()	경고창을 표시합니다.

appendTool()

메서드 안정 v6.4.0부터

Minitalk.ui.appendTool(tool: string | object, position?: int | string): void

미니톡 채팅위젯 툴바에 툴버튼을 추가한다.

매개변수

이름	타입	설명
tool	string | object	추가할 툴버튼 아래를 참고하여 정의합니다.
position	int | string	(선택, 기본값 null) 툴버튼을 추가할 위치를 숫자 또는 툴버튼 명으로 입력하면 해당 툴버튼 뒤에 추가되며, position 값이 비어있는 경우, 툴바 제일 마지막에 툴버튼이 추가됩니다.

반환값 void

미니톡 채팅위젯 스크립트를 정의할 때가 아닌 플러그인이나, 이벤트 리스너 등에서 툴버튼을 추가하는데 사용할 수 있습니다.

미리 정의된 문자열

값	설명
-	툴버튼 구분선
bold	폰트설정 굵게 (채팅권한설정에 폰트설정권한이 없는경우 보이지 않음)
underline	폰트설정 밑줄 (채팅권한설정에 폰트설정권한이 없는경우 보이지 않음)
italic	폰트설정 기울임 (채팅권한설정에 폰트설정권한이 없는경우 보이지 않음)
color	폰트설정 색상 (채팅권한설정에 폰트설정권한이 없는경우 보이지 않음)
emoticon	이모티콘
file	파일첨부버튼
clear	화면비우기

사용자정의 툴버튼 추가

필드	타입	설명
name	string	고유값으로 영문 및 숫자로만 이루어져야합니다.
icon	string	툴버튼 아이콘 이미지 경로
iconClass	string	툴버튼 아이콘 스타일시트 (아이콘폰트 등의 스타일을 지정할 수 있습니다.)
visible	function(minitalk, me)	툴버튼 보임여부 (minitalk : 미니톡객체, me : 접속자정보)
handler	function(minitalk, e)	툴버튼 클릭시 실행될 함수 (minitalk : 미니톡객체, e : 클릭이벤트)

예제

CodePen에서 열기

최종수정일 : 2020.12.29

closeAlert()

메서드 안정 v7.1.0부터

Minitalk.ui.closeAlert(): void

경고창을 닫습니다.

반환값 void

열려있는 경고창을 닫습니다.

Minitalk.ui.showAlert() 메소드 내용을 참고하여 주십시오.

예제

CodePen에서 열기

최종수정일 : 2021.04.15

disable()

메서드 안정 v6.4.0부터

Minitalk.ui.disable(inputmode: boolean): void

미니톡 채팅위젯 UI 를 비활성화합니다.

매개변수

이름	타입	설명
inputmode	boolean

반환값 void

미니톡 UI 를 비활성화합니다.

함수의 매개변수 inputmode:boolean (기본값 : false) 에 true 를 전달할 경우, 채팅입력폼 및 전송버튼만 비활성화되며, false 를 전달할 경우 미니톡 채팅위젯 전체 UI 를 비활성화합니다.

참조 : Minitalk.ui.enable()

예제

CodePen에서 열기

최종수정일 : 2021.04.05

enable()

메서드 안정 v6.4.0부터

Minitalk.ui.enable(inputmode: boolean): void

미니톡 채팅위젯 UI 를 활성화합니다.

매개변수

이름	타입	설명
inputmode	boolean

반환값 void

미니톡 UI 를 활성화합니다.

함수의 매개변수 inputmode:boolean (기본값 : false) 에 true 를 전달할 경우, 채팅입력폼 및 전송버튼만 활성화되며, false 를 전달할 경우 미니톡 채팅위젯 전체 UI 를 활성화합니다.

참조 : Minitalk.ui.disable()

예제

CodePen에서 열기

최종수정일 : 2021.04.05

printError()

메서드 안정 v6.4.0부터

Minitalk.ui.printError(code: string): void

미니톡 채팅위젯에 에러메시지창을 출력한다.

매개변수

이름	타입	설명
code	string

반환값 void

미니톡 채팅위젯에 에러메시지창을 출력합니다.

해당 메시지창은 미니톡 채팅위젯 전체를 비활성화 시키며 출력됩니다.

함수의 매개변수로 전달되는 code:string 에는 미니톡 언어팩(/languages/ko.json 등)의 error 에 정의된 에러코드를 전달하게 됩니다.

예제

CodePen에서 열기

최종수정일 : 2021.04.05

printSystemMessage()

메서드 안정 v6.4.0부터

Minitalk.ui.printSystemMessage(type: string, message: string): void

채팅창에 시스템 메시지를 출력합니다.

매개변수

이름	타입	설명
type	string	메시지 종류 (system, error, notice, info, plugin)
message	string	메시지 내용

반환값 void

채팅창에 메시지를 출력합니다.

예제

CodePen에서 열기

최종수정일 : 2021.04.15

printTitle()

메서드 안정 v6.4.0부터

Minitalk.ui.printTitle(title: string): void

미니톡 채팅위젯의 타이틀을 변경한다.

매개변수

이름	타입	설명
title	string

반환값 void

미니톡 채팅위젯의 타이틀은 기본적으로 미니톡 클라이언트 관리자의 채널관리에서 설정한 채널명이 들어갑니다.

해당 타이틀을 변경하고자 하는 경우 사용할 수 있습니다.

예제

CodePen에서 열기

최종수정일 : 2021.04.15

printUserCount()

메서드 안정 v6.4.0부터

Minitalk.ui.printUserCount(count: int): void

미니톡 채팅위젯의 타이틀바에 접속자수를 출력한다.

매개변수

이름	타입	설명
count	int

반환값 void

해당 메소드를 통해 접속자수를 변경할 경우, 1회에 한하여 변경되며 실제 접속자수가 변경될때마다 실제 접속자수가 표시됩니다.

updateUserCount 이벤트를 활용하여, 실제 접속자에 일정 인원수를 변경하는 등으로도 사용이 가능합니다.

예제

CodePen에서 열기

최종수정일 : 2021.04.15

removeMessage()

메서드 안정 v7.1.0부터

Minitalk.ui.removeMessage(id: string): void

특정 메시지 아이디를 가진 메시지를 화면상에서 제거합니다.

매개변수

이름	타입	설명
id	string

반환값 void

이 메소드가 호출되는 브라우저의 화면에서만 제거되며, 서버 및 다른 접속자 화면에서는 제거되지 않습니다.

서버 및 모든 사용자의 화면에서 특정 메시지를 제거하려면 Minitalk.socket.updateMessage() 메소드를 참고하여 주시기 바랍니다.

메시지 고유아이디 (string id)의 경우 afterSendMessage 이벤트나, message 이벤트를 통해 확인할 수 있습니다.

예제

CodePen에서 열기

최종수정일 : 2021.04.16

setPlaceholder()

메서드 안정 v7.2.0부터

Minitalk.ui.setPlaceholder(placeholder: string): void

메시지 입력창에 기본 안내 메시지를 설정합니다.

매개변수

이름	타입	설명
placeholder	string

반환값 void

메시지 입력폼에 기본 안내 메시지(placeholder)를 설정합니다.

string placeholder 에 null 을 지정할 경우, 기본 안내메시지 (SHIFT + ENTER 줄바꿈) 이 표시됩니다.

Minitalk.ui.placeholder(""); 처럼 빈값을 지정할 경우 안내메시지가 표시되지 않습니다.

예제

CodePen에서 열기

최종수정일 : 2021.06.04

showAlert()

메서드 안정 v7.1.0부터

Minitalk.ui.showAlert(title: string, message: string, buttons?: object[]): void

경고창을 표시합니다.

매개변수

이름	타입	설명
title	string	경고창의 제목
message	string	경고창의 내용
buttons	object[]	(선택) 버튼 (옵션)

buttons 구조

필드	타입	설명
text	string	버튼명
class	string	버튼속성 (cancel, confirm 중 선택)
handler	function	버튼을 클릭했을 때 동작할 함수

반환값 void

자바스크립트의 confirm() 함수와 비슷한 역할을 하는 경고창을 출력합니다.

미니톡 채팅위젯의 경우 실시간 소켓통신을 하기 때문에 alert() 이나 confirm() 함수 사용시 소켓연결이 끊어질 수 있으므로, 가급적 이 메소드를 이용하는 것을 권장합니다.

object[] buttons 가 정의되어 있지 않은 경우 확인버튼이 없는 일반 메시지만 표시되며, 버튼이 없으므로 해당 메시지는 유저가 임의로 닫을 수 없습니다.

예제

CodePen에서 열기

최종수정일 : 2021.04.16