Transpose Fx

The transpose-fx controller can be used to swap an element from a view to another one. For instance when an element in a list view is clicked and the detail view of that element is then shown.

Demo: Tap elements to pop up the details view:

Transpose Fx Demo

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

Usage

1. Import transpose-fx module

<script type="module">
import "https://zuixjs.github.io/zkit/lib/1.2/controllers/transpose-fx.module.js";
</script>

2. Add component

Add the transpose-fx component inside the element hosting the target view:

<div class="my-dialog-view">

<transpose-fx z-context="tfx"></transpose-fx>

<div class="transpose-fx-container">
<!-- the element will be transposed here -->
</div>

<!-- view content ... -->

</div>

1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.13/js/zuix.min.js"></script>

2. Load the transpose-fx controller

Add the ctrl z-load attributes to the element hosting the target view:

<div ctrl z-load="https://zuixjs.github.io/zkit/lib/1.2/controllers/transpose-fx"
z-context="tfx" class="my-dialog-view">


<div class="transpose-fx-container">
<!-- the element will be transposed here -->
</div>

<!-- view content ... -->

</div>

Use the z-context attribute to assign an identifier to the transpose controller. In the example above the assigned identifier is tfx.

Add the class transpose-fx-container to the container that will host the transposed element once clicked.

Set the initial display mode of the target view to none (the details view), the controller will take care of showing/hiding the view when required.

.my-dialog-view {
display: none;
/* ... */
}

3. Transpose elements

Add the attribute [transpose-to="<context_id>"] to elements you want to be opened in the detail view when clicked. In this example the <context_id> is tfx.

   <img transpose-to="tfx" src="...">

Source elements can be also components, not just images.

try Example on CodePen

Option attributes

  • z-context="<context_id>" identifier name to be used to access this component from JavaScript.
  • :on:<event_name>="<handler>" optional
    set handler function for event <event_name>

Events

  • transpose:begin (e, element)
  • transpose:end (e, element)

Scripting

Get a reference to the component instance:

zuix.context('tfx', (tfx) => {
// store a global reference for later use
self.transposeFx = tfx;
});

Methods

// Transpose 'element' to the transposeFx container
transposeFx.begin(element);
// Transpose element back to its home position
transposeFx.end();
// toggle transposeFx on 'element'
transposeFx.toggle(element);
arrow_left  Previous
Next arrow_right 
Support this work
extension
zKit components v1.2.1
web enhancing bits