yeet

2021-04-02 02:24:13 +03:00
parent c23950b545
commit 7256d79e2c
31493 changed files with 3036630 additions and 0 deletions
--- a/node_modules/@egjs/hammerjs/tests/manual/visual.html
+++ b/node_modules/@egjs/hammerjs/tests/manual/visual.html
@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="assets/style.css">
+    <title>Hammer.js</title>
+
+    <style>
+
+        html, body {
+            overflow: hidden;
+            margin: 0;
+        }
+
+        body {
+            -webkit-perspective: 500;
+            -moz-perspective: 500;
+            perspective: 500;
+        }
+
+        .animate {
+            -webkit-transition: all .3s;
+            -moz-transition: all .3s;
+            transition: all .3s;
+        }
+
+        #hit {
+            padding: 10px;
+        }
+
+        #log {
+            position: absolute;
+            padding: 10px;
+        }
+
+    </style>
+</head>
+<body>
+
+<div id="log"></div>
+<div id="hit" style="background: #42d692; width: 150px; height: 150px;"></div>
+
+
+<script src="../../dist/hammer.js"></script>
+<script>
+
+    var reqAnimationFrame = (function () {
+        return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
+            window.setTimeout(callback, 1000 / 60);
+        };
+    })();
+
+    var log = document.querySelector("#log");
+    var el = document.querySelector("#hit");
+
+    var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
+    var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
+
+    var ticking = false;
+    var transform;
+    var timer;
+
+    var mc = new Hammer.Manager(el);
+
+    mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
+
+    mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
+    mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
+    mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
+
+    mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
+    mc.add(new Hammer.Tap());
+
+    mc.on("panstart panmove", onPan);
+    mc.on("rotatestart rotatemove", onRotate);
+    mc.on("pinchstart pinchmove", onPinch);
+    mc.on("swipe", onSwipe);
+    mc.on("tap", onTap);
+    mc.on("doubletap", onDoubleTap);
+
+    mc.on("hammer.input", function(ev) {
+        if(ev.isFinal) {
+            resetElement();
+        }
+    });
+
+
+    function resetElement() {
+        el.className = 'animate';
+        transform = {
+            translate: { x: START_X, y: START_Y },
+            scale: 1,
+            angle: 0,
+            rx: 0,
+            ry: 0,
+            rz: 0
+        };
+
+        requestElementUpdate();
+
+        if (log.textContent.length > 2000) {
+            log.textContent = log.textContent.substring(0, 2000) + "...";
+        }
+    }
+
+    function updateElementTransform() {
+        var value = [
+                    'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
+                    'scale(' + transform.scale + ', ' + transform.scale + ')',
+                    'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+  transform.angle + 'deg)'
+        ];
+
+        value = value.join(" ");
+        el.textContent = value;
+        el.style.webkitTransform = value;
+        el.style.mozTransform = value;
+        el.style.transform = value;
+        ticking = false;
+    }
+
+    function requestElementUpdate() {
+        if(!ticking) {
+            reqAnimationFrame(updateElementTransform);
+            ticking = true;
+        }
+    }
+
+    function logEvent(str) {
+        //log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);
+    }
+
+    function onPan(ev) {
+        el.className = '';
+        transform.translate = {
+            x: START_X + ev.deltaX,
+            y: START_Y + ev.deltaY
+        };
+
+        requestElementUpdate();
+        logEvent(ev.type);
+    }
+
+    var initScale = 1;
+    function onPinch(ev) {
+        if(ev.type == 'pinchstart') {
+            initScale = transform.scale || 1;
+        }
+
+        el.className = '';
+        transform.scale = initScale * ev.scale;
+
+        requestElementUpdate();
+        logEvent(ev.type);
+    }
+
+    var initAngle = 0;
+    function onRotate(ev) {
+        if(ev.type == 'rotatestart') {
+            initAngle = transform.angle || 0;
+        }
+
+        el.className = '';
+        transform.rz = 1;
+        transform.angle = initAngle + ev.rotation;
+        requestElementUpdate();
+        logEvent(ev.type);
+    }
+
+    function onSwipe(ev) {
+        var angle = 50;
+        transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0;
+        transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0;
+        transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle;
+
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            resetElement();
+        }, 300);
+        requestElementUpdate();
+        logEvent(ev.type);
+    }
+
+    function onTap(ev) {
+        transform.rx = 1;
+        transform.angle = 25;
+
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            resetElement();
+        }, 200);
+        requestElementUpdate();
+        logEvent(ev.type);
+    }
+
+    function onDoubleTap(ev) {
+        transform.rx = 1;
+        transform.angle = 80;
+
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            resetElement();
+        }, 500);
+        requestElementUpdate();
+        logEvent(ev.type);
+    }
+
+    resetElement();
+
+</script>
+</body>
+</html>