Video player: adding Dragabilly to closed captions
* tests for dragging * icon location reference updates * pattern library usage
This commit is contained in:
Chris Rodriguez
@@ -57,4 +57,4 @@ html:not('.afontgarde') .icon-fallback-img .icon:before {
|
||||
/* The img fallback version is not as reliable since it does not check to make sure the fontloaded font has loaded. If we did add the .fontloaded class, it would unnecessarily request the fallback image. */
|
||||
.fontawesome .icon-fallback-img .icon {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
287
common/static/js/vendor/afontgarde/afontgarde.js
vendored
287
common/static/js/vendor/afontgarde/afontgarde.js
vendored
@@ -1,287 +0,0 @@
|
||||
/*! afontgarde - v0.1.6 - 2015-03-13
|
||||
* https://github.com/filamentgroup/a-font-garde
|
||||
* Copyright (c) 2015 Filament Group c/o Zach Leatherman
|
||||
* MIT License */
|
||||
|
||||
/*! fontfaceonload - v0.1.6 - 2015-03-13
|
||||
* https://github.com/zachleat/fontfaceonload
|
||||
* Copyright (c) 2015 Zach Leatherman (@zachleat)
|
||||
* MIT License */
|
||||
|
||||
;(function( win, doc ) {
|
||||
"use strict";
|
||||
|
||||
var TEST_STRING = 'AxmTYklsjo190QW',
|
||||
SANS_SERIF_FONTS = 'sans-serif',
|
||||
SERIF_FONTS = 'serif',
|
||||
|
||||
// lighter and bolder not supported
|
||||
weightLookup = {
|
||||
normal: '400',
|
||||
bold: '700'
|
||||
},
|
||||
|
||||
defaultOptions = {
|
||||
tolerance: 2, // px
|
||||
delay: 100,
|
||||
glyphs: '',
|
||||
success: function() {},
|
||||
error: function() {},
|
||||
timeout: 5000,
|
||||
weight: '400', // normal
|
||||
style: 'normal'
|
||||
},
|
||||
|
||||
// See https://github.com/typekit/webfontloader/blob/master/src/core/fontruler.js#L41
|
||||
style = [
|
||||
'display:block',
|
||||
'position:absolute',
|
||||
'top:-999px',
|
||||
'left:-999px',
|
||||
'font-size:48px',
|
||||
'width:auto',
|
||||
'height:auto',
|
||||
'line-height:normal',
|
||||
'margin:0',
|
||||
'padding:0',
|
||||
'font-variant:normal',
|
||||
'white-space:nowrap'
|
||||
],
|
||||
html = '<div style="%s">' + TEST_STRING + '</div>';
|
||||
|
||||
var FontFaceOnloadInstance = function() {
|
||||
this.fontFamily = '';
|
||||
this.appended = false;
|
||||
this.serif = undefined;
|
||||
this.sansSerif = undefined;
|
||||
this.parent = undefined;
|
||||
this.options = {};
|
||||
};
|
||||
|
||||
FontFaceOnloadInstance.prototype.getMeasurements = function () {
|
||||
return {
|
||||
sansSerif: {
|
||||
width: this.sansSerif.offsetWidth,
|
||||
height: this.sansSerif.offsetHeight
|
||||
},
|
||||
serif: {
|
||||
width: this.serif.offsetWidth,
|
||||
height: this.serif.offsetHeight
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
FontFaceOnloadInstance.prototype.load = function () {
|
||||
var startTime = new Date(),
|
||||
that = this,
|
||||
serif = that.serif,
|
||||
sansSerif = that.sansSerif,
|
||||
parent = that.parent,
|
||||
appended = that.appended,
|
||||
dimensions,
|
||||
options = this.options,
|
||||
ref = options.reference;
|
||||
|
||||
function getStyle( family ) {
|
||||
return style
|
||||
.concat( [ 'font-weight:' + options.weight, 'font-style:' + options.style ] )
|
||||
.concat( "font-family:" + family )
|
||||
.join( ";" );
|
||||
}
|
||||
|
||||
var sansSerifHtml = html.replace( /\%s/, getStyle( SANS_SERIF_FONTS ) ),
|
||||
serifHtml = html.replace( /\%s/, getStyle( SERIF_FONTS ) );
|
||||
|
||||
if( !parent ) {
|
||||
parent = that.parent = doc.createElement( "div" );
|
||||
}
|
||||
|
||||
parent.innerHTML = sansSerifHtml + serifHtml;
|
||||
sansSerif = that.sansSerif = parent.firstChild;
|
||||
serif = that.serif = sansSerif.nextSibling;
|
||||
|
||||
if( options.glyphs ) {
|
||||
sansSerif.innerHTML += options.glyphs;
|
||||
serif.innerHTML += options.glyphs;
|
||||
}
|
||||
|
||||
function hasNewDimensions( dims, el, tolerance ) {
|
||||
return Math.abs( dims.width - el.offsetWidth ) > tolerance ||
|
||||
Math.abs( dims.height - el.offsetHeight ) > tolerance;
|
||||
}
|
||||
|
||||
function isTimeout() {
|
||||
return ( new Date() ).getTime() - startTime.getTime() > options.timeout;
|
||||
}
|
||||
|
||||
(function checkDimensions() {
|
||||
if( !ref ) {
|
||||
ref = doc.body;
|
||||
}
|
||||
if( !appended && ref ) {
|
||||
ref.appendChild( parent );
|
||||
appended = that.appended = true;
|
||||
|
||||
dimensions = that.getMeasurements();
|
||||
|
||||
// Make sure we set the new font-family after we take our initial dimensions:
|
||||
// handles the case where FontFaceOnload is called after the font has already
|
||||
// loaded.
|
||||
sansSerif.style.fontFamily = that.fontFamily + ', ' + SANS_SERIF_FONTS;
|
||||
serif.style.fontFamily = that.fontFamily + ', ' + SERIF_FONTS;
|
||||
}
|
||||
|
||||
if( appended && dimensions &&
|
||||
( hasNewDimensions( dimensions.sansSerif, sansSerif, options.tolerance ) ||
|
||||
hasNewDimensions( dimensions.serif, serif, options.tolerance ) ) ) {
|
||||
|
||||
options.success();
|
||||
} else if( isTimeout() ) {
|
||||
options.error();
|
||||
} else {
|
||||
if( !appended && "requestAnimationFrame" in window ) {
|
||||
win.requestAnimationFrame( checkDimensions );
|
||||
} else {
|
||||
win.setTimeout( checkDimensions, options.delay );
|
||||
}
|
||||
}
|
||||
})();
|
||||
}; // end load()
|
||||
|
||||
FontFaceOnloadInstance.prototype.checkFontFaces = function( timeout ) {
|
||||
var _t = this;
|
||||
doc.fonts.forEach(function( font ) {
|
||||
if( font.family.toLowerCase() === _t.fontFamily.toLowerCase() &&
|
||||
( weightLookup[ font.weight ] || font.weight ) === ''+_t.options.weight &&
|
||||
font.style === _t.options.style ) {
|
||||
font.load().then(function() {
|
||||
_t.options.success();
|
||||
win.clearTimeout( timeout );
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
FontFaceOnloadInstance.prototype.init = function( fontFamily, options ) {
|
||||
var timeout;
|
||||
|
||||
for( var j in defaultOptions ) {
|
||||
if( !options.hasOwnProperty( j ) ) {
|
||||
options[ j ] = defaultOptions[ j ];
|
||||
}
|
||||
}
|
||||
|
||||
this.options = options;
|
||||
this.fontFamily = fontFamily;
|
||||
|
||||
// For some reason this was failing on afontgarde + icon fonts.
|
||||
if( !options.glyphs && "fonts" in doc ) {
|
||||
if( options.timeout ) {
|
||||
timeout = win.setTimeout(function() {
|
||||
options.error();
|
||||
}, options.timeout );
|
||||
}
|
||||
|
||||
this.checkFontFaces( timeout );
|
||||
} else {
|
||||
this.load();
|
||||
}
|
||||
};
|
||||
|
||||
var FontFaceOnload = function( fontFamily, options ) {
|
||||
var instance = new FontFaceOnloadInstance();
|
||||
instance.init(fontFamily, options);
|
||||
|
||||
return instance;
|
||||
};
|
||||
|
||||
// intentional global
|
||||
win.FontFaceOnload = FontFaceOnload;
|
||||
})( this, this.document );
|
||||
|
||||
/*
|
||||
* A Font Garde
|
||||
*/
|
||||
|
||||
;(function( w ) {
|
||||
|
||||
var doc = w.document,
|
||||
ref,
|
||||
css = ['.FONT_NAME.supports-generatedcontent .icon-fallback-text .icon { display: inline-block; }',
|
||||
'.FONT_NAME.supports-generatedcontent .icon-fallback-text .text { clip: rect(0 0 0 0); overflow: hidden; position: absolute; height: 1px; width: 1px; }',
|
||||
'.FONT_NAME .icon-fallback-glyph .icon:before { font-size: 1em; font-size: inherit; line-height: 1; line-height: inherit; }'];
|
||||
|
||||
function addEvent( type, callback ) {
|
||||
if( 'addEventListener' in w ) {
|
||||
return w.addEventListener( type, callback, false );
|
||||
} else if( 'attachEvent' in w ) {
|
||||
return w.attachEvent( 'on' + type, callback );
|
||||
}
|
||||
}
|
||||
|
||||
// options can be a string of glyphs or an options object to pass into FontFaceOnload
|
||||
AFontGarde = function( fontFamily, options ) {
|
||||
var fontFamilyClassName = fontFamily.toLowerCase().replace( /\s/g, '' ),
|
||||
executed = false;
|
||||
|
||||
function init() {
|
||||
if( executed ) {
|
||||
return;
|
||||
}
|
||||
executed = true;
|
||||
|
||||
if( typeof FontFaceOnload === 'undefined' ) {
|
||||
throw 'FontFaceOnload is a prerequisite.';
|
||||
}
|
||||
|
||||
if( !ref ) {
|
||||
ref = doc.getElementsByTagName( 'script' )[ 0 ];
|
||||
}
|
||||
var style = doc.createElement( 'style' ),
|
||||
cssContent = css.join( '\n' ).replace( /FONT_NAME/gi, fontFamilyClassName );
|
||||
|
||||
style.setAttribute( 'type', 'text/css' );
|
||||
if( style.styleSheet ) {
|
||||
style.styleSheet.cssText = cssContent;
|
||||
} else {
|
||||
style.appendChild( doc.createTextNode( cssContent ) );
|
||||
}
|
||||
ref.parentNode.insertBefore( style, ref );
|
||||
|
||||
var opts = {
|
||||
timeout: 5000,
|
||||
success: function() {
|
||||
// If you’re using more than one icon font, change this classname (and in a-font-garde.css)
|
||||
doc.documentElement.className += ' ' + fontFamilyClassName;
|
||||
|
||||
if( options && options.success ) {
|
||||
options.success();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// These characters are a few of the glyphs from the font above */
|
||||
if( typeof options === "string" ) {
|
||||
opts.glyphs = options;
|
||||
} else {
|
||||
for( var j in options ) {
|
||||
if( options.hasOwnProperty( j ) && j !== "success" ) {
|
||||
opts[ j ] = options[ j ];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FontFaceOnload( fontFamily, opts );
|
||||
}
|
||||
|
||||
// MIT credit: filamentgroup/shoestring
|
||||
addEvent( "DOMContentLoaded", init );
|
||||
addEvent( "readystatechange", init );
|
||||
addEvent( "load", init );
|
||||
|
||||
if( doc.readyState === "complete" ){
|
||||
init();
|
||||
}
|
||||
};
|
||||
|
||||
})( this );
|
||||
@@ -1,7 +0,0 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.AFontGarde('FontAwesome', {
|
||||
glyphs: ''
|
||||
});
|
||||
});
|
||||
@@ -1,4 +0,0 @@
|
||||
/* Modernizr 2.7.1 (Custom Build) | MIT & BSD
|
||||
* Build: http://modernizr.com/download/#-fontface-generatedcontent-cssclasses-teststyles-cssclassprefix:supports!
|
||||
*/
|
||||
;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(prefixes.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l=":)",m={}.toString,n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.fontface=function(){var a;return t('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},n.generatedcontent=function(){var a;return t(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" supports-"+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,e._version=d,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" supports-js supports-"+q.join(" supports-"):""),e}(this,this.document);
|
||||
Reference in New Issue
Block a user