From f13cc5be0e3fa130edaa3df74c257adca44ea37b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matej=20Zrim=C5=A1ek?= Date: Thu, 17 Nov 2016 16:53:55 +0100 Subject: [PATCH] Added additional tutorial step for showing protocol link. Tutorial steps 1-3 are now completelly handled in JS and not in HTML (preferred way). --- app/assets/javascripts/projects/index.js.erb | 59 ++++++++++++-------- app/assets/javascripts/protocols/index.js | 2 +- app/assets/javascripts/reports/new.js.erb | 2 +- app/assets/javascripts/sitewide/utils.js | 3 +- app/views/projects/index.html.erb | 10 +--- app/views/protocols/index.html.erb | 4 +- config/locales/en.yml | 51 ++++++++--------- 7 files changed, 70 insertions(+), 61 deletions(-) diff --git a/app/assets/javascripts/projects/index.js.erb b/app/assets/javascripts/projects/index.js.erb index e2439ba6a..581dcc392 100644 --- a/app/assets/javascripts/projects/index.js.erb +++ b/app/assets/javascripts/projects/index.js.erb @@ -348,14 +348,41 @@ Cookies.set('tutorial_data', tutorialData); } var demoProjectId = tutorialData[0].project; + var demoProject = $('#' + demoProjectId); if (stepNum >= 1 && stepNum <= 3) { - var nextPage = - $('#' + demoProjectId + '-project-canvas-link').attr('href'); + var thirdStepPos = (demoProject.offset().top > window.innerHeight / 2) ? + 'top' : 'bottom'; + + var nextPage = $('#' + demoProjectId + '-project-canvas-link') + .attr('href'); + var steps = [{ + element: $('#projects-toolbar')[0], + intro: I18n.t('tutorial.tutorial_welcome_title_html'), + position: 'bottom' + }, { + element: $('#new-project-btn')[0], + intro: I18n.t('tutorial.create_project_html'), + position: 'left' + }, { + element: demoProject[0], + intro: I18n.t('tutorial.project_options_html'), + position: thirdStepPos + }]; initPageTutorialSteps(1, 3, nextPage, tutorialBeforeCb, - tutorialAfterCb); - } else if (stepNum >= 24 && stepNum <= 25) { - var demoProject = $('#' + demoProjectId); + tutorialAfterCb, steps); + } else if (stepNum === 22) { + var protocolLink = $('#protocol-link'); + + var nextPage = protocolLink.attr('href'); + var steps = [{ + element: protocolLink[0], + intro: I18n.t('tutorial.protocols_link_html'), + position: 'left' + }]; + initPageTutorialSteps(22, 22, nextPage, function() {}, function() {}, + steps); + } else if (stepNum >= 25 && stepNum <= 26) { var firstStepPos = 'right'; if (demoProject.offset().left > window.innerWidth / 2 || window.innerWidth < demoProject.width() + 100) { @@ -369,16 +396,15 @@ var nextPage = $('#new-report-btn').attr('href'); var steps = [{ - element: $('#' + demoProjectId)[0], - intro: $('#projects-toolbar') - .attr('data-archive-project-step-text'), + element: demoProject[0], + intro: I18n.t('tutorial.archive_project_html'), position: firstStepPos }, { element: $('.avatar')[0], - intro: $('#projects-toolbar').attr('data-goodbye-tutorial'), + intro: I18n.t('tutorial.goodbye_message'), position: 'left' }]; - initPageTutorialSteps(24, 25, nextPage, function() {}, function() {}, + initPageTutorialSteps(25, 26, nextPage, function() {}, function() {}, steps); } } @@ -388,19 +414,6 @@ * Callback to be executed before tutorial starts */ function tutorialBeforeCb() { - var tutorialData = JSON.parse(Cookies.get('tutorial_data')); - var projectOptionsTutorial = - $('#projects-toolbar').attr('data-project-options-step-text'); - var demoProjectId = tutorialData[0].project; - var demoProject = $('#' + demoProjectId); - demoProject.attr('data-step', '3'); - demoProject.attr('data-intro', projectOptionsTutorial); - demoProject.attr('data-tooltipClass', 'custom next-page-link'); - - if (demoProject.offset().top > window.innerHeight / 2) { - demoProject.attr('data-position', 'top'); - } // Otherwise show bottom - $.each($('.panel'), function(i, el){ $(el) .find('.panel-title') diff --git a/app/assets/javascripts/protocols/index.js b/app/assets/javascripts/protocols/index.js index f1c83be26..e2d5af32f 100644 --- a/app/assets/javascripts/protocols/index.js +++ b/app/assets/javascripts/protocols/index.js @@ -718,7 +718,7 @@ function initImport() { */ function initTutorial() { var nextPage = $('.navbar-brand').attr('href'); - initPageTutorialSteps(22, 23, nextPage, function() {}, function() {}); + initPageTutorialSteps(23, 24, nextPage, function() {}, function() {}); } init(); diff --git a/app/assets/javascripts/reports/new.js.erb b/app/assets/javascripts/reports/new.js.erb index d98ef7bbd..de8ba0670 100644 --- a/app/assets/javascripts/reports/new.js.erb +++ b/app/assets/javascripts/reports/new.js.erb @@ -1149,7 +1149,7 @@ function initializeReportSidebartruncation() { function initTutorial() { ignoreUnsavedWorkAlert = true; - var nextPage = $('#protocol-link').attr('href'); + var nextPage = $('.navbar-brand').attr('href'); initPageTutorialSteps(20, 21, nextPage, function() {}, function() { ignoreUnsavedWorkAlert = false; }); diff --git a/app/assets/javascripts/sitewide/utils.js b/app/assets/javascripts/sitewide/utils.js index cb07b1e8e..89b7db518 100644 --- a/app/assets/javascripts/sitewide/utils.js +++ b/app/assets/javascripts/sitewide/utils.js @@ -26,7 +26,8 @@ $.fn.onAjaxComplete = function (cb) { }); } -var TUTORIAL_STEPS_CNT = 25; +// Number of all tutorial steps +var TUTORIAL_STEPS_CNT = 26; /** * Initializes tutorial steps for the current page. diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb index e99ec3f18..9f7b7a5d0 100644 --- a/app/views/projects/index.html.erb +++ b/app/views/projects/index.html.erb @@ -53,13 +53,7 @@ -
+
@@ -71,7 +65,7 @@ <% if @organizations.length > 0 %> - + diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb index ce0f2078f..02a22d0e6 100644 --- a/app/views/protocols/index.html.erb +++ b/app/views/protocols/index.html.erb @@ -3,7 +3,7 @@ <% if current_organization %> <%= render partial: "protocols/breadcrumbs.html.erb", locals: { organizations: @organizations, current_organization: @current_organization, type: @type } %> -
    +
      @@ -49,7 +49,7 @@ <% end %>
-
+
> diff --git a/config/locales/en.yml b/config/locales/en.yml index 47f0d471e..28d6910d8 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1479,31 +1479,32 @@ en: skip_tutorial: "Skip tutorial" end_tutorial: "End tutorial" finish_tutorial: "Start using sciNote" - tutorial_welcome_title_html: "Welcome to sciNote, your electronic lab notebook. sciNote organizes your work in Projects. Click Team icon to choose Projects from which Team you want to view on your Dashboard. You can also reorder them by clicking the Sort by button. (Step 1/25)" - create_project_html: "Click here to create a Project and it will appear under the Team you've chosen. Choose public if you want everyone from the Team to view the Project or choose private so only the people who you invite to the Project can see it. (Step 2/25)" - project_options_html: "In the bottom row of the Project card you can check the latest activity , invite collaborators , see the notifications and write comments . You can also edit the Project's name and visibility or archive it. You can recall the Project from the Archive in the top right side of the Dashboard at any time. (Step 3/25)" - create_experiment_html: "Inside of a Project you can create Experiments. To create one click on this button and edit Experiment’s name and description. (Step 4/25)" - edit_experiment_html: "By clicking on the down arrow of an Experiment card you can choose between different actions. You can Edit details to the Experiment, such as experiment name and description, Clone it inside of a Project, where cloned Experiment is identical to the original one, Move it from one Project to another or Archive it in the Archive . (Step 5/25)" - canvas_overview_html: "A Task is a basic unit of your Experiment. Within a Task, you can add Protocols, Results or Samples. You can connect Tasks into Workflows to assure traceability of your work. You can grab a Task or entire Workflow and move it in all directions on the canvas. (Step 6/25)" - canvas_click_edit_workflow_html: " Click Edit experiment to add new Tasks or to modify an existing Experiment. (Step 7/25)" - edit_workflow_html: "To add a new Task to the Experiment, click on New task and drag it onto canvas. (Step 8/25)" - edit_workflow_click_save_html: "Click Save experiment to save changes you’ve made to the Experiment. (Step 9/25)" - sidebar_html: "Navigation bar helps you to navigate through Experiments. It also helps you to find a specific Task on the canvas by clicking the navigate icon . (Step 10/25)" - sidebar_click_module_html: "Click on the Task name qPCR to see its contents. (Step 11/25)" - module_protocols_html: "Inside of a Task you can create Protocol steps and upload existing protocol files. After you have finished a certain step, click the Complete step button. Exact time and the person who completed the step are recorded and can be seen in the Activity tab in the top right side of the Dashboard. (Step 12/25)" - module_protocols_save_html: "You can save the protocol to Protocol repository. Everyone within the same Team will be able to use it. (Step 13/25)" - module_protocols_click_results_html: "Click on the Results tab to upload experiment results. (Step 14/25)" - module_results_html: "You can upload any type of a file, insert table or write comments. (Step 15/25)" - module_results_click_samples_html: "Click on the Samples tab to import, export or assign samples to the Task. (Step 16/25)" - samples_html: "You can easily import sample tables from Excel or tab-delimited files. If you assign samples to a certain Task, these samples will be automatically assigned downstream the Workflow. (Step 17/25)" - breadcrumbs_html: "You can always use these breadcrumbs to navigate all the way back to the Dashboard. Click on the Reports tab to generate a report of your work. (Step 18/25)" - reports_index_click_new_report_html: "Click the New report button to create a new report. (Step 19/25)" - new_report_html: "To add report elements to the report, click on the —+— sign on the sheet. Select the report contents in the tabs and click Add to report. You can save the report as a PDF on your computer or save it within sciNote for later viewing and modification. (Step 20/25)" - new_report_click_org_html: "Click on %{private_org} in breadcrumbs to return to the Dashboard. (Step 21/25)" - protocols_index_html: "View your Public and Private Protocols, which you can Edit, Create new ones or Clone them. Protocols can be archived and restored from the Archive. (Step 22/25)" - protocols_import_export_html: "You can also Import or Export protocols to your hard drive. Return to the Dashboard. (Step 23/25)" - archive_project_html: "Archive Demo project - qPCR by clicking on the down arrow . You can always access the Archive by clicking the icon on the top right side of the Dashboard and restore any item you have archived. (Step 24/25)" - goodbye_message: "To repeat the tutorial, go to your Settings and open My preferences tab. Click on the Repeat tutorial button and go through the tutorial as many times needed. (Step 25/25)" + tutorial_welcome_title_html: "Welcome to sciNote, your electronic lab notebook. sciNote organizes your work in Projects. Click Team icon to choose Projects from which Team you want to view on your Dashboard. You can also reorder them by clicking the Sort by button. (Step 1/26)" + create_project_html: "Click here to create a Project and it will appear under the Team you've chosen. Choose public if you want everyone from the Team to view the Project or choose private so only the people who you invite to the Project can see it. (Step 2/26)" + project_options_html: "In the bottom row of the Project card you can check the latest activity , invite collaborators , see the notifications and write comments . You can also edit the Project's name and visibility or archive it. You can recall the Project from the Archive in the top right side of the Dashboard at any time. (Step 3/26)" + create_experiment_html: "Inside of a Project you can create Experiments. To create one click on this button and edit Experiment’s name and description. (Step 4/26)" + edit_experiment_html: "By clicking on the down arrow of an Experiment card you can choose between different actions. You can Edit details to the Experiment, such as experiment name and description, Clone it inside of a Project, where cloned Experiment is identical to the original one, Move it from one Project to another or Archive it in the Archive . (Step 5/26)" + canvas_overview_html: "A Task is a basic unit of your Experiment. Within a Task, you can add Protocols, Results or Samples. You can connect Tasks into Workflows to assure traceability of your work. You can grab a Task or entire Workflow and move it in all directions on the canvas. (Step 6/26)" + canvas_click_edit_workflow_html: " Click Edit experiment to add new Tasks or to modify an existing Experiment. (Step 7/26)" + edit_workflow_html: "To add a new Task to the Experiment, click on New task and drag it onto canvas. (Step 8/26)" + edit_workflow_click_save_html: "Click Save experiment to save changes you’ve made to the Experiment. (Step 9/26)" + sidebar_html: "Navigation bar helps you to navigate through Experiments. It also helps you to find a specific Task on the canvas by clicking the navigate icon . (Step 10/26)" + sidebar_click_module_html: "Click on the Task name qPCR to see its contents. (Step 11/26)" + module_protocols_html: "Inside of a Task you can create Protocol steps and upload existing protocol files. After you have finished a certain step, click the Complete step button. Exact time and the person who completed the step are recorded and can be seen in the Activity tab in the top right side of the Dashboard. (Step 12/26)" + module_protocols_save_html: "You can save the protocol to Protocol repository. Everyone within the same Team will be able to use it. (Step 13/26)" + module_protocols_click_results_html: "Click on the Results tab to upload experiment results. (Step 14/26)" + module_results_html: "You can upload any type of a file, insert table or write comments. (Step 15/26)" + module_results_click_samples_html: "Click on the Samples tab to import, export or assign samples to the Task. (Step 16/26)" + samples_html: "You can easily import sample tables from Excel or tab-delimited files. If you assign samples to a certain Task, these samples will be automatically assigned downstream the Workflow. (Step 17/26)" + breadcrumbs_html: "You can always use these Breadcrumbs to navigate all the way back to the Dashboard. Click on the Reports tab to generate a report of your work. (Step 18/26)" + reports_index_click_new_report_html: "Click the New report button to create a new report. (Step 19/26)" + new_report_html: "To add report elements to the report, click on the —+— sign on the sheet. Select the report contents in the tabs and click Add to report. You can save the report as a PDF on your computer or save it within sciNote for later viewing and modification. (Step 20/26)" + new_report_click_org_html: "Click on %{private_org} in breadcrumbs to return to the Dashboard. (Step 21/26)" + protocols_link_html: "Click on Protocols repository icon to go to the Protocols repository page. (Step 22/26)" + protocols_index_html: "View your Public and Private Protocols, which you can Edit, Create new ones or Clone them. Protocols can be archived and restored from the Archive. (Step 23/26)" + protocols_import_export_html: "You can also Import or Export protocols to your hard drive. Return to the Dashboard. (Step 24/26)" + archive_project_html: "Archive Demo project - qPCR by clicking on the down arrow . You can always access the Archive by clicking the icon on the top right side of the Dashboard and restore any item you have archived. (Step 25/26)" + goodbye_message: "To repeat the tutorial, go to your Settings and open My preferences tab. Click on the Repeat tutorial button and go through the tutorial as many times needed. (Step 26/26)" notifications: title: "Notifications"