update to ES2020, some refactoring and cleanups

public/scripts/AppFlip.js

@@ -1,19 +1,16 @@
-/* global VT */
-window.VT = window.VT || {};
-
-VT.AppFlip = function (el, options) {
-  var enabled = options.initialDelay === 0;
-  var first;
-  var level = 0;
+export function AppFlip(el, options) {
+  let enabled = options.initialDelay === 0;
+  let first;
+  let level = 0;
 
   // enable animations only after an initial delay
-  setTimeout(function () {
+  setTimeout(() => {
     enabled = true;
   }, options.initialDelay || 100);
 
   // take a snapshot before any HTML changes
   // do this only for the first beforeFlip event in the current cycle
-  el.addEventListener('beforeFlip', function () {
+  el.addEventListener('beforeFlip', () => {
     if (!enabled) return;
     if (++level > 1) return;
 
@@ -22,16 +19,16 @@ VT.AppFlip = function (el, options) {
 
   // take a snapshot after HTML changes, calculate and play animations
   // do this only for the last flip event in the current cycle
-  el.addEventListener('flip', function () {
+  el.addEventListener('flip', () => {
     if (!enabled) return;
     if (--level > 0) return;
 
-    var last = snapshot();
-    var toRemove = invertForRemoval(first, last);
-    var toAnimate = invertForAnimation(first, last);
+    const last = snapshot();
+    const toRemove = invertForRemoval(first, last);
+    const toAnimate = invertForAnimation(first, last);
 
-    requestAnimationFrame(function () {
-      requestAnimationFrame(function () {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
         remove(toRemove);
         animate(toAnimate);
 
@@ -43,23 +40,23 @@ VT.AppFlip = function (el, options) {
   // build a snapshot of the current HTML's client rectangles
   // includes original transforms and hierarchy
   function snapshot() {
-    var map = new Map();
+    const map = new Map();
 
-    el.querySelectorAll(options.selector).forEach(function (el) {
-      var key = el.dataset.key || el;
+    el.querySelectorAll(options.selector).forEach((el) => {
+      const key = el.dataset.key ?? el;
 
       // parse original transform
       // i.e. strip inverse transform using "scale(1)" marker
-      var transform = el.style.transform
+      const transform = el.style.transform
         ? el.style.transform.replace(/^.*scale\(1\)/, '')
         : '';
 
       map.set(key, {
-        key: key,
-        el: el,
+        key,
+        el,
         rect: el.getBoundingClientRect(),
         ancestor: null,
-        transform: transform,
+        transform,
       });
     });
 
@@ -69,11 +66,11 @@ VT.AppFlip = function (el, options) {
   }
 
   function resolveAncestors(map) {
-    map.forEach(function (entry) {
-      var current = entry.el.parentNode;
+    map.forEach((entry) => {
+      let current = entry.el.parentNode;
 
       while (current && current !== el) {
-        var ancestor = map.get(current.dataset.key || current);
+        const ancestor = map.get(current.dataset.key ?? current);
 
         if (ancestor) {
           entry.ancestor = ancestor;
@@ -87,16 +84,16 @@ VT.AppFlip = function (el, options) {
 
   // reinsert removed elements at their original position
   function invertForRemoval(first, last) {
-    var toRemove = [];
+    const toRemove = [];
 
-    first.forEach(function (entry) {
+    first.forEach((entry) => {
       if (entry.el.classList.contains('_noflip')) return;
       if (!needsRemoval(entry)) return;
 
       entry.el.style.position = 'fixed';
-      entry.el.style.left = entry.rect.left + 'px';
-      entry.el.style.top = entry.rect.top + 'px';
-      entry.el.style.width = entry.rect.right - entry.rect.left + 'px';
+      entry.el.style.left = `${entry.rect.left}px`;
+      entry.el.style.top = `${entry.rect.top}px`;
+      entry.el.style.width = `${entry.rect.right - entry.rect.left}px`;
       entry.el.style.transition = 'none';
       entry.el.style.transform = '';
 
@@ -118,9 +115,9 @@ VT.AppFlip = function (el, options) {
   // set position of moved elements to their original position
   // or set opacity to zero for new elements to appear nicely
   function invertForAnimation(first, last) {
-    var toAnimate = [];
+    const toAnimate = [];
 
-    last.forEach(function (entry) {
+    last.forEach((entry) => {
       if (entry.el.classList.contains('_noflip')) return;
 
       calculate(entry);
@@ -132,13 +129,7 @@ VT.AppFlip = function (el, options) {
       } else if (entry.deltaX !== 0 || entry.deltaY !== 0) {
         // set inverted transform with "scale(1)" marker, see above
         entry.el.style.transition = 'none';
-        entry.el.style.transform =
-          'translate(' +
-          entry.deltaX +
-          'px, ' +
-          entry.deltaY +
-          'px) scale(1) ' +
-          entry.transform;
+        entry.el.style.transform = `translate(${entry.deltaX}px, ${entry.deltaY}px) scale(1) ${entry.transform}`;
         toAnimate.push(entry);
       }
     });
@@ -150,7 +141,7 @@ VT.AppFlip = function (el, options) {
       if (entry.calculated) return;
       entry.calculated = true;
 
-      var b = first.get(entry.key);
+      const b = first.get(entry.key);
 
       if (b) {
         entry.deltaX = b.rect.left - entry.rect.left;
@@ -172,13 +163,13 @@ VT.AppFlip = function (el, options) {
 
   // play remove animations and remove elements after timeout
   function remove(entries) {
-    entries.forEach(function (entry) {
+    entries.forEach((entry) => {
       entry.el.style.transition = '';
       entry.el.style.opacity = '0';
     });
 
-    setTimeout(function () {
-      entries.forEach(function (entry) {
+    setTimeout(() => {
+      entries.forEach((entry) => {
         if (entry.el.parentNode) {
           entry.el.parentNode.removeChild(entry.el);
         }
@@ -188,10 +179,10 @@ VT.AppFlip = function (el, options) {
 
   // play move/appear animations
   function animate(entries) {
-    entries.forEach(function (entry) {
+    entries.forEach((entry) => {
       entry.el.style.transition = '';
       entry.el.style.transform = entry.transform;
       entry.el.style.opacity = '';
     });
   }
-};
+}