-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathcollaborative-libraries.html
205 lines (177 loc) · 8.22 KB
/
collaborative-libraries.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<link rel="shortcut icon" href="http://lorainefurter.net/shared-library/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="http://lorainefurter.net/shared-library/favicon.ico" type="image/x-icon"/>
<!-- GENERAL METADATA: -->
<meta charset="utf-8" />
<!-- character encoding -->
<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 and collective reading space"/>
<!-- 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="Online Reading Group"/>
<meta name="DC.contributor" content="Loraine Furter"/>
<!-- person/organization responsible for making contributions to the content of the resource -->
<meta name="DC.creator" content="Loraine Furter" />
<!-- 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 and collective reading space"/>
<meta name="DC.date" scheme="W3CDTF" content="2015-08-31"/>
<!-- 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://lorainefurter.net/shared-library/"/>
<meta property="og:title" content="Online Reading Group"/>
<meta property="og:image" content="http://lorainefurter.net/shared-library/shared-library.png"/>
<!-- generic image: the best is 1200 x 630px for big images, or 100px by 100px -->
<meta property="og:site_name" content="Online Reading Group"/>
<meta property="og:description" content="a collaborative library and collective reading space"/>
<meta property="og:type" content="webPage" />
<title>Collaborative libraries</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}} {{#if data.itemType.note}} independent-note {{/if}}">
<!-- # is used to only output the data if they exist -->
<div class="item-type">{{#if data.parentItem}} ⤵ ATTACHED-<br />{{/if}}{{{ data.itemType }}}</div>
<div class="item-reference"><em>{{ data.title }}</em>{{#if data.creators}}{{#each data.creators}}, {{ firstName }} {{ lastName }}{{/each}}{{/if}}{{#if data.publisher}}, {{ data.publisher }}{{/if}}{{#if data.date}}, {{ data.date }}{{/if}}</div>
<div class="item-tags">{{#if data.tags}}Tags:<br />{{#each data.tags}}<p>{{ tag }}</p>{{/each}}{{/if}}</div>
<div class="item-abstract">
{{#if data.abstractNote}}<p>Abstract: {{ data.abstractNote }}</p>{{/if}}
<p>{{{ data.note }}}</p>
</div>
<div class="item-link">
{{#if data.url}}<p>Link: <a href="{{ data.url }}" target="_blank">{{ data.url }}</a></p>{{/if}}
</div>
<div class="card-hole">❍</div>
</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);
/* TO ADD A TITLE WHEN THERE IS NO TITLE
(but it doesn’t change the way it is ordered…)
var processData = function(inData) {
var outData = [];
for (var i=0; i < inData.length; i++) {
item = inData[i];
// do things with item
if (!item.data.title) {
item.data.title = "Here is a title!"
}
outData.push(item);
}
return outData;
}
*/
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/384780/collections/UU43UB5I/items?key=1L6PZcpcAGt60UArycW14g7v&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">Online<br />Reading<br />Group</a></h1>
<h2>Collaborative libraries</h2>
<div id="items-container">
</div>
<!-- TEST OFFLINE
<div class="one-item">
<div class="item-type">note</div>
<div class="item-reference"><em>_</em></div>
<div class="item-tags">tag1</div>
<div class="item-abstract"><p>Abstract: </p>
<p>An independent note.
This is the content of the note blabla bla…</p>
</div>
<div class="card-hole">●</div>
</div>
<div class="one-item">
<div class="item-type">book</div>
<div class="item-reference"><em>A Book Title</em>, First Name Last Name, Publisher, 2015</div>
<div class="item-tags"><p>tag1</p><p>tag2</p></div>
<div class="item-abstract"><p>Abstract: </p>
<p> (?)</p>
</div>
<div class="card-hole">●</div>
</div>
<div class="one-item attached-note">
<div class="item-type">note</div>
<div class="item-reference"><em>_</em></div>
<div class="item-tags">tag1</div>
<div class="item-abstract"><p>Abstract: </p>
<p>A note linked to the computer program item.
The content blablabla…</p>
<p>A note linked to the computer program item.
The content blablabla…</p>
<p>A note linked to the computer program item.
The content blablabla…</p>
<p>A note linked to the computer program item.
The content blablabla…</p>
</div>
<div class="card-hole">●</div>
</div>
-->
</div>