Add SortAnimation plugin and example

Author: bahung1221

README.md

@@ -126,6 +126,7 @@ You can find the documentation for each module within their respective directori
   - [ResizeMirror](src/Plugins/ResizeMirror)
   - [Snappable](src/Plugins/Snappable)
   - [SwapAnimation](src/Plugins/SwapAnimation)
+  - [SortAnimation](src/Plugins/SortAnimation)
 - [Sortable](src/Sortable)
   - [SortableEvent](src/Sortable/SortableEvent)
 - [Swappable](src/Swappable)

examples/src/content/Plugins/SortAnimation/SortAnimation.html

@@ -0,0 +1,17 @@
+{% import 'components/Block/Block.html' as Block %}
+
+{% macro render(id) %}
+  <section id="{{ id }}" class="{{ id }}">
+    <article class="BlockLayout BlockLayout--typeFlex">
+      {{ Block.render('one',   {index: 1, draggable: true}) }}
+      {{ Block.render('two',   {index: 2, draggable: true}) }}
+      {{ Block.render('three', {index: 3, draggable: true}) }}
+      {{ Block.render('four',  {index: 4, draggable: true}) }}
+      {{ Block.render('five',  {index: 5, draggable: true}) }}
+      {{ Block.render('six',   {index: 6, draggable: true}) }}
+      {{ Block.render('seven', {index: 7, draggable: true}) }}
+      {{ Block.render('eight', {index: 8, draggable: true}) }}
+      {{ Block.render('nine',  {index: 9, draggable: true}) }}
+    </article>
+  </section>
+{% endmacro %}

examples/src/content/Plugins/SortAnimation/SortAnimation.scss

@@ -0,0 +1,39 @@
+////
+/// Content
+/// SortAnimation
+////
+
+@import 'utils/shared/functions';
+@import 'utils/shared/layout';
+
+$sort-anim-block-name: unquote('Block');
+
+.SortAnimation {
+  @include draggable-source-layout($sort-anim-block-name, 1, 2, 4, 5, 7, 8) {
+    flex-basis: 50%;
+  }
+
+  @include draggable-source-layout($sort-anim-block-name, 3, 6, 9) {
+    flex-basis: 100%;
+  }
+
+  @media screen and (min-width: get-breakpoint(tablet)) {
+    @include draggable-source-layout($sort-anim-block-name, 1, 2, 3, 4, 5, 6, 7, 8, 9) {
+      flex-basis: 33.333%;
+    }
+  }
+
+  .BlockContent {
+    @media screen and (min-width: get-breakpoint(tablet)) {
+      height: rows(3);
+    }
+
+    @media screen and (min-width: get-breakpoint(desktop)) {
+      height: rows(4);
+    }
+
+    @media screen and (min-width: get-breakpoint('1080p', wide)) {
+      height: rows(5);
+    }
+  }
+}

examples/src/content/Plugins/SortAnimation/index.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-unresolved
+import {Sortable, Plugins} from '@shopify/draggable';
+
+export default function SortAnimation() {
+  const containers = document.querySelectorAll('#SortAnimation .BlockLayout');
+
+  if (containers.length === 0) {
+    return false;
+  }
+
+  const sortable = new Sortable(containers, {
+    draggable: '.Block--isDraggable',
+    mirror: {
+      constrainDimensions: true,
+    },
+    plugins: [Plugins.SortAnimation],
+    swapAnimation: {
+      duration: 200,
+      easingFunction: 'ease-in-out',
+    },
+  });
+
+  return sortable;
+}

examples/src/content/index.js

@@ -16,6 +16,7 @@ import GridLayout from './Swappable/GridLayout';
 import PluginsCollidable from './Plugins/Collidable';
 import PluginsSnappable from './Plugins/Snappable';
 import PluginsSwapAnimation from './Plugins/SwapAnimation';
