Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

initial setup on thumbnail carousel with working example #198

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

initial setup on thumbnail carousel with working example #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d1bed3
initial setup on thumbnail carousel with working example
Aug 14, 2024
a6c3727
added missing package in package-lock.json
Aug 14, 2024
ca50c86
added thumbnail for content control section
Aug 14, 2024
9b77a17
added supporting files
Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,8 @@ const nodeFiles = [
'node_modules/indent.js/lib/indent.min.js',
<b>'node_modules/glider-js/glider.js',
'node_modules/glider-js/glider.css',</b>
<b>'node_modules/@splidejs/splide/dist/js/splide.min.js',
'node_modules/@splidejs/splide/dist/css/splide.min.css',</b>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should not be bolded. The paragraph above states:

"For example, when I added the glider-js library to Enable so I can use it in the Carousel demos, I added the files I needed for the front-end to nodeFiles with these two lines:"

Technically, what you have worked on is not a general carousel. It's an image gallery. We should change this PR to not use the word carousel, but image gallery. I'll make appropriate comments to reflect what we should change.

'node_modules/text-zoom-event/dist/textZoomEvent.module.js',
'node_modules/dialog-polyfill/index.js',
'node_modules/jquery/dist/jquery.min.js',
Expand Down
3 changes: 3 additions & 0 deletions TODO.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,9 @@ js/modules/combobox.js:
js/modules/enable-carousel.js:
16: import '../node_modules/glider-js/glider.js';

js/modules/enable-thumbnail-carousel.js:
16: import '../node_modules/@splidejs/splide/dist/js/splide.min.js';

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot this file exists. Please delete it. It is not needed anymore (all tickets are now in github Issues).

js/modules/enable-listbox.js:
16: import accessibility from '../../node_modules/accessibility-js-routines/dist/accessibility.module.js';

Expand Down
2 changes: 2 additions & 0 deletions bin/promote-node-modules-to-server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const fs = require('fs');
const fsExtra = require('fs-extra');
const { exec } = require('child_process');

Check warning on line 3 in bin/promote-node-modules-to-server.js

View workflow job for this annotation

GitHub Actions / Run ESLint scan 

'exec' is assigned a value but never used

console.log('Running promote-node-modules-to-server.js');
console.log('clearing lib directory');
Expand All @@ -11,6 +11,8 @@
'node_modules/indent.js/lib/indent.min.js',
'node_modules/glider-js/glider.js',
'node_modules/glider-js/glider.css',
'node_modules/@splidejs/splide/dist/js/splide.min.js',
'node_modules/@splidejs/splide/dist/css/splide.min.css',
'node_modules/text-zoom-event/dist/textZoomEvent.module.js',
'node_modules/dialog-polyfill/index.js',
'node_modules/jquery/dist/jquery.min.js',
Expand Down
2 changes: 2 additions & 0 deletions content/body/npm.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@
'~glider-js': path.resolve(__dirname, 'node_modules/glider-js'),
'../enable-node-libs/accessibility-js-routines/dist/accessibility.module.js': path.resolve(__dirname, 'node_modules/accessibility-js-routines/dist/accessibility.module'),
'~glider-js/glider.js': path.resolve(__dirname, 'node_modules/glider-js/glider'),
'~@splidejs/splide': path.resolve(__dirname, 'node_modules/@splidejs/splide'),
'~@splidejs/splide/dist/js/splide.min.js': path.resolve(__dirname, 'node_modules/@splidejs/splide/dist/js/splide.min.js'),
'~jquery/dist/jquery.min.js': path.resolve(__dirname, 'node_modules/jquery/src/jquery'),
'../enable-node-libs/ableplayer/thirdparty/js.cookie.js': path.resolve(__dirname, 'node_modules/js-cookie/dist/js.cookie')
},
Expand Down
73 changes: 73 additions & 0 deletions content/body/thumbnail-carousel.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<section class="enable-thumbnail-carousel" aria-labelledby="thumbnail-carousel-heading">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's call this page thumbnail-gallery.php

<h2 id="thumbnail-carousel-heading">Image Thumbnails Navigation Carousel Working Example</h2>
<div class="enable-thumbnail-carousel__wrapper">
<!-- Primary Slider Start-->
<div
id="main-carousel"
class="splide enable-thumbnail-carousel__main"
aria-label="The carousel with thumbnails. Selecting a thumbnail will change the Beautiful Gallery carousel.">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="images/carousel-example/00-turkish-spider-man.jpg"
alt="Bootleg versions of Spider-Man, Captain America and El Santo fighting." />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this example, I'd like to use product shots for something. I don't want to use the same images from another example.

