Could someone explain why the transitions (at least the default one - entrance) are not starting right away when a user clicks on a link (navigate) with Durandal?
In other words, do we need two mechanisms (loader animation + transition) to indicate that there is an action underway (ex. ajax call inside the activate method).
I'm sure there's a good reason, or maybe I just have to modify the entrance transition?
It seems like Durandal's transitions run once the activate function resolves. I asked a similar question where I enumerated some of the possible solutions that I found which worked for my situation specifically:
Manually animate away every view in its deactivate() and animate it back in via its viewAttached()
Bind the .page-host div's visibility to router.isNavigating (using a custom binding to handle the transition such as the fadeVisible example from the knockout site)
Manually subscribe to router.isNavigating and run custom logic when it changes
Hopefully this helps.
If you did not compress your entire application then the first process will be requirejs downloading the next amd module and then downloading the appropriate view.
The next step is durandal calling activate on your module. Activate if it returns a Deferred then it will wait for the deferred to complete.
Once activate is complete then the transition is called. The transition is responsible for swapping out the old view for the new one.
So, if its taking a while to kick off the transition its probably because its lagging in downloading your module and view.. or your activate method is taking a bit of time to finish.
Related
I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.
I am currently using swiper wrapper for angular https://www.npmjs.com/package/ngx-swiper-wrapper,
so basically I want to differentiate between manual slide that user performed and my own app pre-selecting active slide.
Whenever i use setIndex method (presumably equivalent to goToSlide at swiper js),it trigger all kind of changeEvent which manual slide change would also trigger(transitionEnd, slideChange, etc).
Is there any way to change active slide without trigerring those event?
managed to do that by using function
setIndex(index, speed?, silent?) // Runs transition to slide with given index.
by setting silent to true (slideChangeTransitionENd) event wont be called.
There should be better documentation about this.
I am new to cesium so need some very basic help.
How can we swap the behavior of the mouse left button and right button without having to code the behavior ourselves?
Moreover, can someone give me a basic coding example to define our own mouse button event? I have tried to run the one from Sandcastle but it is not working at the moment, can't figure out the problem for now.
You don't need to use Cesium's mouse event system, you can just listen to the normal JavaScript mouse events outside of Cesium and react to them. The DOM element to listen to is the canvas, typically viewer.cesiumWidget.canvas.
Cesium's built-in event system is not easily configurable for now, that's an item on the wishlist. Part of the problem here is that the default behavior changes at runtime. For example, when the camera tracks or un-tracks an entity, the input event wiring gets rearranged on the fly, and customizations may be overwritten. Someday Cesium's event handlers will need to be rewritten to be configurable.
To extend what #emackey stated:
The general recommendation from the Cesium team is to use native JS events whenever possible. The event handlers within the Cesium library are there more for internal library use and plugin modules.
As for how to capture the mouse click/scroll/move events otherwise it would be helpful to have an example of what you tried so far. Though this is a good reference to read http://www.html5rocks.com/en/mobile/touchandmouse/
I am getting the following error when trying to interact with some items:
Element cannot be scrolled into view:javascript:void(0); (Selenium::WebDriver::Error::MoveTargetOutOfBoundsError)
This comes when interacting with a modal (Bootstrap) just after an AJAX call even though the element is in the browser and is visible.
One workaround I found was I just manually went to the page again (this did not mess up the test scenarios).
Is there any better method for such errors?
Testing ajax is tricky. That's because it is asynchronous ;)
So you have to wait for certain objects to occur on your page.
And then depending on your framework some transitions or animations are done, you have to wait for them as well.
For what exactly you have to wait, depends on your application and the JS Framework you are using.
It could be a css class an id or something else.
For example with jQuery mobile you have to wait for the css class ui-mobile-viewport-transitioning to be removed, then your transition is finished and you can continue testing.
Here is a Java code example for waiting:
webdriverWaiter.waitUntil(ExpectedConditions.invisibilityOfElementLocated(By.cssClass("ui-mobile-viewport-transitioning")));
Hope that helps
One of the stated SpineJS goals is to make the entire UI non-blocking (i.e. display the change to the user, even though it might have not been updated successfully on the server side yet).
Can it be used in a standard "blocking" manner?
Yes it can. Look here under "callbacks":
http://spinejs.com/docs/ajax
You can basically block the UI at any point, and I do it for things that just can't be deferred to the server. Note that I don't even use the ajaxSucess() event, but just custom bindings for events. Here is an example use case in meta programming:
Bind 'clickHandlerFinish' event to clickHandlerFinishWork()
Bind 'click' event on button a to clickHandler()
User clicks on button a
clickHandler() gets fired
clickHandler disables the button and blocks the UI
clickHandler makes an AJAX call to the server to do work
(Remember UI is still blocked)
AJAX call finally returns, and fires the clickHandlerFinish() callback
clickHandlerFinish() unblocks the UI, re-enables the button, and presents the new changes
I've used this successfully on a few instances. Works great for me!