@edx/edx-proctoring - npm Package Compare versions

Comparing version 1.5.7 to 1.5.8

edx_proctoring/static/proctoring/js/views/proctored_exam_view.js

@@ -14,3 +14,3 @@ var edx = edx || {};
             this.timerBarTopPosition = this.$el.position().top;
-            this.courseNavBarMarginTop = this.timerBarTopPosition - 3;
+            this.initialCourseNavBarMarginTop = this.timerBarTopPosition - 3;
             this.model = options.model;
@@ -54,12 +54,18 @@ this.templateId = options.proctored_template;
         events: {
-            'click #toggle_timer': 'toggleTimerVisibility'
+            'click #toggle_timer': 'toggleTimerVisibility',
+            'click .js-toggle-show-more': 'toggleShowText'
         },
         detectScroll: function(event) {
+            var $courseNavBar = $('.wrapper-course-material');
+            if(!$courseNavBar.length) {
+                $courseNavBar = $('.course-tabs');
+            }
+            var examStatusBarHeight = this.$el.height();
             if ($(event.currentTarget).scrollTop() > this.timerBarTopPosition) {
-                $(".proctored_exam_status").addClass('is-fixed');
-                $(".wrapper-course-material").css('margin-top', this.courseNavBarMarginTop + 'px');
+                $('.proctored_exam_status').addClass('is-fixed');
+                $courseNavBar.css('margin-top', examStatusBarHeight + 'px');
             }
             else {
-                $(".proctored_exam_status").removeClass('is-fixed');
-                $(".wrapper-course-material").css('margin-top', '0');
+                $('.proctored_exam_status').removeClass('is-fixed');
+                $courseNavBar.css('margin-top', '0');
             }
@@ -108,2 +114,5 @@
                         this.$el.find('.timer-announce').html(this.accessibility_time_string);
+                        if (!(window && window.matchMedia && window.matchMedia("(min-width: 992px)").matches)) {
+                            this.toggleShowText();
+                        }
                         this.first_time_rendering = false;
@@ -184,3 +193,3 @@ }
 
-            self.$el.find('span#time_remaining_id b').html(self.model.getFormattedRemainingTime(self.secondsLeft));
+            self.$el.find('h3#time_remaining_id b').html(self.model.getFormattedRemainingTime(self.secondsLeft));
             if (self.secondsLeft <= -self.grace_period_secs) {
@@ -210,3 +219,3 @@ clearInterval(self.timerId); // stop the timer once the time finishes.
             var icon = button.find('i');
-            var timer = this.$el.find('span#time_remaining_id b');
+            var timer = this.$el.find('h3#time_remaining_id b');
             if (timer.hasClass('timer-hidden')) {
@@ -223,2 +232,15 @@ timer.removeClass('timer-hidden');
             event.preventDefault();
+        },
+        toggleShowText: function() {
+            var $examText = this.$el.find('.js-exam-text');
+            var $toggle = this.$el.find('.js-toggle-show-more');
+            var $additionalText = this.$el.find('.js-exam-additional-text');
+            var currentlyShowingLongText = $examText.data('showLong');
+            $additionalText
+                // uses both a v1 and a bootstrap utility class because
+                // this banner appears across both types of pages
+                .toggleClass('hidden d-none', currentlyShowingLongText)
+                .attr('aria-hidden', currentlyShowingLongText);
+            $toggle.html(currentlyShowingLongText ? $toggle.data('showMoreText') : $toggle.data('showLessText'));
+            $examText.data('showLong', !currentlyShowingLongText);
         }
@@ -225,0 +247,0 @@ });

edx_proctoring/static/proctoring/spec/proctored_exam_spec.js

@@ -9,9 +9,17 @@ describe('ProctoredExamView', function () {
             '<div class="exam-timer">' +
+            '<div class="exam-text js-exam-text" data-show-long="true">' +
             'You are taking "' +
             '<a href="<%= exam_url_path %>"> <%= exam_display_name %> </a>' +
-            '" as a proctored exam. The timer on the right shows the time remaining in the exam' +
-            '<span class="exam-timer-clock"> <span id="time_remaining_id">' +
-            '<b> </b> <button role="button" id="toggle_timer" aria-label="Hide Timer" aria-pressed="false">' +
+            '" as a proctored exam.' +
+            '<span class="js-exam-additional-text" aria-hidden="false">' +
+            'The timer on the right shows the time remaining in the exam' +
+            '</span>' +
+            '<button class="js-toggle-show-more" data-show-more-text="Show More" data-show-less-text="Show Less">' +
+            'Show Less' +
+            '</button>' +
+            '<span class="exam-timer-clock"> <h3 id="time_remaining_id">' +
+            '<b> </b> </h3>' +
+            '<button role="button" id="toggle_timer" aria-label="Hide Timer" aria-pressed="false">' +
             '<i class="fa fa-eye-slash" aria-hidden="true"></i></button>' +
-            '</span> </span>' +
+            '</span>' +
             '</div>' +
@@ -65,3 +73,3 @@ '</script>'+
         var button = this.proctored_exam_view.$el.find('#toggle_timer');
-        var timer = this.proctored_exam_view.$el.find('span#time_remaining_id b');
+        var timer = this.proctored_exam_view.$el.find('h3#time_remaining_id b');
         expect(timer).not.toHaveClass('timer-hidden');
@@ -73,2 +81,20 @@ button.click();
     });
+    it('toggles long text visibility on show more/less', function() {
+        var button = this.proctored_exam_view.$el.find('.js-toggle-show-more');
+        var textToToggle = this.proctored_exam_view.$el.find('.js-exam-additional-text');
+        var initiallyHidden = textToToggle.hasClass('hidden');
+        button.click();
+        expect(textToToggle.hasClass('hidden')).not.toBe(initiallyHidden);
+        button.click();
+        expect(textToToggle.hasClass('hidden')).toBe(initiallyHidden);
+    });
+    it("toggles initial visibility according to whether media query is satisfied", function() {
+        var matchMedia = window.matchMedia;
+        var fakeMediaQuery = sinon.stub().returns({matches: true});
+        this.proctored_exam_view.first_time_rendering = true;
+        window.matchMedia = fakeMediaQuery;
+        this.proctored_exam_view.render();
+        expect(this.proctored_exam_view.$el.find('.js-exam-additional-text')).not.toHaveClass('hidden');
+        window.matchMedia = matchMedia;
+    });
     it("reload the page when the exam time finishes", function(){
@@ -75,0 +101,0 @@ this.proctored_exam_view.secondsLeft = -10;

package.json

@@ -5,3 +5,3 @@ {
   "//": "Note that the version format is slightly different than that of the Python version when using prereleases.",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "main": "edx_proctoring/static/index.js",
@@ -8,0 +8,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

411096

increased by0.64%

Lines of code

5625

increased by0.86%

No dependency changes