Problem with Panels

sicay

Hi!

I created Panels that I want the user to drag from one to the other. However, when I drag with the cursor, it goes from the first to the last immediately, not going to the next or previous one as it is suppose to do. Do you have any ideas what could be the problem? I tried multiple combination with properties to no avail. Please help!

Thanks!

theryanjduffy

Here's a simple panels example that is working correctly for me with the cursor. If you could share a code example that isn't working for you, perhaps we can dig a bit deeper.

http://jsfiddle.net/01vva2L4/

enyo.kind({
    name: 'ex.App',
    components: [
        {kind: 'enyo.Panels', arrangerKind: 'enyo.CarouselArranger', classes: 'enyo-fit', components: [
            {content: 'Panel 1'},
            {content: 'Panel 2'},
            {content: 'Panel 3'},
            {content: 'Panel 4'}
        ]}
    ]
});

new ex.App().renderInto(document.body);

sicay

Hi @theryanjduffy ! Thanks for your reply!

Here's my code for this particular view. The images are transparent with a dark grey background.

enyo.kind(
	{
	name: "LandingView",
	kind:"Panels",
	fit:true,
	animate:false,
	components:
		[
			{
			classes:"dark-bg",
			components:
				[
					{
					kind: enyo.Image,
					src: "assets/how-to-use-1.png"
					}
				]
			},
			{
			classes:"dark-bg",
			components:
				[
					{
					kind: enyo.Image,
					src: "assets/how-to-use-2.png"
					}
				]
			},
			{
			classes:"dark-bg",
			components:
				[
					{
					kind: enyo.Image,
					src: "assets/how-to-use-3.png"
					}
				]
			},
			{
			components:
				[
					{
					classes:"header",
					components:
						[
							{
							kind: onyx.Button,
							classes:"enyo-tool-decorator onyx-button enyo-unselectable leftButton",
							content: $L("cancel"),
							ontap:"startNewEvaluation"
							},
							{
							classes:"enyo-image middle",
							kind: enyo.Image,
							src: "assets/logo-small.png"
							},
							{
							kind: onyx.Button,
							classes:"enyo-tool-decorator onyx-button enyo-unselectable rightButton",
							content: $L("agree"),
							ontap:"showHowToUse"
							}
						]
					}
				]
			}
		]
	});

theryanjduffy

There's nothing obviously awry here. Your code looks fine and works when added to my sample from above.

http://jsfiddle.net/01vva2L4/2/

My only guess at this point is that you've used fit: true and assumed it will fill it's container's space. That property normally works with the FittableLayout's to fill remaining space but does nothing otherwise. If Panels aren't sized correctly then the gestures may not work as expected. I've added the 'enyo-fit' class to enforce the fill. 'enyo-fill' might be another option if you don't want to use absolute positioning.

sicay

Hi! Thanks for your help.

I tried both enyo-fit and enyo-fill, but neither worked. Here's the code for my structure that contains the kind

enyo.kind({ name: "panels", kind:"Panels", classes:"body", draggable: false, animate:false, components: [ { name:"initial", kind:"InitialView" }, { name:"wtad", kind:"WhatTheAppDoesView" }, { name:"eula", kind:"EulaView" }, { name:"landing", classes: "enyo-fill", kind:"LandingView" }, ], selectPanelByName: function(name) { this.$[name].show(); this.inherited(arguments); } });

Basically, I have Panels inside LandingView that are draggable, and LandingView itself is a Panel, but only accessible by clicking on a button for example.

Could the problem be from CSS?

Thanks really much for your help!

chrisvanhooser

The problem is you are overloading selectPanelByName and calling show() on a panel. You should just remove that function and let the Panels handle the showing of each panel.

theryanjduffy

@chrisvanhooser is right on the cause of the issue. I dug into it to see precisely why and discovered:
* Dragging between panels requires the container's width to determine how much to transition when dragging by converting the amount dragged to the total width
* The container's width can't be determined correctly for CardArranger until the panel is shown because nodes with display: none have no dimesions.
* CardArranger will call resize() on the transitioning panels which will update the container bounds if they're not already showing. This prevents the unnecessary call for the already active panel.

In your code, the call to show() is short-circuiting this last step by showing the new panel early causing the bounds to be invalid and thereby breaking drag transitioning. As Chris said, you can safely remove the explicit call to show() as Panels will handle that for you.

sicay

Guys, thank you very much for your help! I removed the selectPanelByName function, and it solved my problem! Thank you, thank you!