iPad swipe Gesture Mobile Safari - ipad

I have been googling around for a bit and am trying to determine how to do a simple swipe event across an html element such as a div, to cause some action to happen in javascript.
<div id="swipe_me">
Swipe Test
</div>
Can someone show me or point me to some documentation?

javascript.
something a bit like (untested code)
onInitialized: function(e, slider) {
var time = 1000, // allow movement if < 1000 ms (1 sec)
range = 100, // swipe movement of 50 pixels triggers the slider
x = 0, t = 0, touch = "ontouchend" in document,
st = (touch) ? 'touchstart' : 'mousedown',
mv = (touch) ? 'touchmove' : 'mousemove',
en = (touch) ? 'touchend' : 'mouseup';
slider.$window
.bind(st, function(e){
// prevent image drag (Firefox)
e.preventDefault();
t = (new Date()).getTime();
x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
})
.bind(en, function(e){
t = 0; x = 0;
})
.bind(mv, function(e){
e.preventDefault();
var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
r = (x === 0) ? 0 : Math.abs(newx - x),
// allow if movement < 1 sec
ct = (new Date()).getTime();
if (t !== 0 && ct - t < time && r > range) {
if (newx < x) { slider.goForward(); }
if (newx > x) { slider.goBack(); }
t = 0; x = 0;
}
});
}

Related

Logic for jumping in webgl with physics enabled

