mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.5 KiB
101 lines
3.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
|
|
<script src="../dist/svg-pan-zoom.js"></script>
|
|
<script src="../demo/hammer.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mobile-div" style="width: 602px; height: 420px; border:1px solid black; ">
|
|
<svg id="mobile-svg" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" version="1.1">
|
|
<defs>
|
|
<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:rgb(56,121,217);stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:rgb(138,192,7);stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g fill="none">
|
|
<g stroke="#000" fill="#FFF">
|
|
<rect x="5" y="5" width="240" height="240" fill="url(#linear-gradient)"/>
|
|
<path d="M 5 5 L 245 245 Z"/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<script>
|
|
// Don't use window.onLoad like this in production, because it can only listen to one function.
|
|
window.onload = function() {
|
|
var eventsHandler;
|
|
|
|
eventsHandler = {
|
|
haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel']
|
|
, init: function(options) {
|
|
var instance = options.instance
|
|
, initialScale = 1
|
|
, pannedX = 0
|
|
, pannedY = 0
|
|
|
|
// Init Hammer
|
|
// Listen only for pointer and touch events
|
|
this.hammer = Hammer(options.svgElement, {
|
|
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
|
|
})
|
|
|
|
// Enable pinch
|
|
this.hammer.get('pinch').set({enable: true})
|
|
|
|
// Handle double tap
|
|
this.hammer.on('doubletap', function(ev){
|
|
instance.zoomIn()
|
|
})
|
|
|
|
// Handle pan
|
|
this.hammer.on('panstart panmove', function(ev){
|
|
// On pan start reset panned variables
|
|
if (ev.type === 'panstart') {
|
|
pannedX = 0
|
|
pannedY = 0
|
|
}
|
|
|
|
// Pan only the difference
|
|
instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY})
|
|
pannedX = ev.deltaX
|
|
pannedY = ev.deltaY
|
|
})
|
|
|
|
// Handle pinch
|
|
this.hammer.on('pinchstart pinchmove', function(ev){
|
|
// On pinch start remember initial zoom
|
|
if (ev.type === 'pinchstart') {
|
|
initialScale = instance.getZoom()
|
|
instance.zoomAtPoint(initialScale * ev.scale, {x: ev.center.x, y: ev.center.y})
|
|
}
|
|
|
|
instance.zoomAtPoint(initialScale * ev.scale, {x: ev.center.x, y: ev.center.y})
|
|
})
|
|
|
|
// Prevent moving the page on some devices when panning over SVG
|
|
options.svgElement.addEventListener('touchmove', function(e){ e.preventDefault(); });
|
|
}
|
|
|
|
, destroy: function(){
|
|
this.hammer.destroy()
|
|
}
|
|
}
|
|
|
|
// Expose to window namespace for testing purposes
|
|
window.panZoom = svgPanZoom('#mobile-svg', {
|
|
zoomEnabled: true
|
|
, controlIconsEnabled: true
|
|
, fit: 1
|
|
, center: 1
|
|
, customEventsHandler: eventsHandler
|
|
});
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|