SwapView element

[cjolif]

We need to be able to swap from a view to another, possibly using ViewStack. There should be an indicator.

[edurocher]

I am adding this comment to discuss various ideas/issues about SwapView.

• The specification as I see it:
  • SwapView is a subclass of ViewStack, so we get all the ViewStack features: show/hide API, transitions, events.
  • In addition, thew SwapView supports a swipe gesture to swap to the next/previous view
  • The SwapView displays a view indicator (little dots at the bottom); it is questionable though if this could not go to ViewStack actually?
• I have been experimenting an implementation that would (possibly) make it possible to reuse existing transitions to implement the swipe feedback. For example, with transition="slide", which basically moves the "in" view from 100% to 0% translation, the view would be translated to X% during the swipe gesture (X computed from the current finger position). It could be nice, for example, to see the view flipping or uncovering during swipe, instead of just slide. However, it seems a little too tricky and I have a hard time coming up with a general and simple implementation, so will probably drop that and just support a "slide" transition during swipe.
• An issue I have come across is: do we support CSS class inheritance? To make ViewStack's transitions work in the SwapView subclass, the component needs to have the "d-view-stack" CSS class, although the SwapView will "naturally" have only the "d-swap-view" baseClass. Currently I am adding the "d-view-stack" class (in postRender), but not sure this is safe (there may be code that resets the class to the baseClass?).

[cjolif]

The SwapView displays a view indicator (little dots at the bottom); it is questionable though if this could not go to ViewStack actually?

I think the idea was actually to make it a separated component that connects to a ViewStack. The reason for that was to allow any layout position without constraints.

[cjolif]

An issue I have come across is: do we support CSS class inheritance? To make ViewStack's transitions work in the SwapView subclass, the component needs to have the "d-view-stack" CSS class, although the SwapView will "naturally" have only the "d-swap-view" baseClass. Currently I am adding the "d-view-stack" class (in postRender), but not sure this is safe (there may be code that resets the class to the baseClass?).

I don't think we support any form of inheritance here (@wkeese can confirm if needed).

Another possibility is having ViewStack CSS modified to do:

.d-view-stack, .d-swap-view {
}

instead of just

.d-view-stack {
}

Not sure which one is best.

[edurocher]

@cjolif:

I think the idea was actually to make it a separated component that connects to a ViewStack.

OK makes sense.

[wkeese]

IIRC we support having multiple baseClasses for a Widget. There might be some bugs though, but at least it worked in dijit.

I guess my comment is irrelevant if SwapView is "a separated component that connects to a ViewStack"... although I'm not sure what that means exactly. When rendering completes, is <d-view-stack> a child of <d-swap-view>?

[mythic2]

I don't think we support any form of inheritance here

No, it does not appear so. However, the suggested solution does not provide any help for application developers who wants to override deliteful controls for what ever reasons.

[cjolif]

I guess my comment is irrelevant if SwapView is "a separated component that connects to a ViewStack"... although I'm not sure what that means exactly. When rendering completes, is a child of ?

When talking about separate components I was talking about the page indicator not the SwapView.

[cjolif]

No, it does not appear so. However, the suggested solution does not provide any help for application developers who wants to override deliteful controls for what ever reasons.

Right. In that case I guess the solution of @edurocher of adding a second base class in your subclass is doing the trick?

[mythic2]

For my controls I solved it with definition like

baseClass: 'd-view-stack d-swap-view'

and it works well. If it is the right solution, that I have no idea :-)

[edurocher]

That was my first idea too, then I looked at existing baseClass usages and I found things like this:

    domClass.toggle(this, this.baseClass + "-disabled", this.disabled);

(in https://github.com/ibm-js/deliteful/blob/master/StarRating.js#L108, but there are many other examples in deliteful) which made me think baseClass was supposed to be only one class (even though that code probably works if the widget's "real" base class is last in the list, but that seems a little fragile).

In any case it is useful to discuss this and clarify (and maybe also document?).

[wkeese]

OK, nevermind, I guess baseClass just takes one class. Actually it is already documented that way:

/**
 * Root CSS class of the widget (ex: "d-text-box")
 * @member {string}
 * @protected
 */
baseClass: "",

[edurocher]

Here is some preliminary work: edurocher@19c04db. Just the swap interaction with a very simple sample for now (and no tests yet).

[edurocher]

And now a first shot at the ViewIndicator: edurocher@e535d81.

[edurocher]

Merged #398.
I will close this issue when the unit and functional tests are done.

[edurocher]

Tests pushed (48fb578 and 89db608), closing this issue.