[
https://issues.apache.org/jira/browse/BEAM-14145?focusedWorklogId=754030&page=com.atlassian.jira.plugin.system.issuetabpanels:worklog-tabpanel#worklog-754030
]
ASF GitHub Bot logged work on BEAM-14145:
-----------------------------------------
Author: ASF GitHub Bot
Created on: 07/Apr/22 12:46
Start Date: 07/Apr/22 12:46
Worklog Time Spent: 10m
Work Description: bullet03 commented on code in PR #17205:
URL: https://github.com/apache/beam/pull/17205#discussion_r845091808
##########
website/www/site/assets/js/quotes-slider.js:
##########
@@ -10,33 +10,99 @@
// 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);
- });
+function calcBodyWidth() {
+ return window.innerWidth && document.documentElement.clientWidth ?
+ Math.min(window.innerWidth, document.documentElement.clientWidth) :
+ window.innerWidth ||
+ document.documentElement.clientWidth ||
+ document.getElementsByTagName('body')[0].clientWidth;
+}
+
+(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';
+
+ var tabletWidth = 1024;
+ var bodyWidth = calcBodyWidth();
+ var isDesktopWidth = bodyWidth >= tabletWidth;
+
+ 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;
+
+ // create and add additional div wrappers over group of 3 cards
+ 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 updateClasses(instance) {
- var slide = instance.details().relativeSlide;
+ var isNeedLoop = true;
+ if (isDesktopWidth && actualCountOfSlides <=
CountOfSlides.renderedOnDesktop) {
+ isNeedLoop = false;
+ }
+ if (!isDesktopWidth && actualCountOfSlides === CountOfSlides.min) {
+ isNeedLoop = false;
+ }
- var dots = document.querySelectorAll(".dot");
- dots.forEach(function (dot, idx) {
- idx === slide
- ? dot.classList.add("dot--active")
- : dot.classList.remove("dot--active");
+ var slider = new KeenSlider(currentSliderSelector, {
Review Comment:
done
Issue Time Tracking
-------------------
Worklog Id: (was: 754030)
Time Spent: 1h 50m (was: 1h 40m)
> [Website] Add carousel on the Home Page for They tried it out section
> ---------------------------------------------------------------------
>
> Key: BEAM-14145
> URL: https://issues.apache.org/jira/browse/BEAM-14145
> Project: Beam
> Issue Type: Improvement
> Components: website
> Reporter: Aydar Zaynutdinov
> Assignee: Bulat Safiullin
> Priority: P3
> Labels: website
> Attachments: image-2022-03-23-05-45-05-105.png,
> image-2022-03-24-11-13-06-901.png
>
> Time Spent: 1h 50m
> Remaining Estimate: 0h
>
> Need to add a carousel on the Home Page for They tried it out section.
>
> !image-2022-03-23-05-45-05-105.png|width=503,height=233!
> * Carousel similar to [Istio: |http://example.com/]
> [https://istio.io/latest/]
> * Show 3 cards at once, no autorotation
> * Users can look at other cards by using the dots below the menu
> !image-2022-03-24-11-13-06-901.png|width=400,height=227!
>
> Add 2 more logos to carousel:
> Google Cloud Dataflow:
> "Google Cloud Dataflow is a fully managed service for executing Apache Beam
> pipelines within the Google Cloud Platform ecosystem."
> Scio:
> "Scio is a Scala API for Apache Beam and Google Cloud Dataflow inspired by
> Apache Spark and Scalding."
>
--
This message was sent by Atlassian Jira
(v8.20.1#820001)
