In Ion.RagerSlider plugin the interval bar is clickable.
This is an issue on mobile devices when the user accidentally click the element when he's trying to scroll.
How can i disable the click event on interval bar?
I was unable to find the solution in the official documentation.
I am facing the same issue where, if tapping outside the selected range on the bar, the whole range gets shifted across to the tap location. Depending on the location and size of the bar on the screen, it is quite easy to inadvertently do this and lose the slider values.
While it is not officially supported by version 2.3.1, I found that removing the binding of touchstart and mousedown events to the range line did the trick.
https://github.com/IonDen/ion.rangeSlider/blob/2.3.1/js/ion.rangeSlider.js#L686#L687
A more generic approach could be to create a new config parameter named something like disable_line_touch with a default value of false, and only skip the above binding if its value is set to true.
Related
Is there a way to determine the current state of rollingMode of the timeline? (or keep track of all events toggeling the rollingMode?)
If I start in rollingMode but a user drags the timeline rollingMode is toggled to off. I tested and I can catch that with the rangechanged event and checking the byUser variable. But I did not find any event for the user clicking on the blue reset button which toggles rollingMode to on. Nor did I find anything to inquire the timeline object directly.
My use case is a timeline that runs in rolling mode as default. It also has some input fields to display a time range determined by the user input. In the second scenario rolling mode needs to be switched off. If I can't keep track of the current state of rollingMode I can not use toggleRollingMode() when switching view modes for my user.
Thanks
The rolling mode state of the timeline can be determined like this:
timeline.range.rolling
Reference:
https://github.com/visjs/vis-timeline/blob/master/lib/timeline/Timeline.js#L735
I am using react-big-calendar's month view in my app. If I have more than 2 events on the same day, the first event added stays and a "+X more" button appears (where the X is of course the number of events left for that day). This works just fine in the app, but when I try to unit test it, no matter how many events I add on the same day, the "+X more" button does not appear, and I can still access all the events of that day, even though they shouldn't be visible anymore. This is a problem for me because I have implemented some more functionality on that button which I need to test, but since I can't reach it in testing I can't even simulate a click on that.
Why doesn't this exist in test mode?
After screen.debug() I was thinking that the problem might be that the button appears when there is not enough space to display all the events, and since the testing environment simpler than the running app, works differently, there is no space check and therefore no button needed. I don't know if I am right but I still need to test it somehow.
Is there a way to access it somehow in my tests?
Events are placed in date cells according to a sort order, and the amount of space available. The 'Show more +' link only shows when there isn't enough space to place the events. Size of these cells is determined by the overall container wrapper size around your calendar, as Big Calendar uses flexbox layout. It may be that you need to apply a specific height to your container for the testing to pick it up right.
I've been struggling with adding support for touch devices. The app works really well on desktop devices. So you can hover over the td element, then once you click and drag the td, the selection functionality is triggered, if the word is found the resultWords var then set it as marked, otherwise set selection to false.
There's a codesandbox for it:
https://codesandbox.io/s/determined-turing-50zbpj?file=/src/index.js
I am trying to add the same functionality for the touch devices, so onTouchStart is supposed to add the first letter to array and once the swiping over td's is happening then keep adding the letters, word found -> set it as marked, otherwise -> set selection to false.
I have tried using onTouchStart combined with onTouchMove (all in the td element). onTouchStart seems to work fine, although onTouchMove always brings back the first letter where the gesture was first triggered.
Any suggestions how I could move on with this?
For years I have had a problem using javascript and jquery to control things like homemade scrollbars. I use mousedown to set a "dragging" variable to true, save the initial mouse position, and then use mousemove to track the mouse and set the div position. I condition everything on "dragging" so that once the user lets go of the mouse, or moves far enough away, then "dragging" is cleared and everything stops tracking.
The problem is, I have trouble finding out for sure when they let go of the mouse. I use mouseup and mouseout of course, but this has two problems. One is that I want the user to be able to wander outside the div being scrolled a small amount, like 10 pixels, without losing the tracking. The other problem is that sometimes I miss an event and "dragging" stays set and the mouse gets "stuck to the div" and they have problems letting go.
I need a solution. It can either be some plugin or a coding technique. I have used a number of different techniques over the years but I've never gotten a simple perfect solution.
I have a scrollbar that has to follow some timeline. It is being constantly scrolled with .scrollLeft using setInterval.
I still want the user to be able to naturally take control and just drag the scrollbar away. If I can detect the user did that, I would just turn off the setInterval timer and leave the control to the user until he explicitly turns the auto scroll back on.
Is there a way to differentiate the user scroll event, from the scroll created by .scrollLeft?
You can set a flag before changing scrollLeft and clear it afterwards, then check the flag in the scroll event.
Since Javascript is run on the UI thread, it is not possible for the user to scroll while your code is running.
One alternative is to give up using a scroll-bar at all and do it using CSS and a jQuery slider control. This also gives you the option of making it look more like a time-line. you can set the scroller elements to whatever CSS you want.
There are a few out there, but it's not too hard to roll-your-own using a jQuery draggable control and constraining one axis inside a long, narrow container DIV.