added zepto and tabber-libs
This commit is contained in:
Felix Hamann
parent
4936f00b9b
commit
29832fb337
@ -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")
|
||||
|
||||
31
static/css/tabber.css
Normal file
31
static/css/tabber.css
Normal file
@ -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;
|
||||
}
|
||||
85
static/js/tabber.js
Normal file
85
static/js/tabber.js
Normal file
@ -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();
|
||||
})
|
||||
});
|
||||
})($);
|
||||
1650
static/js/zepto.js
Normal file
1650
static/js/zepto.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -28,27 +28,25 @@
|
||||
|
||||
<form method=post action=@{CourseR tid csh CourseShowR} enctype=#{regEnctype}>
|
||||
^{regWidget}
|
||||
|
||||
$# TODO: maybe übungsblätter
|
||||
|
||||
<div .container>
|
||||
<h3>Übungsblätter
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Blatt
|
||||
<th>Abgabe ab
|
||||
<th>Abgabe bis
|
||||
<th>Bewertung</th>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<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
|
||||
<td>Do 11.04.18
|
||||
<td>NotGraded
|
||||
|
||||
$# TODO: maybe klausuren
|
||||
<div .container>
|
||||
<h3>Klausuren
|
||||
<span>...
|
||||
$# ...
|
||||
<div class="tab-group">
|
||||
<div class="tab" data-tab-name="Übungsgruppen">
|
||||
<div class="tab" data-tab-name="Übungsblätter">
|
||||
<h3>Übungsblätter
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Blatt
|
||||
<th>Abgabe ab
|
||||
<th>Abgabe bis
|
||||
<th>Bewertung</th>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<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
|
||||
<td>Do 11.04.18
|
||||
<td>NotGraded
|
||||
<div class="tab" data-tab-name="Klausuren">
|
||||
<div class="tab" data-tab-name="Korrekturen">
|
||||
Reference in New Issue
Block a user