Merge pull request #2075 from tf/lang-switch

Add translations menu to default navigation bar

app/models/pageflow/draft_entry.rb

@@ -14,6 +14,14 @@ def entry_title
       entry.title
     end
 
+    def translations(scope = -> { self })
+      return [] unless entry.translation_group
+
+      PublishedEntry.wrap_all_drafts(
+        entry.translation_group.entries.instance_exec(&scope)
+      )
+    end
+
     def create_file!(file_type, attributes)
       check_foreign_key_custom_attributes(file_type.custom_attributes, attributes)
 
@@ -77,6 +85,10 @@ def stylesheet_cache_key
       draft.cache_key
     end
 
+    def published_revision?
+      false
+    end
+
     private
 
     def check_foreign_key_custom_attributes(custom_attributes, attributes)

app/models/pageflow/entry_at_revision.rb

@@ -67,5 +67,9 @@ def emphasize_chapter_beginning
     def emphasize_new_pages
       revision.configuration['emphasize_new_pages']
     end
+
+    def self.wrap_all_drafts(entries)
+      entries.includes(:draft).map { |entry| new(entry, entry.draft) }
+    end
   end
 end

app/models/pageflow/published_entry.rb

@@ -23,9 +23,15 @@ def title
     def translations(scope = -> { self })
       return [] unless entry.translation_group
 
-      self.class.wrap_all(
-        entry.translation_group.publicly_visible_entries.instance_exec(&scope)
-      )
+      if published_revision?
+        self.class.wrap_all(
+          entry.translation_group.publicly_visible_entries.instance_exec(&scope)
+        )
+      else
+        self.class.wrap_all_drafts(
+          entry.translation_group.entries.instance_exec(&scope)
+        )
+      end
     end
 
     def stylesheet_model
@@ -87,6 +93,10 @@ def cache_version
       ].compact.join('-').presence
     end
 
+    def published_revision?
+      !custom_revision?
+    end
+
     private
 
     def custom_revision?

entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder

@@ -40,8 +40,8 @@ json.config do
            include_unused: options[:include_unused_additional_seed_data])
   )
 
