added zepto and tabber-libs

src/Foundation.hs

@@ -456,9 +456,12 @@ defaultMenuLayout menu widget = do
 
     pc <- widgetToPageContent $ do
         addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900"
-        addScript $ StaticR js_featureChecker_js
+        addScript $ StaticR js_zepto_js
         addScript $ StaticR js_fetchPolyfill_js
         addScript $ StaticR js_urlPolyfill_js
+        addScript $ StaticR js_featureChecker_js
+        addScript $ StaticR js_tabber_js
+        addStylesheet $ StaticR css_tabber_css
         addStylesheet $ StaticR css_fonts_css
         addStylesheet $ StaticR css_icons_css
         $(widgetFile "default-layout")

static/css/tabber.css

@@ -0,0 +1,31 @@
+.tab-group {
+  margin: 0 13px;
+  padding: 0;
+}
+
+.tab-group-openers {
+  display: block;
+  background: #777;
+  color: white;
+  line-height: 40px;
+  font-size: 16px;
+  margin: 0;
+}
+
+.tab-opener {
+  display: inline-block;
+  padding: 0 13px;
+  cursor: pointer;
+  transition: color .3s ease, background .3s ease;
+}
+
+.tab-opener.tab-visible {
+  color: black;
+  background: white;
+}
+
+.tab {
+  padding: 13px 31px;
+  background: white;
+  color: black;
+}

static/js/tabber.js

@@ -0,0 +1,85 @@
+(function($) {
+
+  document.addEventListener('DOMContentLoaded', function() {
+    'use strict';
+
+    // define plugin
+    $.fn.tabgroup = function() {
+
+      var $this = $(this);
+      var $openers = $('<div class="tab-group-openers"></div>');
+      $this.prepend($openers);
+
+      var openedByDefault = $this.data('tab-open') || 0;
+      var tabs = [];
+      var currentTab = {};
+
+      $this.find('.tab').each(function(i, t) {
+        var tab = $(t);
+        tab.data('tab-index', i);
+        var tabName = tab.data('tab-name') || 'Tab '+i;
+        var tabFile = tab.data('tab-file') || false;
+        var $opener = makeOpener(tabName, i);
+        $openers.append($opener);
+        tab.hide();
+        var loaded = false;
+        tabs.push({index: i, name: tabName, file: tabFile, dom: tab, opener: $opener, loaded: false});
+      });
+
+      $this.on('click', 'a[href^="#"]', function(event) {
+        var $target = $(event.currentTarget);
+        var tab = getTabByName($target.attr('href').replace('#', ''));
+        if ( tab ) {
+          showTab(tab.index);
+        }
+        event.preventDefault();
+      });
+
+      function getTabByName(name) {
+        var it = -1;
+        $.each(tabs, function(i, t) {
+          if ( t.name.toLowerCase() === name.toLowerCase() ) {
+            it = i;
+          }
+        });
+        if ( it >= 0 ) {
+          return tabs[it];
+        } else {
+          return false;
+        }
+      }
+
+      function makeOpener(tabName, i) {
+        return $('<span class="tab-opener">'+tabName+'</span>').
+                on('click', function() {
+                  showTab(i);
+                });
+      }
+
+      function showTab(i) {
+        tabs.forEach(function(t) {
+          t.dom.hide();
+          t.opener.removeClass('tab-visible');
+        });
+        currentTab = tabs[i];
+        if ( !currentTab.loaded && currentTab.file ){
+          $.get(currentTab.file, function(res) {
+            currentTab.dom.html(res);
+            currentTab.loaded = true;
+          });
+        }
+        currentTab.opener.addClass('tab-visible');
+        currentTab.dom.show();
+      }
+
+      showTab(openedByDefault);
+      currentTab = tabs[openedByDefault];
+
+    };
+
+    // apply plugin to all available tab-groups
+    $('.tab-group').each(function(i, t) {
+      $(t).tabgroup();
+    })
+  });
+})($);

templates/course.hamlet

@@ -28,27 +28,25 @@
 
   <form method=post action=@{CourseR tid csh CourseShowR} enctype=#{regEnctype}>
     ^{regWidget}
-
+    
-$# TODO: maybe übungsblätter
 <div .container>
-  <h3>Übungsblätter
+  <div class="tab-group">
-  <table class="table table-striped table-hover">
+    <div class="tab" data-tab-name="Übungsgruppen">
-    <thead>
+    <div class="tab" data-tab-name="Übungsblätter">
-      <tr>
+      <h3>Übungsblätter
-        <th>Blatt
+      <table class="table table-striped table-hover">
-        <th>Abgabe ab
+        <thead>
-        <th>Abgabe bis
+          <tr>
-        <th>Bewertung</th>
+            <th>Blatt
-    <tbody>
+            <th>Abgabe ab
-      <tr>
+            <th>Abgabe bis
-        <td>
+            <th>Bewertung</th>
-          <a class="btn btn-link" href="http://localhost:3000/course/S2018/ffp/ex/Blatt%201/show" role="button">Blatt 1
+        <tbody>
-        <td>Do 11.04.18
+          <tr>
-        <td>Do 11.04.18
+            <td>
-        <td>NotGraded
+              <a class="btn btn-link" href="http://localhost:3000/course/S2018/ffp/ex/Blatt%201/show" role="button">Blatt 1
-
+            <td>Do 11.04.18
-$# TODO: maybe klausuren
+            <td>Do 11.04.18
-<div .container>
+            <td>NotGraded
-  <h3>Klausuren
+    <div class="tab" data-tab-name="Klausuren">
-  <span>...
+    <div class="tab" data-tab-name="Korrekturen">
-$# ...