From 68587ade399f0216b290fe21756f7d3f19993c58 Mon Sep 17 00:00:00 2001 From: alisan617 Date: Tue, 28 Jun 2016 19:23:31 -0400 Subject: [PATCH] remove icon-fallback-img spans and safe commit templating --- .../xmodule/xmodule/css/video/display.scss | 75 ++----------------- .../js/src/video/04_video_full_screen.js | 21 ++---- .../js/src/video/05_video_quality_control.js | 40 +++++----- .../js/src/video/07_video_volume_control.js | 42 ++++++----- .../js/src/video/08_video_speed_control.js | 5 +- .../js/src/video/09_play_pause_control.js | 15 +--- .../js/src/video/09_play_skip_control.js | 11 +-- .../xmodule/js/src/video/09_skip_control.js | 7 +- .../xmodule/js/src/video/09_video_caption.js | 42 +++-------- 9 files changed, 70 insertions(+), 188 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 060842d788..a826ea365a 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -10,56 +10,6 @@ // -------- // the html target is necessary for xblocks and xmodules, but works across the board -.icon-fallback-img { - - .fa-play { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/play.svg') center center no-repeat; - } - - .fa-pause { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/pause.svg') center center no-repeat; - } - - .fa-step-forward { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/fast-forward.svg') center center no-repeat; - } - - .fa-arrows-alt { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/fullscreen.svg') center center no-repeat; - } - - .fa-caret-right { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/caret-right.svg') center center no-repeat; - } - - .fa-caret-left { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/caret-left.svg') center center no-repeat; - } - - .fa-caret-up { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/caret-up.svg') center center no-repeat; - } - - .fa-compress { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/exit-fullscreen.svg') center center no-repeat; - } - - .fa-quote-left { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/quote-left.svg') center center no-repeat; - } - - .fa-volume-up { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/volume-up.svg') center center no-repeat; - } - - .fa-volume-down { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/volume-down.svg') center center no-repeat; - } - - .fa-volume-off { - background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/volume-off.svg') center center no-repeat; - } -} & { margin-bottom: ($baseline*1.5); @@ -366,18 +316,13 @@ .control { @extend %video-control; - .icon-fallback-img { + .icon { + width: 1em; - .icon { - // if the icon font doesn't render, we need to provide dimensions for the svg's - width: 1em; - height: 1em; - - &.icon-hd { - // except when it's text, like with HD - // otherwise it's shifted to the right because "HD" is wider than 1em - width: auto; - } + &.icon-hd { + // except when it's text, like with HD + // otherwise it's shifted to the right because "HD" is wider than 1em + width: auto; } } } @@ -555,14 +500,6 @@ .lang, .grouped-controls { display: inline-block; - - .control { - - .icon-fallback-img { - @include float(left); - @include transform-origin(center center); - } - } } .speeds { diff --git a/common/lib/xmodule/xmodule/js/src/video/04_video_full_screen.js b/common/lib/xmodule/xmodule/js/src/video/04_video_full_screen.js index f1ef26f531..8b48f1160d 100644 --- a/common/lib/xmodule/xmodule/js/src/video/04_video_full_screen.js +++ b/common/lib/xmodule/xmodule/js/src/video/04_video_full_screen.js @@ -1,16 +1,11 @@ (function (define) { 'use strict'; -define('video/04_video_full_screen.js', [], function () { +define('video/04_video_full_screen.js', ['edx-ui-toolkit/js/utils/html-utils'], function (HtmlUtils) { var template = [ '' ].join(''); @@ -73,7 +68,7 @@ define('video/04_video_full_screen.js', [], function () { state.videoFullScreen.fullScreenEl = $(template); state.videoFullScreen.sliderEl = state.el.find('.slider'); state.videoFullScreen.fullScreenState = false; - state.el.find('.secondary-controls').append(state.videoFullScreen.fullScreenEl); + HtmlUtils.append(state.el.find('.secondary-controls'), HtmlUtils.HTML(state.videoFullScreen.fullScreenEl)); state.videoFullScreen.updateControlsHeight(); } @@ -140,11 +135,10 @@ define('video/04_video_full_screen.js', [], function () { fullScreenClassNameEl.removeClass('video-fullscreen'); $(window).scrollTop(this.scrollPos); this.videoFullScreen.fullScreenEl + .attr('title', gettext('Fill browser')) .find('.icon') .removeClass('fa-compress') - .addClass('fa-arrows-alt') - .find('.control-text') - .text(gettext('Fill browser')); + .addClass('fa-arrows-alt'); this.el.trigger('fullscreen', [this.isFullScreen]); @@ -163,11 +157,10 @@ define('video/04_video_full_screen.js', [], function () { this.videoFullScreen.fullScreenState = this.isFullScreen = true; fullScreenClassNameEl.addClass('video-fullscreen'); this.videoFullScreen.fullScreenEl + .attr('title', gettext('Exit full browser')) .find('.icon') .removeClass('fa-arrows-alt') - .addClass('fa-compress') - .find('.control-text') - .text(gettext('Exit full browser')); + .addClass('fa-compress'); this.el.trigger('fullscreen', [this.isFullScreen]); diff --git a/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js b/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js index 5d880ef7bc..074cded354 100644 --- a/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js +++ b/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js @@ -4,27 +4,27 @@ 'use strict'; define( 'video/05_video_quality_control.js', -[], -function () { - var template = [ - '' - ].join(''); + '' + ].join('')), + { + highDefinition: gettext('High Definition'), + off: gettext('off') + } + ); // VideoQualityControl() function - what this module "exports". return function (state) { @@ -81,9 +81,9 @@ function () { // 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) { - var element = state.videoQualityControl.el = $(template); + var element = state.videoQualityControl.el = $(template.toString()); state.videoQualityControl.quality = 'large'; - state.el.find('.secondary-controls').append(element); + HtmlUtils.append(state.el.find('.secondary-controls'), HtmlUtils.HTML(element)); } // function _bindHandlers(state) diff --git a/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js b/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js index cd77c37d9d..a1932138df 100644 --- a/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js +++ b/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js @@ -1,9 +1,9 @@ -(function(define) { +(function (define) { 'use strict'; // VideoVolumeControl module. define( -'video/07_video_volume_control.js', [], -function() { +'video/07_video_volume_control.js', ['edx-ui-toolkit/js/utils/html-utils'], +function (HtmlUtils) { /** * Video volume control module. * @exports video/07_video_volume_control.js @@ -37,24 +37,20 @@ function() { /** Step to increase/decrease volume level via keyboard. */ step: 20, - template: [ + videoVolumeControlHtml: HtmlUtils.interpolateHtml( + HtmlUtils.HTML([ '
', '

