Skip to content

v2.5.5
Compare
Choose a tag to compare
@macCesar macCesar released this 14 Feb 01:58
· 760 commits to master since this release
v2.5.5
ecb7d7f

What's new in v2.5.5

Extra scale values

Added some extra values for the scale property

// Component(s): Ti.UI.ScrollView
// Property(ies): scale
'.scale-0': { scale: '0' }
'.scale-5': { scale: '.05' }
'.scale-10': { scale: '.10' }
'.scale-25': { scale: '.25' }
'.scale-50': { scale: '.5' }
'.scale-75': { scale: '.75' }
'.scale-90': { scale: '.9' }
'.scale-95': { scale: '.95' }
'.scale-100': { scale: '1' }
'.scale-105': { scale: '1.05' }
'.scale-110': { scale: '1.1' }
'.scale-125': { scale: '1.25' }
'.scale-150': { scale: '1.5' }

New draggable method, modifiers and properties in the Animation module

  • Now you can convert any View or a set of Views into draggable elements by using the new draggable method.
  • You can set basic animations when dragging or dropping elements with the modifiers drag: and drop:.
  • You can apply or animate the animations either globally or locally with the draggingType property.
  • You can constraint any View to horizontal or vertical movement with the constraint property.

To install purgetss.ui module in your project, run:

> purgetss module

It will install purgetss.ui inside your lib folder.

For more information and available methods, modifiers and properties, see Animation Module

The draggable method

$.draggableAnimation.draggable([$.red, $.green, $.blue]);

You can use any Animation element created in your view to use the draggable method, but by using one Animation on a set of Views, it will handle the zIndex of every draggable element automatically.

<Alloy>
  <Window class="keep-screen-on dont-exit-on-close">
    <View id="red" class="w-32 h-32 ml-4 bg-red-500 rounded-lg" />

    <View id="green" class="w-32 h-32 ml-10 bg-green-500 rounded-lg" />

    <View id="blue" class="w-32 h-32 ml-16 bg-blue-500 rounded-lg" />

    <Animation id="draggableAnimation" module="purgetss.ui" />
  </Window>
</Alloy>
$.index.open();

$.draggableAnimation.draggable([$.red, $.green, $.blue]);

Draggable Method

* low framerate gif

drag: and drop: prefixes ( modifiers )

You can set basic animations while dragging and dropping elements.

You can create an Animation element with a “global” set of modifiers or you can set modifiers separately to each view.

Local modifiers will overwrite any global modifier.

To simplify things... We are restricting the type of animations that can be apply while dragging ( or dropping ). Mainly we are not applying any size, scale or anchorPoint transformation.

<Alloy>
  <Window class="keep-screen-on dont-exit-on-close">
    <!-- No local modifiers, will be using the global modifiers -->
    <View id="red" class="w-32 h-32 ml-4 bg-red-500 rounded-lg" />

    <!-- Local modifiers: drag:bg-green-700 drop:bg-green-500 plus the global modifiers-->
    <View id="green" class="w-32 h-32 ml-10 bg-green-500 rounded-lg drag:bg-green-700 drop:bg-green-500" />

    <!-- Local modifiers: overwriting the global opacity to drag:opacity-80 -->
    <View id="blue" class="w-32 h-32 ml-16 bg-blue-500 rounded-lg drag:opacity-80" />

    <!-- Global set of modifiers -->
    <Animation id="draggableAnimation" module="purgetss.ui" class="drag:duration-100 drag:opacity-50 drop:opacity-100" />
  </Window>
</Alloy>

drag and drop modifiers

* low framerate gif

draggingType property

For controlling how drag: and drop: modifiers are applied, either by animating: drag-animate ( default ) or by applying: drag-apply the properties.

// Component(s): For the Animation Component
// Property(ies): draggingType
'.drag-apply': { draggingType: 'apply' }
'.drag-animate': { draggingType: 'animate' }

In the following example, the Animation element is setting the global dragging type to drag-apply, but the green square is overwriting it to drag-animate.

<Alloy>
  <Window class="keep-screen-on dont-exit-on-close">
    <!-- No local modifiers, will be using the global modifiers -->
    <View id="red" class="w-32 h-32 ml-4 bg-red-500 rounded-lg" />

    <!-- Local modifiers: drag:bg-green-700 drop:bg-green-500 plus the global modifiers-->
    <View id="green" class="w-32 h-32 ml-10 bg-green-500 rounded-lg drag-animate drag:bg-green-700 drop:bg-green-500" />

    <!-- Local modifiers: overwriting the global opacity to drag:opacity-80 -->
    <View id="blue" class="w-32 h-32 ml-16 bg-blue-500 rounded-lg drag:opacity-80" />

    <!-- Global set of modifiers -->
    <Animation id="draggableAnimation" module="purgetss.ui" class="drag-apply drag:duration-500 drag:opacity-50 drop:opacity-100" />
  </Window>
</Alloy>

drag and drop modifiers

* low framerate gif

vertical and horizontal constraints

Add a vertical and horizontal constraint to any dragging element.

// Component(s): Ti.UI.Animation
// Property(ies): A custom property to use it with the Animation module
'.horizontal-constraint': { constraint: 'horizontal' }
'.vertical-constraint': { constraint: 'vertical' }

In this example the card will move only from side to side.

<Alloy>
  <Window class="keep-screen-on dont-exit-on-close">
    <View id="card" class="w-64 h-24 shadow-lg horizontal-constraint">
      <View id="cardInside" class="w-screen bg-white border-2 border-purple-700 rounded-lg">
        <ImageView id="theImage" class="w-16 h-16 m-4 ml-4 rounded-16" image="https://randomuser.me/api/portraits/women/17.jpg" />

        <View class="w-screen ml-24 vertical">
          <Label class="ml-0 text-sm font-bold text-gray-800" text="Someone Famous" />
          <Label class="ml-0 text-xs font-bold text-gray-400" text="Website Designer" />
        </View>
      </View>
    </View>

    <Animation id="draggableAnimation" module="purgetss.ui" />
  </Window>
</Alloy>
$.index.open();

$.draggableAnimation.draggable($.card);

drag and drop modifiers

* low framerate gif

Assets 2
Loading