locale.admin.es6.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. /**
  2. * @file
  3. * Locale admin behavior.
  4. */
  5. (function($, Drupal) {
  6. /**
  7. * Marks changes of translations.
  8. *
  9. * @type {Drupal~behavior}
  10. *
  11. * @prop {Drupal~behaviorAttach} attach
  12. * Attaches behavior to show the user if translations has changed.
  13. * @prop {Drupal~behaviorDetach} detach
  14. * Detach behavior to show the user if translations has changed.
  15. */
  16. Drupal.behaviors.localeTranslateDirty = {
  17. attach() {
  18. const $form = $('#locale-translate-edit-form').once(
  19. 'localetranslatedirty',
  20. );
  21. if ($form.length) {
  22. // Display a notice if any row changed.
  23. $form.one('formUpdated.localeTranslateDirty', 'table', function() {
  24. const $marker = $(
  25. Drupal.theme('localeTranslateChangedWarning'),
  26. ).hide();
  27. $(this)
  28. .addClass('changed')
  29. .before($marker);
  30. $marker.fadeIn('slow');
  31. });
  32. // Highlight changed row.
  33. $form.on('formUpdated.localeTranslateDirty', 'tr', function() {
  34. const $row = $(this);
  35. const $rowToMark = $row.once('localemark');
  36. const marker = Drupal.theme('localeTranslateChangedMarker');
  37. $row.addClass('changed');
  38. // Add an asterisk only once if row changed.
  39. if ($rowToMark.length) {
  40. $rowToMark.find('td:first-child .js-form-item').append(marker);
  41. }
  42. });
  43. }
  44. },
  45. detach(context, settings, trigger) {
  46. if (trigger === 'unload') {
  47. const $form = $('#locale-translate-edit-form').removeOnce(
  48. 'localetranslatedirty',
  49. );
  50. if ($form.length) {
  51. $form.off('formUpdated.localeTranslateDirty');
  52. }
  53. }
  54. },
  55. };
  56. /**
  57. * Show/hide the description details on Available translation updates page.
  58. *
  59. * @type {Drupal~behavior}
  60. *
  61. * @prop {Drupal~behaviorAttach} attach
  62. * Attaches behavior for toggling details on the translation update page.
  63. */
  64. Drupal.behaviors.hideUpdateInformation = {
  65. attach(context, settings) {
  66. const $table = $('#locale-translation-status-form').once(
  67. 'expand-updates',
  68. );
  69. if ($table.length) {
  70. const $tbodies = $table.find('tbody');
  71. // Open/close the description details by toggling a tr class.
  72. $tbodies.on('click keydown', '.description', function(e) {
  73. if (e.keyCode && e.keyCode !== 13 && e.keyCode !== 32) {
  74. return;
  75. }
  76. e.preventDefault();
  77. const $tr = $(this).closest('tr');
  78. $tr.toggleClass('expanded');
  79. // Change screen reader text.
  80. $tr.find('.locale-translation-update__prefix').text(() => {
  81. if ($tr.hasClass('expanded')) {
  82. return Drupal.t('Hide description');
  83. }
  84. return Drupal.t('Show description');
  85. });
  86. });
  87. $table.find('.requirements, .links').hide();
  88. }
  89. },
  90. };
  91. $.extend(
  92. Drupal.theme,
  93. /** @lends Drupal.theme */ {
  94. /**
  95. * Creates markup for a changed translation marker.
  96. *
  97. * @return {string}
  98. * Markup for the marker.
  99. */
  100. localeTranslateChangedMarker() {
  101. return `<abbr class="warning ajax-changed" title="${Drupal.t(
  102. 'Changed',
  103. )}">*</abbr>`;
  104. },
  105. /**
  106. * Creates markup for the translation changed warning.
  107. *
  108. * @return {string}
  109. * Markup for the warning.
  110. */
  111. localeTranslateChangedWarning() {
  112. return `<div class="clearfix messages messages--warning">${Drupal.theme(
  113. 'localeTranslateChangedMarker',
  114. )} ${Drupal.t(
  115. 'Changes made in this table will not be saved until the form is submitted.',
  116. )}</div>`;
  117. },
  118. },
  119. );
  120. })(jQuery, Drupal);