bibelwissen/views/mixins_headline_nav.pug

mixin headline_presentation_hamburger
	.dropdown
		.dropdown-toggle(data-toggle="dropdown", style="display: block; background: #555; width: 32px; height: 28px; position: relative; margin-left: auto; margin-right: 0px; border-radius: 4px; ")
			//- margin-right: auto; (normalerweise)
			span(style="top:  4px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
			span(style="top: 12px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
			span(style="top: 20px; position: absolute; left:4px; height: 4px; width: 24px; background: #fff; border-radius: 2px; display: block; ")
		.dropdown-menu
			.dropdown-item
				input.form-check-input#check_as_presentation(type="checkbox")
				label.form-check-label(for="check_as_presentation") Als Präsentation
				//- , onclick="event.stopPropagation();"
				
mixin headline_presentation_script
	script.
		var check_as_presentation = sessionStorage.getItem('show_as_presentation');
		if(check_as_presentation === null) {
			console.log('no "show_as_presentation" in sessionStorage; set to false')
			check_as_presentation = false;
			sessionStorage.setItem('show_as_presentation', false);
		}
		else
			check_as_presentation = JSON.parse(check_as_presentation);
		
		console.log("show_as_presentation: ", check_as_presentation);
		
		$('#check_as_presentation').prop('checked', check_as_presentation);
		console.log($('#check_as_presentation').prop('checked'))
		
		$('#check_as_presentation').change(function() {
			console.log('change');
			console.log($('#check_as_presentation').prop('checked'));
			sessionStorage.setItem('show_as_presentation', $('#check_as_presentation').prop('checked'));
			location.reload();
		});

mixin body_presentation_script
	script.
		if(JSON.parse(sessionStorage.getItem('show_as_presentation')))
			register_presentationkeys();
		else
			show_all_slides();
			
mixin headline_template(title)
	div(style="margin-top: 15px; padding-left: 1rem; padding-right: 1rem;")
		table(style="font-size: 80%; font-variant: small-caps; margin-bottom: 0px; width: 100%;")
			tr
				td(style="padding: 0px;")
					b
						a(href="/") BibelWissen.Halieus.DE
				td(style="padding: 0px; text-align: right;")
					a(href="http://www.halieus.de/impressum_datenschutz.html" target="_blank") Impressum & Datenschutzerklärung
		//- p(style="font-size: 130%; font-variant: small-caps; margin-bottom: 0px;")
		//-		b Einführung in das Evangelium nach Markus
		table(style="margin-bottom: 0px; width: 100%;")
			tr
				td(style="padding: 0px; font-size: 130%; font-variant: small-caps;")
					b !{title}
				td(style="padding: 0px; text-align: right;")
					+headline_presentation_hamburger
								
		+headline_presentation_script

mixin navigation_auto_template(gliederung, current, bgcolor)
	ol.breadcrumb(onclick="show_all_slides();", style="margin-top: .5rem; border-radius: 0;")
		if(current.length === 0)
			.h3(style="margin-bottom: 0px; color: #0e4f88; width: 100%;") Start 
				span.small.dropdown
					a.dropdown-toggle(data-toggle="dropdown", href="#", style="margin-bottom: 0px; color: #0e4f88; width: 100%;")
					.dropdown-menu
						a.dropdown-item(href="#")
							b Start
						each sub in gliederung
							a.dropdown-item(href=pathoffset + "/" + sub.id) !{sub.name}
		else
			li.breadcrumb-item
				a(href=pathoffset+"/") Start
			- var nr_items = current.length;
			- var cnt = 0;
			- var subs = gliederung;
			- var fullpath = pathoffset;
			- var old_fullpath;
			each item in current
				- cnt = cnt+1;
				- old_fullpath = fullpath;
				- fullpath = fullpath + "/" + item.id;
				if(cnt != nr_items)
					li.breadcrumb-item
						a(href=fullpath) !{item.name} 
						if(subs.length > 1)
							span.small.dropdown
								a.dropdown-toggle(data-toggle="dropdown", href="#", style="margin-bottom: 0px; color: "+bgcolor+"; width: 100%;")
								.dropdown-menu
									each sub in subs
										a.dropdown-item(href=old_fullpath + "/" + sub.id)
											if(sub.id === item.id)
												b !{sub.name}
											else
												span !{sub.name}
							
				else
					li.breadcrumb-item
					.h3(style="margin-bottom: 0px; color: "+bgcolor+"; width: 100%;") !{item.name} 
						if(subs.length > 1)
							span.small.dropdown
								a.dropdown-toggle(data-toggle="dropdown", href="#", style="margin-bottom: 0px; color: "+bgcolor+"; width: 100%;")
								.dropdown-menu
									each sub in subs
										a.dropdown-item(href=old_fullpath + "/" + sub.id)
											if(sub.id === item.id)
												b !{sub.name}
											else
												span !{sub.name}
											 
				- subs = item.subs;

mixin bottom_autonav_template(gliederung, current, hrcolor)
	hr(style="margin-top: 2rem; border-top-width: 7px; border-top-color: "+hrcolor+";")
	ul.nav.nav-fill.nav-pills(style="padding-left: 1rem; padding-right: 1rem;")
		- var nr_items = current.length;
		if(nr_items === 0)
			li.nav-item
				a.nav-link.active(href="#") Start
			each item in gliederung
				- var my_fullpath = pathoffset + "/" + item.id;
				
				li.nav-item
					a.nav-link(href=my_fullpath) !{item.name}
			
		else
			li.nav-item
				a.nav-link(href=pathoffset+"/") Start
			- var fullpath = pathoffset;
			each item in gliederung
				- var my_fullpath = fullpath + "/" + item.id;
				
				if(item.id === current[0].id)
					li.nav-item
						a.nav-link.active !{item.name}
				else
					li.nav-item
						a.nav-link(href=my_fullpath) !{item.name}
		
	if(nr_items > 1)				
		hr(style="border-top-width: 5px; border-top-color: "+hrcolor+";")
		.small(style="margin-top: 3px;")
			ul.nav.nav-fill.nav-pills.pill-sub-1
				- fullpath = fullpath + "/" + current[0].id;
				each item in current[0].subs
					- var my_fullpath = fullpath + "/" + item.id;
					if(item.id === current[1].id)
						li.nav-item
							a.nav-link.active !{item.name}
					else
						li.nav-item
							a.nav-link(href=my_fullpath) !{item.name}