onboarding set flags on userprofile

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

@@ -170,33 +170,17 @@ const TranscriptionModal = Vue.component('transcriptionmodal', {
         },
         show_onboarding(){
 
-            if(onboarding_trans == "True"){
+            if(onboarding == "True"  && !onboarding_trans) {
                 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.setOptions({steps: steps_trans});
 
                 this.intro.start();
                 this.intro.onexit(function () {
-                exitonboarding({
-                    onboarding_trans : "False",
-                    });
+                exitonboarding();
                 });
 
                 this.intro.oncomplete(function () {
-                    exitonboarding({
-                        onboarding_trans : "False",
-                    });
+                    exitonboarding();
                 });
 
             }

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

@@ -17,7 +17,7 @@ var partVM = new Vue({
         intro : introJs()
     },
     mounted(){
-        if(onboarding_edit =="True") {
+        if(onboarding =="True"  && !onboarding_edit) {
             this.$nextTick(function () {
                 this.show = {
                     source: true,
@@ -197,16 +197,15 @@ var partVM = new Vue({
     methods: {
         show_onboarding(){
 
-            this.intro.setOptions({steps: steps_intro});
+            this.intro.setOptions({steps: steps_edit});
             this.intro.start();
             this.intro.onexit(function () {
-                exitonboarding({
-                onboarding_edit : "False",
-                });
+                exitonboarding();
             });
 
             this.intro.oncomplete(function () {
                 window.location.href= models_url;
+                userProfile.set('onboarding_edit',true);
             });
         },
         resetZoom() {

app/escriptorium/static/js/onboarding/edit.js

-steps_intro = [
+steps_edit = [
 {
   element: '#document-transcriptions',
   intro: 'Here you can select which transcription to display. You may have several transcriptions for a given page,<br> for instance a manual one and one created automatically, or two different editions that you have imported.\n',

app/escriptorium/static/js/onboarding/exit.js

-function exitonboarding(onboarding) {
+function exitonboarding() {
   $.ajax({type: 'PUT', url:'/api/users/onboarding/',
           contentType: "application/json; charset=utf-8",
-          data:JSON.stringify(onboarding)
+          data:JSON.stringify({
+            onboarding : "False",
+            })
 
       }).done($.proxy(function(data){
             }, this)).fail(function(data) {

app/escriptorium/templates/core/document_images.html

@@ -116,7 +116,8 @@
 <script type="text/javascript">
 'use strict';
 const DOCUMENT_ID = {{ document.pk }};
-const onboarding_images  = "{{ onboarding_images }}";
+var onboarding_images  = userProfile.get('onboarding_images');
+const onboarding  = "{{ onboarding }}";
 $(document).ready(function() {
   // join the ws room
   msgSocket.addEventListener('open', function(ev) {
@@ -138,17 +139,16 @@ $(document).ready(function() {
 {% endcompress %}
 
 <script type="text/javascript">
-if (onboarding_images == "True")
+if (onboarding== "True" && !onboarding_images)
 {
     document_images_intro.start();
     document_images_intro.onexit(function() {
-        exitonboarding({
-            onboarding_images : "False",
-            });
+        exitonboarding();
     });
 
     document_images_intro.oncomplete(function() {
         var edit_url = "{% url 'document-part-edit' pk=document.pk %}";
+        userProfile.set('onboarding_images',true);
         window.location.href = edit_url;
     });
 

app/escriptorium/templates/core/document_part_edit.html

@@ -621,9 +621,10 @@
    const TEXT_DIRECTION = '{{document.main_script.text_direction}}';
    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 %}";
+   const onboarding  = "{{ onboarding }}";
+   var onboarding_edit  = userProfile.get('onboarding_edit');
+   var onboarding_trans  = userProfile.get('onboarding_trans');
+   var models_url = "{% url 'document-models' document_pk=document.pk %}";
   </script>
 
   <script type="text/javascript">
@@ -651,6 +652,7 @@
   <script type="text/javascript" src="{% static 'vendor/jquery/jquery-ui.min.js' %}"></script>
   <script src="{% static 'vendor/introjs/intro.js' %}"></script>
   <script src="{% static 'js/onboarding/edit.js' %}"></script>
+  <script src="{% static 'js/onboarding/trans.js' %}"></script>
   <script src="{% static 'js/onboarding/exit.js' %}"></script>
   <script type="text/javascript" src="{% static 'js/wheelzoom.js' %}"></script>
   <script type="text/javascript" src="{% static 'js/baseline.editor.js' %}"></script>