8
0

element.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  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. /**
  76. * Clones provided element.
  77. *
  78. * @param {Boolean} deep If set to `true` clones element and all its children recursively. When set to `false`,
  79. * element will be cloned without any children.
  80. * @returns {Element} Clone of this element.
  81. */
  82. clone( deep ) {
  83. const childrenClone = [];
  84. if ( deep ) {
  85. for ( let child of this.getChildren() ) {
  86. childrenClone.push( child.clone( deep ) );
  87. }
  88. }
  89. const cloned = new Element( this.name, this._attrs, childrenClone );
  90. cloned._classes = new Set( this._classes );
  91. return cloned;
  92. }
  93. /**
  94. * {@link core.treeView.Element#insert Insert} a child node or a list of child nodes at the end of this node and sets
  95. * the parent of these nodes to this element.
  96. *
  97. * @fires core.treeView.Node#change
  98. * @param {core.treeView.Node|Iterable.<core.treeView.Node>} nodes Node or the list of nodes to be inserted.
  99. * @returns {Number} Number of appended nodes.
  100. */
  101. appendChildren( nodes ) {
  102. return this.insertChildren( this.getChildCount(), nodes );
  103. }
  104. /**
  105. * Gets child at the given index.
  106. *
  107. * @param {Number} index Index of child.
  108. * @returns {core.treeView.Node} Child node.
  109. */
  110. getChild( index ) {
  111. return this._children[ index ];
  112. }
  113. /**
  114. * Gets the number of element's children.
  115. *
  116. * @returns {Number} The number of element's children.
  117. */
  118. getChildCount() {
  119. return this._children.length;
  120. }
  121. /**
  122. * Gets index of the given child node. Returns `-1` if child node is not found.
  123. *
  124. * @param {core.treeView.Node} node Child node.
  125. * @returns {Number} Index of the child node.
  126. */
  127. getChildIndex( node ) {
  128. return this._children.indexOf( node );
  129. }
  130. /**
  131. * Gets child nodes iterator.
  132. *
  133. * @returns {Iterable.<core.treeView.Node>} Child nodes iterator.
  134. */
  135. getChildren() {
  136. return this._children[ Symbol.iterator ]();
  137. }
  138. /**
  139. * Returns an iterator that contains the keys for attributes.
  140. *
  141. * @returns {Iterator.<String>} Keys for attributes.
  142. */
  143. *getAttributeKeys() {
  144. if ( this._classes.size > 0 ) {
  145. yield 'class';
  146. }
  147. yield* this._attrs.keys();
  148. }
  149. /**
  150. * Gets attribute by key. If attribute is not present - returns undefined.
  151. *
  152. * @param {String} key Attribute key.
  153. * @returns {String|undefined} Attribute value.
  154. */
  155. getAttribute( key ) {
  156. if ( key == 'class' ) {
  157. if ( this._classes.size > 0 ) {
  158. return [ ...this._classes ].join( ' ' );
  159. }
  160. return undefined;
  161. }
  162. return this._attrs.get( key );
  163. }
  164. /**
  165. * Returns a boolean indicating whether an attribute with the specified key exists in the element.
  166. *
  167. * @param {String} key Attribute key.
  168. * @returns {Boolean} `true` if attribute with the specified key exists in the element, false otherwise.
  169. */
  170. hasAttribute( key ) {
  171. if ( key == 'class' ) {
  172. return this._classes.size > 0;
  173. }
  174. return this._attrs.has( key );
  175. }
  176. /**
  177. * Adds or overwrite attribute with a specified key and value.
  178. *
  179. * @param {String} key Attribute key.
  180. * @param {String} value Attribute value.
  181. * @fires core.treeView.Node#change
  182. */
  183. setAttribute( key, value ) {
  184. this._fireChange( 'ATTRIBUTES', this );
  185. if ( key == 'class' ) {
  186. const classArray = value.split( /\s+/ );
  187. this._classes.clear();
  188. this.addClass( ...classArray );
  189. } else {
  190. this._attrs.set( key, value );
  191. }
  192. }
  193. /**
  194. * Inserts a child node or a list of child nodes on the given index and sets the parent of these nodes to
  195. * this element.
  196. *
  197. * @param {Number} index Position where nodes should be inserted.
  198. * @param {core.treeView.Node|Iterable.<core.treeView.Node>} nodes Node or the list of nodes to be inserted.
  199. * @fires core.treeView.Node#change
  200. * @returns {Number} Number of inserted nodes.
  201. */
  202. insertChildren( index, nodes ) {
  203. this._fireChange( 'CHILDREN', this );
  204. let count = 0;
  205. if ( !utils.isIterable( nodes ) ) {
  206. nodes = [ nodes ];
  207. }
  208. for ( let node of nodes ) {
  209. node.parent = this;
  210. this._children.splice( index, 0, node );
  211. index++;
  212. count++;
  213. }
  214. return count;
  215. }
  216. /**
  217. * Removes attribute from the element.
  218. *
  219. * @param {String} key Attribute key.
  220. * @returns {Boolean} Returns true if an attribute existed and has been removed.
  221. * @fires core.treeView.Node#change
  222. */
  223. removeAttribute( key ) {
  224. this._fireChange( 'ATTRIBUTES', this );
  225. return this._attrs.delete( key );
  226. }
  227. /**
  228. * Removes number of child nodes starting at the given index and set the parent of these nodes to `null`.
  229. *
  230. * @param {Number} index Number of the first node to remove.
  231. * @param {Number} [howMany=1] Number of nodes to remove.
  232. * @returns {Array.<core.treeView.Node>} The array of removed nodes.
  233. * @fires core.treeView.Node#change
  234. */
  235. removeChildren( index, howMany = 1 ) {
  236. this._fireChange( 'CHILDREN', this );
  237. for ( let i = index; i < index + howMany; i++ ) {
  238. this._children[ i ].parent = null;
  239. }
  240. return this._children.splice( index, howMany );
  241. }
  242. /**
  243. * Checks if this element is similar to other element.
  244. * Both elements should have the same name and attributes to be considered as similar. Two similar elements
  245. * can contain different set of children nodes.
  246. *
  247. * @param {Element} otherElement
  248. * @returns {Boolean}
  249. */
  250. isSimilar( otherElement ) {
  251. if ( !( otherElement instanceof Element ) ) {
  252. return false;
  253. }
  254. // If exactly the same Element is provided - return true immediately.
  255. if ( this === otherElement ) {
  256. return true;
  257. }
  258. // Check name and attributes.
  259. if ( this.name != otherElement.name ) {
  260. return false;
  261. }
  262. const thisNodeAttrKeys = this.getAttributeKeys();
  263. const otherNodeAttrKeys = otherElement.getAttributeKeys();
  264. let count = 0;
  265. for ( let key of thisNodeAttrKeys ) {
  266. if ( this.getAttribute( key ) !== otherElement.getAttribute( key ) ) {
  267. return false;
  268. }
  269. count++;
  270. }
  271. if ( count != utils.count( otherNodeAttrKeys ) ) {
  272. return false;
  273. }
  274. return true;
  275. }
  276. /**
  277. * Adds specified class.
  278. *
  279. * @example
  280. * element.addClass( 'foo' ); // Adds 'foo' class.
  281. * element.addClass( 'foo', 'bar' ); // Adds 'foo' and 'bar' classes.
  282. *
  283. * @param {...String} className
  284. */
  285. addClass( ...className ) {
  286. className.forEach( name => this._classes.add( name ) );
  287. }
  288. /**
  289. * Removes specified class.
  290. *
  291. * @example
  292. * element.removeClass( 'foo' ); // Removes 'foo' class.
  293. * element.removeClass( 'foo', 'bar' ); // Removes both 'foo' and 'bar' classes.
  294. *
  295. * @param {...String} className
  296. */
  297. removeClass( ...className ) {
  298. className.forEach( name => this._classes.delete( name ) );
  299. }
  300. /**
  301. * Returns true if class is present.
  302. * If more then one class is provided - returns true only when all classes are present.
  303. *
  304. * @example
  305. * element.hasClass( 'foo' ); // Returns true if 'foo' class is present.
  306. * element.hasClass( 'foo', 'bar' ); // Returns true if 'foo' and 'bar' classes are both present.
  307. *
  308. * @param {...String} className
  309. */
  310. hasClass( ...className ) {
  311. for ( let name of className ) {
  312. if ( !this._classes.has( name ) ) {
  313. return false;
  314. }
  315. }
  316. return true;
  317. }
  318. }