Skip to content

Commit 32be4ea

Browse files
terrillterrill
committed
Make "svg" the default iconType
1 parent 3fc6c10 commit 32be4ea

File tree

10 files changed

+800
-161
lines changed

10 files changed

+800
-161
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ The following attributes are supported on both the `<audio>` and `<video>` eleme
197197
valuable bandwidth, so preload="metadata" would be a better option.
198198
- **width** - width of the media player in pixels. For video, this value should reflect the target width of the media itself. If not provided will default to 480.
199199
- **data-root-path** - define path to root directory of Able Player; generally not required but may be needed in rare instances where Able Player is unable to identify its current path on the web server
200-
- **data-icon-type** - optional; "svg", "font" or "image"; "font" is the default with automatic fallback to image if browsers don't support icon fonts. Should generally leave as is unless testing the fallback.
200+
- **data-icon-type** - optional; "svg", "font" or "image"; "svg" is the default with automatic fallback to "font" unless either (a) the browser doesn't support icon fonts or (b) the user has a custom style sheet that may impact the display of icon fonts; in either case falls back to images. Should generally leave as is unless testing the fallback.
201201
- **data-speed-icons** - optional; "arrows" (default) or "animals". The latter will substitute a turtle icon for *slower* and a rabbit icon for *faster*.
202202
- **data-start-time** - optional; time at which you want the audio to start playing (in seconds)
203203
- **data-volume** - optional; set the default volume (0 to 10; default is 7 to avoid overpowering screen reader audio)

‎build/ableplayer.dist.js‎

Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -271,9 +271,10 @@
271271
}
272272

273273
// Icon type
274-
// By default, AblePlayer uses scalable icomoon fonts for the player controls
275-
// and falls back to images if the user has a custom style sheet that overrides font-family
276-
// use data-icon-type to force controls to use either 'font', 'images' or 'svg'
274+
// By default, AblePlayer 3.0.33 and higher uses SVG icons for the player controls
275+
// Fallback for browsers that don't support SVG is scalable icomoon fonts
276+
// Ultimate fallback is images, if the user has a custom style sheet that overrides font-family
277+
// Use data-icon-type to force controls to use either 'svg', 'font', or 'images'
277278
this.iconType = 'font';
278279
this.forceIconType = false;
279280
if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") {
@@ -842,10 +843,10 @@
842843
};
843844

844845
AblePlayer.prototype.setIconType = function() {
845-
// returns either "font" or "image"
846-
// create a temporary play span and check to see if button has font-family == "able" (the default)
847-
// if it doesn't, user has a custom style sheet and icon fonts will not display properly
848-
// use images as fallback
846+
847+
// returns either "svg", "font" or "image" (in descending order of preference)
848+
// Test for support of each type. If not supported, test the next type.
849+
// last resort is image icons
849850

850851
var $tempButton, $testButton, controllerFont;
851852

@@ -854,59 +855,72 @@
854855
return false;
855856
}
856857

