diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 060842d788..bd478ab0a2 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -535,8 +535,6 @@ .speed-option, .control-lang { - @include border-left($baseline/10 solid rgb(14, 166, 236)); - font-weight: $font-bold; color: rgb(14, 166, 236); // UXPL primary accent } } diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html b/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html index c941c535a6..d4f5401785 100644 --- a/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html +++ b/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html @@ -55,9 +55,8 @@ -
-
-
+ +
@@ -109,9 +108,7 @@ -
-
-
+
diff --git a/common/lib/xmodule/xmodule/js/karma_xmodule.conf.js b/common/lib/xmodule/xmodule/js/karma_xmodule.conf.js index 3f72dcb7b0..5ee38962a7 100644 --- a/common/lib/xmodule/xmodule/js/karma_xmodule.conf.js +++ b/common/lib/xmodule/xmodule/js/karma_xmodule.conf.js @@ -20,10 +20,12 @@ var options = { libraryFilesToInclude: [ {pattern: 'common_static/js/vendor/requirejs/require.js', included: true}, {pattern: 'RequireJS-namespace-undefine.js', included: true}, + {pattern: 'spec/main_requirejs.js', included: true}, {pattern: 'common_static/coffee/src/ajax_prefix.js', included: true}, {pattern: 'common_static/common/js/vendor/underscore.js', included: true}, {pattern: 'common_static/common/js/vendor/backbone.js', included: true}, + {pattern: 'common_static/edx-ui-toolkit/js/utils/global-loader.js', included: true}, {pattern: 'common_static/js/vendor/CodeMirror/codemirror.js', included: true}, {pattern: 'common_static/js/vendor/draggabilly.js'}, {pattern: 'common_static/common/js/vendor/jquery.js', included: true}, @@ -48,14 +50,11 @@ var options = { {pattern: 'common_static/js/vendor/jasmine-imagediff.js', included: true}, {pattern: 'common_static/common/js/spec_helpers/jasmine-waituntil.js', included: true}, {pattern: 'common_static/common/js/spec_helpers/jasmine-extensions.js', included: true}, - {pattern: 'common_static/js/vendor/sinon-1.17.0.js', included: true}, - - {pattern: 'spec/main_requirejs.js', included: true}, + {pattern: 'common_static/js/vendor/sinon-1.17.0.js', included: true} ], libraryFiles: [ - {pattern: 'common_static/edx-pattern-library/js/**/*.js'}, - {pattern: 'common_static/edx-ui-toolkit/js/**/*.js'} + {pattern: 'common_static/edx-pattern-library/js/**/*.js'} ], // Make sure the patterns in sourceFiles and specFiles do not match the same file. diff --git a/common/lib/xmodule/xmodule/js/spec/main_requirejs.js b/common/lib/xmodule/xmodule/js/spec/main_requirejs.js index d4692469e5..a57497f8c8 100644 --- a/common/lib/xmodule/xmodule/js/spec/main_requirejs.js +++ b/common/lib/xmodule/xmodule/js/spec/main_requirejs.js @@ -1,36 +1,4 @@ -(function(requirejs, define) { - 'use strict'; - // We do not wish to bundle common libraries (that may also be used by non-RequireJS code on the page - // into the optimized files. Therefore load these libraries through script tags and explicitly define them. - // Note that when the optimizer executes this code, window will not be defined. - if (window) { - var defineDependency = function (globalName, name, noShim) { - var getGlobalValue = function(name) { - var globalNamePath = name.split('.'), - result = window, - i; - for (i = 0; i < globalNamePath.length; i++) { - result = result[globalNamePath[i]]; - } - return result; - }, - globalValue = getGlobalValue(globalName); - if (globalValue) { - if (noShim) { - define(name, {}); - } - else { - define(name, [], function() { return globalValue; }); - } - } - else { - console.error("Expected library to be included on page, but not found on window object: " + name); - } - }; - defineDependency("jQuery", "jquery"); - defineDependency("jQuery", "jquery-migrate"); - defineDependency("_", "underscore"); - } +(function(requirejs) { requirejs.config({ baseUrl: '/base/', paths: { @@ -38,8 +6,7 @@ "modernizr": "common_static/edx-pattern-library/js/modernizr-custom", "afontgarde": "common_static/edx-pattern-library/js/afontgarde", "edxicons": "common_static/edx-pattern-library/js/edx-icons", - "draggabilly": "common_static/js/vendor/draggabilly", - 'edx-ui-toolkit': 'common_static/edx-ui-toolkit' + "draggabilly": "common_static/js/vendor/draggabilly" }, "moment": { exports: "moment" @@ -51,4 +18,5 @@ exports: "AFontGarde" } }); -}).call(this, RequireJS.requirejs, RequireJS.define); + +}).call(this, RequireJS.requirejs); 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 5d85be2551..b8cf3065b1 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 @@ -266,7 +266,6 @@ expect($('.closed-captions')).toHaveAttrs({ 'lang': 'de' }); - expect(link).toHaveAttr('aria-pressed', 'true'); }); it('when clicking on link with current language', function () { @@ -285,7 +284,6 @@ expect(state.storage.setItem) .not.toHaveBeenCalledWith('language', 'en'); expect($('.langs-list li.is-active').length).toBe(1); - expect(link).toHaveAttr('aria-pressed', 'true'); }); it('open the language toggle on hover', function () { @@ -415,7 +413,7 @@ }); it('show explanation message', function () { - expect($('.subtitles .subtitles-menu li')).toHaveText( + expect($('.subtitles-menu li')).toHaveText( 'Transcript will be displayed when you start playing the video.' ); }); diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js index f73b1f3c59..2a8b5e8b67 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js +++ b/common/lib/xmodule/xmodule/js/spec/video/video_speed_control_spec.js @@ -203,18 +203,16 @@ describe('onSpeedChange', function () { beforeEach(function () { state = jasmine.initializePlayer(); - $('li[data-speed="1.0"]').addClass('is-active').attr('aria-pressed', 'true'); + $('li[data-speed="1.0"]').addClass('is-active'); state.videoSpeedControl.setSpeed(0.75); }); it('set the new speed as active', function () { - expect($('li[data-speed="1.0"]')).not.toHaveClass('is-active'); - expect($('li[data-speed="1.0"] .speed-option').attr('aria-pressed')).not.toEqual('true'); - - expect($('li[data-speed="0.75"]')).toHaveClass('is-active'); - expect($('li[data-speed="0.75"] .speed-option').attr('aria-pressed')).toEqual('true'); - - expect($('.speeds .speed-button .value')).toHaveHtml('0.75x'); + expect($('.video-speeds li[data-speed="1.0"]')) + .not.toHaveClass('is-active'); + expect($('.video-speeds li[data-speed="0.75"]')) + .toHaveClass('is-active'); + expect($('.speeds .value')).toHaveHtml('0.75x'); }); }); diff --git a/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js b/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js index b54de6a24a..986d9ea7ff 100644 --- a/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js +++ b/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js @@ -1,10 +1,9 @@ (function (requirejs, require, define) { "use strict"; define( -'video/08_video_speed_control.js', [ - 'video/00_iterator.js', - 'edx-ui-toolkit/js/utils/html-utils' -], function (Iterator, HtmlUtils) { +'video/08_video_speed_control.js', +['video/00_iterator.js'], +function (Iterator) { /** * Video speed control module. * @exports video/08_video_speed_control.js @@ -96,37 +95,23 @@ define( * Creates any necessary DOM elements, attach them, and set their, * initial configuration. * @param {array} speeds List of speeds available for the player. - * @param {string} currentSpeed The current speed set to the player. */ - render: function (speeds, currentSpeed) { + render: function (speeds) { var speedsContainer = this.speedsContainer, reversedSpeeds = speeds.concat().reverse(), speedsList = $.map(reversedSpeeds, function (speed) { - return HtmlUtils.interpolateHtml( - HtmlUtils.joinHtml( - HtmlUtils.HTML('
  • '), - HtmlUtils.HTML(''), - HtmlUtils.HTML('
    • ') - ), - { - speed: speed - } - ).toString(); + return [ + '
  • ', + '', + '
    • ' + ].join(''); }); - HtmlUtils.setHtml( - speedsContainer, - HtmlUtils.HTML(speedsList) - ); + speedsContainer.html(speedsList.join('')); this.speedLinks = new Iterator(speedsContainer.find('.speed-option')); - HtmlUtils.prepend( - this.state.el.find('.secondary-controls'), - HtmlUtils.HTML(this.el) - ); - this.setActiveSpeed(currentSpeed); + this.state.el.find('.secondary-controls').prepend(this.el); }, /** @@ -231,38 +216,17 @@ define( if (speed !== this.currentSpeed || forceUpdate) { this.speedsContainer .find('li') - .siblings("li[data-speed='" + speed + "']"); + .removeClass('is-active') + .siblings("li[data-speed='" + speed + "']") + .addClass('is-active'); - this.speedButton.find('.value').text(speed + 'x'); + this.speedButton.find('.value').html(speed + 'x'); this.currentSpeed = speed; if (!silent) { this.el.trigger('speedchange', [speed, this.state.speed]); } } - - this.resetActiveSpeed(); - this.setActiveSpeed(speed); - }, - - resetActiveSpeed: function() { - var speedOptions = this.speedsContainer.find('li'); - - $(speedOptions).each(function(index, el) { - $(el).removeClass('is-active') - .find('.speed-option') - .attr('aria-pressed', 'false'); - }); - }, - - setActiveSpeed: function(speed) { - var speedOption = this.speedsContainer.find('li[data-speed="' + speed + '"]'); - - speedOption.addClass('is-active') - .find('.speed-option') - .attr('aria-pressed', 'true'); - - this.speedButton.attr('title', gettext('Video speed: ') + speed + 'x'); }, /** @@ -280,13 +244,10 @@ define( * @param {jquery Event} event */ clickLinkHandler: function (event) { - var el = $(event.currentTarget).parent(), - speed = $(el).data('speed'); - - this.resetActiveSpeed(); - this.setActiveSpeed(speed); + var speed = $(event.currentTarget).parent().data('speed'); + + this.closeMenu(); this.state.videoCommands.execute('speed', speed); - this.closeMenu(true); return false; }, 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 dd409e7a91..b99a1b1128 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 @@ -5,12 +5,11 @@ define('video/09_video_caption.js',[ 'video/00_sjson.js', 'video/00_async_process.js', - 'edx-ui-toolkit/js/utils/html-utils', 'draggabilly', 'modernizr', 'afontgarde', 'edxicons' - ], function (Sjson, AsyncProcess, HtmlUtils, Draggabilly) { + ], function (Sjson, AsyncProcess, Draggabilly) { /** * @desc VideoCaption module exports a function. @@ -81,53 +80,47 @@ renderElements: function () { var languages = this.state.config.transcriptLanguages; - var langHtml = HtmlUtils.joinHtml( - HtmlUtils.HTML('
    '), - HtmlUtils.HTML(''), - HtmlUtils.HTML(''), - HtmlUtils.HTML('
    '), - HtmlUtils.HTML('

    '), - HtmlUtils.HTML('', + '', + '
    ', + '

    ', + ''), - HtmlUtils.HTML('
    '), - HtmlUtils.HTML('
    )') - ); + '">', + '', + '', + '', + '', + '', + '
    ', + '' + ].join(''); - var subtitlesHtml = HtmlUtils.interpolateHtml( - HtmlUtils.joinHtml( - HtmlUtils.HTML('
    '), - HtmlUtils.HTML('

    '), - HtmlUtils.HTML('
      '), - HtmlUtils.HTML('
      ') - ), - { - courseId: this.state.id, - courseLang: this.state.lang - } - ); + var template = [ + '
      ', + '

      ', + '
        ', + '
        ' + ].join(''); this.loaded = false; - this.subtitlesEl = $(HtmlUtils.ensureHtml(subtitlesHtml).toString()); + this.subtitlesEl = $(template); this.subtitlesMenuEl = this.subtitlesEl.find('.subtitles-menu'); - this.container = $(HtmlUtils.ensureHtml(langHtml).toString()); + this.container = $(langTemplate); this.captionControlEl = this.container.find('.toggle-captions'); this.captionDisplayEl = this.state.el.find('.closed-captions'); this.transcriptControlEl = this.container.find('.toggle-transcript'); @@ -549,26 +542,15 @@ } } else { if (state.isTouch) { - HtmlUtils.setHtml( - self.subtitlesEl.find('.subtitles-menu'), - HtmlUtils.joinHtml( - HtmlUtils.HTML('
      1. '), - gettext('Transcript will be displayed when you start playing the video.'), - HtmlUtils.HTML('
        2. ') - ) - ); + self.subtitlesEl.find('.subtitles-menu') + .text(gettext('Transcript will be displayed when you start playing the video.')) // jshint ignore: line + .wrapInner('
      2. '); } else { self.renderCaption(start, captions); } self.hideCaptions(state.hide_captions, false); - HtmlUtils.append( - self.state.el.find('.video-wrapper').parent(), - HtmlUtils.HTML(self.subtitlesEl) - ); - HtmlUtils.append( - self.state.el.find('.secondary-controls'), - HtmlUtils.HTML(self.container) - ); + self.state.el.find('.video-wrapper').after(self.subtitlesEl); + self.state.el.find('.secondary-controls').append(self.container); self.bindHandlers(); } @@ -648,11 +630,9 @@ onResize: function () { this.subtitlesEl .find('.spacing').first() - .height(this.topSpacingHeight()); - - this.subtitlesEl + .height(this.topSpacingHeight()).end() .find('.spacing').last() - .height(this.bottomSpacingHeight()); + .height(this.bottomSpacingHeight()); this.scrollCaption(); this.setSubtitlesHeight(); @@ -669,9 +649,8 @@ renderLanguageMenu: function (languages) { var self = this, state = this.state, - $menu = $('
          '), - currentLang = state.getCurrentLanguage(), - $li, $link, linkHtml; + menu = $('
            '), + currentLang = state.getCurrentLanguage(); if (_.keys(languages).length < 2) { // Remove the menu toggle button @@ -682,29 +661,20 @@ this.showLanguageMenu = true; $.each(languages, function(code, label) { - $li = $('
          1. ', { 'data-lang-code': code }); - linkHtml = HtmlUtils.joinHtml( - HtmlUtils.HTML('') - ); - $link = $(linkHtml.toString()); + var li = $('
          2. '), + link = $(''); if (currentLang === code) { - $li.addClass('is-active'); - $link.attr('aria-pressed', 'true'); + li.addClass('is-active'); } - $li.append($link); - $menu.append($li); + li.append(link); + menu.append(li); }); - - HtmlUtils.append( - this.languageChooserEl, - HtmlUtils.HTML($menu) - ); - $menu.on('click', '.control-lang', function (e) { + this.languageChooserEl.append(menu); + + menu.on('click', '.control-lang', function (e) { var el = $(e.currentTarget).parent(), state = self.state, langCode = el.data('lang-code'); @@ -713,11 +683,7 @@ state.lang = langCode; el .addClass('is-active') .siblings('li') - .removeClass('is-active') - .find('.control-lang') - .attr('aria-pressed', 'false'); - - $(e.currentTarget).attr('aria-pressed', 'true'); + .removeClass('is-active'); state.el.trigger('language_menu:change', [langCode]); self.fetchCaption(); @@ -727,7 +693,6 @@ // update the transcript lang attribute self.subtitlesMenuEl.attr('lang', langCode); - self.closeLanguageMenu(e); } }); }, @@ -750,18 +715,13 @@ 'data-index': index, 'data-start': start[index], 'tabindex': 0 - }); - - $(liEl).text(text); + }).html(text); return liEl[0]; }; return AsyncProcess.array(captions, process).done(function (list) { - HtmlUtils.append( - container, - HtmlUtils.HTML(list) - ); + container.append(list); }); }, @@ -830,40 +790,17 @@ * out of the tabbing order. * */ - addPaddings: function() { - var topSpacer = HtmlUtils.interpolateHtml( - HtmlUtils.HTML([ - '
          3. ', - '', // jshint ignore:line - '
            4. ' - ].join('')), - { - id: this.state.id, - height: this.topSpacingHeight() - } - ); + addPaddings: function () { - var bottomSpacer = HtmlUtils.interpolateHtml( - HtmlUtils.HTML([ - '
          4. ', - '', // jshint ignore:line - '
            5. ' - ].join('')), - { - id: this.state.id, - height: this.bottomSpacingHeight() - } + this.subtitlesMenuEl + .prepend( + $('
          5. ') // jshint ignore: line + .height(this.topSpacingHeight()) + ) + .append( + $('
          6. ') // jshint ignore: line + .height(this.bottomSpacingHeight()) ); - - HtmlUtils.prepend( - this.subtitlesMenuEl, - topSpacer - ); - - HtmlUtils.append( - this.subtitlesMenuEl, - bottomSpacer - ); }, /** diff --git a/lms/static/karma_lms_coffee.conf.js b/lms/static/karma_lms_coffee.conf.js index aab5894928..6541c2e498 100644 --- a/lms/static/karma_lms_coffee.conf.js +++ b/lms/static/karma_lms_coffee.conf.js @@ -3,6 +3,7 @@ /* jshint node: true */ /*jshint -W079 */ + 'use strict'; var path = require('path'); var configModule = require(path.join(__dirname, '../../common/static/common/js/karma.common.conf.js')); @@ -15,27 +16,23 @@ var options = { // Avoid adding files to this list. Use RequireJS. libraryFilesToInclude: [ {pattern: 'xmodule_js/common_static/js/vendor/requirejs/require.js', included: true}, + {pattern: 'lms/js/spec/main_requirejs_coffee.js', included: true}, + {pattern: 'js/RequireJS-namespace-undefine.js', included: true}, - - {pattern: 'common/js/vendor/jquery.js', included: true}, - {pattern: 'common/js/vendor/jquery-migrate.js', included: true}, - {pattern: 'xmodule_js/common_static/js/vendor/jquery.event.drag-2.2.js', included: true}, - {pattern: 'xmodule_js/common_static/js/vendor/slick.core.js', included: true}, - {pattern: 'xmodule_js/common_static/js/vendor/slick.grid.js', included: true}, - - {pattern: 'xmodule_js/common_static/js/vendor/requirejs/require.js', included: true}, - {pattern: 'xmodule_js/common_static/coffee/src/ajax_prefix.js', included: true}, - {pattern: 'common/js/vendor/jquery.js', included: true}, - {pattern: 'common/js/vendor/jquery-migrate.js', included: true}, {pattern: 'common/js/vendor/underscore.js', included: true}, + {pattern: 'edx-ui-toolkit/js/utils/global-loader.js', included: true}, {pattern: 'xmodule_js/common_static/js/src/logger.js', included: true}, {pattern: 'xmodule_js/common_static/js/test/i18n.js', included: true}, {pattern: 'xmodule_js/common_static/js/vendor/CodeMirror/codemirror.js', included: true}, + {pattern: 'common/js/vendor/jquery.js', included: true}, + {pattern: 'common/js/vendor/jquery-migrate.js', included: true}, {pattern: 'xmodule_js/common_static/js/vendor/jquery.cookie.js', included: true}, {pattern: 'xmodule_js/common_static/js/vendor/flot/jquery.flot.js', included: true}, {pattern: 'xmodule_js/common_static/coffee/src/jquery.immediateDescendents.js', included: true}, {pattern: 'xmodule_js/common_static/js/vendor/jquery-ui.min.js', included: true}, + {pattern: 'xmodule_js/common_static/js/vendor/moment.min.js', included: true}, + {pattern: 'xmodule_js/common_static/js/vendor/moment-with-locales.min.js', included: true}, {pattern: 'xmodule_js/common_static/js/vendor/URI.min.js', included: true}, {pattern: 'xmodule_js/common_static/js/xblock/*.js', included: true}, @@ -45,9 +42,7 @@ var options = { {pattern: 'xmodule_js/src/xmodule.js', included: true}, {pattern: 'xmodule_js/common_static/js/vendor/jasmine-imagediff.js', included: true}, - {pattern: 'common/js/spec_helpers/jasmine-extensions.js', included: true}, - - {pattern: 'lms/js/spec/main_requirejs_coffee.js', included: true} + {pattern: 'common/js/spec_helpers/jasmine-extensions.js', included: true} ], libraryFiles: [ diff --git a/lms/static/lms/js/spec/main_requirejs_coffee.js b/lms/static/lms/js/spec/main_requirejs_coffee.js index 73b5c52f44..541d4f763d 100644 --- a/lms/static/lms/js/spec/main_requirejs_coffee.js +++ b/lms/static/lms/js/spec/main_requirejs_coffee.js @@ -1,36 +1,5 @@ -(function(requirejs, define) { +(function(requirejs) { 'use strict'; - // We do not wish to bundle common libraries (that may also be used by non-RequireJS code on the page - // into the optimized files. Therefore load these libraries through script tags and explicitly define them. - // Note that when the optimizer executes this code, window will not be defined. - if (window) { - var defineDependency = function (globalName, name, noShim) { - var getGlobalValue = function(name) { - var globalNamePath = name.split('.'), - result = window, - i; - for (i = 0; i < globalNamePath.length; i++) { - result = result[globalNamePath[i]]; - } - return result; - }, - globalValue = getGlobalValue(globalName); - if (globalValue) { - if (noShim) { - define(name, {}); - } - else { - define(name, [], function() { return globalValue; }); - } - } - else { - console.error("Expected library to be included on page, but not found on window object: " + name); - } - }; - defineDependency("jQuery", "jquery"); - defineDependency("jQuery", "jquery-migrate"); - defineDependency("_", "underscore"); - } requirejs.config({ baseUrl: '/base/', paths: { @@ -38,8 +7,7 @@ "modernizr": "edx-pattern-library/js/modernizr-custom", "afontgarde": "edx-pattern-library/js/afontgarde", "edxicons": "edx-pattern-library/js/edx-icons", - "draggabilly": "xmodule_js/common_static/js/vendor/draggabilly", - 'edx-ui-toolkit': 'edx-ui-toolkit' + "draggabilly": "xmodule_js/common_static/js/vendor/draggabilly" }, "moment": { exports: "moment" @@ -52,4 +20,4 @@ } }); -}).call(this, RequireJS.requirejs, RequireJS.define); +}).call(this, requirejs, define); // jshint ignore:line