You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pulsar.apache.org by ur...@apache.org on 2022/04/02 01:59:30 UTC
[pulsar-site] branch main updated: adding pagination to carousel
This is an automated email from the ASF dual-hosted git repository.
urfree pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new 19ee8bf adding pagination to carousel
new c549100 Merge pull request #46 from Paul-TT/paul-tt-website-new
19ee8bf is described below
commit 19ee8bf4961702d7a209d554456a922238de7840
Author: Paul Thomas Au <pa...@traverstodd.com>
AuthorDate: Fri Apr 1 08:38:31 2022 -0700
adding pagination to carousel
---
site2/website-next/src/css/custom.css | 3 ++
site2/website-next/src/pages/community.js | 70 +++++++++++++++++++++++++++----
2 files changed, 66 insertions(+), 7 deletions(-)
diff --git a/site2/website-next/src/css/custom.css b/site2/website-next/src/css/custom.css
index cdf6cad..dca9083 100644
--- a/site2/website-next/src/css/custom.css
+++ b/site2/website-next/src/css/custom.css
@@ -651,6 +651,9 @@ html[data-theme="dark"] .featured-card--inner {background-color: rgba(34, 34, 34
#slider {width: 100%; height: 0; padding-top: 66.5%;}
.slide-image {opacity: 0; position: absolute; left:0; top:0; object-fit: cover; width: 100%; height: 100%; object-position: 50% 50%; transform: scale(.95);}
.slide-image.active-slide {opacity: 1; transform: scale(1); transition: all 0.5s ease;}
+.pagination {text-align: center; margin-top: 10px; display: inline-block; width: 100%; ;}
+.dot {width: 15px; height: 15px; background-color: #1379da; border: 2px solid #1379da; margin: 0 10px; border-radius: 50%; display: inline-block; cursor: pointer; transition: all 0.3s ease;}
+.dot.active-dot, .dot:hover {background-color: #fff; }
/* BLOG */
.blog-list-page .main-wrapper article footer.docusaurus-mt-lg {margin-right: 30px;}
diff --git a/site2/website-next/src/pages/community.js b/site2/website-next/src/pages/community.js
index bc17a6e..be0b6bf 100644
--- a/site2/website-next/src/pages/community.js
+++ b/site2/website-next/src/pages/community.js
@@ -11,7 +11,25 @@ import WavySeparatorSix from '@site/static/img/separator-6.svg';
import { pageUrl } from "@site/src/utils/index";
const teamObj = require("../../data/team.js");
export default function Community(props) {
+
+ // Images in this array are used in the carousel
+ const slidesArr = [
+ {
+ img: useBaseUrl('/img/community-photo-small.jpg'),
+ alt: 'community photo'
+ },
+ {
+ img: useBaseUrl('/img/community-image-2.jpg'),
+ alt: 'community photo 2'
+ },
+ {
+ img: useBaseUrl('/img/community-image-2.jpg'),
+ alt: 'community photo 3'
+ },
+ ];
+
useEffect((d) => {
+ // used to scroll to anchor on the page
if(location.hash){
let hash = location.hash;
let id = hash.split('-')[1];
@@ -24,6 +42,7 @@ export default function Community(props) {
}
}
+ // highlights the link in the navigation when that section is in the viewport
const sections = document.querySelectorAll(".scrollable");
const links = document.querySelectorAll(".scroll-link");
var observer = new IntersectionObserver(
@@ -32,11 +51,9 @@ export default function Community(props) {
let id = entries[0].target.id;
let target = 'scroll-'+id;
links.forEach(l => {
- console.log(l);
l.classList.remove('active-section');
});
let finalTarget = document.getElementById(target);
- console.log(target);
if(finalTarget){
finalTarget.classList.add('active-section');
}
@@ -48,21 +65,47 @@ export default function Community(props) {
observer.observe(document.getElementById(s.id));
});
- const first = document.getElementById('slider').firstChild;
+ // This code runs the image carousel
const slides = document.querySelectorAll('.slide-image');
+ const allDots = document.getElementsByClassName('dot');
+ var showSlide = function() {
+ let id = this.getAttribute("id");
+ let slideId = id.replace('dot', 'slide');
+ let target = document.getElementById(slideId);
+ var active = document.querySelector('.active-slide');
+ var activeDot = document.querySelector('.active-dot');
+ active.classList.remove('active-slide');
+ activeDot.classList.remove('active-dot');
+ this.classList.add('active-dot');
+ target.classList.add('active-slide');
+ clearInterval(interval);
+ };
+ for (var i = 0; i < allDots.length; i++) {
+ allDots[i].addEventListener('click', showSlide, false);
+ }
+
+ const firstSlide = document.getElementById('slide-0');
+ const firstDot = document.getElementById('dot-0');
+ firstSlide.classList.add('active-slide');
+ firstDot.classList.add('active-dot');
+ const dots = document.querySelectorAll('.dot');
const slideCount = slides.length;
const intervalTime = 4000;
let interval;
let counter = 0;
function cycleSlides(){
var active = document.querySelector('.active-slide');
+ var activeDot = document.querySelector('.active-dot');
active.classList.remove('active-slide');
+ activeDot.classList.remove('active-dot');
if (counter === (slideCount - 1)){
slides[0].classList.add('active-slide');
+ dots[0].classList.add('active-dot');
counter = 0;
} else {
var next = counter++;
slides[next].nextElementSibling.classList.add('active-slide');
+ dots[next].nextElementSibling.classList.add('active-dot');
counter + 1;
}
}
@@ -109,11 +152,24 @@ export default function Community(props) {
<div className="image-bg-container p-8 md:w-1/2">
<div id="slider" className="relative">
{/*
- NOTE: The first image must have a class of "active-slide". Add as many images as desired
+ NOTE: add images to the slidesArr array above to include the in the image carousel.
*/}
- <img className="slide-image active-slide" src={useBaseUrl('/img/community-photo-small.jpg')} alt="pulsar community photo" />
- <img className="slide-image" src={useBaseUrl('/img/community-image-2.jpg')} alt="pulsar community photo" />
- <img className="slide-image" src={useBaseUrl('/img/community-image-3.jpg')} alt="pulsar community photo" />
+ {slidesArr.map((s,i) =>
+ (() => {
+ return(
+ <img id={`slide-${i}`} key={i} className="slide-image" src={s.img} alt={s.alt} />
+ )
+ })()
+ )}
+ </div>
+ <div className="pagination">
+ {slidesArr.map((d,i) =>
+ (() => {
+ return(
+ <div id={`dot-${i}`} key={i} className="dot"></div>
+ )
+ })()
+ )}
</div>
</div>
</div>