Source: JournalPortlet.es.js

  1. /**
  2. * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3. *
  4. * This library is free software; you can redistribute it and/or modify it under
  5. * the terms of the GNU Lesser General Public License as published by the Free
  6. * Software Foundation; either version 2.1 of the License, or (at your option)
  7. * any later version.
  8. *
  9. * This library is distributed in the hope that it will be useful, but WITHOUT
  10. * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11. * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12. * details.
  13. */
  14. import {AOP} from 'frontend-js-web';
  15. import PortletBase from 'frontend-js-web/liferay/PortletBase.es';
  16. import {delegate, on} from 'metal-dom';
  17. import {EventHandler} from 'metal-events';
  18. import {Config} from 'metal-state';
  19. const ACTION_INPUT_NAME = 'javax-portlet-action';
  20. const BUTTON_ROW_CLASS = '.journal-article-button-row';
  21. const SIDEBAR_VISIBLE_CLASS = 'contextual-sidebar-visible';
  22. /**
  23. * JournalPortlet
  24. *
  25. * @abstract
  26. * @extends {PortletBase}
  27. */
  28. class JournalPortlet extends PortletBase {
  29. /**
  30. * @inheritDoc
  31. */
  32. attached() {
  33. const buttonRow = this.one(BUTTON_ROW_CLASS);
  34. this._eventHandler.add(
  35. delegate(
  36. buttonRow,
  37. 'click',
  38. 'button',
  39. this._updateAction.bind(this)
  40. )
  41. );
  42. const form = this._getInputByName(this.ns('fm1'));
  43. this._eventHandler.add(
  44. on(form, 'submit', this._onFormSubmit.bind(this))
  45. );
  46. const resetValuesButton = this._getInputByName(
  47. this.ns('resetValuesButton')
  48. );
  49. if (resetValuesButton) {
  50. this._eventHandler.add(
  51. on(
  52. resetValuesButton,
  53. 'click',
  54. this._resetValuesDDMStructure.bind(this)
  55. )
  56. );
  57. }
  58. this._defaultLocaleChangedHandler = Liferay.after(
  59. 'inputLocalized:defaultLocaleChanged',
  60. this._onDefaultLocaleChange.bind(this)
  61. );
  62. this._localeChangedHandler = Liferay.after(
  63. 'inputLocalized:localeChanged',
  64. this._onLocaleChange.bind(this)
  65. );
  66. this._selectedLanguageId = this.defaultLanguageId;
  67. this._setupSidebar();
  68. }
  69. /**
  70. * @inheritDoc
  71. */
  72. created() {
  73. this._eventHandler = new EventHandler();
  74. }
  75. /**
  76. * @inheritDoc
  77. */
  78. detached() {
  79. this._eventHandler.removeAllListeners();
  80. this._defaultLocaleChangedHandler.detach();
  81. this._localeChangedHandler.detach();
  82. }
  83. /**
  84. * Clean the input if the language is not considered translated when
  85. * submitting the form
  86. * @param {string} name of the input
  87. */
  88. _cleanInputIfNeeded(name) {
  89. const inputComponent = Liferay.component(this.ns(name));
  90. const translatedLanguages = inputComponent.get('translatedLanguages');
  91. if (
  92. !translatedLanguages.has(this._selectedLanguageId) &&
  93. this._selectedLanguageId !== this.defaultLanguageId
  94. ) {
  95. inputComponent.updateInput('');
  96. const form = Liferay.Form.get(this.ns('fm1'));
  97. form.removeRule(this.ns(name), 'required');
  98. }
  99. }
  100. /**
  101. * Query an input by its name
  102. * @param {string} name
  103. * @private
  104. */
  105. _getInputByName(name) {
  106. return document.getElementById(this.ns(name));
  107. }
  108. /**
  109. * @private
  110. */
  111. _onFormSubmit(event) {
  112. event.preventDefault();
  113. const actionInput = this._getInputByName(ACTION_INPUT_NAME);
  114. const actionName = actionInput.value;
  115. this._saveArticle(actionName);
  116. }
  117. /**
  118. * Updates defaultLocale
  119. * @param {Event} event
  120. */
  121. _onDefaultLocaleChange(event) {
  122. if (event.item) {
  123. this.defaultLanguageId = event.item.getAttribute('data-value');
  124. }
  125. }
  126. /**
  127. * Updates description and title values on locale changed
  128. * @param {Event} event
  129. */
  130. _onLocaleChange(event) {
  131. const selectedLanguageId = event.item.getAttribute('data-value');
  132. this._selectedLanguageId = selectedLanguageId;
  133. if (selectedLanguageId) {
  134. this._updateLocalizableInput(
  135. 'descriptionMapAsXML',
  136. this.defaultLanguageId,
  137. selectedLanguageId
  138. );
  139. this._updateLocalizableInput(
  140. 'titleMapAsXML',
  141. this.defaultLanguageId,
  142. selectedLanguageId
  143. );
  144. this._updateLanguageIdInput(selectedLanguageId);
  145. }
  146. }
  147. /**
  148. * @private
  149. */
  150. _resetValuesDDMStructure(event) {
  151. if (
  152. confirm(
  153. Liferay.Language.get(
  154. 'are-you-sure-you-want-to-reset-the-default-values'
  155. )
  156. )
  157. ) {
  158. const button = event.currentTarget;
  159. submitForm(document.hrefFm, button.dataset.url);
  160. }
  161. }
  162. /**
  163. * Prepare action and articleId inputs to submit form
  164. * @param {string} actionName
  165. */
  166. _saveArticle(actionName) {
  167. const articleId = this._getInputByName('articleId').value;
  168. if (actionName === 'publish') {
  169. const workflowActionInput = this._getInputByName('workflowAction');
  170. workflowActionInput.value = Liferay.Workflow.ACTION_PUBLISH;
  171. actionName = null;
  172. }
  173. if (!actionName) {
  174. const classNameId = this._getInputByName('classNameId').value;
  175. if (classNameId > 0) {
  176. actionName = articleId
  177. ? '/journal/update_ddm_structure_default_values'
  178. : '/journal/add_ddm_structure_default_values';
  179. }
  180. else {
  181. actionName = articleId
  182. ? '/journal/update_article'
  183. : '/journal/add_article';
  184. }
  185. }
  186. this._setActionName(actionName);
  187. if (!articleId) {
  188. const articleIdInput = this._getInputByName('articleId');
  189. const newArticleIdInput = this._getInputByName('newArticleId');
  190. articleIdInput.value = newArticleIdInput.value;
  191. }
  192. const form = this._getInputByName(this.ns('fm1'));
  193. this._cleanInputIfNeeded('titleMapAsXML');
  194. this._cleanInputIfNeeded('descriptionMapAsXML');
  195. submitForm(form);
  196. }
  197. /**
  198. * Set the action name in the corresponding input
  199. * @param {string} actionName
  200. */
  201. _setActionName(actionName) {
  202. const actionInput = this._getInputByName(ACTION_INPUT_NAME);
  203. actionInput.value = actionName;
  204. }
  205. /**
  206. * @private
  207. */
  208. _setupSidebar() {
  209. const contextualSidebarButton = document.getElementById(
  210. this.ns('contextualSidebarButton')
  211. );
  212. const contextualSidebarContainer = document.getElementById(
  213. this.ns('contextualSidebarContainer')
  214. );
  215. if (
  216. contextualSidebarContainer &&
  217. window.innerWidth > Liferay.BREAKPOINTS.PHONE
  218. ) {
  219. contextualSidebarContainer.classList.add(SIDEBAR_VISIBLE_CLASS);
  220. }
  221. if (contextualSidebarButton) {
  222. this._eventHandler.add(
  223. on(contextualSidebarButton, 'click', () => {
  224. contextualSidebarContainer.classList.toggle(
  225. SIDEBAR_VISIBLE_CLASS
  226. );
  227. })
  228. );
  229. }
  230. }
  231. /**
  232. * Change the portlet action based on the button clicked
  233. * @param {Event} event
  234. * @private
  235. */
  236. _updateAction(event) {
  237. const button = event.delegateTarget;
  238. const actionName = button.dataset.actionname;
  239. if (actionName) {
  240. this._setActionName(actionName);
  241. }
  242. }
  243. /**
  244. * @private
  245. */
  246. _updateLanguageIdInput(selectedLanguageId) {
  247. const languageIdInput = document.getElementById(this.ns('languageId'));
  248. languageIdInput.value = selectedLanguageId;
  249. }
  250. /**
  251. * Updates the localized input with the default language's translation
  252. * when there is not translation for the selected language
  253. * @param {string} name
  254. * @param {string} defaultLanguageId
  255. * @param {string} selectedLanguageId
  256. * @private
  257. */
  258. _updateLocalizableInput(name, defaultLanguageId, selectedLanguageId) {
  259. const inputComponent = Liferay.component(this.ns(name));
  260. if (inputComponent) {
  261. const inputSelectedValue = inputComponent.getValue(
  262. selectedLanguageId
  263. );
  264. if (inputSelectedValue === '') {
  265. const inputDefaultValue = inputComponent.getValue(
  266. defaultLanguageId
  267. );
  268. // LPS-92493
  269. const eventHandler = AOP.before(
  270. () => AOP.prevent(),
  271. inputComponent,
  272. 'updateInputLanguage'
  273. );
  274. inputComponent.selectFlag(selectedLanguageId);
  275. inputComponent.updateInput(inputDefaultValue);
  276. // setInterval declared in ckeditor.jsp is triggering
  277. // the updateInputLanguage function, so with this
  278. // we guarantee that this function is not called
  279. setTimeout(() => {
  280. eventHandler.detach();
  281. }, 400);
  282. }
  283. }
  284. }
  285. }
  286. JournalPortlet.STATE = {
  287. _selectedLanguageId: Config.internal().string(),
  288. defaultLanguageId: Config.string(),
  289. };
  290. export {JournalPortlet};
  291. export default JournalPortlet;