Commit d2091e2a authored by Eric Eastwood's avatar Eric Eastwood

Change container/activation option names

`options.container` -> `options.targetElement`
`optionts.activation` -> `options.activationElement`
parent 32c03658
## Overview
Primarily sidecar has an activation element that will show sidecar and a target element where sidecar gets loaded. These elements are specified by default but can be customised (see below).
## UI Customisation
- Activation element
- Target element
```html
<script>
((window.gitter = {}).chat = {}).options = {
room: 'gitterHQ/sidecar',
activation: '.my-special-button',
targetElement: '.my-special-target-element'
};
</script>
```
## Examples
- [Basic](https://github.com/gitterHQ/sidecar/tree/master/examples/basic)
- [Toggle chat, show/hide](https://github.com/gitterHQ/sidecar/tree/master/examples/toggle-chat-class-buttons)
- [Create and Destroy chat](https://github.com/gitterHQ/sidecar/tree/master/examples/create-destroy-chat)
### Toggle Buttons
You can define toggle/open/close buttons in your page using the `.js-gitter-toggle-chat-button` class and an optional `data-gitter-toggle-chat-state` attribute. If you do not provide a `data-gitter-toggle-chat-state`, it will default to `'toggle'`. See the `examples/toggle-chat-class-buttons` example.
```html
<button class="js-gitter-toggle-chat-button">Toggle Chat</button>
<button class="js-gitter-toggle-chat-button" data-gitter-toggle-chat-state="true">Open Chat</button>
<button class="js-gitter-toggle-chat-button" data-gitter-toggle-chat-state="false">Close Chat</button>
```
# Options
Set options with the global window option:
```html
<script>
((window.gitter = {}).chat = {}).options = {
room: 'gitterHQ/sidecar'
};
</script>
```
You can also override these options individually on the target element:
```html
<div
class="gitter-chat-embed
data-room="gitterHQ/sidecar"
></div>
```
- `options.room`: This is the Gitter room that sidecar will load (`gitterHQ/sidecar`)
- Default: `undefined`
- `options.targetElement`: Where you want to embed the chat. Can accept a dom node, array of dom nodes, or a selector
- Default: Elements that match `'.gitter-chat-embed'`
- `options.activationElement`: If `options.showChatByDefault` is `false`, this is the element you have to click/interact with to get the chat to actually embed. You can also pass in a promise which can optionally resolve to a dom node
- Default: `undefined`
- Note: This will automatically get generated if you don't specify it
- `options.showChatByDefault`: Whether to embed the chat on page load(true) or wait until the `options.activation` is resolved/clicked/interacted with(false).
- Default: `false`
- Note: **Use with caution,** useful for use cases where you have a page dedicated to chat.
- `options.useStyles`: This will embed CSS into your document to style the activation and target element. If you want to customise these, set this option to `false` and specify your own CSS.
- Default: `true`
- `preload`: Whether the Gitter chat iframe should be loaded in when the chat embed instance is created(this is the page load for default embed)
- Defaut: `false`
### Window Options:
You can set any of the chat options above in this object as well
- `window.gitter.chat.options.disableDefaultChat`: Stop the default chat from just loading on the page when including the Sidecar script. *So you can handle the Gitter chat creation yourself.*
The default chat is stored on `window.gitter.chat.defaultChat`.
# API
## `gitter.Chat`
```js
var chat = new window.gitter.Chat(/* options */);`
```
- `toggleChat(isChatOpen)`: Function/method - Takes a boolean which toggles the visibility of the chat panel
- This can be used an explicit show/hide method by passing in a explict show(true) or hide(false) boolean.
- `destroy()`: Function/method - Clean-up and remove any elements created by the embed
## Events
Emitted on Document:
- `gitter-sidecar-ready`: Emitted when the sidecar script has loaded and is available via `window.gitter`
- `gitter-sidecar-instance-started`: Emitted after any Sidecar chat instance has initialized
- Data: `chat`: The sidecar chat instance that was initialized
Emitted on Target Element:
- `gitter-chat-toggle`: Emitted whenever the chat is opened or closed
- Data: `state`: Whether it was opened(true) or closed(false)
- `gitter-chat-started`: Emitted after the Sidecar chat instance has initialized
- Data: `chat`: The sidecar chat instance that was initialized
*example:*
```js
document.querySelector('.gitter-chat-embed').addEventListener('gitter-chat-toggle', function(e) {
console.log(e.detail.state ? 'Chat Opened' : 'Chat Closed');
});
```
\ No newline at end of file
# v0.2.x - 2015-9-13
# v0.2.9 - 2015-9-20
- Add `microsite/` to showcase Sidecar and some getting started goodness
- Change `options.container` to `options.targetElement`
- Change `optionts.activation` to `options.activationElement`
# v0.2.5 - 2015-9-2
......
......@@ -2,7 +2,7 @@
Gitter embed widget
# Latest version: 0.2.5
# Latest version: 0.2.9
### [Changelog](https://github.com/gitterHQ/sidecar/blob/master/CHANGELOG.md)
......@@ -14,104 +14,7 @@ Gitter embed widget
<script src="sidecar.js"></script>
```
## Examples
- [Basic](https://github.com/gitterHQ/sidecar/tree/master/examples/basic)
### Toggle Buttons
You can define toggle/open/close buttons in your page using the `.js-gitter-toggle-chat-button` class and an optional `data-gitter-toggle-chat-state` attribute. If you do not provide a `data-gitter-toggle-chat-state`, it will default to `'toggle'`. See the `examples/toggle-chat-class-buttons` example.
```html
<button class="js-gitter-toggle-chat-button">Toggle Chat</button>
<button class="js-gitter-toggle-chat-button" data-gitter-toggle-chat-state="true">Open Chat</button>
<button class="js-gitter-toggle-chat-button" data-gitter-toggle-chat-state="false">Close Chat</button>
```
# Options
Set options with the global window option:
```html
<script>
((window.gitter = {}).chat = {}).options = {
room: 'gitterHQ/gitter'
};
</script>
```
You can also override these options individually on the container:
```html
<div
class="gitter-chat-embed
data-room="gitterHQ/gitter"
></div>
```
- `options.room`:
- Default: `undefined`
- `options.container`: Where you want to embed the chat. Can accept a dom node, array of dom nodes, or a selector
- Default: Elements that match `'.gitter-chat-embed'`
- `options.showChatByDefault`: Whether to embed the chat on page load(true) or wait until the `options.activation` is resolved/clicked/interacted with(false).
- Default: `true`
- Note: **Use with caution,** useful for use cases where you have a page dedicated to chat.
- `options.activation`: If `options.showChatByDefault` is `false`, this is the element you have to click/interact with to get the chat to actually embed. You can also pass in a promise which can optionally resolve to a dom node
- Default: `null`
- `options.useStyles`: Whether to embed some pre-made CSS styles to the page
- Default: `true`
- `preload`: Whether the Gitter chat iframe should be loaded in when the chat embed instance is created(this is the page load for default embed)
- Defaut: `false`
### Window Options:
You can set any of the chat options above in this object as well
- `window.gitter.chat.options.disableDefaultChat`: Stop the default chat from just loading on the page when including the Sidecar script. *So you can handle the Gitter chat creation yourself.*
The default chat is stored on `window.gitter.chat.defaultChat`.
# API
## `gitter.Chat`
```js
var chat = new window.gitter.Chat(/* options */);`
```
- `toggleChat(isChatOpen)`: Function/method - Takes a boolean which toggles the visibility of the chat panel
- `destroy()`: Function/method - Clean-up and remove any elements created by the embed
## Events
Emitted on Document:
- `gitter-sidecar-ready`: Emitted when the sidecar script has loaded and is available via `window.gitter`
- `gitter-sidecar-instance-started`: Emitted after any Sidecar chat instance has initialized
- Data: `chat`: The sidecar chat instance that was initialized
Emitted on Container:
- `gitter-chat-toggle`: Emitted whenever the chat is opened or closed
- Data: `state`: Whether it was opened(true) or closed(false)
- `gitter-chat-started`: Emitted after the Sidecar chat instance has initialized
- Data: `chat`: The sidecar chat instance that was initialized
*example:*
```js
document.querySelector('.gitter-chat-embed').addEventListener('gitter-chat-toggle', function(e) {
console.log(e.detail.state ? 'Chat Opened' : 'Chat Closed');
});
```
# [API](https://github.com/gitterHQ/sidecar/blob/master/API.md)
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidecar Basic Example</title>
<link href="../common.css" rel="stylesheet">
</head>
<body>
<div class="js-sidecar-status">... waiting for Sidecar</div>
<button class="js-destroy-chat-button">Destroy Chat</button>
<button class="js-create-chat-button">Create Chat</button>
<script>
((window.gitter = {}).chat = {}).options = {
disableDefaultChat: true
};
</script>
<script src="../../dist/sidecar.js" async defer></script>
<script>
document.addEventListener('gitter-sidecar-ready', function(e) {
var GitterChat = e.detail.Chat;
document.querySelector('.js-sidecar-status').innerHTML = 'Sidecar ready';
var chat = new GitterChat({
room: 'marionettejs/backbone.marionette'
});
document.querySelector('.js-destroy-chat-button').addEventListener('click', function(e) {
console.log('Destroy');
chat.destroy();
});
});
</script>
</body>
</html>
This diff is collapsed.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-316 214.5 207.4 166.8" style="enable-background:new -316 214.5 207.4 166.8;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.1;enable-background:new ;}
.st1{opacity:0.5;fill:#FFFFFF;enable-background:new ;}
.st2{fill:#FFFFFF;}
.st3{opacity:0.1;fill:#FFFFFF;enable-background:new ;}
</style>
<g class="st0">
</g>
<path class="st1" d="M-194.1,273.9v-10.2c-9.5-0.1-9.8-9.8-9.8-9.9c0-8.7,9.5-9.9,9.6-9.9l0,0c8.6,0,10.9,6.4,11,6.4l-0.3,0.1
c0,0-0.6-1.6-2.2-3.1c-1.5-1.4-4.1-3.1-8.5-3.1c0,0-2.3,0.3-4.7,1.6c-3.1,1.8-4.6,4.5-4.6,8c0,0,0.1,2.4,1.3,4.8
c1.6,3.2,4.4,4.8,8.3,4.8h0.2v10c1.1-0.7,5.8-3.5,13.8-3.6c0.1-0.5,0.6-2.2,2.1-4c1.6-1.9,4.6-4.1,10.1-4.1c0,0,2.8,0,5.5,0.9
c3.6,1.2,5.5,3.5,5.6,6.5c1.5-0.1,11.5-0.4,14.6,2.6c0.2,0.2,0.4,0.4,0.5,0.7l-0.2-7.9h0.1c0.1,0,10-3.5,10-10.6
c0-0.1-1.9-9.3-10-9.3c0,0-2.3,0.3-4.5,1.2c-3,1.3-4.5,3.1-4.5,5.4h-0.3c0-5.9,9.2-6.9,9.3-6.9l0,0c4.4,0,6.9,2.6,8.3,4.8
c1.5,2.4,2,4.8,2,4.8c0,7-8.9,10.5-10.1,10.9l0.3,8.8c0,0.1,0,0.1,0,0.2h-0.3v-0.1c0-0.6-0.3-1.1-0.8-1.6c-3.2-3-14.4-2.5-14.5-2.5
h-0.2v-0.2c0-7.2-10.7-7.3-10.8-7.3c-5.4,0-8.3,2.2-9.9,4c-1.6,2-2,4-2,4v0.1h-0.1c-9.1,0-14,3.6-14,3.7H-194.1z"/>
<path class="st1" d="M-151.3,340.2h-32.3V340c0-0.1-0.1-11.2,6.2-17.6c2.9-3,6.8-4.5,11.5-4.5c0.1,0,7.3,0,11.8,4.4
c2.3,2.3,3.5,5.4,3.5,9.3h-0.3c0-3.7-1.2-6.8-3.4-9c-4.3-4.2-11.2-4.3-11.6-4.3l0,0c-4.6,0-8.4,1.5-11.2,4.4
c-5.8,5.9-6.1,15.8-6.1,17.2h32c3.2,0,5.7-0.8,7.2-2.4c1.7-1.7,1.6-3.9,1.6-3.9v-22.5c0-7-2-12.5-6-16.2c-6-5.7-14.7-5.6-15.9-5.6
v19.4h-0.3V289h0.2c0.1,0,9.8-0.5,16.3,5.7c4.1,3.8,6.1,9.4,6.1,16.5v22.6c0,0.1,0.1,2.3-1.7,4.1
C-145.4,339.4-147.9,340.2-151.3,340.2z"/>
<path class="st1" d="M-276.7,340.1c0,0-0.4-4.7,2.2-7.7c1.5-1.6,3.6-2.4,6.3-2.4h60.6c0,0,5.9-1.5,5.9-9.1c0-0.2,1.3-16-8.7-27
c-6.4-7.1-16.1-10.6-28.7-10.6c-0.2,0-16.8-0.6-27.3,9.4c-5.7,5.4-8.5,12.9-8.5,22.4h-0.3c0-9.5,2.9-17.1,8.6-22.6
c10.6-10.1,27.3-9.4,27.5-9.4c12.7,0,22.4,3.6,28.9,10.7c10.1,11.1,8.8,27.1,8.8,27.3c0,4.1-1.7,6.4-3.1,7.7c-1.5,1.3-3,1.7-3.1,1.7
h-60.6c-2.6,0-4.7,0.8-6.1,2.3c-2.6,2.9-2.2,7.4-2.2,7.4L-276.7,340.1z"/>
<path class="st1" d="M-293.1,375.3c-0.1,0-12.3-0.5-12.3-7.9v-16.5h0.3v16.5c0,3,2,5.2,6,6.5c3,1,6,1.1,6,1.1c4,0,6.9-1.1,8.8-3.1
c2.5-2.8,2.2-6.5,2.2-6.5v-17.2c0-4.3-1-7.1-2.9-8.5c-2.2-1.5-5-0.5-5-0.5h-0.1h-11.3c-4.9,0-8.4-1.3-10.4-3.8
c-2.6-3.2-1.7-7.4-1.7-7.4c0-4.1,1.4-7.5,4.1-10.1c6.8-6.5,19.9-6,20-6v0.3c-0.1,0-13.1-0.5-19.8,5.9c-2.7,2.5-4,5.9-4,9.9
c0,0.1-0.8,4.1,1.7,7.2c2,2.4,5.4,3.6,10.2,3.6h11.2c0.3-0.1,3-1,5.3,0.5c2,1.4,3.1,4.3,3.1,8.7v17.2c0,0,0.4,3.8-2.2,6.7
C-286,374.2-289.1,375.3-293.1,375.3z"/>
<path class="st1" d="M-168.1,375.4c-3.6,0-6.3-1-8.1-2.9c-2.6-2.9-2.4-6.8-2.4-6.9v-7c0-4.2-1.1-5.9-2-6.6s-1.9-0.5-1.9-0.5l0,0
c-3.3,0-5.9-1.7-7.4-4.9c-1.1-2.4-1.3-4.8-1.3-4.9v-28.3c0-8.7,2-15.1,6-18.9c2.1-2,4.4-2.9,6.1-3.3c-4.7-0.2-6.7-1.3-7.6-2.1
c-0.4-0.4-0.6-0.8-0.6-1c-9.6,0-12-3.6-12.3-4.2c-10.1,0-13.3-1.7-14.1-3.2c-0.5-0.8-0.2-1.6-0.1-1.7c0-1.7,0.5-2.9,1.5-3.7
c1.8-1.4,4.5-0.8,4.6-0.8l-0.1,0.3c0,0-2.7-0.6-4.3,0.7c-0.9,0.7-1.4,1.9-1.4,3.5l0,0l0,0c0,0-0.4,0.7,0.1,1.5c1.5,2.6,9.4,3,13.9,3
h0.1v0.1c0,0,0.5,1,2.2,2.1c1.6,0.9,4.6,2.1,10,2.1h0.2v0.2c0,0,0.2,3,9.9,3c0.1,0,0.2,0,0.2,0v0.3c-0.1,0-0.1,0-0.2,0
c-0.9,0-4.6,0.3-7.9,3.5c-3.9,3.7-5.9,10-5.9,18.6v28.2c0,0,0.1,2.4,1.2,4.7c1.5,3.1,3.8,4.7,7,4.7c0,0,1.1-0.3,2.1,0.6
c1.4,1.1,2.1,3.4,2.1,6.9v7c0,0.1-0.3,3.9,2.3,6.6c1.7,1.9,4.4,2.8,7.9,2.8c0,0,2.7-0.2,5.3-1.3c3.5-1.5,5.2-3.7,5.2-6.6v-15.2h0.3
V367c0,3-1.9,5.4-5.4,6.9C-165.4,375.1-168.1,375.3-168.1,375.4L-168.1,375.4z"/>
<path class="st1" d="M-167.8,284.9c-4.8,0-8.8-3.9-8.8-8.8c0-4.9,3.9-8.8,8.8-8.8c4.8,0,8.8,3.9,8.8,8.8
C-159,281-162.9,284.9-167.8,284.9z M-167.8,267.6c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5
C-159.3,271.4-163.1,267.6-167.8,267.6z"/>
<circle class="st2" cx="-292.4" cy="247.1" r="1.5"/>
<circle class="st2" cx="-239.1" cy="283" r="1"/>
<circle class="st2" cx="-109.7" cy="380.2" r="1"/>
<circle class="st2" cx="-205.8" cy="300.9" r="1.4"/>
<circle class="st2" cx="-256" cy="359.2" r="1.4"/>
<circle class="st2" cx="-207.6" cy="274.7" r="1.4"/>
<circle class="st2" cx="-194.3" cy="263.2" r="1.1"/>
<circle class="st2" cx="-183.5" cy="250.3" r="1.3"/>
<circle class="st2" cx="-172.1" cy="216.3" r="1.8"/>
<circle class="st2" cx="-150.4" cy="251" r="0.7"/>
<circle class="st2" cx="-167.8" cy="261.8" r="1.4"/>
<circle class="st2" cx="-176.7" cy="291.2" r="1.4"/>
<circle class="st2" cx="-190.5" cy="313.4" r="1.2"/>
<circle class="st2" cx="-164.6" cy="308.7" r="1.3"/>
<circle class="st2" cx="-123.8" cy="320.3" r="1.2"/>
<circle class="st2" cx="-281.8" cy="240.5" r="1.2"/>
<circle class="st2" cx="-183.5" cy="339.7" r="1.3"/>
<circle class="st2" cx="-151.1" cy="331.6" r="0.9"/>
<circle class="st2" cx="-157.8" cy="351.9" r="1.3"/>
<circle class="st2" cx="-176.8" cy="371.7" r="0.9"/>
<circle class="st2" cx="-293.1" cy="375.1" r="1.1"/>
<circle class="st2" cx="-304.9" cy="350.9" r="0.8"/>
<circle class="st2" cx="-313.2" cy="334.8" r="0.9"/>
<circle class="st2" cx="-285.7" cy="339.1" r="1.7"/>
<circle class="st2" cx="-276.5" cy="340.1" r="1.2"/>
<circle class="st2" cx="-275.2" cy="314.8" r="1.5"/>
<circle class="st2" cx="-289.5" cy="312.1" r="0.6"/>
<circle class="st2" cx="-164.6" cy="289.5" r="1.5"/>
<g>
<path id="SVGID_1_" class="st3" d="M-307.5,341.7v24.7c0,0,3.9,11.6,13.3,11.6c0,0,14.5,0.1,15-10.3v-24.3h83.5
c0,0,2,11.5,11.5,11.5v12.8c0,0,0.3,12.5,17.2,12.5c0,0,14.2,0.7,14.2-12.8v-13.8c0,0,7.1-2,7.1-9.1c0,0,6.4-0.8,6.4-8.1v-31
c0,0-0.4-11.1-9.8-15.5c0,0,13,0.9,13.2-3h11.5c0,0,5.5-0.6,6-6.3c0-0.3,0-0.5,0-0.8c0-6.5-4.7-7.4-7.4-7.4h-11.8V267
c0,0,9.1-2.8,9.1-13.8c0,0-1.1-11.1-12.8-11.1c0,0-13.2-1-13.2,9.8c0,0,0.4,12.5,9.1,12.5v3.1c0,0-4.5-2.4-9.1-2.4
c0,0-2.4-8.4-14.5-8.4c0,0-13.8-0.4-13.8,8.4c0,0-7.1,0.1-7.1,2v-4.4c0,0,10.1-3,10.1-11.8c0,0,0.1-10.5-14.2-10.5
c0,0-13.2-1.4-13.2,13.5c0,0,1.6,13.2,9.1,13.2s0,0.7,0,0.7v3h-13.2c0,0-5.7,2.2-5.7,9.1c0,0,2.4,7.4,6.7,7.4h8.8
c0,0,4.7,3.7,10.5,3.7c0,0-3.7,2.8-3.7,21.2v24.6h-6.7v-4.7c0,0,3-3.7,3-15.2c0,0-1.1-18.7-11.1-26.6c0,0-8.6-9.8-32.4-9.8
c0,0-37.8-2-37.8,31.1h-7.5c0,0-1.3-2.1-7-2.1c0,0-21.9,0.4-21.9,18.8c0,0,0.1,7.1,1.3,9.1C-313.7,339.5-307.5,341.7-307.5,341.7z"
/>
</g>
</svg>
This diff is collapsed.
This diff is collapsed.
......@@ -22053,7 +22053,7 @@
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
var _templateObject = _taggedTemplateLiteral(['\n <script>\n ((window.gitter = {}).chat = {}).options = {\n room: \'', '\'\n };\n </script>\n '], ['\n <script>\n ((window.gitter = {}).chat = {}).options = {\n room: \'', '\'\n };\n </script>\n ']);
var _templateObject = _taggedTemplateLiteral(['\n <script>\n ((window.gitter = {}).chat = {}).options = {\n room: \'', '\'\n };\n </script>\n <script src="https://sidecar.gitter.im/js/sidecar.v0.js" async defer></script>\n '], ['\n <script>\n ((window.gitter = {}).chat = {}).options = {\n room: \'', '\'\n };\n </script>\n <script src="https://sidecar.gitter.im/js/sidecar.v0.js" async defer></script>\n ']);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
......@@ -22140,7 +22140,7 @@
_react2['default'].createElement(
'h2',
{ className: 'documentation-panel-secondary-header' },
'Documentaion'
'Documentation'
),
_react2['default'].createElement('section', {
className: 'documentation-panel-body use-markdown',
......@@ -22168,8 +22168,8 @@
)
),
_react2['default'].createElement('img', {
className: 'sidecar-people-diagram',
src: 'images/sidecar-people.svg'
className: 'sidecar-diagram',
src: 'images/sidecar-diagram.svg'
}),
_react2['default'].createElement(
'h2',
......
This diff is collapsed.
......@@ -14,8 +14,8 @@ import App from '../src/js/components/MicrositeApp';
import appReducer from '../src/js/reducers/MicrositeReducer';
const readmeMarkdownFilePath = path.join(__dirname, '../../README.md');
const getReadmeMarkdown = readFile(readmeMarkdownFilePath).then(function(buffer) {
const documentationMarkdownFilePath = path.join(__dirname, '../../API.md');
const getDocumentationMarkdown = readFile(documentationMarkdownFilePath).then(function(buffer) {
return String(buffer);
});
......@@ -29,7 +29,7 @@ marked.setOptions({
// We are going to fill these out in the sections to follow
export default function generateRenderResponse(req) {
return getReadmeMarkdown.then((readmeMarkdown) => {
return getDocumentationMarkdown.then((readmeMarkdown) => {
// Create a new Redux store instance
const store = createStore(appReducer, {
......
......@@ -92,10 +92,10 @@ body {
}
.primary-panel-gitter-logo-title {
margin-bottom: 2em;
margin-bottom: 1em;
color: #f4f2ed;
font-size: 1.8em;
font-size: 1.36em;
text-align: center;
& > .gitter-logo-holder + .gitter-logo-name {
......@@ -108,7 +108,7 @@ body {
}
.sidecar-people-diagram {
.sidecar-diagram {
width: 100%;
max-height: 35vh;
......@@ -169,6 +169,8 @@ body {
.copy-snippet-block-body {
@mixin code-block-padding;
overflow: auto;
margin-top: 0;
margin-bottom: 0;
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-316 214.5 207.4 166.8" style="enable-background:new -316 214.5 207.4 166.8;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.1;enable-background:new ;}
.st1{opacity:0.5;fill:#FFFFFF;enable-background:new ;}
.st2{fill:#FFFFFF;}
.st3{opacity:0.1;fill:#FFFFFF;enable-background:new ;}
</style>
<g class="st0">
</g>
<path class="st1" d="M-194.1,273.9v-10.2c-9.5-0.1-9.8-9.8-9.8-9.9c0-8.7,9.5-9.9,9.6-9.9l0,0c8.6,0,10.9,6.4,11,6.4l-0.3,0.1
c0,0-0.6-1.6-2.2-3.1c-1.5-1.4-4.1-3.1-8.5-3.1c0,0-2.3,0.3-4.7,1.6c-3.1,1.8-4.6,4.5-4.6,8c0,0,0.1,2.4,1.3,4.8
c1.6,3.2,4.4,4.8,8.3,4.8h0.2v10c1.1-0.7,5.8-3.5,13.8-3.6c0.1-0.5,0.6-2.2,2.1-4c1.6-1.9,4.6-4.1,10.1-4.1c0,0,2.8,0,5.5,0.9
c3.6,1.2,5.5,3.5,5.6,6.5c1.5-0.1,11.5-0.4,14.6,2.6c0.2,0.2,0.4,0.4,0.5,0.7l-0.2-7.9h0.1c0.1,0,10-3.5,10-10.6
c0-0.1-1.9-9.3-10-9.3c0,0-2.3,0.3-4.5,1.2c-3,1.3-4.5,3.1-4.5,5.4h-0.3c0-5.9,9.2-6.9,9.3-6.9l0,0c4.4,0,6.9,2.6,8.3,4.8
c1.5,2.4,2,4.8,2,4.8c0,7-8.9,10.5-10.1,10.9l0.3,8.8c0,0.1,0,0.1,0,0.2h-0.3v-0.1c0-0.6-0.3-1.1-0.8-1.6c-3.2-3-14.4-2.5-14.5-2.5
h-0.2v-0.2c0-7.2-10.7-7.3-10.8-7.3c-5.4,0-8.3,2.2-9.9,4c-1.6,2-2,4-2,4v0.1h-0.1c-9.1,0-14,3.6-14,3.7H-194.1z"/>
<path class="st1" d="M-151.3,340.2h-32.3V340c0-0.1-0.1-11.2,6.2-17.6c2.9-3,6.8-4.5,11.5-4.5c0.1,0,7.3,0,11.8,4.4
c2.3,2.3,3.5,5.4,3.5,9.3h-0.3c0-3.7-1.2-6.8-3.4-9c-4.3-4.2-11.2-4.3-11.6-4.3l0,0c-4.6,0-8.4,1.5-11.2,4.4
c-5.8,5.9-6.1,15.8-6.1,17.2h32c3.2,0,5.7-0.8,7.2-2.4c1.7-1.7,1.6-3.9,1.6-3.9v-22.5c0-7-2-12.5-6-16.2c-6-5.7-14.7-5.6-15.9-5.6
v19.4h-0.3V289h0.2c0.1,0,9.8-0.5,16.3,5.7c4.1,3.8,6.1,9.4,6.1,16.5v22.6c0,0.1,0.1,2.3-1.7,4.1
C-145.4,339.4-147.9,340.2-151.3,340.2z"/>
<path class="st1" d="M-276.7,340.1c0,0-0.4-4.7,2.2-7.7c1.5-1.6,3.6-2.4,6.3-2.4h60.6c0,0,5.9-1.5,5.9-9.1c0-0.2,1.3-16-8.7-27
c-6.4-7.1-16.1-10.6-28.7-10.6c-0.2,0-16.8-0.6-27.3,9.4c-5.7,5.4-8.5,12.9-8.5,22.4h-0.3c0-9.5,2.9-17.1,8.6-22.6
c10.6-10.1,27.3-9.4,27.5-9.4c12.7,0,22.4,3.6,28.9,10.7c10.1,11.1,8.8,27.1,8.8,27.3c0,4.1-1.7,6.4-3.1,7.7c-1.5,1.3-3,1.7-3.1,1.7
h-60.6c-2.6,0-4.7,0.8-6.1,2.3c-2.6,2.9-2.2,7.4-2.2,7.4L-276.7,340.1z"/>
<path class="st1" d="M-293.1,375.3c-0.1,0-12.3-0.5-12.3-7.9v-16.5h0.3v16.5c0,3,2,5.2,6,6.5c3,1,6,1.1,6,1.1c4,0,6.9-1.1,8.8-3.1
c2.5-2.8,2.2-6.5,2.2-6.5v-17.2c0-4.3-1-7.1-2.9-8.5c-2.2-1.5-5-0.5-5-0.5h-0.1h-11.3c-4.9,0-8.4-1.3-10.4-3.8
c-2.6-3.2-1.7-7.4-1.7-7.4c0-4.1,1.4-7.5,4.1-10.1c6.8-6.5,19.9-6,20-6v0.3c-0.1,0-13.1-0.5-19.8,5.9c-2.7,2.5-4,5.9-4,9.9
c0,0.1-0.8,4.1,1.7,7.2c2,2.4,5.4,3.6,10.2,3.6h11.2c0.3-0.1,3-1,5.3,0.5c2,1.4,3.1,4.3,3.1,8.7v17.2c0,0,0.4,3.8-2.2,6.7
C-286,374.2-289.1,375.3-293.1,375.3z"/>
<path class="st1" d="M-168.1,375.4c-3.6,0-6.3-1-8.1-2.9c-2.6-2.9-2.4-6.8-2.4-6.9v-7c0-4.2-1.1-5.9-2-6.6s-1.9-0.5-1.9-0.5l0,0
c-3.3,0-5.9-1.7-7.4-4.9c-1.1-2.4-1.3-4.8-1.3-4.9v-28.3c0-8.7,2-15.1,6-18.9c2.1-2,4.4-2.9,6.1-3.3c-4.7-0.2-6.7-1.3-7.6-2.1
c-0.4-0.4-0.6-0.8-0.6-1c-9.6,0-12-3.6-12.3-4.2c-10.1,0-13.3-1.7-14.1-3.2c-0.5-0.8-0.2-1.6-0.1-1.7c0-1.7,0.5-2.9,1.5-3.7
c1.8-1.4,4.5-0.8,4.6-0.8l-0.1,0.3c0,0-2.7-0.6-4.3,0.7c-0.9,0.7-1.4,1.9-1.4,3.5l0,0l0,0c0,0-0.4,0.7,0.1,1.5c1.5,2.6,9.4,3,13.9,3
h0.1v0.1c0,0,0.5,1,2.2,2.1c1.6,0.9,4.6,2.1,10,2.1h0.2v0.2c0,0,0.2,3,9.9,3c0.1,0,0.2,0,0.2,0v0.3c-0.1,0-0.1,0-0.2,0
c-0.9,0-4.6,0.3-7.9,3.5c-3.9,3.7-5.9,10-5.9,18.6v28.2c0,0,0.1,2.4,1.2,4.7c1.5,3.1,3.8,4.7,7,4.7c0,0,1.1-0.3,2.1,0.6
c1.4,1.1,2.1,3.4,2.1,6.9v7c0,0.1-0.3,3.9,2.3,6.6c1.7,1.9,4.4,2.8,7.9,2.8c0,0,2.7-0.2,5.3-1.3c3.5-1.5,5.2-3.7,5.2-6.6v-15.2h0.3
V367c0,3-1.9,5.4-5.4,6.9C-165.4,375.1-168.1,375.3-168.1,375.4L-168.1,375.4z"/>
<path class="st1" d="M-167.8,284.9c-4.8,0-8.8-3.9-8.8-8.8c0-4.9,3.9-8.8,8.8-8.8c4.8,0,8.8,3.9,8.8,8.8
C-159,281-162.9,284.9-167.8,284.9z M-167.8,267.6c-4.7,0-8.5,3.8-8.5,8.5c0,4.7,3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5
C-159.3,271.4-163.1,267.6-167.8,267.6z"/>
<circle class="st2" cx="-292.4" cy="247.1" r="1.5"/>
<circle class="st2" cx="-239.1" cy="283" r="1"/>
<circle class="st2" cx="-109.7" cy="380.2" r="1"/>
<circle class="st2" cx="-205.8" cy="300.9" r="1.4"/>
<circle class="st2" cx="-256" cy="359.2" r="1.4"/>
<circle class="st2" cx="-207.6" cy="274.7" r="1.4"/>
<circle class="st2" cx="-194.3" cy="263.2" r="1.1"/>
<circle class="st2" cx="-183.5" cy="250.3" r="1.3"/>
<circle class="st2" cx="-172.1" cy="216.3" r="1.8"/>
<circle class="st2" cx="-150.4" cy="251" r="0.7"/>
<circle class="st2" cx="-167.8" cy="261.8" r="1.4"/>
<circle class="st2" cx="-176.7" cy="291.2" r="1.4"/>
<circle class="st2" cx="-190.5" cy="313.4" r="1.2"/>
<circle class="st2" cx="-164.6" cy="308.7" r="1.3"/>
<circle class="st2" cx="-123.8" cy="320.3" r="1.2"/>
<circle class="st2" cx="-281.8" cy="240.5" r="1.2"/>
<circle class="st2" cx="-183.5" cy="339.7" r="1.3"/>
<circle class="st2" cx="-151.1" cy="331.6" r="0.9"/>
<circle class="st2" cx="-157.8" cy="351.9" r="1.3"/>
<circle class="st2" cx="-176.8" cy="371.7" r="0.9"/>
<circle class="st2" cx="-293.1" cy="375.1" r="1.1"/>
<circle class="st2" cx="-304.9" cy="350.9" r="0.8"/>
<circle class="st2" cx="-313.2" cy="334.8" r="0.9"/>
<circle class="st2" cx="-285.7" cy="339.1" r="1.7"/>
<circle class="st2" cx="-276.5" cy="340.1" r="1.2"/>
<circle class="st2" cx="-275.2" cy="314.8" r="1.5"/>
<circle class="st2" cx="-289.5" cy="312.1" r="0.6"/>
<circle class="st2" cx="-164.6" cy="289.5" r="1.5"/>
<g>
<path id="SVGID_1_" class="st3" d="M-307.5,341.7v24.7c0,0,3.9,11.6,13.3,11.6c0,0,14.5,0.1,15-10.3v-24.3h83.5
c0,0,2,11.5,11.5,11.5v12.8c0,0,0.3,12.5,17.2,12.5c0,0,14.2,0.7,14.2-12.8v-13.8c0,0,7.1-2,7.1-9.1c0,0,6.4-0.8,6.4-8.1v-31
c0,0-0.4-11.1-9.8-15.5c0,0,13,0.9,13.2-3h11.5c0,0,5.5-0.6,6-6.3c0-0.3,0-0.5,0-0.8c0-6.5-4.7-7.4-7.4-7.4h-11.8V267
c0,0,9.1-2.8,9.1-13.8c0,0-1.1-11.1-12.8-11.1c0,0-13.2-1-13.2,9.8c0,0,0.4,12.5,9.1,12.5v3.1c0,0-4.5-2.4-9.1-2.4
c0,0-2.4-8.4-14.5-8.4c0,0-13.8-0.4-13.8,8.4c0,0-7.1,0.1-7.1,2v-4.4c0,0,10.1-3,10.1-11.8c0,0,0.1-10.5-14.2-10.5
c0,0-13.2-1.4-13.2,13.5c0,0,1.6,13.2,9.1,13.2s0,0.7,0,0.7v3h-13.2c0,0-5.7,2.2-5.7,9.1c0,0,2.4,7.4,6.7,7.4h8.8
c0,0,4.7,3.7,10.5,3.7c0,0-3.7,2.8-3.7,21.2v24.6h-6.7v-4.7c0,0,3-3.7,3-15.2c0,0-1.1-18.7-11.1-26.6c0,0-8.6-9.8-32.4-9.8
c0,0-37.8-2-37.8,31.1h-7.5c0,0-1.3-2.1-7-2.1c0,0-21.9,0.4-21.9,18.8c0,0,0.1,7.1,1.3,9.1C-313.7,339.5-307.5,341.7-307.5,341.7z"
/>
</g>
</svg>
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidecar - Gitter</title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic,400italic" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
</head>
<body>
<div class="microsite-app-entry-point">...</div>
<script>
((window.gitter = {}).chat = {}).options = {
room: 'gitterHQ/sidecar'
};
</script>
<script src="../../dist/sidecar.js" async defer></script>
<script src="js/build.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -30,6 +30,7 @@ class MicrositeApp extends React.Component {
room: '${roomName}'
};
</script>
<script src="https://sidecar.gitter.im/js/sidecar.v0.js" async defer></script>
`;
return (
......@@ -63,7 +64,7 @@ class MicrositeApp extends React.Component {
<h2 className="documentation-panel-secondary-header">
Documentaion
Documentation
</h2>
<section
......@@ -84,8 +85,8 @@ class MicrositeApp extends React.Component {
</div>
<img
className="sidecar-people-diagram"
src="images/sidecar-people.svg"
className="sidecar-diagram"
src="images/sidecar-diagram.svg"
/>
<h2 className="primary-panel-secondary-header">Add some Gitter to your site</h2>
......
{
"name": "gitter-sidecar",
"version": "0.2.8",
"version": "0.2.9",
"description": "An embeddable Gitter client.",
"main": "index.js",
"scripts": {
......
......@@ -114,9 +114,15 @@
.gitter-chat-embed-action-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: flex-end;
padding-bottom: 1.2em;
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 70%, rgba(255, 255, 255, 0) 100%);
color: #3a3133;
color: rgba(58, 49, 51, 0.65);
......@@ -128,15 +134,12 @@
}
.gitter-chat-embed-action-bar-item {
flex: 1;
display: flex;
/* main axis */
justify-content: center;
/* cross axis */
align-items: center;
width: 100%;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.5);
......
......@@ -39,5 +39,4 @@ if(!((windowGitter.chat || {}).options || {}).disableDefaultChat) {
export default sidecar;
This diff is collapsed.
......@@ -4,7 +4,6 @@
// Inspired by bling.js: https://gist.github.com/paulirish/12fb951a8b893a454b32
// But we needed full module encapsulation
// This will concat anything including array-like things(like NodeLists or HTMLCollections)
let concat = function(...args) {
return args.reduce((result, item) => {
......@@ -22,7 +21,7 @@ let concat = function(...args) {
};
// Pass in a selector string, dom node, or array of dom nodes
export function coerceIntoElementsArray(...args) {
let coerceIntoElementsArray = function(...args) {
let elements = [];
if(typeof args[0] === 'string') {
elements = document.querySelectorAll.call(document, ...args);
......@@ -32,7 +31,7 @@ export function coerceIntoElementsArray(...args) {
}
return elements;
}
};
// `arrayLike` can be a single object, array, or array-like (NodeList, HTMLCollection)
......@@ -42,6 +41,9 @@ export function forEach(arrayLike, cb) {
cb(...args);
}
});
// Keep the chaining going
return this;
}
......
import objectAssign from 'object-assign';
let remove = function() {
this.parentElement.removeChild(this);
let remove = function(element) {
element.parentElement.removeChild(element);
};
......@@ -51,6 +51,7 @@ class ElementStore extends Array {
destroy() {
this.forEach((element, index) => {
console.log('el', index);
remove(element);
this.splice(index, 1);
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment