Joind.in welcomes all contributors regardless of your ability or experience. We especially welcome you if you are new to Open Source development and will provide a helping hand. To ensure that everyone understands what we expect from our community, our projects have a Contributor Code of Conduct and by participating in the development of joind.in you agree to abide by its terms.
JoindIn.js has been tested on the following browsers: Internet Explorer 9+, Chrome, Opera, Firefox, and Safari.
The library follows the UMD (Universal Module Definition) pattern to work seamlessly with module systems such as AMD and CommonJS, and the browser.
A live demo is available here.
You can install JoindIn.js by using npm:
npm install joindin-js
Alternatively, you can install it via Bower:
bower install joindin-js
The last options you have to download the library are to clone the repository and copy the files contained in the
dist folder into your project and to manually download the files.
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. The DOM elements you create must use
joindin-embed and define two
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;
data-type: the type of the element to embed. This attribute is required for all the widgets;
data-theme: specify the theme of the widget between the themes available. This attribute is optional.
An example of element that meets these requirements is the following:
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:
If the library has been downloaded with Bower, you can include it as shown below:
For those that obtained the library via npm, how you include it depends on the module system in use, if any.
var JoindIn = ;// Call JoindIn methods
No module system
JoindIn.js provides the methods described in the following sections.
init() method parses the DOM to find all the elements of the type described in the Usage section and
transform them into the relevant widget.
The library supports the following elements:
- Speaker (
- Talk (
- Comment (
- Event (
- Call for papers (
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, you have to add the following element to your page:
Embedding a talk
To embed my talk "Modern front-end with the eyes of a PHP developer", you have to add the following element to your page:
If you want to embed the same talk using one of the themes available, for example Shark, you have to add the following element to your page:
Embedding a comment of a talk
To embed a specific comment published on the same talk, you have to add the following element instead:
Note that in this case the ID refers to the comment, not the talk.
Embedding an event
To embed the jsDay 2015 event, you have to add the following element to your page:
Embedding the call for papers
To embed the currently open call for papers, you have to add the following element to your page:
If you want to embed the same talk using one of the themes available, for example Picton, you have to add the following element to your page:
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, 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" is 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
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, so the ID is 3094.
The call for papers widget doesn't require any ID.
The library provides the following themes:
- Grain (
- Picton (
- Shark (
To see them in action, take a look at the demo.
JoindIn.js is dual licensed under MIT and GPL-3.0