forked from TIBHannover/collaborative-libraries
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdiscourse-room.html
142 lines (123 loc) · 6.08 KB
/
discourse-room.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<!-- GENERAL METADATA: -->
<meta charset="utf-8" />
<!-- character encoding -->
<meta name="title" content="Discourse Room"/>
<meta name="keywords" content="collaborative, library, libraries"/>
<!-- keywords for search engines: each keyword separated by a comma (~10 is a good number) -->
<meta name="description" content="a collaborative library"/>
<!-- description of the web page -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- specifies a version of Internet Explorer -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- responsive -->
<!-- DUBLIN CORE: -->
<meta name="DC.title" content="Discourse Room"/>
<meta name="DC.contributor" content="Loraine Furter, Simon Worthington, Open Science Lab (OSL), TIB, HPG"/>
<!-- person/organization responsible for making contributions to the content of the resource -->
<meta name="DC.creator" content="Simon Worthington" />
<!-- person/organization responsible for making the content of the resource -->
<meta name="DC.publisher" content=""/>
<!-- person/organization responsible for making the resource available -->
<meta name="DC.subject" content="collaborative, library, libraries">
<!-- comma separated (can be more than the keywords) -->
<meta name="DC.description.abstract" content="a collaborative library"/>
<meta name="DC.date" scheme="W3CDTF" content="2017-12-19"/>
<!-- date of creation or availability of the resource: yyyy-mm-dd -->
<meta name="DC.type" content="webPage"/>
<!-- = book / blogPost / artwork / bookSection / audioRecording / presentation (cf Zotero’s types) -->
<meta name="DC.format" content="text/html"/>
<meta name="DC.identifier" content=""/>
<!-- for instance: URL / URI / DOI (Digital Object Identifier) / ISBN / ISSN / … -->
<meta name="DC.identifier.URL" content="http://url.net"/>
<meta name="DC.language" content="eng"/>
<!-- RFC3066 + ISO 639-3 language standard: http://en.wikipedia.org/wiki/ISO_639:a -->
<meta name="DC.source" content="http://url.net/">
<!-- link to a resource from which the present resource is derived -->
<meta name="DC.relation" content=""/>
<!-- reference to a related resource (using its identifier) -->
<meta name="DC.rights" content=""/>
<meta name="DC.bibliographicCitation" content="use a Chicago Manual of Style citation"/> <!-- doesn’t need editing -->
<!-- FACEBOOK: -->
<meta property="og:url" content="http://url.net/"/>
<meta property="og:title" content="Collaborative Library"/>
<meta property="og:image" content="shared-library.png"/>
<!-- generic image: the best is 1200 x 630px for big images, or 100px by 100px -->
<meta property="og:site_name" content="Collaborative Library"/>
<meta property="og:description" content="a collaborative library"/>
<meta property="og:type" content="webPage" />
<title>Reading Room</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/webfont.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/handlebars-1.0.rc.1.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<!-- it takes the list that is called items in the JSON response (data) (to access it go to the url api.zotero.org/… bleow) and puts them in the template -->
<script id="entry-template" type="text/x-handlebars-template">
{{#each items}}
<div class="one-item {{#if data.parentItem}} attached-note {{/if}}">
<!-- ONLY DISPLAYS NOTES & TAGS -->
{{#if data.note}}
<div class="text-bloc">{{{ data.note }}}</div>{{/if}}
{{#if data.tags}}<p>
{{#each data.tags}} <span class="tag">{{ tag }}</span> {{/each}}</p>
{{/if}}
</div>
{{/each}}
</script>
<script>
$(function() {
/* takes the entry-template element */
var source = $("#entry-template").html();
/* the jquery library Handelbars converts the template text into a template object*/
var template = Handlebars.compile(source);
var processData = function(inData) {
var obj = {}
for (var i=0; i < inData.length; i++) {
item = inData[i];
// do things with item
// create a new way of ordering things, easier to use
// (not as a list like before but as an ‘object’ ~ dictionnary)
obj[item.data.key] = item;
}
//TO ORDER THINGS IN A SPECIFIC WAY
var getSortString = function(item) {
if (!item.data.title) {
if (item.data.parentItem) {
return obj[item.data.parentItem].data.title + item.data.note;
} else {
return item.data.note;
}
}
return item.data.title;
}
//takes everytime two objects of the array and compares them
inData.sort(function(a, b) {
a = getSortString(a);
b = getSortString(b);
if (a === b) return 0;
if (a < b) return -1;
if (a > b) return 1;
});
return inData;
}
/* gets the collection from zotero */
$.getJSON('https://api.zotero.org/groups/1838445/collections/BHE6RI6Z/items?key=mS6PZZUo4xiNPM0tQ0ars7sD&limit=100&sort=title', function(incomingData) {
/* if the query succeeds, the response will be available as the variable “data”: */
/* this variable is sent to the template above */
var processedData = processData(incomingData);
$("#items-container").html(template({ items: processedData }));
});
});
</script>
<div class="container">
<h1><a href="index.html">Collaborative<br />Library<br />Prototyping</a></h1>
<h2>SOCIAL READING ROOM</h2>
<div class="text-welcome">
<p>Notes from people in the Collaborative Libraries collection (AKA Reading Room) on their readings and media use…</p>
</div>
<div id="items-container">
</div>
<p style="text-align: center; margin-top: 600px; padding-top: 30px;"><a href="https://www.zotero.org/groups/1838445" target="_blank">join (through the Zotero group)</a></p>