Updated codeblock editor to work with fade animation

- Added fadeIn to animation JS service.
- Updated overlay to use anim service and to recieve a callback for
after-anim actions.
- Updated code editor popup to refresh Codemirror instance layout after
animation has completed.

Fixes #1672

diff --git a/resources/js/components/overlay.js b/resources/js/components/overlay.js
index ad6a01061ec033c0beaebc33fa003a665b57b0d7..6963ba9d155f842f434dbe4d6a07877d230b2a05 100644 (file)
--- a/resources/js/components/overlay.js
+++ b/resources/js/components/overlay.js
@@ -1,3 +1,4 @@
+import {fadeIn, fadeOut} from "../services/animations";
 
 class Overlay {
 
@@ -19,29 +20,15 @@ class Overlay {
         }
     }
 
-    hide() { this.toggle(false); }
-    show() { this.toggle(true); }
-
-    toggle(show = true) {
-        let start = Date.now();
-        let duration = 240;
-
-        function setOpacity() {
-            let elapsedTime = (Date.now() - start);
-            let targetOpacity = show ? (elapsedTime / duration) : 1-(elapsedTime / duration);
-            this.container.style.opacity = targetOpacity;
-            if (elapsedTime > duration) {
-                this.container.style.display = show ? 'flex' : 'none';
-                if (show) {
-                    this.focusOnBody();
-                }
-                this.container.style.opacity = '';
-            } else {
-                requestAnimationFrame(setOpacity.bind(this));
-            }
-        }
+    hide(onComplete = null) { this.toggle(false, onComplete); }
+    show(onComplete = null) { this.toggle(true, onComplete); }
 
-        requestAnimationFrame(setOpacity.bind(this));
+    toggle(show = true, onComplete) {
+        if (show) {
+            fadeIn(this.container, 240, onComplete);
+        } else {
+            fadeOut(this.container, 240, onComplete);
+        }
     }
 
     focusOnBody() {

diff --git a/resources/js/services/animations.js b/resources/js/services/animations.js
index b6158ea5f8fbee97872d6350f0a8fa72e9954c13..278a765d5802e2af4feefd1fb1cb26aeaee9b805 100644 (file)
--- a/resources/js/services/animations.js
+++ b/resources/js/services/animations.js
@@ -5,6 +5,22 @@
  */
 const animateStylesCleanupMap = new WeakMap();
 
+/**
+ * Fade in the given element.
+ * @param {Element} element
+ * @param {Number} animTime
+ * @param {Function|null} onComplete
+ */
+export function fadeIn(element, animTime = 400, onComplete = null) {
+    cleanupExistingElementAnimation(element);
+    element.style.display = 'block';
+    animateStyles(element, {
+        opacity: ['0', '1']
+    }, animTime, () => {
+        if (onComplete) onComplete();
+    });
+}
+
 /**
  * Fade out the given element.
  * @param {Element} element

diff --git a/resources/js/services/code.js b/resources/js/services/code.js
index 3fcf74125169855a2a60cd7450bb4c6600b0588b..533940e3b695ffc93dc8d5bd4e189bc92d3c5344 100644 (file)
--- a/resources/js/services/code.js
+++ b/resources/js/services/code.js
@@ -258,10 +258,18 @@ function setMode(cmInstance, modeSuggestion, content) {
 function setContent(cmInstance, codeContent) {
     cmInstance.setValue(codeContent);
     setTimeout(() => {
-        cmInstance.refresh();
+        updateLayout(cmInstance);
     }, 10);
 }
 
+/**
+ * Update the layout (codemirror refresh) of a cm instance.
+ * @param cmInstance
+ */
+function updateLayout(cmInstance) {
+    cmInstance.refresh();
+}
+
 /**
  * Get a CodeMirror instance to use for the markdown editor.
  * @param {HTMLElement} elem
@@ -301,6 +309,7 @@ export default {
     popupEditor: popupEditor,
     setMode: setMode,
     setContent: setContent,
+    updateLayout: updateLayout,
     markdownEditor: markdownEditor,
     getMetaKey: getMetaKey,
 };

diff --git a/resources/js/vues/code-editor.js b/resources/js/vues/code-editor.js
index e0472a973c0b15108ec80fa1038a0e0f55244319..48b4e1766b9ba0c4a84919a7dc2ee097c25b248f 100644 (file)
--- a/resources/js/vues/code-editor.js
+++ b/resources/js/vues/code-editor.js
@@ -3,7 +3,9 @@ import codeLib from "../services/code";
 const methods = {
     show() {
         if (!this.editor) this.editor = codeLib.popupEditor(this.$refs.editor, this.language);
-        this.$refs.overlay.components.overlay.show();
+        this.$refs.overlay.components.overlay.show(() => {
+            codeLib.updateLayout(this.editor);
+        });
     },
     hide() {
         this.$refs.overlay.components.overlay.hide();