+import PluginsSortAnimation from './Plugins/SortAnimation';
 
 const Content = {
   Home,
@@ -30,6 +31,7 @@ const Content = {
   PluginsCollidable,
   PluginsSnappable,
   PluginsSwapAnimation,
+  PluginsSortAnimation,
 };
 
 export default Content;

examples/src/styles/examples-app.scss

@@ -58,3 +58,4 @@
 @import 'content/Plugins/Collidable/Collidable';
 @import 'content/Plugins/Snappable/Snappable';
 @import 'content/Plugins/SwapAnimation/SwapAnimation';
+@import 'content/Plugins/SortAnimation/SortAnimation';

examples/src/views/data-pages.json

@@ -31,7 +31,8 @@
       "Plugins": [
         "Collidable",
         "Snappable",
-        "~Swap Animation"
+        "~Swap Animation",
+        "Sort Animation"
       ]
     }
   ]

examples/src/views/sort-animation.html

@@ -0,0 +1,29 @@
+{% extends 'templates/document.html' %}
+
+{% import 'components/Document/Head.html' as Head %}
+{% import 'components/Sidebar/Sidebar.html' as Sidebar %}
+{% import 'components/PageHeader/PageHeader.html' as PageHeader %}
+
+{% import 'content/Plugins/SortAnimation/SortAnimation.html' as SortAnimation %}
+
+{% set ViewAttr = {
+  id: 'SortAnimation',
+  parent: 'Plugins',
+  child: 'Sort Animation',
+  subheading: 'Adds sort animation on all sorted elements with both horizontal and vertical within grid layout'
+} %}
+
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
+
+{% block head %}
+  {{ Head.render(ViewAttr) }}
+{% endblock %}
+
+{% block sidebar %}
+  {{ Sidebar.render(ViewAttr, DataPages) }}
+{% endblock %}
+
+{% block main %}
+  {{ PageHeader.render(ViewAttr) }}
+  {{ SortAnimation.render(ViewAttr.id) }}
+{% endblock %}

scripts/build/bundles.js

@@ -68,6 +68,13 @@ const bundles = [
     source: 'Plugins/SwapAnimation/index',
     path: 'plugins/',
   },
+
+  {
+    name: 'SortAnimation',
+    filename: 'sort-animation',
+    source: 'Plugins/SortAnimation/index',
+    path: 'plugins/',
+  },
 ];
 
 module.exports = {bundles};

src/Plugins/SortAnimation/README.md

@@ -0,0 +1,63 @@
+## SortAnimation
+
+The sort animation plugin currently only works with `Sortable`. It adds sort animation on `sortable:sorted` with both horizontal and vertical within grid layout,
+and animates all sorted elements via `translate3d`. It is currently possible to change the duration and
+the easing function of the animation.
+
+It different with (SwapAnimation)[https://github.com/Shopify/draggable/tree/master/src/Plugins/SwapAnimation] plugin because SwapAnimation only support horizontal or vertical layout.
+
+This plugin is not included by default, so make sure to import it before using.
+
+**NOTE**: Don't use this plugin with (SwapAnimation)[https://github.com/Shopify/draggable/tree/master/src/Plugins/SwapAnimation] plugin to avoid conflict.
+
+### Import
+
+```js
+import { Plugins } from '@shopify/draggable';
+```
+
+```js
+import SortAnimation from '@shopify/draggable/lib/plugins/sort-animation';
+```
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
+```
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/sort-animation.js"></script>
+```
+
+### API
+
+**`new SortAnimation(draggable: Draggable): SortAnimation`**  
+To create a sort animation plugin instance.
+
+### Options
+
+**`duration {Integer}`**  
+The duration option allows you to specify the animation during for a single sort. Default: `150`
+
+**`easingFunction {String}`**  
+The easing option allows you to specify an animation easing function. Default: `'ease-in-out'`
+
+### Examples
+
+```js
+import { Sortable, Plugins } from '@shopify/draggable';
+
+const sortable = new Sortable(document.querySelectorAll('ul'), {
+  draggable: 'li',
+  sortAnimation: {
+    duration: 200,
+    easingFunction: 'ease-in-out',
+  },
+  plugins: [Plugins.SortAnimation]
+});
+```
+
+### Caveats
+
+- Only works within same container
+- Animations don't stagger
+- Only works with `Sortable`