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

resources/js/components/overlay.js

@@ -1,3 +1,4 @@
+import {fadeIn, fadeOut} from "../services/animations";
 
 class Overlay {
 
@@ -19,31 +20,17 @@ class Overlay {
         }
     }
 
-    hide() { this.toggle(false); }
+    hide(onComplete = null) { this.toggle(false, onComplete); }
-    show() { this.toggle(true); }
+    show(onComplete = null) { this.toggle(true, onComplete); }
 
-    toggle(show = true) {
+    toggle(show = true, onComplete) {
-        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();
+            fadeIn(this.container, 240, onComplete);
-                }
-                this.container.style.opacity = '';
         } else {
-                requestAnimationFrame(setOpacity.bind(this));
+            fadeOut(this.container, 240, onComplete);
         }
     }
 
-        requestAnimationFrame(setOpacity.bind(this));
-    }
-
     focusOnBody() {
         const body = this.container.querySelector('.popup-body');
         if (body) {

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

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,
 };

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();