</li>
<li class="splide__slide">
<img src="images/carousel-example/02-turkish-star-wars.jpg"
alt="Cüneyt Arkın kicking and fighting two beasts that look like they are in low budget furry costumes, while a woman being held by one of them looks on in awe." />
</li>
<li class="splide__slide">
<img src="images/carousel-example/01-samurai-cop.jpg"
alt="A man with a mullet and a maniacal face holding a sword in the middle of a field." />
</li>
<li class="splide__slide">
<img src="images/carousel-example/03-lady-terminator.jpg"
alt="An angry woman looking straight at the viewer with a gun blasting rounds in the same direction." />
</li>
</ul>
</div>
</div>
<!-- Primary Slider End-->
<!-- Thumbnal Slider Start-->
<div
id="thumbnail-carousel"
class="splide enable-thumbnail-carousel__slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="images/carousel-example/00-turkish-spider-man.jpg"
alt="Bootleg versions of Spider-Man, Captain America and El Santo fighting." />
</li>
<li class="splide__slide">
<img src="images/carousel-example/02-turkish-star-wars.jpg"
alt="Cüneyt Arkın kicking and fighting two beasts that look like they are in low budget furry costumes, while a woman being held by one of them looks on in awe." />
</li>
<li class="splide__slide">
<img src="images/carousel-example/01-samurai-cop.jpg"
alt="A man with a mullet and a maniacal face holding a sword in the middle of a field." />
</li>
<li class="splide__slide">
<img src="images/carousel-example/03-lady-terminator.jpg"
alt="An angry woman looking straight at the viewer with a gun blasting rounds in the same direction." />
</li>
</ul>
</div>
</div>
<!-- Thumbnal Slider End-->
</div>
</section>

<?= includeNPMInstructions(
"enable-thumbnail-carousel",
[],
"enable-thumbnail-carousel",
false,
[
"needsSplide" => true,
],
) ?>

<script type="module">
import EnableThumbnailCarousel from "./js/modules/enable-thumbnail-carousel.js";
EnableThumbnailCarousel();
</script>
3 changes: 3 additions & 0 deletions content/head/thumbnail-carousel.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<link href="~@splidejs/splide/dist/css/splide.min.css" rel="stylesheet" type="text/css" />
<link href="css/enable-visible-on-focus.css" rel="stylesheet">
<link href="css/thumbnail-carousel.css" rel="stylesheet">
31 changes: 31 additions & 0 deletions css/thumbnail-carousel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@

.enable-thumbnail-carousel__wrapper {
max-width: 670px;
width: 100%;
margin: 20px 0;
padding: 20px;
background: #e4e2e2;
border-radius: 3px;
}

.enable-thumbnail-carousel__main {
margin-bottom: 10px
}

.splide__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

.enable-thumbnail-carousel__slider .splide__slide {
opacity: 0.6;
}

.enable-thumbnail-carousel__slider .splide__slide.is-active {
opacity: 1;
}

.splide__arrow:disabled {
opacity: 0.5 !important;
}
1 change: 1 addition & 0 deletions enable-node-libs/@splidejs/splide/dist/css/splide.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions enable-node-libs/@splidejs/splide/dist/js/splide.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added images/main-menu/thumbnail-carousel.png
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change this image with the new images mentioned above.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/main-menu/thumbnail-carousel.webp
View file
Open in desktop
Binary file not shown.
48 changes: 48 additions & 0 deletions js/modules/enable-thumbnail-carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
'use strict'

/*******************************************************************************
* enable-thumbnail-carousel.js - Accessible shim over the Glider carousel
*
* Written by Zoltan Hawryluk <zoltan.dulac@gmail.com>
* Part of the Enable accessible component library.
* Version 1.0 released December 27, 2021
*
* More information about this script available at:
* https://www.useragentman.com/enable/carousel.php
*
* Released under the MIT License.
******************************************************************************/

import '../../enable-node-libs/@splidejs/splide/dist/js/splide.min.js';

const EnableThumbnailCarousel = function () {
const defaultOptions = {
pagination: false,
}
const main = new Splide('#main-carousel', {
...defaultOptions,
type: 'fade',
arrows: false,
lazyLoading: 'sequential',
});

const thumbnails = new Splide('#thumbnail-carousel', {
...defaultOptions,
fixedWidth: 150,
gap: 10,
isNavigation: true,
focus: 'center',
breakpoints: {
'768': {
fixedWidth: 125,
}
}
});

// sync the thumbnails slider as a target of main slider.
main.sync(thumbnails);
main.mount();
thumbnails.mount()
}

export default EnableThumbnailCarousel;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure where you'd change this, but I'd like to add the following changes:

  1. When the user tabs into the thumbnail, it reads "Go to slide ${n}". Can you change this to "Display slide ${n}"?
  2. When you click on a thumbnail, the aria-live region just reads the alt. Can you make it read "Now viewing: ${alt}".

