Skip to content
This repository was archived by the owner on Aug 18, 2020. It is now read-only.

Commit 31e18b5

Browse files
callum-oakleycallum-oakley
authored
Merge pull request #31 from pusher/vanilla
Vanilla
2 parents 36e524f + b77674a commit 31e18b5

Some content is hidden

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

75 files changed

+4942
-8400
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@ npm-debug.log
44
yarn-error.log
55
.DS_Store
66
.vscode/
7-
tests/config.js
7+
tests/config/production.js
8+
tests/config/staging.js
9+
tests/config/development.js

‎.prettierrc

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎CHANGELOG.md

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,95 @@ This project adheres to [Semantic Versioning Scheme](http://semver.org)
44

55
---
66

7-
## [Unreleased](https://github.com/pusher/chatkit-client-js/compare/0.6.2...HEAD)
7+
## [Unreleased](https://github.com/pusher/chatkit-client-js/compare/0.7.0...HEAD)
8+
9+
## 0.7.0 -- 2018-03-13
10+
11+
This version represents a radical departure from 0.6.X. The interface is very
12+
different, and there's a good chance we'll miss some of the changes in this
13+
log. If something isn't working after migration, the best place to look first
14+
is probably the
15+
[documentation](https://docs.pusher.com/chatkit/reference/javascript).
16+
17+
### Changes
18+
19+
- Methods with `onSuccess`, `onFailure` callbacks changed to return promises
20+
instead. e.g.
21+
22+
```javascript
23+
chatManager
24+
.connect()
25+
.then(currentUser => {})
26+
.catch(err => {})
27+
```
28+
29+
- All methods take a single object parameter (see the
30+
[documentation](https://docs.pusher.com/chatkit/reference/javascript) for
31+
details on each method's arguments)
32+
33+
- Delegates renamed to `hooks` throughout. e.g.
34+
35+
```javascript
36+
currentUser.subscribeToRoom({
37+
roomId,
38+
hooks: {
39+
onNewMessage: m => {}
40+
}
41+
})
42+
```
43+
44+
- Hooks all prefixed with `on`. e.g. `onNewMessage`, `onStartedTyping`
45+
46+
- `cursorSet` hook renamed to `onNewCursor`
47+
48+
- `authContext.queryParams` and `authContext.headers` both moved to the root
49+
options object in the token provider. e.g.
50+
51+
```javascript
52+
const tokenProvider = new TokenProvider({
53+
url: 'your.auth.url',
54+
queryParams: {
55+
someKey: someValue,
56+
...
57+
},
58+
headers: {
59+
SomeHeader: 'some-value',
60+
...
61+
}
62+
})
63+
```
64+
65+
- `addUser` and `removeUser` renamed to `addUserToRoom` and `removeUserFromRoom`
66+
67+
- methods that used to accept a `Room` object now accept a `roomId`. e.g.
68+
69+
instead of
70+
71+
```javascript
72+
currentUser.subscribeToRoom(myRoom, hooks) // WRONG
73+
```
74+
75+
do
76+
77+
```javascript
78+
currentUser.subscribeToRoom({ roomId: myRoom.id, hooks })
79+
```
80+
81+
- The behaviour of read cursors has changed: in particular cursors are now
82+
accessed via `currentUser.readCursor` and set with
83+
`currentUser.setReadCursor`. See the [Read Cursors section of the
84+
documentation](https://docs.pusher.com/chatkit/reference/javascript#read-cursors)
85+
for details.
86+
87+
- Presence data is now accessable on any user object under `user.presence`. e.g.
88+
89+
```javascript
90+
const isOnline = user.presence.state === 'online'
91+
```
92+
93+
- All users that share a common room membership are accesable under
94+
`currentUser.users`, and all members of a room are accessable under
95+
`room.users`.
896

997
## 0.6.2 -- 2018-02-05
1098

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ For more information on the Chatkit service, [see here](https://pusher.com/chatk
1515
[yarn](https://yarnpkg.com/):
1616

1717
```sh
18-
$ yarn add pusher-chatkit-client
18+
$ yarn add @pusher/chatkit
1919
```
2020

2121
## Script tag
2222

2323
```html
24-
<script src="https://unpkg.com/pusher-chatkit-client"></script>
24+
<script src="https://unpkg.com/@pusher/chatkit"></script>
2525
```
2626

2727
## Getting started

‎example/index.html

Lines changed: 9 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1+
<!doctype html>
12
<html>
2-
<head></head>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Chatkit Example</title>
6+
<!-- <script src="https://unpkg.com/pusher-chatkit-client@next"></script> -->
7+
<script src="../dist/web/chatkit.js"></script>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
310
<body>
4-
<script type="text/javascript" src="../dist/web/chatkit.js"></script>
5-
611
<ul id="messages"></ul>
7-
812
<div id="compose-wrapper">
913
<input name="messageText" type="text" id="text-input">
1014
<div class="choose-file">
@@ -13,205 +17,6 @@
1317
</div>
1418
<div id="send-button">SEND</div>
1519
</div>
16-
17-
<script type="text/javascript">
18-
let currentUser;
19-
let room;
20-
21-
const tokenProvider = new Chatkit.TokenProvider({
22-
url: 'YOUR_TEST_TOKEN_PROVIDER_URL',
23-
})
24-
25-
const chatManager = new Chatkit.ChatManager({
26-
instanceLocator: 'YOUR_INSTANCE_LOCATOR',
27-
tokenProvider: tokenProvider,
28-
userId: 'YOUR_CREATED_USER_ID',
29-
});
30-
31-
chatManager.connect({
32-
delegate: {},
33-
onSuccess: (cUser) => {
34-
currentUser = cUser;
35-
const roomToSubscribeTo = currentUser.rooms[0];
36-
37-
if (roomToSubscribeTo) {
38-
room = roomToSubscribeTo;
39-
console.log("Going to subscribe to", roomToSubscribeTo);
40-
currentUser.subscribeToRoom(
41-
roomToSubscribeTo,
42-
{
43-
newMessage: (message) => {
44-
const messagesList = document.getElementById('messages');
45-
const messageItem = document.createElement('li');
46-
messageItem.className = 'message';
47-
messagesList.append(messageItem);
48-
const textDiv = document.createElement('div');
49-
textDiv.innerHTML = `${message.sender.name}: ${message.text}`;
50-
messageItem.appendChild(textDiv);
51-
52-
if (message.attachment) {
53-
let attachment;
54-
switch (message.attachment.type) {
55-
case 'image':
56-
attachment = document.createElement('img');
57-
break;
58-
case 'video':
59-
attachment = document.createElement('video');
60-
attachment.controls = 'controls';
61-
break;
62-
case 'audio':
63-
attachment = document.createElement('audio');
64-
attachment.controls = 'controls';
65-
break;
66-
default:
67-
break;
68-
}
69-
70-
attachment.className += ' attachment';
71-
attachment.width = '400';
72-
73-
if (message.attachment.fetchRequired) {
74-
currentUser.fetchAttachment(message.attachment.link)
75-
.then(fetchedAttachment => {
76-
attachment.src = fetchedAttachment.link;
77-
messageItem.appendChild(attachment);
78-
})
79-
.catch(error => {
80-
console.log("Error", error);
81-
})
82-
} else {
83-
attachment.src = message.attachment.link;
84-
messageItem.appendChild(attachment);
85-
}
86-
}
87-
}
88-
}
89-
);
90-
} else {
91-
console.log("No room to subscribe to");
92-
}
93-
console.log("Successful connection", currentUser);
94-
},
95-
onError: (error) => {
96-
console.log('Error on connection: ', error);
97-
}
98-
});
99-
100-
document.getElementById("send-button").addEventListener('click', (ev) => {
101-
const fileInput = document.querySelector("input[name=testfile]");
102-
103-
currentUser.sendMessage(
104-
{
105-
text: document.getElementById("text-input").value,
106-
roomId: room.id,
107-
// attachment: {
108-
// link: 'https://assets.zeit.co/image/upload/front/api/deployment-state.png',
109-
// type: 'image',
110-
// },
111-
attachment: {
112-
file: fileInput.files[0],
113-
// Split on slashes, remove whitespace
114-
name: fileInput.value.split(/(\\|\/)/g).pop().replace(/\s+/g, ''),
115-
},
116-
},
117-
(messageId) => {
118-
console.log("Success!", messageId);
119-
},
120-
(error) => {
121-
console.log("Error", error);
122-
}
123-
)
124-
});
125-
126-
</script>
127-
<style>
128-
body {
129-
font-family: "Helvetica Neue", Helvetica, sans-serif;
130-
}
131-
132-
#messages {
133-
padding: 0;
134-
margin: 0;
135-
list-style: none;
136-
width: 100%;
137-
text-align: center;
138-
padding-bottom: 50px;
139-
}
140-
141-
.message {
142-
margin: 8px 0;
143-
}
144-
145-
.attachment {
146-
margin-top: 4px;
147-
}
148-
149-
.choose-file {
150-
position: relative;
151-
display: inline-block;
152-
border-left: 1px solid #ebebeb;
153-
border-right: 1px solid #ebebeb;
154-
width: 40px;
155-
height: 40px;
156-
font-size: 30px;
157-
color: #7f7f7f;
158-
background: white;
159-
text-align: center;
160-
float: left;
161-
overflow: hidden;
162-
}
163-
164-
.choose-file:hover {
165-
cursor: pointer;
166-
}
167-
168-
.choose-file input[type="file"] {
169-
-webkit-appearance: none;
170-
position: absolute;
171-
top: 0;
172-
left: 0;
173-
opacity: 0;
174-
height: 0;
175-
width: 0;
176-
}
177-
178-
#compose-wrapper {
179-
position: fixed;
180-
bottom: 0;
181-
left: 0;
182-
right: 0;
183-
height: 40px;
184-
border-top: 1px solid #ebebeb;
185-
}
186-
187-
#text-input {
188-
height: 100%;
189-
width: calc(100% - 70px - 42px);
190-
border: none;
191-
font-size: 28px;
192-
padding: 2px 4px;
193-
float: left;
194-
}
195-
196-
#text-input:focus {
197-
outline: none;
198-
}
199-
200-
#send-button {
201-
height: 100%;
202-
width: 70px;
203-
font-weight: 500;
204-
display: inline-block;
205-
text-align: center;
206-
transition: all 0.3s;
207-
padding-top: 10px;
208-
float: left;
209-
}
210-
211-
#send-button:hover {
212-
cursor: pointer;
213-
color: red;
214-
}
215-
</style>
20+
<script src="main.js"></script>
21621
</body>
21722
</html>

0 commit comments

Comments
 (0)