Add destroy. Add BEM in index

stepancar-web-programming · Mar 3, 2024 · 037349e · 037349e
1 parent fb174b4
commit 037349e
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 89 deletions.
diff --git a/content.css b/content.css
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 * {
   margin: 0;
   padding: 0;

diff --git a/index.html b/index.html
@@ -26,18 +26,20 @@
           <h1 class="hero-title">Артем</h1>
           <p class="hero-description">
             Привет, я учусь в ИТМО. Можете написать мне в
-            <a class="hero-link" href="https://t.me/cumsayhello">телеграм.</a>
+            <a class="hero-description__link" href="https://t.me/cumsayhello"
+              >телеграм.</a
+            >
           </p>
 
           <p class="hero-description">
             Я очень люблю котиков, поэтому
-            <a class="hero-link" href="content.html">тут</a>
+            <a class="hero-description__link" href="content.html">тут</a>
             вы можете посмотреть видео и полистать фото c ними...
           </p>
         </div>
 
         <div class="hero-box">
-          <img class="hero-box-img" src="res/me.png" alt="Это я" />
+          <img class="hero-box__img" src="res/me.png" alt="Это я" />
         </div>
       </div>
     </div>

diff --git a/script.js b/script.js
@@ -1,7 +1,46 @@
 const initSlider = () => {
   const initCarousel = (containerId, images) => {
     const container = document.getElementById(containerId)
-    const imageList = container.querySelector('.image-list')
+    let imageList = container.querySelector('.image-list')
+    let maxScrollLeft
+
+    const destroyCarousel = () => {
+      imageList.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', updateSlider)
+      imageList = null
+      maxScrollLeft = null
+    }
+
+    const updateMaxScrollLeft = () => {
+      maxScrollLeft = imageList.scrollWidth - imageList.clientWidth
+    }
+
+    const updateSlider = () => {
+      updateMaxScrollLeft()
+      updateScrollThumbPosition()
+      handleSlideButtons()
+    }
+
+    const handleScroll = () => {
+      updateScrollThumbPosition()
+      handleSlideButtons()
+    }
+
+    const updateScrollThumbPosition = () => {
+      const scrollPosition = imageList.scrollLeft
+      const thumbPosition =
+        (scrollPosition / maxScrollLeft) *
+        (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth)
+      scrollbarThumb.style.left = `${thumbPosition}px`
+    }
+
+    const handleSlideButtons = () => {
+      slideButtons[0].style.display = imageList.scrollLeft <= 0 ? 'none' : 'flex'
+      slideButtons[1].style.display =
+        imageList.scrollLeft >= maxScrollLeft ? 'none' : 'flex'
+    }
+
+    window.addEventListener('resize', updateSlider)
 
     images.forEach(imageSrc => {
       const image = document.createElement('img')
@@ -13,14 +52,21 @@ const initSlider = () => {
     const slideButtons = container.querySelectorAll('.slide-button')
     const sliderScrollbar = container.querySelector('.slider-scrollbar')
     const scrollbarThumb = sliderScrollbar.querySelector('.scrollbar-thumb')
-    const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth
+
+    updateSlider()
+
+    slideButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const direction = button.id === 'prev-slide' ? -1 : 1
+        const scrollAmount = imageList.clientWidth * direction
+        imageList.scrollBy({ left: scrollAmount, behavior: 'smooth' })
+      })
+    })
 
     scrollbarThumb.addEventListener('mousedown', (e) => {
       const startX = e.clientX
       const thumbPosition = scrollbarThumb.offsetLeft
-      const maxThumbPosition =
-            sliderScrollbar.getBoundingClientRect().width -
-            scrollbarThumb.offsetWidth
+      const maxThumbPosition = sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth
 
       const handleMouseMove = (e) => {
         const deltaX = e.clientX - startX
@@ -30,14 +76,13 @@ const initSlider = () => {
           Math.min(maxThumbPosition, newThumbPosition)
         )
         const scrollPosition =
-            (boundedPosition / maxThumbPosition) * maxScrollLeft
+          (boundedPosition / maxThumbPosition) * maxScrollLeft
 
         scrollbarThumb.style.left = `${boundedPosition}px`
         imageList.scrollLeft = scrollPosition
       }
 
       const handleMouseUp = () => {
-        console.log('mouseup-event')
         document.removeEventListener('mousemove', handleMouseMove)
         document.removeEventListener('mouseup', handleMouseUp)
       }
@@ -46,38 +91,16 @@ const initSlider = () => {
       document.addEventListener('mouseup', handleMouseUp)
     })
 
-    slideButtons.forEach((button) => {
-      button.addEventListener('click', () => {
-        const direction = button.id === 'prev-slide' ? -1 : 1
-        const scrollAmount = imageList.clientWidth * direction
-        imageList.scrollBy({ left: scrollAmount, behavior: 'smooth' })
-      })
-    })
+    imageList.addEventListener('scroll', handleScroll)
 
-    const handleSlideButtons = () => {
-      slideButtons[0].style.display = imageList.scrollLeft <= 0 ? 'none' : 'flex'
-      slideButtons[1].style.display =
-        imageList.scrollLeft >= maxScrollLeft ? 'none' : 'flex'
-    }
-
-    const updateScrollThumbPosition = () => {
-      const scrollPosition = imageList.scrollLeft
-      const thumbPosition =
-        (scrollPosition / maxScrollLeft) *
-        (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth)
-      scrollbarThumb.style.left = `${thumbPosition}px`
-    }
-
-    imageList.addEventListener('scroll', () => {
-      updateScrollThumbPosition()
-      handleSlideButtons()
-    })
+    return destroyCarousel
   }
+
   const slider1Images = ['res/1.jpg', 'res/2.jpg', 'res/3.jpg', 'res/4.jpg', 'res/5.jpg', 'res/1.jpg']
-  initCarousel('slider1', slider1Images)
+  const destroySlider1 = initCarousel('slider1', slider1Images)
 
   const slider2Images = ['res/6.jpg', 'res/7.jpg', 'res/8.jpg', 'res/9.jpg', 'res/10.jpg', 'res/9.jpg']
-  initCarousel('slider2', slider2Images)
+  const destroySlider2 = initCarousel('slider2', slider2Images)
 }
 
 function scrollToBottom () {
@@ -87,9 +110,4 @@ function scrollToBottom () {
   })
 }
 
