JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/marc-portier/uri-templates/master/src/main/js/uritemplates.js"></script>
CSS
div{
margin: 10px;
font-family: monospace;
}
JavaScript
$.dtime = {
home: null, // Loaded endpoint home data
endpoint: "https://dev-api.dtime.com/",
// Use jquery promise to make sure api is only fetched once,
// and all calls relying on api are delayed until ready.
ready: function(callback){
this.load_dtime().done(callback);
},
load_dtime: function(rel) {
if (this.home !== null) {
return $.when(this.home);
}
else {
this.home = $.ajax({
url: $.dtime.endpoint,
success: function(home_data){ $.dtime.home = home_data; }
});
return this.home;
}
},
find_link: function(rel) {
var link;
for (link in this.home._links) {
if (link == rel) {
return this.home._links[rel];
}
}
},
find_href: function (rel,tmpl) {
var link, template;
link = this.find_link(rel);
template = uritemplate(link["href"]);
return template.expand(tmpl);
}
}
$.dtime.ready(function(data) {
// One without a template
$('body').append("<div> Link is: " + JSON.stringify($.dtime.find_link("dtime:current_user")) + "</div>");
$('body').append("<div> Href is: " + $.dtime.find_href("dtime:current_user", {
user_id: 'abc'
}) + "</div>");
// One with a template
$('body').append("<div> Link is: " + JSON.stringify($.dtime.find_link("dtime:user")) + "</div>");
$('body').append("<div> Link is is: " + $.dtime.find_href("dtime:user", {
user_id: 'abc'
}) + "</div>");
// Example google ajax image search
var img = $('<img>');
$.getJSON($.dtime.find_href("dtime:search:images:google-callback", {query: 'banana'}), function(gdata){
img.attr('src', gdata.items[0].image.thumbnailLink);
$('body').append(img);
});
// Example user search
$.ajax({
url: $.dtime.find_href("dtime:search:soulmate", {term: 'thera', "types[]":...