-  json.partial! 'pageflow_scrolled/entry_json_seed/consent_vendors',
-                entry: entry, entry_config: entry_config
+  json.partial!('pageflow_scrolled/entry_json_seed/consent_vendors', entry:, entry_config:)
+  json.partial!('pageflow_scrolled/entry_json_seed/entry_translations', entry:)
 
   json.file_licenses(
     I18n.t('pageflow.file_licenses', default: {}).slice(*entry_config.available_file_licenses)

entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry_translations.json.jbuilder

@@ -0,0 +1,12 @@
+json.entry_translations do
+  json.array!(entry.translations(-> { preload(:site) })) do |translation|
+    json.(translation, :id, :locale)
+    json.display_locale t('pageflow.public._language', locale: translation.locale)
+
+    if translation.published_revision?
+      json.url social_share_entry_url(translation)
+    else
+      json.url main_app.preview_admin_entry_path(translation)
+    end
+  end
+end

entry_types/scrolled/config/locales/de.yml

@@ -1060,9 +1060,3 @@ de:
       type_text: Text eingeben
       type_title: Titel
       url_placeholder: URL eingeben oder einfügen
-    public:
-      third_party_consent:
-        opt_in_prompt:
-          twitter: Ich bin damit einverstanden, dass Inhalte von Twitter angezeigt werden.
-      twitter:
-        default_title: Tweet

entry_types/scrolled/config/locales/en.yml

@@ -898,9 +898,3 @@ en:
       type_text: Type some text
       type_title: Title
       url_placeholder: Type or paste URL
-    public:
-      third_party_consent:
-        opt_in_prompt:
-          twitter: I agree with being shown content from Twitter.
-      twitter:
-        default_title: Tweet

entry_types/scrolled/package/spec/frontend/MediaPlayerControls-spec.js

@@ -11,7 +11,7 @@ import '@testing-library/jest-dom/extend-expect';
 
 describe('MediaPlayerControls', () => {
   useFakeTranslations({
-    'pageflow_scrolled.public.languages.en': 'English',
+    'pageflow_scrolled.public.languages.fr': 'French',
     'pageflow_scrolled.public.text_track_modes.none': 'Off',
     'pageflow_scrolled.public.text_track_modes.auto_off': 'Auto'
   });
@@ -26,8 +26,8 @@ describe('MediaPlayerControls', () => {
       parentFileModelType: 'Pageflow::AudioFile',
       configuration: {
         kind: 'subtitles',
-        srclang: 'en',
-        label: 'English'
+        srclang: 'fr',
+        label: 'French'
       }
     }]
   };
@@ -51,9 +51,9 @@ describe('MediaPlayerControls', () => {
       {seed}
     );
 
-    fireEvent.click(getByRole('menuitemradio', {name: 'English'}));
+    fireEvent.click(getByRole('menuitemradio', {name: 'French'}));
 
-    expect(getByRole('menuitemradio', {name: 'English'})).toHaveAttribute('aria-checked', 'true');
+    expect(getByRole('menuitemradio', {name: 'French'})).toHaveAttribute('aria-checked', 'true');
   });
 
   it('supports turning text tracks off', () => {

entry_types/scrolled/package/spec/frontend/useTextTracks-spec.js

@@ -20,6 +20,7 @@ describe('useTextTracks', () => {
   const videoFile2CaptionsDePermaId = 4100;
 
   const seed = {
+    entry: {locale: 'en'},
     videoFiles: [
       {id: videoFile1Id, permaId: videoFile1PermaId},
       {id: videoFile2Id, permaId: videoFile2PermaId}
@@ -108,7 +109,7 @@ describe('useTextTracks', () => {
     expect(result.current).toMatchObject({
       activeFileId: videoFile1CaptionsDeId,
       mode: 'user',
-      autoDisplayLabel: 'Auto (Off)'
+      autoDisplayLabel: 'Auto (English)'
     });
   });
 
@@ -122,7 +123,7 @@ describe('useTextTracks', () => {
     expect(result.current).toMatchObject({
       activeFileId: null,
       mode: 'off',
-      autoDisplayLabel: 'Auto (Off)'
+      autoDisplayLabel: 'Auto (English)'
     });
   });
 
@@ -155,12 +156,16 @@ describe('useTextTracks', () => {
     const {result} = renderHookInEntry(() => useTextTracks({
       file: useFile({collectionName: 'videoFiles', permaId: videoFile1PermaId}),
       captionsByDefault: true
-    }), {seed});
+    }), {
+      seed: {
+        ...seed,
+        entry: {locale: 'fr'}
+      }
+    });
 
     expect(result.current).toMatchObject({
       activeFileId: videoFile1CaptionsDeId,
-      mode: 'auto',
-      autoDisplayLabel: 'Auto (Unknown)'
+      mode: 'auto'
     });
   });
 
@@ -170,8 +175,8 @@ describe('useTextTracks', () => {
       captionsByDefault: true
     }), {
       seed: {
+        ...seed,
         entry: {locale: 'en'},
-        ...seed
       }
     });
 

entry_types/scrolled/package/spec/widgets/defaultNavigation/TranslationsMenu-spec.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import {TranslationsMenu} from 'widgets/defaultNavigation/TranslationsMenu';
+
+import '@testing-library/jest-dom/extend-expect';
+import {renderInEntry} from 'support';
+
+describe('TranslationsMenu', () => {
+  it('marks current page in rendered list of translations', async () => {
+    const {getByRole} = renderInEntry(<TranslationsMenu />, {
+      seed: {
+        entry: {
+          id: 5,
+        },
+        entryTranslations: [
+          {
+            id: 5,
+            displayLocale: 'Deutsch',
+            url: '/entry-de'
+          },
+          {
+            id: 6,
+            displayLocale: 'English',
+            url: '/entry-en'
+          }
+        ]
+      }
+    });
+
+    expect(getByRole('link', {name: 'English'})).toHaveAttribute('href', '/entry-en');
+    expect(getByRole('listitem', {current: 'page'})).toHaveTextContent('Deutsch');
+  });
+
+  it('includes shortend uppercased locale in button', async () => {
+    const {getByRole} = renderInEntry(<TranslationsMenu />, {
+      seed: {
+        entry: {
+          id: 5,
+          locale: 'de-ch'
+        },
+        entryTranslations: [
+          {
+            id: 5,
+            displayLocale: 'Deutsch',
+            url: '/entry-de'
+          },
+          {
+            id: 6,
+            displayLocale: 'English',
+            url: '/entry-en'
+          }
+        ]
+      }
+    });
+
+    expect(getByRole('button')).toHaveTextContent(/^DE$/);
+  });
+
+  it('renders nothing if no translations are present', async () => {
+    const {container} = renderInEntry(<TranslationsMenu />, {
+      seed: {
+        entry: {
+          id: 5,
+          locale: 'de-ch'
+        },
+        entryTranslations: []
+      }
+    });
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});

entry_types/scrolled/package/src/entryState/entryTranslations.js

@@ -0,0 +1,6 @@
+import {useEntryStateConfig} from "./EntryStateProvider";
+
+export function useEntryTranslations() {
+  const config = useEntryStateConfig();
+  return config.entryTranslations;
+}

entry_types/scrolled/package/src/entryState/index.js

@@ -1,6 +1,7 @@
 export {useAdditionalSeedData} from './additionalSeedData';
 export {useContentElementConsentVendor} from './consentVendors';
 export {useShareProviders, useShareUrl} from './sharing';
+export {useEntryTranslations} from './entryTranslations';
 export {useEntryMetadata} from './metadata';
 export {
   useEntryStructure,

entry_types/scrolled/package/src/entryState/watchCollections.js

@@ -8,6 +8,7 @@ export function watchCollections(entry, {dispatch}) {
     name: 'entries',
     attributes: [
       'locale',
+      {id: () => entry.id},
       {permaId: () => entry.id}, // Make sure key attribute is present
       {shareProviders: 'share_providers'},
       {shareUrl: 'share_url'},

entry_types/scrolled/package/src/frontend/ThemeIcon.js

@@ -6,6 +6,7 @@ import share from './icons/share.svg';
 import unmuted from './icons/unmuted.svg';
 import gear from './icons/gear.svg';
 import copyright from './icons/copyright.svg';
+import world from './icons/world.svg';
 
 import email from './icons/social/email.svg';
 import facebook from './icons/social/facebook.svg';
@@ -27,6 +28,7 @@ const icons = {
   unmuted,
   gear,
   copyright,
+  world,
 
   email,
   facebook,
@@ -46,7 +48,7 @@ const icons = {
  * @param {string} props.name -
  *   Either: copyright, expand, gear, information, muted, share, unmuted,
  *   email, facebook, linkedIn, telegram, twitter, whatsApp,
- *   arrowLeft, arrowRight,
+ *   arrowLeft, arrowRight, world
  * @params {number} [props.width] - Image width.
  * @params {number} [props.height] - Image height.
  */

entry_types/scrolled/package/src/frontend/index.js

@@ -62,7 +62,9 @@ export {
   useAdditionalSeedData,
   useChapters,
   useCredits,
+  useEntryMetadata,
   useEntryStateDispatch,
+  useEntryTranslations,
   useFile,
   useFileRights,
   useFileWithInlineRights,

entry_types/scrolled/package/src/testHelpers/normalizeSeed.js

@@ -46,10 +46,13 @@ export function normalizeSeed({
   additionalSeedData,
   consentVendors,
   contentElementConsentVendors,
-  fileLicenses
+  fileLicenses,
+  entryTranslations
 } = {}) {
   const entries = entry ? [entry] : [{}];
-  const normalizedEntries = normalizeCollection(entries);
+  const normalizedEntries = normalizeCollection(entries, {
+    locale: 'en'
+  });
 
   const normalizedContentElements = normalizeCollection(contentElements, {
     typeName: 'textBlock',
@@ -87,7 +90,8 @@ export function normalizeSeed({
       },
       consentVendors: consentVendors || [],
       contentElementConsentVendors: contentElementConsentVendors || {},
-      fileLicenses: fileLicenses || {}
+      fileLicenses: fileLicenses || {},
+      entryTranslations: entryTranslations || []
     },
     collections: {
       entries: normalizedEntries,

entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js

@@ -16,6 +16,7 @@ import {
 import {HamburgerIcon} from './HamburgerIcon'
 import {ChapterLink} from "./ChapterLink";
 import {LegalInfoMenu} from "./LegalInfoMenu";
+import {TranslationsMenu} from "./TranslationsMenu";
 import {SharingMenu} from "./SharingMenu";
 import {ToggleMuteButton} from './ToggleMuteButton';
 import {Logo} from './Logo';
@@ -136,6 +137,7 @@ export function DefaultNavigation({configuration}) {
 
         <div className={classNames(styles.contextIcons)}>
           {!configuration.hideToggleMuteButton && <ToggleMuteButton />}
+          <TranslationsMenu />
           {!theme.options.hideLegalInfoButton &&<LegalInfoMenu tooltipOffset={hideSharingButton ? -40 : 0} />}
           {!hideSharingButton && <SharingMenu shareProviders={shareProviders} />}
         </div>

entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css

@@ -21,6 +21,8 @@
   --default-navigation-separator-color:
     var(--theme-default-navigation-separator-color, #e9e9e9);
 
+  --default-navigation-scroller-right: 21%;
+
   font-family: var(--theme-widget-font-family);
   position: fixed;
   top: calc(-1 * var(--default-navigation-bar-height));
@@ -32,6 +34,10 @@
   user-select: none;
 }
 
+.navigationBar:has(.contextIcons > :nth-child(4)) {
+  --default-navigation-scroller-right: 26%;
+}
+
 .navigationBarExpanded {
   top: 0;
 }