Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

circuit-sdk/examples/js/intro.html

Go to file
 
 
Cannot retrieve contributors at this time
216 lines (193 sloc) 8.88 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<!--
* Copyright 2017 Unify Software and Solutions GmbH & Co.KG.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
-->
<html lang="en">
<head>
<title>Circuit JS-SDK</title>
<style>
body { font-family: sans-serif; font-size: 14px;}
section { padding-top: 20px; }
input { margin-left: 10px; }
pre { padding: 5px; margin: 5px; }
#error { color: red; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>
<script src="https://dl.dropbox.com/s/1puij1dhgqxe7u6/circuit.js?dl=0"></script>
</head>
<body>
<h3>Circuit JS SDK - Introduction example</h3>
<div>
This example shows how to:
<ul>
<li>logon using OAuth2</li>
<li>read the most recent conversation</li>
<li>setup injectors to enhance the conversation, item and user data objects recevied from the server</li>
<li>fetch the most recent conversation again, but this time with the injector</li>
<li>listen to various events such as conversationCreated</li>
</ul>
</div>
<button onclick="run()">Fetch most recent conversation</button>
<section id="output"></section>
<script>
if (typeof Circuit === 'undefined') {
alert('Could not load SDK (circuit.js).');
} else if (!Circuit.isCompatible()) {
alert('Sorry, your browser is not supported. Use Chrome or Firefox.');
}
// Displays SDK internal logs in console
// Circuit.logger.setLevel(Circuit.Enums.LogLevel.Debug);
// Create a new Circuit SDK client. Pass the OAuth2 client_id for this app
var client = new Circuit.Client({
domain: 'circuitsandbox.net',
client_id: '78cafde2f6854ad5ad80a67c532687bc',
scope: 'ALL' // Asking for ALL permissions because all these examples use the same domain
});
// Logon using OAuth2, then fetch the most recent conversation and print the conversation
// object. Then add the injectors and fetch the most recent conversation again. You will
// see the additional attribute add the the conversation object by the injectors.
function run() {
client.logon()
.then(user => output(`>>> Logged in as ${user.displayName}`))
.then(getMostRecentConversation)
.then(conversations => output('>>> Most recent conversation (prior to injector):', conversations[0]))
.then(addConversationAndItemInjectors)
.then(getMostRecentConversation)
.then(conversations => output('>>> Most recent conversation (after to injector):', conversations[0]))
.catch(error);
}
var getMostRecentConversation = client.getConversations.bind(client, {direction: 'BEFORE', numberOfConversations: 1});
// Circuit.Injectors functions are called by the SDK when a conversation is
// returned from the server, whether its for responses or events.
// These injectors are optional. When defined, they can be regular synchroneous
// functions, or promises like in conversation injector example below.
function addConversationAndItemInjectors() {
// The conversation injector example needs to be asynchroneous since the
// user lookup is an API call.
Circuit.Injectors.conversationInjector = conversation => {
return new Promise((resolve, reject) => {
// Get user objects for participant userIds other than mine,
// then set the 'otherUsers', 'creator' and 'topLevelItem.creator'
// attributes. Then also set the 'title' attribute.
var userIds = conversation.participants.filter(p => {
return p !== client.loggedOnUser.userId;
});
client.getUsersById(userIds).then(users => {
// Set conversation.otherUsers
conversation.otherUsers = users;
// Set conversation.creator
if (conversation.creatorId === client.loggedOnUser.userId) {
conversation.creator = client.loggedOnUser;
} else {
conversation.creator = users.find(u => u.userId === conversation.creatorId);
}
// Set conversation.topLevelItem.creator
if (conversation.topLevelItem) {
if (conversation.topLevelItem.creatorId === client.loggedOnUser.userId) {
conversation.topLevelItem.creator = client.loggedOnUser;
} else {
conversation.topLevelItem.creator = users.find(u => {
return u.userId === conversation.topLevelItem.creatorId;
});
}
}
// Set conversation.title
if (conversation.type === 'DIRECT') {
conversation.title = conversation.otherUsers[0].displayName;
} else {
conversation.title = conversation.topic || conversation.otherUsers.map(u => {
return u.displayName;
}).join(', ');
}
resolve(conversation);
}, err => reject);
});
}
// Define a item injector to create a teaser text
Circuit.Injectors.itemInjector = item => {
if (item.type === 'TEXT') {
// Create item.teaser attribute with replacing br and hr tags with a space
item.teaser = item.text.content.replace(/<(br[\/]?|\/li|hr[\/]?)>/gi, ' ');
} else {
item.teaser = item.type;
}
};
}
// Define a user injector to override the avatar if user does not have one.
// This injector does not need to be async, so a regular function can be used.
Circuit.Injectors.userInjector = user => {
if (!user.smallImageUri) {
user.avatar = 'http://www.aceshowbiz.com/images/photo/chuck_norris.jpg';
user.avatarLarge = 'http://www.aceshowbiz.com/images/photo/chuck_norris.jpg';
}
};
// Example for listening to different events
client.addEventListener('itemAdded', item => output('itemAdded event received:', item));
client.addEventListener('itemUpdated', item => output('itemUpdated event received:', item));
client.addEventListener('conversationCreated', conv => output('conversationCreated event received:', conv));
client.addEventListener('conversationUpdated', conv => output('conversationUpdated event received:', conv));
// This event requires a presence subscription via subscribePresence(userIDs)
client.addEventListener('userPresenceChanged', presence => output('userPresenceChanged event received:', presence));
// Event is only dispatched to my own other clients to keep them in sync.
// At this time there is no event for other user updates other than the
// userPresenceChanged event above
client.addEventListener('userUpdated', user => output('user event received:'));
/* Comment out to keep the log clean
client.addEventListener('connectionStateChanged', state => output('connectionStateChanged event received:', state));
*/
// Helper methods for displaying results
function error(e) {
console.log(e);
output(e.message);
}
function output(msg, obj) {
var el = document.getElementById('output');
if (msg) {
el.appendChild(document.createElement('pre')).innerText = msg + '\n';
}
if (obj) {
if (typeof(obj) === 'object') {
obj = JSON.stringify(obj, undefined, 4);
obj = syntaxHighlight(obj);
}
el.appendChild(document.createElement('pre')).innerHTML = obj;
}
}
function syntaxHighlight(json) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
</body>
</html>