CSL-2041: Add manage command to increment TipType priorities

src/frontend/js/frontend.js

@@ -1298,6 +1298,36 @@ function setUpDeferredLoadOfCompDetails() {
     });
 }
 
+function dialogMediaStop() {
+    'use strict';
+
+    function dialogTarget(evt) {
+        if (evt.namespace.includes('popover')) {
+            return $(evt.target).data('cfw.popover').$target[0];
+        }
+        if (evt.namespace.includes('modal')) {
+            return $(evt.target).data('cfw.modal').$target[0];
+        }
+        return null;
+    }
+
+    $(document.body).on('beforeHide.cfw.popover beforeHide.cfw.modal', function(evt) {
+        if (evt.isDefaultPrevented()) { return; }
+
+        var target = dialogTarget(evt);
+        if (target === null) { return; }
+
+        var $iframes = $(target).find('iframe[src]');
+        $iframes.each(function() {
+            var source = this.src;
+            if (source.includes('youtube.com') || source.includes('sproutvideo.com')) {
+                this.src = '';
+                this.src = source;
+            }
+        });
+    });
+}
+
 $(window).ready(function() {
     'use strict';
 
@@ -1328,6 +1358,7 @@ $(window).ready(function() {
     shareForm();
     dashboardStudentReadingViewButtons();
     toolboxHandleUpdate();
+    dialogMediaStop();
 
     var settingFontSize = document.querySelector('#set-size');
     if (settingFontSize !== null) {

src/frontend/js/tour.js

@@ -3,33 +3,49 @@
 
     var SELECTOR_CONTAINER = '#tourContainer';
     var SELECTOR_TOUR_VISIBLE = '.popover-tour:visible';
+    var CLASS_TOUR = 'touring';
 
     var tourModule = function() {
         // placeholder
     };
 
     tourModule.prototype = {
         // Initialize tour popover item
-        // `selector` - the trigger for the popover to initialize
-        prepare : function(selector) {
-            if (selector) {
-                var control = $(selector);
-                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',
-                    target: target,
-                    placement: placement ? placement : 'right auto',
-                    popperConfig: {
-                        positionFixed: true
-                    }
-                });
+        // `name` - name (via data attribute) trigger for the popover to initialize
+        prepare : function(name) {
+            var $control = $('[data-clusive-tip-id="' + name + '"]');
+            if (!$control.length) { return; }
+
+            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',
+                target: target,
+                placement: placement ? placement : 'right auto',
+                popperConfig: {
+                    positionFixed: true
+                }
+            });
+        },
+
+        // Show a singleton from the tour
+        singleton: function(name) {
+            var $control = $('[data-clusive-tip-id="' + name + '"]');
+            if (!$control.length) { return; }
+
+            document.body.classList.remove(CLASS_TOUR);
+            $control.one('afterShow.cfw.popover', function() {
+                document.querySelector('#tour_' + name).focus();
+                window.parent.clusiveEvents.addTipViewToQueue(name);
+            });
+            setTimeout(function() {
+                $control.CFW_Popover('show');
+            }, 2000);
         },
 
         // Chain animations for tour items together
@@ -38,13 +54,18 @@
             var $curr = $(document).find(SELECTOR_TOUR_VISIBLE);
             var $next = $(selector);
 
+            // Hide tip/tour tooltip if showing
+            $('#tip').CFW_Tooltip('hide');
+
             if ($curr.length) {
                 // Wait until hide animation is complete before callling show
                 $curr.CFW_Popover('hide').CFW_transition(null, function() {
+                    document.body.classList.add(CLASS_TOUR);
                     $next.CFW_Popover('show');
                     $next[0].focus();
                 });
             } else {
+                document.body.classList.add(CLASS_TOUR);
                 $next.CFW_Popover('show');
                 $next[0].focus();
             }
@@ -61,9 +82,11 @@
             if ($curr.length) {
                 // Wait until hide animation is complete before focusing
                 $curr.CFW_Popover('hide').CFW_transition(null, function() {
+                    document.body.classList.remove(CLASS_TOUR);
                     $next[0].focus();
                 });
             } else {
+                document.body.classList.remove(CLASS_TOUR);
                 $next[0].focus();
             }
 
@@ -72,4 +95,4 @@
     };
 
     window.tour = tourModule.prototype;
-}(jQuery));
+}(jQuery));

src/frontend/scss/site/_box.scss

@@ -83,6 +83,16 @@
         background-repeat: no-repeat;
         background-size: contain;
     }
