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

Use head.js for modules.

Enclose scripts in function scope to avoid globals
parent 87b485f3
...@@ -2,40 +2,14 @@ ...@@ -2,40 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>ScrollMagnifyer</title> <title>ListPeeker Demo</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>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <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="http://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="listPeek.css" rel="stylesheet"> <link href="studylist.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();
};
var load_data = function() { <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
$.ajax({ <script>
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list", head.js("studylist.js");
datatype: "json",
context: document.body
}).done(function(data) {
jsondata = data;
build_list();
}).error(function(jqXHR, exception) {
alert("Loading data failed:\n" + exception);
});
};
</script> </script>
</head> </head>
<body> <body>
...@@ -54,8 +28,5 @@ ...@@ -54,8 +28,5 @@
</div> </div>
</div> </div>
</div> </div>
<script>
load_data();
</script>
</body> </body>
</html> </html>
var horizontalCenter = Math.floor(window.innerWidth/2); /*jshint browser:true jquery:true */
var centerOfHeadline = 0;
var focusedListElement = null; inScroll = false;
var target_top = 0;
var scrollVal; (function(){
var scrollListenersEnabled = false; "use strict";
var scrollInProgress = false;
var handlersRegistered = false; var special = $.event.special,
uid1 = 'D' + (+new Date()),
var initialize_list_peek = function() { uid2 = 'D' + (+new Date() + 1);
target_top = $('#content').position().top;
$('#target').css({top: target_top}); special.scrollstart = {
horizontalCenter = Math.floor(window.innerWidth/2); setup: function() {
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
if (!handlersRegistered) { var timer,
register_event_handlers(); handler = function(evt) {
}
set_selected_element(focusedListElement); var _self = this,
}; _args = arguments;
var register_event_handlers = function() { if (timer) {
jQuery(window).bind('scrollstart', function(){ clearTimeout(timer);
if (scrollListenersEnabled) { } else {
scrollInProgress = true; inScroll = true;
// console.log("scrollstart"); evt.type = 'scrollstart';
$('#expander:visible').slideUp(); $(this).trigger(evt.type, _args);
} }
});
timer = setTimeout( function(){
jQuery(window).bind('touchmove', function(){ timer = null;
//IOS specific touch event }, special.scrollstop.latency);
if (scrollListenersEnabled) {
scrollInProgress = true; };
// console.log("touchmove");
$('#expander:visible').hide(); if (!inScroll) {
} $(this).bind('scroll', handler).data(uid1, handler);
}); }
jQuery(window).bind('scrollstop', function(e){ },
if (scrollInProgress) { teardown: function(){
// console.log("scrollstop"); $(this).unbind( 'scroll', $(this).data(uid1) );
find_and_select_element(); }
} };
});
special.scrollstop = {
$('#studies_list li').click(function() { latency: 100,
set_selected_element($(this).get()); setup: function() {
});
var timer,
$(window).resize(function() { handler = function(evt) {
initialize_list_peek();
}); var _self = this,
_args = arguments;
handlersRegistered = true;
}; if (timer) {
clearTimeout(timer);
var show_expanded_info = function() { }
// console.log("expanding");
var listElem = $('#studies_list li.selected'); if(inScroll) {
scrollListenersEnabled = false; timer = setTimeout( function(){
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
$('#target').animate({height: listElem.height()}, 'fast', function() { inScroll = false;
details = listElem.find("div.abstract").html(); timer = null;
if (details !== null) { evt.type = 'scrollstop';
$('#expander').css({top: target_top + $('#target').height()}); $(this).trigger(evt.type, _args);
$('#expander div.abstract').html(details);
$('#expander').slideDown('fast', function() { }, special.scrollstop.latency);
scrollListenersEnabled = true; }
scrollInProgress = false; };
inScroll = false;
}); $(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() { head.js("http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js")
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {}; .js("http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js")
templates['studylist'] = template(function (Handlebars,depth0,helpers,partials,data) { .js("http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js")
this.compilerInfo = [4,'>= 1.0.0']; .js("studylist_template.js", function() {
helpers = this.merge(helpers, Handlebars.helpers); data = data || {}; var jsondata = {};
var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this; 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 load_data = function() {
$.ajax({
var buffer = "", stack1; url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
buffer += "\n <li id=\""; datatype: "json",
if (stack1 = helpers.id) { stack1 = stack1.call(depth0, {hash:{},data:data}); } context: document.body
else { stack1 = depth0.id; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; } }).done(function(data) {
buffer += escapeExpression(stack1) jsondata = data;
+ "\">\n <h2>"; build_list();
if (stack1 = helpers.name) { stack1 = stack1.call(depth0, {hash:{},data:data}); } }).error(function(jqXHR, exception) {
else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; } alert("Loading data failed:\n" + exception);
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 "; head.ready(function() {
stack1 = helpers.each.call(depth0, depth0.studies, {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data}); load_data();
if(stack1 || stack1 === 0) { buffer += stack1; } });
buffer += "\n</ul>\n"; });
return buffer;
});
})();
\ No newline at end of file
(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