1 change: 1 addition & 0 deletions js/modules/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { ablePlayerCustomizations, AblePlayerInstances } from "ablePlayerCustomi
import comboboxes from "combobox.js";
import animatedGifPause from "enable-animatedGif.js";
import EnableCarousel from "enable-carousel.js";
import EnableThumbnailCarousel from "enable-thumbnail-carousel.js";
import enableListbox from "enable-listbox.js";
import enableVisibleOnFocus from "enable-visible-on-focus.js";
import EnableFlyout from "enable-flyout-hamburger.js";
Expand Down
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"./combobox": "./js/modules/combobox.js",
"./enable-animatedGif": "./js/modules/enable-animatedGif.js",
"./enable-carousel": "./js/modules/enable-carousel.js",
"./enable-thumbnail-carousel": "./js/modules/enable-thumbnail-carousel.js",
"./enable-drawer": "./js/modules/enable-drawer.js",
"./enable-listbox": "./js/modules/enable-listbox.js",
"./enable-slider": "./js/modules/enable-slider.js",
Expand Down Expand Up @@ -116,6 +117,7 @@
"wget-improved": "^3.4.0"
},
"dependencies": {
"@splidejs/splide": "^4.1.4",
"bin-build": "^2.1.1",
"d3": "^7.8.5",
"dialog-polyfill": "^0.5.6",
Expand Down
1 change: 1 addition & 0 deletions php-list.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ alert.php
animated-gif-with-pause-button.php
button.php
carousel.php
thumbnail-carousel.php
checkbox.php
combobox.php
description-list.php
Expand Down
2 changes: 2 additions & 0 deletions php-ls.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ _01-alert-dialog.php
41-animated-hide-show.php
42-play-pause-animations-button.php
43-read-more.php
44-thumbnail-carousel.php
accessible-text-svg.php
alert-dialog.php
alert.php
Expand All @@ -62,6 +63,7 @@ authors.php
bottom-fixed-navigation.php
button.php
carousel.php
thumbnail-carousel.php
checkbox.php
combobox.php
date.php
Expand Down
1 change: 1 addition & 0 deletions sitemap.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ https://www.useragentman.com/enable/alert.php
https://www.useragentman.com/enable/animated-gif-with-pause-button.php
https://www.useragentman.com/enable/button.php
https://www.useragentman.com/enable/carousel.php
https://www.useragentman.com/enable/thumbnail-carousel.php
https://www.useragentman.com/enable/checkbox.php
https://www.useragentman.com/enable/combobox.php
https://www.useragentman.com/enable/description-list.php
Expand Down
5 changes: 5 additions & 0 deletions templates/data/meta-info.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@
"desc": "If you absolutely need carousels, you should really make them accessible and easily bypassed for keyboard and screen reader users.",
"isNPM": "true"
},
"thumbnail-carousel.php": {
"title": "Accessible Thumbnails Carousels",
"desc": "Enrich your next project with impressive accessible thumbnails carousel.",
"isNPM": "true"
},
"checkbox.php": {
"title": "Accessible Checkboxes",
"desc": "This page will show you how to code HTML5 and custom checkboxes in an accessible way, including indeterminate checkboxes."
Expand Down
8 changes: 8 additions & 0 deletions templates/includes/documentation-header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,14 @@ class="enable-flyout enable-flyout__level enable-flyout__dropdown">
},
"content": [

{
"id": "flyout__link",
"props": {
"label": "Thumbnail Carousel",
"url-slug": "thumbnail-carousel",
"alt": ""
}
},
{
"id": "flyout__link",
"props": {
Expand Down
3 changes: 1 addition & 2 deletions templates/includes/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ function dashesToCamelCase($string, $capitalizeFirstCharacter = false)
* $other: (array) contains other properties. Current ones are:
* - needsAccessibilityLib: (boolean) if we need accessibility.js
* - needsGlider: (boolean) if we need the Glider.js carousel library
* * - needsSplide: (boolean) if we need the Splide thumbnail carousel library
* - needsAblePlayerLibs: (boolean) if we need the AblePlayer library
* - otherImports: (string) JS code used to import 3rd party libraries
* - noCSS: (boolean) true if the module doesn't have any CSS included in Enable
Expand Down Expand Up @@ -353,5 +354,3 @@ function getURIPrefix()
}

getMetadata();

?>
4 changes: 4 additions & 0 deletions templates/includes/npm.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@
,'~glider-js': path.resolve(__dirname, 'node_modules/glider-js'),
'~glider-js/glider.js': path.resolve(__dirname, 'node_modules/glider-js/glider')
<?php } ?>
<?php if (array_key_exists("needsSplide", $other)) { ?>
'~splide': path.resolve(__dirname, 'node_modules/@splidejs/splide/dist'),
'~@splidejs/splide/dist/js/splide.js': path.resolve(__dirname, 'node_modules/@splidejs/splide/dist/js/splide')
<?php } ?>
<?php if (array_key_exists("needsAccessibilityLib", $other)) { ?>
,'../enable-libs/accessibility-js-routines/dist/accessibility.module.js': path.resolve(__dirname, 'node_modules/accessibility-js-routines/dist/accessibility.module')
<?php } ?>
Expand Down
Loading