Some time ago I noticed that nested scrollable containers behave nice - for example several containers scrollable in their X-axis nested in a container that is scrollable in its Y-axis - and decided to take advantage of this by creating a custum composite swich component based on that and snapToGrid.
However this never worked out nicely since snapToGrid had its problems.
When I talk about well-behaviour of nested scrollable components I mean you can tap on a nested scrollable component and it will just work well being able to scroll either the component itself or its also scrollable parent in the other axis.
What would I need to do in a custom scrollable component to achieve the same well-behaviour like it works with nested containers?
What I'd require of such a component - for example a switch - was beeing able to switch it horizontally while, once it notices that horizontal dragging threshold is reached, and not to affect its parent containers vertical scrolling then. The other case where, after a certain threshold of vertival scrolling in the parent component, it locks to vertically scrolling the parent container should already work, right?
By the way - with the out-of-the-box CN1 OnOffSwitch this does not work. When they are placed in containers nested in a container with BoxLayout.Y the this way represented list cannot be scrolled when tapping one of the OnOffSwitches and dragging vertically.
Events in Codename One are delivered from the system in the following order:
The parent Form - e.g. you can override the pointer* callbacks
Form listeners - e.g. appPointer*Listener on Form
Builtin scroll if you are scrolling
Focused component
I'm assuming you used focus to grab events which essentially blocks child components from grabbing the events.
If you did such a thing you need to deliver the events to the child yourself using the pointer callbacks on the given component. You can find the component at a given x/y coordinate using getComponentAt(x, y).
Related
I am building a basic React app in TypeScript to render and manage a grid layout system, This system contains a 12-column grid where modules (draggable items) can be placed within the grid. The modules can currently move around freely via drag and drop.
The goal is to extend the algorithm, so a module can move within the layout container. The module can't move outside of the top, right, and left edges of the layout container. The bottom edge behaves differently. When a module is moved downwards beyond the bottom edge, the bottom edge should also move downwards to extend the height of the layout container. Also, Module objects cannot overlap each other.
See the Image by clicking URL:
this is the desired result
Codesandbox link (Progress till now)
Please Set containment/bound parent.
My issue stems from wishing to have a mobile phone rendered in the page, which mimics that of an actual phone. I would like to use components from Material UI such as AppBar and Dialog, however they do not stay confined to the container of the phone, and instead still show in the entire browser window.
When I use a Dialog Component however, it's still relative to the actual browser viewport, and not that of the "phone", such as the following:
I would like it to do what is seen in the picture below, without using an IFrame.
Is there a way I can set an anchor for the components - or at least force them to treat a specific element as their boundary? Thanks.
For those wondering if this is resolved, the solution was to roll my own Dialog and Backdrop Components with Paper, and Box components.
A ref was passed into a Box component which surrounds the entire "Phone App", and it's current Element is passed into a Mui Portal's container property.
This allows for the container of the Custom "Dialog" to be the container I wished to have things bounded by.
Is it possible to disable the X and Y scrolling of a GoogleMap inside a Codename One?
I'm referring to a map created using the cn1lib described here: https://www.codenameone.com/blog/new-improved-native-google-maps.html
If the map is scrollable, then I cannot insert more than one map in a Form, otherwise the contentPane scrolling and map scrolling conflict. If the maps can be not scrollable, then I can insert more maps in the same Form without scrolling issues.
I know that I can use static maps (that are images), but I need that pinch-to-zoom and pin locators action listeners work.
Thank you
To expand on Steves comment. There's no support for this in the peer component wrapping. We assume most peers are scrollable within as mixing scrolling and native peers with produce a bad experience. E.g. panning the map instead of scrolling or potential artifacts when the map and title area draw on top of each other when your page is scrolled down.
I would suggest you take a different route for this use case. Use a static image and when a user taps the map open a map in the bottom part of the screen as a dialog or as a separate form to provide the full map UX.
Referring to this question and answer by Shai Almog:
Rebuild list of containers without scrolling the list
I have a form with one container (TableLayout), which contains several rows with labels and buttons. Clicking a button changes the order of the rows and rebuilds the whole form (after myForm.removeAll() ). After myForm.revalidate() the form jumps to the top.
I am trying to implement this exact behaviour, to return to the same point (scroll position Y) after revalidating/changing the container contents.
I subclassed the Container-class to make setScrollY(int) visible. Using this with an arbitrary value does not scroll to the position, so it seems that the setScrollY method is not changing the scroll position of the content pane overall.
And myContainer.getScrollY() always returns "0". I only get the scroll position by calling getContentPane().getScrollY().
But it is obviously not possible to call the setScrollY()-method on the content pane - as it is not possible to subclass the content pane - to scroll back to the same position after revalidating the form.
Thanks for any advice!
Use border layout which disables the scrolling of the form/content pane.
Place your container (where you exposed setScroll) in the center and make sure to invoke setScrollableY(true) on that Container.
I'm currently developing a mobile web application with AngularJS, ngAnimate, Angular-Material and UI-Router. I'm following Google Material Design specifications for the UI/UX part.
I'd like to animate a state change 'the Angular way' and especially this 'Parent to child' animation
I've no idea on how to achieve this 'lift & expand' animation.
Thanks for your help !
You have to do it yourself, I guess.
Angular-material is not a magic wand that replicates the animation guidelines of Material Design. Material Design guidelines are simply guidelines, and are loose enough to be hacked — or strictly followed, in the case of Google's Android apps (in-house or not).
My feeling is the angular material team is already pushing like maniacs to bring this awesome tool to 1.0, and will take advantage of the new routing system in Angular 2 to provide some animations like the one you wish to attain out of the box.
But it's the bleeding edge of the bleeding edge, at least for the time being.
Good news seem to be that routes will have their own viewports and sibling viewports.
AngularJS somewhat starts to embrace Polymer's web components concept.
Scroll to "Show me the magic!" on this page, and check these demos. Polymer's ecosystem provides a lot of already-made components to build your app with. It's quite large, and makes you wonder why Polymer doesn't get the same momentum as AngularJS. But I digress...
Option 1
create a custom-made function that gets triggered on a list element being clicked/tapped, to place in your controller (or directive).
Once the user clicks/taps the list element, it triggers the function (console test).
The function should :
retrieve the id of the clicked/tapped item (pass it to the function)
animate : here you have several choices, but here's one : use a ui-router absolute named view (#view_name), and wrap it in a div container with overflow:hidden, that has inital dimensions corresponding to the dimensions of a list item.
Detect the x-y position of the list element that has been clicked (an example, assuming you use AngularJS with jQuery), and you pass it to the "item detail" route (see above), so the rectangle grows with origins corresponding exactly to where the UI is a the moment of the click/tap. The animation shown in the video seems pretty complex: the "item detail page" grows slower on the bottom and faster on the top, when the bottom item is clicked.
Why an absolute named view? Because it will allow, with z-indexing, for the list to stay underneath the "item detail" view, so when the user closes/leaves it, you can roll back your animation, and the rectangle will shrink back to exactly the dimensions and position of the list item. Finally, you transition the opacity:0 and leave the route.
Option 2
Here's a rough mockup of a technique stretching/scrolling an ion-item. It would require to detect the y position of the item, and use ionicScrollDelegate to scroll to it. Also, you would freeze the main scroll so the user get "stucked", until he closes the "detail view", which then releases the scroll.
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
if(!$scope.stretched){
$('ion-item').removeClass('stretched');
$ionicScrollDelegate.freezeAllScrolls(false);
}
else
{
$location.hash(itemID);
$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$('#'+itemID).addClass('stretched');
};
}
A very basic JSFiddle, which needs to be refined (clicked item should scroll to the middle of the screen, then expand).
Note that the JSFiddle only blocks the mousewheel scroll. If seems to block the first swipe, but then the ng-click releases it, so as it is it's far from perfect. You should not only block the list scrolling, but the up and down swipe events.
Also it initalizes badly, only works the second time. But the concept could be something like this.