Mise-à-jour sur-le-sentier.fr

version 2
This commit is contained in:
2024-12-10 11:39:15 +01:00
parent 26b17d9232
commit d8f28b47b8
55 changed files with 8972 additions and 1159 deletions

View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2016 腾讯 AlloyTeam
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,100 @@
![preview](http://alloyteam.github.io/AlloyFinger/alloyfinger.png)
# Install
You can install it via npm:
```html
npm install alloyfinger
```
# Usage
### Omi Version:
* [omi-finger](https://github.com/AlloyTeam/omi/tree/master/plugins/omi-finger)
```js
render() {
return `
<div>
<div omi-finger ref="touchArea" onTap="handleTap" onSwipe="handleSwipe" >
Tap or Swipe Me!
</div>
</div>
`;
}
```
### Pure JS:
```js
var af = new AlloyFinger(element, {
touchStart: function () { },
touchMove: function () { },
touchEnd: function () { },
touchCancel: function () { },
multipointStart: function () { },
multipointEnd: function () { },
tap: function () { },
doubleTap: function () { },
longTap: function () { },
singleTap: function () { },
rotate: function (evt) {
console.log(evt.angle);
},
pinch: function (evt) {
console.log(evt.scale);
},
pressMove: function (evt) {
console.log(evt.deltaX);
console.log(evt.deltaY);
},
swipe: function (evt) {
console.log("swipe" + evt.direction);
}
});
/**
* this method can also add or remove the event handler
*/
var onTap = function() {};
af.on('tap', onTap);
af.on('touchStart', function() {});
af.off('tap', onTap);
/**
* this method can destroy the instance
*/
af = af.destroy();
```
### React Version:
```js
render() {
return (
<AlloyFinger
onTap={this.onTap.bind(this)}
onMultipointStart={this.onMultipointStart.bind(this)}
onLongTap={this.onLongTap.bind(this)}
onSwipe={this.onSwipe.bind(this)}
onPinch={this.onPinch.bind(this)}
onRotate={this.onRotate.bind(this)}
onPressMove={this.onPressMove.bind(this)}
onMultipointEnd={this.onMultipointEnd.bind(this)}
onDoubleTap={this.onDoubleTap.bind(this)}>
<div className="test">the element that you want to bind event</div>
</AlloyFinger>
);
}
```
# Thanks and Donate
* [transformjs](http://alloyteam.github.io/AlloyTouch/transformjs/)
* [Donate to AlloyFinger](http://alloyteam.github.io/donate.html)
# License
This content is released under the [MIT](http://opensource.org/licenses/MIT) License.

View File

@@ -0,0 +1,291 @@
/* AlloyFinger v0.1.6
* By dntzhang
* Github: https://github.com/AlloyTeam/AlloyFinger
*/
; (function () {
function getLen(v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function getAngle(v1, v2) {
var mr = getLen(v1) * getLen(v2);
if (mr === 0) return 0;
var r = dot(v1, v2) / mr;
if (r > 1) r = 1;
return Math.acos(r);
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function getRotateAngle(v1, v2) {
var angle = getAngle(v1, v2);
if (cross(v1, v2) > 0) {
angle *= -1;
}
return angle * 180 / Math.PI;
}
var HandlerAdmin = function(el) {
this.handlers = [];
this.el = el;
};
HandlerAdmin.prototype.add = function(handler) {
this.handlers.push(handler);
}
HandlerAdmin.prototype.del = function(handler) {
if(!handler) this.handlers = [];
for(var i=this.handlers.length; i>=0; i--) {
if(this.handlers[i] === handler) {
this.handlers.splice(i, 1);
}
}
}
HandlerAdmin.prototype.dispatch = function() {
for(var i=0,len=this.handlers.length; i<len; i++) {
var handler = this.handlers[i];
if(typeof handler === 'function') handler.apply(this.el, arguments);
}
}
function wrapFunc(el, handler) {
var handlerAdmin = new HandlerAdmin(el);
handlerAdmin.add(handler);
return handlerAdmin;
}
var AlloyFinger = function (el, option) {
this.element = typeof el == 'string' ? document.querySelector(el) : el;
this.start = this.start.bind(this);
this.move = this.move.bind(this);
this.end = this.end.bind(this);
this.cancel = this.cancel.bind(this);
this.element.addEventListener("touchstart", this.start, false);
this.element.addEventListener("touchmove", this.move, false);
this.element.addEventListener("touchend", this.end, false);
this.element.addEventListener("touchcancel", this.cancel, false);
this.preV = { x: null, y: null };
this.pinchStartLen = null;
this.scale = 1;
this.isDoubleTap = false;
var noop = function () { };
this.rotate = wrapFunc(this.element, option.rotate || noop);
this.touchStart = wrapFunc(this.element, option.touchStart || noop);
this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
this.pinch = wrapFunc(this.element, option.pinch || noop);
this.swipe = wrapFunc(this.element, option.swipe || noop);
this.tap = wrapFunc(this.element, option.tap || noop);
this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
this.longTap = wrapFunc(this.element, option.longTap || noop);
this.singleTap = wrapFunc(this.element, option.singleTap || noop);
this.pressMove = wrapFunc(this.element, option.pressMove || noop);
this.touchMove = wrapFunc(this.element, option.touchMove || noop);
this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
this.touchCancel = wrapFunc(this.element, option.touchCancel || noop);
this.delta = null;
this.last = null;
this.now = null;
this.tapTimeout = null;
this.singleTapTimeout = null;
this.longTapTimeout = null;
this.swipeTimeout = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
this.preTapPosition = { x: null, y: null };
};
AlloyFinger.prototype = {
start: function (evt) {
if (!evt.touches) return;
this.now = Date.now();
this.x1 = evt.touches[0].pageX;
this.y1 = evt.touches[0].pageY;
this.delta = this.now - (this.last || this.now);
this.touchStart.dispatch(evt);
if (this.preTapPosition.x !== null) {
this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
}
this.preTapPosition.x = this.x1;
this.preTapPosition.y = this.y1;
this.last = this.now;
var preV = this.preV,
len = evt.touches.length;
if (len > 1) {
this._cancelLongTap();
this._cancelSingleTap();
var v = { x: evt.touches[1].pageX - this.x1, y: evt.touches[1].pageY - this.y1 };
preV.x = v.x;
preV.y = v.y;
this.pinchStartLen = getLen(preV);
this.multipointStart.dispatch(evt);
}
this.longTapTimeout = setTimeout(function () {
this.longTap.dispatch(evt);
}.bind(this), 750);
},
move: function (evt) {
if (!evt.touches) return;
var preV = this.preV,
len = evt.touches.length,
currentX = evt.touches[0].pageX,
currentY = evt.touches[0].pageY;
this.isDoubleTap = false;
if (len > 1) {
var v = { x: evt.touches[1].pageX - currentX, y: evt.touches[1].pageY - currentY };
if (preV.x !== null) {
if (this.pinchStartLen > 0) {
evt.scale = getLen(v) / this.pinchStartLen;
this.pinch.dispatch(evt);
}
evt.angle = getRotateAngle(v, preV);
this.rotate.dispatch(evt);
}
preV.x = v.x;
preV.y = v.y;
} else {
if (this.x2 !== null) {
evt.deltaX = currentX - this.x2;
evt.deltaY = currentY - this.y2;
} else {
evt.deltaX = 0;
evt.deltaY = 0;
}
this.pressMove.dispatch(evt);
}
this.touchMove.dispatch(evt);
this._cancelLongTap();
this.x2 = currentX;
this.y2 = currentY;
if (len > 1) {
evt.preventDefault();
}
},
end: function (evt) {
if (!evt.changedTouches) return;
this._cancelLongTap();
var self = this;
if (evt.touches.length < 2) {
this.multipointEnd.dispatch(evt);
}
this.touchEnd.dispatch(evt);
//swipe
if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) ||
(this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
this.swipeTimeout = setTimeout(function () {
self.swipe.dispatch(evt);
}, 0)
} else {
this.tapTimeout = setTimeout(function () {
self.tap.dispatch(evt);
// trigger double tap immediately
if (self.isDoubleTap) {
self.doubleTap.dispatch(evt);
clearTimeout(self.singleTapTimeout);
self.isDoubleTap = false;
}
}, 0)
if (!self.isDoubleTap) {
self.singleTapTimeout = setTimeout(function () {
self.singleTap.dispatch(evt);
}, 250);
}
}
this.preV.x = 0;
this.preV.y = 0;
this.scale = 1;
this.pinchStartLen = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
},
cancel: function (evt) {
clearTimeout(this.singleTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.longTapTimeout);
clearTimeout(this.swipeTimeout);
this.touchCancel.dispatch(evt);
},
_cancelLongTap: function () {
clearTimeout(this.longTapTimeout);
},
_cancelSingleTap: function () {
clearTimeout(this.singleTapTimeout);
},
_swipeDirection: function (x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
},
on: function(evt, handler) {
if(this[evt]) {
this[evt].add(handler);
}
},
off: function(evt, handler) {
if(this[evt]) {
this[evt].del(handler);
}
},
destroy: function() {
if(this.singleTapTimeout) clearTimeout(this.singleTapTimeout);
if(this.tapTimeout) clearTimeout(this.tapTimeout);
if(this.longTapTimeout) clearTimeout(this.longTapTimeout);
if(this.swipeTimeout) clearTimeout(this.swipeTimeout);
this.element.removeEventListener("touchstart", this.start);
this.element.removeEventListener("touchmove", this.move);
this.element.removeEventListener("touchend", this.end);
this.element.removeEventListener("touchcancel", this.cancel);
this.rotate.del();
this.touchStart.del();
this.multipointStart.del();
this.multipointEnd.del();
this.pinch.del();
this.swipe.del();
this.tap.del();
this.doubleTap.del();
this.longTap.del();
this.singleTap.del();
this.pressMove.del();
this.touchMove.del();
this.touchEnd.del();
this.touchCancel.del();
this.preV = this.pinchStartLen = this.scale = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = null;
return null;
}
};
if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = AlloyFinger;
} else {
window.AlloyFinger = AlloyFinger;
}
})();

View File

@@ -0,0 +1,16 @@
/* AlloyFinger v0.1.6
* By dntzhang
* Github: https://github.com/AlloyTeam/AlloyFinger
*/
(function(){function h(a){return Math.sqrt(a.x*a.x+a.y*a.y)}function d(a,b){var c=new f(a);c.add(b);return c}var f=function(a){this.handlers=[];this.el=a};f.prototype.add=function(a){this.handlers.push(a)};f.prototype.del=function(a){a||(this.handlers=[]);for(var b=this.handlers.length;0<=b;b--)this.handlers[b]===a&&this.handlers.splice(b,1)};f.prototype.dispatch=function(){for(var a=0,b=this.handlers.length;a<b;a++){var c=this.handlers[a];"function"===typeof c&&c.apply(this.el,arguments)}};var k=
function(a,b){this.element="string"==typeof a?document.querySelector(a):a;this.start=this.start.bind(this);this.move=this.move.bind(this);this.end=this.end.bind(this);this.cancel=this.cancel.bind(this);this.element.addEventListener("touchstart",this.start,!1);this.element.addEventListener("touchmove",this.move,!1);this.element.addEventListener("touchend",this.end,!1);this.element.addEventListener("touchcancel",this.cancel,!1);this.preV={x:null,y:null};this.pinchStartLen=null;this.scale=1;this.isDoubleTap=
!1;var c=function(){};this.rotate=d(this.element,b.rotate||c);this.touchStart=d(this.element,b.touchStart||c);this.multipointStart=d(this.element,b.multipointStart||c);this.multipointEnd=d(this.element,b.multipointEnd||c);this.pinch=d(this.element,b.pinch||c);this.swipe=d(this.element,b.swipe||c);this.tap=d(this.element,b.tap||c);this.doubleTap=d(this.element,b.doubleTap||c);this.longTap=d(this.element,b.longTap||c);this.singleTap=d(this.element,b.singleTap||c);this.pressMove=d(this.element,b.pressMove||
c);this.touchMove=d(this.element,b.touchMove||c);this.touchEnd=d(this.element,b.touchEnd||c);this.touchCancel=d(this.element,b.touchCancel||c);this.x1=this.x2=this.y1=this.y2=this.swipeTimeout=this.longTapTimeout=this.singleTapTimeout=this.tapTimeout=this.now=this.last=this.delta=null;this.preTapPosition={x:null,y:null}};k.prototype={start:function(a){if(a.touches){this.now=Date.now();this.x1=a.touches[0].pageX;this.y1=a.touches[0].pageY;this.delta=this.now-(this.last||this.now);this.touchStart.dispatch(a);
null!==this.preTapPosition.x&&(this.isDoubleTap=0<this.delta&&250>=this.delta&&30>Math.abs(this.preTapPosition.x-this.x1)&&30>Math.abs(this.preTapPosition.y-this.y1));this.preTapPosition.x=this.x1;this.preTapPosition.y=this.y1;this.last=this.now;var b=this.preV;if(1<a.touches.length){this._cancelLongTap();this._cancelSingleTap();var c=a.touches[1].pageY-this.y1;b.x=a.touches[1].pageX-this.x1;b.y=c;this.pinchStartLen=h(b);this.multipointStart.dispatch(a)}this.longTapTimeout=setTimeout(function(){this.longTap.dispatch(a)}.bind(this),
750)}},move:function(a){if(a.touches){var b=this.preV,c=a.touches.length,d=a.touches[0].pageX,f=a.touches[0].pageY;this.isDoubleTap=!1;if(1<c){var g={x:a.touches[1].pageX-d,y:a.touches[1].pageY-f};if(null!==b.x){0<this.pinchStartLen&&(a.scale=h(g)/this.pinchStartLen,this.pinch.dispatch(a));var e;e=h(g)*h(b);0===e?e=0:(e=(g.x*b.x+g.y*b.y)/e,1<e&&(e=1),e=Math.acos(e));0<g.x*b.y-b.x*g.y&&(e*=-1);a.angle=180*e/Math.PI;this.rotate.dispatch(a)}b.x=g.x;b.y=g.y}else null!==this.x2?(a.deltaX=d-this.x2,a.deltaY=
f-this.y2):(a.deltaX=0,a.deltaY=0),this.pressMove.dispatch(a);this.touchMove.dispatch(a);this._cancelLongTap();this.x2=d;this.y2=f;1<c&&a.preventDefault()}},end:function(a){if(a.changedTouches){this._cancelLongTap();var b=this;2>a.touches.length&&this.multipointEnd.dispatch(a);this.touchEnd.dispatch(a);this.x2&&30<Math.abs(this.x1-this.x2)||this.y2&&30<Math.abs(this.y1-this.y2)?(a.direction=this._swipeDirection(this.x1,this.x2,this.y1,this.y2),this.swipeTimeout=setTimeout(function(){b.swipe.dispatch(a)},
0)):(this.tapTimeout=setTimeout(function(){b.tap.dispatch(a);b.isDoubleTap&&(b.doubleTap.dispatch(a),clearTimeout(b.singleTapTimeout),b.isDoubleTap=!1)},0),b.isDoubleTap||(b.singleTapTimeout=setTimeout(function(){b.singleTap.dispatch(a)},250)));this.preV.x=0;this.preV.y=0;this.scale=1;this.x1=this.x2=this.y1=this.y2=this.pinchStartLen=null}},cancel:function(a){clearTimeout(this.singleTapTimeout);clearTimeout(this.tapTimeout);clearTimeout(this.longTapTimeout);clearTimeout(this.swipeTimeout);this.touchCancel.dispatch(a)},
_cancelLongTap:function(){clearTimeout(this.longTapTimeout)},_cancelSingleTap:function(){clearTimeout(this.singleTapTimeout)},_swipeDirection:function(a,b,c,d){return Math.abs(a-b)>=Math.abs(c-d)?0<a-b?"Left":"Right":0<c-d?"Up":"Down"},on:function(a,b){this[a]&&this[a].add(b)},off:function(a,b){this[a]&&this[a].del(b)},destroy:function(){this.singleTapTimeout&&clearTimeout(this.singleTapTimeout);this.tapTimeout&&clearTimeout(this.tapTimeout);this.longTapTimeout&&clearTimeout(this.longTapTimeout);
this.swipeTimeout&&clearTimeout(this.swipeTimeout);this.element.removeEventListener("touchstart",this.start);this.element.removeEventListener("touchmove",this.move);this.element.removeEventListener("touchend",this.end);this.element.removeEventListener("touchcancel",this.cancel);this.rotate.del();this.touchStart.del();this.multipointStart.del();this.multipointEnd.del();this.pinch.del();this.swipe.del();this.tap.del();this.doubleTap.del();this.longTap.del();this.singleTap.del();this.pressMove.del();
this.touchMove.del();this.touchEnd.del();this.touchCancel.del();return this.preV=this.pinchStartLen=this.scale=this.isDoubleTap=this.delta=this.last=this.now=this.tapTimeout=this.singleTapTimeout=this.longTapTimeout=this.swipeTimeout=this.x1=this.x2=this.y1=this.y2=this.preTapPosition=this.rotate=this.touchStart=this.multipointStart=this.multipointEnd=this.pinch=this.swipe=this.tap=this.doubleTap=this.longTap=this.singleTap=this.pressMove=this.touchMove=this.touchEnd=this.touchCancel=null}};"undefined"!==
typeof module&&"object"===typeof exports?module.exports=k:window.AlloyFinger=k})();