$('#basicExampleBtn').click(function(){
$.terms({
data: [
{
title: "We Use Cookies To Enhance Your Experience",
desc: "Put some text here indicating why cookies are very very important",
cat: "cookies"
},
/*repeat for each term*/
],
full: 'http://example.com/terms',
audio: false
}, function () {
$('#basicExampleSuccess').show();
$('#basicExampleError').hide();
}, function () {
$('#basicExampleError').show();
$('#basicExampleSuccess').hide();
});
});
$('#ajaxExampleBtn').click(function(){
$.terms({
data: 'tos.json',
full: 'http://example.com/terms',
audio: false
}, function () {
$('#ajaxExampleSuccess').show();
$('#ajaxExampleError').hide();
}, function () {
$('#ajaxExampleError').show();
$('#ajaxExampleSuccess').hide();
});
});
tos.json
[
{
title: "We Use Cookies To Enhance Your Experience",
desc: "I really like to eat pie!",
cat: "cookies"
},
{
title: "We May Feed You Pizza",
desc: "I really like to eat pie!",
cat: "privacy"
}
]
Terms.JS supports two different dictation API's out of the box - one by TTS-API.COM (free) and one by VoiceRSS (powered by Mashape API, free up to 350 words/day)
To have Terms.JS dictate the terms, simply click the play button next to "Cancel"
VoiceRSS (Mashape API) requires a Mashape API Key and a VoiceRSS API Key
$('#dictationTTSBtn, #dictationRSSBtn').click(function(){
var service = 'free';
if($(this).attr('id') == 'dictationRSSBtn'){
service = 'voicerrs';
}
$.terms({
data: [
{
title: "We Use Cookies To Enhance Your Experience",
desc: "Put some text here indicating why cookies are very very important",
cat: "cookies"
},
/*repeat for each term*/
],
full: 'http://example.com/terms',
audio: service //free or path to 'voicerss.php'
}, function () {}, function () {});
});
voicerss.php
Terms.JS can draw definitions from Glosbe or Wikipedia when a user selects a snippet of text in the expanded term descriptors.
$('#dictionaryExampleBtn').click(function(){
$.terms({
data: [
{
title: "We Use Cookies To Enhance Your Experience",
desc: "Put some text here indicating why cookies are very very important",
cat: "cookies"
},
/*repeat for each term*/
],
full: 'http://example.com/terms',
audio: false,
define: 'glosbe'
}, function () {
$('#dictionaryExampleSuccess').show();
$('#dictionaryExampleError').hide();
}, function () {
$('#dictionaryExampleError').show();
$('#dictionaryExampleSuccess').hide();
});
});
Terms.JS can draw translations from Yandex.Translate (free API up to 1 million chars/day)
Requires Yandex API Key
$('#translateExampleBtn').click(function(){
$.terms({
data: [
{
title: "We Use Cookies To Enhance Your Experience",
desc: "Put some text here indicating why cookies are very very important",
cat: "cookies"
},
/*repeat for each term*/
],
full: 'http://example.com/terms',
audio: false,
yandexKey: 'API_KEY_HERE'
}, function () {
$('#translateExampleSuccess').show();
$('#translateExampleError').hide();
}, function () {
$('#translateExampleError').show();
$('#translateExampleSuccess').hide();
});
});
Terms.JS can be themed by either Twitter Bootstrap or Semantic UI
$('#bootstrapExampleBtn').click(function(){
$.terms({
data: [
{
title: "We Use Cookies To Enhance Your Experience",
desc: "Put some text here indicating why cookies are very very important",
cat: "cookies"
},
/*repeat for each term*/
],
full: 'http://example.com/terms',
audio: false,
theme: 'bootstrap'
}, function () {}, function () {});
});
$('#semanticExampleBtn').click(function(){
$.terms({
data: [
{
title: "We Use Cookies To Enhance Your Experience",
desc: "Put some text here indicating why cookies are very very important",
cat: "cookies"
},
/*repeat for each term*/
],
full: 'http://example.com/terms',
audio: false,
theme: 'semantic'
}, function () {}, function () {});
});
Terms.JS depends on jQuery and FontAwesome to work. Please make sure that you include jQuery and FontAwesome before terms.core.jquery.min.js
Include jquery.min.js, font-awesome.min.css, terms.jquery.min.css, and terms.core.jquery.min.js
Include any theme files after terms.core.jquery.min.js in your head.
Call Terms.JS with $.terms(options);
Required elements are in blue
As Array
An Array of Term Objects.
Term Object (required keys highlighted)
{
title: "Term Title", //title of term
desc: "Description", //optional term description
cat: "rights"
//category of term (see options.types), defaults to "misc"
}
Full Example
//...
data: [
{
title: "Term 1",
},
{
title: "Term 2",
desc: "Term 2 is Awesome"
},
{
title: "Term 3",
desc: "This term relates to privacy!"
cat: "privacy"
}
],
//...
As String
Uri to json resource that will be loaded with jQuery.ajax()
Full Example
//...
data: 'myAjaxHandler.php',
//...
As Object
An Object of different Term Categories (used by the cat property in options.data).
Type Subobject Format (all properties mandatory)
//...
typeName: {
color: '#F29830', //Background Color
class: 'fa fa-cloud fa-fw', //Icon Class
text: '#FFF' //Text Color
},
//...
Default Value
//...
types: {
cookies: {
color: '#F29830', //orange
class: 'fa fa-cloud fa-fw',
text: '#FFF'
},
rights: {
color: '#D63636', //red
class: 'fa fa-flag fa-fw',
text: '#FFF'
},
monetary: {
color: '#CDD618', //yellow
class: 'fa fa-usd fa-fw',
text: '#FFF'
},
misc: {
color: '#A6A6A6', //grey
class: 'fa fa-info fa-fw',
text: '#FFF'
},
privacy: {
color: '#25B33B', //green
class: 'fa fa-lock fa-fw',
text: '#FFF'
},
law: {
color: '#2686D4', //blue
class: 'fa fa-university fa-fw',
text: '#FFF'
}
},
//...
As String
Title of Terms Modal
Default Value
//...
title: 'Do You Accept Our Terms?',
//...
As String
Requires CSS Prefix (in CSS/LESS files) to Reflect Value
Prefix for classes used by Terms.JS
Default Value
//...
prefix: 'terms',
//...
As Integer
Requires CSS Transition Length (specified in CSS/LESS) to Reflect Value
Animation Timeout (in milliseconds) used by Terms.JS
Default Value
//...
animLen: 500,
//...
As String
May be required by law in some jurisdictions
Url to full Terms of Service
Example
//...
full: 'http://example.com/terms',
//...
As String
Not fully compatible with Mobile yet
Enable or disable definitions from Glosbe API or Wikipedia on selected text
Default Value
//...
define: 'glosbe',
//...
As String
Language of Terms
Supported Language Codes
See options.langs
Default Value
//...
lang: 'en',
//...
As Array
List of available Language Codes
Default Value
//...
langs: [
{
code: 'en',
name: 'English',
voiceCode: 'us' //localization used by Mashape (VoiceRSS) API
},{
code: 'fr',
name: 'Français',
voiceCode: 'fr'
},{
code: 'it',
name: 'Italiano',
voiceCode: 'it'
},{
code: 'de',
name: 'Deutsch',
voiceCode: 'de'
},{
code: 'es',
name: 'Español',
voiceCode: 'es'
},{
code: 'ru',
name: 'Pусский',
voiceCode: 'ru'
}
],
//...
As String
Theme of Terms Modal
Default Value
//...
theme: 'default',
//...
Semantic UI
Requires terms.semantic.jquery.min.js
//...
theme: 'semantic',
//...
Bootstrap
Requires terms.bootstrap.jquery.min.js
//...
theme: 'bootstrap',
//...
As String
Yandex Translation API Key
Obtaining an API Key
Please see http://api.yandex.com/translate/
Example
//...
yandexKey: '123456789ABCDEFGH',
//...
As String
Not fully compatible with Mobile yet
TTS Service for Terms Modal
No TTS
//...
audio: false,
//...
Free TTS
Provided by TTS-API.COM API
//...
audio: 'free',
//...
Voice RSS (Mashape API) TTS
Please see https://www.mashape.com/voicerss to obtain a Mashape API Key and VoiceRSS API Key
//...
audio: 'path/to/audioProvider',
//...
Sample PHP Audio Provider
<?php
$mashape_key = 'MASHSHAPE_KEY_HERE';
$voicerrs_key = 'VOICE_RSS_KEY_HERE';
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$headers = array('X-Mashape-Key: '.$mashape_key);
curl_setopt($ch, CURLOPT_URL, 'https://voicerss-text-to-speech.p.mashape.com/?key='.$voicerrs_key.'&c=mp3&f=8khz_8bit_mono&hl='.$_GET['lang'].'&r=0&src='.urlencode($_GET['text'])); # URL to post to
header("Content-Type: audio/mpeg");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 1);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
echo curl_exec( $ch );
var_dump($header);
curl_close($ch);
?>
Default Value
//...
audio: 'free',
//...
You must create a function with the following properties:
function myTheme(settings){ //settingsObject
this.modal; //completel modal Object
this.title; //modal title
this.footer; //modal footer
this.body; //modal body
this.translate; //modal translation select menu
this.loader; //modal loading indicator
this.agreeBtn; //agree button
this.rejectBtn; //reject (cancel) button
this.playBtn; //play audio button
this.notice; //translation provided by Yandex Notice
this.render = function(data){
//given 'data', render terms in modal body
}
this.modal.appendTo('body'); //append the modal to body
this.in = function(){
//in animation
};
this.out = function(){
//out animation, then remove modal from DOM
};
});
Then add it using:
$.terms('addTheme', 'themeName', myTheme);
Bootstrap Example
var bootstrapTheme = function(settings){
this.modal = $('');
this.title = this.modal.find('.modal-title');
this.footer = this.modal.find('.modal-footer');
this.body = this.modal.find('.body');
this.translate = $('');
this.loader = this.modal.find('.'+settings.prefix+'-loader');
this.loader.hide();
this.agreeBtn = $('');
this.rejectBtn = $('');
this.playBtn = $('');
this.notice = $('Powered by Yandex.Translate');
this.footer.append(this.playBtn).append(this.rejectBtn).append(this.agreeBtn);
var parent = this;
this.render = function(data){
parent.body.html('');
if($.isArray(data)){
var wrapper = $('');
var i = 0;
$.each(data, function(idx, val){
if(!(val.cat in settings.types)){
val.cat = 'misc';
}
var entry = $(' '+val.title+'');
wrapper.append(entry);
if('desc' in val){
entry.find('.panel-title').append('').wrapInner('');
entry.append(''+val.desc+'
');
}
i++;
});
parent.body.append(wrapper);
wrapper.collapse();
}
}
this.modal.appendTo('body');
this.in = function(){
this.modal.modal('show').on('shown.bs.modal', function (e) {
parent.agreeBtn.focus();
});
};
this.out = function(){
this.modal.modal('hide').on('hidden.bs.modal', function (e) {
parent.modal.remove();
});
};
});
$.terms('addTheme', 'bootstrap', bootstrapTheme);