Most important code just for example. Func UPDATE is called in every draw frame.
I want implement jumping virtualJumpActive == true logic.
I invert procedure for virtualJumpActive == true to make scene object and camera position set by cannonjs position but just in some short time.
My camera.posY follow fixed values for now.
I wanna only Y (for cannonjs Z / jumping ) to be navigated by physics and other XY
to be navigated by camera (WASD user control)...
It is little intricate situation, i have 3 factors
position of camera
position of player (hands)
position of player collision object
In normal regime player collision object follow camera and player.
In jump moment i wanna apply by vertical force and make camera follow collision object. Also i wanna that always Y component depens on physics data. In that way i will have jumping on top of other objects.
var playerUpdater = {
UPDATE: () => {
App.scene[objName].rotation.rotateY(
matrixEngine.Events.camera.yaw + 180)
var detPitch;
var limit = 2;
if(matrixEngine.Events.camera.pitch < limit &&
matrixEngine.Events.camera.pitch > -limit) {
detPitch = matrixEngine.Events.camera.pitch * 2;
} else if(matrixEngine.Events.camera.pitch > limit) {
detPitch = limit * 2;
} else if(matrixEngine.Events.camera.pitch < -(limit + 2)) {
detPitch = -(limit + 2) * 2;
}
if(matrixEngine.Events.camera.virtualJumpActive == true) {
// invert logic
// Scene object set
App.scene[objName].rotation.rotateX(-detPitch);
var detPitchPos = matrixEngine.Events.camera.pitch;
if(detPitchPos > 4) detPitchPos = 4;
App.scene[objName].position.setPosition(
App.scene.playerCollisonBox.physics.currentBody.position.x,
App.scene.playerCollisonBox.physics.currentBody.position.z,
App.scene.playerCollisonBox.physics.currentBody.position.y
)
// Cannonjs object set
// Switched Z - Y
matrixEngine.Events.camera.xPos = App.scene.playerCollisonBox.physics.currentBody.position.x;
matrixEngine.Events.camera.zPos = App.scene.playerCollisonBox.physics.currentBody.position.y;
matrixEngine.Events.camera.yPos = App.scene.playerCollisonBox.physics.currentBody.position.z;
// App.scene.playerCollisonBox.
// physics.currentBody.velocity.set(0, 0, 0);
App.scene.playerCollisonBox.
physics.currentBody.angularVelocity.set(0, 0, 0);
setTimeout(() => {
matrixEngine.Events.camera.virtualJumpActive = false;
matrixEngine.Events.camera.virtualJumpY = 2;
}, 350);
} else {
// Scene object set
App.scene[objName].rotation.rotateX(-detPitch);
var detPitchPos = matrixEngine.Events.camera.pitch;
if(detPitchPos > 4) detPitchPos = 4;
App.scene[objName].position.setPosition(
matrixEngine.Events.camera.xPos,
matrixEngine.Events.camera.yPos - 0.3 + detPitchPos / 50,
matrixEngine.Events.camera.zPos,
)
// Cannonjs object set
// Switched Z - Y
App.scene.playerCollisonBox.
physics.currentBody.position.set(
matrixEngine.Events.camera.xPos,
matrixEngine.Events.camera.zPos,
matrixEngine.Events.camera.yPos);
App.scene.playerCollisonBox.
physics.currentBody.velocity.set(0, 0, 0);
App.scene.playerCollisonBox.
physics.currentBody.angularVelocity.set(0, 0, 0);
}
}
};
.full {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<object class="full" data="https://fps-matrix-engine.vercel.app"/>
Any suggestion ?
More data:
Stackoverflow Question ref code =>
https://codepen.io/zlatnaspirala/pen/eYKrmdM?editors=0010
Source code github
Last update
https://fps-matrix-engine.vercel.app

Highcharts sankey node without links

I have a highcharts sankey diagram with two sides:
There are situations where some of my nodes have empty links (=with 0 weight). I would like the node to being displayed despite having no link from or to it.
Any chance I can achieve this?
I read on this thread that I have to fake it with weight=1 connexions, I could make the link transparent, and twitch the tooltip to hide those, but that's very painful for something that feels pretty basic.
Maybe a custom call of the generateNode call or something?
Thanks for the help
You can use the following wrap to show a node when the weight is 0.
const isObject = Highcharts.isObject,
merge = Highcharts.merge
function getDLOptions(
params
) {
const optionsPoint = (
isObject(params.optionsPoint) ?
params.optionsPoint.dataLabels : {}
),
optionsLevel = (
isObject(params.level) ?
params.level.dataLabels : {}
),
options = merge({
style: {}
}, optionsLevel, optionsPoint);
return options;
}
Highcharts.wrap(
Highcharts.seriesTypes.sankey.prototype,
'translateNode',
function(proceed, node, column) {
var translationFactor = this.translationFactor,
series = this,
chart = this.chart,
options = this.options,
sum = node.getSum(),
nodeHeight = Math.max(Math.round(sum * translationFactor),
this.options.minLinkWidth),
nodeWidth = Math.round(this.nodeWidth),
crisp = Math.round(options.borderWidth) % 2 / 2,
nodeOffset = column.sankeyColumn.offset(node,
translationFactor),
fromNodeTop = Math.floor(Highcharts.pick(nodeOffset.absoluteTop, (column.sankeyColumn.top(translationFactor) +
nodeOffset.relativeTop))) + crisp,
left = Math.floor(this.colDistance * node.column +
options.borderWidth / 2) + Highcharts.relativeLength(node.options.offsetHorizontal || 0,
nodeWidth) +
crisp,
nodeLeft = chart.inverted ?
chart.plotSizeX - left :
left;
node.sum = sum;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (1) {
// Draw the node
node.shapeType = 'rect';
node.nodeX = nodeLeft;
node.nodeY = fromNodeTop;
let x = nodeLeft,
y = fromNodeTop,
width = node.options.width || options.width || nodeWidth,
height = node.options.height || options.height || nodeHeight;
if (chart.inverted) {
x = nodeLeft - nodeWidth;
y = chart.plotSizeY - fromNodeTop - nodeHeight;
width = node.options.height || options.height || nodeWidth;
height = node.options.width || options.width || nodeHeight;
}
// Calculate data label options for the point
node.dlOptions = getDLOptions({
level: (this.mapOptionsToLevel)[node.level],
optionsPoint: node.options
});
// Pass test in drawPoints
node.plotX = 1;
node.plotY = 1;
// Set the anchor position for tooltips
node.tooltipPos = chart.inverted ? [
(chart.plotSizeY) - y - height / 2,
(chart.plotSizeX) - x - width / 2
] : [
x + width / 2,
y + height / 2
];
node.shapeArgs = {
x,
y,
width,
height,
display: node.hasShape() ? '' : 'none'
};
} else {
node.dlOptions = {
enabled: false
};
}
}
);
Demo:
http://jsfiddle.net/BlackLabel/uh6fp89j/
In the above solution, another node arrangement would be difficult to achieve and may require a lot of modifications beyond our scope of support.
You can consider using mentioned "tricky solution", since might return a better positioning result. This solution is based on changing 0 weight nodes on the chart.load() event and converting the tooltip as well, so it may require adjustment to your project.
chart: {
events: {
load() {
this.series[0].points.forEach(point => {
if (point.weight === 0) {
point.update({
weight: 0.1,
color: 'transparent'
})
}
})
}
}
},
tooltip: {
nodeFormatter: function() {
return `${this.name}: <b>${Math.floor(this.sum)}</b><br/>`
},
pointFormatter: function() {
return `${this.fromNode.name} → ${this.toNode.name}: <b>${Math.floor(this.weight)}</b><br/>`
}
},
Demo:
http://jsfiddle.net/BlackLabel/0dqpabku/

openlayer 3: how to add visible pan control

openlayer 2.13 has a visible pan control but not ol3.
I tried adding one here: http://jsfiddle.net/tr8691ev/13/
var v=map.getView();
var c=v.getCenter();
c[1]=+2;
// p=ol.animation.pan({duration:600,source:v.getCenter()});
//map.beforeRender(p);
v.setCenter(c,v.getZoom());
This one doesn't work as it should.
What is wrong with it? Thanks.
I did a function to change the center if user pan outside an area.
In this case is important handle the resolution of the map to know how big is the area depending on zoom.
In your case when user click left you should change center
var mapHorizontalMove = (mapSize[0] * resolution) / 10.0;
var mapVerticalMove = (mapSize[1] * resolution) / 10.0;
//left
center[0] -= mapHorizontalMove;
//right
center[0] += mapHorizontalMove;
//down
center[1] -= mapVerticalMove ;
//up
center[1] += mapVerticalMove ;
Mysample:
var maxExtent = [-79.59975, -1.200, -53.03076, 13.72883];
view.on('change:center', function (evt) {
var center = view.getCenter();
var x = center[0];
var y = center[1];
var resolution = view.getResolution();
var mapSize = map.getSize();
var mapHalfWidth = (mapSize[0] * resolution) / 2.0;
var mapHalfHeight = (mapSize[1] * resolution) / 2.0;
if (center[0] - mapHalfWidth < maxExtent[0]) {
x = maxExtent[0] + mapHalfWidth;
} else if (center[0] + mapHalfWidth > maxExtent[2]) {
x = maxExtent[2] - mapHalfWidth;
}
if (center[1] - mapHalfHeight < maxExtent[1]) {
y = maxExtent[1] + mapHalfHeight;
} else if (center[1] + mapHalfHeight > maxExtent[3]) {
y = maxExtent[3] - mapHalfHeight;
}
if (center[0] != x || center[1] != y) {
view.setCenter([x, y]);
}
});
.:| Just for whom witch reaches here like Me |:.
If you have got a OpenLayers' map without any controls visible,
And every thing seems Ok in your code,
Just add ol.css in your Head tag and all will be come back.

jQuery UI Sortable: tolerance "intersect" doesn't work as expected (bug #8342)

9 days ago (at time of this writing) the following bug has been reopened:
Sortable: Incorrect behaviour (or incorrect documentation) of sortable option tolerance: 'intersect'
Unfortunately I can't wait for jQuery to fix this issue.
I have a single container with items that can be sorted vertically (all <div>s). These items have different heights (and none of those heights are predefined).
Is there a decent workaround available?
I wrote a workaround myself, inspired by dioslaska's solution to his own question here:
jQuery UI sortable tolerance option not working as expected
It works quite smoothly :)
Remove the tolerance option and use the following function as sort option:
function( e, ui ) {
var container = $( this ),
placeholder = container.children( '.ui-sortable-placeholder:first' );
var helpHeight = ui.helper.outerHeight(),
helpTop = ui.position.top,
helpBottom = helpTop + helpHeight;
container.children().each( function () {
var item = $( this );
if( !item.hasClass( 'ui-sortable-helper' ) && !item.hasClass( 'ui-sortable-placeholder' )) {
var itemHeight = item.outerHeight(),
itemTop = item.position().top,
itemBottom = itemTop + itemHeight;
if(( helpTop > itemTop ) && ( helpTop < itemBottom )) {
var tolerance = Math.min( helpHeight, itemHeight ) / 2,
distance = helpTop - itemTop;
if( distance < tolerance ) {
placeholder.insertBefore( item );
container.sortable( 'refreshPositions' );
return false;
}
} else if(( helpBottom < itemBottom ) && ( helpBottom > itemTop )) {
var tolerance = Math.min( helpHeight, itemHeight ) / 2,
distance = itemBottom - helpBottom;
if( distance < tolerance ) {
placeholder.insertAfter( item );
container.sortable( 'refreshPositions' );
return false;
}
}
}
});
}

