239 lines
7.9 KiB
JavaScript
239 lines
7.9 KiB
JavaScript
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||
// % SWIPER
|
||
|
||
// local debugging: print the name of every executed funtion to the console
|
||
var debug_swiper_daniel = 0;
|
||
|
||
function insertSwiper(s) {
|
||
if (debug_swiper_daniel) {
|
||
console.log("%cfunction: insertSwiper", "color:white;background:lightblue");
|
||
}
|
||
|
||
// Create an empty swiper-instance and append the swiper-container to
|
||
// 'grid-element' s.
|
||
|
||
var container = document.createElement('div');
|
||
container.classList.add("swiper", "swiper-container-main");
|
||
elements[s].appendChild(container);
|
||
|
||
var swiperwrapper = document.createElement('div');
|
||
swiperwrapper.classList.add("swiper-wrapper", "swiper-wrapper-main");
|
||
swiperwrapper.s = s;
|
||
container.appendChild(swiperwrapper);
|
||
|
||
var paginationWrapper = document.createElement('div');
|
||
paginationWrapper.classList.add("swiper-pagination");
|
||
container.appendChild(paginationWrapper);
|
||
|
||
var buttonPrev = document.createElement("div");
|
||
buttonPrev.classList.add("swiper-button-prev", "swiper-button-black");
|
||
|
||
var buttonNext = document.createElement("div");
|
||
buttonNext.classList.add("swiper-button-next", "swiper-button-black");
|
||
|
||
var swiper = new Swiper(container, {
|
||
direction : 'horizontal',
|
||
pagination: {
|
||
el: paginationWrapper,
|
||
clickable: true,
|
||
},
|
||
watchOverflow: true,
|
||
spaceBetween : 0,
|
||
navigation:{
|
||
prevEl: buttonPrev,
|
||
nextEl: buttonNext
|
||
},
|
||
noSwiping: true, // this activates the noSwipingClass functionality
|
||
});
|
||
//console.log(swiper);
|
||
|
||
// the graphics slide will disable swiping (use hide box instead)
|
||
if (isTouchDevice) {
|
||
function enableSwiping(allow) {
|
||
swiper.params.noSwipingClass = allow ? null : "swiper-slide-main";
|
||
}
|
||
} else {
|
||
function enableSwiping(allow) {
|
||
buttonPrev.style.display = allow ? 'block' : 'none';
|
||
buttonNext.style.display = allow ? 'block' : 'none';
|
||
}
|
||
swiper.params.noSwipingClass = "swiper-slide-main";
|
||
container.appendChild(buttonPrev);
|
||
container.appendChild(buttonNext);
|
||
}
|
||
swiper.enableSwiping = enableSwiping;
|
||
return swiper;
|
||
}
|
||
|
||
function findSlide(s, type) {
|
||
if (debug_swiper_daniel) {
|
||
console.log("%cfunction: findSlide" , "color:white;background:lightblue");
|
||
console.log (s, type);
|
||
}
|
||
|
||
var i;
|
||
for (i = 0; i < swiper[s].slides.length; i++) {
|
||
if (swiper[s].slides[i].slideType === type) {
|
||
if (debug_swiper_daniel) {
|
||
console.log ('found slide ',i);
|
||
}
|
||
return i;
|
||
}
|
||
}
|
||
if (debug_swiper_daniel) {
|
||
console.log ('found no slide ');
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function replaceSlideContent(slide, title, content) {
|
||
if (debug_swiper_daniel) {
|
||
console.log("%cfunction: replaceSlideContent", "color:white;background:lightblue");
|
||
}
|
||
|
||
titlewrapper = slide.childNodes[0].childNodes[0];
|
||
titlewrapper.innerHTML = title;
|
||
slide.replaceChild(content, slide.childNodes[1])
|
||
}
|
||
|
||
function insertSlide(s, title, type, content) {
|
||
if (debug_swiper_daniel) {
|
||
console.log("%cfunction: insertSlide", "color:white;background:lightblue");
|
||
}
|
||
|
||
// console.log("title: ",title," s: ",s);
|
||
|
||
// Inserts new group to instance s of Swiper. return inserted position
|
||
|
||
// Removed, Swiper will be removed, so there´s no need to look for swiper slides.
|
||
// Instead content will be replaced
|
||
// var isl = findSlide(s, type);
|
||
// var slide = swiper[s].slides[isl];
|
||
// if (slide) { // slide already exists
|
||
// replaceSlideContent(slide, title, content);
|
||
// return isl;
|
||
// }
|
||
var panel = document.createElement('div');
|
||
panel.classList.add("panel");
|
||
|
||
titlewrapper = document.createElement('span');
|
||
titlewrapper.innerHTML = title;
|
||
panel.appendChild(titlewrapper);
|
||
/*
|
||
if (type == "_overview" || type == "main") {
|
||
//panel.appendChild(createHomeButton(s));
|
||
} else if (type != "graphics" && type != "_inst_select" && type != "console") {
|
||
panel.appendChild(createCloseButton(s));
|
||
}
|
||
*/
|
||
|
||
/*if (type === "graphics") {
|
||
panel.appendChild(createUpdateButton(s));
|
||
}*/
|
||
|
||
var gridContainer = document.createElement('div');
|
||
// gridContainer.classList.add("swiper-slide", "swiper-slide-main");
|
||
gridContainer.classList.add("grid-container");
|
||
// Store type so it can be found easiely later.
|
||
gridContainer.slideType = type;
|
||
gridContainer.appendChild(panel);
|
||
gridContainer.appendChild(content);
|
||
|
||
// Graphics-slide is put at mostleft position.
|
||
// if (type == "graphics" || type == "_overview") {
|
||
// swiper[s].prependSlide(slide);
|
||
// swiper[s].slideTo(0);
|
||
// return 0;
|
||
// }
|
||
// swiper[s].appendSlide(slide);
|
||
// if (type == "console") {
|
||
// if (s === 3) {
|
||
// // Slide mostright swiper-instance to last position (console)
|
||
// swiper[3].slideNext();
|
||
// }
|
||
// return swiper[s].slides.length - 1;
|
||
// }
|
||
|
||
var gridelements = document.getElementsByClassName('grid-element');
|
||
gridelements[s].innerHTML = "";
|
||
gridelements[s].appendChild(gridContainer);
|
||
|
||
let pos = 0;
|
||
|
||
// if (swiper[s].slides.length > 1) {
|
||
// var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
|
||
// if (consoleslide.slideType == "console") {
|
||
// // shift Console-slide to mostright position.
|
||
// swiper[s].removeSlide(swiper[s].slides.length - 2);
|
||
// swiper[s].appendSlide(consoleslide);
|
||
// // Slide to position of new slide
|
||
// pos = swiper[s].slides.length - 2;
|
||
// } else {
|
||
// pos = swiper[s].slides.length - 1;
|
||
// }
|
||
// }
|
||
// swiper[s].slideTo(pos);
|
||
return pos;
|
||
}
|
||
|
||
function createCloseButton(s) {
|
||
if (debug_swiper_daniel) {
|
||
console.log("%cfunction: createCloseButton", "color:white;background:lightblue");
|
||
}
|
||
|
||
// Creates 'span'-element containing close-button.
|
||
var wrapper = document.createElement('span');
|
||
wrapper.onclick = function () {
|
||
swiper[s].removeSlide(swiper[s].activeIndex);
|
||
swiper[s].slidePrev();
|
||
};
|
||
var closeButton = '<svg class="interactive icon slide-close-icon" fill="#000000" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>';
|
||
wrapper.innerHTML = closeButton;
|
||
return wrapper;
|
||
}
|
||
|
||
function createUpdateButton(s){
|
||
if (debug_swiper_daniel) {
|
||
console.log("%cfunction: createUpdateButton", "color:white;background:lightblue");
|
||
}
|
||
|
||
// Creates 'span'-element containing update-button (Should be removed later!)
|
||
var button = document.createElement('span');
|
||
button.classList.add("interactive", "toggle-updates-graphics")
|
||
button.onclick = function () {
|
||
getUpdatesGraphics = ! getUpdatesGraphics;
|
||
button.innerHTML = "updates = "+getUpdatesGraphics;
|
||
};
|
||
button.innerHTML = "updates: "+getUpdatesGraphics;
|
||
return button;
|
||
}
|
||
|
||
function defaultSlidePos(s) {
|
||
if (debug_swiper_daniel) {
|
||
console.log("%cfunction: defaultSlidePos", "color:white;background:lightblue");
|
||
}
|
||
|
||
return s < 3 ? 0 : swiper[s].slides.length-1;
|
||
}
|
||
|
||
function getSlideNames() {
|
||
if (debug_swiper_daniel) {
|
||
console.log("%cfunction: getSlideNames", "color:white;background:lightblue");
|
||
}
|
||
|
||
var names = []
|
||
for (var s=0; s<MAXBLOCK; s++) {
|
||
var sw = swiper[s];
|
||
var name = "";
|
||
if (sw.activeIndex != defaultSlidePos(s) && sw.slides.length > 0) {
|
||
name = sw.slides[sw.activeIndex].slideType;
|
||
}
|
||
names.push();
|
||
}
|
||
for (var s=MAXBLOCK-1; s>=0; s--) {
|
||
if (names[s] != "") break;
|
||
names.pop();
|
||
}
|
||
return names;
|
||
}
|