reading-room.html

<!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>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/384780/collections/KQNTSI5B/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>READING-ROOM</h2>

<div class="text-welcome">
    <p>Where people can meet and comment on their readings…</p>
</div>

<div id="items-container">

</div>