-let isListenerAdded = false
-
-window.addEventListener('resize', () => {
-  isListenerAdded = false
-})
 window.addEventListener('load', initSlider)
diff --git a/style.css b/style.css
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 *,
 ::before,
 ::after {
@@ -77,12 +78,12 @@ h3 {
   display: flex;
 }
 
-.hero-link {
+.hero-description__link {
   margin-top: 50px;
   color: #000;
 }
 
-.hero-link:hover {
+.hero-description__link:hover {
   color: #4facfe;
 }
 
@@ -96,54 +97,10 @@ h3 {
   box-shadow: 2px 5px 10px rgb(0 0 0 / 50%);
 }
 
-.hero-box-img {
+.hero-box__img {
   animation: ava-bg 3s infinite alternate;
 }
 
-.slider {
-  max-width: 90%;
-  position: relative;
-  margin: auto;
-  height: 300px;
-}
-
-.slider .item img {
-  object-fit: cover;
-  width: 100%;
-  height: 300px;
-}
-
-.slider .previous,
-.slider .next {
-  cursor: pointer;
-  position: absolute;
-  top: 50%;
-  width: auto;
-  margin-top: -22px;
-  padding: 16px;
-  color: white;
-  font-weight: bold;
-  font-size: 16px;
-  transition: 0.6s ease;
-  border-radius: 0 3px 3px 0;
-}
-
-.slider .next {
-  right: 0;
-  border-radius: 3px 0 0 3px;
-}
-
-.slider .previous:hover,
-.slider .next:hover {
-  background-color: rgb(0 0 0 / 20%);
-}
-
-/* Анимация слайдов: */
-.slider .item {
-  animation-name: fade;
-  animation-duration: 1.5s;
-}
-
 @keyframes fade {
   from {
     opacity: 0.4;