Feature/CSL-2007/CSL-2040 group 1 and 2 enhanced tooltips

src/frontend/html/tooltip-feature.html

@@ -226,7 +226,7 @@ <h2 class="modal-title h5">
     if (name) {
         $(window).ready(function() {
             var tip_control = $('[data-clusive-tip-id="' + name + '"]');
-            var tip_popover = $(tip_control.attr('data-cfw-tooltip-target'));
+            var tip_tooltip = $(tip_control.attr('data-cfw-tooltip-target'));
             var tip_placement = tip_control.attr('data-cfw-tooltip-placement');
             tip_control.CFW_Tooltip({
                 container: '#features',
@@ -238,13 +238,13 @@ <h2 class="modal-title h5">
                 }
             });
             setTimeout(function() {
-                tip_popover.attr({
+                tip_tooltip.attr({
                     'role': 'status',
                     'aria-live': 'assertive',
                     'aria-atomic': 'true'
                 });
                 tip_control.CFW_Tooltip('show');
-                tip_popover.trigger('focus');
+                tip_tooltip.trigger('focus');
             }, 2000);
             tip_control.one('afterHide.cfw.tooltip', function() {
                 $(this).CFW_Tooltip('dispose');

src/frontend/js/frontend.js

@@ -483,44 +483,45 @@ function formUseThisLinks() {
 function showTooltip(name) {
     'use strict';
 
-    if (name) {
-        $(window).ready(function() {
-            var tip_control = $('[data-clusive-tip-id="' + name + '"]');
-            var tip_popover = $('#tip');
-            var tip_placement = tip_control.attr('data-cfw-tooltip-placement');
-            tip_control.CFW_Tooltip('dispose');
-            tip_control.CFW_Tooltip({
-                target: '#tip',
-                container: '#features',
-                viewport: '#features',
-                trigger: 'manual',
-                placement: tip_placement ? tip_placement : 'right auto',
-                popperConfig: {
-                    positionFixed: true
-                }
-            });
-            setTimeout(function() {
-                if (tip_control.is(':visible')) {
-                    tip_popover.attr({
-                        'role': 'status',
-                        'aria-live': 'polite',
-                        'aria-atomic': 'true'
-                    });
-                    tip_control.CFW_Tooltip('show');
-                    tip_popover.trigger('focus');
-                    if (typeof window.parent.clusiveEvents === 'object' && window.parent.clusiveEvents.addTipViewToQueue === 'function') {
-                        window.parent.clusiveEvents.addTipViewToQueue(name);
-                    }
-                }
-            }, 2000);
-            tip_control.one('afterHide.cfw.tooltip', function() {
-                $(this).CFW_Tooltip('dispose');
-                if ($(this).hasClass('feature-novis')) {
-                    $('#content').trigger('focus');
+    if (!name || name === '') {
+        return;
+    }
+    $(window).ready(function() {
+        var tip_control = $('[data-clusive-tip-id="' + name + '"]');
+        var tip_tooltip = $('#tip');
+        var tip_placement = tip_control.attr('data-cfw-tooltip-placement');
+        tip_control.CFW_Tooltip('dispose');
+        tip_control.CFW_Tooltip({
+            target: '#tip',
+            container: '#features',
+            viewport: '#features',
+            trigger: 'manual',
+            placement: tip_placement ? tip_placement : 'right auto',
+            popperConfig: {
+                positionFixed: true
+            }
+        });
+        setTimeout(function() {
+            if (tip_control.is(':visible')) {
+                tip_tooltip.attr({
+                    'role': 'status',
+                    'aria-live': 'polite',
+                    'aria-atomic': 'true'
+                });
+                tip_control.CFW_Tooltip('show');
+                tip_tooltip.trigger('focus');
+                if (typeof window.parent.clusiveEvents === 'object' && window.parent.clusiveEvents.addTipViewToQueue === 'function') {
+                    window.parent.clusiveEvents.addTipViewToQueue(name);
                 }
-            });
+            }
+        }, 2000);
+        tip_control.one('afterHide.cfw.tooltip', function() {
+            $(this).CFW_Tooltip('dispose');
+            if ($(this).hasClass('feature-novis')) {
+                $('#content').trigger('focus');
+            }
         });
-    }
+    });
 }
 
 // Determine if page has bricks layout

src/frontend/js/tour.js

@@ -14,13 +14,17 @@
         prepare : function(selector) {
             if (selector) {
                 var control = $(selector);
-                // var popover = $(control.attr('data-cfw-popover-target'));
+                var target = control.attr('data-cfw-popover-target');
+                if ((typeof target === 'undefined' || target === false) && control.is('[data-clusive-tip-id]')) {
+                    target = '#tour_' + control.attr('data-clusive-tip-id');
+                }
                 var placement = control.attr('data-cfw-popover-placement');
                 control.CFW_Popover({
                     container: SELECTOR_CONTAINER,
                     viewport: 'window',
                     trigger: 'manual',
-                    placement: placement ? placement : 'bottom auto',
+                    target: target,
+                    placement: placement ? placement : 'right auto',
                     popperConfig: {
                         positionFixed: true
                     }

src/library/templates/library/library.html

@@ -20,12 +20,12 @@
             <h1>Library</h1>
         </div>
         <div class="col-md-auto">
-            <form method="get">
+            <form method="get" data-clusive-tip-id="search">
                 <div class="input-group library-search">
                     <div class="stt-wrapper">
                         {{ search_form.query }}
                     </div>
-                    <button class="btn btn-primary" type="submit">Search</button>
+                    <button class="btn btn-primary" type="submit" data-clusive-tip-action="search">Search</button>
                 </div>
             </form>
         </div>
@@ -54,6 +54,11 @@ <h1>Library</h1>
 </main>
 
 {% include "shared/partial/modal_vocab_check.html" %}
-{% include "shared/partial/popover_tip.html" %}
+{% for tour in tours %}
+{% include "shared/partial/popover_tour.html" with tour_name=tour.name tour_robust=tour.robust %}
+{% endfor %}
+{% if tip_name %}
+{% include "shared/partial/tooltip_tip.html" %}
+{% endif %}
 {% include "shared/partial/modal_confirm.html" %}
 {% endblock %}

src/library/templates/library/partial/library_action_menu.html

@@ -3,7 +3,7 @@
 <div class="col-auto card-library-action">
     <div class="dropdown">
         <button type="button" class="btn btn-flag" data-cfw="dropdown" data-clusive-tip-action="book_actions"
-                {% if forloop.first %}data-clusive-tip-id="book_actions" data-cfw-tooltip-placement="forward auto"{% endif %}>
+                {% if forloop.first %}data-clusive-tip-id="book_actions" data-cfw-popover-placement="forward auto"{% endif %}>
             <span class="icon-ellipsis-vert" aria-hidden="true"></span>
             <span class="sr-only">More actions</span>
         </button>

src/library/templates/library/partial/library_card_custom_question.html

@@ -3,7 +3,8 @@
     <div class="card-footer-title">
         <strong>Custom question</strong>
         (<a href="#" role="button" data-cfw="modal" data-cfw-modal-target="#{{custom_link_prefix}}-{{graph_link_serial}}"
-            data-cle-handler="click" data-cle-control="dash_custom_detail" data-cle-value="{{book.id}}">details</a>)
+            data-cle-handler="click" data-cle-control="dash_custom_detail" data-cle-value="{{book.id}}"
+            data-clusive-tip-action="reading_data">details</a>)
     </div>
     {{ custom_question_data.question }}
 </div>

src/library/templates/library/partial/library_card_graph.html

@@ -7,7 +7,8 @@
     <div class="card-footer-title">
         <strong>Student learning</strong>
         (<a href="#" role="button" data-cfw="modal" data-cfw-modal-target="#{{graph_link_prefix}}-{{graph_link_serial}}"
-            data-cle-handler="click" data-cle-control="dash_comprehension_detail" data-cle-value="{{book.id}}">details</a>)
+            data-cle-handler="click" data-cle-control="dash_comprehension_detail" data-cle-value="{{book.id}}"
+            data-clusive-tip-action="reading_data">details</a>)
         </div>
     <div class="stars-chart">
         {% for item in graph_data.items reversed %}

src/library/templates/library/partial/library_collection_selector.html

@@ -6,7 +6,7 @@
                     <div class="d-flex">
                         <span class="library-filter-label">View:</span>
                         <button type="button" class="link-btn text-wrap ms-0_25" data-cfw="dropdown" data-cfw-dropdown-target="#libraryView"
-                                data-clusive-tip-id="view" data-clusive-tip-action="view" data-cfw-tooltip-placement="bottom auto"
+                                data-clusive-tip-id="view" data-clusive-tip-action="view" data-cfw-popover-placement="bottom auto"
                         >{{ current_view_name }} <span class="caret" aria-hidden="true"></span></button>
                     </div>
                     <ul id="libraryView" class="dropdown-menu">

src/library/templates/library/partial/library_filter_selector.html

@@ -2,7 +2,7 @@
 
 <div class="col-12 col-md-auto order-md-2">
     <div class="mb-1">
-        <button type="button" class="btn btn-primary" data-cfw="collapse" data-cfw-collapse-target="#filterSelection">
+        <button type="button" class="btn btn-primary" data-cfw="collapse" data-cfw-collapse-target="#filterSelection" data-clusive-tip-id="filters" data-clusive-tip-action="filters">
             <span class="not-open">Show filters</span>
             <span class="is-open">Hide filters</span>
         </button>

src/library/templates/library/resources.html

@@ -42,5 +42,10 @@ <h2>{{ cat.name }}</h2>
     {% endfor %}
 
 </main>
-{% include "shared/partial/popover_tip.html" %}
+{% for tour in tours %}
+{% include "shared/partial/popover_tour.html" with tour_name=tour.name tour_robust=tour.robust %}
+{% endfor %}
+{% if tip_name %}
+{% include "shared/partial/tooltip_tip.html" %}
+{% endif %}
 {% endblock %}

src/library/views.py

@@ -36,6 +36,7 @@
 from roster.models import ClusiveUser, Period, LibraryViews, LibraryStyles, check_valid_choice
 from tips.models import TipHistory
 
+
 logger = logging.getLogger(__name__)
 
 # The library page requires a lot of parameters, which interact in rather complex ways.
@@ -389,7 +390,10 @@ def get(self, request, *args, **kwargs):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['search_form'] = self.search_form
-        context['tip_name'] = self.tip_shown.name if self.tip_shown else None
+        context['tip_name'] = None
+        context['tours'] = [{'name': self.tip_shown.name, 'robust': True }] if self.tip_shown else None
+        context['tip_shown'] = self.tip_shown
+        context['show_teacher_resource_link'] = self.request.clusive_user.can_manage_periods
         context['has_bookshare_account'] = has_bookshare_account(self.request)
         return context
 
@@ -417,9 +421,21 @@ class ResourcesPageView(LoginRequiredMixin, ThemedPageMixin, SettingsPageMixin,
     page_name = 'Resources'
 
     def get(self, request, *args, **kwargs):
+        self.tip_shown = TipHistory.get_tip_to_show(request.clusive_user, self.page_name)
+        tip_name = self.tip_shown.name if self.tip_shown else ''
+        if request.clusive_user.can_manage_periods and tip_name != 'resources':
+            show_teacher_resource_link = True
+        else:
+            show_teacher_resource_link = False
+
         self.extra_context = {
             'categories': EducatorResourceCategory.objects.all()
-                .prefetch_related(Prefetch('resources', queryset=Book.objects.order_by('resource_sort_order')))
+                .prefetch_related(Prefetch('resources', queryset=Book.objects.order_by('resource_sort_order'))),
+            'tip_name': None,
+            'tours': [{'name': self.tip_shown.name, 'robust': True }] if self.tip_shown else None,
+            'tip_shown': self.tip_shown,
+            'show_teacher_resource_link': show_teacher_resource_link,
+            'clusive_user': request.clusive_user,
         }
         return super().get(request, *args, **kwargs)
 

src/pages/templates/pages/dashboard.html

@@ -40,6 +40,11 @@ <h1>Dashboard</h1>
                         {% include "pages/partial/dashboard_panel_class_affect.html" with data=data.class_affect %}
                     </div>
                 {% endif %}
+                {% if clusive_user.role == 'TE' or clusive_user.role == 'PA' %}
+                    <div class="col-md-6 col-lg-12">
+                        {% include "pages/partial/dashboard_panel_teacher_resources.html" %}
+                    </div>
+                {% endif %}
                 {% if panels.star_results %}
                     <div class="col-md-6 col-lg-12">
                     {% include "pages/partial/dashboard_panel_star_rating_results.html" with data=data.star_results %}
@@ -61,7 +66,12 @@ <h1>Dashboard</h1>
 
 </main>
 {% include "shared/partial/modal_vocab_check.html" %}
-{% include "shared/partial/popover_tip.html" %}
+{% for tour in tours %}
+{% include "shared/partial/popover_tour.html" with tour_name=tour.name tour_robust=tour.robust %}
+{% endfor %}
+{% if tip_name %}
+{% include "shared/partial/tooltip_tip.html" %}
+{% endif %}
 {% include "shared/partial/modal_confirm.html" %}
 
 {% endblock %}

src/pages/templates/pages/partial/dashboard_panel_affect.html

@@ -1,4 +1,4 @@
-<div class="box">
+<div class="box" {% if clusive_user.role == 'ST' %} data-clusive-tip-id="student_reactions" {% endif %}>
     <h2>Your thoughts <span class="icon-thought" aria-hidden="true"></span></h2>
     <div class="box-divider"></div>
     {% if data.empty %}

src/pages/templates/pages/partial/dashboard_panel_class_affect.html

@@ -1,4 +1,4 @@
-<div class="box">
+<div class="box" data-clusive-tip-id="student_reactions">
     <h2>Your students&rsquo; reactions <span class="icon-thought" aria-hidden="true"></span></h2>
     <div class="box-divider"></div>
     {% if data.empty %}

src/pages/templates/pages/partial/dashboard_panel_popular_reads.html

@@ -1,13 +1,13 @@
-<div class="box box-mascot-tipped">
+<div class="box box-mascot-tipped" data-clusive-tip-id="reading_data">
     {% if is_teacher %}
         <h2>Student reading</h2>
     {% else %}
         <h2>Your reading</h2>
     {% endif %}
 
     <div class="dashboard-reading-btns">
-        <a href="{% url 'upload' %}" class="btn btn-primary btn-small"><span aria-hidden="true">+ </span>Upload a new reading</a>
-        <a href="{% url 'reader_index' %}" class="btn btn-primary btn-small">Go to library</a>
+        <a href="{% url 'upload' %}" class="btn btn-primary btn-small" data-clusive-tip-action="reading_data"><span aria-hidden="true">+ </span>Upload a new reading</a>
+        <a href="{% url 'reader_index' %}" class="btn btn-primary btn-small" data-clusive-tip-action="reading_data">Go to library</a>
     </div>
 
     {% if is_teacher and periods.count == 0 %}
@@ -16,7 +16,7 @@ <h2>Your reading</h2>
             You haven't created any student accounts, yet.
             Set up your classes by clicking the "Manage" link in the navigation bar.
         </p>
-        <a href="{% url 'manage' %}" class="btn btn-primary">Manage</a>
+        <a href="{% url 'manage' %}" class="btn btn-primary" data-clusive-tip-id="manage" data-clusive-tip-action="manage">Manage</a>
     {% else %}
         <div id="DashboardPopularReads">
             {% include 'pages/partial/dashboard_panel_popular_reads_data.html' %}

src/pages/templates/pages/partial/dashboard_panel_popular_reads_data.html

@@ -1,11 +1,29 @@
 <ul class="nav box-tabs mb-0">
     {% if is_guest or current_period %}
-    <li class="nav-item"><button type="button" data-clusive-view="assigned" class="nav-link popular-read-view-button{% if data.view == 'assigned' %} active{% endif %}">Assigned</button></li>
+    <li class="nav-item">
+        <button type="button" data-clusive-view="assigned"
+            class="nav-link popular-read-view-button{% if data.view == 'assigned' %} active{% endif %}"
+            data-clusive-tip-action="reading_data">
+            Assigned
+        </button>
+    </li>
     {% endif %}
     {% if not is_teacher %}
-    <li class="nav-item"><button type="button" data-clusive-view="recent" class="nav-link popular-read-view-button{% if data.view == 'recent' %} active{% endif %}">Recent</button></li>
+    <li class="nav-item">
+        <button type="button" data-clusive-view="recent"
+            class="nav-link popular-read-view-button{% if data.view == 'recent' %} active{% endif %}"
+            data-clusive-tip-action="reading_data">
+            Recent
+        </button>
+    </li>
     {% endif %}
-    <li class="nav-item"><button type="button" data-clusive-view="popular" class="nav-link popular-read-view-button{% if data.view == 'popular' %} active{% endif %}">Popular</button></li>
+    <li class="nav-item">
+        <button type="button" data-clusive-view="popular" 
+            class="nav-link popular-read-view-button{% if data.view == 'popular' %} active{% endif %}"
+            data-clusive-tip-action="reading_data">
+            Popular
+        </button>
+    </li>
 </ul>
 
 <div class="box-divider"></div>

src/pages/templates/pages/partial/dashboard_panel_popular_reads_student_messages.html

@@ -15,7 +15,7 @@
         and get started in Clusive!
     {% else %}
         Revisit something you've read, or head to the
-        <a href="{% url 'library_style_redirect' view='period' %}">library</a>
+        <a href="{% url 'library_style_redirect' view='period' %}" data-clusive-tip-action="reading_data">library</a>
         for something new.
     {% endif %}
 {% elif data.view == 'popular' %}

src/pages/templates/pages/partial/dashboard_panel_student_activity.html

@@ -56,7 +56,7 @@ <h2 class="mb-0">Active reading time</h2>
                         {% endif %}
                     </th>
                     <th class="d-xs-down-none text-center">
-                        <a href="#" tabindex="-1" {% if data.reading_data %}data-clusive-tip-id="activity" data-cfw-tooltip-placement="top auto"{% endif %}><span class="sr-only">Reading time for books</span></a>
+                        <a href="#" tabindex="-1" {% if data.reading_data %}data-clusive-tip-id="activity" data-cfw-popover-placement="top auto"{% endif %}><span class="sr-only">Reading time for books</span></a>
                     </th>
                     <th>
                         {% if data.sort == 'time' %}

src/pages/templates/pages/partial/dashboard_panel_teacher_resources.html

@@ -0,0 +1,13 @@
+<div id="resourcesHelp" class="box">
+<h2>Resources</h2>
+<div class="box-divider"></div>
+    <div class="embed-fluid embed-fluid-16x9 mb-0_5">
+        <iframe id="resourcesIframe" src="https://videos.sproutvideo.com/embed/ac9ed4bf1c1ee2c325/8c2089ffd2b063c4?type=hd" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen aria-label="Resources video"></iframe>
+    </div>
+    <p>Get tips, resources and videos for getting you and your students started in Clusive, and for building teaching skills with Clusive tools and features.</p>
+    <div class="row gx-0_5 flex-items-center">
+        <div class="col">
+            <a href="{% url 'resources' %}" data-clusive-tip-action="resources">Learn more<span class="sr-only"> about resources</span></a>
+        </div>
+    </div>
+</div>

src/pages/templates/pages/reader.html

@@ -388,6 +388,11 @@ <h2 class="modal-title">Image Details</h2>
 </div>
 
 {% include "shared/partial/modal_toc.html" %}
-{% include "shared/partial/popover_tip.html" %}
+{% for tour in tours %}
+{% include "shared/partial/popover_tour.html" with tour_name=tour.name tour_robust=tour.robust %}
+{% endfor %}
+{% if tip_name %}
+{% include "shared/partial/tooltip_tip.html" %}
+{% endif %}
 {% include "shared/partial/popover_simplify.html" %}
 {% endblock %}