+
+    .tip-mascot {
+        position: absolute;
+        top: calc(var(--CT_boxMascotSize) * -.375);
+        left: calc(1rem + var(--CT_boxMascotSize));
+        display: block;
+        width: 1px;
+        height: 1px;
+        content: "";
+    }
 }
 
 .clusive-reduced-motion {

src/frontend/scss/site/_button.scss

@@ -6,7 +6,8 @@
 .btn-nav,
 .btn-setting,
 .btn-tool,
-.btn-tts {
+.btn-tts,
+.btn-mascot-tipped {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -135,3 +136,21 @@
     @include font-size($tag-font-size);
     font-weight: $tag-font-weight;
 }
+
+.btn-mascot-tipped {
+    position: relative;
+
+    &::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        width: 1.75rem;
+        height: calc(1.75rem * #{$img-ratio-mascot-tipped});
+        content: "";
+        background-image: var(--CT_imgMascotTipped);
+        background-repeat: no-repeat;
+        background-size: contain;
+        transform: translate(-50%, -50%);
+    }
+}

src/frontend/scss/site/_content.scss

@@ -542,19 +542,13 @@ h2,
 }
 .feature-context {
     position: absolute;
-    //top: 33%;
-    //left: 50%;
-    top: 66%;
-    left: $sidebar-width;
+    top: 25%;
+    left: 50%;
     margin-right: ($grid-gutter-width / -2);
     margin-left: ($grid-gutter-width / -2);
     pointer-events: none;
     outline: 0;
     @include sr-only();
-
-    @include media-breakpoint-up(md) {
-        left: $sidebar-md-width;
-    }
 }
 
 .feature-list {
@@ -720,3 +714,19 @@ h2,
         animation-duration: $loader-circle-animation-speed * 2;
     }
 }
+
+// stylelint-disable selector-no-qualifying-type
+// Conditionally show/hide content in tour popovers depending on if
+// state is singleton (auto-shown) or part of the tour started from
+// the tour/mascot button
+body:not(.touring) {
+    .touring-on {
+        display: none;
+    }
+}
+body.touring {
+    .touring-off {
+        display: none;
+    }
+}
+// stylelint-enable selector-no-qualifying-type

src/frontend/scss/site/_tooltip.scss

@@ -97,3 +97,12 @@
 .tooltip-step {
     margin-right: auto;
 }
+
+.tooltip-tour {
+    .tooltip-body {
+        max-width: 15.5rem;
+    }
+    .tooltip-action {
+        justify-content: space-between;
+    }
+}

src/library/templates/library/library.html

@@ -54,11 +54,5 @@ <h1>Library</h1>
 </main>
 
 {% include "shared/partial/modal_vocab_check.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/resources.html

@@ -42,10 +42,4 @@ <h2>{{ cat.name }}</h2>
     {% endfor %}
 
 </main>
-{% 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

@@ -34,7 +34,7 @@
     get_access_keys, is_organization_sponsor, is_organization_member
 from pages.views import ThemedPageMixin, SettingsPageMixin
 from roster.models import ClusiveUser, Period, LibraryViews, LibraryStyles, check_valid_choice
-from tips.models import TipHistory
+from tips.models import TipHistory, TourList
 
 
 logger = logging.getLogger(__name__)
@@ -385,17 +385,15 @@ def dispatch(self, request, *args, **kwargs):
 
     def get(self, request, *args, **kwargs):
         self.tip_shown = TipHistory.get_tip_to_show(request.clusive_user, 'Library')
+        self.tours = TourList(request.clusive_user, page='Library')
         return super().get(request, *args, **kwargs)
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['search_form'] = self.search_form
-        # BEGIN: Sample Tour
-        # Sample tour with single item list
         context['tip_name'] = None
-        context['tours'] = [{'name': self.tip_shown.name, 'robust': True }] if self.tip_shown else None
-        # END: Sample Tour
-        context['tip_shown'] = self.tip_shown
+        context['tip_shown'] = self.tip_shown.name if self.tip_shown else None
+        context['tours'] = self.tours
         context['has_teacher_resource'] = False
         context['has_bookshare_account'] = has_bookshare_account(self.request)
         return context
@@ -425,12 +423,13 @@ class ResourcesPageView(LoginRequiredMixin, ThemedPageMixin, SettingsPageMixin,
 
     def get(self, request, *args, **kwargs):
         self.tip_shown = TipHistory.get_tip_to_show(request.clusive_user, self.page_name)
+        self.tours = TourList(request.clusive_user, page=self.page_name)
         self.extra_context = {
             'categories': EducatorResourceCategory.objects.all()
                 .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,
+            'tip_shown': self.tip_shown.name if self.tip_shown else None,
+            'tours': self.tours,
             'has_teacher_resource': False,  # "Learn more" link is circular in this case.
             'clusive_user': request.clusive_user,
         }

src/pages/templates/pages/dashboard.html

@@ -66,12 +66,5 @@ <h1>Dashboard</h1>
 
 </main>
 {% include "shared/partial/modal_vocab_check.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_popular_reads.html

@@ -1,4 +1,8 @@
 <div class="box box-mascot-tipped" data-clusive-tip-id="reading_data">
+    {% if tip_name == "tour" %}
+    <span class="tip-mascot feature-novis" data-clusive-tip-id="tour"></span>
+    {% endif %}
+
     {% if is_teacher %}
         <h2>Student reading</h2>
     {% else %}

src/pages/templates/pages/reader.html

@@ -388,11 +388,5 @@ <h2 class="modal-title">Image Details</h2>
 </div>
 
 {% include "shared/partial/modal_toc.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 %}

src/pages/templates/pages/wordbank.html

@@ -79,10 +79,4 @@ <h2 class="h4">Rate some words!</h2>
         </div>
     </div>
 </main>
-{% 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 %}