Skip to content
This repository has been archived by the owner on Aug 2, 2019. It is now read-only.

Commit

Permalink
Switched from IDs to URLs
Browse files Browse the repository at this point in the history 
Fixes #13
  • Loading branch information
@AurelioDeRosa
AurelioDeRosa committed Jan 5, 2016
1 parent a346462 commit 546f199
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 88 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
# Next

* [!] Exposed the `createWidget()` method to create a supported widget ([#12][])
* [!] Switched from IDs to URLs. IDs are now deprecated. ([#13][])
* Calling `init()` multiple times don't create a widget multiple times ([#14][])
* Improved internal documentation

[#14]: https://github.com/joindin/JoindIn.js/issues/14
[#12]: https://github.com/joindin/JoindIn.js/issues/12
[#13]: https://github.com/joindin/JoindIn.js/issues/13

# 0.5.0 (03-01-2016)

Expand Down
100 changes: 13 additions & 87 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,23 +41,29 @@ The last options you have to download the library are to clone the repository an

## Usage

Once you have obtained the library, you have to create one or more DOM elements for every element you want to embed:
talk, comment, or any other of the [elements supported](#elements-supported). The DOM elements you create must use
the class `joindin-embed` and define two `data-*` attributes:
Once you have obtained the library, you have to include in your web pages one or more DOM elements for every element
you want to embed: talk, comment, or any other of the [elements supported](#elements-supported). The DOM elements you
include must have the class `joindin-embed` and define at least two `data-*` attributes:

* `data-url`: the URL to use to fetch the data of the element to embed. This attribute is required for all the widgets.
* `data-type`: [the type of the element](#elements-supported) to embed. This attribute is required for all the widgets.
* `data-id`: the ID of the element you want to embed. This attribute isn't required for all the widgets (e.g. the
call for papers widget). To know how to retrieve the ID of an element read the section
[How to retrieve the ID of the element to embed](#how-to-retrieve-the-id-of-the-element-to-embed);
* `data-type`: [the type of the element](#elements-supported) to embed. This attribute is required for all the widgets;
[How to retrieve the ID of the element to embed](#how-to-retrieve-the-id-of-the-element-to-embed).
**This attribute is deprecated as of version 0.6.0 and its support will be removed in an upcoming version. Please use
`data-url` instead.**
* `data-theme`: specify the theme of the widget between [the themes available](#themes-available). This attribute is
optional.

An example of element that meets these requirements is the following:

```html
<div class="joindin-embed" data-id="10889" data-type="talk"></div>
<div class="joindin-embed" data-url="https://api.joind.in/v2.1/users/25190" data-type="speaker"></div>
```

These HTML elements can be obtained by visiting the [Joind.in](https://joind.in/) website. In each page of a supported
element, you'll find a section with the code to copy and paste in your website to embed it.

With the element(s) in place, you have to include the CSS file provided. It should be placed in the `head` of your web
page. If you used Bower, you can include it as shown below:

Expand Down Expand Up @@ -124,7 +130,7 @@ its ID `target`, you have to write:
```js
JoindIn.createWidget(
{
id: 25190,
url: 'https://api.joind.in/v2.1/users/25190',
type: 'speaker'
},
function(widget) {
Expand All @@ -147,86 +153,6 @@ The library supports the following elements:

More elements will be integrated soon.

In the following sections you can learn how to embed the elements supported.

### Embedding a speaker

To embed [my profile](https://joind.in/user/view/25190), you have to add the following element to your page:

```html
<div class="joindin-embed" data-id="25190" data-type="speaker"></div>
```

### Embedding a talk

To embed my talk "[Modern front-end with the eyes of a PHP developer](https://joind.in/talk/view/10889)",
you have to add the following element to your page:

```html
<div class="joindin-embed" data-id="10889" data-type="talk"></div>
```

If you want to embed the same talk using [one of the themes available](#themes-available), for example Shark,
you have to add the following element to your page:

```html
<div class="joindin-embed" data-id="10889" data-type="talk" data-theme="shark"></div>
```

### Embedding a comment of a talk

To embed a specific comment published on the same talk, you have to add the following element instead:

```html
<div class="joindin-embed" data-id="44197" data-type="talk-comment"></div>
```

Note that in this case the ID refers to the comment, not the talk.

### Embedding an event

To embed the [jsDay 2015](https://joind.in/event/view/3094) event,
you have to add the following element to your page:

```html
<div class="joindin-embed" data-id="3094" data-type="event"></div>
```

### Embedding the call for papers

To embed the currently open call for papers, you have to add the following element to your page:

```html
<div class="joindin-embed" data-type="cfps"></div>
```

If you want to embed the same talk using [one of the themes available](#themes-available), for example Picton,
you have to add the following element to your page:

```html
<div class="joindin-embed" data-id="10889" data-type="talk" data-theme="picton"></div>
```

### How to retrieve the ID of the element to embed

Retrieving the ID of the element you want to embed is a bit tricky.

The ID of a **speaker** can be found in the URL of the website. For example, the URL of my profile
is [https://joind.in/user/view/25190](https://joind.in/user/view/25190), so the ID is 25190.

The ID of a **talk** can be found in the URL of the website. For example, the URL of my talk
"[Modern front-end with the eyes of a PHP developer](https://joind.in/talk/view/10889)" is
[https://joind.in/talk/view/10889](https://joind.in/talk/view/10889), so the ID is 10889.

To retrieve the ID of a **comment** you have to look at the source code of the page. It's written as part of the class
name set to the element wrapping each comment. For example, you can find a class name like `comment-43964` where
43964 is the ID of the comment.

The ID of an **event** can be found in the URL of the website. For example, the URL of the jsDay 2015
is [https://joind.in/event/view/3094](https://joind.in/event/view/3094), so the ID is 3094.

The **call for papers** widget doesn't require any ID.

## Themes available

The library provides the following themes:
Expand Down
2 changes: 1 addition & 1 deletion dist/joindin.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/joindin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
* @typedef DataHash
* @type {Object}
* @property {string} type The type of the widget
* @property {string} url The URL to use to fetch the data of the widget
* @property {(number|string)} [id] The ID of the widget
* @property {string} [theme] The theme to use
*/
Expand Down Expand Up @@ -755,6 +756,8 @@
throw new Error('Data type not recognized');
}

url = data.url || url;

get(url + '?format=json', function(xhr) {
// The widget has already been created, possibly by a previous call
if (element.children.length > 0) {
Expand Down Expand Up @@ -795,6 +798,7 @@
element,
{
id: element.getAttribute('data-id'),
url: element.getAttribute('data-url'),
type: dataTypeMap[element.getAttribute('data-type')]
}
);
Expand Down

0 comments on commit 546f199

Please sign in to comment.