Chris@0: /**
Chris@0:  * @file
Chris@0:  * Locale admin behavior.
Chris@0:  */
Chris@0: 
Chris@0: (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@0:       const $form = $('#locale-translate-edit-form').once('localetranslatedirty');
Chris@0:       if ($form.length) {
Chris@0:         // Display a notice if any row changed.
Chris@0:         $form.one('formUpdated.localeTranslateDirty', 'table', function () {
Chris@0:           const $marker = $(Drupal.theme('localeTranslateChangedWarning')).hide();
Chris@0:           $(this).addClass('changed').before($marker);
Chris@0:           $marker.fadeIn('slow');
Chris@0:         });
Chris@0:         // Highlight changed row.
Chris@0:         $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@0:         const $form = $('#locale-translate-edit-form').removeOnce('localetranslatedirty');
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@0:       const $table = $('#locale-translation-status-form').once('expand-updates');
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@0:         $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@0:   $.extend(Drupal.theme, /** @lends Drupal.theme */{
Chris@0: 
Chris@0:     /**
Chris@0:      * Creates markup for a changed translation marker.
Chris@0:      *
Chris@0:      * @return {string}
Chris@0:      *   Markup for the marker.
Chris@0:      */
Chris@0:     localeTranslateChangedMarker() {
Chris@0:       return `<abbr class="warning ajax-changed" title="${Drupal.t('Changed')}">*</abbr>`;
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Creates markup for the translation changed warning.
Chris@0:      *
Chris@0:      * @return {string}
Chris@0:      *   Markup for the warning.
Chris@0:      */
Chris@0:     localeTranslateChangedWarning() {
Chris@0:       return `<div class="clearfix messages messages--warning">${Drupal.theme('localeTranslateChangedMarker')} ${Drupal.t('Changes made in this table will not be saved until the form is submitted.')}</div>`;
Chris@0:     },
Chris@0:   });
Chris@0: }(jQuery, Drupal));