Replaced GliderJs with SplideJS
Update .gitmodules, head.php, and 10 more files...
This commit is contained in:
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
[submodule "resources/SplideJs"]
|
||||
path = resources/SplideJs
|
||||
url = https://github.com/Splidejs/splide.git
|
||||
@@ -17,7 +17,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
if($enable_code_highlight) {
|
||||
echo('<link href="/resources/HighlightJS/11.6.0/styles/atom-one-dark.min.css" rel="stylesheet"/>');
|
||||
}
|
||||
if($enable_glider) {
|
||||
echo('<link href="/resources/GliderJs/1.7.6/glider.min.css" rel="stylesheet"/>');
|
||||
if($enable_gallery) {
|
||||
echo('<link href="/resources/SplideJs/dist/css/splide.min.css" rel="stylesheet"/>');
|
||||
}
|
||||
?>
|
||||
|
||||
@@ -5,8 +5,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
die();
|
||||
}
|
||||
|
||||
if($enable_glider) {
|
||||
echo('<script src="/resources/GliderJs/1.7.6/glider.min.js"></script>');
|
||||
if($enable_gallery) {
|
||||
echo('<script src="/resources/SplideJs/dist/js/splide.min.js"></script>');
|
||||
}
|
||||
|
||||
if($enable_code_highlight) {
|
||||
@@ -16,9 +16,8 @@ if($enable_code_highlight) {
|
||||
?>
|
||||
<script src="/resources/NibblePoker/js/nibblepoker.min.js"></script>
|
||||
<?php
|
||||
if($enable_glider) {
|
||||
// FIXME: Find out why the minified version is broken. (Only displays 1 pic per scroll position)
|
||||
echo('<script src="/resources/NibblePoker/js/nibblepoker-glider.js"></script>');
|
||||
if($enable_gallery) {
|
||||
echo('<script src="/resources/NibblePoker/js/nibblepoker-splide.js"></script>');
|
||||
}
|
||||
if($enable_code_highlight) {
|
||||
echo('<script src="/resources/NibblePoker/js/nibblepoker-code.min.js"></script>');
|
||||
|
||||
@@ -896,13 +896,21 @@ class ComposerElement {
|
||||
break;
|
||||
|
||||
case ComposerElementTypes::GALLERY:
|
||||
$htmlCode .= '<div class="glider ' . $this->get_modifiers_classes() . '">';
|
||||
|
||||
foreach($this->images as $galleryImageUrl) {
|
||||
$htmlCode .= '<img src="'.$galleryImageUrl.'">';
|
||||
if(!is_null($this->srTitle)) {
|
||||
$htmlCode .= '<section class="splide border" aria-label="' . $this->srTitle . '">';
|
||||
$htmlCode .= '<h2 id="carousel-heading">' . $this->srTitle . '</h2>';
|
||||
} else {
|
||||
$htmlCode .= '<section class="splide border">';
|
||||
}
|
||||
|
||||
$htmlCode .= '</div>';
|
||||
$htmlCode .= '<div class="splide__track">';
|
||||
$htmlCode .= '<ul class="splide__list">';
|
||||
|
||||
foreach($this->images as $galleryImageUrl) {
|
||||
$htmlCode .= '<li class="splide__slide"><img src="'.$galleryImageUrl.'"></li>';
|
||||
}
|
||||
|
||||
$htmlCode .= '</ul></div></section>';
|
||||
break;
|
||||
|
||||
case ComposerElementTypes::VIDEO:
|
||||
|
||||
@@ -31,7 +31,7 @@ $config_dir_tools = realpath($dir_commons . "/../" . "tools/");
|
||||
// Optional features
|
||||
$enable_grids = false;
|
||||
$enable_code_highlight = false;
|
||||
$enable_glider = false;
|
||||
$enable_gallery = false;
|
||||
$enable_kitty_and_doggo_sounds = false;
|
||||
|
||||
// Easter-egg optional features
|
||||
|
||||
@@ -59,8 +59,8 @@ echo ^> resources\NibblePoker\js\nibblepoker-code.js
|
||||
call "%~dp0node_modules\.bin\terser" nibblepoker-code.js -c -m -o nibblepoker-code.min.js
|
||||
echo ^> resources\NibblePoker\js\nibblepoker-contributors.js
|
||||
call "%~dp0node_modules\.bin\terser" nibblepoker-contributors.js -c -m -o nibblepoker-contributors.min.js
|
||||
echo ^> resources\NibblePoker\js\nibblepoker-glider.js
|
||||
call "%~dp0node_modules\.bin\terser" nibblepoker-glider.js -c -m -o nibblepoker-glider.min.js
|
||||
echo ^> resources\NibblePoker\js\nibblepoker-splide.js
|
||||
call "%~dp0node_modules\.bin\terser" nibblepoker-splide.js -c -m -o nibblepoker-splide.min.js
|
||||
popd
|
||||
|
||||
:libs-decimaljs-minify
|
||||
|
||||
@@ -36,7 +36,7 @@ if($contentManager->hasError) {
|
||||
}
|
||||
} else {
|
||||
$enable_code_highlight = true;
|
||||
$enable_glider = true;
|
||||
$enable_gallery = true;
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
|
||||
@@ -63,8 +63,6 @@ These files are required and need to be installed manually for the website to wo
|
||||
* Apache 2.4 & PHP 8.1 or newer
|
||||
* Font Awesome Pro v5.15.3
|
||||
* `/resources/FontAwesomePro/`
|
||||
* Glider.js v1.7.6
|
||||
* `/resources/GliderJs/`
|
||||
* Highlight.js v11.6.0
|
||||
* `/resources/HighlightJS/`
|
||||
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
// Creating the galleries from Glider.js
|
||||
|
||||
window.addEventListener('load', function(){
|
||||
document.querySelectorAll(".glider").forEach(element => {
|
||||
console.debug("Creating glider...");
|
||||
console.debug(element);
|
||||
|
||||
let glider = new Glider(element, {
|
||||
slidesToShow: 1,
|
||||
draggable: true,
|
||||
scrollLock: true,
|
||||
scrollLockDelay: 125,
|
||||
rewind: true,
|
||||
arrows: {
|
||||
prev: element.previousSibling,
|
||||
next: element.nextSibling
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
duration: 0.25
|
||||
}
|
||||
},{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
console.debug(glider);
|
||||
|
||||
// Processing the images
|
||||
const eImages = [];
|
||||
|
||||
// Converting the Node to a HTMLElement if needed and desired.
|
||||
element.childNodes[0].childNodes.forEach(childrenNode => {
|
||||
if(childrenNode.nodeType !== Node.ELEMENT_NODE) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Casting from a Node to a proper HTMLElement because of course we have to add this step in JS...
|
||||
const eChildElement = childrenNode.cloneNode(true);
|
||||
|
||||
if(eChildElement.tagName.toLowerCase() !== "img") {
|
||||
return;
|
||||
}
|
||||
|
||||
eChildElement.onclick = function() {
|
||||
let eModalImage = document.createElement("img")
|
||||
eModalImage.classList.add("modal-inner-image");
|
||||
eModalImage.classList.add("r-xl");
|
||||
eModalImage.src = eChildElement.src;
|
||||
eModalImage.alt = eChildElement.alt;
|
||||
//halfmoon.toggleModal('modal-content-image-viewer');
|
||||
//console.log("Opening image...");
|
||||
showContentModal(eModalImage);
|
||||
};
|
||||
|
||||
// Saving the element for later.
|
||||
eImages.push(eChildElement);
|
||||
});
|
||||
|
||||
// Removing the nodes so that the desired ones can be reinserted later.
|
||||
// We start from the rear to prevent issues with de-ordering as we delete them !
|
||||
for(let i = element.childNodes[0].childNodes.length - 1; i >= 0; i--) {
|
||||
element.childNodes[0].removeChild(element.childNodes[0].childNodes[i]);
|
||||
}
|
||||
|
||||
eImages.forEach(eImageElement => {
|
||||
element.childNodes[0].appendChild(eImageElement);
|
||||
});
|
||||
});
|
||||
|
||||
// The default modal animation looks like ass, jesus...
|
||||
let eImgModalCloseButton = document.getElementById("modal-img-close");
|
||||
if(eImgModalCloseButton != null) {
|
||||
eImgModalCloseButton.onclick = function() {
|
||||
halfmoon.toggleModal('modal-content-image-viewer');
|
||||
}
|
||||
}
|
||||
});
|
||||
14
resources/NibblePoker/js/nibblepoker-splide.js
Normal file
14
resources/NibblePoker/js/nibblepoker-splide.js
Normal file
@@ -0,0 +1,14 @@
|
||||
// Creating the galleries with SplideJs
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
new Splide( '.splide', {
|
||||
perPage: 2,
|
||||
cover: true,
|
||||
heightRatio: 0.4,
|
||||
breakpoints: {
|
||||
768: {
|
||||
perPage: 1,
|
||||
},
|
||||
},
|
||||
} ).mount();
|
||||
});
|
||||
1
resources/SplideJs
Submodule
1
resources/SplideJs
Submodule
Submodule resources/SplideJs added at efa458db47
@@ -48,8 +48,8 @@ if($contentManager->hasError) {
|
||||
$content_error_code = 500;
|
||||
}
|
||||
} else {
|
||||
$enable_code_highlight = true;
|
||||
$enable_glider = true;
|
||||
$enable_code_highlight = false;
|
||||
$enable_gallery = true;
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
@@ -141,6 +141,11 @@ include 'commons/DOM/sidebar.php';
|
||||
$doPrintRuler = false;
|
||||
foreach($contentManager->rootIndexEntries as $current_content) {
|
||||
/** @var ContentIndexEntry $current_content */
|
||||
|
||||
if($current_content->priority == -1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if($doPrintRuler) {
|
||||
echo('<hr class="subtle">');
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user