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