Chris@0: /**
Chris@0:  * @file
Chris@0:  * Locale admin behavior.
Chris@0:  */
Chris@0: 
Chris@4: (function($, Drupal) {
Chris@0:   /**
Chris@0:    * Marks changes of translations.
Chris@0:    *
Chris@0:    * @type {Drupal~behavior}
Chris@0:    *
Chris@0:    * @prop {Drupal~behaviorAttach} attach
Chris@0:    *   Attaches behavior to show the user if translations has changed.
Chris@0:    * @prop {Drupal~behaviorDetach} detach
Chris@0:    *   Detach behavior to show the user if translations has changed.
Chris@0:    */
Chris@0:   Drupal.behaviors.localeTranslateDirty = {
Chris@0:     attach() {
Chris@4:       const $form = $('#locale-translate-edit-form').once(
Chris@4:         'localetranslatedirty',
Chris@4:       );
Chris@0:       if ($form.length) {
Chris@0:         // Display a notice if any row changed.
Chris@4:         $form.one('formUpdated.localeTranslateDirty', 'table', function() {
Chris@4:           const $marker = $(
Chris@4:             Drupal.theme('localeTranslateChangedWarning'),
Chris@4:           ).hide();
Chris@4:           $(this)
Chris@4:             .addClass('changed')
Chris@4:             .before($marker);
Chris@0:           $marker.fadeIn('slow');
Chris@0:         });
Chris@0:         // Highlight changed row.
Chris@4:         $form.on('formUpdated.localeTranslateDirty', 'tr', function() {
Chris@0:           const $row = $(this);
Chris@0:           const $rowToMark = $row.once('localemark');
Chris@0:           const marker = Drupal.theme('localeTranslateChangedMarker');
Chris@0: 
Chris@0:           $row.addClass('changed');
Chris@0:           // Add an asterisk only once if row changed.
Chris@0:           if ($rowToMark.length) {
Chris@0:             $rowToMark.find('td:first-child .js-form-item').append(marker);
Chris@0:           }
Chris@0:         });
Chris@0:       }
Chris@0:     },
Chris@0:     detach(context, settings, trigger) {
Chris@0:       if (trigger === 'unload') {
Chris@4:         const $form = $('#locale-translate-edit-form').removeOnce(
Chris@4:           'localetranslatedirty',
Chris@4:         );
Chris@0:         if ($form.length) {
Chris@0:           $form.off('formUpdated.localeTranslateDirty');
Chris@0:         }
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Show/hide the description details on Available translation updates page.
Chris@0:    *
Chris@0:    * @type {Drupal~behavior}
Chris@0:    *
Chris@0:    * @prop {Drupal~behaviorAttach} attach
Chris@0:    *   Attaches behavior for toggling details on the translation update page.
Chris@0:    */
Chris@0:   Drupal.behaviors.hideUpdateInformation = {
Chris@0:     attach(context, settings) {
Chris@4:       const $table = $('#locale-translation-status-form').once(
Chris@4:         'expand-updates',
Chris@4:       );
Chris@0:       if ($table.length) {
Chris@0:         const $tbodies = $table.find('tbody');
Chris@0: 
Chris@0:         // Open/close the description details by toggling a tr class.
Chris@4:         $tbodies.on('click keydown', '.description', function(e) {
Chris@0:           if (e.keyCode && (e.keyCode !== 13 && e.keyCode !== 32)) {
Chris@0:             return;
Chris@0:           }
Chris@0:           e.preventDefault();
Chris@0:           const $tr = $(this).closest('tr');
Chris@0: 
Chris@0:           $tr.toggleClass('expanded');
Chris@0: 
Chris@0:           // Change screen reader text.
Chris@0:           $tr.find('.locale-translation-update__prefix').text(() => {
Chris@0:             if ($tr.hasClass('expanded')) {
Chris@0:               return Drupal.t('Hide description');
Chris@0:             }
Chris@0: 
Chris@0:             return Drupal.t('Show description');
Chris@0:           });
Chris@0:         });
Chris@0:         $table.find('.requirements, .links').hide();
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@0: 
Chris@4:   $.extend(
Chris@4:     Drupal.theme,
Chris@4:     /** @lends Drupal.theme */ {
Chris@4:       /**
Chris@4:        * Creates markup for a changed translation marker.
Chris@4:        *
Chris@4:        * @return {string}
Chris@4:        *   Markup for the marker.
Chris@4:        */
Chris@4:       localeTranslateChangedMarker() {
Chris@4:         return `<abbr class="warning ajax-changed" title="${Drupal.t(
Chris@4:           'Changed',
Chris@4:         )}">*</abbr>`;
Chris@4:       },
Chris@0: 
Chris@4:       /**
Chris@4:        * Creates markup for the translation changed warning.
Chris@4:        *
Chris@4:        * @return {string}
Chris@4:        *   Markup for the warning.
Chris@4:        */
Chris@4:       localeTranslateChangedWarning() {
Chris@4:         return `<div class="clearfix messages messages--warning">${Drupal.theme(
Chris@4:           'localeTranslateChangedMarker',
Chris@4:         )} ${Drupal.t(
Chris@4:           'Changes made in this table will not be saved until the form is submitted.',
Chris@4:         )}</div>`;
Chris@4:       },
Chris@0:     },
Chris@4:   );
Chris@4: })(jQuery, Drupal);