Commit 18effe7e authored by Kjetil Thuen's avatar Kjetil Thuen

Initial commit

parents
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ScrollMagnifyer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
body {
margin: 2em;
font-size: 150%;
background: #eee;
}
ul#studies_list li:first-child {
margin-top: 50%;
}
ul#studies_list {
width: 80%;
margin: auto;
}
ul#studies_list li:last-child {
margin-bottom: 50%;
}
ul#studies_list li {
color: #888;
max-height: 190px;
overflow: hidden;
text-align: center;
}
ul#studies_list li div.abstract {
display: none;
}
ul#studies_list li.selected {
color: black;
}
#targetwrapper {
position: fixed;
top: 30%;
height: 40%;
left: 12.5%;
width: 75%;
}
#target {
z-index: -2;
border: 1px solid black;
height: 1em;
position: relative;
border-radius: 5px;
}
#expansionzone {
display: none;
border: 1px solid black;
position: relative;
max-height: 70%;
box-shadow: 5px 5px 5px rgba(100,100,100,0.8);
border-radius:25px;
background: rgba(255,255,255,0.8);
padding: 1em;
}
#expansionzone h2 {
text-align: center;
}
#expansionzone div.metadata div.abstract {
max-height: 4em;
margin-bottom: 0.5em;
overflow: hidden;
}
</style>
<script id="study_list" type="text/x-handlebars-template">
<ul class="nav nav-list" id="studies_list">
{{#each studies}}
<li id="{{id}}">
<h2>{{name}}</h2>
<div class="abstract">{{abstractText}}</div>
</li>
{{/each}}
</ul>
</script>
<script>
var horizontalCenter = Math.floor(window.innerWidth/2);
var centerOfHeadline = 0;
var scrollTimeout;
var focusedElement;
var build_list = function(data) {
var source = $("#study_list").html();
var template = Handlebars.compile(source);
var listhtml = template(data);
$("#content").html(listhtml);
}
var load_data = function() {
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
$.ajax({
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
datatype: "json",
async: true,
context: document.body
}).done(function(data) {
build_list(data);
});
}
var show_expanded_info = function() {
var listElem = $(focusedElement).closest('li');
if (listElem.is("LI")) {
var listElemTop = listElem.offset().top;
var scrollVal = listElemTop - centerOfHeadline + ($('#target').height() / 4);
$(document).scroll(function() {return false;});
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function () {
$(document).scroll(set_selected_element);
$('#target').height(listElem.height());
listElem.addClass('selected');
details = listElem.find("div.abstract").html();
if (details != null) {
$('#expansionzone div.abstract').html(details);
$('#expansionzone').fadeIn();
}
});
}
}
var set_selected_element = function () {
$('#expansionzone').fadeOut();
$('ul#studies_list li').removeClass("selected");
$('#targetwrapper').hide();
focusedElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
if (focusedElement) {
window.clearTimeout(scrollTimeout);
scrollTimeout = window.setTimeout(show_expanded_info, 500);
} else {
$('#expansionzone').hide();
}
$('#targetwrapper').show();
}
</script>
</head>
<body>
<div id="content">
</div>
<div id="targetwrapper">
<h2 id="target"></h2>
<div id="expansionzone">
<div class="metadata">
<div class="abstract lead"></div>
<button class="btn btn-primary">Velg studie</button>
<button class="btn btn-primary">Mer metadata</button>
</div>
</div>
</div>
<script>
$('#expansionzone').fadeOut();
load_data();
$(document).scroll(set_selected_element);
</script>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment