Add inline help to text track attributes

For this, also
- add nested file translation prefixes to EditFileView,
- enable HTML translations in InputView-Mixin.

app/assets/javascripts/pageflow/editor/views/edit_file_view.js

@@ -10,7 +10,9 @@ pageflow.EditFileView = Backbone.Marionette.ItemView.extend({
       model: this.model.configuration,
       attributeTranslationKeyPrefixes: [
         'pageflow.editor.files.attributes.' + fileType.collectionName,
-        'pageflow.editor.files.common_attributes'
+        'pageflow.editor.files.common_attributes',
+        'pageflow.editor.nested_files.' + fileType.collectionName,
+        'pageflow.editor.nested_files.common_attributes'
       ]
     });
 

app/assets/javascripts/pageflow/editor/views/text_tracks_view.js

@@ -27,7 +27,8 @@ pageflow.TextTracksView = Backbone.Marionette.Layout.extend({
       fileType: pageflow.editor.fileTypes.findByCollectionName('text_track_files'),
       selection: this.selection,
       model: this.model,
-      tableBlankSlateText: I18n.t('pageflow.editor.nested_files.text_track_files.no_files_blank_slate')
+      tableBlankSlateText:
+      I18n.t('pageflow.editor.nested_files.text_track_files.no_files_blank_slate')
     });
 
     this.ui.filesPanel.append(this.subview(this.nestedFilesView).el);