', - gettext('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.'), // jshint ignore: line + '{volumeInstructions}', '

', '', '', '
', - '' - ].join(''), + ''].join('')), + { + volumeInstructions: gettext('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.'), // jshint ignore: line + adjustVideoVolume: gettext('Adjust video volume'), + volumeText: gettext('Volume') + } + ), destroy: function () { this.volumeSlider.slider('destroy'); @@ -103,7 +106,7 @@ function() { return false; } - this.el = $(this.template); + this.el = $(this.videoVolumeControlHtml.toString()); // Youtube iframe react on key buttons and has his own handlers. // So, we disallow focusing on iframe. this.state.el.find('iframe').attr('tabindex', -1); @@ -128,8 +131,7 @@ function() { render: function() { var container = this.el.find('.volume-slider'); - container - .append('
'); + HtmlUtils.append(container, HtmlUtils.HTML('
')); this.volumeSlider = container.slider({ orientation: 'vertical', @@ -453,7 +455,7 @@ function() { 'aria-live': 'polite' }); - this.button.after(this.liveRegion); + this.button.after(HtmlUtils.HTML(this.liveRegion).toString()); }, /** 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 ace6f39114..0dc653c122 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 @@ -38,11 +38,8 @@ define( 'title="', gettext('Adjust video speed'), '" aria-describedby="speed-instructions">', - '', + '', '', - '', - gettext('Speed'), - '', '', '