Initial commit

18effe7e · Kjetil Thuen · 18effe7e
Commit 18effe7e authored Jun 24, 2013 by Kjetil Thuen
Hide whitespace changes
Inline Side-by-side

Showing with 178 additions and 0 deletions

index.html index.html +178 -0

No files found.
--- a/index.html
+++ b/index.html
+<!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>