Skip to content

E
edx-platform
Commit 68587ade by alisan617
Options

remove icon-fallback-img spans and safe commit templating

parent 628ec509
Showing with 70 additions and 188 deletions
common/lib/xmodule/xmodule/css/video/display.scss
...@@ -10,56 +10,6 @@ ...@@ -10,56 +10,6 @@
// -------- // --------
// the html target is necessary for xblocks and xmodules, but works across the board // 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); margin-bottom: ($baseline*1.5);
...@@ -366,18 +316,13 @@ ...@@ -366,18 +316,13 @@
.control { .control {
@extend %video-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 { &.icon-hd {
// except when it's text, like with HD // except when it's text, like with HD
// otherwise it's shifted to the right because "HD" is wider than 1em // otherwise it's shifted to the right because "HD" is wider than 1em
width: auto; width: auto;
}
} }
} }
} }
...@@ -555,14 +500,6 @@ ...@@ -555,14 +500,6 @@
.lang, .lang,
.grouped-controls { .grouped-controls {
display: inline-block; display: inline-block;
.control {
.icon-fallback-img {
@include float(left);
@include transform-origin(center center);
}
}
} }
.speeds { .speeds {
......
common/lib/xmodule/xmodule/js/src/video/04_video_full_screen.js
(function (define) { (function (define) {
'use strict'; '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 = [ var template = [
'<button class="control add-fullscreen" aria-disabled="false" title="', '<button class="control add-fullscreen" aria-disabled="false" title="',
gettext('Fill browser'), gettext('Fill browser'),
'">', '">',
'<span class="icon-fallback-img">', '<span class="icon fa fa-arrows-alt" aria-hidden="true"></span>',
'<span class="icon fa fa-arrows-alt" aria-hidden="true"></span>',
'<span class="sr control-text">',
gettext('Fill browser'),
'</span>',
'</span>',
'</button>' '</button>'
].join(''); ].join('');
...@@ -73,7 +68,7 @@ define('video/04_video_full_screen.js', [], function () { ...@@ -73,7 +68,7 @@ define('video/04_video_full_screen.js', [], function () {
state.videoFullScreen.fullScreenEl = $(template); state.videoFullScreen.fullScreenEl = $(template);
state.videoFullScreen.sliderEl = state.el.find('.slider'); state.videoFullScreen.sliderEl = state.el.find('.slider');
state.videoFullScreen.fullScreenState = false; 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(); state.videoFullScreen.updateControlsHeight();
} }
...@@ -140,11 +135,10 @@ define('video/04_video_full_screen.js', [], function () { ...@@ -140,11 +135,10 @@ define('video/04_video_full_screen.js', [], function () {
fullScreenClassNameEl.removeClass('video-fullscreen'); fullScreenClassNameEl.removeClass('video-fullscreen');
$(window).scrollTop(this.scrollPos); $(window).scrollTop(this.scrollPos);
this.videoFullScreen.fullScreenEl this.videoFullScreen.fullScreenEl
.attr('title', gettext('Fill browser'))
.find('.icon') .find('.icon')
.removeClass('fa-compress') .removeClass('fa-compress')
.addClass('fa-arrows-alt') .addClass('fa-arrows-alt');
.find('.control-text')
.text(gettext('Fill browser'));
this.el.trigger('fullscreen', [this.isFullScreen]); this.el.trigger('fullscreen', [this.isFullScreen]);
...@@ -163,11 +157,10 @@ define('video/04_video_full_screen.js', [], function () { ...@@ -163,11 +157,10 @@ define('video/04_video_full_screen.js', [], function () {
this.videoFullScreen.fullScreenState = this.isFullScreen = true; this.videoFullScreen.fullScreenState = this.isFullScreen = true;
fullScreenClassNameEl.addClass('video-fullscreen'); fullScreenClassNameEl.addClass('video-fullscreen');
this.videoFullScreen.fullScreenEl this.videoFullScreen.fullScreenEl
.attr('title', gettext('Exit full browser'))
.find('.icon') .find('.icon')
.removeClass('fa-arrows-alt') .removeClass('fa-arrows-alt')
.addClass('fa-compress') .addClass('fa-compress');
.find('.control-text')
.text(gettext('Exit full browser'));
this.el.trigger('fullscreen', [this.isFullScreen]); this.el.trigger('fullscreen', [this.isFullScreen]);
......
common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js
...@@ -4,27 +4,27 @@ ...@@ -4,27 +4,27 @@
'use strict'; 'use strict';
define( define(
'video/05_video_quality_control.js', 'video/05_video_quality_control.js',
[], ['edx-ui-toolkit/js/utils/html-utils'],
function () { function (HtmlUtils) {
var template = [ var template = HtmlUtils.interpolateHtml(
'<button class="control quality-control is-hidden" aria-disabled="false" title="', HtmlUtils.HTML([
gettext('High Definition'), '<button class="control quality-control is-hidden" aria-disabled="false" title="',
'">', '{highDefinition}',
'<span class="icon-fallback-img">', '">',
'<span class="icon icon-hd" aria-hidden="true">HD</span>', // "HD" is treated as a proper noun '<span class="icon icon-hd" aria-hidden="true">HD</span>',
// Translator note:
// HD stands for high definition
'<span class="sr text-translation">', '<span class="sr text-translation">',
gettext('High Definition'), '{highDefinition}',
'</span>&nbsp;', '</span>&nbsp;',
'<span class="text control-text">', '<span class="sr control-text">',
// Translator note: '{off}',
// Values are 'off' or 'on' depending on the state of the HD control
gettext('off'),
'</span>', '</span>',
'</span>', '</button>'
'</button>' ].join('')),
].join(''); {
highDefinition: gettext('High Definition'),
off: gettext('off')
}
);
// VideoQualityControl() function - what this module "exports". // VideoQualityControl() function - what this module "exports".
return function (state) { return function (state) {
...@@ -81,9 +81,9 @@ function () { ...@@ -81,9 +81,9 @@ function () {
// make the created DOM elements available via the 'state' object. Much easier to work this // 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. // way - you don't have to do repeated jQuery element selects.
function _renderElements(state) { function _renderElements(state) {
var element = state.videoQualityControl.el = $(template); var element = state.videoQualityControl.el = $(template.toString());
state.videoQualityControl.quality = 'large'; state.videoQualityControl.quality = 'large';
state.el.find('.secondary-controls').append(element); HtmlUtils.append(state.el.find('.secondary-controls'), HtmlUtils.HTML(element));
} }
// function _bindHandlers(state) // function _bindHandlers(state)
......
common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js
(function(define) { (function (define) {
'use strict'; 'use strict';
// VideoVolumeControl module. // VideoVolumeControl module.
define( define(
'video/07_video_volume_control.js', [], 'video/07_video_volume_control.js', ['edx-ui-toolkit/js/utils/html-utils'],
function() { function (HtmlUtils) {
/** /**
* Video volume control module. * Video volume control module.
* @exports video/07_video_volume_control.js * @exports video/07_video_volume_control.js
...@@ -37,24 +37,20 @@ function() { ...@@ -37,24 +37,20 @@ function() {
/** Step to increase/decrease volume level via keyboard. */ /** Step to increase/decrease volume level via keyboard. */
step: 20, step: 20,
template: [ videoVolumeControlHtml: HtmlUtils.interpolateHtml(
HtmlUtils.HTML([
'<div class="volume" role="application">', '<div class="volume" role="application">',
'<p class="sr instructions" id="volume-instructions">', '<p class="sr instructions" id="volume-instructions">',
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}',
'</p>', '</p>',
'<button class="control" aria-disabled="false" aria-describedby="volume-instructions"', '<button class="control" aria-disabled="false" aria-describedby="volume-instructions"',
'" aria-expanded="false" title="', '" aria-expanded="false" title="',
gettext('Adjust video volume'), '{adjustVideoVolume}',
'">', '">',
'<span class="icon-fallback-img">', '<span class="icon fa fa-volume-up" aria-hidden="true"></span>',
'<span class="icon fa fa-volume-up" aria-hidden="true"></span>',
'<span class="sr control-text">',
gettext('Volume'),
'</span>',
'</span>',
'</button>', '</button>',
'<div class="volume-slider-container" aria-hidden="true" title="', '<div class="volume-slider-container" aria-hidden="true" title="',
gettext('Adjust video volume'), '{adjustVideoVolume}',
'">', '">',
'<div class="volume-slider" ', '<div class="volume-slider" ',
'role="slider"', 'role="slider"',
...@@ -62,10 +58,17 @@ function() { ...@@ -62,10 +58,17 @@ function() {
'aria-valuemin="0" ', 'aria-valuemin="0" ',
'aria-valuemax="100" ', 'aria-valuemax="100" ',
'aria-valuenow="" ', 'aria-valuenow="" ',
'aria-label="' + gettext('Adjust video volume') + '"></div>', 'aria-label="',
'{volumeText}',
'"></div>',
'</div>', '</div>',
'</div>' '</div>'].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 () { destroy: function () {
this.volumeSlider.slider('destroy'); this.volumeSlider.slider('destroy');
...@@ -103,7 +106,7 @@ function() { ...@@ -103,7 +106,7 @@ function() {
return false; return false;
} }
this.el = $(this.template); this.el = $(this.videoVolumeControlHtml.toString());
// Youtube iframe react on key buttons and has his own handlers. // Youtube iframe react on key buttons and has his own handlers.
// So, we disallow focusing on iframe. // So, we disallow focusing on iframe.
this.state.el.find('iframe').attr('tabindex', -1); this.state.el.find('iframe').attr('tabindex', -1);
...@@ -128,8 +131,7 @@ function() { ...@@ -128,8 +131,7 @@ function() {
render: function() { render: function() {
var container = this.el.find('.volume-slider'); var container = this.el.find('.volume-slider');
container HtmlUtils.append(container, HtmlUtils.HTML('<div class="ui-slider-handle volume-handle"></div>'));
.append('<div class="ui-slider-handle volume-handle"></div>');
this.volumeSlider = container.slider({ this.volumeSlider = container.slider({
orientation: 'vertical', orientation: 'vertical',
...@@ -453,7 +455,7 @@ function() { ...@@ -453,7 +455,7 @@ function() {
'aria-live': 'polite' 'aria-live': 'polite'
}); });
this.button.after(this.liveRegion); this.button.after(HtmlUtils.HTML(this.liveRegion).toString());
}, },
/** /**
......
common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
...@@ -38,11 +38,8 @@ define( ...@@ -38,11 +38,8 @@ define(
'title="', 'title="',
gettext('Adjust video speed'), gettext('Adjust video speed'),
'" aria-describedby="speed-instructions">', '" aria-describedby="speed-instructions">',
'<span class="icon-fallback-img">', '<span>',
'<span class="icon fa fa-caret-right" aria-hidden="true"></span>', '<span class="icon fa fa-caret-right" aria-hidden="true"></span>',
'<span class="sr control-text">',
gettext('Speed'),
'</span>',
'</span>', '</span>',
'<span class="label" aria-hidden="true">', '<span class="label" aria-hidden="true">',
gettext('Speed'), gettext('Speed'),
......
common/lib/xmodule/xmodule/js/src/video/09_play_pause_control.js
...@@ -28,12 +28,7 @@ define('video/09_play_pause_control.js', [], function() { ...@@ -28,12 +28,7 @@ define('video/09_play_pause_control.js', [], function() {
'<button class="control video_control play" aria-disabled="false" title="', '<button class="control video_control play" aria-disabled="false" title="',
gettext('Play'), gettext('Play'),
'">', '">',
'<span class="icon-fallback-img">', '<span class="icon fa fa-play" aria-hidden="true"></span>',
'<span class="icon fa fa-play" aria-hidden="true"></span>',
'<span class="sr control-text">',
gettext('Play'),
'</span>',
'</span>',
'</button>' '</button>'
].join(''), ].join(''),
...@@ -83,10 +78,6 @@ define('video/09_play_pause_control.js', [], function() { ...@@ -83,10 +78,6 @@ define('video/09_play_pause_control.js', [], function() {
.find('.icon') .find('.icon')
.removeClass('fa-play') .removeClass('fa-play')
.addClass('fa-pause'); .addClass('fa-pause');
this.el
.find('.control-text')
.text(gettext('Pause'));
}, },
pause: function () { pause: function () {
...@@ -97,10 +88,6 @@ define('video/09_play_pause_control.js', [], function() { ...@@ -97,10 +88,6 @@ define('video/09_play_pause_control.js', [], function() {
.find('.icon') .find('.icon')
.removeClass('fa-pause') .removeClass('fa-pause')
.addClass('fa-play'); .addClass('fa-play');
this.el
.find('.control-text')
.text(gettext('Play'));
} }
}; };
......
common/lib/xmodule/xmodule/js/src/video/09_play_skip_control.js
...@@ -28,12 +28,7 @@ define('video/09_play_skip_control.js', [], function() { ...@@ -28,12 +28,7 @@ define('video/09_play_skip_control.js', [], function() {
'<button class="control video_control play play-skip-control" title="', '<button class="control video_control play play-skip-control" title="',
gettext('Play'), gettext('Play'),
'">', '">',
'<span class="icon-fallback-img">', '<span class="icon fa fa-play" aria-hidden="true"></span>',
'<span class="icon fa fa-play" aria-hidden="true"></span>',
'<span class="text control-text">',
gettext('Play'),
'</span>',
'</span>',
'</button>' '</button>'
].join(''), ].join(''),
...@@ -83,9 +78,7 @@ define('video/09_play_skip_control.js', [], function() { ...@@ -83,9 +78,7 @@ define('video/09_play_skip_control.js', [], function() {
.attr('title', gettext('Skip')) .attr('title', gettext('Skip'))
.find('.icon') .find('.icon')
.removeClass('fa-play') .removeClass('fa-play')
.addClass('fa-step-forward') .addClass('fa-step-forward');
.find('.control-text')
.text(gettext('Skip'));
// Disable possibility to pause the video. // Disable possibility to pause the video.
this.state.el.find('video').off('click'); this.state.el.find('video').off('click');
} }
......
common/lib/xmodule/xmodule/js/src/video/09_skip_control.js
...@@ -31,12 +31,7 @@ function() { ...@@ -31,12 +31,7 @@ function() {
'<button class="control video_control skip skip-control" aria-disabled="false" title="', '<button class="control video_control skip skip-control" aria-disabled="false" title="',
gettext('Do not show again'), gettext('Do not show again'),
'">', '">',
'<span class="icon-fallback-img">', '<span class="icon fa fa-step-forward" aria-hidden="true"></span>',
'<span class="icon fa fa-step-forward" aria-hidden="true"></span>',
'<span class="text control-text">',
gettext('Do not show again'),
'</span>',
'</span>',
'</button>' '</button>'
].join(''), ].join(''),
......
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
...@@ -6,10 +6,7 @@ ...@@ -6,10 +6,7 @@
'video/00_sjson.js', 'video/00_sjson.js',
'video/00_async_process.js', 'video/00_async_process.js',
'edx-ui-toolkit/js/utils/html-utils', 'edx-ui-toolkit/js/utils/html-utils',
'draggabilly', 'draggabilly'
'modernizr',
'afontgarde',
'edxicons'
], function (Sjson, AsyncProcess, HtmlUtils, Draggabilly) { ], function (Sjson, AsyncProcess, HtmlUtils, Draggabilly) {
/** /**
...@@ -83,29 +80,20 @@ ...@@ -83,29 +80,20 @@
var langHtml = HtmlUtils.interpolateHtml( var langHtml = HtmlUtils.interpolateHtml(
HtmlUtils.HTML( HtmlUtils.HTML(
[ [
'<div class="grouped-controls">', '<div class="grouped-controls">',
'<button class="control toggle-captions" aria-disabled="false">', '<button class="control toggle-captions" aria-disabled="false">',
'<span class="icon-fallback-img">', '<span class="icon fa fa-cc" aria-hidden="true"></span>',
'<span class="icon fa fa-cc" aria-hidden="true"></span>',
'<span class="sr control-text"></span>',
'</span>',
'</button>', '</button>',
'<button class="control toggle-transcript" aria-disabled="false">', '<button class="control toggle-transcript" aria-disabled="false">',
'<span class="icon-fallback-img">', '<span class="icon fa fa-quote-left" aria-hidden="true"></span>',
'<span class="icon fa fa-quote-left" aria-hidden="true"></span>',
'<span class="sr control-text"></span>',
'</span>',
'</button>', '</button>',
'<div class="lang menu-container" role="application">', '<div class="lang menu-container" role="application">',
'<p class="sr instructions" id="lang-instructions"></p>', '<p class="sr instructions" id="lang-instructions"></p>',
'<button class="control language-menu" aria-disabled="false"', '<button class="control language-menu" aria-disabled="false"',
'aria-describedby="lang-instructions" ', 'aria-describedby="lang-instructions" ',
'title="{langTitle}">', 'title="{langTitle}">',
'<span class="icon-fallback-img">', '<span class="icon fa fa-caret-left" aria-hidden="true"></span>',
'<span class="icon fa fa-caret-left" aria-hidden="true"></span>',
'<span class="sr control-text"></span>',
'</span>',
'</button>', '</button>',
'</div>', '</div>',
'</div>' '</div>'
...@@ -759,7 +747,7 @@ ...@@ -759,7 +747,7 @@
'tabindex': 0 'tabindex': 0
}); });
$(liEl).html(text); HtmlUtils.setHtml($(liEl), HtmlUtils.HTML(text.toString()));
return liEl[0]; return liEl[0];
}; };
...@@ -822,8 +810,6 @@ ...@@ -822,8 +810,6 @@
self.container.find('.menu-container .instructions') self.container.find('.menu-container .instructions')
.text(gettext('Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // jshint ignore:line .text(gettext('Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // jshint ignore:line
self.container.find('.menu-container .control .control-text')
.text(gettext('Open language menu.'));
}; };
this.rendered = false; this.rendered = false;
...@@ -1199,9 +1185,7 @@ ...@@ -1199,9 +1185,7 @@
this.captionControlEl this.captionControlEl
.addClass('is-active') .addClass('is-active')
.attr('title', gettext('Hide closed captions')) .attr('title', gettext('Hide closed captions'));
.find('.control-text')
.text(gettext('Hide closed captions'));
if (this.subtitlesEl.find('.current').text()) { if (this.subtitlesEl.find('.current').text()) {
this.captionDisplayEl this.captionDisplayEl
...@@ -1223,9 +1207,7 @@ ...@@ -1223,9 +1207,7 @@
this.captionControlEl this.captionControlEl
.removeClass('is-active') .removeClass('is-active')
.attr('title', gettext('Turn on closed captioning')) .attr('title', gettext('Turn on closed captioning'));
.find('.control-text')
.text(gettext('Turn on closed captioning'));
this.state.el.trigger('captions:hide'); this.state.el.trigger('captions:hide');
}, },
...@@ -1280,9 +1262,7 @@ ...@@ -1280,9 +1262,7 @@
transcriptControlEl transcriptControlEl
.removeClass('is-active') .removeClass('is-active')
.attr('title', gettext(text)) .attr('title', gettext(text));
.find('.control-text')
.text(gettext(text));
} else { } else {
state.captionsHidden = false; state.captionsHidden = false;
state.el.removeClass('closed'); state.el.removeClass('closed');
...@@ -1294,9 +1274,7 @@ ...@@ -1294,9 +1274,7 @@
transcriptControlEl transcriptControlEl
.addClass('is-active') .addClass('is-active')
.attr('title', gettext(text)) .attr('title', gettext(text));
.find('.control-text')
.text(gettext(text));
} }
if (state.resizer) { if (state.resizer) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment