8
0

domconverter.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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 ViewText from './text.js';
  7. import ViewElement from './element.js';
  8. import ViewDocumentFragment from './documentfragment.js';
  9. /**
  10. * DomConverter is a set of tools to do transformations between DOM nodes and view nodes. It also handles
  11. * {@link engine.treeView.DomConverter#bindElements binding} these nodes.
  12. *
  13. * DomConverter does not check which nodes should be rendered (use {@link engine.treeView.Renderer}), does not keep a
  14. * state of a tree nor keeps synchronization between tree view and DOM tree (use {@link engine.treeView.TreeView}).
  15. *
  16. * DomConverter keeps DOM elements to View element bindings, so when the converter will be destroyed, the binding will
  17. * be lost. Two converters will keep separate binding maps, so one tree view can be bound with two DOM trees.
  18. *
  19. * @memberOf engine.treeView
  20. */
  21. export default class DomConverter {
  22. /**
  23. * Creates DOM converter.
  24. */
  25. constructor() {
  26. // Using WeakMap prevent memory leaks: when the converter will be destroyed all referenced between View and DOM
  27. // will be removed. Also because it is a *Weak*Map when both view and DOM elements will be removed referenced
  28. // will be also removed, isn't it brilliant?
  29. //
  30. // Yes, PJ. It is.
  31. //
  32. // You guys so smart.
  33. /**
  34. * DOM to View mapping.
  35. *
  36. * @private
  37. * @member {WeakMap} engine.treeView.DomConverter#_domToViewMapping
  38. */
  39. this._domToViewMapping = new WeakMap();
  40. /**
  41. * View to DOM mapping.
  42. *
  43. * @private
  44. * @member {WeakMap} engine.treeView.DomConverter#_viewToDomMapping
  45. */
  46. this._viewToDomMapping = new WeakMap();
  47. }
  48. /**
  49. * Binds DOM and View elements, so it will be possible to get corresponding elements using
  50. * {@link engine.treeView.DomConverter#getCorrespondingViewElement getCorrespondingViewElement} and
  51. * {@link engine.treeView.DomConverter#getCorrespondingDomElement getCorrespondingDomElement}.
  52. *
  53. * @param {HTMLElement} domElement DOM element to bind.
  54. * @param {engine.treeView.Element} viewElement View element to bind.
  55. */
  56. bindElements( domElement, viewElement ) {
  57. this._domToViewMapping.set( domElement, viewElement );
  58. this._viewToDomMapping.set( viewElement, domElement );
  59. }
  60. /**
  61. * Binds DOM and View document fragments, so it will be possible to get corresponding document fragments using
  62. * {@link engine.treeView.DomConverter#getCorrespondingViewDocumentFragment getCorrespondingViewDocumentFragment} and
  63. * {@link engine.treeView.DomConverter#getCorrespondingDomDocumentFragment getCorrespondingDomDocumentFragment}.
  64. *
  65. * @param {DocumentFragment} domFragment DOM document fragment to bind.
  66. * @param {engine.treeView.DocumentFragment} viewFragment View document fragment to bind.
  67. */
  68. bindDocumentFragments( domFragment, viewFragment ) {
  69. this._domToViewMapping.set( domFragment, viewFragment );
  70. this._viewToDomMapping.set( viewFragment, domFragment );
  71. }
  72. /**
  73. * Compares DOM and View nodes. Elements are same when they are bound. Text nodes are same when they have the same
  74. * text data. Nodes need to have corresponding types. In all other cases nodes are different.
  75. *
  76. * @param {Node} domNode DOM node to compare.
  77. * @param {engine.treeView.Node} viewNode View node to compare.
  78. * @returns {Boolean} True if nodes are same.
  79. */
  80. compareNodes( domNode, viewNode ) {
  81. // Elements.
  82. if ( domNode instanceof HTMLElement && viewNode instanceof ViewElement ) {
  83. return domNode === this.getCorrespondingDomElement( viewNode );
  84. }
  85. // Texts.
  86. else if ( domNode instanceof Text && viewNode instanceof ViewText ) {
  87. return domNode.data === viewNode.data;
  88. }
  89. // Not matching types.
  90. return false;
  91. }
  92. /**
  93. * Converts view to DOM. For all text nodes, not bound elements and document fragments new items will
  94. * be created. For bound elements and document fragments function will return corresponding items.
  95. *
  96. * @param {engine.treeView.Node|engine.treeView.DocumentFragment} viewNode View node or document fragment to transform.
  97. * @param {document} domDocument Document which will be used to create DOM nodes.
  98. * @param {Object} [options] Conversion options.
  99. * @param {Boolean} [options.bind=false] Determines whether new elements will be bound.
  100. * @param {Boolean} [options.withChildren=true] If true node's and document fragment's children will be converted too.
  101. * @returns {Node|DocumentFragment} Converted node or DocumentFragment.
  102. */
  103. viewToDom( viewNode, domDocument, options ) {
  104. if ( !options ) {
  105. options = {};
  106. }
  107. if ( viewNode instanceof ViewText ) {
  108. return domDocument.createTextNode( viewNode.data );
  109. } else {
  110. if ( this.getCorrespondingDom( viewNode ) ) {
  111. return this.getCorrespondingDom( viewNode );
  112. }
  113. let domElement;
  114. if ( viewNode instanceof ViewDocumentFragment ) {
  115. // Create DOM document fragment.
  116. domElement = domDocument.createDocumentFragment();
  117. if ( options.bind ) {
  118. this.bindDocumentFragments( domElement, viewNode );
  119. }
  120. } else {
  121. // Create DOM element.
  122. domElement = domDocument.createElement( viewNode.name );
  123. if ( options.bind ) {
  124. this.bindElements( domElement, viewNode );
  125. }
  126. // Copy element's attributes.
  127. for ( let key of viewNode.getAttributeKeys() ) {
  128. domElement.setAttribute( key, viewNode.getAttribute( key ) );
  129. }
  130. }
  131. if ( options.withChildren || options.withChildren === undefined ) {
  132. for ( let childView of viewNode.getChildren() ) {
  133. domElement.appendChild( this.viewToDom( childView, domDocument, options ) );
  134. }
  135. }
  136. return domElement;
  137. }
  138. }
  139. /**
  140. * Converts DOM to view. For all text nodes, not bound elements and document fragments new items will
  141. * be created. For bound elements and document fragments function will return corresponding items.
  142. *
  143. * @param {Node|DocumentFragment} domNode DOM node or document fragment to transform.
  144. * @param {Object} [options] Conversion options.
  145. * @param {Boolean} [options.bind=false] Determines whether new elements will be bound.
  146. * @param {Boolean} [options.withChildren=true] It true node's and document fragment's children will be converted too.
  147. * @returns {engine.treeView.Node|engine.treeView.DocumentFragment} Converted node or document fragment.
  148. */
  149. domToView( domNode, options ) {
  150. if ( !options ) {
  151. options = {};
  152. }
  153. if ( domNode instanceof Text ) {
  154. return new ViewText( domNode.data );
  155. } else {
  156. if ( this.getCorrespondingView( domNode ) ) {
  157. return this.getCorrespondingView( domNode );
  158. }
  159. let viewElement;
  160. if ( domNode instanceof DocumentFragment ) {
  161. // Create view document fragment.
  162. viewElement = new ViewDocumentFragment();
  163. if ( options.bind ) {
  164. this.bindDocumentFragments( domNode, viewElement );
  165. }
  166. } else {
  167. // Create view element.
  168. viewElement = new ViewElement( domNode.tagName.toLowerCase() );
  169. if ( options.bind ) {
  170. this.bindElements( domNode, viewElement );
  171. }
  172. // Copy element's attributes.
  173. const attrs = domNode.attributes;
  174. for ( let i = attrs.length - 1; i >= 0; i-- ) {
  175. viewElement.setAttribute( attrs[ i ].name, attrs[ i ].value );
  176. }
  177. }
  178. if ( options.withChildren || options.withChildren === undefined ) {
  179. for ( let i = 0, len = domNode.childNodes.length; i < len; i++ ) {
  180. let domChild = domNode.childNodes[ i ];
  181. viewElement.appendChildren( this.domToView( domChild, options ) );
  182. }
  183. }
  184. return viewElement;
  185. }
  186. }
  187. /**
  188. * Gets corresponding view item. This function use
  189. * {@link engine.treeView.DomConverter#getCorrespondingViewElement getCorrespondingViewElement}
  190. * for elements, {@link engine.treeView.DomConverter#getCorrespondingViewText getCorrespondingViewText} for text
  191. * nodes and {@link engine.treeView.DomConverter#getCorrespondingViewDocumentFragment getCorrespondingViewDocumentFragment}
  192. * for document fragments.
  193. *
  194. * @param {Node|DocumentFragment} domNode DOM node or document fragment.
  195. * @returns {engine.treeView.Node|engine.treeView.DocumentFragment|null} Corresponding view item.
  196. */
  197. getCorrespondingView( domNode ) {
  198. if ( domNode instanceof HTMLElement ) {
  199. return this.getCorrespondingViewElement( domNode );
  200. } else if ( domNode instanceof DocumentFragment ) {
  201. return this.getCorrespondingViewDocumentFragment( domNode );
  202. } else {
  203. return this.getCorrespondingViewText( domNode );
  204. }
  205. }
  206. /**
  207. * Gets corresponding view element. Returns element if an view element was
  208. * {@link engine.treeView.DomConverter#bindElements bound} to the given DOM element or null otherwise.
  209. *
  210. * @param {HTMLElement} domElement DOM element.
  211. * @returns {engine.treeView.Element|null} Corresponding element or null if no element was bound.
  212. */
  213. getCorrespondingViewElement( domElement ) {
  214. return this._domToViewMapping.get( domElement );
  215. }
  216. /**
  217. * Gets corresponding view document fragment. Returns document fragment if an view element was
  218. * {@link engine.treeView.DomConverter#bindDocumentFragments bound} to the given DOM fragment or null otherwise.
  219. *
  220. * @param {DocumentFragment} domFragment DOM element.
  221. * @returns {engine.treeView.DocumentFragment|null} Corresponding document fragment or null if none element was bound.
  222. */
  223. getCorrespondingViewDocumentFragment( domFragment ) {
  224. return this._domToViewMapping.get( domFragment );
  225. }
  226. /**
  227. * Gets corresponding text node. Text nodes are not {@link engine.treeView.DomConverter#bindElements bound},
  228. * corresponding text node is returned based on the sibling or parent.
  229. *
  230. * If the directly previous sibling is a {@link engine.treeView.DomConverter#bindElements bound} element, it is used
  231. * to find the corresponding text node.
  232. *
  233. * If this is a first child in the parent and the parent is a {@link engine.treeView.DomConverter#bindElements bound}
  234. * element, it is used to find the corresponding text node.
  235. *
  236. * Otherwise `null` is returned.
  237. *
  238. * @param {Text} domText DOM text node.
  239. * @returns {engine.treeView.Text|null} Corresponding view text node or null, if it was not possible to find a
  240. * corresponding node.
  241. */
  242. getCorrespondingViewText( domText ) {
  243. const previousSibling = domText.previousSibling;
  244. // Try to use previous sibling to find the corresponding text node.
  245. if ( previousSibling ) {
  246. if ( !( previousSibling instanceof HTMLElement ) ) {
  247. // The previous is text or comment.
  248. return null;
  249. }
  250. const viewElement = this.getCorrespondingViewElement( previousSibling );
  251. if ( viewElement ) {
  252. return viewElement.getNextSibling();
  253. }
  254. }
  255. // Try to use parent to find the corresponding text node.
  256. else {
  257. const viewElement = this.getCorrespondingViewElement( domText.parentElement );
  258. if ( viewElement ) {
  259. return viewElement.getChild( 0 );
  260. }
  261. }
  262. return null;
  263. }
  264. /**
  265. * Gets corresponding DOM item. This function uses
  266. * {@link engine.treeView.DomConverter#getCorrespondingDomElement getCorrespondingDomElement} for
  267. * elements, {@link engine.treeView.DomConverter#getCorrespondingDomText getCorrespondingDomText} for text nodes
  268. * and {@link engine.treeView.DomConverter#getCorrespondingDomDocumentFragment getCorrespondingDomDocumentFragment}
  269. * for document fragments.
  270. *
  271. * @param {engine.treeView.Node|engine.treeView.DomFragment} viewNode View node or document fragment.
  272. * @returns {Node|DocumentFragment|null} Corresponding DOM node or document fragment.
  273. */
  274. getCorrespondingDom( viewNode ) {
  275. if ( viewNode instanceof ViewElement ) {
  276. return this.getCorrespondingDomElement( viewNode );
  277. } else if ( viewNode instanceof ViewDocumentFragment ) {
  278. return this.getCorrespondingDomDocumentFragment( viewNode );
  279. } else {
  280. return this.getCorrespondingDomText( viewNode );
  281. }
  282. }
  283. /**
  284. * Gets corresponding DOM element. Returns element if an DOM element was
  285. * {@link engine.treeView.DomConverter#bindElements bound} to the given view element or null otherwise.
  286. *
  287. * @param {engine.treeView.Element} viewElement View element.
  288. * @returns {HTMLElement|null} Corresponding element or null if none element was bound.
  289. */
  290. getCorrespondingDomElement( viewElement ) {
  291. return this._viewToDomMapping.get( viewElement );
  292. }
  293. /**
  294. * Gets corresponding DOM document fragment. Returns document fragment if an DOM element was
  295. * {@link engine.treeView.DomConverter#bindDocumentFragments bound} to the given view document fragment or null otherwise.
  296. *
  297. * @param {engine.treeView.DocumentFragment} viewDocumentFragment View document fragment.
  298. * @returns {DocumentFragment|null} Corresponding document fragment or null if no fragment was bound.
  299. */
  300. getCorrespondingDomDocumentFragment( viewDocumentFragment ) {
  301. return this._viewToDomMapping.get( viewDocumentFragment );
  302. }
  303. /**
  304. * Gets corresponding text node. Text nodes are not {@link engine.treeView.DomConverter#bindElements bound},
  305. * corresponding text node is returned based on the sibling or parent.
  306. *
  307. * If the directly previous sibling is a {@link engine.treeView.DomConverter#bindElements bound} element, it is used
  308. * to find the corresponding text node.
  309. *
  310. * If this is a first child in the parent and the parent is a {@link engine.treeView.DomConverter#bindElements bound}
  311. * element, it is used to find the corresponding text node.
  312. *
  313. * Otherwise null is returned.
  314. *
  315. * @param {engine.treeView.Text} viewText View text node.
  316. * @returns {Text|null} Corresponding DOM text node or null, if it was not possible to find a corresponding node.
  317. */
  318. getCorrespondingDomText( viewText ) {
  319. const previousSibling = viewText.getPreviousSibling();
  320. // Try to use previous sibling to find the corresponding text node.
  321. if ( previousSibling && this.getCorrespondingDom( previousSibling ) ) {
  322. return this.getCorrespondingDom( previousSibling ).nextSibling;
  323. }
  324. // Try to use parent to find the corresponding text node.
  325. if ( !previousSibling && this.getCorrespondingDom( viewText.parent ) ) {
  326. return this.getCorrespondingDom( viewText.parent ).childNodes[ 0 ];
  327. }
  328. return null;
  329. }
  330. }