From 205658e4d576c03d831f434560d7195d8909ffba Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Thu, 27 Feb 2025 18:55:21 +0000
Subject: =?UTF-8?q?Courseware:=20=C2=BBSchreibmaschine=C2=AB-Block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #5302

Merge request studip/studip!3966
---
 package.json                                       |  1 -
 .../scss/courseware/blocks/typewriter.scss         | 54 ++++++++++----------
 .../blocks/CoursewareTypewriterBlock.vue           | 58 ++++++++++++----------
 3 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index fb1aed1..e52d011 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,6 @@
         "vue-resizable": "^2.1.7",
         "vue-router": "^4.5.0",
         "vue-select": "^4.0.0-beta.6",
-        "vue-typer": "^1.2.0",
         "vue3-gettext": "^3.0.0-beta.5",
         "vuedraggable": "^4.1.0",
         "vuex": "^4.1.0",
diff --git a/resources/assets/stylesheets/scss/courseware/blocks/typewriter.scss b/resources/assets/stylesheets/scss/courseware/blocks/typewriter.scss
index 89a12df..6b99841 100644
--- a/resources/assets/stylesheets/scss/courseware/blocks/typewriter.scss
+++ b/resources/assets/stylesheets/scss/courseware/blocks/typewriter.scss
@@ -1,38 +1,36 @@
 .cw-typewriter-content {
-    .vue-typer {
-        &.font-typewriter {
-            font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace;
-        }
+    &.font-typewriter {
+        font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace;
+    }
 
-        &.font-trebuchet {
-            font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
-        }
+    &.font-trebuchet {
+        font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
+    }
 
-        &.font-tahoma {
-            font-family: Tahoma, Verdana, Segoe, sans-serif;
-        }
+    &.font-tahoma {
+        font-family: Tahoma, Verdana, Segoe, sans-serif;
+    }
 
-        &.font-georgia {
-            font-family: Georgia, Times, 'Times New Roman', serif;
-        }
+    &.font-georgia {
+        font-family: Georgia, Times, 'Times New Roman', serif;
+    }
 
-        &.font-narrow {
-            font-family: 'Arial Narrow', Arial, 'Helvetica Condensed', Helvetica, sans-serif;
-        }
+    &.font-narrow {
+        font-family: 'Arial Narrow', Arial, 'Helvetica Condensed', Helvetica, sans-serif;
+    }
 
-        &.size-tall {
-            font-size: 1.25em;
-            line-height: 1.25em;
-        }
+    &.size-tall {
+        font-size: 1.25em;
+        line-height: 1.25em;
+    }
 
-        &.size-grande {
-            font-size: 1.5em;
-            line-height: 1.25em;
-        }
+    &.size-grande {
+        font-size: 1.5em;
+        line-height: 1.25em;
+    }
 
-        &.size-huge {
-            font-size: 2em;
-            line-height: 1.25em;
-        }
+    &.size-huge {
+        font-size: 2em;
+        line-height: 1.25em;
     }
 }
diff --git a/resources/vue/components/courseware/blocks/CoursewareTypewriterBlock.vue b/resources/vue/components/courseware/blocks/CoursewareTypewriterBlock.vue
index c983bb8..8781313 100644
--- a/resources/vue/components/courseware/blocks/CoursewareTypewriterBlock.vue
+++ b/resources/vue/components/courseware/blocks/CoursewareTypewriterBlock.vue
@@ -1,24 +1,17 @@
 <template>
     <div class="cw-block cw-block-typewriter">
         <courseware-default-block
-        :block="block"
-        :canEdit="canEdit"
-        :isTeacher="isTeacher"
-        :preview="true"
-        @showEdit="initCurrentData"
-        @storeEdit="storeText"
-        @closeEdit="initCurrentData"
+            :block="block"
+            :canEdit="canEdit"
+            :isTeacher="isTeacher"
+            :preview="true"
+            @showEdit="initCurrentData"
+            @storeEdit="storeText"
+            @closeEdit="initCurrentData"
         >
             <template #content>
-                <div class="cw-typewriter-content">
-                    <vue-typer
-                        :text="currentText"
-                        initial-action="typing"
-                        :repeat="0"
-                        :type-delay="typeDelay"
-                        caret-animation="smooth"
-                        :class="[currentFont, currentSize]"
-                    ></vue-typer>
+                <div class="cw-typewriter-content" :class="[currentFont, currentSize]">
+                    <span class="typewriter-text">{{ typedText }}</span>
                 </div>
             </template>
             <template v-if="canEdit" #edit>
@@ -69,13 +62,12 @@
 <script>
 import BlockComponents from './block-components.js';
 import blockMixin from '@/vue/mixins/courseware/block.js';
-import { VueTyper } from 'vue-typer';
 import { mapActions } from 'vuex';
 
 export default {
     name: 'courseware-typewriter-block',
     mixins: [blockMixin],
-    components: Object.assign(BlockComponents, { VueTyper }),
+    components: Object.assign(BlockComponents, {}),
     props: {
         block: Object,
         canEdit: Boolean,
@@ -85,16 +77,12 @@ export default {
         return {
             speeds: [200, 100, 50, 25],
             typing: false,
-            speedClasses: [
-                'cw-typewriter-letter-fadein-slow',
-                'cw-typewriter-letter-fadein-normal',
-                'cw-typewriter-letter-fadein-fast',
-                'cw-typewriter-letter-fadein-veryfast',
-            ],
             currentText: ' ',
             currentSpeed: '',
             currentFont: '',
             currentSize: '',
+            typedText: '',
+            currentIndex: 0,
         };
     },
     computed: {
@@ -114,6 +102,11 @@ export default {
             return this.block?.attributes?.payload?.size;
         }
     },
+    watch: {
+        currentText(newText) {
+            this.startTyping(newText);
+        }
+    },
     mounted() {
         this.initCurrentData();
     },
@@ -126,11 +119,24 @@ export default {
             this.currentSpeed = this.speed;
             this.currentFont = this.font;
             this.currentSize = this.size;
+            this.startTyping(this.currentText);
+        },
+        startTyping(text) {
+            this.currentIndex = 0;
+            this.typedText = '';
+            this.typingEffect(text);
+        },
+        typingEffect(text) {
+            if (this.currentIndex < text.length) {
+                this.typedText += text.charAt(this.currentIndex);
+                this.currentIndex++;
+                setTimeout(() => this.typingEffect(text), this.typeDelay);
+            }
         },
         restartTyping() {
             let text = this.currentText;
             this.currentText = ' ';
-            this.$nextTick(()=> {
+            this.$nextTick(() => {
                 this.currentText = text;
             });
         },
@@ -151,6 +157,8 @@ export default {
     },
 };
 </script>
+
 <style scoped lang="scss">
 @import '../../../../assets/stylesheets/scss/courseware/blocks/typewriter';
+
 </style>
-- 
cgit v1.0