trans modal

app/apps/core/static/js/edit/components/trans_modal.js

@@ -26,6 +26,10 @@ const TranscriptionModal = Vue.component('transcriptionmodal', {
         $(this.$el).draggable({handle: '.modal-header'});
         $(this.$el).resizable();
         this.computeStyles();
+        let timer = setTimeout(function (){
+            this.show_onboarding();
+                     }.bind(this),
+                1000);
     },
     watch: {
         line(new_, old_) {
@@ -164,5 +168,38 @@ const TranscriptionModal = Vue.component('transcriptionmodal', {
                 overlay.style.display = 'none';
             }
         },
+        show_onboarding(){
+
+            if(onboarding_trans == "True"){
+                this.intro = introJs();
+                this.intro.setOptions({steps: [
+                    {
+                     element: '#modal-img-container',
+                     intro: "This shows the transcription pane where you can enter or correct a transcription line-by-line.<br>" +
+                         " Clicking on a line of text will bring up a window showing the image of that line, and a box where you can enter or correct the transcription.\n",
+                     position: 'top'
+                    },
+                    {
+                        element: '#trans-input-container',
+                        intro : "Here you can select which transcriptions to show in the transcription pane for comparison.",
+                        position: 'top'
+                        }
+                ]});
+
+                this.intro.start();
+                this.intro.onexit(function () {
+                exitonboarding({
+                    onboarding_trans : "False",
+                    });
+                });
+
+                this.intro.oncomplete(function () {
+                    exitonboarding({
+                        onboarding_trans : "False",
+                    });
+                });
+
+            }
+        }
     },
 });

app/apps/core/static/js/edit/main.js

@@ -17,7 +17,7 @@ var partVM = new Vue({
         intro : introJs()
     },
     mounted(){
-        if(onboarding_edit) {
+        if(onboarding_edit =="True") {
             this.$nextTick(function () {
                 this.show = {
                     source: true,
@@ -26,7 +26,7 @@ var partVM = new Vue({
                     diplomatic: true
                 };
                 let timer = setTimeout(function (){
-                        this.call_introjs();
+                        this.show_onboarding();
                      }.bind(this),
                 2000);
 
@@ -195,7 +195,7 @@ var partVM = new Vue({
         }.bind(this));
     },
     methods: {
-        call_introjs(){
+        show_onboarding(){
 
             this.intro.setOptions({steps: steps_intro});
             this.intro.start();

app/apps/core/views.py

@@ -251,6 +251,7 @@ class EditPart(LoginRequiredMixin, DetailView):
         context['document'] = self.object.document
         context['part'] = self.object
         context['onboarding_edit'] = self.request.user.onboarding_edit
+        context['onboarding_trans'] = self.request.user.onboarding_trans
         return context
 
     def dispatch(self, *args, **kwargs):

app/escriptorium/templates/core/document_part_edit.html

@@ -622,6 +622,7 @@
    const DOCUMENT_ID = '{{document.id}}';
    var PART_ID = {{part.id}};  // can be changed with next & previous pages
   const onboarding_edit  = "{{ onboarding_edit }}";
+  const onboarding_trans  = "{{ onboarding_trans }}";
   var models_url = "{% url 'document-models' document_pk=document.pk %}";
   </script>