aberdeen 0.2.4 → 0.4.0

package/dist/transitions.js

@@ -1,4 +1,13 @@
-import { scheduleDomReader, scheduleDomWriter } from 'aberdeen';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { DOM_READ_PHASE, DOM_WRITE_PHASE } from './aberdeen.js';
 const FADE_TIME = 400;
 const GROW_SHRINK_TRANSITION = `margin ${FADE_TIME}ms ease-out, transform ${FADE_TIME}ms ease-out`;
 function getGrowShrinkProps(el) {
@@ -17,31 +26,26 @@ function getGrowShrinkProps(el) {
 * for other specific cases as well.
 */
 export function grow(el) {
-    // This timeout is to await all other elements having been added to the Dom
-    scheduleDomReader(() => {
-        // Make the element size 0 using transforms and negative margins.
-        // This causes a browser layout, as we're querying el.offset<>.
+    return __awaiter(this, void 0, void 0, function* () {
+        // Wait until all DOM updates have been done. Then get info from the computed layout.
+        yield DOM_READ_PHASE;
         let props = getGrowShrinkProps(el);
-        // The timeout is in order to batch all reads and then all writes when there
-        // are multiple simultaneous grow transitions.
-        scheduleDomWriter(() => {
-            Object.assign(el.style, props);
-            // This timeout is to combine multiple transitions into a single browser layout
-            scheduleDomReader(() => {
-                // Make sure the layouting has been performed, to cause transitions to trigger
-                el.offsetHeight;
-                scheduleDomWriter(() => {
-                    // Do the transitions
-                    el.style.transition = GROW_SHRINK_TRANSITION;
-                    for (let prop in props)
-                        el.style[prop] = "";
-                    setTimeout(() => {
-                        // Reset the element to a clean state
-                        el.style.transition = "";
-                    }, FADE_TIME);
-                });
-            });
-        });
+        // In the write phase, make the element size 0 using transforms and negative margins.
+        yield DOM_WRITE_PHASE;
+        Object.assign(el.style, props);
+        // Await read phase, to combine multiple transitions into a single browser layout
+        yield DOM_READ_PHASE;
+        // Make sure the layouting has been performed, to cause transitions to trigger
+        el.offsetHeight;
+        // In the next write phase, do the transitions
+        yield DOM_WRITE_PHASE;
+        el.style.transition = GROW_SHRINK_TRANSITION;
+        for (let prop in props)
+            el.style[prop] = '';
+        setTimeout(() => {
+            // Disable transitions.
+            el.style.transition = '';
+        }, FADE_TIME);
     });
 }
 /** Do a shrink transition for the given element, and remove it from the DOM
@@ -53,15 +57,18 @@ export function grow(el) {
 * for other specific cases as well.
 */
 export function shrink(el) {
-    scheduleDomReader(() => {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Wait until all DOM updates have been done. Then get info from the computed layout.
+        yield DOM_READ_PHASE;
         const props = getGrowShrinkProps(el);
-        // The timeout is in order to batch all reads and then all writes when there
-        // are multiple simultaneous shrink transitions.
-        scheduleDomWriter(() => {
-            el.style.transition = GROW_SHRINK_TRANSITION;
-            Object.assign(el.style, props);
-            setTimeout(() => el.remove(), FADE_TIME);
-        });
+        // Batch starting transitions in the write phase.
+        yield DOM_WRITE_PHASE;
+        el.style.transition = GROW_SHRINK_TRANSITION;
+        Object.assign(el.style, props);
+        // Remove the element after the transition is done.
+        setTimeout(() => {
+            el.remove();
+        }, FADE_TIME);
     });
 }
 //# sourceMappingURL=transitions.js.map

package/dist/transitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"transitions.js","sourceRoot":"","sources":["../src/transitions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAE7D,MAAM,SAAS,GAAG,GAAG,CAAA;AACrB,MAAM,sBAAsB,GAAG,UAAU,SAAS,0BAA0B,SAAS,aAAa,CAAA;AAElG,SAAS,kBAAkB,CAAC,EAAe;IAC1C,MAAM,WAAW,GAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACnF,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,KAAK,MAAM,IAAI,CAAC,WAAW,CAAC,aAAa,IAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IACxG,OAAO,YAAY,CAAC,CAAC;QACpB,EAAC,UAAU,EAAE,IAAI,EAAE,CAAC,WAAW,GAAC,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,WAAW,GAAC,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAC,CAAC,CAAC;QACvG,EAAC,YAAY,EAAE,IAAI,EAAE,CAAC,YAAY,GAAC,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,YAAY,GAAC,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAC,CAAA;AAEzG,CAAC;AAED;;;;;;;EAOE;AACF,MAAM,UAAU,IAAI,CAAC,EAAe;IACnC,2EAA2E;IAC3E,iBAAiB,CAAC,GAAG,EAAE;QACtB,iEAAiE;QACjE,+DAA+D;QAC/D,IAAI,KAAK,GAAG,kBAAkB,CAAC,EAAE,CAAC,CAAA;QAElC,4EAA4E;QAC5E,8CAA8C;QAC9C,iBAAiB,CAAC,GAAG,EAAE;YACtB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;YAE9B,+EAA+E;YAC/E,iBAAiB,CAAC,GAAG,EAAE;gBACtB,8EAA8E;gBAC9E,EAAE,CAAC,YAAY,CAAA;gBACf,iBAAiB,CAAC,GAAG,EAAE;oBACtB,qBAAqB;oBACrB,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,sBAAsB,CAAA;oBAC5C,KAAI,IAAI,IAAI,IAAI,KAAK;wBAAE,EAAE,CAAC,KAAK,CAAC,IAAW,CAAC,GAAG,EAAE,CAAA;oBACjD,UAAU,CAAC,GAAG,EAAE;wBACf,qCAAqC;wBACrC,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAA;oBACzB,CAAC,EAAE,SAAS,CAAC,CAAA;gBACd,CAAC,CAAC,CAAA;YACH,CAAC,CAAC,CAAA;QACH,CAAC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;AACH,CAAC;AAED;;;;;;;EAOE;AACF,MAAM,UAAU,MAAM,CAAC,EAAe;IACrC,iBAAiB,CAAC,GAAG,EAAE;QACtB,MAAM,KAAK,GAAG,kBAAkB,CAAC,EAAE,CAAC,CAAA;QACpC,4EAA4E;QAC5E,gDAAgD;QAChD,iBAAiB,CAAC,GAAG,EAAE;YACtB,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,sBAAsB,CAAA;YAC5C,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;YAE9B,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,SAAS,CAAC,CAAA;QACzC,CAAC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;AACH,CAAC"}
+{"version":3,"file":"transitions.js","sourceRoot":"","sources":["../src/transitions.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAC,cAAc,EAAE,eAAe,EAAC,MAAM,eAAe,CAAA;AAE7D,MAAM,SAAS,GAAG,GAAG,CAAA;AACrB,MAAM,sBAAsB,GAAG,UAAU,SAAS,0BAA0B,SAAS,aAAa,CAAA;AAElG,SAAS,kBAAkB,CAAC,EAAe;IAC1C,MAAM,WAAW,GAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACnF,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,KAAK,MAAM,IAAI,CAAC,WAAW,CAAC,aAAa,IAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IACxG,OAAO,YAAY,CAAC,CAAC;QACpB,EAAC,UAAU,EAAE,IAAI,EAAE,CAAC,WAAW,GAAC,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,WAAW,GAAC,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAC,CAAC,CAAC;QACvG,EAAC,YAAY,EAAE,IAAI,EAAE,CAAC,YAAY,GAAC,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,YAAY,GAAC,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAC,CAAA;AAEzG,CAAC;AAED;;;;;;;EAOE;AACF,MAAM,UAAgB,IAAI,CAAC,EAAe;;QACzC,qFAAqF;QACrF,MAAM,cAAc,CAAA;QACpB,IAAI,KAAK,GAAG,kBAAkB,CAAC,EAAE,CAAC,CAAA;QAElC,qFAAqF;QACrF,MAAM,eAAe,CAAA;QACrB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;QAE9B,iFAAiF;QACjF,MAAM,cAAc,CAAA;QACpB,8EAA8E;QAC9E,EAAE,CAAC,YAAY,CAAA;QAEf,8CAA8C;QAC9C,MAAM,eAAe,CAAA;QACrB,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,sBAAsB,CAAA;QAC5C,KAAI,IAAI,IAAI,IAAI,KAAK;YAAE,EAAE,CAAC,KAAK,CAAC,IAAW,CAAC,GAAG,EAAE,CAAA;QACjD,UAAU,CAAC,GAAG,EAAE;YACf,uBAAuB;YACvB,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAA;QACzB,CAAC,EAAE,SAAS,CAAC,CAAA;IACd,CAAC;CAAA;AAED;;;;;;;EAOE;AACF,MAAM,UAAgB,MAAM,CAAC,EAAe;;QAC3C,qFAAqF;QACrF,MAAM,cAAc,CAAA;QACpB,MAAM,KAAK,GAAG,kBAAkB,CAAC,EAAE,CAAC,CAAA;QAEpC,iDAAiD;QACjD,MAAM,eAAe,CAAA;QACrB,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,sBAAsB,CAAA;QAC5C,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;QAE9B,mDAAmD;QACnD,UAAU,CAAC,GAAG,EAAE;YACf,EAAE,CAAC,MAAM,EAAE,CAAA;QACZ,CAAC,EAAE,SAAS,CAAC,CAAA;IACd,CAAC;CAAA"}