Mizutsune

.add-panel_button.sending .svg{
    animation: fly-out-in var(--animation-duration) ease-in-out;
}

addTodoButton.addEventListener("click", () => {
     addTodoButton.classList.add("sending");
     addTodoButton.addEventListener("animationend", e => {
               addTodoButton.classList.remove("sending");
               addItem();
          }, { once: true }
     );
});

let shop_id = 82;
data[`SHOPID_${shop_id}`].name_shop;

const instance = tippy(".target");
const breakpoint = window.matchMedia("(max-width: 1200px)");

const breakpointChecker = () => {
     if (breakpoint.matches) {
              instance[0].setProps({
               placement: "bottom-end"
          });

     } else {
          instance[0].setProps({
               placement: "left-start"
          });
     }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();

// коллекция тултипов
const triggers = document.querySelectorAll(".item__right, .item__prc");

triggers.forEach(element => {
     const instance = tippy(element, {
          // ваши настройки
     });

     // ширина экрана при достижении которой нужно изменить настройки
     const breakpoint = window.matchMedia("(max-width: 1200px)");

     const togglePlacement = status => {
          // селекторы классов используемых тултипов
          const triggerOne = "item__right";
          const triggerTwo = "item__prc";

          const { reference: target } = instance;

          const isTargetElement = v => Boolean(target.classList.contains(v));

          switch (status) {
               case "update":
                    if (isTargetElement(triggerOne)) {
                         instance.setProps({
                              placement: "bottom-end"
                         });
                    } else if (isTargetElement(triggerTwo)) {
                         instance.setProps({
                              placement: "left-start"
                         });
                    }
                    break;
               case "default":
                    if (isTargetElement(triggerOne)) {
                         instance.setProps({
                              placement: "left-start"
                         });
                    } else if (isTargetElement(triggerTwo)) {
                         instance.setProps({
                              placement: "bottom-end"
                         });
                    }
          }
     };

     const breakpointChecker = () => {
          if (breakpoint.matches) {
               return togglePlacement("update");
          } else {
               return togglePlacement("default");
          }
     };

     breakpoint.addEventListener("change", breakpointChecker);
     breakpointChecker();
});

const targetElement = document.querySelector(".target");
const breakpoint = window.matchMedia("(max-width: 700px)");

const breakpointChecker = () => {
     if (breakpoint.matches) {
          targetElement.textContent = "Apple";
     } else {
          targetElement.textContent = "Orange";
     }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();

const parentContainer = document.querySelector(".inputs");

parentContainer.addEventListener("keypress", event => {
   if (event.target.tagName !== "INPUT") return;
   if (event.key !== "Enter") return;

   console.log(event.target.id);
});

const elements = document.querySelectorAll(".value-item");
const stateClasses = ["value-active", "basic__shadow"];

document.addEventListener("click", ({ target }) => {
   if (!target.classList.contains("value-item")) return;
   elements.forEach(v => v.classList.remove(...stateClasses));
   target.classList.add(...stateClasses);
});

const stateClasses = ["value-active", "basic__shadow"];

document.addEventListener("click", ({ target }) => {
   if (!target.classList.contains("value-item")) return;
   const activeItem = document.querySelector(".value-active");
   activeItem && activeItem.classList.remove(...stateClasses);
   target.classList.add(...stateClasses);
});

const elements = document.querySelectorAll(".value-item");
const stateClasses = ["value-active", "basic__shadow"];

const toggleActiveElement = element => {
   element.addEventListener("click", () => {
      elements.forEach(n => n.classList.remove(...stateClasses));
      element.classList.add(...stateClasses);
   });
};

elements.forEach(v => toggleActiveElement(v));

const elements = document.querySelectorAll(".value-item");
const stateClasses = ["value-active", "basic__shadow"];

const toggleActiveElement = element => {
   element.addEventListener("click", () => {
      document.querySelector(".value-active")?.classList.remove(...stateClasses);
      element.classList.add(...stateClasses);
   });
};

elements.forEach(v => toggleActiveElement(v));

const truncateString = (s, w) => s.length > w ? s.slice(0, w) + "..." : s;

const truncateString = (s, w) => s.length > w ? s.substring(0, w) + "..." : s;

const truncateString = (s, w) => s.length > w ? s.slice(0, w).trim() + "..." : s;

const truncateString = (s, w) => s.length > w ? s.substring(0, w).trim() + "..." : s;

const truncateStringByLimitChars = ({ target, limit, pattern, useREGEx = true }) => {
  const ignoredChars = new RegExp(`[${pattern}]+$`, "g");

  const truncateString = () => {
    return useREGEx === false
      ? target.substring(0, limit).trim() + "..."
      : target.substring(0, limit).replace(ignoredChars, "").trim() + "...";
  };

  return target.length >= limit ? truncateString() : target;
};

console.log(
  truncateStringByLimitChars({
    target: "1234_______",
    limit: 8,
    pattern: [",", ".", "_"]
  })
);

let string = "Hello__World",

console.log(string.length > 7 ? string.slice(0, 7).trim() + "..." : string)

Hello-World.loooooooong.image.name.sss.123456789.jpg

BackgroundImage_for__container.with.blog-news.cards.jpg

<div>Файл "BackgroundImageForContainerWithBlogNewsCards.jpg" успешно загружен</div>

const truncateString = configuration => {
     const {
        targetString: target,
        limitWords: limit,
        pattern = [",", ".", "_"],
        useREGEx = true,
        suffix = "...",
        addFileExtension = false
    } = configuration;

     const ignoredChars = new RegExp(`[${pattern}]+$`, "g");

     const reduceContentByLimitCharset = () => {
          return useREGEx === false ?
             target.substring(0, limit).trim() :
             target.substring(0, limit).replace(ignoredChars, "").trim();
     };

     const updatedContent = () => {
          const croppedString = reduceContentByLimitCharset();
          const fileExtension = target.slice(target.lastIndexOf(".") + 1);

          return addFileExtension === false ?
             `${croppedString}${suffix}` :
             `${croppedString}${suffix} .${fileExtension}`;
     };

     return target.length >= limit ? updatedContent() : target;
};

console.log(
     truncateString({
          targetString: "BackgroundImageForContainerWithBlogNewsCards.jpg",
          limitWords: 15,
          addFileExtension: true
     })
);

.btn::after {
     content: "";
     position: relative;
     display: inline-flex;
     width: 20px;
     height: 20px;
     background-size: contain;
     background-repeat: no-repeat;
}

.light .btn::after{
background-image: url("data:image/svg+xml...//иконка-солнца");
}

.dark .btn::after {
background-image: url("data:image/svg+xml...//иконка-луны");
}

<svg class="icon__light">
// содержимое SVG
</svg>

<svg class="icon__dark">
// содержимое SVG
</svg>

.icon__light,
.icon__dark {
     display: none;
}

.light .icon__light {
     display: block;
}

.dark .icon__dark {
     display: block;
}

function burgerMenu(selector) {
  const menuElement = document.querySelector(selector);

  const elements = [
    "burger-menu_link",
    "burger-menu_button",
    "burger-menu_overlay",
  ];

  const isTriggerElement = (element) => {
    return [...element.classList].some((className) =>
      elements.includes(className)
    );
  };

  menuElement.addEventListener("click", ({ target }) => {
    if (isTriggerElement(target)) {
      toggleMenu();
    }
  });

  function toggleMenu() {
    menuElement.classList.toggle("burger-menu_active");
    menuElement.classList.contains("burger-menu_active")
      ? document.body.classList.add("no-scroll")
      : document.body.classList.remove("no-scroll");
  }
}

burgerMenu(".burger-menu");

.burger-menu_lines {
   pointer-events: none;
}

.no-scroll {
   overflow: hidden;
}