JavaScript: программируем жесты мышкой

Многие пользователи Opera и FireFox знают о существовании так называемых Mouse Gestures (для FF существует одноименный плагин) – жестов мышкой, на которые реагирует браузер выполняя различные действия (такие как открытия нового окна, закладки, назад, вперед и т.д. и т.п.), единственный недостаток данной фичи – нет взаимодеймствия с сайтом, и я решил написать небольшую библиотечку, которая поможет разработчикам добавить подобный функционал на свой сайт…

На данный момент библиотека понимает только 8 простейших жестов:

• Top – зажимаем кнопку мышки и ведем курсор вверх на 50-200 пикселей (по умолчанию) и отпускаем, смещение по оси X должно быть минимум в два раза меньше. чем по оси Y
• Bottom – ведем курсор вниз
• Left
• Right

И их производные

• Top-Left – смещение по осям X и Y не должно различаться более чем в два раза
• Top-Right
• Bottom-Left
• Bottom-Right

Для подключения библиотеки вам понадобиться добавить следующий код в вашу страницу:

<script src="javascript/navigation.js" type="text/javascript"></script>

Далее копируем следующий код:

<script language="JavaScript">
        // use jQuery for bind function to event
        $(document).mousedown(navigation.mousedown);
        $(document).mouseup(navigation.mouseup);

        // set params
        navigation.minX = 50;
        navigation.minY = 50;
        navigation.maxX = 300;
        navigation.maxY = 300;
        
        // callback functions
        navigation.TopLeft  = function (X,Y) {  };
        navigation.Top      = function (X,Y) {  };
        navigation.TopRight = function (X,Y) {  };
        
        navigation.Left     = function (X,Y) {  };
        navigation.Right    = function (X,Y) {  };
        
        navigation.BottomLeft  = function (X,Y) {  };
        navigation.Bottom      = function (X,Y) {  };
        navigation.BottomRight = function (X,Y) {  };
</script>

Это заготовка для наших “жестов”, первые две строчки необходимы для того, чтобы повесить на глобальные события mousedown и mouseup наши две функции (используется библиотека jQuery). Следующие 4 строчки указывают параметры жестов, т.е. лимиты в которых они будут срабатывать. Далее идет объявление 8 callback функций, в качестве параметров они принимают абсолютное смещение по оси X и Y.

Дабы исключить ложные срабатывания наших функций, лучше привязать их к нажатой клавиши “Ctrl” (код клавиши “Ctrl” равен 17, если хотите изменить – см. все коды на странице http://unixpapa.com/js/key.html ):

        $(window).keydown(function(event){
          switch (event.keyCode) {
            case 17:            
                $(document).mousedown(navigation.mousedown);
                $(document).mouseup(navigation.mouseup);
                break;
          }
        });
        
        $(window).keyup(function(event){
          switch (event.keyCode) {
            case 17:
                $(document).unbind('mousedown');
                $(document).unbind('mouseup');
                break;
          }
        });

А вот так выглядит код из моего примера:

function mouseGestures(){
        
        $(window).keydown(function(event){
          switch (event.keyCode) {
            // ...
            // different keys do different things
            // Different browsers provide different codes
            // see here for details: http://unixpapa.com/js/key.html    
            // ...
            case 17:            
                $(document).mousedown(navigation.mousedown);
                $(document).mouseup(navigation.mouseup);
                break;
          }
        });
        
        $(window).keyup(function(event){
          switch (event.keyCode) {
            case 17:
                $(document).unbind('mousedown');
                $(document).unbind('mouseup');
                break;
          }
        });

        navigation.maxX = 300;
        navigation.maxY = 300;
        
        navigation.TopLeft  = function (X,Y) { select($('div#left div.top'),Math.abs(X-Y)) };
        navigation.Top      = function (X,Y) { select($('div#center div.top'),Y) };
        navigation.TopRight = function (X,Y) { select($('div#right div.top'),Math.abs(X-Y)) };
        
        navigation.Left     = function (X,Y) { select($('div#left div.middle'),X) };
        navigation.Right    = function (X,Y) { select($('div#right div.middle'),X) };
        
        navigation.BottomLeft  = function (X,Y) { select($('div#left div.bottom'),Math.abs(X-Y)) };
        navigation.Bottom      = function (X,Y) { select($('div#center div.bottom'),Y) };
        navigation.BottomRight = function (X,Y) { select($('div#right div.bottom'),Math.abs(X-Y)) };
        
    }
    
    function select(el,k) {
        
        var speed = 1500;
        
        switch (true) {
            case (k<50):
                speed = 500;
                break;
            case (k<100):
                speed = 1000;
                break;
            case (k<150):
                speed = 1500;
                break;
            case (k<200):
                speed = 2000;
                break;
            case (k>=200):
                speed = 2500;
                break;
        }
        el.animate({ 
                opacity: 0.4,
                backgroundColor: '#ffff00'
              }, speed, 'linear', 
              function () {
                  el.animate({ 
                    opacity: 1,
                    backgroundColor: '#fffff'
                  }, speed)
              });
    }

Как-то все запутанно, давайте лучше попробуем, как это всё работает (зажимаем “Ctrl” и пробуем активировать событие – кликаем на любой области, и удерживая клавишу мышки перемещаем курсор на 50-300 пикселей в желаемом направлении)…

Чуть-чуть еще прокомментирую функцию select, в качестве первого параметра она принимает элемент DOM’a который мы будем анимировать, второй параметр – коэффициент, от него будет зависеть скорость анимации, коэффициент представляет собой величину перемещения по интересующей нас оси (или разницу между оными)…

Зачем это все на сайте? Как по мне будет достаточно удобно, если повесить на события Left и Right переход на предыдущую/следующую страницу в форуме, на событие Top – вернуться на главную или в начало страницы, так вполне может пригодиться…