Zentrale Wissenschaftliche Einrichtung für Lehrer*innenbildung (ZEWIL)
`)
this.enlarged.hide()
this.enlarged.appendTo("body")
this.enlarged.fadeIn(this.config.fadeSpeed)
this.enlarged.on("click", () => this.hide())
}
hide() {
if (!this.enlarged) {
return null;
}
this.enlarged.fadeOut(this.config.fadeSpeed, () => {
this.enlarged.remove()
this.enlarged = null
})
}
}
function setupEnlargeableImages(target) {
target.find(".enlargeable").each(function () {
new EnlargeableImage($(this))
})
}
setups.push(setupEnlargeableImages)
// HEADLINE
function setupHeadline(target) {
let headline = target.find(".headline")
let hasRemoveHeadline = target.find("noheadline").length > 0
let hasHeadline = headline.length > 0
let hasEmptyHeadline = headline.length > 0 && headline.html().trim() === ""
if (!hasHeadline) {
return
}
if (hasRemoveHeadline || hasEmptyHeadline) {
headline.remove()
}
}
setups.push(setupHeadline)
// SLIDER
class Slider {
defaults = {
controls: true,
start: 1, // starting position
speed: 200, // slide speed
auto: 1, // auto-sliding
autospeed: 5000, // auto-sliding interval
autodirection: "right", // direction of auto-sliding ("left" or "right")
dots: true, // show dots for navigation
}
/**
* Content slider
* @param element
* @param config
*/
constructor(element, config = {}) {
this.element = $(element)
this._autoSlidingInterval = null
// combine configurations with priority defaults -> constructor config -> data attributes
this.config = $.extend({}, this.defaults, config, this.element.data())
this._validateConfig()
// add refresh event
this.element.on("refresh", () => this.refresh())
// wait for all images to load, so dimensions can be calculated correctly
this._allImagesLoaded().then(() => {
this.pos = this.config.start - 1 // starting position of the slider
this.refresh()
// Store original count before cloning
this.originalLength = this.items.length;
// skip sliding functionality if only one slide is available
if(this.items.length > 1) {
// auto sliding
if (this.config.auto) this.startAutoSliding()
// create control arrows
if (this.config.controls) this.addControls()
// create dots for navigation
if(this.config.dots) this.addDots()
}
})
}
_validateConfig() {
let validator = new Validator(this.config, {
scope: "Slider",
transform: true,
defaults: this.defaults,
})
return validator.validate([
["controls", "boolean"],
["start", "number"],
["start", (val) => {
let slideCount = this.element.children("ul").children("li").length
return val 0
}, {errorMsg: "'start' must be greater than zero and cannot exceed the number of slides"}],
["speed", "number"],
["auto", "boolean"],
["autospeed", "number"],
["autospeed", (val) => this.config.speed ["left", "right"].indexOf(val) !== -1, {errorMsg: "autodirection must be 'left' or 'right'"}]
])
}
/**
* refresh properties and calculated dimensions
*/
refresh() {
this.ul = this.element.children("ul") // list containing the slides
this.items = this.ul.children("li") // sliding items
// reset previously set properties
this.element.css({width: "", height: ""})
this.ul.css({width: "", left: ""})
this.items.css({width: "", height: ""})
// find the highest slider item and use it as the sliders height
let maxSlideHeight = 0
this.items.each(function () {
let slideHeight = $(this).height()
if (slideHeight > maxSlideHeight) maxSlideHeight = slideHeight
})
this._height = maxSlideHeight
this._width = this.element.width() // slider width
this._uiWidth = this.items.length * this._width // width of all items combined
// set slider dimensions
this.element.css({
width: this._width,
height: this._height,
})
this.ul.css({
width: this._uiWidth,
left: this.pos * -this._width, // move viewpoint to current position
})
this.items.css({
width: this._width,
height: this._height,
})
}
/**
* Add dots for navigation
*/
addDots() {
this.dotsContainer = $('
');
// Only create dots for original slides, not cloned ones
for (let i = 0; i
');
if (i === this.pos) dot.addClass('active');
dot.on('click', () => {
this.stopAutoSliding();
this.moveTo(i);
setTimeout(() => {
if (this.config.auto) this.startAutoSliding();
}, this.config.speed + 100);
});
this.dotsContainer.append(dot);
}
this.element.append(this.dotsContainer);
}
/**
* update dots for navigation
*/
updateDots() {
if (!this.config.dots) return
this.dotsContainer.find('.dot').removeClass('active')
this.dotsContainer.find('.dot').eq(this.pos).addClass('active')
}
/**
* move to previous slide item or last, if there is no previous item
*/
prev() {
// currently at the first item, prepend the last item and move there
this.pos = (this.pos === 0) ? this.items.length - 1 : this.pos - 1;
this.moveTo(this.pos)
this.dotpos--;
}
/**
* move to next slide item or first, if there is no next item
*/
next() {
// currently at the last item, append the first item and move there
this.pos= (this.pos === this.items.length - 1) ? 0 : this.pos+1;
this.moveTo(this.pos)
this.dotpos++;
}
/**
* move to given slide item
* @param pos
*/
moveTo(pos) {
this.pos = pos
this.ul.animate({left: this.pos * -this._width}, this.config.speed)
this.updateDots() // update dots for navigation
}
/**
* start auto sliding
* @returns {null}
*/
startAutoSliding() {
// abort if auto sliding is already running
if (this._autoSlidingInterval !== null) return null
// begin auto sliding
this._autoSlidingInterval = setInterval(() => {
if (this.config.autodirection === "right") this.next()
else this.prev()
this.updateDots()
}, this.config.autospeed)
}
/**
* stop auto sliding
* @returns {null}
*/
stopAutoSliding() {
// abort if auto sliding isn't running
if (!this._autoSlidingInterval) return null
// abort auto sliding
clearInterval(this._autoSlidingInterval)
this._autoSlidingInterval = null // Important: Reset the interval
}
/**
* toggle auto sliding
* @returns {null}
*/
toggleAutoSliding() {
if (this._autoSlidingInterval) this.startAutoSliding()
else this.stopAutoSliding()
}
/**
* Add control arrows to slide to the next or previous item
*/
addControls() {
if (!this.controlPrev) {
this.controlPrev = $('
')
this.controlPrev.on("click", () => {
this.stopAutoSliding()
this.prev()
});
this.element.prepend(this.controlPrev)
}
if (!this.controlNext) {
this.controlNext = $('
')
this.controlNext.on("click", () => {
this.stopAutoSliding()
this.next()
});
this.element.prepend(this.controlNext)
}
}
/**
* remove control arrows
*/
removeControls() {
if (this.controlPrev) this.controlPrev.remove()
if (this.controlNext) this.controlNext.remove()
}
/**
* promise to wait for loading of all images within the slider
* @returns {Promise
}
*/
async _allImagesLoaded() {
let loadPromises = []
this.element.find("img").each((i, imageElement) => {
loadPromises.push(new Promise(res => {
$("![]()
").on("load", () => res()).attr("src", $(imageElement).attr("src"))
}))
})
await Promise.all(loadPromises)
}
}
function setupSliders(target) {
target.find(".slider").each(function () {
new Slider($(this))
})
}
setups.push(setupSliders)
// TABLE OF CONTENTS
class TableOfContents {
defaults = {
auto: true, // try to automatically generate the toc
scrollspeed: 500, // animation duration of scroll effect when a link is clicked
scrolloffset: 200, // offset for
headingsselector: "[data-accordion]:not(.no-toc),.toc", // selector for relevant content headings, that should be included in the toc
}
/**
* Content slider
* @param element {jQuery|HTMLElement}
* @param config {object}
*/
constructor(element, config = {}) {
this.element = $(element)
// combine configurations with priority defaults -> constructor config -> data attributes
this.config = $.extend({}, this.defaults, config, this.element.data())
this._validateConfig()
// automatically create toc
if (this.config.auto) this.update()
}
_validateConfig() {
let validator = new Validator(this.config, {
scope: "TableOfContents",
transform: true,
defaults: this.defaults,
})
return validator.validate([
["auto", "boolean"],
["scrollspeed", "number"],
["scrolloffset", "number"],
["scrollselector", "string"],
["headingsselector", "string"],
])
}
/**
* re-render the table of contents box
*/
update() {
const data = this._retrieveTocData()
const tocBox = $(`Inhaltsverzeichnis
`)
const tocList = this._createIndexList(data)
this.element.html("")
tocBox.append(tocList)
this.element.append(tocBox)
}
/**
* searches the document for headings and sorts them hierarchically
* Output:
* [
* {
* level: (int), // heading level from 1 to 6
* title: (string), // heading title
* id: (string), // element DOM id (optional)
* children: [ // headings that are of a lower level and followed this heading
* {level: ..., title, ...},
* ]
* }, ...
* ]
* @returns {*[]}
* @private
*/
_retrieveTocData() {
const headings = $(this.config.headingsselector)
const tocData = [];
const stack = [];
$.each(headings, (i, heading) => {
heading = $(heading)
const level = this._getHeadingLevel(heading)
const title = this._getHeadingTitle(heading)
const id = this._getHeadingId(heading)
if (!level || !title) return null
const node = {level: level, title: title, id: id, element: heading};
while (stack.length > 0 && stack[stack.length - 1].level >= level) {
stack.pop();
}
if (stack.length > 0) {
const parent = stack[stack.length - 1];
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
} else {
tocData.push(node);
}
stack.push(node);
})
return tocData;
}
/**
* Tries to retrieve the heading level (1-6) from an element by the following methods in this order:
* 1. By data-attribute (e.g. data-level="1")
* 2. By class (e.g. class="h1")
* 3. By Tag (e.g. )
* @param heading {jQuery|HTMLElement}
* @returns {null|number}
* @private
*/
_getHeadingLevel(heading) {
const hRegex = "\\b[hH][1-6]\\b"
const byData = heading.data("level")
if (byData) return parseInt(byData)
const byClass = heading.attr("class") ? heading.attr("class").match(hRegex) : null
if (byClass) return parseInt(byClass[0].slice(1))
const byTag = heading.prop("tagName").match(hRegex)
if (byTag) return parseInt(byTag[0].slice(1))
return null
}
/**
* Tries to retrieve the heading title from an element by the following methods in this order:
* 1. By data (e.g. data-title="Hello World")
* 2. By content, stripping all html tags in the process (e.g. Hello World
)
* @param heading {jQuery|HTMLElement}
* @returns {null|string}
* @private
*/
_getHeadingTitle(heading) {
const byData = heading.data("title")
if (byData) return byData
const byContent = heading.html() ? heading.text().trim() : null
if (byContent) return byContent
return null
}
/**
* Tries to retrieve the heading ID from an element by the following methods in this order:
* 1. By ID (e.g. id="my-element")
* 2. By Accordion-Target (e.g. data-accordion="#my-element")
* @param heading {jQuery|HTMLElement}
* @returns {*|jQuery|string|null}
* @private
*/
_getHeadingId(heading) {
const byId = heading.attr("id")
if (byId) return byId
let byAccordion = heading.data("accordion")
byAccordion = byAccordion && byAccordion[0] === "#" ? byAccordion.substring(1) : null
if (byAccordion) return byAccordion
return null
}
/**
* Creates an element with a numbered list based on the given data (see: this._retrieveTocData())
* Lower levels are indented and get their own running number, separated by a point (e.g. 2.1.-2.4 as children of 2.)
* @param tocNodesData {[]}
* @returns {jQuery|HTMLElement}
* @private
*/
_createIndexList(tocNodesData) {
let list = $('
')
$.each(tocNodesData, (i, node) => {
// create list item with heading title
let listItem = $(`
`)
let itemLink = $(`${node.title}`)
// scroll to the connected heading element on click
itemLink.on("click", (e) => {
scrollTo(node.element, this.config.scrollspeed, this.config.scrolloffset)
})
listItem.append(itemLink)
// add list item
list.append(listItem)
// append list of children to the next level of the list
if(typeof node.children !== "undefined") {
listItem.append(this._createIndexList(node.children))
}
})
return list
}
}
function setupTableOfContents(target) {
target.find(".table-of-contents").each(function () {
new TableOfContents($(this))
})
}
setups.push(setupTableOfContents)
// Validator
class Validator {
defaults = {
transform: false, // try to transform values into the desired format
consoleErrors: true, // print errors to console
scope: false, // print scope to error messages to identify the validation messages
defaults: {} // default values to reset the variable to if the validation failed
}
/**
* @param data {{}}
* @param config {{}}
*/
constructor(data, config = []) {
this.data = data
this.config = $.extend({}, this.defaults, config)
}
/**
* Validate a given array of validator configurations
* @param validators {[]}
* @returns {*[]}
*/
validate(validators = []) {
if (!Array.isArray(validators)) return null
let failed = []
validators.forEach(validatorConfig => {
let varName = validatorConfig[0]
let validatorFunc = validatorConfig[1]
let userConfig = validatorConfig[2] || {}
let isValid = false
if (typeof validatorFunc === "string" && typeof this[validatorFunc] === "function") {
// validatorFunc is a standard method of Validator
isValid = this[validatorFunc](varName, userConfig)
} else if (typeof validatorFunc === "function") {
// validatorFunc is a custom validation
isValid = this._execValidator({
varName: varName,
validator: validatorFunc,
}, userConfig)
}
// validation failed, list the variable name as failed
if (!isValid) failed.push(validatorConfig.varName)
})
// return the names of all failed validations
return failed
}
/**
* Execute standard or custom validator configuration
* @param config {{}}
* @param customConfig {{}}
* @returns boolean
* @private
*/
_execValidator(config, customConfig) {
// merge the configuration with priority default -> config given to constructor -> standard method config -> custom validator config
config = $.extend({}, this.config, config, customConfig)
config = this._validateConfiguration(config)
if (!config) return false
let val = config.val
// transform the variable if configured to do so and set it to the given dataset if the validation is successful
val = config.transform ? config.transformator(val) : val
let isValid = config.validator(val, this)
if (isValid && config.transform)
this.data[config.varName] = val
// print errors if configured to do so
if (config.consoleErrors && !isValid)
console.error(`${config.scope ? `${config.scope}: ` : ''}${config.errorMsg}`)
// set default value if it exists and the validation failed
if (!isValid && this.config.defaults.hasOwnProperty(config.varName))
this.data[config.varName] = this.config.defaults[config.varName]
return isValid
}
/**
* Validate the validator configuration itself
* @param config {{}}
* @returns {boolean|*}
* @private
*/
_validateConfiguration(config) {
// is the validator executable?
if (typeof config.validator !== "function") {
console.error("validator is not a function")
return false
}
// does the validator know what it should validate?
if (!config.varName) {
console.error("varName must be set in validation configuration")
return false
}
// set default configurations if no custom configuration was set
config.errorMsg = config.errorMsg || `Validation failed for ${config.varName}`
config.transform = config.transform || this.config.transform
config.transformator = config.transformator || function (val) {
return val
}
// read variables value from dataset
config.val = this.data[config.varName]
return config
}
/**
* Validate if variable contains a boolean (or something that could be interpreted as one)
* @param varName {string}
* @param config {{}}
* @returns {boolean}
*/
boolean(varName, config) {
return this._execValidator({
varName: varName,
transformator: (val) => {
if (["0", 0, "false", "False", "FALSE", "F", "f"].indexOf(val) !== -1) return false
if (["1", 1, "true", "True", "TRUE", "T", "t"].indexOf(val) !== -1) return true
return val
},
validator: (val) => typeof val == "boolean",
errorMsg: `${varName} must be boolean`
}, config)
}
/**
* Validate if variable contains a numeric value
* @param varName {string}
* @param config {{}}
* @returns {boolean}
*/
number(varName, config) {
return this._execValidator({
varName: varName,
transformator: (val) => Number(val),
validator: (val) => !isNaN(val),
errorMsg: `${varName} must be a number`
}, config)
}
/**
* Validate if variable contains a string value
* @param varName {string}
* @param config {{}}
* @returns {boolean}
*/
string(varName, config) {
return this._execValidator({
varName: varName,
transformator: (val) => String(val),
validator: (val) => typeof val === "string" || val instanceof String,
errorMsg: `${varName} must be a string`
}, config)
}
}
// SETUPS
$(document).ready(function () {
let main = $("#main");
$.each(setups, (i, setupFunction) => {
if (typeof setupFunction === "function") {
setupFunction(main)
}
})
// fix scrolling to anchor
const anchor = window.location.hash;
if(anchor !== "") scrollTo(`${anchor}, [data-accordion="${anchor}"]`);
})
// Scroll method
function scrollTo(target, speed, offset) {
target = $(target)
speed = speed ?? 0
offset = offset ?? 200
const scrollContainer = $("#scrollable-area")
target.trigger("Accordion:show")
let position = target.offset().top
- scrollContainer.offset().top
+ scrollContainer.scrollTop()
- offset;
scrollContainer.animate({
scrollTop: position
}, speed);
}
// Fix navigation height when the page is scrolled and the menu is moved to the top
function fixedNav() {
let viewportWidth = $(window).width();
let main = $('#main');
let scrollableArea = $("#scrollable-area");
let headerLogoContainer = $("#header-logo-container");
let navigationContainerMobile = $('#navigation-container-mobil');
let navigationContainer = $('#navigation-container');
if (viewportWidth headerLogoContainer.height() + 3) {
navigationContainerMobile.css('width', navigationContainerMobile.width() + "px");
main.css('padding-top', navigationContainerMobile.height() + 'px');
// ADD TO ORIGINAL SCRIPT:
main.css('background-position', '0 ' + (parseInt(navigationContainerMobile.height()) * 2) + 'px');
navigationContainerMobile.css('position', 'fixed');
navigationContainerMobile.css('top', '0');
} else {
navigationContainerMobile.css('width', "100%");
main.css('padding-top', '0');
// ADD TO ORIGINAL SCRIPT:
main.css('background-position', '0 ' + navigationContainerMobile.height() + 'px');
navigationContainerMobile.css('position', 'relative');
}
} else {
if (scrollableArea.scrollTop() > headerLogoContainer.height() + 3) {
navigationContainer.css('width', navigationContainer.width() + "px");
main.css('padding-top', navigationContainer.height() + 'px');
// ADD TO ORIGINAL SCRIPT:
main.css('background-position', '0 ' + (parseInt(navigationContainerMobile.height()) * 2) + 'px');
navigationContainer.css('position', 'fixed');
navigationContainer.css('top', '0');
} else {
navigationContainer.css('width', "100%");
main.css('padding-top', '0');
// ADD TO ORIGINAL SCRIPT:
main.css('background-position', '0 ' + navigationContainerMobile.height() + 'px');
navigationContainer.css('position', 'relative');
}
}
}
-
-
-
-
MINT:ZE- Zukunft gestalten, Wissen erleben
MINT:ZE fördert das Interesse an MINT-Fächern unter Kindern und Jugendlichen in
Südniedersachsen durch die
Zusammenarbeit von Bildungseinrichtungen und lokalen Partnern.
Mehr Informationen
Die ZEWIL ist eine zentrale wissenschaftliche Einrichtung der Georg-August-Universität Göttingen. Als
fakultätsübergreifender Verbund zwischen der Erziehungswissenschaft, der Pädagogischen Psychologie und den
Fachdidaktiken dient sie der Weiterentwicklung der interdisziplinären Forschung, der Koordination der Lehre in den
Lehramtsstudiengängen und der Vernetzung der mit Lehrer*innenbildung befassten Akteure der Universität, des
Studienseminars und des Netzwerks Lehrkräftefortbildung.
