element.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. import Node from './node.js';
  7. import utils from '../../utils/utils.js';
  8. import isPlainObject from '../../utils/lib/lodash/isPlainObject.js';
  9. /**
  10. * Tree view element.
  11. *
  12. * @memberOf core.treeView
  13. * @extends core.treeView.Node
  14. */
  15. export default class Element extends Node {
  16. /**
  17. * Creates a tree view element.
  18. *
  19. * Attributes can be passed in various formats:
  20. *
  21. * new Element( 'div', { 'class': 'editor', 'contentEditable': 'true' } ); // object
  22. * new Element( 'div', [ [ 'class', 'editor' ], [ 'contentEditable', 'true' ] ] ); // map-like iterator
  23. * new Element( 'div', mapOfAttributes ); // map
  24. *
  25. * @param {String} name Node name.
  26. * @param {Object|Iterable} [attrs] Collection of attributes.
  27. * @param {core.treeView.Node|Iterable.<core.treeView.Node>} [children] List of nodes to be inserted into created element.
  28. */
  29. constructor( name, attrs, children ) {
  30. super();
  31. /**
  32. * Name of the element.
  33. *
  34. * @readonly
  35. * @member {String} core.treeView.Element#name
  36. */
  37. this.name = name;
  38. /**
  39. * Map of attributes, where attributes names are keys and attributes values are values.
  40. *
  41. * @protected
  42. * @member {Map} core.treeView.Element#_attrs
  43. */
  44. if ( isPlainObject( attrs ) ) {
  45. this._attrs = utils.objectToMap( attrs );
  46. } else {
  47. this._attrs = new Map( attrs );
  48. }
  49. /**
  50. * Array of child nodes.
  51. *
  52. * @protected
  53. * @member {Array.<core.treeView.Node>} core.treeView.Element#_children
  54. */
  55. this._children = [];
  56. if ( children ) {
  57. this.insertChildren( 0, children );
  58. }
  59. /**
  60. * Set of classes associated with element instance.
  61. *
  62. * @protected
  63. * @member {Set} core.treeView.Element#_classes
  64. */
  65. if ( this._attrs.has( 'class' ) ) {
  66. // Remove class attribute and handle it by class set.
  67. const classString = this._attrs.get( 'class' );
  68. const classArray = classString.split( /\s+/ );
  69. this._classes = new Set( classArray );
  70. this._attrs.delete( 'class' );
  71. } else {
  72. this._classes = new Set();
  73. }
  74. /**
  75. * Map of styles.
  76. *
  77. * @protected
  78. * @member {Set} core.treeView.Element#_styles
  79. */
  80. this._styles = new Map();
  81. if ( this._attrs.has( 'style' ) ) {
  82. // TODO: Maybe parsing style string should be moved to utils?
  83. const styleString = this._attrs.get( 'style' );
  84. const regex = /\s*([^:;\s]+)\s*:\s*([^;]+)\s*(?=;|$)/g;
  85. let matchStyle;
  86. while ( ( matchStyle = regex.exec( styleString ) ) !== null ) {
  87. this._styles.set( matchStyle[ 1 ], matchStyle[ 2 ].trim() );
  88. }
  89. this._attrs.delete( 'style' );
  90. }
  91. }
  92. /**
  93. * Clones provided element.
  94. *
  95. * @param {Boolean} deep If set to `true` clones element and all its children recursively. When set to `false`,
  96. * element will be cloned without any children.
  97. * @returns {Element} Clone of this element.
  98. */
  99. clone( deep ) {
  100. const childrenClone = [];
  101. if ( deep ) {
  102. for ( let child of this.getChildren() ) {
  103. childrenClone.push( child.clone( deep ) );
  104. }
  105. }
  106. const cloned = new Element( this.name, this._attrs, childrenClone );
  107. // Classes and styles are cloned separately - it solution is faster than adding them back to attributes and
  108. // parse once again in constructor.
  109. cloned._classes = new Set( this._classes );
  110. cloned._styles = new Map( this._styles );
  111. return cloned;
  112. }
  113. /**
  114. * {@link core.treeView.Element#insert Insert} a child node or a list of child nodes at the end of this node and sets
  115. * the parent of these nodes to this element.
  116. *
  117. * @fires core.treeView.Node#change
  118. * @param {core.treeView.Node|Iterable.<core.treeView.Node>} nodes Node or the list of nodes to be inserted.
  119. * @returns {Number} Number of appended nodes.
  120. */
  121. appendChildren( nodes ) {
  122. return this.insertChildren( this.getChildCount(), nodes );
  123. }
  124. /**
  125. * Gets child at the given index.
  126. *
  127. * @param {Number} index Index of child.
  128. * @returns {core.treeView.Node} Child node.
  129. */
  130. getChild( index ) {
  131. return this._children[ index ];
  132. }
  133. /**
  134. * Gets the number of element's children.
  135. *
  136. * @returns {Number} The number of element's children.
  137. */
  138. getChildCount() {
  139. return this._children.length;
  140. }
  141. /**
  142. * Gets index of the given child node. Returns `-1` if child node is not found.
  143. *
  144. * @param {core.treeView.Node} node Child node.
  145. * @returns {Number} Index of the child node.
  146. */
  147. getChildIndex( node ) {
  148. return this._children.indexOf( node );
  149. }
  150. /**
  151. * Gets child nodes iterator.
  152. *
  153. * @returns {Iterable.<core.treeView.Node>} Child nodes iterator.
  154. */
  155. getChildren() {
  156. return this._children[ Symbol.iterator ]();
  157. }
  158. /**
  159. * Returns an iterator that contains the keys for attributes.
  160. *
  161. * @returns {Iterator.<String>} Keys for attributes.
  162. */
  163. *getAttributeKeys() {
  164. if ( this._classes.size > 0 ) {
  165. yield 'class';
  166. }
  167. yield* this._attrs.keys();
  168. }
  169. /**
  170. * Gets attribute by key. If attribute is not present - returns undefined.
  171. *
  172. * @param {String} key Attribute key.
  173. * @returns {String|undefined} Attribute value.
  174. */
  175. getAttribute( key ) {
  176. if ( key == 'class' ) {
  177. if ( this._classes.size > 0 ) {
  178. return [ ...this._classes ].join( ' ' );
  179. }
  180. return undefined;
  181. }
  182. return this._attrs.get( key );
  183. }
  184. /**
  185. * Returns a boolean indicating whether an attribute with the specified key exists in the element.
  186. *
  187. * @param {String} key Attribute key.
  188. * @returns {Boolean} `true` if attribute with the specified key exists in the element, false otherwise.
  189. */
  190. hasAttribute( key ) {
  191. if ( key == 'class' ) {
  192. return this._classes.size > 0;
  193. }
  194. return this._attrs.has( key );
  195. }
  196. /**
  197. * Adds or overwrite attribute with a specified key and value.
  198. *
  199. * @param {String} key Attribute key.
  200. * @param {String} value Attribute value.
  201. * @fires core.treeView.Node#change
  202. */
  203. setAttribute( key, value ) {
  204. this._fireChange( 'ATTRIBUTES', this );
  205. if ( key == 'class' ) {
  206. const classArray = value.split( /\s+/ );
  207. this._classes.clear();
  208. this.addClass( ...classArray );
  209. } else {
  210. this._attrs.set( key, value );
  211. }
  212. }
  213. /**
  214. * Inserts a child node or a list of child nodes on the given index and sets the parent of these nodes to
  215. * this element.
  216. *
  217. * @param {Number} index Position where nodes should be inserted.
  218. * @param {core.treeView.Node|Iterable.<core.treeView.Node>} nodes Node or the list of nodes to be inserted.
  219. * @fires core.treeView.Node#change
  220. * @returns {Number} Number of inserted nodes.
  221. */
  222. insertChildren( index, nodes ) {
  223. this._fireChange( 'CHILDREN', this );
  224. let count = 0;
  225. if ( !utils.isIterable( nodes ) ) {
  226. nodes = [ nodes ];
  227. }
  228. for ( let node of nodes ) {
  229. node.parent = this;
  230. this._children.splice( index, 0, node );
  231. index++;
  232. count++;
  233. }
  234. return count;
  235. }
  236. /**
  237. * Removes attribute from the element.
  238. *
  239. * @param {String} key Attribute key.
  240. * @returns {Boolean} Returns true if an attribute existed and has been removed.
  241. * @fires core.treeView.Node#change
  242. */
  243. removeAttribute( key ) {
  244. this._fireChange( 'ATTRIBUTES', this );
  245. return this._attrs.delete( key );
  246. }
  247. /**
  248. * Removes number of child nodes starting at the given index and set the parent of these nodes to `null`.
  249. *
  250. * @param {Number} index Number of the first node to remove.
  251. * @param {Number} [howMany=1] Number of nodes to remove.
  252. * @returns {Array.<core.treeView.Node>} The array of removed nodes.
  253. * @fires core.treeView.Node#change
  254. */
  255. removeChildren( index, howMany = 1 ) {
  256. this._fireChange( 'CHILDREN', this );
  257. for ( let i = index; i < index + howMany; i++ ) {
  258. this._children[ i ].parent = null;
  259. }
  260. return this._children.splice( index, howMany );
  261. }
  262. /**
  263. * Checks if this element is similar to other element.
  264. * Both elements should have the same name and attributes to be considered as similar. Two similar elements
  265. * can contain different set of children nodes.
  266. *
  267. * @param {Element} otherElement
  268. * @returns {Boolean}
  269. */
  270. isSimilar( otherElement ) {
  271. if ( !( otherElement instanceof Element ) ) {
  272. return false;
  273. }
  274. // If exactly the same Element is provided - return true immediately.
  275. if ( this === otherElement ) {
  276. return true;
  277. }
  278. // Check element name.
  279. if ( this.name != otherElement.name ) {
  280. return false;
  281. }
  282. // Check number of attributes and classes.
  283. if ( this._attrs.size !== otherElement._attrs.size || this._classes.size !== otherElement._classes.size ) {
  284. return false;
  285. }
  286. // Check if attributes are the same.
  287. for ( let key of this._attrs.keys() ) {
  288. if ( !otherElement._attrs.has( key ) || otherElement._attrs.get( key ) !== this._attrs.get( key ) ) {
  289. return false;
  290. }
  291. }
  292. // Check if classes are the same.
  293. for ( let className of this._classes ) {
  294. if ( !otherElement._classes.has( className ) ) {
  295. return false;
  296. }
  297. }
  298. return true;
  299. }
  300. /**
  301. * Adds specified class.
  302. *
  303. * @example
  304. * element.addClass( 'foo' ); // Adds 'foo' class.
  305. * element.addClass( 'foo', 'bar' ); // Adds 'foo' and 'bar' classes.
  306. *
  307. * @param {...String} className
  308. */
  309. addClass( ...className ) {
  310. className.forEach( name => this._classes.add( name ) );
  311. }
  312. /**
  313. * Removes specified class.
  314. *
  315. * @example
  316. * element.removeClass( 'foo' ); // Removes 'foo' class.
  317. * element.removeClass( 'foo', 'bar' ); // Removes both 'foo' and 'bar' classes.
  318. *
  319. * @param {...String} className
  320. */
  321. removeClass( ...className ) {
  322. className.forEach( name => this._classes.delete( name ) );
  323. }
  324. /**
  325. * Returns true if class is present.
  326. * If more then one class is provided - returns true only when all classes are present.
  327. *
  328. * @example
  329. * element.hasClass( 'foo' ); // Returns true if 'foo' class is present.
  330. * element.hasClass( 'foo', 'bar' ); // Returns true if 'foo' and 'bar' classes are both present.
  331. *
  332. * @param {...String} className
  333. */
  334. hasClass( ...className ) {
  335. for ( let name of className ) {
  336. if ( !this._classes.has( name ) ) {
  337. return false;
  338. }
  339. }
  340. return true;
  341. }
  342. }