Custom Devices / Устройства

ver.2.0.0

от 2023

Особенности

Переопределение списка диапазонов.
Через new CustomDevices();
Добавляет специальные классы к тегу "body".
Пример: js-device-mobile, js-device-tablet, js-device-desktop
Список диапазонов доступен во всем проекте.
Получить список разрешенией можно обратившить к переменной "rangeDevices"

Как юзать

По умолчанию

      new CustomDevices();

Свой диапазон разрешений

      new CustomDevices([
    {
        name: 'mobile',
        value: 767
    },
    {
        name: 'tablet',
        value: 1023
    },
    {
        name: 'desktop',
        value: 1920
    },
]);

Код

      /**
 *
 * Custom devices 2.0.0
 *
 * Copyright 2023 Mihail Pridannikov
 *
 * Released on: 2023
 *
 */

let rangeDevices = {
    "mobile-s": {
        name: 'mobile-s',
        value: 479,
    },
    "mobile": {
        name: 'mobile',
        value: 767,
    },
    "tablet": {
        name: 'tablet',
        value: 1023,
    },
    "laptop": {
        name: 'laptop',
        value: 1279,
    },
    "desktop": {
        name: 'desktop',
        value: 1920,
    }
};

window.CustomDevices = function(settings) {
    rangeDevices = (typeof settings === 'undefined') ? rangeDevices : settings;
    let data = rangeDevices;
    this.init = function () {
        Object.values(data).map((item, index) => {
            let prev = this.getPrevBreakpoint(index),
                current = this.getCurrentBreakpoint(index, item);
            // console.log(`${prev+1} — ${current}`)
            if (document.body.offsetWidth > prev && (current > 0 ? document.body.offsetWidth <= current : prev)) {
                this.addingClass(item);
            }
        });
        window.addEventListener('resize', e => {
            this.handlerResizeWindow();
        }, true);
    }
    this.handlerResizeWindow = function () {
        this.removingClass();
        Object.values(data).map((item, index) => {
            let prev = this.getPrevBreakpoint(index),
                current = this.getCurrentBreakpoint(index, item);
            // console.log(`${prev+1} — ${current}`)
            if (document.body.offsetWidth > prev && (current > 0 ? document.body.offsetWidth <= current : prev)) {
                this.addingClass(item);
            }
        });
    }
    this.addingClass = function (item) {
        document.body.classList.add(`js-device-${item.name}`);
    }
    this.removingClass = function () {
        document.body.classList.remove(...[...document.body.classList].filter(n => n.startsWith('js-device-')));
    }
    this.getPrevBreakpoint = function (index) {
        return index === 0 ? 0 : data[Object.keys(data)[index-1]].value;
    }
    this.getCurrentBreakpoint = function (index, item) {
        return (index === Object.keys(data).length-1) ? 0 : item.value;
    }
    this.init();
}

Changelogs

v2.0.0

latest

Init

v1.0.0

Init

Архив

Описание

В этом варианте список диапазонов изолирован, и получить доступ к ним извне невозможно.

Как юзать

      new CustomDevices([
    {
        name: 'mobile_xsm',
        value: 479,
    },
    {
        name: 'desktop',
        value: 1599,
    },
]);

Код

      /**
 *
 * Custom devices 1.0.0
 *
 * Copyright 2023 Mihail Pridannikov
 *
 * Released on: 2023
 *
 */

window.CustomDevices = function(settings) {
    const SETTINGS = [
        {
            name: 'mobile-xsm',
            value: 479,
        },
        {
            name: 'mobile-sm',
            value: 539,
        },
        {
            name: 'mobile-md',
            value: 639,
        },
        {
            name: 'mobile',
            value: 767,
        },
        {
            name: 'tablet',
            value: 1023,
        },
        {
            name: 'laptop',
            value: 1279,
        },
        {
            name: 'desktop',
            value: 1599,
        },
        {
            name: 'desktop-lg',
            value: 1920,
        },
    ]
    let data = (typeof settings === 'undefined' || !settings.length) ? SETTINGS : settings;
    this.init = function () {
        data.map((item, index) => {
            let prev = this.getPrevBreakpoint(index),
                current = this.getCurrentBreakpoint(item, index);
            // console.log(`${prev+1} — ${current}`)
            if (document.body.offsetWidth > prev && (current > 0 ? document.body.offsetWidth <= current : prev)) {
                this.addingClass(item);
            }
        })
        window.addEventListener('resize', e => {
            this.handlerResizeWindow();
        }, true);
    }
    this.handlerResizeWindow = function () {
        this.removingClass();
        data.map((item, index) => {
            let prev = this.getPrevBreakpoint(index),
                current = this.getCurrentBreakpoint(item, index);
            if (document.body.offsetWidth > prev && (current > 0 ? document.body.offsetWidth <= current : prev)) {
                this.addingClass(item);
            }
        })
    }
    this.addingClass = function (item) {
        document.body.classList.add(`js-device-${item.name}`);
    }
    this.removingClass = function () {
        document.body.classList.remove(...[...document.body.classList].filter(n => n.startsWith('js-device-')));
    }
    this.getPrevBreakpoint = function (index) {
        return index === 0 ? 0 : SETTINGS[index-1].value;
    }
    this.getCurrentBreakpoint = function (item, index) {
        return (index === SETTINGS.length-1) ? 0 : item.value;
    }
    this.init();
}