Commit 4e4fa53a authored by Kjetil Thuen's avatar Kjetil Thuen

Making ListEntryInfo separate project

parent 6490a268
.*.swp
*_template.js
tags
build
node_modules
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ListEntryInfo Plugin Demo</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="studylist.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
<script>
head.js("studylist.js");
</script>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>Data fra Skolenesstar</h1>
Finn interresante studier i listen under.
</div>
<p>
franchise bridge cyber- nodality beef noodles tank-traps into systema city
uplink papier-mache soul-delay savant Tokyo courier uplink. vinyl car construct
urban dead camera drugs bicycle rain physical dead narrative neural concrete
-ware bridge. fluidity knife RAF alcohol -space otaku drugs San Francisco
military-grade wristwatch carbon warehouse warehouse ablative woman artisanal.
j-pop Chiba San Francisco cyber- cartel sunglasses film pistol sub-orbital
corrupted bridge rebar post- refrigerator drugs numinous. advert concrete
footage ablative futurity receding systemic table kanji sentient denim dolphin
augmented reality geodesic into pre-.
</p>
<p>
drugs garage neural knife singularity 3D-printed military-grade post-
Tokyo crypto- A.I. girl hacker sprawl chrome faded. saturation point
3D-printed vinyl knife claymore mine euro-pop military-grade soul-delay
cyber- euro-pop assault silent nodal point chrome physical stimulate.
garage render-farm numinous market vinyl sunglasses sentient beef noodles
table skyscraper BASE jump refrigerator augmented reality human Chiba
tank-traps. office wristwatch systemic pen tattoo marketing Tokyo DIY
-ware systema range-rover carbon urban grenade neon fluidity. digital
monofilament Legba beef noodles fetishism physical math- sentient modem
euro-pop man shrine rifle katana nodality futurity.
</p>
<p>
geodesic Chiba stimulate bomb nano- wonton soup pen paranoid spook hacker
courier hotdog wonton soup network assassin papier-mache. hacker decay
fetishism claymore mine plastic meta- film systemic film bomb otaku
3D-printed rifle assault claymore mine j-pop. knife katana rebar gang
apophenia savant weathered range-rover pre- neural artisanal bicycle
crypto- carbon carbon fetishism. sub-orbital engine shanty town tattoo
construct 8-bit plastic spook film denim shoes jeans engine refrigerator
dome shanty town. city denim refrigerator sensory A.I. realism A.I. film
dolphin cartel katana voodoo god narrative ablative beef noodles human.
</p>
<p>
narrative receding rain physical 8-bit refrigerator augmented reality
warehouse shoes lights franchise market cyber- rain dolphin -space.
vehicle tube systemic futurity urban wonton soup digital advert hacker
RAF long-chain hydrocarbons dome boat knife jeans tube. realism tattoo
market receding otaku human girl geodesic pen stimulate franchise lights
table warehouse girl corporation. lights augmented reality pre-
range-rover futurity long-chain hydrocarbons systemic warehouse Chiba
city sunglasses warehouse into warehouse drone soul-delay. hotdog knife
BASE jump motion semiotics corrupted denim post- stimulate bridge
cardboard fetishism vehicle voodoo god cardboard monofilament.
</p>
<div id="content"></div>
<p>
franchise bridge cyber- nodality beef noodles tank-traps into systema city
uplink papier-mache soul-delay savant Tokyo courier uplink. vinyl car construct
urban dead camera drugs bicycle rain physical dead narrative neural concrete
-ware bridge. fluidity knife RAF alcohol -space otaku drugs San Francisco
military-grade wristwatch carbon warehouse warehouse ablative woman artisanal.
j-pop Chiba San Francisco cyber- cartel sunglasses film pistol sub-orbital
corrupted bridge rebar post- refrigerator drugs numinous. advert concrete
footage ablative futurity receding systemic table kanji sentient denim dolphin
augmented reality geodesic into pre-.
</p>
<p>
drugs garage neural knife singularity 3D-printed military-grade post-
Tokyo crypto- A.I. girl hacker sprawl chrome faded. saturation point
3D-printed vinyl knife claymore mine euro-pop military-grade soul-delay
cyber- euro-pop assault silent nodal point chrome physical stimulate.
garage render-farm numinous market vinyl sunglasses sentient beef noodles
table skyscraper BASE jump refrigerator augmented reality human Chiba
tank-traps. office wristwatch systemic pen tattoo marketing Tokyo DIY
-ware systema range-rover carbon urban grenade neon fluidity. digital
monofilament Legba beef noodles fetishism physical math- sentient modem
euro-pop man shrine rifle katana nodality futurity.
</p>
<p>
geodesic Chiba stimulate bomb nano- wonton soup pen paranoid spook hacker
courier hotdog wonton soup network assassin papier-mache. hacker decay
fetishism claymore mine plastic meta- film systemic film bomb otaku
3D-printed rifle assault claymore mine j-pop. knife katana rebar gang
apophenia savant weathered range-rover pre- neural artisanal bicycle
crypto- carbon carbon fetishism. sub-orbital engine shanty town tattoo
construct 8-bit plastic spook film denim shoes jeans engine refrigerator
dome shanty town. city denim refrigerator sensory A.I. realism A.I. film
dolphin cartel katana voodoo god narrative ablative beef noodles human.
</p>
<p>
narrative receding rain physical 8-bit refrigerator augmented reality
warehouse shoes lights franchise market cyber- rain dolphin -space.
vehicle tube systemic futurity urban wonton soup digital advert hacker
RAF long-chain hydrocarbons dome boat knife jeans tube. realism tattoo
market receding otaku human girl geodesic pen stimulate franchise lights
table warehouse girl corporation. lights augmented reality pre-
range-rover futurity long-chain hydrocarbons systemic warehouse Chiba
city sunglasses warehouse into warehouse drone soul-delay. hotdog knife
BASE jump motion semiotics corrupted denim post- stimulate bridge
cardboard fetishism vehicle voodoo god cardboard monofilament.
</p>
</div>
</body>
</html>
body {
background-color: #f5f3ec;
color: #5f5a49;
}
.hero-unit {
color: #eee;
background-color: rgba(0,0,0,0.8);
}
ul#studies_list {
width: 80%;
margin: auto;
}
ul#studies_list li {
color: #5f5a49;
overflow: hidden;
border-bottom: 1px solid #5f5a49;
}
#studies_list li div.study_title {
margin: 0px;
padding: 0.5em;
z-index: 3;
}
ul#studies_list li.selected {
color: #eee;
}
#target {
background-color: rgba(0,0,0,0.8);
}
#expander {
background-color: rgba(0,0,0,0.8);
}
#expander button {
margin: 0 0 1em 1em ;
}
div.metadata div.abstract {
max-height: 6em;
margin-bottom: 0.5em;
overflow: hidden;
color: white;
padding: 0em 1em 1em 1em;
}
<ul class="nav nav-list" id="studies_list">
{{#each studies}}
<li id="{{id}}">
<div class="study_title">{{name}}</div>
</li>
{{/each}}
</ul>
head.js("http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js")
.js("http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js")
.js("http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js")
.js("listEntryInfo.js")
//Precompiled handlebars templates. Compile using handlebars util before deploying
.js("studymetadata_template.js")
.js("studylist_template.js", function() {
var jsondata = {};
var build_list = function() {
var template = Handlebars.templates.studylist;
var listhtml = template(jsondata);
$('#content').html(listhtml);
$('#studies_list').listEntryInfo({
selectedClass: "selected",
targetId: "target",
revealDivId: "expander",
extendedInfoFunc: get_metadata
});
};
var load_data = function() {
$.ajax({
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
datatype: "json",
context: document.body
}).done(function(data) {
jsondata = data;
build_list();
}).error(function(jqXHR, exception) {
alert("Loading data failed:\n" + exception);
});
};
var get_metadata = function (id) {
var studyMetadata = jsondata.studies.filter(function(v) {
return v.id === id; // filter out appropriate one
});
var studyMetadataTemplate = Handlebars.templates.studymetadata;
var metadatahtml = studyMetadataTemplate(studyMetadata.length > 0 ? studyMetadata[0] : {});
return metadatahtml;
};
head.ready(function() {
load_data();
});
});
<div class="metadata" id="studymetadata">
<div class="abstract">{{abstractText}}</div>
<div class="buttons">
<button class="btn btn-info"><i class="icon-info-sign"></i> Mer metadata</button>
<button class="btn btn-success"><i class="icon-ok-sign"></i> Velg studie</button>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ListEntryInfo Plugin Demo</title>
<style>
body {
background-color: #f5f3ec;
color: #5f5a49;
}
ul {
width: 80%;
margin: auto;
}
ul li {
color: #5f5a49;
font-size: 20pt;
overflow: hidden;
border-bottom: 1px solid #5f5a49;
}
ul li.selected {
color: #eee;
}
#listPeekTargetArea {
background-color: rgba(0,0,0,1);
}
#listPeakRevealArea {
background-color: rgba(0,0,0,1);
padding: 0em 1em 1em 1em;
color: white;
max-height: 10em !important;
margin-bottom: 0.5em;
overflow: auto;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="src/listEntryInfo.js"></script>
<script>
var philosophers = [
"Abhinavagupta",
"Alan Turing",
"Alexander Bain",
"Adi Shankaracharya",
"Alexius Meinong",
"Amy Kind",
"Andy Clark",
"Ansgar Beckermann",
"Anthony Kenny",
"Aristotle",
"Arnold Geulincx",
"Balthasar Bekker",
"Baruch Spinoza",
"Berit Brogaard",
"Brian J. Mistler",
"Brie Gertler",
"C. D. Broad",
"Celia Green",
"Claude Nowell",
"Colin McGinn",
"Daniel Dennett",
"Daniel N. Robinson",
"David Chalmers",
"David H. M. Brooks",
"Donna Haraway",
"David Hartley (philosopher)",
"David Hume",
"David Kellogg Lewis",
"David Malet Armstrong",
"David Papineau",
"David Sosa",
"Donald Davidson (philosopher)",
"Douglas Hofstadter",
"Edmund Husserl",
"Edward N. Zalta",
"Elizabeth Schechter",
"Emil du Bois-Reymond",
"Ernest Lepore",
"Ernst Tugendhat",
"Frank Cameron Jackson",
"Franz Joseph Gall",
"Fred Dretske",
"Friedrich Hayek",
"Friedrich Kambartel",
"G. E. M. Anscombe",
"Gareth Evans (philosopher)",
"Georg Henrik von Wright",
"George Edward Moore",
"Gerhard Dorn",
"Gilbert Harman",
"Gilbert Ryle",
"Gottfried Leibniz",
"Gregory Bateson",
"Gualtiero Piccinini",
"Hans-Werner Bothe",
"Harry Frankfurt",
"Henri Bergson",
"Hilary Putnam",
"Horace Romano Harré",
"J. J. C. Smart",
"Jaegwon Kim",
"Jerry Fodor",
"Jiddu Krishnamurti",
"John McDowell",
"John Perry (philosopher)",
"John Searle",
"John Wisdom",
"Jurij Moskvitin",
"Karl Popper",
"Kenneth Allen Taylor",
"Louise Antony",
"Ludwig Wittgenstein",
"Martha Klein",
"Mary Warnock, Baroness Warnock",
"Maurice Merleau-Ponty",
"Merab Mamardashvili",
"Michael Tye (philosopher)",
"Ned Block",
"Nicolas Malebranche",
"Noam Chomsky",
"Owen Flanagan",
"Patricia Churchland",
"Paul Boghossian",
"Paul Churchland",
"Paul Ziff",
"Peter Carruthers (philosopher)",
"Peter Hacker",
"Peter Unger",
"Petrus de Ibernia",
"René Descartes",
"Richard Rorty",
"Robert Anton Wilson",
"Robert Brandom",
"Robert Cummins",
"Robert Maximilian de Gaynesford",
"Ron McClamrock",
"Ruth Millikan",
"Samuel Guttenplan",
"Shaun Gallagher (philosopher)",
"Stephen Laurence",
"Stephen Stich",
"Stephen Yablo",
"Steven Lehar",
"Susan Hurley",
"Susanna Schellenberg",
"Susanna Siegel",
"Sydney Shoemaker",
"Tad Schmaltz",
"Thomas Baldwin (philosopher)",
"Thomas Brown (philosopher)",
"Thomas Metzinger",
"Thomas Nagel",
"Þorsteinn Gylfason",
"Timothy Leary",
"Timothy Sprigge",
"Timothy Williamson",
"Tyler Burge",
"Ullin Place",
"Ward Jones",
"Werner Krieglstein",
"Wilfrid Sellars",
"William Hirstein",
"William James",
"White Thomas"
];
var display_philosopher_article = function (name) {
$.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exintro=1&callback=?", {titles:name}, function(data) {
var article;
if (data && data.query && data.query.pages) {
var pages = data.query.pages;
for (var id in pages) {
article = pages[id].extract;
}
} else {
article="<p>No article found on " + name;
// error: No pages returned / other problems!
}
$("#listPeakRevealArea").html(article); console.log(article)});
}
var build_philosopher_list = function () {
var philosopherList = $("#philosopherList");
philosophers.forEach(function (philosopher) {
philosopherList.append("<li id='" + philosopher +"'>" + philosopher + "</li>");
});
}
$(document).ready(function() {
build_philosopher_list();
$('#philosopherList').listEntryInfo({
extendedInfoFunc: display_philosopher_article
});
});
</script>
</head>
<body>
<div class="container">
<h1>ListEntryInfo Demo</h1>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from wikipedia when their list entry
has focus.
</p>
<ul id="philosopherList"></ul>
</div>
</body>
</html>
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bower: {
options: {
//targetDir: './lib'
},
install: {
//Just install the damn thing...
}
},
copy: {
main: {
files: [
{expand: true, cwd: 'src/', src: '*.js', dest: 'build/listentryinfo/'}
]
}
},
jshint: {
// define the files to lint
files: ['src/*.js'],
// configure JSHint (documented at http://www.jshint.com/docs/)
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true
}
}
},
clean: {
build: ['build/*']
}
});
// Load libs
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-bower-task');
grunt.loadNpmTasks('grunt-contrib-clean');
// Tasks
grunt.registerTask('default', ['bower', 'jshint', 'copy']);
grunt.registerTask('build', ['copy']);
grunt.registerTask('install', ['bower']);
//grunt.registerTask('clean', ['clean']);
};
<!DOCTYPE html>
<html>
<head>
<title>Nesstar Touch Testing</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style type="text/css">
.listString:after {
content: ',';
}
.listString:last-child:after {
content: '';
}
.horizontalBar {
background-color: blue;
height: 0.5em;
}
</style>
</head>
<body>
<div class="container">
<div id="nesstarTouchContent"></div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
<script>
head.js(
// External libraries
"http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js",
"http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js",
"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js",
"http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js",
"http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js",
"http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js",
"libraries/i18next-1.6.3.js",
// Our own scripts
"js/common.js",
"js/init.js",
"js/model.js",
"js/templates-loader.js",
"js/metadata-maker.js",
"js/controller.js"
);
</script>
</body>
</html>
\ No newline at end of file
function loadFromRestServer(urlEnding, successFunction) {
var url = Model.restServerURL + "/" + urlEnding;
robustAjax(url, "json", true, successFunction);
}
function getJSON(urlString, successFunction) {
robustAjax(urlString, "json", true, successFunction);
}
function getSyncJSON(urlString) {
return syncAjax(urlString, "json");
}
function syncAjax(urlString, dataType)
{
var result = null;
robustAjax(urlString, dataType, false, function(data) {
result = data;
});
return result;
}
function robustAjax(urlString, dataType, isAsync, successFunction) {
$.ajax({
url: urlString,
datatype: dataType,
async: isAsync,
success: successFunction,
error: function(jqXHR, textStatus, errorThrown) {
console.log("Error from model.js -> getJSON:");
console.log("jqXHR:");
console.log(jqXHR);
console.log("textStatus: " + textStatus);
console.log("errorThrown: " + errorThrown);
console.log("urlString: " + urlString);
}
});
}
function getTranslation(text) {
if (text == null) {
return null;
}
else {
return i18n.t(text);
}
}
\ No newline at end of file
var AppRouter = Backbone.Router.extend({
routes: {
// Actions
"goto/*route" : "goto",
"goBack" : "goBack",
"useVariableAndGoBack/:variableId" : "useVariableAndGoBack",
// Pages
"" : "frontPage",
"studies/*urlObject" : "studies",
"studyMetadata/:studyId/*urlObject" : "studyMetadata",
"variableMetadata/:variableId/*urlObject" : "variableMetadata"
},
// Actions
goto: function(route) {
console.log("goto: " + route);
Model.urlObject.backRoutes.push(route);
appRouter.navigate(route+"/"+getUrlString(), {trigger:true, replace: true});
},
goBack: function() {
console.log("goBack.");
Model.urlObject.backRoutes.pop();
appRouter.goto(Model.urlObject.backRoutes.pop());
},
useVariableAndGoBack: function(variableId) {
console.log("userVariableAndGoBack: " + variableId)
var store = Model.urlObject[Model.urlObject.currentAnalysisType][Model.urlObject.currentVariableStore];
if (store instanceof Array) {
store.push(variableId);
}
else {
Model.urlObject[Model.urlObject.currentAnalysisType][Model.urlObject.currentVariableStore] = variableId;
}
appRouter.goBack();
},
// Pages
frontPage: function() {
console.log("frontPage");
initNewTabulation();
appRouter.goto("studies");
},
studies: function(urlString) {
saveUrlString(urlString);
showStudies();
},
studyMetadata: function(studyId, urlString) {
saveUrlString(urlString);
showStudyMetadata(studyId);
},
variableMetadata: function(variableId, urlString) {
console.log("variableMetadata");
saveUrlString(urlString);
showVariableMetadata(variableId);
}
});
var appRouter = new AppRouter;
Backbone.history.start();
// --------------------------------- //
function getUrlString() {
var jsonString = JSON.stringify(Model.urlObject);
return encodeURIComponent(jsonString);
}
function saveUrlString(urlString) {
if (!Model.urlObjectSaved) {
var urlObject = JSON.parse(urlString);
Model.urlObject = urlObject;
Model.urlObjectSaved = true;
}
}
// --------------------------------- //
function showStudies() {
if (!Model.studies) {
loadFromRestServer("studies", function(data) {
Model.studies = data.studies;
showStudies();
});
}
else {
var html = studiesTemplate(Model);
$('#nesstarTouchContent').empty();
$('#nesstarTouchContent').append(html);
}
}
function showStudyMetadata(studyId) {
loadFromRestServer("study/"+studyId, function(studyMetadata) {
loadFromRestServer("study/"+studyId+"/variables", function(variables) {
var templateObject = {}