diff --git a/js/YouTubeView.js b/js/YouTubeView.js index 03f9ba7..e3f61b4 100644 --- a/js/YouTubeView.js +++ b/js/YouTubeView.js @@ -139,31 +139,50 @@ export default class YouTubeView extends ComponentView { }, 250); } - onToggleInlineTranscript(e) { - if (e && e.preventDefault) e.preventDefault(); - + /** + * Handles toggling the inline transcript open/closed + * and updating the label on the inline transcript button + */ + onToggleInlineTranscript(event) { + if (event) event.preventDefault(); const $transcriptBodyContainer = this.$('.youtube__transcript-body-inline'); const $button = this.$('.youtube__transcript-btn-inline'); const $buttonText = $button.find('.youtube__transcript-btn-text'); - const config = this.model.get('_transcript'); - const shouldOpen = !$transcriptBodyContainer.hasClass('inline-transcript-open'); - const buttonText = shouldOpen ? - config.inlineTranscriptCloseButton : - config.inlineTranscriptButton; - - $transcriptBodyContainer - .stop(true).slideToggle(() => $(window).resize()) - .toggleClass('inline-transcript-open', shouldOpen); - $button.attr('aria-expanded', shouldOpen); - $buttonText.html(buttonText); - - if (!shouldOpen || config._setCompletionOnView === false) return; - this.setCompletionStatus(); + + if ($transcriptBodyContainer.hasClass('inline-transcript-open')) { + $transcriptBodyContainer.stop(true, true).slideUp(() => { + $(window).resize(); + }).removeClass('inline-transcript-open'); + $button.attr('aria-expanded', false); + $buttonText.html(this.model.get('_transcript').inlineTranscriptButton); + this.transcriptTriggers('closed'); + + return; + } + + $transcriptBodyContainer.stop(true, true).slideDown(() => { + $(window).resize(); + }).addClass('inline-transcript-open'); + + $button.attr('aria-expanded', true); + $buttonText.html(this.model.get('_transcript').inlineTranscriptCloseButton); + this.transcriptTriggers('opened'); } + + onExternalTranscriptClicked(event) { + this.transcriptTriggers('external'); + } + + transcriptTriggers(state) { + const setCompletionOnView = this.model.get('_transcript')._setCompletionOnView; + const isComplete = this.model.get('_isComplete'); + const shouldComplete = (setCompletionOnView && !isComplete); - onExternalTranscriptClicked() { - if (this.model.get('_transcript')._setCompletionOnView === false) return; + if (!shouldComplete) { + return Adapt.trigger('youtube:transcript', state, this); + } this.setCompletionStatus(); + Adapt.trigger('youtube:transcript', 'complete', this); } triggerGlobalEvent(eventType) { diff --git a/less/youtube.less b/less/youtube.less index ea08bed..c727671 100644 --- a/less/youtube.less +++ b/less/youtube.less @@ -35,4 +35,41 @@ &__transcript-body-inline a { .link-text; } + + &__transcript-btn { + display: inline-flex; + align-items: center; + justify-content: center; + } + + &__transcript-btn-icon { + margin-inline-start: @icon-padding / 2; + } + + &.is-complete &__transcript-btn-icon .icon { + .icon-tick; + } + + &__transcript-btn-inline .icon { + .icon-plus; + } + + &__transcript-body-inline { + display: none; + } + + // Skip to transcript button + &__skip-to-transcript { + + html:not(.has-accessibility) & { + .u-display-none; + } + + &:not(:focus-visible) { + height: 0; + padding: 0; + margin: 0; + overflow: hidden; + } + } } diff --git a/templates/youtube.hbs b/templates/youtube.hbs index 9aba031..9d7f70e 100644 --- a/templates/youtube.hbs +++ b/templates/youtube.hbs @@ -4,7 +4,9 @@ {{> component this}} {{#any _transcript._externalTranscript _transcript._inlineTranscript}} - + {{/any}}
@@ -34,7 +36,14 @@ {{#if _transcript._inlineTranscript}} {{/if}} @@ -43,16 +52,19 @@ {{/if}} {{#if _transcript._inlineTranscript}} -
+
{{{compile _transcript.inlineTranscriptBody}}}