aziascreations/Web-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced GliderJs with SplideJS

Browse Source 
Update .gitmodules, head.php, and 10 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-12-15 15:27:45 +01:00
parent 6f6f3af8af
commit 0f63ab3371
12 changed files with 48 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitmodules vendored Normal file
View File

@@ -0,0 +1,3 @@
[submodule "resources/SplideJs"]
path = resources/SplideJs
url = https://github.com/Splidejs/splide.git

4
commons/DOM/head.php
View File

@@ -17,7 +17,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
if($enable_code_highlight) { if($enable_code_highlight) {
echo('<link href="/resources/HighlightJS/11.6.0/styles/atom-one-dark.min.css" rel="stylesheet"/>'); echo('<link href="/resources/HighlightJS/11.6.0/styles/atom-one-dark.min.css" rel="stylesheet"/>');
} }
if($enable_glider) { if($enable_gallery) {
echo('<link href="/resources/GliderJs/1.7.6/glider.min.css" rel="stylesheet"/>'); echo('<link href="/resources/SplideJs/dist/css/splide.min.css" rel="stylesheet"/>');
} }
?> ?>

9
commons/DOM/scripts.php
View File

@@ -5,8 +5,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
die(); die();
} }
if($enable_glider) { if($enable_gallery) {
echo('<script src="/resources/GliderJs/1.7.6/glider.min.js"></script>'); echo('<script src="/resources/SplideJs/dist/js/splide.min.js"></script>');
} }
if($enable_code_highlight) { if($enable_code_highlight) {
@@ -16,9 +16,8 @@ if($enable_code_highlight) {
?> ?>
<script src="/resources/NibblePoker/js/nibblepoker.min.js"></script> <script src="/resources/NibblePoker/js/nibblepoker.min.js"></script>
<?php <?php
if($enable_glider) { if($enable_gallery) {
// FIXME: Find out why the minified version is broken. (Only displays 1 pic per scroll position) echo('<script src="/resources/NibblePoker/js/nibblepoker-splide.js"></script>');
echo('<script src="/resources/NibblePoker/js/nibblepoker-glider.js"></script>');
} }
if($enable_code_highlight) { if($enable_code_highlight) {
echo('<script src="/resources/NibblePoker/js/nibblepoker-code.min.js"></script>'); echo('<script src="/resources/NibblePoker/js/nibblepoker-code.min.js"></script>');

18
commons/composer.php
View File

@@ -896,13 +896,21 @@ class ComposerElement {
break; break;
case ComposerElementTypes::GALLERY: case ComposerElementTypes::GALLERY:
$htmlCode .= '<div class="glider ' . $this->get_modifiers_classes() . '">'; if(!is_null($this->srTitle)) {
$htmlCode .= '<section class="splide border" aria-label="' . $this->srTitle . '">';
foreach($this->images as $galleryImageUrl) { $htmlCode .= '<h2 id="carousel-heading">' . $this->srTitle . '</h2>';
$htmlCode .= '<img src="'.$galleryImageUrl.'">'; } 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; break;
case ComposerElementTypes::VIDEO: case ComposerElementTypes::VIDEO:

2
commons/config.php
View File

@@ -31,7 +31,7 @@ $config_dir_tools = realpath($dir_commons . "/../" . "tools/");
// Optional features // Optional features
$enable_grids = false; $enable_grids = false;
$enable_code_highlight = false; $enable_code_highlight = false;
$enable_glider = false; $enable_gallery = false;
$enable_kitty_and_doggo_sounds = false; $enable_kitty_and_doggo_sounds = false;
// Easter-egg optional features // Easter-egg optional features

4
compile.bat
View File

@@ -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 call "%~dp0node_modules\.bin\terser" nibblepoker-code.js -c -m -o nibblepoker-code.min.js
echo ^> resources\NibblePoker\js\nibblepoker-contributors.js echo ^> resources\NibblePoker\js\nibblepoker-contributors.js
call "%~dp0node_modules\.bin\terser" nibblepoker-contributors.js -c -m -o nibblepoker-contributors.min.js call "%~dp0node_modules\.bin\terser" nibblepoker-contributors.js -c -m -o nibblepoker-contributors.min.js
echo ^> resources\NibblePoker\js\nibblepoker-glider.js echo ^> resources\NibblePoker\js\nibblepoker-splide.js
call "%~dp0node_modules\.bin\terser" nibblepoker-glider.js -c -m -o nibblepoker-glider.min.js call "%~dp0node_modules\.bin\terser" nibblepoker-splide.js -c -m -o nibblepoker-splide.min.js
popd popd
:libs-decimaljs-minify :libs-decimaljs-minify

2
content/index.php
View File

@@ -36,7 +36,7 @@ if($contentManager->hasError) {
} }
} else { } else {
$enable_code_highlight = true; $enable_code_highlight = true;
$enable_glider = true; $enable_gallery = true;
} }
?> ?>
<!DOCTYPE html> <!DOCTYPE html>

2
readme.md
View File

@@ -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 * Apache 2.4 & PHP 8.1 or newer
* Font Awesome Pro v5.15.3 * Font Awesome Pro v5.15.3
* `/resources/FontAwesomePro/` * `/resources/FontAwesomePro/`
* Glider.js v1.7.6
* `/resources/GliderJs/`
* Highlight.js v11.6.0 * Highlight.js v11.6.0
* `/resources/HighlightJS/` * `/resources/HighlightJS/`

85
resources/NibblePoker/js/nibblepoker-glider.js
View File

@@ -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
View 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

Submodule resources/SplideJs added at efa458db47

9
tools/index.php
View File

@@ -48,8 +48,8 @@ if($contentManager->hasError) {
$content_error_code = 500; $content_error_code = 500;
} }
} else { } else {
$enable_code_highlight = true; $enable_code_highlight = false;
$enable_glider = true; $enable_gallery = true;
} }
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
@@ -141,6 +141,11 @@ include 'commons/DOM/sidebar.php';
$doPrintRuler = false; $doPrintRuler = false;
foreach($contentManager->rootIndexEntries as $current_content) { foreach($contentManager->rootIndexEntries as $current_content) {
/** @var ContentIndexEntry $current_content */ /** @var ContentIndexEntry $current_content */
if($current_content->priority == -1) {
continue;
}
if($doPrintRuler) { if($doPrintRuler) {
echo('<hr class="subtle">'); echo('<hr class="subtle">');
} else { } else {