https://premiumstroi-ufa.ru/local/templates/guten/js/helpers/functions.js

1/**
2 * Функция блокировки скролла на странице
3 */
4
5function blockBody() {
6  let widthScroll = window.innerWidth - document.documentElement.clientWidth;
7  if (
8    getComputedStyle(document.documentElement).getPropertyValue(
9      "--body-overflow"
10    ) != "hidden"
11  ) {
12    changeStyleProperties({
13      "--body-overflow": "hidden",
14      "--body-right-padding": widthScroll + "px",
15    });
16  }
17}
18
19/**
20 * Разблокировка прокрутки страницы
21 */
22
23function unlockBody() {
24  changeStyleProperties({
25    "--body-overflow": "initial",
26    "--body-right-padding": `0px`,
27  });
28}
29
30/**
31 * Навешиваем макси на инпуты
32 */
33
34function maskInputs() {
35  maskPhone("+7 9__ ___-__-__");
36  maskWordInput();
37}
38
39/**
40 * Метод навешивание маски на все инпуты на странице с типом = 'tel'
41 * @param {string} [masked=+7 9__ ___-__-__] Маска инпута.
42 */
43function maskPhone(masked = "+7 9__ ___-__-__") {
44  const elems = document.querySelectorAll(`input[type="tel"]`);
45
46  function mask(event) {
47    const keyCode = event.keyCode;
48    const template = masked,
49      def = template.replace(/\D/g, ""),
50      val =
51        def.slice(0, def.length) +
52        this.value.replace(/\D/g, "").slice(def.length);
53    let i = 0,
54      newValue = template.replace(/[_\d]/g, function (a) {
55        return i < val.length ? val.charAt(i++) || def.charAt(i) : a;
56      });
57    i = newValue.indexOf("_");
58    if (i !== -1) {
59      newValue = newValue.slice(0, i);
60    }
61    let reg = template
62      .substr(0, this.value.length)
63      .replace(/_+/g, function (a) {
64        return "\\d{1," + a.length + "}";
65      })
66      .replace(/[+()]/g, "\\$&");
67    reg = new RegExp("^" + reg + "$");
68    if (
69      !reg.test(this.value) ||
70      this.value.length < 5 ||
71      (keyCode > 47 && keyCode < 58)
72    ) {
73      this.value = newValue;
74    }
75    if (event.type === "blur" && this.value.length < 5) {
76      this.value = "";
77    }
78  }
79
80  for (const elem of elems) {
81    // elem.placeholder = "+7 9__ ___-__-__";
82    elem.addEventListener("input", mask);
83    elem.addEventListener("focus", mask);
84    elem.addEventListener("blur", mask);
85  }
86}
87
88/**
89 * Метод навешивает маску запрета ввода чисел на все инпуты с селектором '.input-name-name'
90 */
91function maskWordInput() {
92  const elems = document.querySelectorAll(`.input-name-name`);
93
94  function mask(event) {
95    this.value = this.value.replace(/\d/g, "");
96  }
97
98  for (const elem of elems) {
99    elem.addEventListener("input", mask);
100    elem.addEventListener("focus", mask);
101    elem.addEventListener("blur", mask);
102  }
103}
104
105// Функция для изменения переменных в css
106// object - объект с наименованием переменных и их значений
107// пример: {"--main-font-size" : "16px"}
108// use - элемент к в котором будет назначена/изменена переменная, по умолчанию - :root
109
110/**
111 * Функция для изменения свойств в css
112 * @param {[key:string]: string} object Объект с наименованием переменных и их значений
113 * @param {HTMLElement} use элемент к в котором будет назначена/изменена переменная, по умолчанию - :root
114 *
115 * @example
116 * ```js
117 * const section = documen.querySelector(".section");
118 *
119 * const objectProperies = {
120 *  "--color": green,
121 *  "--font-size": 20px,
122 * }
123 *
124 * changeStyleProperties(objectProperies, setcion)
125 *
126 * // Тоже самое
127 *
128 * changeStyleProperties({
129 *  "--color": green,
130 *  "--font-size": 20px,
131 * }, setcion)
132 *
133 * ```
134 */
135function changeStyleProperties(object, use = document.documentElement) {
136  for (const prop of Object.entries(object)) {
137    use.style.setProperty(prop[0], prop[1]);
138  }
139}