Как сделать функцию для мeдиа-запросов на js?

Question

[IIIu6ko]

Есть вот такой код с медиа-запросами для js.

const mqList = [
  window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
  window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
  window.matchMedia('(min-width: 992px)'),
];

function mqIf() {
  if (mqList[0].matches) {
    document.querySelector('body').style.background = 'red';
  }

  if (mqList[1].matches) {
    document.querySelector('body').style.background = 'white';
  }

  if (mqList[2].matches) {
    document.querySelector('body').style.background = 'green';
  }
}

mqIf();

for (let i = 0; i < mqList.length; i += 1) {
  mqList[i].addEventListener('change', mqIf);
}

Подкиньте варианты/идеи как из этого собрать функцию, чтобы я смог её импортировать и применять в разных файлах.
Массив медиа-запросов я думаю можно оставить внутри функции, если что подправлю, но он может варьироваться от 2 до бесконечности.
Самое главное чтобы можно было внутрь функции передать код, который попадёт в нужный if.

Comments

[Somewhere Intech]

В css проще описать, разве нет?

[IIIu6ko]

Johnny Lowhunter, Мне нужно какой-то js функционал на телефонах включить, а на десктопе выключить.

[sergski]

IIIu6ko, почему бы не определять тип устройства, и при заходе прописывать, например, в body страницы класс 'mobile' или 'desktop' и в зависимости от их наличия менять функционал?

[IIIu6ko]

sergski, Можно отталкиваться от класса, да. Попробую как временное решение. В идеале конечно сделать функцию или тип того из того кода выше, чтобы его реиспользовать.

[sergski]

IIIu6ko, имхо, идея часть стилей переопределить в js не тру

[IIIu6ko]

sergski, Код выше - это пример. Мне нужно не стили менять понятное дело. Я же написал js функционал.

Answer 1

[MagnusDidNotBetray]

Как пример , но выглядит как-то не очень, может кто-то предложит что-то получше.

Comments

[IIIu6ko]

Можно сказать доделал Ваш вариант.

export const media = {
  mqList: {
    mobile: window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
    tablet: window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
    desktop: window.matchMedia('(min-width: 992px)'),
  },
  mobile: function(func) {
    const mqIf = () => {
      if (this.mqList.mobile.matches) {
        func();
      }
    }

    mqIf();

    this.mqList.mobile.addEventListener('change', mqIf);
  },
  tablet: function(func) {
    const mqIf = () => {
      if (this.mqList.tablet.matches) {
        func();
      }
    }

    mqIf();

    this.mqList.tablet.addEventListener('change', mqIf);
  },
  desktop: function(func) {
    const mqIf = () => {
      if (this.mqList.tablet.matches) {
        func();
      }
    }

    mqIf();

    this.mqList.tablet.addEventListener('change', mqIf);
  }
}

import { media } from '/path';

media.mobile(() => document.querySelector('body').style.background = 'red');
media.tablet(() => document.querySelector('body').style.background = 'green');

[IIIu6ko]

MagnusDidNotBetray Если есть идеи как оптимизировать, то подкидывайте. :)
Я думаю функцию mqIf стоит вынести в отдельный метод и addEventListener тоже.

Answer 2

[IIIu6ko]

Переработал/оптимизировал функцию, в итоге получилось такое:

const media = {
  queryList: {
    mobile: window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
    tablet: window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
    desktop: window.matchMedia('(min-width: 992px)'),
  },
  queryIf(func, type) {
    if (this.queryList[type].matches) func();
  },
  query(type, func) {
    this.queryIf(func, type);
    this.queryList.mobile.addEventListener('change', () => this.queryIf(func, type));
  },
};

export default media;

import media from '/path';

media.query('mobile', () => document.querySelector('body').style.background = 'red');
media.query('tablet', () => document.querySelector('body').style.background = 'green');

Answer 3

[Steppp]

export const Media = () => {
  const mqList = [
    window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
    window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
    window.matchMedia('(min-width: 992px)'),
  ];

  function mqIf() {
    if (mqList[0].matches) {
      document.querySelector('body').style.background = 'red';
    }

    if (mqList[1].matches) {
      document.querySelector('body').style.background = 'white';
    }

    if (mqList[2].matches) {
      document.querySelector('body').style.background = 'green';
   }
  }

  mqIf();

  for (let i = 0; i < mqList.length; i += 1) {
    mqList[i].addEventListener('change', mqIf);
  }
};

import media from './file-name.js';