From 2567162fbe2c6b9646e06206e156b3b65eb83082 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Tue, 11 Aug 2020 13:26:55 +0200
Subject: [PATCH 01/32] rename onboarding

---
 .../static/js/{onboarding.js => onboarding_images.js}       | 6 +-----
 app/escriptorium/templates/core/document_images.html        | 5 +++--
 2 files changed, 4 insertions(+), 7 deletions(-)
 rename app/escriptorium/static/js/{onboarding.js => onboarding_images.js} (91%)

diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding_images.js
similarity index 91%
rename from app/escriptorium/static/js/onboarding.js
rename to app/escriptorium/static/js/onboarding_images.js
index 4e2180f7..4f425511 100644
--- a/app/escriptorium/static/js/onboarding.js
+++ b/app/escriptorium/static/js/onboarding_images.js
@@ -1,5 +1,5 @@
 var document_images_intro = introJs();
-document_images_intro.setOptions({
+document_images_intro.setOptions({'doneLabel', 'Next page',
 steps: [
 {
   element: '#nav-doc-tab',
@@ -15,10 +15,6 @@ steps: [
   element: '#nav-models-tab',
   intro: 'Handle Transcription and Segmentation models related to this document.',
   position: 'bottom'
-},  {
-  element: '#document-image-dropzone',
-  intro: 'Upload a new document part image.',
-  position: 'bottom'
 },
 {
   element: '#import-selected',
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index 40acff57..0c0fa964 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -133,7 +133,7 @@ $(document).ready(function() {
     <script src="{% static 'js/image_cards.js' %}"></script>
     <script src="{% static 'js/lazyload.js' %}"></script>
     <script src="{% static 'js/help.js' %}"></script>
-    <script src="{% static 'js/onboarding.js' %}"></script>
+    <script src="{% static 'js/onboarding_images.js' %}"></script>
 {% endcompress %}
 
 <script type="text/javascript">
@@ -145,7 +145,8 @@ if (onboarding == "True")
     });
 
     document_images_intro.oncomplete(function() {
-        exitonboarding();
+        var edit_url = "{% url 'document-part-edit' pk=document.pk %}";
+        window.location.href = edit_url;
     });
 
 }
-- 
GitLab


From 9770b1d87509780b89bf3333253c597cae300454 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Tue, 11 Aug 2020 14:16:44 +0200
Subject: [PATCH 02/32]  multipage onboarding

---
 app/escriptorium/static/js/onboarding_images.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/app/escriptorium/static/js/onboarding_images.js b/app/escriptorium/static/js/onboarding_images.js
index 4f425511..8a67be06 100644
--- a/app/escriptorium/static/js/onboarding_images.js
+++ b/app/escriptorium/static/js/onboarding_images.js
@@ -1,6 +1,6 @@
 var document_images_intro = introJs();
-document_images_intro.setOptions({'doneLabel', 'Next page',
-steps: [
+document_images_intro.setOptions('doneLabel', 'Next page');
+document_images_intro.setOptions({steps: [
 {
   element: '#nav-doc-tab',
   intro: 'Update Document description (Name, Text direction or metadata).<br>',
@@ -44,12 +44,7 @@ steps: [
 {
   element: '#transcribe-selected',
   intro: 'Transcribe automatically the selected images.',
-  position: 'top'
-},
-{
-  element: '#js-edit',
-  intro: 'Transcribe, Segment Manually the image.',
-  position: 'bottom'
+  position: 'left'
 },
 ]});
 
-- 
GitLab


From 0a99e192afd58108893ffa0a960d272a4e635e3a Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Wed, 12 Aug 2020 10:32:40 +0200
Subject: [PATCH 03/32] remove unuesed function

---
 app/escriptorium/static/js/onboarding_images.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/app/escriptorium/static/js/onboarding_images.js b/app/escriptorium/static/js/onboarding_images.js
index 8a67be06..df65fd5a 100644
--- a/app/escriptorium/static/js/onboarding_images.js
+++ b/app/escriptorium/static/js/onboarding_images.js
@@ -48,17 +48,3 @@ document_images_intro.setOptions({steps: [
 },
 ]});
 
-function exitonboarding() {
-  $.ajax({type: 'PUT', url:'/api/users/onboarding/',
-          contentType: "application/json; charset=utf-8",
-          data:JSON.stringify({
-            onboarding : "False",
-            })
-
-      }).done($.proxy(function(data){
-                console.log("success",data)
-            }, this)).fail(function(data) {
-                alert(data);
-            });
-
-}
-- 
GitLab


From 47e438caec2020fbc718d49f8d64a487a0687efa Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Wed, 12 Aug 2020 10:33:39 +0200
Subject: [PATCH 04/32] introjs css

---
 app/escriptorium/templates/base.html                 | 1 +
 app/escriptorium/templates/core/document_images.html | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/escriptorium/templates/base.html b/app/escriptorium/templates/base.html
index 3167a746..251ecb5a 100644
--- a/app/escriptorium/templates/base.html
+++ b/app/escriptorium/templates/base.html
@@ -27,6 +27,7 @@
     <link href="{% static '/vendor/fontawesome/all.min.css' %}" rel="stylesheet" type="text/css">
     <link href="{% static '/css/escriptorium.css' %}" rel="stylesheet" type="text/css">
     <link href="{% static '/css/rtl.css' %}" rel="stylesheet" type="text/css">
+    <link href="{% static 'vendor/introjs/introjs.css' %}" rel="stylesheet" type="text/css">
     {% endcompress %}
 
     {% endblock styles %}
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index 0c0fa964..d5c061fa 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -4,7 +4,6 @@
 {% block styles %}
 <link href="{% static 'vendor/dropzone/basic.min.css' %}" rel="stylesheet" type="text/css">
 <link href="{% static 'vendor/dropzone/dropzone.min.css' %}" rel="stylesheet" type="text/css">
-<link href="{% static 'vendor/introjs/introjs.css' %}" rel="stylesheet" type="text/css">
 
 {# custom jquery ui build with draggable and resizable only #}
 <link href="{% static 'vendor/jquery/jquery-ui.min.css' %}" rel="stylesheet" type="text/css">
-- 
GitLab


From 06634c9682665033e35e2418deb1370349b509a0 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 13 Aug 2020 10:33:21 +0200
Subject: [PATCH 05/32] rename onboarding

---
 .../static/js/{ => onboarding}/onboarding_images.js             | 0
 app/escriptorium/templates/core/document_images.html            | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/escriptorium/static/js/{ => onboarding}/onboarding_images.js (100%)

diff --git a/app/escriptorium/static/js/onboarding_images.js b/app/escriptorium/static/js/onboarding/onboarding_images.js
similarity index 100%
rename from app/escriptorium/static/js/onboarding_images.js
rename to app/escriptorium/static/js/onboarding/onboarding_images.js
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index d5c061fa..39112ff2 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -132,7 +132,7 @@ $(document).ready(function() {
     <script src="{% static 'js/image_cards.js' %}"></script>
     <script src="{% static 'js/lazyload.js' %}"></script>
     <script src="{% static 'js/help.js' %}"></script>
-    <script src="{% static 'js/onboarding_images.js' %}"></script>
+    <script src="{% static 'js/onboarding/images.js' %}"></script>
 {% endcompress %}
 
 <script type="text/javascript">
-- 
GitLab


From a95522aea9b915e39b492dce0e4de2baa3072562 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 13 Aug 2020 12:47:29 +0200
Subject: [PATCH 06/32] integrate onboarding in edit page

---
 app/apps/core/static/js/edit/main.js          | 30 +++++++++++++++++++
 app/apps/core/views.py                        |  1 +
 .../templates/core/document_part_edit.html    |  8 ++++-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index 7e7be15b..312e045e 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/app/apps/core/static/js/edit/main.js
@@ -15,6 +15,23 @@ var partVM = new Vue({
         selectedTranscription: null,
         comparedTranscriptions: []
     },
+    mounted(){
+        if(onboarding) {
+            this.$nextTick(function () {
+                this.show = {
+                    source: true,
+                    segmentation: true,
+                    visualisation: true,
+                    diplomatic: true
+                };
+                let timer = setTimeout(function (){
+                        this.call_introjs();
+                     }.bind(this),
+                2000);
+
+            });
+        }
+    },
     computed: {
         imageSize() {
             return this.part.image.size[0]+'x'+this.part.image.size[1];
@@ -177,6 +194,19 @@ var partVM = new Vue({
         }.bind(this));
     },
     methods: {
+        call_introjs(){
+            var document_edit = introJs();
+            document_edit.setOptions({steps: steps_intro});
+            document_edit.start();
+            document_edit.onexit(function () {
+                // exitonboarding();
+            });
+
+            document_edit.oncomplete(function () {
+            segmentation_intro.start();
+            });
+            console.log("hey you");
+        },
         resetZoom() {
             this.zoom.reset();
         },
diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index 7e38f7ff..fa854662 100644
--- a/app/apps/core/views.py
+++ b/app/apps/core/views.py
@@ -250,6 +250,7 @@ class EditPart(LoginRequiredMixin, DetailView):
         context['object'] = self.object.document
         context['document'] = self.object.document
         context['part'] = self.object
+        context['onboarding'] = self.request.user.onboarding
         return context
 
     def dispatch(self, *args, **kwargs):
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index f2e76a1a..37ccfd13 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/app/escriptorium/templates/core/document_part_edit.html
@@ -62,7 +62,7 @@
     {% endblock %}
 
     {% block extra_nav %}
-    <div class="nav-item ml-auto">
+    <div class="nav-item ml-auto" id="toggle-panels">
         <button type="button"
                 @click="togglePanel"
                 data-target="source"
@@ -171,6 +171,7 @@
             <SegmentationPanel v-if="show.segmentation && part.loaded"
                                v-bind:fullsizeimage="fullsizeimage"
                                v-bind:part="part"
+                               id="segmentation-panel"
                                ref="segPanel" inline-template>
                 <div class="col panel">
                     <div class="tools">
@@ -333,6 +334,7 @@
     <keep-alive>
         <VisuPanel v-if="show.visualisation && part.loaded"
                    v-bind:part="part"
+                   id="transcription-panel"
                    ref="visuPanel" inline-template>
             <div class="col panel">
                 <div class="tools">
@@ -544,6 +546,7 @@
     <keep-alive>
         <DiploPanel v-if="show.diplomatic && part.loaded"
                     v-bind:part="part"
+                    id="diplomatic-panel"
                     ref="diploPanel"
                     inline-template>
             <div class="col panel">
@@ -618,6 +621,7 @@
    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  = "{{ onboarding }}";
   </script>
 
   <script type="text/javascript">
@@ -643,6 +647,8 @@
   <script type="text/javascript" src="{% static 'vendor/undomanager.js' %}"></script>
   <script type="text/javascript" src="{% static 'vendor/lodash/lodash.min.js' %}"></script>
   <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 type="text/javascript" src="{% static 'js/wheelzoom.js' %}"></script>
   <script type="text/javascript" src="{% static 'js/baseline.editor.js' %}"></script>
   <script type="text/javascript" src="{% static 'js/edit/components/base_panel.js' %}"></script>
-- 
GitLab


From 468306b1673b05c4cc2e965d00273acee6045a9b Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 13 Aug 2020 12:48:14 +0200
Subject: [PATCH 07/32] introjs steps files

---
 app/escriptorium/static/js/onboarding/edit.js | 46 +++++++++++++++++
 .../static/js/onboarding/images.js            | 50 +++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 app/escriptorium/static/js/onboarding/edit.js
 create mode 100644 app/escriptorium/static/js/onboarding/images.js

diff --git a/app/escriptorium/static/js/onboarding/edit.js b/app/escriptorium/static/js/onboarding/edit.js
new file mode 100644
index 00000000..9bc3086b
--- /dev/null
+++ b/app/escriptorium/static/js/onboarding/edit.js
@@ -0,0 +1,46 @@
+function exitonboarding() {
+  $.ajax({type: 'PUT', url:'/api/users/onboarding/',
+          contentType: "application/json; charset=utf-8",
+          data:JSON.stringify({
+            onboarding : "False",
+            })
+
+      }).done($.proxy(function(data){
+            }, this)).fail(function(data) {
+                alert(data);
+            });
+
+}
+
+steps_intro = [
+{
+  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',
+  position: 'bottom',
+},
+{
+  element: '#toggle-panels',
+  intro: 'Show/hide panels',
+  position: 'bottom',
+},
+{
+    element: '#part-edit',
+    intro : 'Here you can edit your document, by adding or correcting lines and regions, and by entering or correcting transcriptions',
+    position: 'right',
+},
+{
+    element: '#segmentation-panel',
+    intro : 'In this pane you can manually segment the image or correct the segmentation. You can draw regions or lines onto the image, or change existing lines or regions,<br> and you can also add categories to the different regions and lines (‘main text’, ‘marginal gloss’, ‘page number’ etc.)',
+    position: 'right',
+},
+{
+    element: '#transcription-panel',
+    intro : 'In this pane 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.',
+    position: 'right',
+},
+{
+    element: '#diplomatic-panel',
+    intro : 'This shows another form for entering transcription.<br> Here you can enter and work with multiple lines at a time, for instance copying and pasting a block of text from another source.\n.',
+    position: 'left',
+},
+]
\ No newline at end of file
diff --git a/app/escriptorium/static/js/onboarding/images.js b/app/escriptorium/static/js/onboarding/images.js
new file mode 100644
index 00000000..df65fd5a
--- /dev/null
+++ b/app/escriptorium/static/js/onboarding/images.js
@@ -0,0 +1,50 @@
+var document_images_intro = introJs();
+document_images_intro.setOptions('doneLabel', 'Next page');
+document_images_intro.setOptions({steps: [
+{
+  element: '#nav-doc-tab',
+  intro: 'Update Document description (Name, Text direction or metadata).<br>',
+  position: 'bottom'
+},
+{
+  element: '#nav-edit-tab',
+  intro: 'Edit Document Part. Panels to update transcriptions, baselines and masks',
+  position: 'bottom'
+},
+{
+  element: '#nav-models-tab',
+  intro: 'Handle Transcription and Segmentation models related to this document.',
+  position: 'bottom'
+},
+{
+  element: '#import-selected',
+  intro: 'Import document part. <br> accepted formats : IIIF, Pagexml, Alto.',
+  position: 'bottom'
+},
+{
+  element: '#document-export',
+  intro: 'Import document part. <br> accepted formats : Text, Pagexml, Alto.',
+  position: 'bottom'
+},
+{
+  element: '#train-selected',
+  intro: 'Train a Segmentation or Transcription model',
+  position: 'bottom'
+},
+{
+  element: '#binarize-selected',
+  intro: 'Binarize the color of selected images.',
+  position: 'bottom'
+},
+{
+  element: '#segment-selected',
+  intro: 'Segment selected images.',
+  position: 'bottom'
+},
+{
+  element: '#transcribe-selected',
+  intro: 'Transcribe automatically the selected images.',
+  position: 'left'
+},
+]});
+
-- 
GitLab


From 4db875267245a7e00a5405acf935363ceb130da3 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 13 Aug 2020 14:06:30 +0200
Subject: [PATCH 08/32] enhancement of intro

---
 app/escriptorium/static/js/onboarding/edit.js | 14 ------
 .../static/js/onboarding/images.js            |  5 ++
 .../static/js/onboarding/onboarding_images.js | 50 -------------------
 .../templates/core/document_images.html       |  2 +
 .../templates/core/document_part_edit.html    |  1 +
 5 files changed, 8 insertions(+), 64 deletions(-)
 delete mode 100644 app/escriptorium/static/js/onboarding/onboarding_images.js

diff --git a/app/escriptorium/static/js/onboarding/edit.js b/app/escriptorium/static/js/onboarding/edit.js
index 9bc3086b..635d0d8f 100644
--- a/app/escriptorium/static/js/onboarding/edit.js
+++ b/app/escriptorium/static/js/onboarding/edit.js
@@ -1,17 +1,3 @@
-function exitonboarding() {
-  $.ajax({type: 'PUT', url:'/api/users/onboarding/',
-          contentType: "application/json; charset=utf-8",
-          data:JSON.stringify({
-            onboarding : "False",
-            })
-
-      }).done($.proxy(function(data){
-            }, this)).fail(function(data) {
-                alert(data);
-            });
-
-}
-
 steps_intro = [
 {
   element: '#document-transcriptions',
diff --git a/app/escriptorium/static/js/onboarding/images.js b/app/escriptorium/static/js/onboarding/images.js
index df65fd5a..53990d43 100644
--- a/app/escriptorium/static/js/onboarding/images.js
+++ b/app/escriptorium/static/js/onboarding/images.js
@@ -46,5 +46,10 @@ document_images_intro.setOptions({steps: [
   intro: 'Transcribe automatically the selected images.',
   position: 'left'
 },
+{
+  element : "#cards-container",
+  intro : 'This shows all the images for your manuscript. You can select one or multiple images for training, segmentation, transcribing, or export. Clicking on the [fas fa-edit] icon allows you to edit the segmentation and text. The [fa-align-left] icon shows you if the page has been segmented (green = yes, black = no, ‘pulsing’ green = segmentation in progress). The blue progress bar shows the amount of text that has been entered.\n',
+  position : 'top'
+}
 ]});
 
diff --git a/app/escriptorium/static/js/onboarding/onboarding_images.js b/app/escriptorium/static/js/onboarding/onboarding_images.js
deleted file mode 100644
index df65fd5a..00000000
--- a/app/escriptorium/static/js/onboarding/onboarding_images.js
+++ /dev/null
@@ -1,50 +0,0 @@
-var document_images_intro = introJs();
-document_images_intro.setOptions('doneLabel', 'Next page');
-document_images_intro.setOptions({steps: [
-{
-  element: '#nav-doc-tab',
-  intro: 'Update Document description (Name, Text direction or metadata).<br>',
-  position: 'bottom'
-},
-{
-  element: '#nav-edit-tab',
-  intro: 'Edit Document Part. Panels to update transcriptions, baselines and masks',
-  position: 'bottom'
-},
-{
-  element: '#nav-models-tab',
-  intro: 'Handle Transcription and Segmentation models related to this document.',
-  position: 'bottom'
-},
-{
-  element: '#import-selected',
-  intro: 'Import document part. <br> accepted formats : IIIF, Pagexml, Alto.',
-  position: 'bottom'
-},
-{
-  element: '#document-export',
-  intro: 'Import document part. <br> accepted formats : Text, Pagexml, Alto.',
-  position: 'bottom'
-},
-{
-  element: '#train-selected',
-  intro: 'Train a Segmentation or Transcription model',
-  position: 'bottom'
-},
-{
-  element: '#binarize-selected',
-  intro: 'Binarize the color of selected images.',
-  position: 'bottom'
-},
-{
-  element: '#segment-selected',
-  intro: 'Segment selected images.',
-  position: 'bottom'
-},
-{
-  element: '#transcribe-selected',
-  intro: 'Transcribe automatically the selected images.',
-  position: 'left'
-},
-]});
-
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index 39112ff2..fc1715c1 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -133,6 +133,8 @@ $(document).ready(function() {
     <script src="{% static 'js/lazyload.js' %}"></script>
     <script src="{% static 'js/help.js' %}"></script>
     <script src="{% static 'js/onboarding/images.js' %}"></script>
+    <script src="{% static 'js/onboarding/exit.js' %}"></script>
+
 {% endcompress %}
 
 <script type="text/javascript">
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index 37ccfd13..99c45a1b 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/app/escriptorium/templates/core/document_part_edit.html
@@ -649,6 +649,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/exit.js' %}"></script>
   <script type="text/javascript" src="{% static 'js/wheelzoom.js' %}"></script>
   <script type="text/javascript" src="{% static 'js/baseline.editor.js' %}"></script>
   <script type="text/javascript" src="{% static 'js/edit/components/base_panel.js' %}"></script>
-- 
GitLab


From f06b241ca7679598748b4605b111208ba1d2187f Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 13 Aug 2020 17:20:24 +0200
Subject: [PATCH 09/32] associate introjs to main vue

---
 app/apps/core/static/js/edit/main.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index 312e045e..1354b4e9 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/app/apps/core/static/js/edit/main.js
@@ -13,7 +13,8 @@ var partVM = new Vue({
         blockShortcuts: false,
         fullsizeimage: false,
         selectedTranscription: null,
-        comparedTranscriptions: []
+        comparedTranscriptions: [],
+        intro : introJs()
     },
     mounted(){
         if(onboarding) {
@@ -195,17 +196,16 @@ var partVM = new Vue({
     },
     methods: {
         call_introjs(){
-            var document_edit = introJs();
-            document_edit.setOptions({steps: steps_intro});
-            document_edit.start();
-            document_edit.onexit(function () {
-                // exitonboarding();
+
+            this.intro.setOptions({steps: steps_intro});
+            this.intro.start();
+            this.intro.onexit(function () {
+                exitonboarding();
             });
 
-            document_edit.oncomplete(function () {
-            segmentation_intro.start();
+            this.intro.oncomplete(function () {
+                window.location.href= models_url;
             });
-            console.log("hey you");
         },
         resetZoom() {
             this.zoom.reset();
-- 
GitLab


From 1861ee3f98fdf90c2806b6130c157fe4e9013c2d Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Fri, 14 Aug 2020 17:21:14 +0200
Subject: [PATCH 10/32] onboarding on models tab

---
 app/apps/core/views.py                         |  1 +
 app/escriptorium/static/js/onboarding/exit.js  | 13 +++++++++++++
 .../static/js/onboarding/models.js             | 10 ++++++++++
 .../templates/core/document_part_edit.html     |  1 +
 .../templates/core/models_list.html            | 18 ++++++++++++++++++
 5 files changed, 43 insertions(+)
 create mode 100644 app/escriptorium/static/js/onboarding/exit.js
 create mode 100644 app/escriptorium/static/js/onboarding/models.js

diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index fa854662..6abc8363 100644
--- a/app/apps/core/views.py
+++ b/app/apps/core/views.py
@@ -287,6 +287,7 @@ class ModelsList(LoginRequiredMixin, ListView):
         if self.document:
             context['document'] = self.document
             context['object'] = self.document  # legacy
+            context['onboarding'] = self.request.user.onboarding  # legacy
         return context
 
 
diff --git a/app/escriptorium/static/js/onboarding/exit.js b/app/escriptorium/static/js/onboarding/exit.js
new file mode 100644
index 00000000..5e263515
--- /dev/null
+++ b/app/escriptorium/static/js/onboarding/exit.js
@@ -0,0 +1,13 @@
+function exitonboarding() {
+  $.ajax({type: 'PUT', url:'/api/users/onboarding/',
+          contentType: "application/json; charset=utf-8",
+          data:JSON.stringify({
+            onboarding : "False",
+            })
+
+      }).done($.proxy(function(data){
+            }, this)).fail(function(data) {
+                alert(data);
+            });
+
+}
diff --git a/app/escriptorium/static/js/onboarding/models.js b/app/escriptorium/static/js/onboarding/models.js
new file mode 100644
index 00000000..8b4e1f4e
--- /dev/null
+++ b/app/escriptorium/static/js/onboarding/models.js
@@ -0,0 +1,10 @@
+var models_intro = introJs();
+models_intro.setOptions('doneLabel', 'Next page');
+models_intro.setOptions({steps: [
+{
+  element: '#models-table',
+  intro: 'Here you manage Transcription and Segmentation models related to this document.',
+  position: 'bottom'
+}
+]});
+
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index 99c45a1b..76800146 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/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  = "{{ onboarding }}";
+  var models_url = "{% url 'document-models' document_pk=document.pk %}";
   </script>
 
   <script type="text/javascript">
diff --git a/app/escriptorium/templates/core/models_list.html b/app/escriptorium/templates/core/models_list.html
index 5e65d0cd..67e4cea1 100644
--- a/app/escriptorium/templates/core/models_list.html
+++ b/app/escriptorium/templates/core/models_list.html
@@ -73,6 +73,9 @@
 
 {% block scripts %}
 {{ block.super }}
+<script src="{% static 'vendor/introjs/intro.js' %}"></script>
+<script src="{% static 'js/onboarding/models.js' %}"></script>
+<script src="{% static 'js/onboarding/exit.js' %}"></script>
 <script type="text/javascript">
 'use strict';
 $(document).ready(function() {
@@ -83,4 +86,19 @@ $(document).ready(function() {
 });
 </script>
 <script src="{% static 'js/models.js' %}"></script>
+<script type="text/javascript">
+const onboarding  = "{{ onboarding }}";
+if (onboarding == "True") {
+
+    models_intro.start();
+    models_intro.onexit(function () {
+        exitonboarding();
+    });
+
+    models_intro.oncomplete(function () {
+        exitonboarding();
+
+    });
+}
+</script>
 {% endblock %}
-- 
GitLab


From ee3d2eecbf9f8761d58453e8542c65fda4b99c80 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Tue, 18 Aug 2020 15:46:52 +0200
Subject: [PATCH 11/32] onboarding for each step

---
 app/apps/api/serializers.py                   | 10 +----
 app/apps/api/tests.py                         | 21 +++++++++++
 app/apps/api/views.py                         |  4 +-
 .../migrations/0009_auto_20200818_1010.py     | 37 +++++++++++++++++++
 4 files changed, 61 insertions(+), 11 deletions(-)
 create mode 100644 app/apps/users/migrations/0009_auto_20200818_1010.py

diff --git a/app/apps/api/serializers.py b/app/apps/api/serializers.py
index 6f23763c..b9ddac2b 100644
--- a/app/apps/api/serializers.py
+++ b/app/apps/api/serializers.py
@@ -78,15 +78,7 @@ class TranscriptionSerializer(serializers.ModelSerializer):
 class UserOnboardingSerializer(serializers.ModelSerializer):
     class Meta:
         model = User
-        fields = ('onboarding',)
-
-    def __init__(self, user, *args, **kwargs):
-        self.user = user
-        super().__init__(*args, **kwargs)
-
-    def complete(self):
-        self.user.onboarding = self.validated_data['onboarding']
-        self.user.save()
+        fields = ('onboarding_images','onboarding_edit','onboarding_models','onboarding_trans')
 
 
 class BlockTypeSerializer(serializers.ModelSerializer):
diff --git a/app/apps/api/tests.py b/app/apps/api/tests.py
index 4a1849f2..8818beb7 100644
--- a/app/apps/api/tests.py
+++ b/app/apps/api/tests.py
@@ -11,6 +11,27 @@ from django.urls import reverse
 from core.models import Block, Line, Transcription, LineTranscription
 from core.tests.factory import CoreFactoryTestCase
 
+class UserViewSetTestCase(CoreFactoryTestCase):
+
+    def setUp(self):
+        super().setUp()
+
+    def test_onboarding(self):
+        user = self.factory.make_user()
+        self.client.force_login(user)
+        uri = reverse('api:user-onboarding')
+        resp = self.client.put(uri, {
+                'onboarding_edit' : 'False',
+                }, content_type='application/json')
+
+        user.refresh_from_db()
+        self.assertEqual(resp.status_code, 200)
+        self.assertEqual(user.onboarding_edit, False)
+        self.assertEqual(user.onboarding_images, True)
+
+
+
+
 
 class DocumentViewSetTestCase(CoreFactoryTestCase):
     def setUp(self):
diff --git a/app/apps/api/views.py b/app/apps/api/views.py
index d974a377..c3f2ea03 100644
--- a/app/apps/api/views.py
+++ b/app/apps/api/views.py
@@ -51,9 +51,9 @@ class UserViewSet(ModelViewSet):
 
     @action(detail=False, methods=['put'])
     def onboarding(self, request):
-        serializer = UserOnboardingSerializer(data=request.data, user=self.request.user)
+        serializer = UserOnboardingSerializer(self.request.user,data=request.data, partial=True)
         if serializer.is_valid(raise_exception=True):
-            serializer.complete()
+            serializer.save()
             return Response(status=status.HTTP_200_OK)
 
 
diff --git a/app/apps/users/migrations/0009_auto_20200818_1010.py b/app/apps/users/migrations/0009_auto_20200818_1010.py
new file mode 100644
index 00000000..70f9c46e
--- /dev/null
+++ b/app/apps/users/migrations/0009_auto_20200818_1010.py
@@ -0,0 +1,37 @@
+# Generated by Django 2.1.4 on 2020-08-18 10:10
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0008_auto_20200520_1007'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='user',
+            name='onboarding',
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='onboarding_edit',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='onboarding_images',
+            field=models.BooleanField(default=False, verbose_name='first connection'),
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='onboarding_models',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='onboarding_trans',
+            field=models.BooleanField(default=False),
+        ),
+    ]
-- 
GitLab


From 3e365c07e490213cc27039242a03404cbbf3f4b4 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Tue, 18 Aug 2020 15:50:36 +0200
Subject: [PATCH 12/32] front side of onboarding

---
 app/apps/core/static/js/edit/main.js               |  4 +++-
 app/apps/core/views.py                             |  6 +++---
 app/apps/users/models.py                           | 14 +++++++++++++-
 app/escriptorium/static/js/onboarding/exit.js      |  6 ++----
 .../templates/core/document_images.html            |  8 +++++---
 .../templates/core/document_part_edit.html         |  2 +-
 app/escriptorium/templates/core/models_list.html   | 12 ++++++++----
 7 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index 1354b4e9..68fb11f0 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/app/apps/core/static/js/edit/main.js
@@ -200,7 +200,9 @@ var partVM = new Vue({
             this.intro.setOptions({steps: steps_intro});
             this.intro.start();
             this.intro.onexit(function () {
-                exitonboarding();
+                exitonboarding({
+                onboarding_edit : "False",
+                });
             });
 
             this.intro.oncomplete(function () {
diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index 6abc8363..b7f5618b 100644
--- a/app/apps/core/views.py
+++ b/app/apps/core/views.py
@@ -147,7 +147,7 @@ class DocumentImages(LoginRequiredMixin, DocumentMixin, DetailView):
         context['process_form'] = DocumentProcessForm(self.object, self.request.user)
         context['import_form'] = ImportForm(self.object, self.request.user)
         context['export_form'] = ExportForm(self.object, self.request.user)
-        context['onboarding'] = self.request.user.onboarding
+        context['onboarding_images'] = self.request.user.onboarding_images
 
         return context
 
@@ -250,7 +250,7 @@ class EditPart(LoginRequiredMixin, DetailView):
         context['object'] = self.object.document
         context['document'] = self.object.document
         context['part'] = self.object
-        context['onboarding'] = self.request.user.onboarding
+        context['onboarding_edit'] = self.request.user.onboarding_edit
         return context
 
     def dispatch(self, *args, **kwargs):
@@ -287,7 +287,7 @@ class ModelsList(LoginRequiredMixin, ListView):
         if self.document:
             context['document'] = self.document
             context['object'] = self.document  # legacy
-            context['onboarding'] = self.request.user.onboarding  # legacy
+            context['onboarding_models'] = self.request.user.onboarding_models
         return context
 
 
diff --git a/app/apps/users/models.py b/app/apps/users/models.py
index 9dc9af23..69b5b7d3 100644
--- a/app/apps/users/models.py
+++ b/app/apps/users/models.py
@@ -20,11 +20,23 @@ class User(AbstractUser):
     )
     fields = models.ManyToManyField('ResearchField', blank=True)
 
-    onboarding = models.BooleanField(
+    onboarding_images = models.BooleanField(
         _('first connection'),
         default=True
     )
 
+    onboarding_edit = models.BooleanField(
+        default=True
+    )
+
+    onboarding_models = models.BooleanField(
+        default=True
+    )
+
+    onboarding_trans = models.BooleanField(
+        default=True
+    )
+
     class Meta:
         permissions = (('can_invite', 'Can invite users'),)
 
diff --git a/app/escriptorium/static/js/onboarding/exit.js b/app/escriptorium/static/js/onboarding/exit.js
index 5e263515..3e533537 100644
--- a/app/escriptorium/static/js/onboarding/exit.js
+++ b/app/escriptorium/static/js/onboarding/exit.js
@@ -1,9 +1,7 @@
-function exitonboarding() {
+function exitonboarding(onboarding) {
   $.ajax({type: 'PUT', url:'/api/users/onboarding/',
           contentType: "application/json; charset=utf-8",
-          data:JSON.stringify({
-            onboarding : "False",
-            })
+          data:JSON.stringify(onboarding)
 
       }).done($.proxy(function(data){
             }, this)).fail(function(data) {
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index fc1715c1..9997f3d3 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -116,7 +116,7 @@
 <script type="text/javascript">
 'use strict';
 const DOCUMENT_ID = {{ document.pk }};
-const onboarding  = "{{ onboarding }}";
+const onboarding_images  = "{{ onboarding_images }}";
 $(document).ready(function() {
   // join the ws room
   msgSocket.addEventListener('open', function(ev) {
@@ -138,11 +138,13 @@ $(document).ready(function() {
 {% endcompress %}
 
 <script type="text/javascript">
-if (onboarding == "True")
+if (onboarding_images == "True")
 {
     document_images_intro.start();
     document_images_intro.onexit(function() {
-        exitonboarding();
+        exitonboarding({
+            onboarding_images : "False",
+            });
     });
 
     document_images_intro.oncomplete(function() {
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index 76800146..5dce6ed7 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/app/escriptorium/templates/core/document_part_edit.html
@@ -621,7 +621,7 @@
    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  = "{{ onboarding }}";
+  const onboarding_edit  = "{{ onboarding_edit }}";
   var models_url = "{% url 'document-models' document_pk=document.pk %}";
   </script>
 
diff --git a/app/escriptorium/templates/core/models_list.html b/app/escriptorium/templates/core/models_list.html
index 67e4cea1..8790cbd3 100644
--- a/app/escriptorium/templates/core/models_list.html
+++ b/app/escriptorium/templates/core/models_list.html
@@ -87,16 +87,20 @@ $(document).ready(function() {
 </script>
 <script src="{% static 'js/models.js' %}"></script>
 <script type="text/javascript">
-const onboarding  = "{{ onboarding }}";
-if (onboarding == "True") {
+const onboarding_models  = "{{ onboarding_models }}";
+if (onboarding_models == "True") {
 
     models_intro.start();
     models_intro.onexit(function () {
-        exitonboarding();
+        exitonboarding({
+            onboarding_models : "False",
+            });
     });
 
     models_intro.oncomplete(function () {
-        exitonboarding();
+        exitonboarding({
+            onboarding_models : "False",
+            });
 
     });
 }
-- 
GitLab


From 3d3005012fcc8dcf3ab279705eec6be78e220e83 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Tue, 18 Aug 2020 16:57:54 +0200
Subject: [PATCH 13/32] change var name

---
 app/apps/core/static/js/edit/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index 68fb11f0..08abf4b4 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/app/apps/core/static/js/edit/main.js
@@ -17,7 +17,7 @@ var partVM = new Vue({
         intro : introJs()
     },
     mounted(){
-        if(onboarding) {
+        if(onboarding_edit) {
             this.$nextTick(function () {
                 this.show = {
                     source: true,
-- 
GitLab


From cafbdac30308d987f5e19866ec1f6c7532318929 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Tue, 18 Aug 2020 18:01:33 +0200
Subject: [PATCH 14/32]  trans modal

---
 .../static/js/edit/components/trans_modal.js  | 37 +++++++++++++++++++
 app/apps/core/static/js/edit/main.js          |  6 +--
 app/apps/core/views.py                        |  1 +
 .../templates/core/document_part_edit.html    |  1 +
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/app/apps/core/static/js/edit/components/trans_modal.js b/app/apps/core/static/js/edit/components/trans_modal.js
index 0686ad69..3901572c 100644
--- a/app/apps/core/static/js/edit/components/trans_modal.js
+++ b/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",
+                    });
+                });
+
+            }
+        }
     },
 });
diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index 08abf4b4..75bdcd68 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/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();
diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index b7f5618b..3917198d 100644
--- a/app/apps/core/views.py
+++ b/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):
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index 5dce6ed7..d34aeb04 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/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>
 
-- 
GitLab


From 76013de9559456c95d28dbf2c70f6d87acdeedc7 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 20 Aug 2020 14:10:19 +0200
Subject: [PATCH 15/32] undo onboarding flags

---
 app/apps/api/serializers.py                   |  2 +-
 app/apps/api/tests.py                         |  5 ++-
 app/apps/core/views.py                        |  7 ++--
 .../migrations/0010_auto_20200820_1102.py     | 34 +++++++++++++++++++
 app/apps/users/models.py                      | 14 +-------
 .../static/js/onboarding/trans.js             | 13 +++++++
 6 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 app/apps/users/migrations/0010_auto_20200820_1102.py
 create mode 100644 app/escriptorium/static/js/onboarding/trans.js

diff --git a/app/apps/api/serializers.py b/app/apps/api/serializers.py
index b9ddac2b..58dfa00d 100644
--- a/app/apps/api/serializers.py
+++ b/app/apps/api/serializers.py
@@ -78,7 +78,7 @@ class TranscriptionSerializer(serializers.ModelSerializer):
 class UserOnboardingSerializer(serializers.ModelSerializer):
     class Meta:
         model = User
-        fields = ('onboarding_images','onboarding_edit','onboarding_models','onboarding_trans')
+        fields = ('onboarding',)
 
 
 class BlockTypeSerializer(serializers.ModelSerializer):
diff --git a/app/apps/api/tests.py b/app/apps/api/tests.py
index 8818beb7..0abe4f85 100644
--- a/app/apps/api/tests.py
+++ b/app/apps/api/tests.py
@@ -21,13 +21,12 @@ class UserViewSetTestCase(CoreFactoryTestCase):
         self.client.force_login(user)
         uri = reverse('api:user-onboarding')
         resp = self.client.put(uri, {
-                'onboarding_edit' : 'False',
+                'onboarding' : 'False',
                 }, content_type='application/json')
 
         user.refresh_from_db()
         self.assertEqual(resp.status_code, 200)
-        self.assertEqual(user.onboarding_edit, False)
-        self.assertEqual(user.onboarding_images, True)
+        self.assertEqual(user.onboarding, False)
 
 
 
diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index 3917198d..c0b5483d 100644
--- a/app/apps/core/views.py
+++ b/app/apps/core/views.py
@@ -147,7 +147,7 @@ class DocumentImages(LoginRequiredMixin, DocumentMixin, DetailView):
         context['process_form'] = DocumentProcessForm(self.object, self.request.user)
         context['import_form'] = ImportForm(self.object, self.request.user)
         context['export_form'] = ExportForm(self.object, self.request.user)
-        context['onboarding_images'] = self.request.user.onboarding_images
+        context['onboarding'] = self.request.user.onboarding
 
         return context
 
@@ -250,8 +250,7 @@ class EditPart(LoginRequiredMixin, DetailView):
         context['object'] = self.object.document
         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
+        context['onboarding'] = self.request.user.onboarding
         return context
 
     def dispatch(self, *args, **kwargs):
@@ -288,7 +287,7 @@ class ModelsList(LoginRequiredMixin, ListView):
         if self.document:
             context['document'] = self.document
             context['object'] = self.document  # legacy
-            context['onboarding_models'] = self.request.user.onboarding_models
+            context['onboarding'] = self.request.user.onboarding
         return context
 
 
diff --git a/app/apps/users/migrations/0010_auto_20200820_1102.py b/app/apps/users/migrations/0010_auto_20200820_1102.py
new file mode 100644
index 00000000..a4bf3c02
--- /dev/null
+++ b/app/apps/users/migrations/0010_auto_20200820_1102.py
@@ -0,0 +1,34 @@
+# Generated by Django 2.1.4 on 2020-08-20 11:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0009_auto_20200818_1010'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='user',
+            name='onboarding_edit',
+        ),
+        migrations.RemoveField(
+            model_name='user',
+            name='onboarding_images',
+        ),
+        migrations.RemoveField(
+            model_name='user',
+            name='onboarding_models',
+        ),
+        migrations.RemoveField(
+            model_name='user',
+            name='onboarding_trans',
+        ),
+        migrations.AddField(
+            model_name='user',
+            name='onboarding',
+            field=models.BooleanField(default=True, verbose_name='first connection'),
+        ),
+    ]
diff --git a/app/apps/users/models.py b/app/apps/users/models.py
index 69b5b7d3..9dc9af23 100644
--- a/app/apps/users/models.py
+++ b/app/apps/users/models.py
@@ -20,23 +20,11 @@ class User(AbstractUser):
     )
     fields = models.ManyToManyField('ResearchField', blank=True)
 
-    onboarding_images = models.BooleanField(
+    onboarding = models.BooleanField(
         _('first connection'),
         default=True
     )
 
-    onboarding_edit = models.BooleanField(
-        default=True
-    )
-
-    onboarding_models = models.BooleanField(
-        default=True
-    )
-
-    onboarding_trans = models.BooleanField(
-        default=True
-    )
-
     class Meta:
         permissions = (('can_invite', 'Can invite users'),)
 
diff --git a/app/escriptorium/static/js/onboarding/trans.js b/app/escriptorium/static/js/onboarding/trans.js
new file mode 100644
index 00000000..5fb81a3b
--- /dev/null
+++ b/app/escriptorium/static/js/onboarding/trans.js
@@ -0,0 +1,13 @@
+steps_trans = [
+{
+    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'
+}
+]
\ No newline at end of file
-- 
GitLab


From 0aaf854a81bb1114b2977aad5504fdf6a5a2bd87 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 20 Aug 2020 14:14:29 +0200
Subject: [PATCH 16/32] onboarding set flags on userprofile

---
 .../static/js/edit/components/trans_modal.js  | 24 ++++---------------
 app/apps/core/static/js/edit/main.js          |  9 ++++---
 app/escriptorium/static/js/onboarding/edit.js |  2 +-
 app/escriptorium/static/js/onboarding/exit.js |  6 +++--
 .../templates/core/document_images.html       | 10 ++++----
 .../templates/core/document_part_edit.html    |  8 ++++---
 6 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/app/apps/core/static/js/edit/components/trans_modal.js b/app/apps/core/static/js/edit/components/trans_modal.js
index 3901572c..24f3c802 100644
--- a/app/apps/core/static/js/edit/components/trans_modal.js
+++ b/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();
                 });
 
             }
diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index 75bdcd68..f62e64c6 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/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() {
diff --git a/app/escriptorium/static/js/onboarding/edit.js b/app/escriptorium/static/js/onboarding/edit.js
index 635d0d8f..ddcae594 100644
--- a/app/escriptorium/static/js/onboarding/edit.js
+++ b/app/escriptorium/static/js/onboarding/edit.js
@@ -1,4 +1,4 @@
-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',
diff --git a/app/escriptorium/static/js/onboarding/exit.js b/app/escriptorium/static/js/onboarding/exit.js
index 3e533537..5e263515 100644
--- a/app/escriptorium/static/js/onboarding/exit.js
+++ b/app/escriptorium/static/js/onboarding/exit.js
@@ -1,7 +1,9 @@
-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) {
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index 9997f3d3..d91c43bb 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/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;
     });
 
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index d34aeb04..c682cc3e 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/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>
-- 
GitLab


From 34be2f9bef145a9a9b3649295f28dcaf8ef035b9 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Mon, 31 Aug 2020 16:19:50 +0200
Subject: [PATCH 17/32] document intro and unuesed migrations

---
 app/apps/core/views.py                        |  4 +-
 .../migrations/0009_auto_20200818_1010.py     | 37 -------------------
 .../migrations/0010_auto_20200820_1102.py     | 34 -----------------
 .../static/js/onboarding/document_form.js     |  9 +++++
 .../templates/core/document_form.html         | 23 ++++++++++++
 5 files changed, 34 insertions(+), 73 deletions(-)
 delete mode 100644 app/apps/users/migrations/0009_auto_20200818_1010.py
 delete mode 100644 app/apps/users/migrations/0010_auto_20200820_1102.py
 create mode 100644 app/escriptorium/static/js/onboarding/document_form.js

diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index c0b5483d..e7d70e6b 100644
--- a/app/apps/core/views.py
+++ b/app/apps/core/views.py
@@ -81,6 +81,7 @@ class CreateDocument(LoginRequiredMixin, SuccessMessageMixin, DocumentMixin, Cre
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['metadata_form'] = self.get_metadata_formset()
+        context['onboarding'] = self.request.user.onboarding
         return context
 
     def post(self, request, *args, **kwargs):
@@ -114,6 +115,7 @@ class UpdateDocument(LoginRequiredMixin, SuccessMessageMixin, DocumentMixin, Upd
         if 'metadata_form' not in kwargs:
             context['metadata_form'] = self.get_metadata_formset(instance=self.object)
         context['share_form'] = DocumentShareForm(instance=self.object, request=self.request)
+        context['onboarding'] = self.request.user.onboarding
         return context
 
     def post(self, request, *args, **kwargs):
@@ -250,7 +252,6 @@ class EditPart(LoginRequiredMixin, DetailView):
         context['object'] = self.object.document
         context['document'] = self.object.document
         context['part'] = self.object
-        context['onboarding'] = self.request.user.onboarding
         return context
 
     def dispatch(self, *args, **kwargs):
@@ -287,7 +288,6 @@ class ModelsList(LoginRequiredMixin, ListView):
         if self.document:
             context['document'] = self.document
             context['object'] = self.document  # legacy
-            context['onboarding'] = self.request.user.onboarding
         return context
 
 
diff --git a/app/apps/users/migrations/0009_auto_20200818_1010.py b/app/apps/users/migrations/0009_auto_20200818_1010.py
deleted file mode 100644
index 70f9c46e..00000000
--- a/app/apps/users/migrations/0009_auto_20200818_1010.py
+++ /dev/null
@@ -1,37 +0,0 @@
-# Generated by Django 2.1.4 on 2020-08-18 10:10
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('users', '0008_auto_20200520_1007'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='user',
-            name='onboarding',
-        ),
-        migrations.AddField(
-            model_name='user',
-            name='onboarding_edit',
-            field=models.BooleanField(default=False),
-        ),
-        migrations.AddField(
-            model_name='user',
-            name='onboarding_images',
-            field=models.BooleanField(default=False, verbose_name='first connection'),
-        ),
-        migrations.AddField(
-            model_name='user',
-            name='onboarding_models',
-            field=models.BooleanField(default=False),
-        ),
-        migrations.AddField(
-            model_name='user',
-            name='onboarding_trans',
-            field=models.BooleanField(default=False),
-        ),
-    ]
diff --git a/app/apps/users/migrations/0010_auto_20200820_1102.py b/app/apps/users/migrations/0010_auto_20200820_1102.py
deleted file mode 100644
index a4bf3c02..00000000
--- a/app/apps/users/migrations/0010_auto_20200820_1102.py
+++ /dev/null
@@ -1,34 +0,0 @@
-# Generated by Django 2.1.4 on 2020-08-20 11:02
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('users', '0009_auto_20200818_1010'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='user',
-            name='onboarding_edit',
-        ),
-        migrations.RemoveField(
-            model_name='user',
-            name='onboarding_images',
-        ),
-        migrations.RemoveField(
-            model_name='user',
-            name='onboarding_models',
-        ),
-        migrations.RemoveField(
-            model_name='user',
-            name='onboarding_trans',
-        ),
-        migrations.AddField(
-            model_name='user',
-            name='onboarding',
-            field=models.BooleanField(default=True, verbose_name='first connection'),
-        ),
-    ]
diff --git a/app/escriptorium/static/js/onboarding/document_form.js b/app/escriptorium/static/js/onboarding/document_form.js
new file mode 100644
index 00000000..8af59582
--- /dev/null
+++ b/app/escriptorium/static/js/onboarding/document_form.js
@@ -0,0 +1,9 @@
+var document_intro = introJs();
+document_intro.setOptions('doneLabel', 'Next page');
+document_intro.setOptions({steps: [
+{
+   element: ".container-fluid",
+   intro: 'Create your first document',
+   position: 'top'
+},
+]});
\ No newline at end of file
diff --git a/app/escriptorium/templates/core/document_form.html b/app/escriptorium/templates/core/document_form.html
index 95a8a82f..51107338 100644
--- a/app/escriptorium/templates/core/document_form.html
+++ b/app/escriptorium/templates/core/document_form.html
@@ -169,4 +169,27 @@
 {{ block.super }}
 <script src="{% static 'js/document_form.js' %}"></script>
 <script src="{% static 'js/help.js' %}"></script>
+<script src="{% static 'vendor/introjs/intro.js' %}"></script>
+<script src="{% static 'js/onboarding/document_form.js' %}"></script>
+<script src="{% static 'js/onboarding/exit.js' %}"></script>
+
+<script type="text/javascript">
+var onboarding_document  = userProfile.get('onboarding_document');
+const onboarding  = "{{ onboarding }}";
+if (onboarding== "True" && !onboarding_document)
+{
+
+    document_intro.start();
+    document_intro.onexit(function() {
+        exitonboarding();
+    });
+
+    document_intro.oncomplete(function() {
+        userProfile.set('onboarding_document',true);
+    });
+
+}
+</script>
+
 {% endblock %}
+
-- 
GitLab


From c5143e8324f4dc91369234ea51ba562a7e1cbbb0 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Mon, 31 Aug 2020 17:24:36 +0200
Subject: [PATCH 18/32] refactor onboarding

---
 app/escriptorium/static/js/onboarding.js      | 142 ++++++++++++++++++
 .../static/js/onboarding/document_form.js     |   9 --
 app/escriptorium/static/js/onboarding/edit.js |  32 ----
 app/escriptorium/static/js/onboarding/exit.js |  13 --
 .../static/js/onboarding/images.js            |  55 -------
 .../static/js/onboarding/models.js            |  10 --
 .../static/js/onboarding/trans.js             |  13 --
 .../templates/core/document_form.html         |   5 +-
 .../templates/core/document_images.html       |   3 -
 .../templates/core/document_nav.html          |   4 +-
 .../templates/core/document_part_edit.html    |   4 -
 .../templates/core/models_list.html           |   3 -
 12 files changed, 146 insertions(+), 147 deletions(-)
 create mode 100644 app/escriptorium/static/js/onboarding.js
 delete mode 100644 app/escriptorium/static/js/onboarding/document_form.js
 delete mode 100644 app/escriptorium/static/js/onboarding/edit.js
 delete mode 100644 app/escriptorium/static/js/onboarding/exit.js
 delete mode 100644 app/escriptorium/static/js/onboarding/images.js
 delete mode 100644 app/escriptorium/static/js/onboarding/models.js
 delete mode 100644 app/escriptorium/static/js/onboarding/trans.js

diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding.js
new file mode 100644
index 00000000..f9f19c0a
--- /dev/null
+++ b/app/escriptorium/static/js/onboarding.js
@@ -0,0 +1,142 @@
+//document_form
+var document_intro = introJs();
+document_intro.setOptions({
+    steps: [{
+        element: ".container-fluid",
+        intro: 'Create your first document',
+        position: 'top'
+    }, ]
+});
+
+//document_edit
+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',
+        position: 'bottom',
+    },
+    {
+        element: '#toggle-panels',
+        intro: 'Show/hide panels',
+        position: 'bottom',
+    },
+    {
+        element: '#part-edit',
+        intro: 'Here you can edit your document, by adding or correcting lines and regions, and by entering or correcting transcriptions',
+        position: 'right',
+    },
+    {
+        element: '#segmentation-panel',
+        intro: 'In this pane you can manually segment the image or correct the segmentation. You can draw regions or lines onto the image, or change existing lines or regions,<br> and you can also add categories to the different regions and lines (‘main text’, ‘marginal gloss’, ‘page number’ etc.)',
+        position: 'right',
+    },
+    {
+        element: '#transcription-panel',
+        intro: 'In this pane 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.',
+        position: 'right',
+    },
+    {
+        element: '#diplomatic-panel',
+        intro: 'This shows another form for entering transcription.<br> Here you can enter and work with multiple lines at a time, for instance copying and pasting a block of text from another source.\n.',
+        position: 'left',
+    },
+];
+
+// document_images
+var document_images_intro = introJs();
+document_images_intro.setOptions('doneLabel', 'Next page');
+document_images_intro.setOptions({
+    steps: [{
+            element: '#nav-doc-tab',
+            intro: 'Update Document description (Name, Text direction or metadata).<br>',
+            position: 'bottom'
+        },
+        {
+            element: '#nav-edit-tab',
+            intro: 'Edit Document Part. Panels to update transcriptions, baselines and masks',
+            position: 'bottom'
+        },
+        {
+            element: '#nav-models-tab',
+            intro: 'Handle Transcription and Segmentation models related to this document.',
+            position: 'bottom'
+        },
+        {
+            element: '#import-selected',
+            intro: 'Import document part. <br> accepted formats : IIIF, Pagexml, Alto.',
+            position: 'bottom'
+        },
+        {
+            element: '#document-export',
+            intro: 'Import document part. <br> accepted formats : Text, Pagexml, Alto.',
+            position: 'bottom'
+        },
+        {
+            element: '#train-selected',
+            intro: 'Train a Segmentation or Transcription model',
+            position: 'bottom'
+        },
+        {
+            element: '#binarize-selected',
+            intro: 'Binarize the color of selected images.',
+            position: 'bottom'
+        },
+        {
+            element: '#segment-selected',
+            intro: 'Segment selected images.',
+            position: 'bottom'
+        },
+        {
+            element: '#transcribe-selected',
+            intro: 'Transcribe automatically the selected images.',
+            position: 'left'
+        },
+        {
+            element: "#cards-container",
+            intro: 'This shows all the images for your manuscript. You can select one or multiple images for training, segmentation, transcribing, or export. Clicking on the [fas fa-edit] icon allows you to edit the segmentation and text. The [fa-align-left] icon shows you if the page has been segmented (green = yes, black = no, ‘pulsing’ green = segmentation in progress). The blue progress bar shows the amount of text that has been entered.\n',
+            position: 'top'
+        }
+    ]
+});
+
+// models list
+
+var models_intro = introJs();
+models_intro.setOptions('doneLabel', 'Next page');
+models_intro.setOptions({
+    steps: [{
+        element: '#models-table',
+        intro: 'Here you manage Transcription and Segmentation models related to this document.',
+        position: 'bottom'
+    }]
+});
+
+// transcription modal
+
+
+steps_trans = [{
+        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'
+    }
+];
+
+function exitonboarding() {
+    $.ajax({
+        type: 'PUT',
+        url: '/api/users/onboarding/',
+        contentType: "application/json; charset=utf-8",
+        data: JSON.stringify({
+            onboarding: "False",
+        })
+
+    }).done($.proxy(function(data) {}, this)).fail(function(data) {
+        alert(data);
+    });
+
+}
\ No newline at end of file
diff --git a/app/escriptorium/static/js/onboarding/document_form.js b/app/escriptorium/static/js/onboarding/document_form.js
deleted file mode 100644
index 8af59582..00000000
--- a/app/escriptorium/static/js/onboarding/document_form.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var document_intro = introJs();
-document_intro.setOptions('doneLabel', 'Next page');
-document_intro.setOptions({steps: [
-{
-   element: ".container-fluid",
-   intro: 'Create your first document',
-   position: 'top'
-},
-]});
\ No newline at end of file
diff --git a/app/escriptorium/static/js/onboarding/edit.js b/app/escriptorium/static/js/onboarding/edit.js
deleted file mode 100644
index ddcae594..00000000
--- a/app/escriptorium/static/js/onboarding/edit.js
+++ /dev/null
@@ -1,32 +0,0 @@
-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',
-  position: 'bottom',
-},
-{
-  element: '#toggle-panels',
-  intro: 'Show/hide panels',
-  position: 'bottom',
-},
-{
-    element: '#part-edit',
-    intro : 'Here you can edit your document, by adding or correcting lines and regions, and by entering or correcting transcriptions',
-    position: 'right',
-},
-{
-    element: '#segmentation-panel',
-    intro : 'In this pane you can manually segment the image or correct the segmentation. You can draw regions or lines onto the image, or change existing lines or regions,<br> and you can also add categories to the different regions and lines (‘main text’, ‘marginal gloss’, ‘page number’ etc.)',
-    position: 'right',
-},
-{
-    element: '#transcription-panel',
-    intro : 'In this pane 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.',
-    position: 'right',
-},
-{
-    element: '#diplomatic-panel',
-    intro : 'This shows another form for entering transcription.<br> Here you can enter and work with multiple lines at a time, for instance copying and pasting a block of text from another source.\n.',
-    position: 'left',
-},
-]
\ No newline at end of file
diff --git a/app/escriptorium/static/js/onboarding/exit.js b/app/escriptorium/static/js/onboarding/exit.js
deleted file mode 100644
index 5e263515..00000000
--- a/app/escriptorium/static/js/onboarding/exit.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function exitonboarding() {
-  $.ajax({type: 'PUT', url:'/api/users/onboarding/',
-          contentType: "application/json; charset=utf-8",
-          data:JSON.stringify({
-            onboarding : "False",
-            })
-
-      }).done($.proxy(function(data){
-            }, this)).fail(function(data) {
-                alert(data);
-            });
-
-}
diff --git a/app/escriptorium/static/js/onboarding/images.js b/app/escriptorium/static/js/onboarding/images.js
deleted file mode 100644
index 53990d43..00000000
--- a/app/escriptorium/static/js/onboarding/images.js
+++ /dev/null
@@ -1,55 +0,0 @@
-var document_images_intro = introJs();
-document_images_intro.setOptions('doneLabel', 'Next page');
-document_images_intro.setOptions({steps: [
-{
-  element: '#nav-doc-tab',
-  intro: 'Update Document description (Name, Text direction or metadata).<br>',
-  position: 'bottom'
-},
-{
-  element: '#nav-edit-tab',
-  intro: 'Edit Document Part. Panels to update transcriptions, baselines and masks',
-  position: 'bottom'
-},
-{
-  element: '#nav-models-tab',
-  intro: 'Handle Transcription and Segmentation models related to this document.',
-  position: 'bottom'
-},
-{
-  element: '#import-selected',
-  intro: 'Import document part. <br> accepted formats : IIIF, Pagexml, Alto.',
-  position: 'bottom'
-},
-{
-  element: '#document-export',
-  intro: 'Import document part. <br> accepted formats : Text, Pagexml, Alto.',
-  position: 'bottom'
-},
-{
-  element: '#train-selected',
-  intro: 'Train a Segmentation or Transcription model',
-  position: 'bottom'
-},
-{
-  element: '#binarize-selected',
-  intro: 'Binarize the color of selected images.',
-  position: 'bottom'
-},
-{
-  element: '#segment-selected',
-  intro: 'Segment selected images.',
-  position: 'bottom'
-},
-{
-  element: '#transcribe-selected',
-  intro: 'Transcribe automatically the selected images.',
-  position: 'left'
-},
-{
-  element : "#cards-container",
-  intro : 'This shows all the images for your manuscript. You can select one or multiple images for training, segmentation, transcribing, or export. Clicking on the [fas fa-edit] icon allows you to edit the segmentation and text. The [fa-align-left] icon shows you if the page has been segmented (green = yes, black = no, ‘pulsing’ green = segmentation in progress). The blue progress bar shows the amount of text that has been entered.\n',
-  position : 'top'
-}
-]});
-
diff --git a/app/escriptorium/static/js/onboarding/models.js b/app/escriptorium/static/js/onboarding/models.js
deleted file mode 100644
index 8b4e1f4e..00000000
--- a/app/escriptorium/static/js/onboarding/models.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var models_intro = introJs();
-models_intro.setOptions('doneLabel', 'Next page');
-models_intro.setOptions({steps: [
-{
-  element: '#models-table',
-  intro: 'Here you manage Transcription and Segmentation models related to this document.',
-  position: 'bottom'
-}
-]});
-
diff --git a/app/escriptorium/static/js/onboarding/trans.js b/app/escriptorium/static/js/onboarding/trans.js
deleted file mode 100644
index 5fb81a3b..00000000
--- a/app/escriptorium/static/js/onboarding/trans.js
+++ /dev/null
@@ -1,13 +0,0 @@
-steps_trans = [
-{
-    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'
-}
-]
\ No newline at end of file
diff --git a/app/escriptorium/templates/core/document_form.html b/app/escriptorium/templates/core/document_form.html
index 51107338..f2031fce 100644
--- a/app/escriptorium/templates/core/document_form.html
+++ b/app/escriptorium/templates/core/document_form.html
@@ -169,9 +169,6 @@
 {{ block.super }}
 <script src="{% static 'js/document_form.js' %}"></script>
 <script src="{% static 'js/help.js' %}"></script>
-<script src="{% static 'vendor/introjs/intro.js' %}"></script>
-<script src="{% static 'js/onboarding/document_form.js' %}"></script>
-<script src="{% static 'js/onboarding/exit.js' %}"></script>
 
 <script type="text/javascript">
 var onboarding_document  = userProfile.get('onboarding_document');
@@ -181,7 +178,7 @@ if (onboarding== "True" && !onboarding_document)
 
     document_intro.start();
     document_intro.onexit(function() {
-        exitonboarding();
+        userProfile.set('onboarding_document',true);
     });
 
     document_intro.oncomplete(function() {
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index d91c43bb..22c8e5bc 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -129,12 +129,9 @@ $(document).ready(function() {
 
     <script src="{% static 'vendor/dropzone/dropzone.min.js' %}"></script>
     <script src="{% static 'vendor/jquery/jquery-ui.min.js' %}"></script>
-    <script src="{% static 'vendor/introjs/intro.js' %}"></script>
     <script src="{% static 'js/image_cards.js' %}"></script>
     <script src="{% static 'js/lazyload.js' %}"></script>
     <script src="{% static 'js/help.js' %}"></script>
-    <script src="{% static 'js/onboarding/images.js' %}"></script>
-    <script src="{% static 'js/onboarding/exit.js' %}"></script>
 
 {% endcompress %}
 
diff --git a/app/escriptorium/templates/core/document_nav.html b/app/escriptorium/templates/core/document_nav.html
index f92433b6..687d00b8 100644
--- a/app/escriptorium/templates/core/document_nav.html
+++ b/app/escriptorium/templates/core/document_nav.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% load i18n bootstrap %}
+{% load i18n staticfiles bootstrap %}
 {% block head_title %}{% if object %}{% trans "Update a Document" %}{% else %}{% trans "Create a new Document" %}{% endif %}{% endblock %}
 
 {% block body %}
@@ -25,4 +25,6 @@
   {% block tab_content %}{% endblock %}
 </div>
 {% block modals %}{% endblock %}
+<script src="{% static 'vendor/introjs/intro.js' %}"></script>
+<script src="{% static 'js/onboarding.js' %}"></script>
 {% endblock %}
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index c682cc3e..1d39b5d6 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/app/escriptorium/templates/core/document_part_edit.html
@@ -650,10 +650,6 @@
   <script type="text/javascript" src="{% static 'vendor/undomanager.js' %}"></script>
   <script type="text/javascript" src="{% static 'vendor/lodash/lodash.min.js' %}"></script>
   <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>
   <script type="text/javascript" src="{% static 'js/edit/components/base_panel.js' %}"></script>
diff --git a/app/escriptorium/templates/core/models_list.html b/app/escriptorium/templates/core/models_list.html
index 8790cbd3..ae1f7306 100644
--- a/app/escriptorium/templates/core/models_list.html
+++ b/app/escriptorium/templates/core/models_list.html
@@ -73,9 +73,6 @@
 
 {% block scripts %}
 {{ block.super }}
-<script src="{% static 'vendor/introjs/intro.js' %}"></script>
-<script src="{% static 'js/onboarding/models.js' %}"></script>
-<script src="{% static 'js/onboarding/exit.js' %}"></script>
 <script type="text/javascript">
 'use strict';
 $(document).ready(function() {
-- 
GitLab


From 0630b60f7739f6472353d991ce6c84923b4c4bed Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Wed, 2 Sep 2020 11:52:36 +0200
Subject: [PATCH 19/32] show onboarding on admin

---
 app/apps/users/admin.py  | 2 +-
 app/apps/users/models.py | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/apps/users/admin.py b/app/apps/users/admin.py
index d052098e..6af1d512 100644
--- a/app/apps/users/admin.py
+++ b/app/apps/users/admin.py
@@ -32,7 +32,7 @@ class MyUserAdmin(UserAdmin):
     add_form = MyUserCreationForm
     list_display = UserAdmin.list_display + ('last_login',)
     fieldsets = UserAdmin.fieldsets + (
-        (None, {'fields': ('fields',)}),  # second fields refers to research fields
+        (None, {'fields': ('fields','onboarding')}),  # second fields refers to research fields
     )
 
 
diff --git a/app/apps/users/models.py b/app/apps/users/models.py
index 95acf464..482b912f 100644
--- a/app/apps/users/models.py
+++ b/app/apps/users/models.py
@@ -21,7 +21,7 @@ class User(AbstractUser):
     fields = models.ManyToManyField('ResearchField', blank=True)
 
     onboarding = models.BooleanField(
-        _('first connection'),
+        _('Show onboarding'),
         default=True
     )
 
-- 
GitLab


From 4caa7235e968adddd25cbe7c37a398d3e1e2d623 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 3 Sep 2020 11:44:02 +0200
Subject: [PATCH 20/32] onboarding exit after all skiped

---
 .../core/static/js/edit/components/trans_modal.js |  2 ++
 app/apps/core/static/js/edit/main.js              |  4 +++-
 app/apps/core/views.py                            |  2 ++
 app/escriptorium/static/js/onboarding.js          | 12 +++++++++++-
 app/escriptorium/templates/base.html              |  2 ++
 .../templates/core/document_form.html             |  2 +-
 .../templates/core/document_images.html           |  3 ++-
 app/escriptorium/templates/core/document_nav.html |  2 --
 .../templates/core/document_part_edit.html        |  2 --
 app/escriptorium/templates/core/models_list.html  | 15 +++++++--------
 10 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/apps/core/static/js/edit/components/trans_modal.js b/app/apps/core/static/js/edit/components/trans_modal.js
index 24f3c802..ae84732e 100644
--- a/app/apps/core/static/js/edit/components/trans_modal.js
+++ b/app/apps/core/static/js/edit/components/trans_modal.js
@@ -176,10 +176,12 @@ const TranscriptionModal = Vue.component('transcriptionmodal', {
 
                 this.intro.start();
                 this.intro.onexit(function () {
+                userProfile.set('onboarding_trans',true);
                 exitonboarding();
                 });
 
                 this.intro.oncomplete(function () {
+                    userProfile.set('onboarding_trans',true);
                     exitonboarding();
                 });
 
diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index f62e64c6..351e81d3 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/app/apps/core/static/js/edit/main.js
@@ -200,12 +200,14 @@ var partVM = new Vue({
             this.intro.setOptions({steps: steps_edit});
             this.intro.start();
             this.intro.onexit(function () {
+                 userProfile.set('onboarding_edit',true);
                 exitonboarding();
             });
 
             this.intro.oncomplete(function () {
-                window.location.href= models_url;
                 userProfile.set('onboarding_edit',true);
+                exitonboarding();
+                window.location.href= models_url;
             });
         },
         resetZoom() {
diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index e7d70e6b..bc0fd514 100644
--- a/app/apps/core/views.py
+++ b/app/apps/core/views.py
@@ -251,6 +251,7 @@ class EditPart(LoginRequiredMixin, DetailView):
         # so we need context['object'] = document
         context['object'] = self.object.document
         context['document'] = self.object.document
+        context['onboarding'] = self.request.user.onboarding
         context['part'] = self.object
         return context
 
@@ -288,6 +289,7 @@ class ModelsList(LoginRequiredMixin, ListView):
         if self.document:
             context['document'] = self.document
             context['object'] = self.document  # legacy
+            context['onboarding'] = self.request.onboarding
         return context
 
 
diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding.js
index f9f19c0a..b97b8272 100644
--- a/app/escriptorium/static/js/onboarding.js
+++ b/app/escriptorium/static/js/onboarding.js
@@ -1,3 +1,9 @@
+var onboarding_document  = userProfile.get('onboarding_document');
+var onboarding_images  = userProfile.get('onboarding_images');
+var onboarding_edit  = userProfile.get('onboarding_edit');
+var onboarding_trans  = userProfile.get('onboarding_trans');
+var onboarding_models  = userProfile.get('onboarding_models');
+
 //document_form
 var document_intro = introJs();
 document_intro.setOptions({
@@ -127,7 +133,9 @@ steps_trans = [{
 ];
 
 function exitonboarding() {
-    $.ajax({
+   if(onboarding_document && onboarding_images && onboarding_edit && onboarding_trans && onboarding_models){
+
+       $.ajax({
         type: 'PUT',
         url: '/api/users/onboarding/',
         contentType: "application/json; charset=utf-8",
@@ -139,4 +147,6 @@ function exitonboarding() {
         alert(data);
     });
 
+   }
+
 }
\ No newline at end of file
diff --git a/app/escriptorium/templates/base.html b/app/escriptorium/templates/base.html
index 5ee0ed6d..f9e60a0c 100644
--- a/app/escriptorium/templates/base.html
+++ b/app/escriptorium/templates/base.html
@@ -113,6 +113,8 @@
       <script src="{% static 'js/messages.js' %}"></script>
       {% include 'includes/messages.html' %}
       <script src="{% static 'js/profile.js' %}"></script>
+      <script src="{% static 'vendor/introjs/intro.js' %}"></script>
+      <script src="{% static 'js/onboarding.js' %}"></script>
       {% endif %}
    {% endblock scripts %}
   </body>
diff --git a/app/escriptorium/templates/core/document_form.html b/app/escriptorium/templates/core/document_form.html
index f2031fce..826978bd 100644
--- a/app/escriptorium/templates/core/document_form.html
+++ b/app/escriptorium/templates/core/document_form.html
@@ -171,7 +171,7 @@
 <script src="{% static 'js/help.js' %}"></script>
 
 <script type="text/javascript">
-var onboarding_document  = userProfile.get('onboarding_document');
+
 const onboarding  = "{{ onboarding }}";
 if (onboarding== "True" && !onboarding_document)
 {
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index 22c8e5bc..7e631c35 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -116,7 +116,6 @@
 <script type="text/javascript">
 'use strict';
 const DOCUMENT_ID = {{ document.pk }};
-var onboarding_images  = userProfile.get('onboarding_images');
 const onboarding  = "{{ onboarding }}";
 $(document).ready(function() {
   // join the ws room
@@ -140,12 +139,14 @@ if (onboarding== "True" && !onboarding_images)
 {
     document_images_intro.start();
     document_images_intro.onexit(function() {
+        userProfile.set('onboarding_images',true);
         exitonboarding();
     });
 
     document_images_intro.oncomplete(function() {
         var edit_url = "{% url 'document-part-edit' pk=document.pk %}";
         userProfile.set('onboarding_images',true);
+        exitonboarding();
         window.location.href = edit_url;
     });
 
diff --git a/app/escriptorium/templates/core/document_nav.html b/app/escriptorium/templates/core/document_nav.html
index 687d00b8..06263243 100644
--- a/app/escriptorium/templates/core/document_nav.html
+++ b/app/escriptorium/templates/core/document_nav.html
@@ -25,6 +25,4 @@
   {% block tab_content %}{% endblock %}
 </div>
 {% block modals %}{% endblock %}
-<script src="{% static 'vendor/introjs/intro.js' %}"></script>
-<script src="{% static 'js/onboarding.js' %}"></script>
 {% endblock %}
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index 1d39b5d6..07b3a4c7 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/app/escriptorium/templates/core/document_part_edit.html
@@ -622,8 +622,6 @@
    const DOCUMENT_ID = '{{document.id}}';
    var PART_ID = {{part.id}};  // can be changed with next & previous pages
    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>
 
diff --git a/app/escriptorium/templates/core/models_list.html b/app/escriptorium/templates/core/models_list.html
index ae1f7306..8d9a2802 100644
--- a/app/escriptorium/templates/core/models_list.html
+++ b/app/escriptorium/templates/core/models_list.html
@@ -84,20 +84,19 @@ $(document).ready(function() {
 </script>
 <script src="{% static 'js/models.js' %}"></script>
 <script type="text/javascript">
-const onboarding_models  = "{{ onboarding_models }}";
-if (onboarding_models == "True") {
+const onboarding  = "{{ onboarding }}";
+
+if (onboarding== "True" && !onboarding_models) {
 
     models_intro.start();
     models_intro.onexit(function () {
-        exitonboarding({
-            onboarding_models : "False",
-            });
+        userProfile.set('onboarding_models',true);
+        exitonboarding();
     });
 
     models_intro.oncomplete(function () {
-        exitonboarding({
-            onboarding_models : "False",
-            });
+        userProfile.set('onboarding_models',true);
+        exitonboarding();
 
     });
 }
-- 
GitLab


From 8dfea5c822128569aa214113634ba708694653cf Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Wed, 16 Sep 2020 13:31:53 +0200
Subject: [PATCH 21/32] change steps

---
 app/escriptorium/static/js/onboarding.js | 27 ++++++++++--------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding.js
index b97b8272..49b5ad51 100644
--- a/app/escriptorium/static/js/onboarding.js
+++ b/app/escriptorium/static/js/onboarding.js
@@ -7,11 +7,15 @@ var onboarding_models  = userProfile.get('onboarding_models');
 //document_form
 var document_intro = introJs();
 document_intro.setOptions({
+    'doneLabel':'Next page',
     steps: [{
-        element: ".container-fluid",
-        intro: 'Create your first document',
-        position: 'top'
-    }, ]
+            element: '.container-fluid',
+            intro: 'Update Document description (Name, Text direction or metadata).' +
+                'Edit Document Part. Panels to update transcriptions, baselines and masks',
+            position: 'top',
+            tooltipClass: 'tooltip-large'
+        },
+    ]
 });
 
 //document_edit
@@ -28,7 +32,7 @@ steps_edit = [{
     {
         element: '#part-edit',
         intro: 'Here you can edit your document, by adding or correcting lines and regions, and by entering or correcting transcriptions',
-        position: 'right',
+        position: 'top',
     },
     {
         element: '#segmentation-panel',
@@ -51,16 +55,7 @@ steps_edit = [{
 var document_images_intro = introJs();
 document_images_intro.setOptions('doneLabel', 'Next page');
 document_images_intro.setOptions({
-    steps: [{
-            element: '#nav-doc-tab',
-            intro: 'Update Document description (Name, Text direction or metadata).<br>',
-            position: 'bottom'
-        },
-        {
-            element: '#nav-edit-tab',
-            intro: 'Edit Document Part. Panels to update transcriptions, baselines and masks',
-            position: 'bottom'
-        },
+    steps: [
         {
             element: '#nav-models-tab',
             intro: 'Handle Transcription and Segmentation models related to this document.',
@@ -133,7 +128,7 @@ steps_trans = [{
 ];
 
 function exitonboarding() {
-   if(onboarding_document && onboarding_images && onboarding_edit && onboarding_trans && onboarding_models){
+   if(onboarding_document && onboarding_images && onboarding_edit && onboarding_trans && onboarding_models && onboarding_create){
 
        $.ajax({
         type: 'PUT',
-- 
GitLab


From 10c338a644136b9b7d2511878a183199038603ab Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Wed, 16 Sep 2020 13:32:17 +0200
Subject: [PATCH 22/32] fix error onboarding

---
 app/apps/core/views.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index bc0fd514..fd747cdb 100644
--- a/app/apps/core/views.py
+++ b/app/apps/core/views.py
@@ -289,7 +289,7 @@ class ModelsList(LoginRequiredMixin, ListView):
         if self.document:
             context['document'] = self.document
             context['object'] = self.document  # legacy
-            context['onboarding'] = self.request.onboarding
+            context['onboarding'] = self.request.user.onboarding
         return context
 
 
-- 
GitLab


From a30aaa62a6df83946d25e4184234bcf721596dd6 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Wed, 16 Sep 2020 13:32:33 +0200
Subject: [PATCH 23/32] onboarding css

---
 app/escriptorium/static/vendor/introjs/introjs.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/escriptorium/static/vendor/introjs/introjs.css b/app/escriptorium/static/vendor/introjs/introjs.css
index f97441f8..e5048806 100644
--- a/app/escriptorium/static/vendor/introjs/introjs.css
+++ b/app/escriptorium/static/vendor/introjs/introjs.css
@@ -117,7 +117,7 @@
   padding: 10px;
   background-color: white;
   min-width: 200px;
-  max-width: 300px;
+  max-width: 100%;
   border-radius: 3px;
   box-shadow: 0 1px 10px rgba(0,0,0,.4);
   -webkit-transition: opacity 0.1s ease-out;
-- 
GitLab


From f4a182e66ac43c5311832c6a4f1baa7ff1f056c6 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Mon, 21 Sep 2020 12:06:19 +0200
Subject: [PATCH 24/32] remove unuesed variable

---
 app/escriptorium/static/js/onboarding.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding.js
index 49b5ad51..28f3d6a5 100644
--- a/app/escriptorium/static/js/onboarding.js
+++ b/app/escriptorium/static/js/onboarding.js
@@ -128,7 +128,7 @@ steps_trans = [{
 ];
 
 function exitonboarding() {
-   if(onboarding_document && onboarding_images && onboarding_edit && onboarding_trans && onboarding_models && onboarding_create){
+   if(onboarding_document && onboarding_images && onboarding_edit && onboarding_trans && onboarding_models){
 
        $.ajax({
         type: 'PUT',
-- 
GitLab


From 368a9122fad6f2b0409efb5a53d6b365082db64a Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Mon, 21 Sep 2020 15:01:38 +0200
Subject: [PATCH 25/32] enhancement of exitonboarding

---
 app/escriptorium/static/js/onboarding.js           | 3 ++-
 app/escriptorium/templates/core/document_form.html | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding.js
index 28f3d6a5..4d2711df 100644
--- a/app/escriptorium/static/js/onboarding.js
+++ b/app/escriptorium/static/js/onboarding.js
@@ -128,7 +128,8 @@ steps_trans = [{
 ];
 
 function exitonboarding() {
-   if(onboarding_document && onboarding_images && onboarding_edit && onboarding_trans && onboarding_models){
+   if(userProfile.get('onboarding_document') == userProfile.get('onboarding_images') == userProfile.get('onboarding_edit') == userProfile.get('onboarding_trans') ==  userProfile.get('onboarding_models') == true)
+   {
 
        $.ajax({
         type: 'PUT',
diff --git a/app/escriptorium/templates/core/document_form.html b/app/escriptorium/templates/core/document_form.html
index 826978bd..2ba4401a 100644
--- a/app/escriptorium/templates/core/document_form.html
+++ b/app/escriptorium/templates/core/document_form.html
@@ -179,10 +179,14 @@ if (onboarding== "True" && !onboarding_document)
     document_intro.start();
     document_intro.onexit(function() {
         userProfile.set('onboarding_document',true);
+        exitonboarding();
     });
 
     document_intro.oncomplete(function() {
         userProfile.set('onboarding_document',true);
+        exitonboarding();
+        var images_url = "{% url 'document-images' pk=document.pk %}";
+        window.location.href = images_url;
     });
 
 }
-- 
GitLab


From b956a9a1c4c2a5bcbc628d1b6c667c9c93f41966 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 8 Oct 2020 11:58:02 +0200
Subject: [PATCH 26/32] rename onboarding endpoint

---
 app/apps/api/urls.py                     | 2 +-
 app/escriptorium/static/js/onboarding.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/apps/api/urls.py b/app/apps/api/urls.py
index 80ec98c6..3c773a39 100644
--- a/app/apps/api/urls.py
+++ b/app/apps/api/urls.py
@@ -14,7 +14,7 @@ from api.views import (DocumentViewSet,
 
 router = routers.DefaultRouter()
 router.register(r'documents', DocumentViewSet)
-router.register(r'users', UserViewSet)
+router.register(r'user', UserViewSet)
 router.register(r'types/block', BlockTypeViewSet)
 router.register(r'types/line', LineTypeViewSet)
 documents_router = routers.NestedSimpleRouter(router, r'documents', lookup='document')
diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding.js
index 4d2711df..814170e7 100644
--- a/app/escriptorium/static/js/onboarding.js
+++ b/app/escriptorium/static/js/onboarding.js
@@ -133,7 +133,7 @@ function exitonboarding() {
 
        $.ajax({
         type: 'PUT',
-        url: '/api/users/onboarding/',
+        url: '/api/user/onboarding/',
         contentType: "application/json; charset=utf-8",
         data: JSON.stringify({
             onboarding: "False",
-- 
GitLab


From bacf9a16a9891c94fc268b9e815efca9f50ed5bc Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Fri, 9 Oct 2020 11:11:07 +0200
Subject: [PATCH 27/32] reset onboarding from profile

---
 app/escriptorium/static/css/escriptorium.css  |  3 ++
 app/escriptorium/templates/users/profile.html | 29 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/app/escriptorium/static/css/escriptorium.css b/app/escriptorium/static/css/escriptorium.css
index e2d55eb2..5330f54e 100644
--- a/app/escriptorium/static/css/escriptorium.css
+++ b/app/escriptorium/static/css/escriptorium.css
@@ -619,4 +619,7 @@ i.panel-icon {
 
 #contact-form{
  width: 100%;
+}
+#reset-onboarding{
+    margin-top: 5%;
 }
\ No newline at end of file
diff --git a/app/escriptorium/templates/users/profile.html b/app/escriptorium/templates/users/profile.html
index 8c6e7bc9..28bc8d55 100644
--- a/app/escriptorium/templates/users/profile.html
+++ b/app/escriptorium/templates/users/profile.html
@@ -22,6 +22,8 @@
                         <input type="submit" value="{% trans 'Save' %}" class="btn btn-lg btn-success btn-block">
                     </fieldset>
                 </form>
+
+               <button id="reset-onboarding" style="" class="btn btn-lg btn-primary btn-block">Reset onboarding</button>
             </div>
 
             <div class="tab-pane fade show" id="key-tab" role="tabpanel" aria-labelledby="v-pills-home-tab">
@@ -47,6 +49,8 @@
 {% block scripts %}
 {{ block.super }}
 <script>
+ const onboarding  = "{{ onboarding }}";
+
  $(document).ready(function() {
      $('#api-key-clipboard').click(function() {
          navigator.clipboard.writeText($(this).data('key'))
@@ -71,6 +75,31 @@
          history.replaceState(null, null, newUrl);
          updatePagination(hash);
      });
+
+     $('#reset-onboarding').on('click',function () {
+
+            userProfile.set('onboarding_document', false);
+            userProfile.set('onboarding_images', false);
+            userProfile.set('onboarding_edit', false);
+            userProfile.set('onboarding_trans', false);
+            userProfile.set('onboarding_models', false);
+
+            $.ajax({
+            type: 'PUT',
+            url: '/api/user/onboarding/',
+            contentType: "application/json; charset=utf-8",
+            data: JSON.stringify({
+                onboarding: "True",
+            })
+
+            }).done($.proxy(function(data) {}, this)).fail(function(data) {
+        });
+         Alert.add(Date.now(), "onboarding set to False", 'success');
+
+     });
+
  }, false);
+
 </script>
+<script src="{% static 'js/onboarding.js' %}"></script>
 {% endblock %}
-- 
GitLab


From a0988d46d032f9ccd053585523dbe7e187b96d0f Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Mon, 12 Oct 2020 16:20:19 +0200
Subject: [PATCH 28/32] onboarding for update not create

---
 app/apps/users/views.py                            | 2 ++
 app/escriptorium/templates/core/document_form.html | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/app/apps/users/views.py b/app/apps/users/views.py
index e594848a..9530402a 100644
--- a/app/apps/users/views.py
+++ b/app/apps/users/views.py
@@ -102,6 +102,8 @@ class Profile(SuccessMessageMixin, UpdateView):
         page_number = self.request.GET.get('page')
         context['is_paginated'] = paginator.count != 0
         context['page_obj'] = paginator.get_page(page_number)
+        context['onboarding'] = self.request.user.onboarding
+
         return context
 
 class ContactUsView(SuccessMessageMixin, CreateView):
diff --git a/app/escriptorium/templates/core/document_form.html b/app/escriptorium/templates/core/document_form.html
index 2ba4401a..4b58b7c1 100644
--- a/app/escriptorium/templates/core/document_form.html
+++ b/app/escriptorium/templates/core/document_form.html
@@ -170,6 +170,8 @@
 <script src="{% static 'js/document_form.js' %}"></script>
 <script src="{% static 'js/help.js' %}"></script>
 
+{% if object %}
+
 <script type="text/javascript">
 
 const onboarding  = "{{ onboarding }}";
@@ -191,6 +193,7 @@ if (onboarding== "True" && !onboarding_document)
 
 }
 </script>
+{% endif %}
 
 {% endblock %}
 
-- 
GitLab


From 4eb7adbf117f75093c982d83e094597bc0af05b1 Mon Sep 17 00:00:00 2001
From: elhassane <elhassanegargem@gmail.com>
Date: Thu, 15 Oct 2020 16:57:49 +0200
Subject: [PATCH 29/32] onboarding seperate update and create document

---
 app/escriptorium/templates/core/document_form.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/escriptorium/templates/core/document_form.html b/app/escriptorium/templates/core/document_form.html
index 4b58b7c1..a28df55a 100644
--- a/app/escriptorium/templates/core/document_form.html
+++ b/app/escriptorium/templates/core/document_form.html
@@ -171,6 +171,14 @@
 <script src="{% static 'js/help.js' %}"></script>
 
 {% if object %}
+<script type="text/javascript">
+    var images_url = "{% url 'document-images' pk=object.pk %}";
+</script>
+{% else %}
+<script type="text/javascript">
+    var images_url = "#";
+</script>
+{% endif %}
 
 <script type="text/javascript">
 
@@ -187,13 +195,11 @@ if (onboarding== "True" && !onboarding_document)
     document_intro.oncomplete(function() {
         userProfile.set('onboarding_document',true);
         exitonboarding();
-        var images_url = "{% url 'document-images' pk=document.pk %}";
         window.location.href = images_url;
     });
 
 }
 </script>
-{% endif %}
 
 {% endblock %}
 
-- 
GitLab


From 37d72953eb8efe47bc8c410647baaf1b5bd51803 Mon Sep 17 00:00:00 2001
From: Robin Tissot <tissotrobin@gmail.com>
Date: Fri, 23 Oct 2020 11:40:52 +0200
Subject: [PATCH 30/32] Move around and add some messages, code cleanup.

---
 app/escriptorium/static/js/onboarding.js      | 68 ++++++++++---------
 app/escriptorium/templates/users/profile.html | 38 ++++++-----
 2 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding.js
index 814170e7..07123403 100644
--- a/app/escriptorium/static/js/onboarding.js
+++ b/app/escriptorium/static/js/onboarding.js
@@ -8,18 +8,33 @@ var onboarding_models  = userProfile.get('onboarding_models');
 var document_intro = introJs();
 document_intro.setOptions({
     'doneLabel':'Next page',
-    steps: [{
-            element: '.container-fluid',
-            intro: 'Update Document description (Name, Text direction or metadata).' +
-                'Edit Document Part. Panels to update transcriptions, baselines and masks',
-            position: 'top',
-            tooltipClass: 'tooltip-large'
+    steps: [
+        {
+            element: '#nav-doc-tab',
+            intro: 'Update Document description (Name, Text direction or metadata).',
+            position: 'bottom',
+        },
+        {
+            element: '#nav-img-tab',
+            intro: 'Upload images and changes their orders, import and export transcriptions, launch mass automatic segmentation or transcription.',
+            position: 'bottom',
+        },
+        {
+            element: '#nav-edit-tab',
+            intro: 'Panels to update transcriptions, baselines and masks.',
+            position: 'bottom',
+        },
+        {
+            element: '#nav-models-tab',
+            intro: 'Handle Transcription and Segmentation models related to this document.',
+            position: 'bottom'
         },
     ]
 });
 
 //document_edit
-steps_edit = [{
+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',
         position: 'bottom',
@@ -56,11 +71,6 @@ var document_images_intro = introJs();
 document_images_intro.setOptions('doneLabel', 'Next page');
 document_images_intro.setOptions({
     steps: [
-        {
-            element: '#nav-models-tab',
-            intro: 'Handle Transcription and Segmentation models related to this document.',
-            position: 'bottom'
-        },
         {
             element: '#import-selected',
             intro: 'Import document part. <br> accepted formats : IIIF, Pagexml, Alto.',
@@ -100,7 +110,6 @@ document_images_intro.setOptions({
 });
 
 // models list
-
 var models_intro = introJs();
 models_intro.setOptions('doneLabel', 'Next page');
 models_intro.setOptions({
@@ -112,9 +121,8 @@ models_intro.setOptions({
 });
 
 // transcription modal
-
-
-steps_trans = [{
+steps_trans = [
+    {
         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",
@@ -128,21 +136,17 @@ steps_trans = [{
 ];
 
 function exitonboarding() {
-   if(userProfile.get('onboarding_document') == userProfile.get('onboarding_images') == userProfile.get('onboarding_edit') == userProfile.get('onboarding_trans') ==  userProfile.get('onboarding_models') == true)
-   {
-
-       $.ajax({
-        type: 'PUT',
-        url: '/api/user/onboarding/',
-        contentType: "application/json; charset=utf-8",
-        data: JSON.stringify({
-            onboarding: "False",
-        })
-
-    }).done($.proxy(function(data) {}, this)).fail(function(data) {
-        alert(data);
-    });
+    if(userProfile.get('onboarding_document') == userProfile.get('onboarding_images') == userProfile.get('onboarding_edit') == userProfile.get('onboarding_trans') ==  userProfile.get('onboarding_models') == true)
+    {
 
-   }
+        $.ajax({
+            type: 'PUT',
+            url: '/api/user/onboarding/',
+            contentType: "application/json; charset=utf-8",
+            data: JSON.stringify({
+                onboarding: "False",
+            })
 
-}
\ No newline at end of file
+        });
+    }
+}
diff --git a/app/escriptorium/templates/users/profile.html b/app/escriptorium/templates/users/profile.html
index 28bc8d55..f2368c1e 100644
--- a/app/escriptorium/templates/users/profile.html
+++ b/app/escriptorium/templates/users/profile.html
@@ -78,24 +78,26 @@
 
      $('#reset-onboarding').on('click',function () {
 
-            userProfile.set('onboarding_document', false);
-            userProfile.set('onboarding_images', false);
-            userProfile.set('onboarding_edit', false);
-            userProfile.set('onboarding_trans', false);
-            userProfile.set('onboarding_models', false);
-
-            $.ajax({
-            type: 'PUT',
-            url: '/api/user/onboarding/',
-            contentType: "application/json; charset=utf-8",
-            data: JSON.stringify({
-                onboarding: "True",
-            })
-
-            }).done($.proxy(function(data) {}, this)).fail(function(data) {
-        });
-         Alert.add(Date.now(), "onboarding set to False", 'success');
-
+         userProfile.set('onboarding_document', false);
+         userProfile.set('onboarding_images', false);
+         userProfile.set('onboarding_edit', false);
+         userProfile.set('onboarding_trans', false);
+         userProfile.set('onboarding_models', false);
+
+         $.ajax({
+             type: 'PUT',
+             url: '/api/user/onboarding/',
+             contentType: "application/json; charset=utf-8",
+             data: JSON.stringify({
+                 onboarding: "True",
+             })
+         })
+         .done($.proxy(function(data) {
+             Alert.add(Date.now(), "Help was reset.", 'success');
+         }, this))
+         .fail(function(data) {
+             Alert.add(Date.now(), "Couldn't reset help.", 'error');
+         });
      });
 
  }, false);
-- 
GitLab


From 25be2490ebd8437d3d5d681716f2aa572eaf6b54 Mon Sep 17 00:00:00 2001
From: Robin Tissot <tissotrobin@gmail.com>
Date: Fri, 23 Oct 2020 15:05:56 +0200
Subject: [PATCH 31/32] Simplifies onboarding code a lot to make it easier to
 add help in the future.

---
 app/apps/core/static/js/edit/main.js          |  29 --
 app/apps/core/views.py                        |   6 -
 app/escriptorium/static/js/onboarding.js      | 273 +++++++++---------
 app/escriptorium/templates/base.html          |   2 +
 .../templates/core/document_form.html         |  38 +--
 .../templates/core/document_images.html       |  52 ++--
 .../templates/core/document_part_edit.html    |  32 +-
 .../templates/core/models_list.html           |  33 +--
 app/escriptorium/templates/users/profile.html |   5 +-
 9 files changed, 189 insertions(+), 281 deletions(-)

diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index 351e81d3..42d015e0 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/app/apps/core/static/js/edit/main.js
@@ -16,23 +16,6 @@ var partVM = new Vue({
         comparedTranscriptions: [],
         intro : introJs()
     },
-    mounted(){
-        if(onboarding =="True"  && !onboarding_edit) {
-            this.$nextTick(function () {
-                this.show = {
-                    source: true,
-                    segmentation: true,
-                    visualisation: true,
-                    diplomatic: true
-                };
-                let timer = setTimeout(function (){
-                        this.show_onboarding();
-                     }.bind(this),
-                2000);
-
-            });
-        }
-    },
     computed: {
         imageSize() {
             return this.part.image.size[0]+'x'+this.part.image.size[1];
@@ -197,18 +180,6 @@ var partVM = new Vue({
     methods: {
         show_onboarding(){
 
-            this.intro.setOptions({steps: steps_edit});
-            this.intro.start();
-            this.intro.onexit(function () {
-                 userProfile.set('onboarding_edit',true);
-                exitonboarding();
-            });
-
-            this.intro.oncomplete(function () {
-                userProfile.set('onboarding_edit',true);
-                exitonboarding();
-                window.location.href= models_url;
-            });
         },
         resetZoom() {
             this.zoom.reset();
diff --git a/app/apps/core/views.py b/app/apps/core/views.py
index fd747cdb..1304370d 100644
--- a/app/apps/core/views.py
+++ b/app/apps/core/views.py
@@ -81,7 +81,6 @@ class CreateDocument(LoginRequiredMixin, SuccessMessageMixin, DocumentMixin, Cre
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['metadata_form'] = self.get_metadata_formset()
-        context['onboarding'] = self.request.user.onboarding
         return context
 
     def post(self, request, *args, **kwargs):
@@ -115,7 +114,6 @@ class UpdateDocument(LoginRequiredMixin, SuccessMessageMixin, DocumentMixin, Upd
         if 'metadata_form' not in kwargs:
             context['metadata_form'] = self.get_metadata_formset(instance=self.object)
         context['share_form'] = DocumentShareForm(instance=self.object, request=self.request)
-        context['onboarding'] = self.request.user.onboarding
         return context
 
     def post(self, request, *args, **kwargs):
@@ -149,8 +147,6 @@ class DocumentImages(LoginRequiredMixin, DocumentMixin, DetailView):
         context['process_form'] = DocumentProcessForm(self.object, self.request.user)
         context['import_form'] = ImportForm(self.object, self.request.user)
         context['export_form'] = ExportForm(self.object, self.request.user)
-        context['onboarding'] = self.request.user.onboarding
-
         return context
 
 
@@ -251,7 +247,6 @@ class EditPart(LoginRequiredMixin, DetailView):
         # so we need context['object'] = document
         context['object'] = self.object.document
         context['document'] = self.object.document
-        context['onboarding'] = self.request.user.onboarding
         context['part'] = self.object
         return context
 
@@ -289,7 +284,6 @@ class ModelsList(LoginRequiredMixin, ListView):
         if self.document:
             context['document'] = self.document
             context['object'] = self.document  # legacy
-            context['onboarding'] = self.request.user.onboarding
         return context
 
 
diff --git a/app/escriptorium/static/js/onboarding.js b/app/escriptorium/static/js/onboarding.js
index 07123403..440c15d9 100644
--- a/app/escriptorium/static/js/onboarding.js
+++ b/app/escriptorium/static/js/onboarding.js
@@ -1,152 +1,143 @@
-var onboarding_document  = userProfile.get('onboarding_document');
-var onboarding_images  = userProfile.get('onboarding_images');
-var onboarding_edit  = userProfile.get('onboarding_edit');
-var onboarding_trans  = userProfile.get('onboarding_trans');
-var onboarding_models  = userProfile.get('onboarding_models');
+/*
+Just set ONBOARDING_PAGE in the page before the scripts block.super eg:
 
-//document_form
-var document_intro = introJs();
-document_intro.setOptions({
-    'doneLabel':'Next page',
-    steps: [
-        {
-            element: '#nav-doc-tab',
-            intro: 'Update Document description (Name, Text direction or metadata).',
-            position: 'bottom',
-        },
-        {
-            element: '#nav-img-tab',
-            intro: 'Upload images and changes their orders, import and export transcriptions, launch mass automatic segmentation or transcription.',
-            position: 'bottom',
-        },
-        {
-            element: '#nav-edit-tab',
-            intro: 'Panels to update transcriptions, baselines and masks.',
-            position: 'bottom',
-        },
-        {
-            element: '#nav-models-tab',
-            intro: 'Handle Transcription and Segmentation models related to this document.',
-            position: 'bottom'
-        },
-    ]
-});
+const ONBOARDING_PAGE = 'onboarding_document_form';
 
-//document_edit
-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',
-        position: 'bottom',
-    },
-    {
-        element: '#toggle-panels',
-        intro: 'Show/hide panels',
-        position: 'bottom',
-    },
-    {
-        element: '#part-edit',
-        intro: 'Here you can edit your document, by adding or correcting lines and regions, and by entering or correcting transcriptions',
-        position: 'top',
-    },
-    {
-        element: '#segmentation-panel',
-        intro: 'In this pane you can manually segment the image or correct the segmentation. You can draw regions or lines onto the image, or change existing lines or regions,<br> and you can also add categories to the different regions and lines (‘main text’, ‘marginal gloss’, ‘page number’ etc.)',
-        position: 'right',
-    },
-    {
-        element: '#transcription-panel',
-        intro: 'In this pane 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.',
-        position: 'right',
-    },
-    {
-        element: '#diplomatic-panel',
-        intro: 'This shows another form for entering transcription.<br> Here you can enter and work with multiple lines at a time, for instance copying and pasting a block of text from another source.\n.',
-        position: 'left',
-    },
-];
+*/
 
-// document_images
-var document_images_intro = introJs();
-document_images_intro.setOptions('doneLabel', 'Next page');
-document_images_intro.setOptions({
-    steps: [
-        {
-            element: '#import-selected',
-            intro: 'Import document part. <br> accepted formats : IIIF, Pagexml, Alto.',
-            position: 'bottom'
-        },
-        {
-            element: '#document-export',
-            intro: 'Import document part. <br> accepted formats : Text, Pagexml, Alto.',
-            position: 'bottom'
-        },
-        {
-            element: '#train-selected',
-            intro: 'Train a Segmentation or Transcription model',
-            position: 'bottom'
-        },
-        {
-            element: '#binarize-selected',
-            intro: 'Binarize the color of selected images.',
-            position: 'bottom'
-        },
-        {
-            element: '#segment-selected',
-            intro: 'Segment selected images.',
-            position: 'bottom'
-        },
-        {
-            element: '#transcribe-selected',
-            intro: 'Transcribe automatically the selected images.',
-            position: 'left'
-        },
-        {
-            element: "#cards-container",
-            intro: 'This shows all the images for your manuscript. You can select one or multiple images for training, segmentation, transcribing, or export. Clicking on the [fas fa-edit] icon allows you to edit the segmentation and text. The [fa-align-left] icon shows you if the page has been segmented (green = yes, black = no, ‘pulsing’ green = segmentation in progress). The blue progress bar shows the amount of text that has been entered.\n',
-            position: 'top'
-        }
-    ]
-});
+if (typeof ONBOARDING_PAGE !== 'undefined') {
+    var onboarding_page_done = userProfile.get(ONBOARDING_PAGE) || false;
 
-// models list
-var models_intro = introJs();
-models_intro.setOptions('doneLabel', 'Next page');
-models_intro.setOptions({
-    steps: [{
-        element: '#models-table',
-        intro: 'Here you manage Transcription and Segmentation models related to this document.',
-        position: 'bottom'
-    }]
-});
+    if (!onboarding_page_done) {
+        var intro = introJs().setOptions({'skipLabel': "Skip"});
+        intro.oncomplete(function() {
+            userProfile.set(ONBOARDING_PAGE, true);
+        })
+        intro.onexit(function(aa) {
+            if (!userProfile.get(ONBOARDING_PAGE, true)) {
+                if (confirm("Are you sure you want to avoid further help?")) {
+                    exitOnboarding();
+                }
+            }
+        });
 
-// transcription modal
-steps_trans = [
-    {
-        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'
-    }
-];
+        //document_form
+        if (ONBOARDING_PAGE == 'onboarding_document_form') {
+            intro.setOptions({
+                steps: [
+                    {
+                        element: '#nav-doc-tab',
+                        intro: 'Update Document description (Name, Text direction or metadata).',
+                        position: 'bottom',
+                    },
+                    {
+                        element: '#nav-img-tab',
+                        intro: 'Upload images and changes their orders, import and export transcriptions, launch mass automatic segmentation or transcription.',
+                        position: 'bottom',
+                    },
+                    {
+                        element: '#nav-edit-tab',
+                        intro: 'Panels to update transcriptions, baselines and masks.',
+                        position: 'bottom',
+                    },
+                    {
+                        element: '#nav-models-tab',
+                        intro: 'Handle Transcription and Segmentation models related to this document.',
+                        position: 'bottom'
+                    },
+                ]
+            });
 
-function exitonboarding() {
-    if(userProfile.get('onboarding_document') == userProfile.get('onboarding_images') == userProfile.get('onboarding_edit') == userProfile.get('onboarding_trans') ==  userProfile.get('onboarding_models') == true)
-    {
+        } else if (ONBOARDING_PAGE == 'onboarding_images') {
+            intro.setOptions({
+                steps: [
+                    {
+                        element: '#import-selected',
+                        intro: 'Import images, segmentation and/or transcriptions. <br> accepted formats : IIIF, Pagexml, Alto.',
+                        position: 'bottom'
+                    },
+                    {
+                        element: '#document-export',
+                        intro: 'Export segmentation and/or transcriptions. <br> accepted formats : Text, Pagexml, Alto.',
+                        position: 'bottom'
+                    },
+                    {
+                        element: '#train-selected',
+                        intro: 'Train a Segmentation or Transcription model.',
+                        position: 'bottom'
+                    },
+                    {
+                        element: '#binarize-selected',
+                        intro: 'Binarize the color of selected images.',
+                        position: 'bottom'
+                    },
+                    {
+                        element: '#segment-selected',
+                        intro: 'Segment selected images.',
+                        position: 'bottom'
+                    },
+                    {
+                        element: '#transcribe-selected',
+                        intro: 'Transcribe automatically the selected images.',
+                        position: 'left'
+                    },
+                    {
+                        element: "#cards-container",
+                        intro: 'This shows all the images for your manuscript. You can select one or multiple images for training, segmentation, transcribing, or export. Clicking on the [fas fa-edit] icon allows you to edit the segmentation and text. The [fa-align-left] icon shows you if the page has been segmented (green = yes, black = no, ‘pulsing’ green = segmentation in progress). The blue progress bar shows the amount of text that has been entered.\n',
+                        position: 'top'
+                    }
+                ]
+            });
 
-        $.ajax({
-            type: 'PUT',
-            url: '/api/user/onboarding/',
-            contentType: "application/json; charset=utf-8",
-            data: JSON.stringify({
-                onboarding: "False",
-            })
+        } else if (ONBOARDING_PAGE == 'onboarding_edit') {
+            intro.setOptions({
+                steps: [
+                    // {
+                    //     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.',
+                    //     position: 'bottom',
+                    // },
+                    {
+                        element: '#seg-panel-btn',
+                        intro: 'In this panel you can manually segment the image or correct the segmentation. You can draw regions or lines onto the image, or change existing lines or regions,<br> and you can also add categories to the different regions and lines (‘main text’, ‘marginal gloss’, ‘page number’ etc.)',
+                        position: 'left',
+                    },
+                    {
+                        element: '#trans-panel-btn',
+                        intro: 'In this pane 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.',
+                        position: 'left',
+                    },
+                    {
+                        element: '#diplo-panel-btn',
+                        intro: 'This shows another form for entering transcription.<br> Here you can enter and work with multiple lines at a time, for instance copying and pasting a block of text from another source.\n.',
+                        position: 'left',
+                    },
+                ]
+            });
+        } else if (ONBOARDING_PAGE == 'onboarding_models') {
+            intro.setOptions({
+                doneLabel: null,
+                steps: [{
+                    element: '#models-table',
+                    intro: 'Here you manage Transcription and Segmentation models related to this document.',
+                    position: 'bottom'
+                }]
+            });
+        }
 
+        document.addEventListener('DOMContentLoaded', function() {
+            intro.start();
         });
     }
 }
+
+function exitOnboarding() {
+    $.ajax({
+        type: 'PUT',
+        url: '/api/user/onboarding/',
+        contentType: "application/json; charset=utf-8",
+        data: JSON.stringify({
+            onboarding: "False",
+        })
+    });
+}
diff --git a/app/escriptorium/templates/base.html b/app/escriptorium/templates/base.html
index f9e60a0c..1d7032cc 100644
--- a/app/escriptorium/templates/base.html
+++ b/app/escriptorium/templates/base.html
@@ -114,8 +114,10 @@
       {% include 'includes/messages.html' %}
       <script src="{% static 'js/profile.js' %}"></script>
       <script src="{% static 'vendor/introjs/intro.js' %}"></script>
+      {% if user.onboarding %}
       <script src="{% static 'js/onboarding.js' %}"></script>
       {% endif %}
+      {% endif %}
    {% endblock scripts %}
   </body>
 </html>
diff --git a/app/escriptorium/templates/core/document_form.html b/app/escriptorium/templates/core/document_form.html
index a28df55a..f88f7efe 100644
--- a/app/escriptorium/templates/core/document_form.html
+++ b/app/escriptorium/templates/core/document_form.html
@@ -166,40 +166,12 @@
 {% endblock %}
 
 {% block scripts %}
+<script type="text/javascript">
+ {% if user.onboarding %}
+ const ONBOARDING_PAGE = 'onboarding_document_form';
+ {% endif %}
+</script>
 {{ block.super }}
 <script src="{% static 'js/document_form.js' %}"></script>
 <script src="{% static 'js/help.js' %}"></script>
-
-{% if object %}
-<script type="text/javascript">
-    var images_url = "{% url 'document-images' pk=object.pk %}";
-</script>
-{% else %}
-<script type="text/javascript">
-    var images_url = "#";
-</script>
-{% endif %}
-
-<script type="text/javascript">
-
-const onboarding  = "{{ onboarding }}";
-if (onboarding== "True" && !onboarding_document)
-{
-
-    document_intro.start();
-    document_intro.onexit(function() {
-        userProfile.set('onboarding_document',true);
-        exitonboarding();
-    });
-
-    document_intro.oncomplete(function() {
-        userProfile.set('onboarding_document',true);
-        exitonboarding();
-        window.location.href = images_url;
-    });
-
-}
-</script>
-
 {% endblock %}
-
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index 7e631c35..4d0aa1ae 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -112,45 +112,29 @@
 {% endblock %}
 
 {% block scripts %}
-{{ block.super }}
 <script type="text/javascript">
-'use strict';
-const DOCUMENT_ID = {{ document.pk }};
-const onboarding  = "{{ onboarding }}";
-$(document).ready(function() {
-  // join the ws room
-  msgSocket.addEventListener('open', function(ev) {
-    msgSocket.send('{"type": "join-room", "object_cls": "document", "object_pk": {{ document.pk }}}');
-  });
-});
+    'use strict';
+    const DOCUMENT_ID = {{ document.pk }};
+    const ONBOARDING_PAGE = 'onboarding_images';
 </script>
-{% compress js file document_images %}
-
-    <script src="{% static 'vendor/dropzone/dropzone.min.js' %}"></script>
-    <script src="{% static 'vendor/jquery/jquery-ui.min.js' %}"></script>
-    <script src="{% static 'js/image_cards.js' %}"></script>
-    <script src="{% static 'js/lazyload.js' %}"></script>
-    <script src="{% static 'js/help.js' %}"></script>
-
-{% endcompress %}
 
+{{ block.super }}
 <script type="text/javascript">
-if (onboarding== "True" && !onboarding_images)
-{
-    document_images_intro.start();
-    document_images_intro.onexit(function() {
-        userProfile.set('onboarding_images',true);
-        exitonboarding();
-    });
-
-    document_images_intro.oncomplete(function() {
-        var edit_url = "{% url 'document-part-edit' pk=document.pk %}";
-        userProfile.set('onboarding_images',true);
-        exitonboarding();
-        window.location.href = edit_url;
-    });
+    'use strict';
 
-}
+    $(document).ready(function() {
+    // join the ws room
+    msgSocket.addEventListener('open', function(ev) {
+         msgSocket.send('{"type": "join-room", "object_cls": "document", "object_pk": {{ document.pk }}}');
+     });
+ });
 </script>
 
+{% compress js file document_images %}
+<script src="{% static 'vendor/dropzone/dropzone.min.js' %}"></script>
+<script src="{% static 'vendor/jquery/jquery-ui.min.js' %}"></script>
+<script src="{% static 'js/image_cards.js' %}"></script>
+<script src="{% static 'js/lazyload.js' %}"></script>
+<script src="{% static 'js/help.js' %}"></script>
+{% endcompress %}
 {% endblock %}
diff --git a/app/escriptorium/templates/core/document_part_edit.html b/app/escriptorium/templates/core/document_part_edit.html
index 07b3a4c7..e9c2ec27 100644
--- a/app/escriptorium/templates/core/document_part_edit.html
+++ b/app/escriptorium/templates/core/document_part_edit.html
@@ -64,24 +64,28 @@
     {% block extra_nav %}
     <div class="nav-item ml-auto" id="toggle-panels">
         <button type="button"
+                id="source-panel-btn"
                 @click="togglePanel"
                 data-target="source"
                 class="open-panel nav-item btn"
                 v-bind:class="[ show.source ? 'btn-primary' : 'btn-secondary' ]"
                 title="{% trans "Source Image" %}"><i class="click-through fas fa-eye"></i></button>
         <button type="button"
+                id="seg-panel-btn"
                 @click="togglePanel"
                 data-target="segmentation"
                 class="open-panel nav-item btn"
                 v-bind:class="[ show.segmentation ? 'btn-primary' : 'btn-secondary' ]"
                 title="{% trans "Segmentation" %}"><i class="click-through fas fa-align-left"></i></button>
         <button type="button"
+                id="trans-panel-btn"
                 @click="togglePanel"
                 data-target="visualisation"
                 class="open-panel nav-item btn"
                 v-bind:class="[ show.visualisation ? 'btn-primary' : 'btn-secondary' ]"
                 title="{% trans "Transcription" %}"><i class="click-through fas fa-language"></i></button>
         <button type="button"
+                id="diplo-panel-btn"
                 @click="togglePanel"
                 data-target="diplomatic"
                 class="open-panel nav-item btn"
@@ -611,19 +615,23 @@
         </a>
         {% endif %}
     </div>
-  </div>
-  {% endblock %}
+    </div>
+    {% endblock %}
 
-  {% block scripts %}
-  {{ block.super }}
-  <script type="text/javascript">
-   const READ_DIRECTION = '{{document.read_direction}}';
-   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  = "{{ onboarding }}";
-   var models_url = "{% url 'document-models' document_pk=document.pk %}";
-  </script>
+    {% block scripts %}
+
+    <script type="text/javascript">
+     const READ_DIRECTION = '{{document.read_direction}}';
+     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
+     {% if user.onboarding %}
+     const ONBOARDING_PAGE  = "onboarding_edit";
+     {% endif %}
+     var models_url = "{% url 'document-models' document_pk=document.pk %}";
+    </script>
+
+    {{ block.super }}
 
   <script type="text/javascript">
    'use strict';
diff --git a/app/escriptorium/templates/core/models_list.html b/app/escriptorium/templates/core/models_list.html
index 8d9a2802..741ccdf6 100644
--- a/app/escriptorium/templates/core/models_list.html
+++ b/app/escriptorium/templates/core/models_list.html
@@ -35,13 +35,13 @@
         <i class="fas fa-save"></i>
       </button>
       {% endif %}
-      
+
       {% if model.file %}
       <a href="{{ model.file.url }}" class="btn btn-sm btn-primary" title="{% trans "Download" %}" role="button">
         <i class="fas fa-file-download"></i>
       </a>
       {% endif %}
-        
+
       {% if model.owner == request.user and not model.training %}
       <form method="POST" class="inline-form" action="{% url 'model-delete' model.pk %}?next={{request.path}}">
         {% csrf_token %}
@@ -54,7 +54,7 @@
   </tr>
   {% for version in model.history %}
   <tr id="model-version-{{version.revision}}" class="versions-{{model.pk}} collapse">
-    
+
     <td title="{% trans "Model name" %}" class="pl-5">{{ version.name }} (epoch #{{version.training_epoch}})</td>
     <td></td>
     <td title="{% trans "Accuracy" %}">{{ version.accuracy_percent|floatformat:1 }}%</td>
@@ -62,7 +62,7 @@
     <td>
       <a href="{{ version.file.url }}">
         <button type="button" class="btn btn-sm btn-primary" title="{% trans "Download" %}">
-          <i class="fas fa-file-download"></i>
+            <i class="fas fa-file-download"></i>
         </button>
     </td>
   </tr>
@@ -72,6 +72,13 @@
 {% endblock %}
 
 {% block scripts %}
+<script type="text/javascript">
+    'use strict';
+    {% if user.onboarding %}
+     const ONBOARDING_PAGE  = "onboarding_models";
+    {% endif %}
+</script>
+
 {{ block.super }}
 <script type="text/javascript">
 'use strict';
@@ -83,22 +90,4 @@ $(document).ready(function() {
 });
 </script>
 <script src="{% static 'js/models.js' %}"></script>
-<script type="text/javascript">
-const onboarding  = "{{ onboarding }}";
-
-if (onboarding== "True" && !onboarding_models) {
-
-    models_intro.start();
-    models_intro.onexit(function () {
-        userProfile.set('onboarding_models',true);
-        exitonboarding();
-    });
-
-    models_intro.oncomplete(function () {
-        userProfile.set('onboarding_models',true);
-        exitonboarding();
-
-    });
-}
-</script>
 {% endblock %}
diff --git a/app/escriptorium/templates/users/profile.html b/app/escriptorium/templates/users/profile.html
index f2368c1e..3063f8ed 100644
--- a/app/escriptorium/templates/users/profile.html
+++ b/app/escriptorium/templates/users/profile.html
@@ -49,8 +49,6 @@
 {% block scripts %}
 {{ block.super }}
 <script>
- const onboarding  = "{{ onboarding }}";
-
  $(document).ready(function() {
      $('#api-key-clipboard').click(function() {
          navigator.clipboard.writeText($(this).data('key'))
@@ -78,7 +76,7 @@
 
      $('#reset-onboarding').on('click',function () {
 
-         userProfile.set('onboarding_document', false);
+         userProfile.set('onboarding_document_form', false);
          userProfile.set('onboarding_images', false);
          userProfile.set('onboarding_edit', false);
          userProfile.set('onboarding_trans', false);
@@ -103,5 +101,4 @@
  }, false);
 
 </script>
-<script src="{% static 'js/onboarding.js' %}"></script>
 {% endblock %}
-- 
GitLab


From 7cf307b6094dfdfc15405499381038cf26c7086b Mon Sep 17 00:00:00 2001
From: Robin Tissot <tissotrobin@gmail.com>
Date: Fri, 23 Oct 2020 15:12:12 +0200
Subject: [PATCH 32/32] Code cleanup.

---
 .../static/js/edit/components/trans_modal.js  | 23 -------------------
 app/apps/core/static/js/edit/main.js          |  6 +----
 app/apps/users/views.py                       |  1 -
 app/escriptorium/templates/base.html          |  2 +-
 .../templates/core/document_images.html       |  8 ++++---
 5 files changed, 7 insertions(+), 33 deletions(-)

diff --git a/app/apps/core/static/js/edit/components/trans_modal.js b/app/apps/core/static/js/edit/components/trans_modal.js
index ae84732e..eebfeb4b 100644
--- a/app/apps/core/static/js/edit/components/trans_modal.js
+++ b/app/apps/core/static/js/edit/components/trans_modal.js
@@ -26,10 +26,6 @@ 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_) {
@@ -167,25 +163,6 @@ const TranscriptionModal = Vue.component('transcriptionmodal', {
             } else {
                 overlay.style.display = 'none';
             }
-        },
-        show_onboarding(){
-
-            if(onboarding == "True"  && !onboarding_trans) {
-                this.intro = introJs();
-                this.intro.setOptions({steps: steps_trans});
-
-                this.intro.start();
-                this.intro.onexit(function () {
-                userProfile.set('onboarding_trans',true);
-                exitonboarding();
-                });
-
-                this.intro.oncomplete(function () {
-                    userProfile.set('onboarding_trans',true);
-                    exitonboarding();
-                });
-
-            }
         }
     },
 });
diff --git a/app/apps/core/static/js/edit/main.js b/app/apps/core/static/js/edit/main.js
index 42d015e0..7e7be15b 100644
--- a/app/apps/core/static/js/edit/main.js
+++ b/app/apps/core/static/js/edit/main.js
@@ -13,8 +13,7 @@ var partVM = new Vue({
         blockShortcuts: false,
         fullsizeimage: false,
         selectedTranscription: null,
-        comparedTranscriptions: [],
-        intro : introJs()
+        comparedTranscriptions: []
     },
     computed: {
         imageSize() {
@@ -178,9 +177,6 @@ var partVM = new Vue({
         }.bind(this));
     },
     methods: {
-        show_onboarding(){
-
-        },
         resetZoom() {
             this.zoom.reset();
         },
diff --git a/app/apps/users/views.py b/app/apps/users/views.py
index 9530402a..a597d1e6 100644
--- a/app/apps/users/views.py
+++ b/app/apps/users/views.py
@@ -102,7 +102,6 @@ class Profile(SuccessMessageMixin, UpdateView):
         page_number = self.request.GET.get('page')
         context['is_paginated'] = paginator.count != 0
         context['page_obj'] = paginator.get_page(page_number)
-        context['onboarding'] = self.request.user.onboarding
 
         return context
 
diff --git a/app/escriptorium/templates/base.html b/app/escriptorium/templates/base.html
index 1d7032cc..7b3c0fee 100644
--- a/app/escriptorium/templates/base.html
+++ b/app/escriptorium/templates/base.html
@@ -113,8 +113,8 @@
       <script src="{% static 'js/messages.js' %}"></script>
       {% include 'includes/messages.html' %}
       <script src="{% static 'js/profile.js' %}"></script>
-      <script src="{% static 'vendor/introjs/intro.js' %}"></script>
       {% if user.onboarding %}
+      <script src="{% static 'vendor/introjs/intro.js' %}"></script>
       <script src="{% static 'js/onboarding.js' %}"></script>
       {% endif %}
       {% endif %}
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index 4d0aa1ae..f2abcc0c 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/app/escriptorium/templates/core/document_images.html
@@ -113,9 +113,11 @@
 
 {% block scripts %}
 <script type="text/javascript">
-    'use strict';
-    const DOCUMENT_ID = {{ document.pk }};
-    const ONBOARDING_PAGE = 'onboarding_images';
+ 'use strict';
+ const DOCUMENT_ID = {{ document.pk }};
+ {% if user.onboarding %}
+ const ONBOARDING_PAGE = 'onboarding_images';
+ {% endif %}
 </script>
 
 {{ block.super }}
-- 
GitLab