Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/iet-reports-widget.html

Created December 14, 2017 23:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/17509d72b6a9c979bb028d1744a2f05b to your computer and use it in GitHub Desktop.
Save nfreear/17509d72b6a9c979bb028d1744a2f05b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
iet-reports-widget.html
<!doctype html> <title> *Innovating Pedagogy test </title>
<style>
body { font: 1rem Ubuntu,"Helvetica neue",Arial,sans-serif; }
.iet-reports-js {
font-size: 1.05rem;
}
.iet-reports-js li {
line-height: 1.6;
margin-top: .5em;
}
.iet-reports-js li a i {
display: block;
font-style: normal;
}
.iet-reports-js a img {
border: 1px solid #eee;
}
.iet-reports-js a:hover img {
border-color: darkorange;
}
</style>
<h1> Innovating Pedagogy test </h1>
<div
id="iet-reports"
data-iet-reports='{ "template": "#iet-files-tpl", "json_url": "https://iet.open.ac.uk/file/index.json" }'
></div>
<script id="iet-files-tpl" type="text/x_html_tpl" title=" Template. ">
<h3><a href="<%= data.home_url %>">Innovating Pedagogy Reports</a></h3>
<ul>
<% _.each(files, function (it, key, list) { %>
<li class="y<%= it.year %>" lang="<%= it.lang %>">
<a href="<%= data.base_url %><%= it.file_name %>"
title="<%= it.pages %> pages / ISBN: <%= it.isbn %> / <%= it.file_size %>">
<i><%= it.title %></i>
<img src="https://iet.open.ac.uk/storage/reports/ip-<%= it.year %>-large.png" alt="" />
</a>
</li>
<% }); %>
</ul>
</script>
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/underscore@1.8.3/underscore-min.js"></script>
<script>
(function (W, $, _) {
// var index_url = 'https://iet.open.ac.uk/file/index.json';
// var image_url = 'https://iet.open.ac.uk/storage/reports/ip-<%= year %>-large.png';
$(function ($) {
var $reports = $('#iet-reports');
var $conf = $('div[ data-iet-reports ]');
var config = $conf.data('ietReports');
var $tpl = $(config.template);
var tpl = _.template($tpl.text());
$.getJSON(config.json_url).done(function (data) {
console.warn('iet-reports JSON:', data);
var html = tpl({ files: data.files, data: data });
$reports.html(html);
});
$reports.addClass('iet-reports-js');
});
})(window, window.jQuery, window._);
</script>
<pre>
© Nick Freear © The Open University, 10-dec-2017, 14-December-2017.
* https://iet.open.ac.uk/file/index.json
* index.json ~ https://gist.github.com/nfreear/c89bccf0228c9449df4365b2014822c5
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment