bullet03 commented on code in PR #17205:
URL: https://github.com/apache/beam/pull/17205#discussion_r845116810
##########
website/www/site/assets/js/quotes-slider.js:
##########
@@ -10,33 +10,123 @@
// License for the specific language governing permissions and limitations
under
// the License.
-var slider = new KeenSlider("#my-keen-slider", {
- loop: true,
- created: function (instance) {
- var dots_wrapper = document.getElementById("dots");
- var slides = document.querySelectorAll(".keen-slider__slide");
- slides.forEach(function (t, idx) {
- var dot = document.createElement("button");
- dot.classList.add("dot");
- dots_wrapper.appendChild(dot);
- dot.addEventListener("click", function () {
- instance.moveToSlide(idx);
- });
+const tabletWidth = 1024;
+
+function calcBodyWidth() {
+ if (window.innerWidth && document.documentElement.clientWidth) {
+ return Math.min(window.innerWidth, document.documentElement.clientWidth);
+ } else {
+ return (
+ window.innerWidth ||
+ document.documentElement.clientWidth ||
+ document.getElementsByTagName('body')[0].clientWidth
+ );
+ }
+}
+
+function addWrapperOverGroupOfCards(wrappingData) {
+ const {
+ isDesktopWidth,
+ actualCountOfSlides,
+ CountOfSlides,
+ classOneSlide,
+ classOneSlideExtra,
+ slidesDOM,
+ currentSliderDOM
+ } = wrappingData;
+
+ if (isDesktopWidth) {
+ var numOfExtraGroupWrappers = Math.ceil(actualCountOfSlides /
CountOfSlides.renderedOnDesktop);
+ var extraGroupWrappers = new
Array(numOfExtraGroupWrappers).fill(null).map(() => {
+ var extraGroupWrapperDOM = document.createElement('div');
+ extraGroupWrapperDOM.classList.add(classOneSlide, classOneSlideExtra);
+ return extraGroupWrapperDOM;
+ });
+ slidesDOM.forEach((oneSlideDOM, idx) => {
+ oneSlideDOM.classList.remove(classOneSlide);
+ extraGroupWrappers[Math.floor(idx /
CountOfSlides.renderedOnDesktop)].append(oneSlideDOM);
+ });
+ extraGroupWrappers.forEach((oneExtraGroupWrapper) => {
+ currentSliderDOM.append(oneExtraGroupWrapper);
});
- updateClasses(instance);
- },
- slideChanged(instance) {
- updateClasses(instance);
}
-});
+}
+
+(function () {
+ var CountOfSlides = {
+ min: 1,
+ renderedOnDesktop: 3,
+ }
+
+ var Selectors = {
+ desktopSlider: '.quotes-desktop.keen-slider-JS',
+ mobileSlider: '.quote-mobile.keen-slider-JS',
+ oneSlide: '.keen-slider__slide',
+ }
+
+ var classOneSlideExtra = 'wrap-slide';
+ var classOneSlide = 'keen-slider__slide';
+ var classVisible = 'visible';
-function updateClasses(instance) {
- var slide = instance.details().relativeSlide;
+ var bodyWidth = calcBodyWidth();
+ var isDesktopWidth = bodyWidth >= tabletWidth;
- var dots = document.querySelectorAll(".dot");
- dots.forEach(function (dot, idx) {
- idx === slide
- ? dot.classList.add("dot--active")
- : dot.classList.remove("dot--active");
+ var currentSliderSelector = isDesktopWidth ? Selectors.desktopSlider :
Selectors.mobileSlider;
+ var currentSliderDOM = document.querySelector(currentSliderSelector);
+ currentSliderDOM.classList.add(classVisible);
+
+ var slidesDOM = currentSliderDOM.querySelectorAll(".keen-slider__slide");
+ var actualCountOfSlides =
currentSliderDOM.querySelectorAll(Selectors.oneSlide).length;
+
+ addWrapperOverGroupOfCards({
+ isDesktopWidth,
+ actualCountOfSlides,
+ CountOfSlides,
+ classOneSlide,
+ classOneSlideExtra,
+ slidesDOM,
+ currentSliderDOM
});
-}
\ No newline at end of file
+
+ var isLoop = true;
+ if (isDesktopWidth && actualCountOfSlides <=
CountOfSlides.renderedOnDesktop) {
+ isLoop = false;
+ }
+ if (!isDesktopWidth && actualCountOfSlides === CountOfSlides.min) {
+ isLoop = false;
+ }
+
+ new KeenSlider(currentSliderSelector, {
+ slidesPerView: CountOfSlides.min,
+ loop: isLoop,
+ created: function (instance) {
+ if (isLoop) {
+ var dots_wrapper = document.getElementById("dots");
+ var slides = currentSliderDOM.querySelectorAll(".keen-slider__slide");
+ slides.forEach(function (t, idx) {
Review Comment:
done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: github-unsubscr...@beam.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
