Safari fix (fixes #96), YouTube tweaks, docs

5 files changed, 263 insertions, 2 deletions

diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index f35ff11b..3835fef1 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -108,7 +108,7 @@ plyr.setup({
 
 	// Add star
 	function formatGitHubCount(count) {
-		return "★ " + count;
+		return "★ " + count;
 	}
 
 	// Check if it's in session storage first
diff --git a/docs/src/js/lib/classlist.js b/docs/src/js/lib/classlist.js
new file mode 100644
index 00000000..eac1e99e
--- /dev/null
+++ b/docs/src/js/lib/classlist.js
@@ -0,0 +1,237 @@
+/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 1.1.20150312
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: Dedicated to the public domain.
+ *   See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
+ */
+
+/*global self, document, DOMException */
+
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
+
+if ("document" in self) {
+
+// Full polyfill for browsers with no classList support
+if (!("classList" in document.createElement("_"))) {
+
+(function (view) {
+
+"use strict";
+
+if (!('Element' in view)) return;
+
+var
+	  classListProp = "classList"
+	, protoProp = "prototype"
+	, elemCtrProto = view.Element[protoProp]
+	, objCtr = Object
+	, strTrim = String[protoProp].trim || function () {
+		return this.replace(/^\s+|\s+$/g, "");
+	}
+	, arrIndexOf = Array[protoProp].indexOf || function (item) {
+		var
+			  i = 0
+			, len = this.length
+		;
+		for (; i < len; i++) {
+			if (i in this && this[i] === item) {
+				return i;
+			}
+		}
+		return -1;
+	}
+	// Vendors: please allow content code to instantiate DOMExceptions
+	, DOMEx = function (type, message) {
+		this.name = type;
+		this.code = DOMException[type];
+		this.message = message;
+	}
+	, checkTokenAndGetIndex = function (classList, token) {
+		if (token === "") {
+			throw new DOMEx(
+				  "SYNTAX_ERR"
+				, "An invalid or illegal string was specified"
+			);
+		}
+		if (/\s/.test(token)) {
+			throw new DOMEx(
+				  "INVALID_CHARACTER_ERR"
+				, "String contains an invalid character"
+			);
+		}
+		return arrIndexOf.call(classList, token);
+	}
+	, ClassList = function (elem) {
+		var
+			  trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
+			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+			, i = 0
+			, len = classes.length
+		;
+		for (; i < len; i++) {
+			this.push(classes[i]);
+		}
+		this._updateClassName = function () {
+			elem.setAttribute("class", this.toString());
+		};
+	}
+	, classListProto = ClassList[protoProp] = []
+	, classListGetter = function () {
+		return new ClassList(this);
+	}
+;
+// Most DOMException implementations don't allow calling DOMException's toString()
+// on non-DOMExceptions. Error's toString() is sufficient here.
+DOMEx[protoProp] = Error[protoProp];
+classListProto.item = function (i) {
+	return this[i] || null;
+};
+classListProto.contains = function (token) {
+	token += "";
+	return checkTokenAndGetIndex(this, token) !== -1;
+};
+classListProto.add = function () {
+	var
+		  tokens = arguments
+		, i = 0
+		, l = tokens.length
+		, token
+		, updated = false
+	;
+	do {
+		token = tokens[i] + "";
+		if (checkTokenAndGetIndex(this, token) === -1) {
+			this.push(token);
+			updated = true;
+		}
+	}
+	while (++i < l);
+
+	if (updated) {
+		this._updateClassName();
+	}
+};
+classListProto.remove = function () {
+	var
+		  tokens = arguments
+		, i = 0
+		, l = tokens.length
+		, token
+		, updated = false
+		, index
+	;
+	do {
+		token = tokens[i] + "";
+		index = checkTokenAndGetIndex(this, token);
+		while (index !== -1) {
+			this.splice(index, 1);
+			updated = true;
+			index = checkTokenAndGetIndex(this, token);
+		}
+	}
+	while (++i < l);
+
+	if (updated) {
+		this._updateClassName();
+	}
+};
+classListProto.toggle = function (token, force) {
+	token += "";
+
+	var
+		  result = this.contains(token)
+		, method = result ?
+			force !== true && "remove"
+		:
+			force !== false && "add"
+	;
+
+	if (method) {
+		this[method](token);
+	}
+
+	if (force === true || force === false) {
+		return force;
+	} else {
+		return !result;
+	}
+};
+classListProto.toString = function () {
+	return this.join(" ");
+};
+
+if (objCtr.defineProperty) {
+	var classListPropDesc = {
+		  get: classListGetter
+		, enumerable: true
+		, configurable: true
+	};
+	try {
+		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+	} catch (ex) { // IE 8 doesn't support enumerable:true
+		if (ex.number === -0x7FF5EC54) {
+			classListPropDesc.enumerable = false;
+			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+		}
+	}
+} else if (objCtr[protoProp].__defineGetter__) {
+	elemCtrProto.__defineGetter__(classListProp, classListGetter);
+}
+
+}(self));
+
+} else {
+// There is full or partial native classList support, so just check if we need
+// to normalize the add/remove and toggle APIs.
+
+(function () {
+	"use strict";
+
+	var testElement = document.createElement("_");
+
+	testElement.classList.add("c1", "c2");
+
+	// Polyfill for IE 10/11 and Firefox <26, where classList.add and
+	// classList.remove exist but support only one argument at a time.
+	if (!testElement.classList.contains("c2")) {
+		var createMethod = function(method) {
+			var original = DOMTokenList.prototype[method];
+
+			DOMTokenList.prototype[method] = function(token) {
+				var i, len = arguments.length;
+
+				for (i = 0; i < len; i++) {
+					token = arguments[i];
+					original.call(this, token);
+				}
+			};
+		};
+		createMethod('add');
+		createMethod('remove');
+	}
+
+	testElement.classList.toggle("c3", false);
+
+	// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
+	// support the second argument.
+	if (testElement.classList.contains("c3")) {
+		var _toggle = DOMTokenList.prototype.toggle;
+
+		DOMTokenList.prototype.toggle = function(token, force) {
+			if (1 in arguments && !this.contains(token) === !force) {
+				return force;
+			} else {
+				return _toggle.call(this, token);
+			}
+		};
+
+	}
+
+	testElement = null;
+}());
+
+}
+
+}
\ No newline at end of file
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less
index 57a7084e..b4e5ddf1 100644
--- a/docs/src/less/components/base.less
+++ b/docs/src/less/components/base.less
@@ -25,6 +25,7 @@ body {
     text-align: center;
     color: @gray;
     .font-smoothing(on);
+    padding: 0 (@padding-base / 2);
 }
 
 // Header
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index 0740343d..9ee5cf93 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -101,7 +101,8 @@ nav {
 	}
 }
 .btn-primary {
-	background: linear-gradient(@link-color, darken(@link-color, 3%));
+	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
+	background-color: @link-color;
 	border-color: darken(@link-color, 10%);
 	box-shadow: 0 1px 1px rgba(0,0,0, .15);
 	text-shadow: 0 1px 1px rgba(0,0,0, .1);
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index 9c145847..97087b02 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -22,11 +22,24 @@
         overflow: hidden;
     }
 }
+// Base styles
 .example-video .player {
     max-width: @example-width-video;
 
     video,
     iframe {
+        border-radius: @border-radius-base;
+    }
+    iframe {
+        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+    }
+}
+
+// Style full supported player
+.example-video .player-video,
+.example-video .player-youtube {
+    video,
+    iframe {
         border-radius: @border-radius-base @border-radius-base 0 0;
     }
     iframe {
@@ -35,5 +48,14 @@
     &-fullscreen,
     &.fullscreen-active {
         max-width: none;
+
+        .player-controls,
+        video,
+        iframe {
+            border-radius: 0;
+        }
+        iframe {
+            -webkit-mask-image: none;
+        }
     }
 }
\ No newline at end of file