https://metallolom-lom-spb.ru/wp-content/themes/intermet/js/hero.js?ver=1.3.9

1
2   "use strict";
3   function isWebp() {
4      function testWebP(callback) {
5         let webP = new Image;
6         webP.onload = webP.onerror = function () {
7            callback(webP.height == 2);
8         };
9         webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
10      }
11      testWebP((function (support) {
12         let className = support === true ? "webp" : "no-webp";
13         document.documentElement.classList.add(className);
14      }));
15   }
16  
17
18
19const circleTxtList = document.querySelectorAll(".wheel");
20function wheelHeight() {
21   for (let item of circleTxtList) {
22      let height = getComputedStyle(item, null).width;
23      item.style.lineHeight = height;
24   }
25}
26
27let mobileMedia = window.matchMedia("(max-width: 768px)");
28   let wheelClass = ".circle-video-btn";
29let rotateTxtEl = document.querySelector(wheelClass);
30   
31   if (rotateTxtEl) {
32      let wheelWordSpace = Number(rotateTxtEl.getAttribute("word-space") ?? 20);
33      let wheelLetterSpace = Number(rotateTxtEl.getAttribute("letter-space") ?? 10);
34      textToWheel(rotateTxtEl);
35      rotateText(`${wheelClass} .wheel__inner`, wheelWordSpace);
36      rotateText(`${wheelClass} .wheel__txt`, wheelLetterSpace);
37   }
38   //! Смещение символов и слов
39   function rotateText(wheelClass, step) {
40      let circleBtnInner = document.querySelectorAll(wheelClass);
41      let deg = 0;
42      for (let item of circleBtnInner) {
43         item.style.transform = ` rotate(${deg}deg) translateX(-50%)`;
44         deg += step;
45      }
46      return step;
47   }
48   //! создаем из текста отдельные элементы для слов и символов для скругленного текста
49   function textToWheel(rotateTxtEl) {
50      if (rotateTxtEl) {
51         let rotateRadius = rotateTxtEl.clientWidth / 2;
52         rotateTxtEl.style.height = `${rotateTxtEl.clientWidth}px`;
53         console.log(rotateRadius);
54         let rotateTxt = rotateTxtEl.textContent.trim();
55         rotateTxtEl.textContent = null;
56         let wordList = rotateTxt.split(" ");
57         for (let word of wordList) {
58            let newInner = document.createElement("div");
59            newInner.classList.add("wheel__inner");
60            for (let item of word.split("")) {
61               let newContent = document.createElement("div");
62               newContent.classList.add("wheel__txt");
63               newContent.textContent = item.trim();
64               newContent.style.paddingBottom = `${rotateRadius - 20}px`;
65               newInner.appendChild(newContent);
66            }
67            rotateTxtEl.appendChild(newInner);
68         }
69      }
70   }
71   //! изменение деаметра текста по кругу при ресайзе
72   function mobileMediaResize() {
73      rotateTxtEl.style.height = `${rotateTxtEl.clientWidth}px`;
74      for (let item of rotateTxtEl.querySelectorAll(".wheel__txt")) item.style.paddingBottom = `${rotateTxtEl.clientWidth / 2 - 40}px`;
75   }
76
77   mobileMedia.addEventListener('change', (event) => {
78      if (rotateTxtEl) {
79         
80         if (!mobileMedia.matches) {
81            wheelHeight();
82            mobileMediaResize();
83         }
84         else { 
85            wheelHeight();
86            mobileMediaResize();
87         }
88      }
89      // if (table) {
90      //    if (!mobileMedia.matches) {
91      //       if (defaultTablePos) {
92      //          defaultTablePos.appendChild(table);
93      //       }
94      //    }
95      //    else {
96      //       let activeMenuItem = document.querySelector('.price-menu__item.active');
97      //       if (activeMenuItem) {
98      //          activeMenuItem.parentNode.insertBefore(table, activeMenuItem.nextSibling);
99      //       }
100      //    }
101      // };
102   });