Skip to content

Commit d747ed1

Browse files
James.kimJames.kim
James.kim
authored and
James.kim
committed
add sample
1 parent fdbc554 commit d747ed1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+18148
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Created by .ignore support plugin (hsz.mobi)

‎README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,23 @@
11
# SendBird-JavaScript
22
SendBird JavaScript Sample
3+
4+
[SendBird](https://sendbird.com) provides the chat API and SDK for your app enabling real-time communication among your users.
5+
6+
7+
# Getting Started
8+
9+
[Bower](http://bower.io) package for [SendBird.com](https://sendbird.com) JavaScript SDK
10+
11+
bower install sendbird
12+
13+
14+
[npm](https://www.npmjs.com/package/sendbird) module for [SendBird.com](https://sendbird.com) JavaScript SDK
15+
16+
npm install sendbird
17+
18+
19+
[download](https://github.com/smilefam/SendBird-SDK-JavaScript) for [SendBird.com](https://sendbird.com) JavaScript SDK
20+
21+
22+
# [Documentation](https://sendbird.gitbooks.io/sendbird-web-sdk/content/en/index.html)
23+

‎basic-sample/chat.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
6+
<link rel="shortcut icon" href="https://s3.amazonaws.com/sendbird-static/favicon/favicon.ico" type="image/x-icon">
7+
8+
<link href='https://fonts.googleapis.com/css?family=Exo+2:400,900italic,900,800italic,800,700italic,700,600italic,600,500italic,500,400italic,300italic,200italic,200,100italic,100,300'
9+
rel='stylesheet' type='text/css'>
10+
<link href='https://fonts.googleapis.com/css?family=Lato:400,900italic,900,800italic,800,700italic,700,600italic,600,500italic,500,400italic,300italic,200italic,200,100italic,100,300'
11+
rel='stylesheet' type='text/css'>
12+
13+
<link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
14+
<link rel="stylesheet" href="/static/css/sample-chat.css">
15+
16+
<title>Web SDK Sample</title>
17+
18+
</head>
19+
<body>
20+
<div class="init-check"></div>
21+
22+
<div class="sample-body">
23+
24+
<!-- left nav -->
25+
<div class="left-nav">
26+
<a href="//sendbird.com" target="_blank"><div class="left-nav-icon"></div></a>
27+
<div class="left-nav-channel-select">
28+
<button type="button" class="left-nav-button left-nav-open" id="btn_open_chat">
29+
OPEN CHAT
30+
<div class="left-nav-button-guide"></div>
31+
</button>
32+
<button type="button" class="left-nav-button left-nav-messaging" id="btn_messaging_chat">
33+
1ON1 & GROUP CHAT
34+
<div class="left-nav-button-guide"></div>
35+
</button>
36+
</div>
37+
38+
<div class="left-nav-channel-section">
39+
<div class="left-nav-channel-title">OPEN CHAT</div>
40+
<div class="left-nav-channel-empty">Get started to select<br>a channel</div>
41+
<div id="open_channel_list"></div>
42+
43+
<div class="left-nav-channel-title title-messaging">1ON1 & GROUP CHAT</div>
44+
<div id="messaging_channel_list"></div>
45+
</div>
46+
47+
<div class="left-nav-user">
48+
<div class="left-nav-user left-nav-user-icon"></div>
49+
<div class="left-nav-user left-nav-login-user">
50+
<div class="left-nav-user left-nav-user-title">username</div>
51+
<div class="left-nav-user left-nav-user-nickname"></div>
52+
</div>
53+
</div>
54+
55+
</div> <!-- // end left nav -->
56+
57+
58+
<!-- chat section -->
59+
<div class="right-section">
60+
<!-- modal-bg -->
61+
<div class="right-section__modal-bg"></div>
62+
63+
<!-- top -->
64+
<div class="chat-top">
65+
<div class="chat-top__title"></div>
66+
<div class="chat-top-button">
67+
68+
<div class="chat-top__button chat-top__button-invite">INVITE</div>
69+
<div class="modal-guide-user">
70+
user list
71+
</div>
72+
73+
<div class="chat-top__button chat-top__button-member"></div>
74+
<div class="modal-guide-member">
75+
Current member list
76+
</div>
77+
78+
<div class="chat-top__button chat-top__button-leave"></div>
79+
<div class="modal-guide-leave">
80+
Leave
81+
</div>
82+
83+
</div>
84+
</div>
85+
86+
<!-- channel empty -->
87+
<div class="chat-empty">
88+
<div class="chat-empty chat-empty__tile">WELCOME TO SAMPLE CHAT</div>
89+
<div class="chat-empty chat-empty__icon"></div>
90+
<div class="chat-empty chat-empty__desc">
91+
Create or select a channel to chat in.<br>
92+
If you don't have a channel to participate,<br>
93+
go ahead and create your first channel now.
94+
</div>
95+
</div>
96+
97+
<!-- chat -->
98+
<div class="chat">
99+
<div class="chat-canvas"></div>
100+
101+
<div class="chat-input">
102+
<label class="chat-input-file" for="chat_file_input">
103+
<input type="file" name="file" id="chat_file_input" style="display: none;">
104+
</label>
105+
<div class="chat-input-text">
106+
<textarea class="chat-input-text__field" placeholder="Write a chat" disabled="true"></textarea>
107+
</div>
108+
</div>
109+
<label class="chat-input-typing"></label>
110+
</div>
111+
112+
</div> <!-- // end chat section -->
113+
114+
</div>
115+
116+
<!-----------------------
117+
modal
118+
------------------------>
119+
<div class="modal-guide-create">
120+
<div class="modal-guide-create__title">Create Chat</div>
121+
<div class="modal-guide-create__desc">
122+
Click on any button to create a new channel<br>
123+
and start sending your first message!
124+
</div>
125+
<button type="button" class="modal-guide-create__button" id="guide_create">GOT IT!</button>
126+
</div>
127+
128+
<div class="modal-open-chat">
129+
<div class="modal-open-chat-top">
130+
<input type="text" class="modal-open-chat-top__search" placeholder="Search Channel" id="modal_open_chat_search">
131+
</div>
132+
<div class="modal-open-chat-list"></div>
133+
<div class="modal-open-chat-more">
134+
<div class="modal-open-chat-more__text">MORE<div class="modal-open-chat-more__icon"></div></div>
135+
</div>
136+
</div>
137+
138+
<div class="modal-messaging">
139+
<div class="modal-messaging-top">
140+
<label class="modal-messaging-top__title">1on1 Chat</label>
141+
<label class="modal-messaging-top__desc">Member list shows people inside the application.</label>
142+
</div>
143+
<div class="modal-messaging-list">
144+
<div class="modal-messaging-list__item">Username1<div class="modal-messaging-list__icon"></div></div>
145+
<div class="modal-messaging-list__item">Username2<div class="modal-messaging-list__icon modal-messaging-list__icon--select"></div></div>
146+
147+
<div class="modal-messaging-more">MORE<div class="modal-messaging-more__icon"></div></div>
148+
</div>
149+
<div class="modal-messaging-bottom">
150+
<button type="button" class="modal-messaging-bottom__button" onclick="startMessaging()">START MESSAGE</button>
151+
</div>
152+
</div>
153+
154+
<div class="modal-member">
155+
<div class="modal-member-title">CURRENT MEMBER LIST</div>
156+
<div class="modal-member-list"></div>
157+
</div>
158+
159+
<div class="modal-invite">
160+
<div class="modal-invite-title">USER LIST</div>
161+
<div class="modal-invite-top">
162+
<label class="modal-messaging-top__title modal-invite-top__title">1on1 Chat</label>
163+
<label class="modal-invite-top__desc">Member list shows people inside the application.</label>
164+
</div>
165+
<div class="modal-messaging-list modal-invite-list">
166+
167+
</div>
168+
<div class="modal-invite-bottom">
169+
<button type="button" class="modal-invite-bottom__button" onclick="inviteMember()">INVITE</button>
170+
</div>
171+
</div>
172+
173+
<div class="modal-leave-channel">
174+
<div class="modal-leave-channel-card">
175+
<div class="modal-leave-channel-title">Are you Sure?</div>
176+
<div class="modal-leave-channel-desc">Do you want to leave this channel?</div>
177+
<div class="modal-leave-channel-separator"></div>
178+
<div class="modal-leave-channel-bottom">
179+
<button type="button" class="modal-leave-channel-button modal-leave-channel-close">CANCEL</button>
180+
<button type="button" class="modal-leave-channel-button modal-leave-channel-submit">YES</button>
181+
</div>
182+
</div>
183+
</div>
184+
<!-----------------------
185+
// END modal
186+
------------------------>
187+
188+
<script src="/static/lib/SendBird.min.js"></script>
189+
<script src="/static/js/jquery-1.11.3.min.js"></script>
190+
<script src="/static/js/util.js"></script>
191+
<script src="/static/js/chat.js"></script>
192+
193+
</body>
194+
</html>

‎basic-sample/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
6+
<link rel="shortcut icon" href="https://s3.amazonaws.com/sendbird-static/favicon/favicon.ico" type="image/x-icon">
7+
8+
<link href='https://fonts.googleapis.com/css?family=Exo+2:400,900italic,900,800italic,800,700italic,700,600italic,600,500italic,500,400italic,300italic,200italic,200,100italic,100,300' rel='stylesheet' type='text/css'>
9+
<link href='https://fonts.googleapis.com/css?family=Lato:400,900italic,900,800italic,800,700italic,700,600italic,600,500italic,500,400italic,300italic,200italic,200,100italic,100,300' rel='stylesheet' type='text/css'>
10+
11+
<link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
12+
<link rel="stylesheet" href="/static/css/sample-index.css">
13+
14+
<title>Web SDK Sample</title>
15+
</head>
16+
<body class="sample-background">
17+
<div class="container">
18+
<div class="row">
19+
20+
<!-- top -->
21+
<div class="index-section index-top">
22+
<div class="text-sort text-sort--right">
23+
<img src="/static/img/logo_landing.svg">
24+
</div>
25+
<div class="text-sort text-sort--left">
26+
<label class="index-title">Sample Chat</label>
27+
</div>
28+
</div>
29+
30+
<!-- nickname -->
31+
<div class="index-section index-input">
32+
<input type="text" class="index-nickname" maxlength="12" placeholder="Enter User nickname" id="user_nickname">
33+
<button type="button" class="index-button" id="btn_start">DONE</button>
34+
</div>
35+
36+
<!-- description -->
37+
<div class="index-section index-text">
38+
Start chatting on SendBird by choosing your display name.<br>
39+
This can be changed anytime and will be shown on 1-on-1 and group messaging.
40+
<br />
41+
<br />
42+
<a href="//github.com/smilefam/sendbird-sample/archive/master.zip" class="download-sample">Download Sample</a>
43+
</div>
44+
45+
<div class="index-section index-bottom">
46+
<img src="/static/img/image-landing-01.png" width="624">
47+
</div>
48+
49+
</div>
50+
</div>
51+
<div style="text-align: center;">
52+
<img src="/static/img/image-landing-02.png" width="960">
53+
</div>
54+
55+
<script src="/static/js/jquery-1.11.3.min.js"></script>
56+
<script src="/static/js/util.js"></script>
57+
<script src="/static/js/index.js"></script>
58+
59+
</body>
60+
</html>

‎basic-sample/static/bootstrap/bootstrap.min.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎basic-sample/static/bootstrap/bootstrap.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)