jQuery tools scrollable touch trigger

I am working with a touch based slideshow for the iPad using Jquery tools scrollable
http://jquerytools.org/demos/scrollable/vertical.html
It works great and does everything I want, but if my finger is ANYWHERE on the slider and moves every so slightly it triggers the slider to change sliders, is there a way I can change how much you need to drag your finger to change slide, or set specific areas where you can swipe to change slide?
You disable touch events on the "constructor" for the object, like this:
root = $('#content').scrollable({
keyboard:false,
mousewheel: false,
touch: false
});
I needed to do something similar where Scrollable was way too sensitive on an iPad. Here's what I changed to make it less sensitive for horizontal swiping:
// touch event
if (conf.touch) {
var touch = {};
itemWrap[0].ontouchstart = function(e) {
var t = e.touches[0];
touch.x = t.clientX;
touch.y = t.clientY;
};
itemWrap[0].ontouchmove = function(e) {
// only deal with one finger
if (e.touches.length == 1 && !itemWrap.is(":animated")) {
var t = e.touches[0],
deltaX = touch.x - t.clientX,
deltaY = touch.y - t.clientY;
self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();
e.preventDefault();
}
};
}
Becomes
// touch event
if (conf.touch) {
var touch = {};
itemWrap[0].ontouchstart = function(e) {
var t = e.touches[0];
touch.x = t.clientX;
touch.y = t.clientY;
};
itemWrap[0].ontouchmove = function(e) {
// only deal with one finger
if (e.touches.length == 1 && !itemWrap.is(":animated")) {
var t = e.touches[0],
deltaX = touch.x - t.clientX,
deltaY = touch.y - t.clientY;
if(deltaX > 200 || deltaX < -200) { // new line
self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();
} // new line
e.preventDefault();
}
};
}
Adjust the 200 to be however far you want folks to have to drag their finger before it changes to the next slide. Likewise, if you want to control a vertical scroller change deltaX in the new code to deltaY:
if(deltaY > 200 || deltaY < -200) { // new line
self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();
} // new line
If you're working with the minimized version of jQuery Tools you can use this code:
// horizontal change
if(h > 200 || h < -200) {
b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}
// vertical change
if(d > 200 || d < -200) {
b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}

Resources