Commit c5143e83 authored by EL HASSANE GARGEM's avatar EL HASSANE GARGEM
Browse files

refactor onboarding

parent 34be2f9b
//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
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
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
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);
});
}
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'
}
]});
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'
}
]});
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
......@@ -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() {
......
......@@ -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 %}
......
{% 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 %}
......@@ -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>
......
......@@ -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() {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment