Различные события для мобильных и настольных ПК - PullRequest
Новая
       5

Различные события для мобильных и настольных ПК

0 голосов
/ 01 июня 2018

Я хочу, чтобы, когда пользователь щелкает значок входа в систему на рабочем столе, появлялось модальное диалоговое окно.Однако на небольших устройствах, таких как мобильные устройства и планшеты, я хочу, чтобы в моей «основной» области содержимого отображался маршрут реагирования и не использовался модальный диалог.

Сначала я не уверен, как правильно это сделать.Я подумал, может быть, есть 2 клика, один для касания и один для щелчка, но что происходит на ipad, когда он может быть достаточно большим, чтобы показать диалог и должен идти по этому пути.

Далее я думал просто иметь2 отдельных значка и в зависимости от моего медиа-запроса он показывает правильный, хотя мне просто не нравится повторяющийся код.

Есть ли другие способы?Я не хочу начинать писать логику размера в своем коде java-скрипта, поскольку все остальное обрабатывается в медиа-запросах прямо сейчас.

1 Ответ

0 голосов
/ 02 июня 2018

Вы можете использовать один значок.

Вы можете использовать matchMedia - эквивалент javascript запросов CSS @media - чтобы определить, является ли область просмотра браузера больше или меньше, а затем добавить класс кзначок, чтобы записать это.

Если щелкнуть значок:

  • , если он содержит класс .larger-viewport, он вызовет модальное диалоговое окно
  • , если оносодержит класс .smaller-viewport, он будет запускать реагирование. 

// Initialise Variables

var iconForModal;
var iconForReact;
var loginIcon = document.getElementsByClassName('login-icon')[0];

// Check and record viewport size

function checkViewportSize() {

    if (window.matchMedia("(max-width: 800px)").matches) {

        loginIcon.className = 'login-icon larger-viewport';
    }

    else {

        loginIcon.className = 'login-icon smaller-viewport';
    }
}

window.addEventListener('resize', checkViewportSize, false);
window.addEventListener('load', checkViewportSize, false);


// Activate Login

function activateLogin() {

    if (loginIcon.classList.contains('larger-viewport')) {

        console.log('Login Modal Activated');

    }

    if (loginIcon.classList.contains('smaller-viewport')) {

        console.log('Login React Activated')
    }
}

loginIcon.addEventListener('click', activateLogin, false);
<button type="button" class="login-icon">Login</button>
...