857-
if (window.getComputedStyle) {
858+
// test for SVG support
859+
// Test this method widely; failed as expected on IE8 and below
860+
// https://stackoverflow.com/a/27568129/744281
861+
if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) {
862+
// browser supports SVG
858863

859-
// webkit doesn't return calculated styles unless element has been added to the DOM
860-
// and is visible (note: visibly clipped is considered "visible")
861-
// use playpauseButton for font-family test if it exists; otherwise must create a new temp button
862-
if ($('span.icon-play').length) {
863-
$testButton = $('span.icon-play');
864-
}
865-
else {
866-
$tempButton = $('<span>',{
867-
'class': 'icon-play able-clipped'
868-
});
869-
$('body').append($tempButton);
870-
$testButton = $tempButton;
871-
}
864+
this.iconType = 'svg';
865+
}
866+
else {
872867

873-
// the following retrieves the computed value of font-family
874-
// tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works!
875-
// tested in Chrome 49.x with Font Changer plugin - works!
876-
// tested in IE with user-defined style sheet enables - works!
877-
// It does NOT account for users who have "ignore font styles on web pages" checked in IE
878-
// There is no known way to check for that ???
879-
controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family');
880-
if (typeof controllerFont !== 'undefined') {
881-
if (controllerFont.indexOf('able') !== -1) {
882-
this.iconType = 'font';
868+
// browser does NOT support SVG
869+
// test whether browser can support icon fonts, and whether user has overriding the default style sheet
870+
// which could cause problems with proper display of the icon fonts
871+
if (window.getComputedStyle) {
872+
873+
// webkit doesn't return calculated styles unless element has been added to the DOM
874+
// and is visible (note: visibly clipped is considered "visible")
875+
// use playpauseButton for font-family test if it exists; otherwise must create a new temp button
876+
if ($('span.icon-play').length) {
877+
$testButton = $('span.icon-play');
878+
}
879+
else {
880+
$tempButton = $('<span>',{
881+
'class': 'icon-play able-clipped'
882+
});
883+
$('body').append($tempButton);
884+
$testButton = $tempButton;
885+
}
886+
887+
// the following retrieves the computed value of font-family
888+
// tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works!
889+
// tested in Chrome 49.x with Font Changer plugin - works!
890+
// tested in IE with user-defined style sheet enables - works!
891+
// It does NOT account for users who have "ignore font styles on web pages" checked in IE
892+
// There is no known way to check for that ???
893+
controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family');
894+
if (typeof controllerFont !== 'undefined') {
895+
if (controllerFont.indexOf('able') !== -1) {
896+
this.iconType = 'font';
897+
}
898+
else {
899+
this.iconType = 'image';
900+
}
883901
}
884902
else {
903+
// couldn't get computed font-family; use images to be safe
885904
this.iconType = 'image';
886905
}
887906
}
888-
else {
889-
// couldn't get computed font-family; use images to be safe
907+
else { // window.getComputedStyle is not supported (IE 8 and earlier)
908+
// No known way to detect computed font
909+
// The following retrieves the value from the style sheet, not the computed font
910+
// controllerFont = $tempButton.get(0).currentStyle.fontFamily;
911+
// It will therefore return "able", even if the user is overriding that with a custom style sheet
912+
// To be safe, use images
890913
this.iconType = 'image';
891914
}
892-
}
893-
else { // window.getComputedStyle is not supported (IE 8 and earlier)
894-
// No known way to detect computed font
895-
// The following retrieves the value from the style sheet, not the computed font
896-
// controllerFont = $tempButton.get(0).currentStyle.fontFamily;
897-
// It will therefore return "able", even if the user is overriding that with a custom style sheet
898-
// To be safe, use images
899-
this.iconType = 'image';
900-
}
901-
if (this.debug) {
902-
903-
}
904-
if (typeof $tempButton !== 'undefined') {
905-
$tempButton.remove();
915+
if (this.debug) {
916+
917+
}
918+
if (typeof $tempButton !== 'undefined') {
919+
$tempButton.remove();
920+
}
906921
}
907922
};
908923

909-
910924
// Perform one-time setup for this instance of player; called after player is first initialized.
911925
AblePlayer.prototype.setupInstance = function () {
912926
var deferred = new $.Deferred();
@@ -3058,7 +3072,7 @@
30583072
// youtube adds its own big play button
30593073
// if (this.mediaType === 'video' && this.player !== 'youtube') {
30603074
if (this.mediaType === 'video') {
3061-
if (this.iconType == 'font' && this.player !== 'youtube') {
3075+
if (this.iconType != 'image' && this.player !== 'youtube') {
30623076
this.injectBigPlayButton();
30633077
}
30643078

@@ -3101,7 +3115,6 @@
31013115
};
31023116

31033117
AblePlayer.prototype.injectBigPlayButton = function () {
3104-
31053118
this.$bigPlayButton = $('<button>', {
31063119
'class': 'able-big-play-button icon-play',
31073120
'aria-hidden': true,

‎build/ableplayer.js‎

Lines changed: 65 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -271,9 +271,10 @@
271271
}
272272

273273
// Icon type
274-
// By default, AblePlayer uses scalable icomoon fonts for the player controls
275-
// and falls back to images if the user has a custom style sheet that overrides font-family
276-
// use data-icon-type to force controls to use either 'font', 'images' or 'svg'
274+
// By default, AblePlayer 3.0.33 and higher uses SVG icons for the player controls
275+
// Fallback for browsers that don't support SVG is scalable icomoon fonts
276+
// Ultimate fallback is images, if the user has a custom style sheet that overrides font-family
277+
// Use data-icon-type to force controls to use either 'svg', 'font', or 'images'
277278
this.iconType = 'font';
278279
this.forceIconType = false;
279280
if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") {
@@ -842,10 +843,10 @@
842843
};
843844

844845
AblePlayer.prototype.setIconType = function() {
845-
// returns either "font" or "image"
846-
// create a temporary play span and check to see if button has font-family == "able" (the default)
847-
// if it doesn't, user has a custom style sheet and icon fonts will not display properly
848-
// use images as fallback
846+
847+
// returns either "svg", "font" or "image" (in descending order of preference)
848+
// Test for support of each type. If not supported, test the next type.
849+
// last resort is image icons
849850

850851
var $tempButton, $testButton, controllerFont;
851852

@@ -854,59 +855,72 @@
854855
return false;
855856
}
856857

857-
if (window.getComputedStyle) {
858-
859-
// webkit doesn't return calculated styles unless element has been added to the DOM
860-
// and is visible (note: visibly clipped is considered "visible")
861-
// use playpauseButton for font-family test if it exists; otherwise must create a new temp button
862-
if ($('span.icon-play').length) {
863-
$testButton = $('span.icon-play');
864-
}
865-
else {
866-
$tempButton = $('<span>',{
867-
'class': 'icon-play able-clipped'
868-
});
869-
$('body').append($tempButton);
870-
$testButton = $tempButton;
871-
}
858+
// test for SVG support
859+
// Test this method widely; failed as expected on IE8 and below
860+
// https://stackoverflow.com/a/27568129/744281
861+
if (!!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect)) {
862+
// browser supports SVG
863+
console.log('browser supports svg');
864+
this.iconType = 'svg';
865+
}
866+
else {
867+
console.log('browser does not support svg');
868+
// browser does NOT support SVG
869+
// test whether browser can support icon fonts, and whether user has overriding the default style sheet
870+
// which could cause problems with proper display of the icon fonts
871+
if (window.getComputedStyle) {
872+
873+
// webkit doesn't return calculated styles unless element has been added to the DOM
874+
// and is visible (note: visibly clipped is considered "visible")
875+
// use playpauseButton for font-family test if it exists; otherwise must create a new temp button
876+
if ($('span.icon-play').length) {
877+
$testButton = $('span.icon-play');
878+
}
879+
else {
880+
$tempButton = $('<span>',{
881+
'class': 'icon-play able-clipped'
882+
});
883+
$('body').append($tempButton);
884+
$testButton = $tempButton;
885+
}
872886

873-
// the following retrieves the computed value of font-family
874-
// tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works!
875-
// tested in Chrome 49.x with Font Changer plugin - works!
876-
// tested in IE with user-defined style sheet enables - works!
877-
// It does NOT account for users who have "ignore font styles on web pages" checked in IE
878-
// There is no known way to check for that ???
879-
controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family');
880-
if (typeof controllerFont !== 'undefined') {
881-
if (controllerFont.indexOf('able') !== -1) {
882-
this.iconType = 'font';
887+
// the following retrieves the computed value of font-family
888+
// tested in Firefox 45.x with "Allow pages to choose their own fonts" unchecked - works!
889+
// tested in Chrome 49.x with Font Changer plugin - works!
890+
// tested in IE with user-defined style sheet enables - works!
891+
// It does NOT account for users who have "ignore font styles on web pages" checked in IE
892+
// There is no known way to check for that ???
893+
controllerFont = window.getComputedStyle($testButton.get(0), null).getPropertyValue('font-family');
894+
if (typeof controllerFont !== 'undefined') {
895+
if (controllerFont.indexOf('able') !== -1) {
896+
this.iconType = 'font';
897+
}
898+
else {
899+
this.iconType = 'image';
900+
}
883901
}
884902
else {
903+
// couldn't get computed font-family; use images to be safe
885904
this.iconType = 'image';
886905
}
887906
}
888-
else {
889-
// couldn't get computed font-family; use images to be safe
907+
else { // window.getComputedStyle is not supported (IE 8 and earlier)
908+
// No known way to detect computed font
909+
// The following retrieves the value from the style sheet, not the computed font
910+
// controllerFont = $tempButton.get(0).currentStyle.fontFamily;
911+
// It will therefore return "able", even if the user is overriding that with a custom style sheet
912+
// To be safe, use images
890913
this.iconType = 'image';
891914
}
892-
}
893-
else { // window.getComputedStyle is not supported (IE 8 and earlier)
894-
// No known way to detect computed font
895-
// The following retrieves the value from the style sheet, not the computed font
896-
// controllerFont = $tempButton.get(0).currentStyle.fontFamily;
897-
// It will therefore return "able", even if the user is overriding that with a custom style sheet
898-
// To be safe, use images
899-
this.iconType = 'image';
900-
}
901-
if (this.debug) {
902-
console.log('Using ' + this.iconType + 's for player controls');
903-
}
904-
if (typeof $tempButton !== 'undefined') {
905-
$tempButton.remove();
915+
if (this.debug) {
916+
console.log('Using ' + this.iconType + 's for player controls');
917+
}
918+
if (typeof $tempButton !== 'undefined') {
919+
$tempButton.remove();
920+
}
906921
}
907922
};
908923

909-
910924
// Perform one-time setup for this instance of player; called after player is first initialized.
911925
AblePlayer.prototype.setupInstance = function () {
912926
var deferred = new $.Deferred();
@@ -3058,7 +3072,7 @@
30583072
// youtube adds its own big play button
30593073
// if (this.mediaType === 'video' && this.player !== 'youtube') {
30603074
if (this.mediaType === 'video') {
3061-
if (this.iconType == 'font' && this.player !== 'youtube') {
3075+
if (this.iconType != 'image' && this.player !== 'youtube') {
30623076
this.injectBigPlayButton();
30633077
}
30643078

@@ -3101,7 +3115,6 @@
31013115
};
31023116

31033117
AblePlayer.prototype.injectBigPlayButton = function () {
3104-
31053118
this.$bigPlayButton = $('<button>', {
31063119
'class': 'able-big-play-button icon-play',
31073120
'aria-hidden': true,
@@ -3885,7 +3898,7 @@
38853898
};
38863899

38873900
AblePlayer.prototype.addControls = function() {
3888-
3901+
console.log('adding controls with iconType ' + this.iconType);
38893902
// determine which controls to show based on several factors:
38903903
// mediaType (audio vs video)
38913904
// availability of tracks (e.g., for closed captions & audio description)

0 commit comments

Comments
 (0)