четверг, 23 ноября 2017 г.

Управление тач событиями Hammer.js

Для управления тач событиями на мобильных устройствах можно использовать библиотеку Hammer.js
Как пример приведу сниппет увеличение изображения, который я выстрадал методом проб и ошибок

 if ($('.product-cart').length > 0) {
    // Изображение которое нужно масштабировать
    var webpage = ($('.product-cart .top-image'))[0];
   // Контейнер который отвечает за нажатия при масштабировании
    var image = ($('.vertical-slider'))[0];

    var mc = new Hammer.Manager(image);

    var pinch = new Hammer.Pinch();
    var pan = new Hammer.Pan();

    pinch.recognizeWith(pan);

    mc.add([pinch, pan]);

    var adjustScale = 1;
    var adjustDeltaX = 0;
    var adjustDeltaY = 0;

    var currentScale = null;
    var currentDeltaX = null;
    var currentDeltaY = null;
    var currentScroll = window.pageYOffset || document.documentElement.scrollTop;

    // Prevent long press saving on mobiles.
    webpage.addEventListener('touchstart', function (e) {
        e.preventDefault()
    });

    // Handles pinch and pan events/transforming at the same time;
    mc.on("pinch pan", function (ev) {
        var transforms = [];

        // Adjusting the current pinch/pan event properties using the previous ones set when they finished touching
        currentScale = adjustScale * ev.scale;

        // Запрещаем таскание картинки если не изменен масштаб
        // И одновременно возвращаем стандартный функционал прокрутки страницы
        if (currentScale <= 1) {
            transforms.push('scale(1)');
            transforms.push('translate(0px, 0px)');
            webpage.style.transform = transforms.join(' ');

            if (ev.additionalEvent === "pandown") {
                $('html, body').scrollTop(currentScroll - ev.distance);
            } else if (ev.additionalEvent === "panup") {
                $('html, body').scrollTop(currentScroll + ev.distance);
            }
        } else {
            currentDeltaX = adjustDeltaX + (ev.deltaX / currentScale);
            currentDeltaY = adjustDeltaY + (ev.deltaY / currentScale);

            transforms.push('scale(' + currentScale + ')');
            // Concatinating and applying parameters.
            transforms.push('translate(' + currentDeltaX + 'px, ' + currentDeltaY + 'px)');
            webpage.style.transform = transforms.join(' ');
        }
    });

    mc.on("panend pinchend", function (ev) {
        if (currentScale <= 1) {
            currentScroll = window.pageYOffset || document.documentElement.scrollTop;
            if (ev.additionalEvent === "panright") {
                // Какое -нибудь действие при масштабе равном 1 и листании справа
            } else if (ev.additionalEvent === "panleft") {
                // Какое -нибудь действие при масштабе равном 1 и листании слева
            }
        }
        // Saving the final transforms for adjustment next time the user interacts.
        adjustScale = currentScale;
        adjustDeltaX = currentDeltaX;
        adjustDeltaY = currentDeltaY;
    });
}

Комментариев нет:

Отправить комментарий

Linux командная строка узнаем оставшееся место

Чтобы посмотреть общую картину того, сколько места осталось в системе можно выполнить команду: df -h Чтобы вывести на экран сколько мес...