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

Method #1 Method #2

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.29/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.

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);

Controllers

Components

Support this work