diff --git a/cms/conftest.py b/cms/conftest.py index d365eb246a..fbce4a8e12 100644 --- a/cms/conftest.py +++ b/cms/conftest.py @@ -51,6 +51,10 @@ def _django_clear_site_cache(): @pytest.fixture(autouse=True) def no_webpack_loader(monkeypatch): + """ + Monkeypatch webpack_loader to make sure that webpack assets don't need to be + compiled before unit tests are run. + """ monkeypatch.setattr( "webpack_loader.templatetags.webpack_loader.render_bundle", lambda entry, extension=None, config='DEFAULT', attrs='': '' diff --git a/common/lib/conftest.py b/common/lib/conftest.py index 39c59426f7..2ccd86acf3 100644 --- a/common/lib/conftest.py +++ b/common/lib/conftest.py @@ -6,6 +6,7 @@ defuse_xml_libs() import pytest + @pytest.fixture(autouse=True) def no_webpack_loader(monkeypatch): monkeypatch.setattr( diff --git a/common/lib/xmodule/xmodule/js/spec/helper.js b/common/lib/xmodule/xmodule/js/spec/helper.js index 8b12b51794..71ca1df6a3 100644 --- a/common/lib/xmodule/xmodule/js/spec/helper.js +++ b/common/lib/xmodule/xmodule/js/spec/helper.js @@ -1,3 +1,5 @@ +/* global _ */ + (function() { 'use strict'; var origAjax = $.ajax; @@ -174,13 +176,13 @@ settings.url.match(/.+\/problem_(check|reset|show|save)$/) ) { // Do nothing. - return; + return {}; } else if (settings.url === '/save_user_state') { return {success: true}; } else if (settings.url.match(new RegExp(jasmine.getFixtures().fixturesPath + '.+', 'g'))) { return origAjax(settings); } else { - $.ajax.and.callThrough(); + return $.ajax.and.callThrough(); } }); }; @@ -195,7 +197,7 @@ $.fn.scrollTo = jasmine.createSpy('jQuery.scrollTo'); jasmine.initializePlayer = function(fixture, params) { - var state; + var state, metadata; if (_.isString(fixture)) { // `fixture` is a name of a fixture file. @@ -215,7 +217,7 @@ // If `params` is an object, assign its properties as data attributes // to the main video DIV element. if (_.isObject(params)) { - var metadata = _.extend($('#video_id').data('metadata'), params); + metadata = _.extend($('#video_id').data('metadata'), params); $('#video_id').data('metadata', metadata); } diff --git a/common/lib/xmodule/xmodule/js/spec/video/initialize_spec.js b/common/lib/xmodule/xmodule/js/spec/video/initialize_spec.js index cef13bd3f5..f588105e90 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/initialize_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/initialize_spec.js @@ -1,4 +1,4 @@ -(function(require, define, undefined) { +(function(require) { 'use strict'; require( @@ -85,8 +85,7 @@ function(Initialize) { }; }); - var msg = 'returns duration for the 1.0 speed if speed is not 1.0'; - it(msg, function() { + it('returns duration for the 1.0 speed if speed is not 1.0', function() { var expected; state.speed = '1.50'; @@ -105,8 +104,7 @@ function(Initialize) { expect(expected).toEqual(100); }); - var msg = 'returns duration for the 1.0 speed as a fall-back'; - it(msg, function() { + it('returns duration for the 1.0 speed as a fall-back', function() { var expected; state.isFlashMode.and.returnValue(true); @@ -277,21 +275,21 @@ function(Initialize) { describe('isFlashMode', function() { it('returns `true` if player in `flash` mode', function() { - var state = { + var testState = { getPlayerMode: jasmine.createSpy().and.returnValue('flash') }, isFlashMode = Initialize.prototype.isFlashMode, - actual = isFlashMode.call(state); + actual = isFlashMode.call(testState); expect(actual).toBeTruthy(); }); it('returns `false` if player is not in `flash` mode', function() { - var state = { + var testState = { getPlayerMode: jasmine.createSpy().and.returnValue('html5') }, isFlashMode = Initialize.prototype.isFlashMode, - actual = isFlashMode.call(state); + actual = isFlashMode.call(testState); expect(actual).toBeFalsy(); }); @@ -299,25 +297,25 @@ function(Initialize) { describe('isHtml5Mode', function() { it('returns `true` if player in `html5` mode', function() { - var state = { + var testState = { getPlayerMode: jasmine.createSpy().and.returnValue('html5') }, isHtml5Mode = Initialize.prototype.isHtml5Mode, - actual = isHtml5Mode.call(state); + actual = isHtml5Mode.call(testState); expect(actual).toBeTruthy(); }); it('returns `false` if player is not in `html5` mode', function() { - var state = { + var testState = { getPlayerMode: jasmine.createSpy().and.returnValue('flash') }, isHtml5Mode = Initialize.prototype.isHtml5Mode, - actual = isHtml5Mode.call(state); + actual = isHtml5Mode.call(testState); expect(actual).toBeFalsy(); }); }); }); }); -}(require, define)); +}(require)); diff --git a/common/lib/xmodule/xmodule/js/spec/video/iterator_spec.js b/common/lib/xmodule/xmodule/js/spec/video/iterator_spec.js index 3797babee4..85dcd57325 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/iterator_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/iterator_spec.js @@ -1,4 +1,6 @@ (function(require) { + 'use strict'; + require( ['video/00_iterator.js'], function(Iterator) { diff --git a/common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js b/common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js index 9cf001fa72..5b3cdf0b42 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/resizer_spec.js @@ -1,7 +1,8 @@ -(function(require, define, undefined) { +(function(require) { + 'use strict'; require( -['video/00_resizer.js'], -function(Resizer) { +['video/00_resizer.js', 'underscore'], +function(Resizer, _) { describe('Resizer', function() { var html = [ '
= elementRatio expect(realHeight).toBe(expectedHeight); @@ -75,7 +77,8 @@ function(Resizer) { var resizer = new Resizer(config).setMode('height'), expectedHeight = $container.height(), realHeight = $element.height(), - expectedWidth = 50; + expectedWidth = 50, + realWidth; // containerRatio >= elementRatio expect(realHeight).toBe(expectedHeight); @@ -89,13 +92,15 @@ function(Resizer) { }); it('`setElement` works correctly', function() { + var $newElement, + expectedHeight; + $container.append('
'); - - var $newElement = $('#Another-el'), - expectedHeight = $container.height(); + $newElement = $('#Another-el'); + expectedHeight = $container.height(); new Resizer(config).setElement($newElement).alignByHeightOnly(); expect($element.height()).not.toBe(expectedHeight); @@ -261,4 +266,4 @@ function(Resizer) { }); }); }); -}(require, define)); +}(require)); diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js index acfbc719ae..9fd48b40f6 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js @@ -1,8 +1,12 @@ -(function(undefined) { +/* global _, WAIT_TIMEOUT */ + +(function() { + 'use strict'; + describe('VideoCaption', function() { var state, oldOTBD; var parseIntAttribute = function(element, attrName) { - return parseInt(element.attr(attrName)); + return parseInt(element.attr(attrName), 10); }; beforeEach(function() { @@ -55,8 +59,9 @@ }); it('add ARIA attributes to transcript control', function() { + var $captionControl; state = jasmine.initializePlayer(); - var $captionControl = $('.toggle-transcript'); + $captionControl = $('.toggle-transcript'); expect($captionControl).toHaveAttrs({ 'aria-disabled': 'false' }); @@ -149,9 +154,10 @@ }); it('can destroy itself', function() { + var plugin; spyOn($, 'ajaxWithPrefix'); state = jasmine.initializePlayer(); - var plugin = state.videoCaption; + plugin = state.videoCaption; spyOn($.fn, 'off').and.callThrough(); state.videoCaption.destroy(); @@ -224,16 +230,17 @@ }; it('if languages more than 1', function() { + var transcripts, langCodes, langLabels; state = jasmine.initializePlayer(); - var transcripts = state.config.transcriptLanguages, - langCodes = _.keys(transcripts), - langLabels = _.values(transcripts); + transcripts = state.config.transcriptLanguages; + langCodes = _.keys(transcripts); + langLabels = _.values(transcripts); expect($('.langs-list')).toExist(); expect($('.langs-list')).toHandle('click'); - $('.langs-list li').each(function(index) { + $('.langs-list li').each(function() { var code = $(this).data('lang-code'), link = $(this).find('.control'), label = link.text(); @@ -244,9 +251,10 @@ }); it('when clicking on link with new language', function() { + var Caption, $link; state = jasmine.initializePlayer(); - var Caption = state.videoCaption, - $link = $('.langs-list li[data-lang-code="de"] .control-lang'); + Caption = state.videoCaption; + $link = $('.langs-list li[data-lang-code="de"] .control-lang'); spyOn(Caption, 'fetchCaption'); spyOn(state.storage, 'setItem'); @@ -269,9 +277,11 @@ }); it('when clicking on link with current language', function() { + var Caption, $link; + state = jasmine.initializePlayer(); - var Caption = state.videoCaption, - $link = $('.langs-list li[data-lang-code="en"] .control-lang'); + Caption = state.videoCaption; + $link = $('.langs-list li[data-lang-code="en"] .control-lang'); spyOn(Caption, 'fetchCaption'); spyOn(state.storage, 'setItem'); @@ -300,7 +310,11 @@ $('.language-menu').focus(); $('.language-menu').trigger(keyPressEvent(KEY.UP)); expect($('.lang')).toHaveClass('is-opened'); - expect($('.langs-list').find('li').last().find('.control-lang')).toBeFocused(); + expect($('.langs-list') + .find('li') + .last() + .find('.control-lang')) + .toBeFocused(); }); it('closes the language menu on ESC', function() { @@ -456,9 +470,10 @@ }); }); - var originalClearTimeout; describe('mouse movement', function() { + var originalClearTimeout; + beforeEach(function(done) { jasmine.clock().install(); state = jasmine.initializePlayer(); @@ -587,7 +602,7 @@ 'loaded yet'; it(msg, function() { Caption.loaded = false; - state.hide_captions = false; + state.hideCaptions = false; Caption.fetchCaption(); expect($.ajaxWithPrefix).toHaveBeenCalled(); @@ -595,7 +610,7 @@ Caption.loaded = false; Caption.hideCaptions.calls.reset(); - state.hide_captions = true; + state.hideCaptions = true; Caption.fetchCaption(); expect($.ajaxWithPrefix).toHaveBeenCalled(); @@ -957,7 +972,6 @@ jasmine.waitUntil(function() { return state.videoCaption.rendered; }).then(function() { - videoControl = state.videoControl; $('.subtitles li span[data-index=1]').addClass('current'); state.videoCaption.onResize(); }).always(done); diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js index 798c353d12..0e34696377 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js @@ -1,9 +1,11 @@ +/* global YT */ + (function(require, define, undefined) { 'use strict'; require( -['video/03_video_player.js', 'hls'], -function(VideoPlayer, HLS) { +['video/03_video_player.js', 'hls', 'underscore'], +function(VideoPlayer, HLS, _) { describe('VideoPlayer', function() { var STATUS = window.STATUS, state, diff --git a/common/lib/xmodule/xmodule/js/src/video/01_initialize.js b/common/lib/xmodule/xmodule/js/src/video/01_initialize.js index 93a16f6631..996f3637b7 100644 --- a/common/lib/xmodule/xmodule/js/src/video/01_initialize.js +++ b/common/lib/xmodule/xmodule/js/src/video/01_initialize.js @@ -241,17 +241,17 @@ function(VideoPlayer, i18n, moment, _) { // Defines whether or not captions are shown on first viewing. // // Option - // this.hide_captions = true | false + // this.hideCaptions = true | false // // represents the user's choice of having the subtitles shown or // hidden. This choice is stored in cookies. function _configureCaptions(state) { if (state.config.showCaptions) { - state.hide_captions = ($.cookie('hide_captions') === 'true'); + state.hideCaptions = ($.cookie('hide_captions') === 'true'); } else { - state.hide_captions = true; + state.hideCaptions = true; - $.cookie('hide_captions', state.hide_captions, { + $.cookie('hide_captions', state.hideCaptions, { expires: 3650, path: '/' }); diff --git a/common/lib/xmodule/xmodule/js/src/video/04_video_control.js b/common/lib/xmodule/xmodule/js/src/video/04_video_control.js index 619fdd1e8b..f80c0edd9f 100644 --- a/common/lib/xmodule/xmodule/js/src/video/04_video_control.js +++ b/common/lib/xmodule/xmodule/js/src/video/04_video_control.js @@ -1,159 +1,161 @@ (function(requirejs, require, define) { -// VideoControl module. + 'use strict'; + // VideoControl module. define( -'video/04_video_control.js', -['time.js'], -function(Time) { - // VideoControl() function - what this module "exports". - return function(state) { - var dfd = $.Deferred(); + 'video/04_video_control.js', + ['time.js'], + function(Time) { + // VideoControl() function - what this module "exports". + return function(state) { + var dfd = $.Deferred(); - state.videoControl = {}; + state.videoControl = {}; - _makeFunctionsPublic(state); - _renderElements(state); - _bindHandlers(state); + _makeFunctionsPublic(state); + _renderElements(state); + _bindHandlers(state); - dfd.resolve(); - return dfd.promise(); - }; + dfd.resolve(); + return dfd.promise(); + }; - // *************************************************************** - // Private functions start here. - // *************************************************************** + // *************************************************************** + // Private functions start here. + // *************************************************************** - // function _makeFunctionsPublic(state) - // - // Functions which will be accessible via 'state' object. When called, these functions will - // get the 'state' object as a context. - function _makeFunctionsPublic(state) { - var methodsDict = { - destroy: destroy, - hideControls: hideControls, - show: show, - showControls: showControls, - focusFirst: focusFirst, - updateVcrVidTime: updateVcrVidTime - }; + // function _makeFunctionsPublic(state) + // + // Functions which will be accessible via 'state' object. When called, these functions will + // get the 'state' object as a context. + function _makeFunctionsPublic(state) { + var methodsDict = { + destroy: destroy, + hideControls: hideControls, + show: show, + showControls: showControls, + focusFirst: focusFirst, + updateVcrVidTime: updateVcrVidTime + }; - state.bindTo(methodsDict, state.videoControl, state); - } - - function destroy() { - this.el.off({ - mousemove: this.videoControl.showControls, - keydown: this.videoControl.showControls, - destroy: this.videoControl.destroy, - initialize: this.videoControl.focusFirst - }); - - this.el.off('controls:show'); - if (this.controlHideTimeout) { - clearTimeout(this.controlHideTimeout); - } - delete this.videoControl; - } - - // function _renderElements(state) - // - // Create any necessary DOM elements, attach them, and set their initial configuration. Also - // make the created DOM elements available via the 'state' object. Much easier to work this - // way - you don't have to do repeated jQuery element selects. - function _renderElements(state) { - state.videoControl.el = state.el.find('.video-controls'); - state.videoControl.vidTimeEl = state.videoControl.el.find('.vidtime'); - - if ((state.videoType === 'html5') && (state.config.autohideHtml5)) { - state.videoControl.fadeOutTimeout = state.config.fadeOutTimeout; - - state.videoControl.el.addClass('html5'); - state.controlHideTimeout = setTimeout(state.videoControl.hideControls, state.videoControl.fadeOutTimeout); - } - } - - // function _bindHandlers(state) - // - // Bind any necessary function callbacks to DOM events (click, mousemove, etc.). - function _bindHandlers(state) { - if ((state.videoType === 'html5') && (state.config.autohideHtml5)) { - state.el.on({ - mousemove: state.videoControl.showControls, - keydown: state.videoControl.showControls - }); - } - - if (state.config.focusFirstControl) { - state.el.on('initialize', state.videoControl.focusFirst); - } - state.el.on('destroy', state.videoControl.destroy); - } - - // *************************************************************** - // Public functions start here. - // These are available via the 'state' object. Their context ('this' keyword) is the 'state' object. - // The magic private function that makes them available and sets up their context is makeFunctionsPublic(). - // *************************************************************** - - function focusFirst() { - this.videoControl.el.find('.vcr a, .vcr button').first().focus(); - } - - function show() { - this.videoControl.el.removeClass('is-hidden'); - this.el.trigger('controls:show', arguments); - } - - function showControls(event) { - if (!this.controlShowLock) { - if (!this.captionsHidden) { - return; + state.bindTo(methodsDict, state.videoControl, state); } - this.controlShowLock = true; + function destroy() { + this.el.off({ + mousemove: this.videoControl.showControls, + keydown: this.videoControl.showControls, + destroy: this.videoControl.destroy, + initialize: this.videoControl.focusFirst + }); - if (this.controlState === 'invisible') { - this.videoControl.el.show(); - this.controlState = 'visible'; - } else if (this.controlState === 'hiding') { - this.videoControl.el.stop(true, false).css('opacity', 1).show(); - this.controlState = 'visible'; - } else if (this.controlState === 'visible') { - clearTimeout(this.controlHideTimeout); + this.el.off('controls:show'); + if (this.controlHideTimeout) { + clearTimeout(this.controlHideTimeout); + } + delete this.videoControl; } - this.controlHideTimeout = setTimeout(this.videoControl.hideControls, this.videoControl.fadeOutTimeout); - this.controlShowLock = false; + // function _renderElements(state) + // + // Create any necessary DOM elements, attach them, and set their initial configuration. Also + // make the created DOM elements available via the 'state' object. Much easier to work this + // way - you don't have to do repeated jQuery element selects. + function _renderElements(state) { + state.videoControl.el = state.el.find('.video-controls'); + state.videoControl.vidTimeEl = state.videoControl.el.find('.vidtime'); + + if ((state.videoType === 'html5') && (state.config.autohideHtml5)) { + state.videoControl.fadeOutTimeout = state.config.fadeOutTimeout; + + state.videoControl.el.addClass('html5'); + state.controlHideTimeout = setTimeout(state.videoControl.hideControls, state.videoControl.fadeOutTimeout); + } + } + + // function _bindHandlers(state) + // + // Bind any necessary function callbacks to DOM events (click, mousemove, etc.). + function _bindHandlers(state) { + if ((state.videoType === 'html5') && (state.config.autohideHtml5)) { + state.el.on({ + mousemove: state.videoControl.showControls, + keydown: state.videoControl.showControls + }); + } + + if (state.config.focusFirstControl) { + state.el.on('initialize', state.videoControl.focusFirst); + } + state.el.on('destroy', state.videoControl.destroy); + } + + // *************************************************************** + // Public functions start here. + // These are available via the 'state' object. Their context ('this' keyword) is the 'state' object. + // The magic private function that makes them available and sets up their context is makeFunctionsPublic(). + // *************************************************************** + + function focusFirst() { + this.videoControl.el.find('.vcr a, .vcr button').first().focus(); + } + + function show() { + this.videoControl.el.removeClass('is-hidden'); + this.el.trigger('controls:show', arguments); + } + + function showControls(event) { + if (!this.controlShowLock) { + if (!this.captionsHidden) { + return; + } + + this.controlShowLock = true; + + if (this.controlState === 'invisible') { + this.videoControl.el.show(); + this.controlState = 'visible'; + } else if (this.controlState === 'hiding') { + this.videoControl.el.stop(true, false).css('opacity', 1).show(); + this.controlState = 'visible'; + } else if (this.controlState === 'visible') { + clearTimeout(this.controlHideTimeout); + } + + this.controlHideTimeout = setTimeout(this.videoControl.hideControls, this.videoControl.fadeOutTimeout); + this.controlShowLock = false; + } + } + + function hideControls() { + var _this = this; + + this.controlHideTimeout = null; + + if (!this.captionsHidden) { + return; + } + + this.controlState = 'hiding'; + this.videoControl.el.fadeOut(this.videoControl.fadeOutTimeout, function() { + _this.controlState = 'invisible'; + // If the focus was on the video control or the volume control, + // then we must make sure to close these dialogs. Otherwise, after + // next autofocus, these dialogs will be open, but the focus will + // not be on them. + _this.videoVolumeControl.el.removeClass('open'); + _this.videoSpeedControl.el.removeClass('open'); + + _this.focusGrabber.enableFocusGrabber(); + }); + } + + function updateVcrVidTime(params) { + var endTime = (this.config.endTime !== null) ? this.config.endTime : params.duration; + // in case endTime is accidentally specified as being greater than the video + endTime = Math.min(endTime, params.duration); + this.videoControl.vidTimeEl.html(Time.format(params.time) + ' / ' + Time.format(endTime)); + } } - } - - function hideControls() { - var _this = this; - - this.controlHideTimeout = null; - - if (!this.captionsHidden) { - return; - } - - this.controlState = 'hiding'; - this.videoControl.el.fadeOut(this.videoControl.fadeOutTimeout, function() { - _this.controlState = 'invisible'; - // If the focus was on the video control or the volume control, - // then we must make sure to close these dialogs. Otherwise, after - // next autofocus, these dialogs will be open, but the focus will - // not be on them. - _this.videoVolumeControl.el.removeClass('open'); - _this.videoSpeedControl.el.removeClass('open'); - - _this.focusGrabber.enableFocusGrabber(); - }); - } - - function updateVcrVidTime(params) { - var endTime = (this.config.endTime !== null) ? this.config.endTime : params.duration; - // in case endTime is accidentally specified as being greater than the video - endTime = Math.min(endTime, params.duration); - this.videoControl.vidTimeEl.html(Time.format(params.time) + ' / ' + Time.format(endTime)); - } -}); + ); }(RequireJS.requirejs, RequireJS.require, RequireJS.define)); diff --git a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js index 70b8d5decf..5907c937ac 100644 --- a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js +++ b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js @@ -8,7 +8,8 @@ 'edx-ui-toolkit/js/utils/html-utils', 'draggabilly', 'time.js', - ], function(Sjson, AsyncProcess, HtmlUtils, Draggabilly, Time) { + 'underscore' + ], function(Sjson, AsyncProcess, HtmlUtils, Draggabilly, Time, _) { /** * @desc VideoCaption module exports a function. * @@ -207,6 +208,7 @@ case KEY.ENTER: event.preventDefault(); this.toggleClosedCaptions(event); + // no default } }, @@ -219,6 +221,7 @@ case KEY.ENTER: event.preventDefault(); this.toggle(event); + // no default } }, @@ -253,7 +256,9 @@ case KEY.ENTER: case KEY.SPACE: return true; + // no default } + return true; }, handleKeypress: function(event) { @@ -272,6 +277,7 @@ case KEY.ESCAPE: this.closeLanguageMenu(event); break; + // no default } return event.keyCode === KEY.TAB; @@ -322,11 +328,11 @@ }, openLanguageMenu: function(event) { - event.preventDefault(); - var button = this.languageChooserEl, menu = button.parent().find('.menu'); + event.preventDefault(); + button .addClass('is-opened'); @@ -336,9 +342,8 @@ }, closeLanguageMenu: function(event) { - event.preventDefault(); - var button = this.languageChooserEl; + event.preventDefault(); button .removeClass('is-opened') @@ -367,6 +372,7 @@ case 'keydown': this.captionKeyDown(event); break; + // no default } }, @@ -531,10 +537,11 @@ notifyOnError: false, data: data, success: function(sjson) { + var results, start, captions; self.sjson = new Sjson(sjson); - var results = self.getBoundedCaptions(); - var start = results.start; - var captions = results.captions; + results = self.getBoundedCaptions(); + start = results.start; + captions = results.captions; if (self.loaded) { if (self.rendered) { @@ -554,7 +561,7 @@ } else { self.renderCaption(start, captions); } - self.hideCaptions(state.hide_captions, false); + self.hideCaptions(state.hideCaptions, false); HtmlUtils.append( self.state.el.find('.video-wrapper').parent(), HtmlUtils.HTML(self.subtitlesEl) @@ -668,7 +675,7 @@ if (_.keys(languages).length < 2) { // Remove the menu toggle button self.container.find('.lang').remove(); - return false; + return; } this.showLanguageMenu = true; @@ -698,11 +705,11 @@ $menu.on('click', '.control-lang', function(e) { var el = $(e.currentTarget).parent(), - state = self.state, + captionState = self.state, langCode = el.data('lang-code'); - if (state.lang !== langCode) { - state.lang = langCode; + if (captionState.lang !== langCode) { + captionState.lang = langCode; el.addClass('is-active') .siblings('li') .removeClass('is-active') @@ -711,7 +718,7 @@ $(e.currentTarget).attr('aria-pressed', 'true'); - state.el.trigger('language_menu:change', [langCode]); + captionState.el.trigger('language_menu:change', [langCode]); self.fetchCaption(); // update the closed-captions lang attribute @@ -918,10 +925,10 @@ this.autoScrolling = true; container.removeClass('focused'); this.currentCaptionIndex = -1; - } - // If the focus comes from tabbing, show the outline and turn off - // automatic scrolling. - else { + } else { + // If the focus comes from tabbing, show the outline and turn off + // automatic scrolling. + this.currentCaptionIndex = captionIndex; container.addClass('focused'); // The second and second to last elements turn automatic scrolling @@ -1030,7 +1037,7 @@ */ updatePlayTime: function(time) { var state = this.state, - params, newIndex; + params, newIndex, times; if (this.loaded) { if (state.isFlashMode()) { @@ -1038,7 +1045,7 @@ } time = Math.round(time * 1000 + 100); - var times = this.getStartEndTimes(); + times = this.getStartEndTimes(); // if start and end times are defined, limit search. // else, use the entire list of video captions params = [time].concat(times); @@ -1223,11 +1230,10 @@ }, listenForDragDrop: function() { - var captions = document.querySelector('.closed-captions'), - draggable; + var captions = document.querySelector('.closed-captions'); if (typeof Draggabilly === 'function') { - draggable = new Draggabilly(captions, {containment: true}); + new Draggabilly(captions, {containment: true}); } else { console.log('Closed captioning available but not draggable'); } @@ -1236,25 +1242,25 @@ /** * @desc Shows/Hides captions and updates the cookie. * - * @param {boolean} hide_captions if `true` hides the caption, + * @param {boolean} hideCaptions if `true` hides the caption, * otherwise - show. - * @param {boolean} update_cookie Flag to update or not the cookie. + * @param {boolean} updateCookie Flag to update or not the cookie. * */ - hideCaptions: function(hide_captions, update_cookie, trigger_event) { + hideCaptions: function(hideCaptions, updateCookie, triggerEvent) { var transcriptControlEl = this.transcriptControlEl, state = this.state, text; - if (typeof update_cookie === 'undefined') { - update_cookie = true; + if (typeof updateCookie === 'undefined') { + updateCookie = true; } - if (hide_captions) { + if (hideCaptions) { state.captionsHidden = true; state.el.addClass('closed'); text = gettext('Turn on transcripts'); - if (trigger_event) { + if (triggerEvent) { this.state.el.trigger('transcript:hide'); } @@ -1266,7 +1272,7 @@ state.el.removeClass('closed'); this.scrollCaption(); text = gettext('Turn off transcripts'); - if (trigger_event) { + if (triggerEvent) { this.state.el.trigger('transcript:show'); } @@ -1284,8 +1290,8 @@ } this.setSubtitlesHeight(); - if (update_cookie) { - $.cookie('hide_captions', hide_captions, { + if (updateCookie) { + $.cookie('hideCaptions', hideCaptions, { expires: 3650, path: '/' }); @@ -1315,7 +1321,7 @@ var height = 0, state = this.state; // on page load captionHidden = undefined - if ((state.captionsHidden === undefined && state.hide_captions) || + if ((state.captionsHidden === undefined && state.hideCaptions) || state.captionsHidden === true ) { // In case of html5 autoshowing subtitles, we adjust height of diff --git a/common/templates/xmodule_shim.html b/common/templates/xmodule_shim.html index 9de9f172c8..9fb1e3622e 100644 --- a/common/templates/xmodule_shim.html +++ b/common/templates/xmodule_shim.html @@ -1,4 +1,9 @@ +<%! +from openedx.core.djangolib.markup import HTML +%> +<%page expression_filter="h"/> + <%namespace name='static' file='static_content.html'/> <%static:webpack entry="XModuleShim"/> -${content} +${HTML(content)}