Skip to content

J
jquery-listentryinfo
Commit 1aa0418f authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files
Options

Split project into multiple files

parent ae7d7b5b
Hide whitespace changes
Inline Side-by-side
Showing with 317 additions and 175 deletions
.index.html.swp 0 → 100644
View file @ 1aa0418f
File added
.utils.js.swp 0 → 100644
View file @ 1aa0418f
File added
index.html
View file @ 1aa0418f
......@@ -2,185 +2,39 @@
<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/jquery/2.0.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="utils.js"></script>
<script src="studylist.js"></script>
<script src="listPeek.js"></script>
<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">
<style>
body {
background-color: #028e9b;
color: #5ec4cd;
}
.hero-unit {
color: #ff7800;
background-color: #5ec4cd;
}
ul#studies_list li:first-child {
}
ul#studies_list {
width: 80%;
margin: auto;
}
ul#studies_list li:last-child {
margin-bottom: 20em;
}
ul#studies_list li {
color: #5ec4cd;
overflow: hidden;
border-bottom: 1px solid #5ec4cd;
}
ul#studies_list li div.abstract {
display: none;
}
ul#studies_list li.selected {
color: #ff7800;
}
#target {
top: 20%;
height: 10%;
width: 100%;
min-height: 1em;
z-index: -2;
position: fixed;
background: #5ec4cd;
}
#expansionzone {
position: fixed;
width: 70%;
left: 15%;
z-index: 2;
display: none;
max-height: 70%;
background: #5ec4cd;
}
h2 {
margin: 0px;
padding: 0.5em;
}
h2#target {
padding: 0px;
}
#expansionzone div.metadata div.abstract {
max-height: 6em;
margin-bottom: 0.5em;
overflow: hidden;
color: white;
padding: 0em 1em 1em 1em;
}
#expansionzone button {
margin: 0 0 1em 1em ;
}
</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>
<link href="listPeek.css" rel="stylesheet">
<script>
var horizontalCenter = Math.floor(window.innerWidth/2);
var centerOfHeadline = 0;
var target_top = 0;
var scrollTimeout;
var jsondata = {};
var scrollVal;
var build_list = function() {
var source = $('#study_list').html();
var template = Handlebars.compile(source);
var jsondata = {};
var build_list = function() {
//TODO: Remember selected element, and scroll there (default to first element).
var template = Handlebars.templates['studylist'];
var listhtml = template(jsondata);
$('#content').html(listhtml);
register_event_handlers();
}
var register_event_handlers = function() {
$(document).scroll(find_and_select_element);
// $(window).on("touchend", set_selected_element);
$('#studies_list li').click(function() {
set_selected_element($(this).get());
});
}
var initialize_page = function() {
target_top = $('#content').position().top;
$('#target').css({top: target_top});
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
}
initialize_list_peek();
};
var load_data = function() {
var load_data = function() {
$.ajax({
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
datatype: "json",
async: true,
context: document.body
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
datatype: "json",
async: true,
context: document.body
}).done(function(data) {
jsondata = data;
build_list();
jsondata = data;
build_list();
});
}
var show_expanded_info = function() {
$(document).scroll(function() {return false;});
var listElem = $('#studies_list li.selected');
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
$('#target').animate({height: listElem.height()}, 'fast', function() {
details = listElem.find("div.abstract").html();
if (details != null) {
$('#expansionzone').css({top: target_top + $('#target').height()});
$('#expansionzone div.abstract').html(details);
$('#expansionzone').slideDown();
$(document).scroll(find_and_select_element);
}
});
});
}
var find_and_select_element = function() {
window.clearTimeout(scrollTimeout);
var focusedElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
set_selected_element(focusedElement);
}
var set_selected_element = function (element) {
window.clearTimeout(scrollTimeout);
$('#expansionzone').fadeOut();
$('ul#studies_list li').removeClass("selected");
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI")) {
listElem.addClass('selected');
scrollVal = listElem.offset().top - $('#studies_list').position().top;
scrollTimeout = window.setTimeout(show_expanded_info, 500);
}
} else {
$('#expansionzone').hide();
}
}
};
</script>
</head>
<body>
......@@ -188,24 +42,20 @@
<h1>Data fra Skolenesstar</h1>
Finn interresante studier i listen under.
</div>
<div id="content">
</div>
<div id="content"></div>
<h2 id="target"></h2>
<div id="expansionzone">
<div id="expander">
<div class="metadata">
<div class="abstract lead"></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>
<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>
</div>
<script>
$('#expansionzone').fadeOut();
initialize_page();
load_data();
$(window).resize(function() {
initialize_page();
build_list();
});
</script>
......
listPeek.css 0 → 100644
View file @ 1aa0418f
body {
background-color: #028e9b;
color: #5ec4cd;
}
.hero-unit {
color: #ff7800;
background-color: #5ec4cd;
}
ul#studies_list li:first-child {
}
ul#studies_list {
width: 80%;
margin: auto;
}
ul#studies_list li:last-child {
margin-bottom: 20em;
}
ul#studies_list li {
color: #5ec4cd;
overflow: hidden;
border-bottom: 1px solid #5ec4cd;
}
ul#studies_list li div.abstract {
display: none;
}
ul#studies_list li.selected {
color: #ff7800;
}
#target {
top: 20%;
height: 10%;
width: 100%;
min-height: 1em;
z-index: -2;
position: fixed;
background: #5ec4cd;
}
#expander {
position: fixed;
width: 70%;
left: 15%;
z-index: 2;
display: none;
max-height: 70%;
background: #5ec4cd;
}
h2 {
margin: 0px;
padding: 0.5em;
}
h2#target {
padding: 0px;
}
#expander div.metadata div.abstract {
max-height: 6em;
margin-bottom: 0.5em;
overflow: hidden;
color: white;
padding: 0em 1em 1em 1em;
}
#expander button {
margin: 0 0 1em 1em ;
}
listPeek.js 0 → 100644
View file @ 1aa0418f
var horizontalCenter = Math.floor(window.innerWidth/2);
var centerOfHeadline = 0;
var focusedListElement;
var target_top = 0;
var scrollVal;
var initialize_list_peek = function() {
target_top = $('#content').position().top;
$('#target').css({top: target_top});
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
set_selected_element($('#studies_list li:first-child').get());
};
var register_event_handlers = function() {
// $(window).on("touchend", set_selected_element);
//document.onscroll = debounce(find_and_select_element, 250, false);
jQuery(window).bind('scrollstart', function(){
console.log("scrollstart");
$('#expander:visible').slideUp();
});
jQuery(window).bind('ontouchmove', function(){
console.log("touchmove");
$('#expander:visible').slideUp();
});
jQuery(window).bind('scrollstop', function(e){
console.log("scrollstop");
find_and_select_element();
});
$('#studies_list li').click(function() {
set_selected_element($(this).get());
});
};
var show_expanded_info = function() {
var listElem = $('#studies_list li.selected');
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
$('#target').animate({height: listElem.height()}, 'fast', function() {
details = listElem.find("div.abstract").html();
if (details !== null) {
$('#expander').css({top: target_top + $('#target').height()});
$('#expander div.abstract').html(details);
$('#expander').slideDown();
}
});
});
};
var find_and_select_element = function() {
console.log("scrolled");
var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
if (newFocusedListElement !== focusedListElement) {
console.log("new elem");
focusedListElement = newFocusedListElement;
set_selected_element(focusedListElement);
}
};
var set_selected_element = function (element) {
$('#expander:visible').slideUp();
$('ul#studies_list li').removeClass("selected");
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI")) {
listElem.addClass('selected');
scrollVal = listElem.offset().top - $('#studies_list').position().top;
//debounce(show_expanded_info, 500, false)();
show_expanded_info();
}
} else {
$('#expander').hide();
}
};
studylist.handlebars 0 → 100644
View file @ 1aa0418f
<ul class="nav nav-list" id="studies_list">
{{#each studies}}
<li id="{{id}}">
<h2>{{name}}</h2>
<div class="abstract">{{abstractText}}</div>
</li>
{{/each}}
</ul>
studylist.js 0 → 100644
View file @ 1aa0418f
(function() {
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['studylist'] = template(function (Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this;
function program1(depth0,data) {
var buffer = "", stack1;
buffer += "\n <li id=\"";
if (stack1 = helpers.id) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
else { stack1 = depth0.id; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
buffer += escapeExpression(stack1)
+ "\">\n <h2>";
if (stack1 = helpers.name) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
buffer += escapeExpression(stack1)
+ "</h2>\n <div class=\"abstract\">";
if (stack1 = helpers.abstractText) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
else { stack1 = depth0.abstractText; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
buffer += escapeExpression(stack1)
+ "</div>\n </li>\n ";
return buffer;
}
buffer += "<ul class=\"nav nav-list\" id=\"studies_list\">\n ";
stack1 = helpers.each.call(depth0, depth0.studies, {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
if(stack1 || stack1 === 0) { buffer += stack1; }
buffer += "\n</ul>\n";
return buffer;
});
})();
\ No newline at end of file
utils.js 0 → 100644
View file @ 1aa0418f
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
}
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
inScroll = false;
(function(){
var special = jQuery.event.special,
uid1 = 'D' + (+new Date()),
uid2 = 'D' + (+new Date() + 1);
special.scrollstart = {
setup: function() {
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
if (timer) {
clearTimeout(timer);
} else {
inScroll = true;
evt.type = 'scrollstart';
jQuery.event.handle.apply(_self, _args);
}
timer = setTimeout( function(){
timer = null;
}, special.scrollstop.latency);
};
if (!inScroll) {
jQuery(this).bind('scroll', handler).data(uid1, handler);
}
},
teardown: function(){
jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
}
};
special.scrollstop = {
latency: 200,
setup: function() {
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
if (timer) {
clearTimeout(timer);
}
if(inScroll) {
timer = setTimeout( function(){
inScroll = false;
timer = null;
evt.type = 'scrollstop';
jQuery.event.handle.apply(_self, _args);
}, special.scrollstop.latency);
}
};
jQuery(this).bind('scroll', handler).data(uid2, handler);
},
teardown: function() {
jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
}
};
})();
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