Parcourir la source

Moved functions from the core repo.

Piotrek Koszuliński il y a 9 ans
Parent
commit
fc60f87005

+ 21 - 0
packages/ckeditor5-utils/src/dom/getdatafromelement.js

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/**
+ * Gets data from a given source element.
+ *
+ * @method utils.dom.getDataFromElement
+ * @param {HTMLElement} el The element from which the data will be retrieved.
+ * @returns {String} The data string.
+ */
+export default function getDataFromElement( el ) {
+	if ( el instanceof HTMLTextAreaElement ) {
+		return el.value;
+	}
+
+	return el.innerHTML;
+}

+ 2 - 1
packages/ckeditor5-utils/src/dom/insertat.js

@@ -8,10 +8,11 @@
 /**
  * Inserts node to the parent at given index.
  *
+ * @method utils.dom.insertAt
  * @param {Element} parentElement Parent element.
  * @param {Number} index Insertions index.
  * @param {Node} nodeToInsert Node to insert.
  */
 export default function insertAt( parentElement, index, nodeToInsert ) {
 	parentElement.insertBefore( nodeToInsert, parentElement.childNodes[ index ] || null );
-}
+}

+ 2 - 1
packages/ckeditor5-utils/src/dom/remove.js

@@ -8,6 +8,7 @@
 /**
  * Removes given node from parent.
  *
+ * @method utils.dom.remove
  * @param {Node} node Node to remove.
  */
 export default function remove( node ) {
@@ -16,4 +17,4 @@ export default function remove( node ) {
 	if ( parent ) {
 		parent.removeChild( node );
 	}
-}
+}

+ 21 - 0
packages/ckeditor5-utils/src/dom/setdatainelement.js

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/**
+ * Sets data in a given element.
+ *
+ * @method utils.dom.setDataInElement
+ * @param {HTMLElement} el The element in which the data will be set.
+ * @param {String} data The data string.
+ */
+export default function setDataInElement( el, data ) {
+	if ( el instanceof HTMLTextAreaElement ) {
+		el.value = data;
+	}
+
+	el.innerHTML = data;
+}

+ 57 - 0
packages/ckeditor5-utils/src/elementreplacer.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/**
+ * Utility class allowing to hide existing HTML elements or replace them with given ones in a way that doesn't remove
+ * the original elements from the DOM.
+ *
+ * @memberOf utils
+ */
+export default class ElementReplacer {
+	constructor() {
+		/**
+		 * The elements replaced by {@link #replace} and their replacements.
+		 *
+		 * @private
+		 * @member {Array.<Object>} utils.ElementReplacer#_replacedElements
+		 */
+		this._replacedElements = [];
+	}
+
+	/**
+	 * Hides the `element` and, if specified, inserts the the given element next to it.
+	 *
+	 * The effect of this method can be reverted by {@link #restore}.
+	 *
+	 * @param {HTMLElement} element The element to replace.
+	 * @param {HTMLElement} [newElement] The replacement element. If not passed, then the `element` will just be hidden.
+	 */
+	replace( element, newElement ) {
+		this._replacedElements.push( { element, newElement } );
+
+		element.style.display = 'none';
+
+		if ( newElement ) {
+			element.parentNode.insertBefore( newElement, element.nextSibling );
+		}
+	}
+
+	/**
+	 * Restores what {@link #replace} did.
+	 */
+	restore() {
+		this._replacedElements.forEach( ( { element, newElement } ) => {
+			element.style.display = '';
+
+			if ( newElement ) {
+				newElement.remove();
+			}
+		} );
+
+		this._replacedElements = [];
+	}
+}

+ 1 - 1
packages/ckeditor5-utils/tests/_utils-tests/utils.js

@@ -59,7 +59,7 @@ describe( 'utilsTestUtils.createObserver()', () => {
 			observable.foo = 1;
 			expect( spy.callCount ).to.equal( 1 );
 
-			observable2.bar = 1;
+			observable.bar = 1;
 			expect( spy.callCount ).to.equal( 1 );
 		} );
 

+ 3 - 0
packages/ckeditor5-utils/tests/dom/getdatafromelement.html

@@ -0,0 +1,3 @@
+<textarea id="getData-textarea">&lt;b&gt;foo&lt;/b&gt;</textarea>
+<div id="getData-div"><b>foo</b></div>
+<template id="getData-template"><b>foo</b></template>

+ 19 - 0
packages/ckeditor5-utils/tests/dom/getdatafromelement.js

@@ -0,0 +1,19 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: dom, browser-only */
+
+'use strict';
+
+import getDataFromElement from '/ckeditor5/utils/dom/getdatafromelement.js';
+
+describe( 'getDataFromElement', () => {
+	[ 'textarea', 'template', 'div' ].forEach( ( elementName ) => {
+		it( 'should return the content of a ' + elementName, function() {
+			const data = getDataFromElement( document.getElementById( 'getData-' + elementName ) );
+			expect( data ).to.equal( '<b>foo</b>' );
+		} );
+	} );
+} );

+ 25 - 0
packages/ckeditor5-utils/tests/dom/setdatainelement.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: dom, browser-only */
+
+'use strict';
+
+import setDataInElement from '/ckeditor5/utils/dom/setdatainelement.js';
+import getDataFromElement from '/ckeditor5/utils/dom/getdatafromelement.js';
+
+describe( 'setDataInElement', () => {
+	[ 'textarea', 'template', 'div' ].forEach( ( elementName ) => {
+		it( 'should set the content of a ' + elementName, () => {
+			const el = document.createElement( elementName );
+			const expectedData = '<b>foo</b>';
+
+			setDataInElement( el, expectedData );
+
+			const actualData = getDataFromElement( el );
+			expect( actualData ).to.equal( actualData );
+		} );
+	} );
+} );

+ 54 - 0
packages/ckeditor5-utils/tests/elementreplacer.js

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: browser-only */
+
+'use strict';
+
+import ElementReplacer from '/ckeditor5/utils/elementreplacer.js';
+
+describe( 'ElementReplacer', () => {
+	let replacer;
+	let container, el1, el2, elNew1;
+
+	beforeEach( () => {
+		replacer = new ElementReplacer();
+		container = document.createElement( 'div' );
+		container.innerHTML = '<p>a</p><p>b</p>';
+
+		el1 = container.firstChild;
+		el2 = container.lastChild;
+
+		elNew1 = document.createElement( 'h1' );
+	} );
+
+	describe( 'replace', () => {
+		it( 'hides the given element', () => {
+			replacer.replace( el1 );
+
+			expect( el1.style.display ).to.equal( 'none' );
+		} );
+
+		it( 'replaces one element with another', () => {
+			replacer.replace( el1, elNew1 );
+
+			expect( el1.style.display ).to.equal( 'none' );
+			expect( elNew1.previousSibling ).to.equal( el1 );
+		} );
+	} );
+
+	describe( 'restore', () => {
+		it( 'reverts all changes', () => {
+			replacer.replace( el1, elNew1 );
+			replacer.replace( el2 );
+
+			replacer.restore();
+
+			expect( el1.style.display ).to.equal( '' );
+			expect( el2.style.display ).to.equal( '' );
+			expect( elNew1.parentNode ).to.be.null;
+		} );
+	} );
+} );