When I bind a
$(document).on("click", '.dw-sel', function(e) { opens modal box });
on click, it fires each time, even when there is a drag. I want to get the click function called, only when there is a click without any draging of the wheel. Is there any of such event provided already? Or how to achieve differenciating click from drag?
EDIT:
ok, found a solution line 929 in mobiscroll.core.js
if (!dist && !moved) { // this is a "tap"
istap = true;
tindex = Math.floor((stop - ttop) / h);
var li = $('.dw-li', target).eq(tindex)
li.addClass('dw-hl'); // Highlight
setTimeout(function() {
li.removeClass('dw-hl');
}, 200);
} else {
tindex = Math.round(pos - dist / h);
istap = false;
}
I set the variable istap, and on that I based my click event.
Related
Since I updated to IOS13 our App hangs, the page and de Menu don't work, on IOS12 works fine.
I attach a simple code to try, simple press some times for example on zoom in/out and alternate with click on map, and the App hangs.
Form hi = new Form("form2");
Toolbar tb = hi.getToolbar();
Image icon = theme.getImage("icon.png");
Container topBar = BorderLayout.east(new Label(icon));
topBar.add(BorderLayout.SOUTH, new Label("Cool App Tagline...", "SidemenuTagline"));
topBar.setUIID("SideCommand");
tb.addComponentToSideMenu(topBar);
tb.addMaterialCommandToSideMenu("Home", FontImage.MATERIAL_HOME, e -> {});
hi.setLayout(new BorderLayout());
BrowserComponent browserComponent = new BrowserComponent();
browserComponent.setURL("https://leafletjs.com/examples/quick-start/example.html");
hi.add(BorderLayout.CENTER, browserComponent);
hi.show();
The problem was in the leaflet.js, in this commit https://github.com/Leaflet/Leaflet/pull/6855/files/862d3f600ce0f40795149a32bf980ff6000bf132 makes the library 1.6.0 hangs on codenameOne and IOS13.
The solution for me, was use the oficial 1.5.1 library (http://cdn.leafletjs.com/leaflet/v1.5.1/leaflet.zip) and make a function to emulate an doubleclick, based on this post: leaflet: don't fire click event function on doubleclick
This is part of code:
// Create a Global variable
var clicked = 0;
//on map declaration disable tap and doubleClickZomm
mapid = new L.map("mapid",{ attributionControl: false, zoomControl: false, doubleClickZoom: false, tap : false});
// Map click event
mapid.on('click', function(e) {
// Calling the new function
controlClick();
});
// Map DoubleClick event
mapid.on('dblclick', function(e) {
// Calling the new function
controlClick();
});
/*
* Declare an Emmulated doubleClickZoom function
*/
function controlClick(){
clicked = clicked +1;
setTimeout(function(){
if(clicked > 0){
clicked = 0;
}
}, 500);
if (clicked > 1 ){
mapid.zoomIn();
clicked = 0;
}
}
I've installed a highcharts-custom-events package to handle custom events(dblclick).
like the code below
var Highcharts = require('highcharts'),
HighchartsCustomEvents = require('highcharts-custom-events')(Highcharts);
But after adding this code, even the existing click is also not working.
Please help me to implement custom events to react.
Here is an example with implemented custom events in Highcharts with using react wrapper.
import CustomEvents from "highcharts-custom-events";
CustomEvents(Highcharts);
//require('highcharts-custom-events')(Highcharts);
Both above ways work - import and require.
Demo: https://codesandbox.io/s/highcharts-react-demo-1rtxl
If this wouldn't help - could you reproduce your case in the online editor which I could work on?
I was having the same problem using this lib, it was breaking the standard single click, I believe this is a duplicate post from this one.
On that post there is a function implementation of double click, that solution also breakes the single click, the thing is that you can add the single click as a condition inside double click function:
Fisrt define the settings:
var doubleClicker = {
clickedOnce : false,
timer : null,
timeBetweenClicks : 400
};
Then define a 'double click reset' function in case the double click is not fast enough and a double click callback:
// call to reset double click timer
var resetDoubleClick = function() {
clearTimeout(doubleClicker.timer);
doubleClicker.timer = null;
doubleClicker.clickedOnce = false;
};
// the actual callback for a double-click event
var ondbclick = function(e, point) {
if (point && point.x) {
// Do something with point data
}
};
Highcharts settings example
series: [{
point: {
events: {
click: function(e) {
if (doubleClicker.clickedOnce === true && doubleClicker.timer) {
resetDoubleClick();
ondbclick(e, this);
} else {
doubleClicker.clickedOnce = true;
doubleClicker.timer = setTimeout(function(){
resetDoubleClick();
}, doubleClicker.timeBetweenClicks);
}
}
}
}
}]
When I'm getting the list of results in my cordova app, i want to roll it to the specified element with this function:
$scope.roll = function () {
//var rankScroll = $ionicScrollDelegate.$getByHandle('rank');
var meElement = document.getElementById('scroll');
if (!meElement) {
$ionicScrollDelegate.scrollTo(0, 0);
return;
}
var top = meElement.getBoundingClientRect().top - 50;
$ionicScrollDelegate.scrollTo(0, top);
console.log(top);
console.log($ionicScrollDelegate.getScrollView());
}
It works nicely, but I can't scroll to any other place in the list. I want to unlock scrolling in this solution or find better one. It should scroll on page loaded, not on click.
All the best
That function lock your scroll because of the $scope's binding.
If you only want that function to be invoked when the view is loaded, you should call it once at the the time the view is loaded.
You can do that by this way in your controller:
var roll = function () {
//var rankScroll = $ionicScrollDelegate.$getByHandle('rank');
var meElement = document.getElementById('scroll');
if (!meElement) {
$ionicScrollDelegate.scrollTo(0, 0);
return;
}
var top = meElement.getBoundingClientRect().top - 50;
$ionicScrollDelegate.scrollTo(0, top);
console.log(top);
console.log($ionicScrollDelegate.getScrollView());
}
$scope.$on("$ionicView.loaded", function (scopes, states) {
roll();
});
You can check more $ionicView events in this ion-view Document
I'd like to make a full screen (or a part of screen) text area that user can scroll on iPad.
Something similar to the Notes.app: there's a screen/panel that can contain a lot of text, and it is scrollable.
If you tap on it, you can edit the text.
Is there any suitable component or workaround?
Thanks!
As far as I know, TextArea in Sencha Touch doesn't have this "scrollable" property.
In my app I used a workaround, overriding the TextArea component, here is the code:
Ext.define('Ext.overrides.TextArea', {
override: 'Ext.form.TextArea',
initialize: function() {
this.callParent();
this.element.dom.addEventListener(
Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
this.handleTouchListener = Ext.bind(this.handleTouch, this),
false);
this.element.dom.addEventListener(
Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
this.handleMoveListener = Ext.bind(this.handleMove, this),
false);
this.moveListenersAttached = true;
},
destroy: function() {
// cleanup event listeners to avoid memory leak
if (this.moveListenersAttached) {
this.moveListenersAttached = false;
this.element.dom.removeEventListener(
Ext.feature.has.Touch ? 'touchstart' : 'mousedown',
this.handleTouchListener,
false);
this.element.dom.removeEventListener(
Ext.feature.has.Touch ? 'touchmove' : 'mousemove',
this.handleMoveListener,
false);
this.handleTouchListener = this.handleMoveListener = null;
};
this.callParent();
},
handleTouch: function(e) {
this.lastY = e.pageY;
},
handleMove: function(e) {
var textArea = e.target;
var top = textArea.scrollTop <= 0;
var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
var up = e.pageY > this.lastY;
var down = e.pageY < this.lastY;
this.lastY = e.pageY;
// default (mobile safari) action when dragging past the top or bottom of a scrollable
// textarea is to scroll the containing div, so prevent that.
if((top && up) || (bottom && down)) e.preventDefault();
// Sencha disables textarea scrolling on iOS by default,
// so stop propagating the event to delegate to iOS.
if(!(top && bottom)) e.stopPropagation();
}
});
In my mobile safari project, i need to create a message posting feature. it is requires scrolling inside a textarea when lines of texts exceed the max rows of the text area. i couldn't find 'scrollable' property in Ext.field.textarea, any idea how?
Cheers!
There is a bug in touch 2.0.x such that the framework explicitly prevents the scroll action. Supposedly a fix will be in 2.1, though I didn't see that officially, just from a guy on a forum.
Until then, there is kind of a solution for touch1 here http://www.sencha.com/forum/showthread.php?180207-TextArea-scroll-on-iOS-not-working that you can port to V2. It basically involves adding an eventlistener to the actual textarea field (not the sencha object) and then calling preventdefault if it's a valid scrollevent.
The full code is at that link, but the salient bits are here.
Grab the <textarea> field (not the Sencha Touch object) directly and use addListener to apply
'handleTouch' on touchstart and 'handleMove' on touchmove
handleTouch: function(e) {
this.lastY = e.pageY;
},
handleMove: function(e) {
var textArea = e.target;
var top = textArea.scrollTop <= 0;
var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
var up = e.pageY > this.lastY;
var down = e.pageY < this.lastY;
this.lastY = e.pageY;
// default (mobile safari) action when dragging past the top or bottom of a scrollable
// textarea is to scroll the containing div, so prevent that.
if((top && up) || (bottom && down)) {
e.preventDefault();
e.stopPropagation(); // this tops scroll going to parent
}
// Sencha disables textarea scrolling on iOS by default,
// so stop propagating the event to delegate to iOS.
if(!(top && bottom)) {
e.stopPropagation(); // this tops scroll going to parent
}
}
Ext.define('Aspen.util.TextArea', {
override: 'Ext.form.TextArea',
adjustHeight: Ext.Function.createBuffered(function (textarea) {
var textAreaEl = textarea.getComponent().input;
if (textAreaEl) {
textAreaEl.dom.style.height = 'auto';
textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
}
}, 200, this),
constructor: function () {
this.callParent(arguments);
this.on({
scope: this,
keyup: function (textarea) {
textarea.adjustHeight(textarea);
},
change: function (textarea, newValue) {
textarea.adjustHeight(textarea);
}
});
}
});