Does Polymer 1.0 have any SwipeEventListeners? So that, if the window is swiped on a mobile screen, an event is triggered?
Like :
Polymer({
is: 'my-element',
behaviors: [
Polymer.IronSwipeBehavior
],
listeners: {
'iron-swipe': '_onIronSwipe'
},
_onIronSwipe: function(){
if( swipe == left )
/* Do something */
else if ( swipe == right )
/* Do something else */
}
});
If Polymer doesn't have it, please suggest a lightweight library which will do the job.
As Neil mentioned, polymer has gesture events for up, down, tap, and track, in this case, you could use the track event for the swipe.
From https://elements.polymer-project.org/elements/iron-swipeable-container:
iron-swipeable-container is a container that allows any of its nested children (native or custom elements) to be swiped away. By default it supports a curved or horizontal transition, but the transition duration and properties can be customized.
Throws iron-swipe event
I think, that these events are, what you are searching for:
down, up, track and tap:
https://www.polymer-project.org/1.0/docs/devguide/gesture-events
For a mobile scenario I've used a community element called iron-swipeable-pages which was really helpful.
Check it out on customelements.io here
Related
I have a component that contains video. My component is nested in a dom-if and can disappear. When this happens the video (and it sound) keep playing.
Is there a way in which my component can detect that is has disappeared from the DOM? I have tried to use the 'detached' callback as described here: https://www.polymer-project.org/1.0/docs/devguide/registering-elements
Polymer({
is: 'my-component-with-video',
properties: {
// some properties
},
detached: function() {
console.log('Component detached');
// more code to stop video
},
but when my element is removed by the dom-if nothing happens, I don't see the console.log message. What am I doing wrong?
There are two scenarios possible here:
You want your element to be discarded and recreated fresh when the condition changes.
You want to keep it in the dom but freeze it.
In the first case you need to add the restamp attribute to the dom-if to make sure the template DOM is destroyed, not hidden. By default the dom-if stamps the template at first initialization and then hides it from the view if the condition becomes falsy.
In the second case, the suggestion given by Intervalia will not work, because the dom-if in "hide" mode does not detach anything from the DOM. Setting restamp attribute will make the detached callback run but then no point in pausing anything since the element will be discarded.
If you want to keep it in the DOM and freeze it's state you need to listen to dom-change event on the dom-if and run the .pause() accordingly.
No need for any workaround other than simply using your dom-if and rather than
<dom-if if="[[condietionBoolean]]">
<your-video-element id="giveanId"></your-video-element>
</dom-if>
write the if statement like below and so each time your condition changes, you check and make sure the video is paused if when you like. See below.
...
<dom-if if="[[_shouldShowVideo(conditionBoolean)]]">
<your-video-element id="giveanId"></your-video-element>
</dom-if>
...
Polymer({
is: 'my-component-with-video',
properties: {
conditionBoolean : {
type: Boolean,
},
},
_shouldShowVideo: function(conditionBoolean ) {
if (!conditionBoolean) this.$$(#yourVideoElementId).pause();
return conditionBoolean ;
}
});
In your detached function you need to get the Video Element and call .pause() on it.
You will probably also need to call .pause() when your condition changes that would cause the dom-if to remove the player.
How to prevent pull-to-refresh in web applications for Chrome android?
I tried the answers from
Disabling android's chrome pull-down-to-refresh feature
body {
overflow-y: hidden;
}
or
body {
touch-action: none;
}
It did not work. any one has a solution that works? It is very bad for browsers to make pull-to-refresh default behavior, it is very undesirable for web applications.
Here's a CSS method of capturing the required touch gestures to prevent the pull to refresh:
$("html").css({
"touch-action": "pan-down"
});
This method seems to have worked well for other users. Hope it works for your needs.
Reference, plus there's more strategies discussed here:
Disabling android's chrome pull-down-to-refresh feature
The code below is a javascript-only solution distilled from a couple of sources, which are towards the bottom.
If you are willing to change the structure of your pages, a CSS/HTML only option may work for you.
Additionally, the draft CSS property scroll-boundary-behavior is in the process of being standardized and added to Chrome provide this capability among a few others. As the implementation is very, very new, I provide links at the bottom of my answer.
Example
although jsfiddle's iframe structure prevents pull-to-refresh from working at all, I also tested the same script within a flat HTML document on Chrome Android 60.0.3112.116.
Full jsfiddle
event.preventDefault() can keep browser default behaviors such as pull-to-refresh from taking place. We want the usual browser behavior most of the time, just not when it would lead to a pull-to-refresh. Since a pull-to-refresh happens when touches are moving down the screen and we're scrolled to the top of the document, we'll only call preventDefault under those conditions.
//We're going to make a closure that will handle events
//so as to prevent the pull-to-refresh behavior.
var pullToRefreshPreventer = (function() {
//To determine the direction in which a touch is moving,
//we hold on to a map from touch identifier to touches
//from the previous event.
var previousTouches = {};
return function(event) {
//First we get all touches in this event and set up
//the value which will replace `previousTouches`
//before this event handler exits.
var touches = Array.prototype.slice.call(event.touches);
nextTouches = {}
touches.forEach(function(touch){
nextTouches[touch.identifier] = touch;
});
//Pull-to-refresh behavior only happens if we are
//scrolled to the top of the document, so we can
//exit early if we are somewhere in the middle.
if(document.scrollingElement.scrollTop > 0) {
previousTouches = nextTouches;
return;
}
//Now we know that we are scrolled to the top of
//the document;
//look through the current set of touches and see
//if any of them have moved down the page.
for(var ix = 0; ix < touches.length; ix++) {
var touch = touches[ix],
id = touch.identifier;
//If this touch was captured in a previous event
//and it has moved downwards, we call preventDefault
//to prevent the pull-to-refresh behavior.
if(id in previousTouches && previousTouches[id].screenY < touch.screenY) {
event.preventDefault();
console.log("event.preventDefault() called")
break;
}
}
//lastly, we update previousTouches
previousTouches = nextTouches;
};
}());
//Since touch events which may call `preventDefault` can be
//much more expensive to handle, Chrome disallows such calls
//by default. We must add the options argument `{passive: false}`
//here to make it work.
document.body.addEventListener('touchmove', pullToRefreshPreventer, {passive: false});
document.body.addEventListener('touchend', pullToRefreshPreventer, {passive: false});
References:
StackOverflow answer linking to chromestatus.com page
"Treat Document Level Touch Event Listeners as Passive", chromestatus
"Making touch scrolling fast by default"
"Touch events"
scroll-boundary-behavior links:
chromestatus
chromium bug
github issue proposing the standard
draft css module, last publish date 2017-09-07
I am confused, I expected to see PolymerGestures.addEventListener(element, eventname, handler, capture) somewhere in the source code?
view-source:https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html
Instead I see something like this
eventDelegates: {
trackstart: 'trackStart',
trackx: 'trackx',
trackend: 'trackEnd',
down: 'downHandler',
up: 'upHandler',
tap: 'tapHandler'
},
Does it mean that polymer already has gestures build in?
What is the best approach to make a left right swipe to next page event?
Do any projects exist that implement the follow proposal?
http://www.w3.org/2008/webapps/wiki/Selector-based_Mutation_Events
Here's a better way that allows you to listen for any selector with actual events, vs dirty checking, mutation listening, and other non-performant ideas: https://github.com/csuwildcat/SelectorListener (it was also used as the basis of this highly rated solution: Alternative to DOMNodeInserted)
Here are a few examples:
// Listening for attribute value matches? Child's play.
document.addSelectorListener('.foo[bar="boom"]', function(){ ... });
// Matching elements on hashchange can be annoying, let's make it stupid simple
document.addSelectorListener('*:target', function(event){
alert('The hash-targeted element is:' + event.target);
});
// How about a more performant way to listen for custom tooltip nodes document wide?
document.addSelectorListener('.tooltip:hover', function(){ ... });
/*** Now that we have the new CSS 4 Selector spec, let's see what we can do: ***/
// Working with HTML5 sliders just got even easier
document.querySelector('#RandomForm').addSelectorListener('slider:out-of-range', function(){
alert('Your slider value is now out of range! Oh noes!');
I am trying to add an Event Listener to a Htm5-Canvas which is managed by Kineticjs (the Canvas was created via a Stage of KineticJS).
I tried out (using jQuery):
$(selector).keydown( function(e) {... } )
with the following Selectors:
window (it is working, but it is listening to the whole Window and thereby not good)
All Canvas-Elements $('canvas') <-- not working
The Container, where KineticJS and its Canvas are embedded <-- not working
The Container-Div of KineticJS (created by Kinetic) with $('.kineticjs-content').keydown( function() { ... } ) <-- not working
Only $(window) is working. After experimenting with plain Html5-Canvas i figured out, that the Canvas-Element has Built-in-Support for Keyboard-Events.
So i think, KineticJS is doing something magic around here. Wrong Selector-Usage can be excluded.
I checked every Selector with this code: console.log( $(selector).length )
Can anyone help here? Thx in advance!
I suggest using one of the Keyboard Plugins out there:
http://robertwhurst.github.io/KeyboardJS/
http://dmauro.github.io/Keypress/
They work well together with KineticJS.
If you can include javascript into it, here is the code:
if(keyIsPressed && keycode == somenumber){
doSomething();
}
As of right now On only supports mouse and touch events.
Each layer has its own canvas that you can grab and attach events to.
From the limited experience I have with this (2 days), I saw that each layer you add becomes a canvas, so if you have a reference to the topmost layer in a variable (i.e. topmostLayer), you can do
var canvas = $(topmostLayer.getContext().canvas);
With this in place, what #devnull69 suggested just works:
canvas.attr('tabindex', 0);
canvas.keydown(function (ev) { ... });
I have it in place in my application and works fine.
see link, you need:
var canvas=layer.getCanvas()._canvas;
$(canvas).attr('tabindex', 0); // increase tabindex if needed
canvas.focus();
$(canvas).keydown(function (e) {
console.log(e.keyCode); // your handler here
});
You'll have to make sure that the canvas element has the focus before it can accept keyboard events. Unfotunately the .focus() method didn't work for me in Firefox, so I tried this and voilà
$('canvas').attr('tabindex', 0);
$('canvas').keydown(function(e) {
alert(e.keyCode);
e.preventDefault(); // to stop the key events from bubbling up
});
Click the canvas and it will have the focus.