Merge branch 't/13867b'

ckeditor · Nov 6, 2015 · a8460e1 · a8460e1
2 parents 68b6b3b + a4d1e2e
commit a8460e1
Show file tree

Hide file tree

Showing 5 changed files with 276 additions and 2 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -12,6 +12,7 @@ Fixed Issues:
 * [#13887](https://dev.ckeditor.com/ticket/13887): Fixed: Link target now supports wider ASCII character range. Thanks to [SamZiemer](https://github.com/SamZiemer)!
 * [#13790](https://dev.ckeditor.com/ticket/13790): Fixed: Allow for the iframe having been removed already. Thanks to [Stefan Rijnhart](https://github.com/StefanRijnhart)!
 * [#13803](https://dev.ckeditor.com/ticket/13803): Fixed: Allow the editor to be destroyed before being fully initialized. Thanks to [Cyril Fluck](https://github.com/cyril-sf)!
+* [#13867](http://dev.ckeditor.com/ticket/13867): Fixed: CKEditor will continue to work when `classList` polyfill was used.
 * [#13885](http://dev.ckeditor.com/ticket/13885): Fixed: [Image2](http://ckeditor.com/addon/image2) does no longer require [link](http://ckeditor.com/addon/link) plugin to link an image.
 * [#13883](http://dev.ckeditor.com/ticket/13883): Fixed: Copying table using context menu strips off styles.
 * [#13872](http://dev.ckeditor.com/ticket/13872): Fixed: Cut is no longer possible in [read-only](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-readOnly) mode.

diff --git a/core/dom/element.js b/core/dom/element.js
@@ -154,8 +154,8 @@ CKEDITOR.dom.element.clearMarkers = function( database, element, removeFromDatab
 };
 
 ( function() {
-	var testElement = document.createElement( 'span' ),
-		supportsClassLists = !!testElement.classList,
+	var elementsClassList = document.createElement( '_' ).classList,
+		supportsClassLists = typeof elementsClassList !== 'undefined' && String( elementsClassList.add ).match( /\[Native code\]/gi ) !== null,
 		rclass = /[\n\t\r]/g;
 
 	function hasClass( classNames, className ) {

diff --git a/tests/tickets/13867/1.html b/tests/tickets/13867/1.html
@@ -0,0 +1,6 @@
+
+<!-- To reproduce this issue we need to put an editor in another iframe. Why is that? Bender automatically puts ckeditor.js file
+as before any configurable js file. By doing so it triggers initialization logic, e.g.
+https://github.com/ckeditor/ckeditor-dev/blob/48311f85728398dd4b616b240292cffed6ec9d15/core/dom/element.js#L158. -->
+
+<iframe src="_helpers/include.html" style="width:100%;height:800px"></iframe>
diff --git a/tests/tickets/13867/1.md b/tests/tickets/13867/1.md
@@ -0,0 +1,7 @@
+@bender-tags: 4.5.5, tc, 13867
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles
+
+**Expected result:** Editor should loaded, no exceptions should be thrown.
+
+**Unexpected result:** Icons are grayed out, exception is thrown.
diff --git a/tests/tickets/13867/_helpers/include.html b/tests/tickets/13867/_helpers/include.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Editor include frame</title>
+	</head>
+	<body>
+		<div id="editor">
+			<p>Foo</p>
+		</div>
+
+		<script>
+		/*
+		 * 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
+		// Including IE < Edge missing SVGElement.classList
+		if (!("classList" in document.createElement("_"))
+			|| document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg","g"))) {
+
+		(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;
+		}());
+
+		}
+
+		}
+
+		</script>
+		<script src="/apps/ckeditor/ckeditor.js"></script>
+
+		<script>
+			CKEDITOR.replace( 'editor' );
+		</script>
+	</body>
+</html>