@@ -45,7 +46,10 @@ pageflow.TextTracksView = Backbone.Marionette.Layout.extend({
     var selectedFile = this.selection.get('file');
     if (selectedFile) {
       this.selectedFileRegion.show(new pageflow.EditFileView({
-        model: selectedFile
+        model: selectedFile,
+        attributeTranslationKeyPrefixes: [
+          'pageflow.editor.nested_files.text_track_files'
+        ]
       }));
       this.ui.selectedFileHeader.toggle(true);
     }

app/assets/javascripts/pageflow/ui/views/mixins/input_view.js

@@ -15,6 +15,7 @@
  *
  * will be used for the label. And the key
  *
+ *     pageflow.ui.inline_help.page.title_html
  *     pageflow.ui.inline_help.page.title
  *
  * will be used for the inline help.
@@ -35,8 +36,11 @@
  *
  * Accordingly, for the inline help:
  *
+ *     some.attributes.title.inline_help_html
  *     some.attributes.title.inline_help
+ *     fallback.attributes.title.inline_help_html
  *     fallback.attributes.title.inline_help
+ *     pageflow.ui.inline_help.post.title_html
  *     pageflow.ui.inline_help.post.title
  *
  * This setup allows to keep all translation keys for an attribute
@@ -57,12 +61,18 @@
  * attribute translation key prefixes take precedence over suffixed
  * keys:
  *
+ *     some.attributes.title.inline_help_html
  *     some.attributes.title.inline_help
+ *     some.attributes.title.inline_help_disabled_html
  *     some.attributes.title.inline_help_disabled
+ *     fallback.attributes.title.inline_help_html
  *     fallback.attributes.title.inline_help
+ *     fallback.attributes.title.inline_help_disabled_html
  *     fallback.attributes.title.inline_help_disabled
+ *     pageflow.ui.inline_help.post.title_html
  *     pageflow.ui.inline_help.post.title
- *     pageflow.ui.inline_help.post.title_disabled *
+ *     pageflow.ui.inline_help.post.title_disabled_html
+ *     pageflow.ui.inline_help.post.title_disabled
  *
  * @param {string} options
  *   Common constructor options for all views that include this mixin.
@@ -80,10 +90,10 @@
  * @param {boolean} [options.disabled]
  *   Render input as disabled.
  *
- * @param {string} [options.visibleBinding] Name of an attribute to
- *   control whether the input is visible. If the `visible` and
- *   `visibleBindingValue` options are not set, input will be visible
- *   whenever this attribute has a truthy value.
+ * @param {string} [options.visibleBinding]
+ *   Name of an attribute to control whether the input is visible. If
+ *   the `visible` and `visibleBindingValue` options are not set,
+ *   input will be visible whenever this attribute has a truthy value.
  *
  * @param {function|boolean} [options.visible]
  *   A Function taking the value of the `visibleBinding` attribute as
@@ -148,7 +158,7 @@ pageflow.inputView = {
     this.$el.data('inputPropertyName', this.options.propertyName);
 
     this.ui.labelText.text(this.labelText());
-    this.ui.inlineHelp.text(this.inlineHelpText());
+    this.ui.inlineHelp.html(this.inlineHelpText());
 
     if (!this.inlineHelpText()) {
       this.ui.inlineHelp.hide();
@@ -181,7 +191,7 @@ pageflow.inputView = {
       keys = pageflow.i18nUtils.translationKeysWithSuffix(keys, 'disabled');
     }
 
-    return pageflow.i18nUtils.findTranslation(keys, {defaultValue: ''});
+    return pageflow.i18nUtils.findTranslation(keys, {defaultValue: '', html: true});
   },
 
   updateDisabled: function() {

config/locales/new/video_subtitles.de.yml

@@ -17,28 +17,39 @@ de:
           text_track_tab: Textspuren
           video_settings_tab: Video-Details
       files:
+        common_attributes:
+          original_url:
+            label: Original
         settings_dialog_tabs:
           text_tracks: Textspuren
       nested_files:
         text_track_files:
           delete:
             column_header: ''
             cell_title: Textspur löschen
+          file_name:
+            inline_help_html: <ul><li>Wenn der Dateiname dem Schema <strong>dateiname.wx_YZ.vtt</strong> folgt, findet Pageflow automatisch den Sprachcode, in diesem Fall <strong>wx</strong>.</li><li>Ein <strong>Beispiel-Dateiname</strong> für Deutsch (de) ist <strong>untertitel.de_DE.vtt</strong>.</li></ul>
           kind:
             column_header: Art
             cell_title:
               subtitles: Übersetzungs-Textspur
               captions: Ton-Ersatz-Textspur
               descriptions: Bild-Ersatz-Textspur
+            inline_help_html: <ul><li><strong>Ton-Ersatz-Textspuren</strong> richten sich an Nutzer, welche eine Textspur besser verstehen als eine Tonspur.</li><li><strong>Übersetzungs-Textspuren</strong> richten sich an Nutzer, welche eine andere Sprache besser verstehen als die Sprache der Tonspur.</li><li><strong>Bild-Ersatz-Textspuren</strong> richten sich an Nutzer, welche eine Textspur besser verstehen als eine Bildspur. Bild-Ersatz-Textspuren werden in der Regel von Screenreadern o.ä. vorgelesen, welche die Nutzer bereithalten.</li></ul>
+            label: Art
           label:
             column_header: Label
+            inline_help: Wird im Textspuren-Auswahlmenü des Media Players angezeigt.
+            label: Label
             missing: Label fehlt
           no_files_blank_slate: Für diese Datei gibt es momentan keine Textspuren.
           srclang:
             column_header: Sprache
             cell_title:
               present: "Ausgefüllt: %{value}"
               blank: "Noch nicht ausgefüllt"
+            inline_help_html: <ul><li>Die Sprache einer Textspur wird als Zwei-Buchstaben-Code nach ISO 639.1 angegeben.</li> <li><strong>Beispiele:</strong> 'de' für Deutsch oder 'en' für Englisch.</li> <li>Den Sprachcode findet man meist auf der Wikipedia-Seite zur jeweiligen Sprache.</li></ul>
+            label: Sprache
       templates:
         background_positioning:
           close: Schließen

config/locales/new/video_subtitles.en.yml

@@ -24,21 +24,29 @@ en:
           delete:
             column_header: ''
             cell_title: Delete text tracks
+          file_name:
+            inline_help_html: <ul><li>If the pattern of the file name resembles <strong>dateiname.wx_YZ.vtt</strong>, Pageflow will identify the language code, in this example <strong>wx</strong>.</li><li>An <strong>example</strong> for English (en) is <strong>subtitles.en_GB.vtt</strong>.</li></ul>
           kind:
             column_header: Kind
             cell_title:
               subtitles: Translation Text Track
               captions: Audio Replacement Text Track
               descriptions: Image Replacement Text Track
+            inline_help_html: <ul><li><strong>Audio Replacement Text Tracks</strong> are meant for users who understand a text track better than an audio track.</li><li><strong>Translation Text Tracks</strong> are meant for users who understand another language better than the language used in the audio track.</li><li><strong>Image Replacement Text Tracks</strong> are meant for users who understand a text track better than a video track. Image Replacement Text Tracks are often read aloud to the user by screen reading software supplied by the user.</li></ul>
+            label: Kind
           label:
             column_header: Label
+            inline_help: For display in the text track picker as part of the media player
+            label: Label
             missing: Label missing
           no_files_blank_slate: Currently, there are no text tracks for this file.
           srclang:
             column_header: Language
             cell_title:
               present: "Entered: %{value}"
               blank: Not yet entered
+            inline_help_html: <ul><li>The language used in a text track is specified as a two letter code according to ISO 639.1.</li> <li><strong>Examples:</strong> 'en' for English or 'fr' for French.</li> <li>Language codes are often given on the Wikipedia page of a language.</li></ul>
+            label: Language
       templates:
         background_positioning:
           close: Close

spec/javascripts/pageflow/ui/views/mixins/input_view_spec.js

@@ -173,7 +173,7 @@ describe('pageflow.inputView', function() {
 
       describe('with missing prefixed attribute translation', function() {
         support.useFakeTranslations({
-          'pageflow.ui.inline_help.page.title': 'Model/Attribute Help'
+          'pageflow.ui.inline_help.page.title_html': '<strong>Model/Attribute Help</strong>'
         });
 
         it('falls back to model/attribute based inline help translation', function() {
@@ -187,7 +187,7 @@ describe('pageflow.inputView', function() {
 
           var result = view.inlineHelpText();
 
-          expect(result).to.eq('Model/Attribute Help');
+          expect(result).to.eq('<strong>Model/Attribute Help</strong>');
         });
       });
     });
@@ -230,4 +230,4 @@ describe('pageflow.inputView', function() {
 
     return view;
   }
-});
+});