I'm developing this small website : Website ; and I'm using HammerJS as a touch support library.
It seems to be responding to the events, and it recognizes the event.type property, but when I'm trying to get the event.direction or other related properties to the drag event nothing is output in the console ( I'm logging the results in the console ).
This is how I listen for the drag event "
Application.ApplicationController.prototype.Drag = function(selector, delay, callback) {
return $(selector).on('drag', _.debounce(function(event){
event.preventDefault();
return (typeof callback === 'function' && callback !== undefined) ? callback.apply( event, [ event ] ) : 'Argument : Invalid [ Function Required ]';
}, delay));
};
I'm calling it something like :
this.Drag(selector, delay, function(event) {
console.log(event.type, event.direction);
});
Could someone tell me what am I doing wrong in there or if I'm missing something ?
EDIT : I have just replaced the jQuery library : jquery.specialevents.hammer.js ; with the old jquery.hammer.js ; and it seems like now it's responding to all events and I get all the properties I should. Still I would like to know why isn't the one I tried to work with working ?
EDIT : I have found the underlying cause of my issue, my code depends on some libraries which I'm loading asynchronous with the Yepnope script loader, so somewhere along the way instead of loading all the libraries ( including the jquery plugin for hammer.js ), some of them are lost :) I have fixed that issue and now the events have the properties that they're supposed to.
Still I would like to know why isn't the one I tried to work with working ?
Understanding the difference between jquery.specialevent.hammer.js and jquery.hammer.js should help understand the problem. Damien, the creator of jquery.specialevent.hammer.js, explains why.
However Eight Media decided to create their own namespace in jQuery to
activate the events.
$("#element").hammer({ /* options */ }).on("tap", function(ev) {
console.log(ev);
});
So in the end they are not using the default
jQuery eventing system. That means my existing source code which used
jQuery mobile events has to be change. That’s why I decided to
implement the use of Hammer.JS with the jQuery special eventing API.
$("#element").on("tap", { /* options */ }, function(ev) {
console.log(ev);
});
I put jquery.specialevent.hammer.js onto my
Github where you can also find a demo. Maybe Eight Media accepts my
pull request and it will be part of Hammer.JS.
event.gesture.direction should get you what you are looking for.
Related
I'm using ExtJS 6.7 Modern toolkit and Ext.grid.Tree.selectOnExpander = false does not work properly when data for expandable node is loading from a remote server, i.e. node is selected when I click on the expander.
I expect that in this case the node will NOT be selected as in the case when the data is already loaded.
Check this fiddle as an illustration - try to expand node when it is loaded and when it is not loaded yet using expander.
So far I've tried to check fired events with Ext.util.Observable.capture and it seems like extra childtap event is triggired. I don't yet understand why. Seems like a bug for me.
Seems they forgot to implement the logic.
From the code I would sugget to use this snippet.
It extens the logic from Ext.dataview.List using the same style.
Sencha Fiddle: Fiddle
Ext.define('Portal.grid.Tree', {
override: 'Ext.grid.Tree',
shouldSelectItem: function(e) {
var me = this,
no = !me.callParent([e]),
cmp;
if (!no && !me.selectOnExpander) {
cmp = e.getTarget();
no = cmp.classList.contains('x-expander-el');
}
return !no;
}
});
The best solution I have found so far is to override Ext.grid.Tree onChildTap method (inherited from Ext.dataview.Abstract) like this:
Ext.define('Portal.grid.Tree', {
override: 'Ext.grid.Tree',
/** Override Ext.dataview.Abstract onChildTap method for correct processing selectOnExpander property **/
onChildTap: function(location) {
if (this.getSelectOnExpander() || location.event.target !== location.cell.expanderElement.dom) {
this.callParent(arguments);
}
},
});
Based on this minimal example of Mapael (part of the relevant code is down here):
$('#refresh').on('click', function() {
// Update some plots and areas attributes ...
var updatedOptions = {'areas' : {}, 'plots' : {}};
// add some new plots ...
var newPlots = {
"Dijon" : {
latitude : 47.323056,
longitude : 5.041944
}
}
$(".mapcontainer").trigger('update', [updatedOptions, newPlots, [], {animDuration : 1000}]);
});
I created this example page with an update trigger that works fine. Now I want to move this to my real application php page, and it doesn't work! Please take a look here.
The annoying part is that the console of my Browser doesn't show any errors! How can I debug this problem when I don't see any errors? Please assist!
If you require any additional information, please ask. Thanks for any efforts.
PS: Please ignore the bad styling that the script and css code is in body. I'll fix this once this issue is resolved. I don't think it's the issue, since the example page that works is exactly the same and doesn't have this problem.
First, take a note that you're using different versions of Maphael:
on the page where it works, version is 1.1.0,
on your page it is 2.0.0-dev.
Second, after setting a breakpoint at the "onUpdateEvent" method of Maphael (line 876), it just seems that event data just doesn't get passed into the handler.
Does the "update" event have the same signature for Maphael/Raphael 1.x and 2.x? This is the place you should look at.
Update: I took a look at the 2.0.0-dev internals, and it seems your update code should be something like this:
var updatedOptions = {'areas': {}, 'plots' : {},
// add some new plots ...
newPlots: {
"Dijon" : {
latitude : 47.323056,
longitude : 5.041944
}
},
animDuration : 1000
};
$(".mapcontainer").trigger('update', updatedOptions);
(last line may be:
$(".mapcontainer").trigger('update', [updatedOptions]);
)
Please check if it helps (though I'd recomment you to switch to a stable 1.1.0 release of Maphael).
As of adding a paper-dropdown-menu to my Polymer web application I run into the following:
When clicking on the dropdown:
Uncaught TypeError
Polymer.Gestures.findOriginalTarget is not a function
after confirming, followed by:
Cannot set property 'right' of undefined
After confirming again the dropdown shows, albeit a bit out of shape.
What's the problem here ?
The findOriginalTarget does not seem to be set in your version of polymer. Polymer will probably be updated to support it. In the mean time, however, you can download new version of gestures that will add and replace this types of functions.
Download
https://raw.githubusercontent.com/Polymer/polymer/master/src/standard/gestures.html and put it in your polymer folder.
Open paper-dropdown-menu/paper-dropdown-menu.html and add < link rel="import" href="../polymer/gestures.html">
Alternatively, you can find _onTap line at paper-dropdown-menu/paper-dropdown-menu.html and replace function with:
_onTap: function(event) {
//if (Polymer.Gestures.findOriginalTarget(event) === this) {
// this.open();
//}
var targetElement = Polymer.dom(event).localTarget;
if(targetElement === this){
this.open();
}
},
This does work, but I did not test it with touch devices so I can't guarantee that (and I would appreciate feedback on this).
And lastly, if you don't care about _onTap event you could just set it to return false.
I'm struggling with an issue on JqueryUI and its autocomplete widget. Whenever it finds at least one match, the widget appears fine. The issue occurs if the user doesn't select one of the proposals and keeps typing. Here is an example:
Auto complete finds matches, everything is fine.
User keeps typing, the searchs results are narrowed, everything is still OK
User keeps typing even more, there is no match left, but the widget remains open.
This is the behaviour I want to get rid of. I'm running JqueryUi version 1.9.2. I read this question and tried using the widget's "response" event, as suggested.
response: function(event, ui) {
if (ui.content.length === 0) {
$("#field").autocomplete('close');
}
}
Unfortunately, this accomplishes nothing in my case, because there is no response event triggered when the last match is lost.
Is there a way to fix this ?
EDIT : It seems that later versions of jQuery UI fix this. Unfortunately, upgrading to versions 1.10+ implies a LOT of changes, and this library is used like everywhere in my project. That sounds like an extremly huge time investment to fix a minor annoyance. What I'm looking for is a easier workaround.
Brewal directed me towards the solution : there was indeed an error in console, about "length" property not available for "undefined". I thought it was related to my addition to the code, but it was actually already there, well hidden. map() uses the length property in the background, it simply couldn't map en empty result set.
I changed this :
success: function(data) {
response($.map(data.fieldList, function() {
// some treatment
}));
}
into this :
success: function(data) {
if (data.fieldList !== undefined) {
response($.map(data.fieldList, function() {
// some treatment
}));
} else {
$("#field").autocomplete("close");
}
}
And that did the job.
I`m trying to use navigation through jsTree and search plugin with "show_only_matches" parameter. But when I navigate through the tree using up and down arrows hidden nodes can be selected, but I would like to walk through "visible" nodes.
See this jsFiddle for the answer: http://jsfiddle.net/G789k/27/
I did it just on the down key, so you'll need to adapt it for up. Almost exactly the same thing -- just change _get_next to _get_prev.
Here is the relevant part of the code, FYI:
"search" : {
"case_insensitive" : true,
"show_only_matches": true
},
"ui" :{
"select_limit" : 1,
},
// overriding hotkey
'hotkeys': {
'down': function() {
// most of this stolen from jstree.js source
var o = this.data.ui.hovered || this.data.ui.last_selected || -1,
node = this._get_next(o);
this.hover_node(node);
// call self if selected node is hidden
// note: this is a somewhat dangerous (and deprecated) way to do recursion.
// ultimately, it would be better if your down function was
// defined elsewhere and called here as needed.
if ( node.length && node.is(':hidden')) arguments.callee.call(this);
return false;
}
}
I also think the default functionality – navigating to hidden nodes – is undesirable and the jstree dev should fix it. Consider submitting it as a bugfix/request to him.