diff --git a/index.html b/index.html index 85b52b78cfea70021ddd23136ff7bacd916078b6..1fbee51bb1ac75f04ea99608cb9a390ccbc34083 100644 --- a/index.html +++ b/index.html @@ -2,40 +2,14 @@ - ScrollMagnifyer - - - - - - + ListPeeker Demo - - + @@ -54,8 +28,5 @@ - diff --git a/listPeek.js b/listPeek.js index af8c9facd10deb11b443507cdf03bbc490a098da..ecf90b0db9428cdd56f16ebde7eed43467651051 100644 --- a/listPeek.js +++ b/listPeek.js @@ -1,103 +1,214 @@ -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(); + +}()); + diff --git a/listPeek.css b/studylist.css similarity index 100% rename from listPeek.css rename to studylist.css diff --git a/studylist.js b/studylist.js index 7992455d32e67f17ba8c9d94dbeca7e1acc3678b..47d1b8bce9e86305da758ef1ce584fc25a8831e4 100644 --- a/studylist.js +++ b/studylist.js @@ -1,33 +1,29 @@ -(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
  • \n

    "; - 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) - + "

    \n
    "; - 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) - + "
    \n
  • \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 += "\n"; - return buffer; - }); -})(); \ No newline at end of file + head.ready(function() { + load_data(); + }); +}); diff --git a/studylist.handlebars b/studylist_template.handlebars similarity index 100% rename from studylist.handlebars rename to studylist_template.handlebars diff --git a/studylist_template.js b/studylist_template.js new file mode 100644 index 0000000000000000000000000000000000000000..7992455d32e67f17ba8c9d94dbeca7e1acc3678b --- /dev/null +++ b/studylist_template.js @@ -0,0 +1,33 @@ +(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
  • \n

    "; + 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) + + "

    \n
    "; + 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) + + "
    \n
  • \n "; + return buffer; + } + + buffer += "\n"; + return buffer; + }); +})(); \ No newline at end of file