API Docs for: 1.0.0
Show:

File: Resources/public/js/views/fields/ez-richtext-view.js

  1. /*
  2. * Copyright (C) eZ Systems AS. All rights reserved.
  3. * For full copyright and license information view LICENSE file distributed with this source code.
  4. */
  5. YUI.add('ez-richtext-view', function (Y) {
  6. "use strict";
  7. /**
  8. * Provides the RichText field view class
  9. *
  10. * @module ez-richtext-view
  11. */
  12. Y.namespace('eZ');
  13.  
  14. /**
  15. * The field view to display RichText fields
  16. *
  17. * @namespace eZ
  18. * @class RichTextView
  19. * @constructor
  20. * @extends eZ.FieldView
  21. * @uses eZ.Processable
  22. */
  23. Y.eZ.RichTextView = Y.Base.create('richtextView', Y.eZ.FieldView, [Y.eZ.Processable], {
  24. events: {
  25. '[href^="ezlocation://"]': {
  26. 'tap': '_navigateTo',
  27. }
  28. },
  29.  
  30. initializer: function () {
  31. /**
  32. * Stores the parsed document from the xhtml5edit version of the
  33. * rich text field. `null` means the document is invalid.
  34. *
  35. * @property _document
  36. * @type {Document|Null}
  37. * @protected
  38. */
  39. this._document = this._getDOMDocument();
  40. this._processEvent = 'activeChange';
  41. },
  42.  
  43.  
  44. /**
  45. * Checks if the internal link is valid ie it has the REST Location id
  46. * and the main language code in data attributes.
  47. *
  48. * @method _isValidInternalLink
  49. * @private
  50. * @param {Node} link
  51. * @return {Boolean}
  52. */
  53. _isValidInternalLink: function (link) {
  54. return (
  55. link.hasAttribute('data-ez-rest-location-id')
  56. && link.hasAttribute('data-ez-main-language-code')
  57. );
  58. },
  59.  
  60. /**
  61. * tap event handler on internal link (`ezlocation://`). If the link is
  62. * valid, it fires `navigateTo` event so that the application navigates
  63. * to the corresponding Location.
  64. *
  65. * @method _navigateTo
  66. * @protected
  67. * @param {EventFacade} e
  68. */
  69. _navigateTo: function (e) {
  70. var link = e.target;
  71.  
  72. e.preventDefault();
  73. if ( this._isValidInternalLink(link) ) {
  74. this.fire('navigateTo', {
  75. route: {
  76. name: 'viewLocation',
  77. params: {
  78. id: link.getAttribute('data-ez-rest-location-id'),
  79. languageCode: link.getAttribute('data-ez-main-language-code'),
  80. },
  81. },
  82. });
  83. }
  84. },
  85.  
  86. _getFieldValue: function () {
  87. var forEach = Array.prototype.forEach;
  88.  
  89. if ( !this._document ) {
  90. return null;
  91. }
  92.  
  93. // make sure the div representing an embed element has some content
  94. // this is to avoid the browser to misinterpret <div/> in the
  95. // markup
  96. forEach.call(this._document.querySelectorAll('[data-ezelement="ezembed"]:empty'), function (div) {
  97. div.textContent = " ";
  98. });
  99.  
  100. return (new XMLSerializer()).serializeToString(this._document.documentElement);
  101. },
  102.  
  103. /**
  104. * Checks whether the field value is empty. A RichText field is
  105. * considered empty if its content was successfully parsed and if the
  106. * *root* `section` element has no child.
  107. *
  108. * @method _isFieldEmpty
  109. * @protected
  110. * @return {Boolean}
  111. */
  112. _isFieldEmpty: function () {
  113. return (this._document && this._document.documentElement.childNodes.length === 0);
  114. },
  115.  
  116. /**
  117. * Returns an additional `parseError` variable indicating whether the
  118. * xhtml5edit version of the rich text field was successfully parsed.
  119. *
  120. * @method _variables
  121. * @protected
  122. * @return {Object}
  123. */
  124. _variables: function () {
  125. return {
  126. parseError: (this._document === null),
  127. };
  128. },
  129.  
  130. /**
  131. * Returns a Document object or null is the parser failed to load the
  132. * xhtml5edit version of the rich text field.
  133. *
  134. * @method _getDOMDocument
  135. * @return {Document}
  136. */
  137. _getDOMDocument: function () {
  138. var doc = (new DOMParser()).parseFromString(this.get('field').fieldValue.xhtml5edit, "text/xml");
  139.  
  140. if ( !doc || !doc.documentElement || doc.documentElement.nodeName === "parsererror" ) {
  141. console.warn(
  142. "Unable to parse the content of the RichText field #" + this.get('field').id
  143. );
  144. return null;
  145. }
  146. return doc;
  147. },
  148. }, {
  149. ATTRS: {
  150. processors: {
  151. valueFn: function () {
  152. return [{
  153. processor: new Y.eZ.RichTextEmbedContainer(),
  154. priority: 255,
  155. }, {
  156. processor: new Y.eZ.RichTextResolveImage(),
  157. priority: 100,
  158. }, {
  159. processor: new Y.eZ.RichTextResolveEmbed(),
  160. priority: 50,
  161. }, {
  162. processor: new Y.eZ.RichTextLocationLink(),
  163. priority: 10,
  164. }];
  165. },
  166. },
  167. }
  168. });
  169.  
  170. Y.eZ.FieldView.registerFieldView('ezrichtext', Y.eZ.RichTextView);
  171. });
  172.