From 5fea46a052415a2d20c076fec69ba3f737dc28df Mon Sep 17 00:00:00 2001 From: Fer-Bar Date: Sun, 14 Apr 2024 00:11:50 -0400 Subject: [PATCH 1/7] Added new functionality for scrolling the carousel --- pet/static/pet/js/carousel.js | 100 +++++++++++++++------------------- 1 file changed, 43 insertions(+), 57 deletions(-) diff --git a/pet/static/pet/js/carousel.js b/pet/static/pet/js/carousel.js index 00aed83..bace4d9 100644 --- a/pet/static/pet/js/carousel.js +++ b/pet/static/pet/js/carousel.js @@ -1,47 +1,59 @@ -const wrapper = document.querySelector(".wrapper-carousel"); const carousel = document.querySelector(".carousel-secondary"); -const firstCardWidth = carousel.querySelector(".card-secondary").offsetWidth; const arrowBtns = document.querySelectorAll(".wrapper-carousel i"); -const carouselChildren = [...carousel.children]; +let carouselChildren = [...carousel.children]; +const cardCount = carouselChildren.length; -let isDragging = false, isAutoPlay = false, startX, startScrollLeft, timeoutId; +let isDragging = false, startX, startScrollLeft; -// Get the number of cards that can fit in the carousel at once -let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth); - -// Insert copies of the last few cards to beginning of carousel for infinite scrolling -carouselChildren.slice(-cardPerView).reverse().forEach(card => { - carousel.insertAdjacentHTML("afterbegin", card.outerHTML); -}); - -// Insert copies of the first few cards to end of carousel for infinite scrolling -carouselChildren.slice(0, cardPerView).forEach(card => { - carousel.insertAdjacentHTML("beforeend", card.outerHTML); -}); +function getFirstCardWidth() { + return carousel.querySelector("ul > li.card-secondary").offsetWidth; // 1st secondary-card +} -// Scroll the carousel at appropriate position to hide first few duplicate cards on Firefox -carousel.classList.add("no-transition"); -carousel.scrollLeft = carousel.offsetWidth; -carousel.classList.remove("no-transition"); +function getCardPerView() { + return Math.round(carousel.offsetWidth / getFirstCardWidth()); +} // Add event listeners for the arrow buttons to scroll the carousel left and right -arrowBtns.forEach(btn => { - btn.addEventListener("click", () => { - carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth; +function addArrowButtonListeners() { + arrowBtns.forEach(btn => { + btn.addEventListener("click", () => { + let firstCardWidth = getFirstCardWidth(); + carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth; + + if (btn.id === "left") { + // Remove the last card and add it to the beginning + let lastCard = carouselChildren.pop(); + carouselChildren.unshift(lastCard); + carousel.insertBefore(lastCard, carousel.firstChild); + } else { + // Remove the first card and add it to the end + let firstCard = carouselChildren.shift(); + carouselChildren.push(firstCard); + carousel.removeChild(firstCard); + carousel.appendChild(firstCard); + } + }); }); -}); +} + +function checkArrowVisibility() { + let cardPerView = getCardPerView(); + if (cardCount >= cardPerView) { + arrowBtns.forEach(btn => btn.style.display = "block"); + } else { + arrowBtns.forEach(btn => btn.style.display = "none"); + } +} const dragStart = (e) => { isDragging = true; carousel.classList.add("dragging"); - // Records the initial cursor and scroll position of the carousel startX = e.pageX; startScrollLeft = carousel.scrollLeft; } const dragging = (e) => { - if(!isDragging) return; // if isDragging is false return from here - // Updates the scroll position of the carousel based on the cursor movement + if(!isDragging) return; carousel.scrollLeft = startScrollLeft - (e.pageX - startX); } @@ -50,35 +62,9 @@ const dragStop = () => { carousel.classList.remove("dragging"); } -const infiniteScroll = () => { - // If the carousel is at the beginning, scroll to the end - if(carousel.scrollLeft === 0) { - carousel.classList.add("no-transition"); - carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth); - carousel.classList.remove("no-transition"); - } - // If the carousel is at the end, scroll to the beginning - else if(Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) { - carousel.classList.add("no-transition"); - carousel.scrollLeft = carousel.offsetWidth; - carousel.classList.remove("no-transition"); - } - - // Clear existing timeout & start autoplay if mouse is not hovering over carousel - clearTimeout(timeoutId); - if(!wrapper.matches(":hover")) autoPlay(); -} - -const autoPlay = () => { - if(window.innerWidth < 800 || !isAutoPlay) return; // Return if window is smaller than 800 or isAutoPlay is false - // Autoplay the carousel after every 2500 ms - timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 2500); -} -autoPlay(); - +addArrowButtonListeners(); +window.addEventListener("load", checkArrowVisibility); +window.addEventListener("resize", checkArrowVisibility); carousel.addEventListener("mousedown", dragStart); carousel.addEventListener("mousemove", dragging); -document.addEventListener("mouseup", dragStop); -carousel.addEventListener("scroll", infiniteScroll); -wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId)); -wrapper.addEventListener("mouseleave", autoPlay); \ No newline at end of file +document.addEventListener("mouseup", dragStop); \ No newline at end of file From fca24475a813b53b8b483fb9499be3b26c1577cc Mon Sep 17 00:00:00 2001 From: Fer-Bar Date: Mon, 15 Apr 2024 00:43:20 -0400 Subject: [PATCH 2/7] Added secrets in django.yml file --- .github/workflows/django.yml | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml index 9d41094..f221079 100644 --- a/.github/workflows/django.yml +++ b/.github/workflows/django.yml @@ -22,11 +22,13 @@ jobs: with: python-version: ${{ matrix.python-version }} - name: Install Poetry + run: curl -sSL https://install.python-poetry.org | python - + - name: Set Environment Variables + env: + SECRET_KEY: ${{ secrets.SECRET_KEY }} run: | - curl -sSL https://install.python-poetry.org | python - + echo "SECRET_KEY=${SECRET_KEY}" > .env - name: Install Dependencies - run: | - poetry install + run: poetry install - name: Run Tests - run: | - poetry run python manage.py test + run: poetry run python manage.py test \ No newline at end of file From 504eb8347a5944f825836e2d0cf2483bbc08c92a Mon Sep 17 00:00:00 2001 From: Fer-Bar Date: Mon, 15 Apr 2024 00:48:57 -0400 Subject: [PATCH 3/7] Added secrets in django.yml file --- .github/workflows/django.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml index f221079..dfa4424 100644 --- a/.github/workflows/django.yml +++ b/.github/workflows/django.yml @@ -28,7 +28,8 @@ jobs: SECRET_KEY: ${{ secrets.SECRET_KEY }} run: | echo "SECRET_KEY=${SECRET_KEY}" > .env + echo "${{ secrets.SECRET_KEY }}" - name: Install Dependencies run: poetry install - - name: Run Tests + - name: Run TestsS run: poetry run python manage.py test \ No newline at end of file From 2c39a78937315e83dff55664dd2d3c0c7c133a7e Mon Sep 17 00:00:00 2001 From: Fer-Bar Date: Mon, 15 Apr 2024 00:56:48 -0400 Subject: [PATCH 4/7] Added secrets in django.yml file --- .github/workflows/django.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml index dfa4424..87f202d 100644 --- a/.github/workflows/django.yml +++ b/.github/workflows/django.yml @@ -9,6 +9,7 @@ on: jobs: build: runs-on: ubuntu-latest + environment: DEV_ENV strategy: max-parallel: 4 @@ -28,8 +29,7 @@ jobs: SECRET_KEY: ${{ secrets.SECRET_KEY }} run: | echo "SECRET_KEY=${SECRET_KEY}" > .env - echo "${{ secrets.SECRET_KEY }}" - name: Install Dependencies run: poetry install - - name: Run TestsS + - name: Run Tests run: poetry run python manage.py test \ No newline at end of file From 4258d49d9f06ebee126e727622eae76276dd5d0a Mon Sep 17 00:00:00 2001 From: Fer-Bar Date: Mon, 15 Apr 2024 00:59:22 -0400 Subject: [PATCH 5/7] Added secrets in django.yml file --- .github/workflows/django.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml index 87f202d..8232878 100644 --- a/.github/workflows/django.yml +++ b/.github/workflows/django.yml @@ -27,8 +27,7 @@ jobs: - name: Set Environment Variables env: SECRET_KEY: ${{ secrets.SECRET_KEY }} - run: | - echo "SECRET_KEY=${SECRET_KEY}" > .env + run: echo "SECRET_KEY=${SECRET_KEY}" > .env | ls | cat .env - name: Install Dependencies run: poetry install - name: Run Tests From f94870ef7eb1631eddf71d1f2c4dd89f8366f12b Mon Sep 17 00:00:00 2001 From: Fer-Bar Date: Mon, 15 Apr 2024 01:02:22 -0400 Subject: [PATCH 6/7] Added secrets in django.yml file --- .github/workflows/django.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml index 8232878..afb15c9 100644 --- a/.github/workflows/django.yml +++ b/.github/workflows/django.yml @@ -27,7 +27,7 @@ jobs: - name: Set Environment Variables env: SECRET_KEY: ${{ secrets.SECRET_KEY }} - run: echo "SECRET_KEY=${SECRET_KEY}" > .env | ls | cat .env + run: echo "SECRET_KEY=${SECRET_KEY}" > /home/runner/work/Albercan-Backend/Albercan-Backend/envs/.env - name: Install Dependencies run: poetry install - name: Run Tests From bda93e8eb5182671c19b785efb4553a8ee931dce Mon Sep 17 00:00:00 2001 From: Fernando Date: Mon, 15 Apr 2024 01:04:22 -0400 Subject: [PATCH 7/7] Update django.yml --- .github/workflows/django.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml index afb15c9..09d7b16 100644 --- a/.github/workflows/django.yml +++ b/.github/workflows/django.yml @@ -27,8 +27,8 @@ jobs: - name: Set Environment Variables env: SECRET_KEY: ${{ secrets.SECRET_KEY }} - run: echo "SECRET_KEY=${SECRET_KEY}" > /home/runner/work/Albercan-Backend/Albercan-Backend/envs/.env + run: echo "SECRET_KEY=${SECRET_KEY}" > ./envs/.env - name: Install Dependencies run: poetry install - name: Run Tests - run: poetry run python manage.py test \ No newline at end of file + run: poetry run python manage.py test