Commit 62ab76c6 authored by Kjetil Thuen's avatar Kjetil Thuen

Use head.js for modules.

Enclose scripts in function scope to avoid globals
parent 87b485f3
......@@ -2,40 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>ScrollMagnifyer</title>
<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>
<title>ListPeeker 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="listPeek.css" rel="stylesheet">
<script>
var jsondata = {};
var build_list = function() {
var template = Handlebars.templates['studylist'];
var listhtml = template(jsondata);
$('#content').html(listhtml);
initialize_list_peek();
};
<link href="studylist.css" rel="stylesheet">
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);
});
};
<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
<script>
head.js("studylist.js");
</script>
</head>
<body>
......@@ -54,8 +28,5 @@
</div>
</div>
</div>
<script>
load_data();
</script>
</body>
</html>
var horizontalCenter = Math.floor(window.innerWidth/2);
var centerOfHeadline = 0;
var focusedListElement = null;
var target_top = 0;
var scrollVal;
var scrollListenersEnabled = false;
var scrollInProgress = false;
var handlersRegistered = false;
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);
if (!handlersRegistered) {
register_event_handlers();
}
set_selected_element(focusedListElement);
};
var register_event_handlers = function() {
jQuery(window).bind('scrollstart', function(){
if (scrollListenersEnabled) {
scrollInProgress = true;
// console.log("scrollstart");
$('#expander:visible').slideUp();
}
});
jQuery(window).bind('touchmove', function(){
//IOS specific touch event
if (scrollListenersEnabled) {
scrollInProgress = true;
// console.log("touchmove");
$('#expander:visible').hide();
}
});
jQuery(window).bind('scrollstop', function(e){
if (scrollInProgress) {
// console.log("scrollstop");
find_and_select_element();
}
});
$('#studies_list li').click(function() {
set_selected_element($(this).get());
});
$(window).resize(function() {
initialize_list_peek();
});
handlersRegistered = true;
};
var show_expanded_info = function() {
// console.log("expanding");
var listElem = $('#studies_list li.selected');
scrollListenersEnabled = false;
$('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('fast', function() {
scrollListenersEnabled = true;
scrollInProgress = false;
inScroll = false;
});
/*jshint browser:true jquery:true */
inScroll = false;
(function(){
"use strict";
var special = $.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';
$(this).trigger(evt.type, _args);
}
timer = setTimeout( function(){
timer = null;
}, special.scrollstop.latency);
};
if (!inScroll) {
$(this).bind('scroll', handler).data(uid1, handler);
}
},
teardown: function(){
$(this).unbind( 'scroll', $(this).data(uid1) );
}
};
special.scrollstop = {
latency: 100,
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';
$(this).trigger(evt.type, _args);
}, special.scrollstop.latency);
}
};
$(this).bind('scroll', handler).data(uid2, handler);
},
teardown: function() {
$(this).unbind( 'scroll', $(this).data(uid2) );
}
};
}());
(function () {
"use strict";
var horizontalCenter = Math.floor(window.innerWidth/2),
centerOfHeadline = 0,
focusedListElement = null,
target_top = 0,
scrollVal,
scrollListenersEnabled = false,
scrollInProgress = false,
handlersRegistered = false;
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);
};
};
var show_expanded_info = function() {
// console.log("expanding");
var listElem = $('#studies_list li.selected'),
details;
scrollListenersEnabled = false;
$('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('fast', function() {
scrollListenersEnabled = true;
scrollInProgress = false;
// inScroll = false;
});
}
});
});
};
var set_selected_element = function (element) {
if (!element) {
element = $('#studies_list li:first-child').get();
}
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI") && listElem !== focusedListElement) {
$('#expander:visible').slideUp();
$('#studies_list li').removeClass("selected");
listElem.addClass('selected');
focusedListElement = listElem;
scrollVal = listElem.offset().top - $('#studies_list').position().top;
// console.log("Debouncing expand function");
debounce(show_expanded_info, 500, false)();
} else {
$('#expander').hide();
}
});
});
};
var find_and_select_element = function() {
var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
if (newFocusedListElement !== focusedListElement) {
set_selected_element(newFocusedListElement);
}
};
var set_selected_element = function (element) {
if (!element) {
element = $('#studies_list li:first-child').get();
}
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI") && listElem !== focusedListElement) {
$('#expander:visible').slideUp();
$('#studies_list li').removeClass("selected");
listElem.addClass('selected');
focusedListElement = listElem;
scrollVal = listElem.offset().top - $('#studies_list').position().top;
// console.log("Debouncing expand function");
debounce(show_expanded_info, 500, false)();
} else {
$('#expander').hide();
}
}
};
};
var find_and_select_element = function() {
var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
if (newFocusedListElement !== focusedListElement) {
set_selected_element(newFocusedListElement);
}
};
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);
if (!handlersRegistered) {
register_event_handlers();
}
set_selected_element(focusedListElement);
};
var register_event_handlers = function() {
$(window).bind('scrollstart', function(){
if (scrollListenersEnabled) {
scrollInProgress = true;
console.log("scrollstart");
$('#expander:visible').slideUp();
}
});
$(window).bind('touchmove', function(){
//IOS specific touch event
if (scrollListenersEnabled) {
scrollInProgress = true;
console.log("touchmove");
$('#expander:visible').hide();
}
});
$(window).bind('scrollstop', function(e){
if (scrollInProgress) {
console.log("scrollstop");
find_and_select_element();
}
});
$('#studies_list li').click(function() {
console.log("click");
set_selected_element($(this).get());
});
$(window).resize(function() {
initialize_list_peek();
});
handlersRegistered = true;
};
initialize_list_peek();
}());
(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;
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("studylist_template.js", function() {
var jsondata = {};
var build_list = function() {
var template = Handlebars.templates.studylist;
var listhtml = template(jsondata);
$('#content').html(listhtml);
head.js("listPeek.js");
};
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;
}
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);
});
};
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
head.ready(function() {
load_data();
});
});
(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
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