diff --git a/js/adapt-contrib-narrative.js b/js/adapt-contrib-narrative.js index 9953fdd..26d2059 100644 --- a/js/adapt-contrib-narrative.js +++ b/js/adapt-contrib-narrative.js @@ -1,368 +1,12 @@ -define(function(require) { - - var ComponentView = require('coreViews/componentView'); - var Adapt = require('coreJS/adapt'); - - var Narrative = ComponentView.extend({ - - events: { - 'click .narrative-strapline-title': 'openPopup', - 'click .narrative-controls': 'onNavigationClicked', - 'click .narrative-indicators .narrative-progress': 'onProgressClicked' - }, - - preRender: function() { - this.listenTo(Adapt, 'device:changed', this.reRender, this); - this.listenTo(Adapt, 'device:resize', this.resizeControl, this); - this.listenTo(Adapt, 'notify:closed', this.closeNotify, this); - this.setDeviceSize(); - - // Checks to see if the narrative should be reset on revisit - this.checkIfResetOnRevisit(); - }, - - setDeviceSize: function() { - if (Adapt.device.screenSize === 'large') { - this.$el.addClass('desktop').removeClass('mobile'); - this.model.set('_isDesktop', true); - } else { - this.$el.addClass('mobile').removeClass('desktop'); - this.model.set('_isDesktop', false) - } - }, - - postRender: function() { - this.renderState(); - this.$('.narrative-slider').imageready(_.bind(function() { - this.setReadyStatus(); - }, this)); - this.setupNarrative(); - }, - - // Used to check if the narrative should reset on revisit - checkIfResetOnRevisit: function() { - var isResetOnRevisit = this.model.get('_isResetOnRevisit'); - - // If reset is enabled set defaults - if (isResetOnRevisit) { - this.model.reset(isResetOnRevisit); - this.model.set({_stage: 0}); - - _.each(this.model.get('_items'), function(item) { - item._isVisited = false; - }); - } - }, - - setupNarrative: function() { - this.setDeviceSize(); - if(!this.model.has('_items') || !this.model.get('_items').length) return; - this.model.set('_marginDir', 'left'); - if (Adapt.config.get('_defaultDirection') == 'rtl') { - this.model.set('_marginDir', 'right'); - } - this.model.set('_itemCount', this.model.get('_items').length); - - this.model.set('_active', true); - - if (this.model.get('_stage')) { - this.setStage(this.model.get('_stage'), true); - } else { - this.setStage(0, true); - } - this.calculateWidths(); - - if (Adapt.device.screenSize !== 'large' && !this.model.get('_wasHotgraphic')) { - this.replaceInstructions(); - } - this.setupEventListeners(); - }, - - calculateWidths: function() { - var slideWidth = this.$('.narrative-slide-container').width(); - var slideCount = this.model.get('_itemCount'); - var marginRight = this.$('.narrative-slider-graphic').css('margin-right'); - var extraMargin = marginRight === '' ? 0 : parseInt(marginRight); - var fullSlideWidth = (slideWidth + extraMargin) * slideCount; - - this.$('.narrative-slider-graphic').width(slideWidth); - this.$('.narrative-strapline-header').width(slideWidth); - this.$('.narrative-strapline-title').width(slideWidth); - - this.$('.narrative-slider').width(fullSlideWidth); - this.$('.narrative-strapline-header-inner').width(fullSlideWidth); - - var stage = this.model.get('_stage'); - var margin = -(stage * slideWidth); - - this.$('.narrative-slider').css(('margin-' + this.model.get('_marginDir')), margin); - this.$('.narrative-strapline-header-inner').css(('margin-' + this.model.get('_marginDir')), margin); - - this.model.set('_finalItemLeft', fullSlideWidth - slideWidth); - }, - - resizeControl: function() { - var wasDesktop = this.model.get('_isDesktop'); - this.setDeviceSize(); - var isDesktop = this.model.get('_isDesktop'); - if (wasDesktop != isDesktop) this.replaceInstructions(); - this.calculateWidths(); - this.evaluateNavigation(); - - /** - * need to set current stage item to visited when moving from small/medium screen size to large - * see https://github.com/adaptlearning/adapt_framework/issues/2100 - */ - if (isDesktop) this.setCurrentItemVisited(); - }, - - setCurrentItemVisited: function() { - var stage = this.model.get('_stage') || 0; - if (this.getCurrentItem(stage)._isVisited) return; - this.setStage(stage, true); - }, - - reRender: function() { - if (this.model.get('_wasHotgraphic') && Adapt.device.screenSize == 'large') { - this.replaceWithHotgraphic(); - } else { - this.resizeControl(); - } - }, - - closeNotify: function() { - this.evaluateCompletion(); - }, - - replaceInstructions: function() { - if (Adapt.device.screenSize === 'large') { - this.$('.narrative-instruction-inner').html(this.model.get('instruction')).a11y_text(); - } else if (this.model.get('mobileInstruction') && !this.model.get('_wasHotgraphic')) { - this.$('.narrative-instruction-inner').html(this.model.get('mobileInstruction')).a11y_text(); - } - }, - - replaceWithHotgraphic: function() { - var Hotgraphic = Adapt.getViewClass('hotgraphic'); - - var model = this.prepareHotgraphicModel(); - var newHotgraphic = new Hotgraphic({ model: model }); - var $container = $(".component-container", $("." + this.model.get("_parentId"))); - - $container.append(newHotgraphic.$el); - this.remove(); - $.a11y_update(); - _.defer(function() { - Adapt.trigger('device:resize'); - }); - }, - - prepareHotgraphicModel: function() { - var model = this.model; - model.set('_component', 'hotgraphic'); - model.set('body', model.get('originalBody')); - model.set('instruction', model.get('originalInstruction')); - return model; - }, - - moveSliderToIndex: function(itemIndex, animate, callback) { - var extraMargin = parseInt(this.$('.narrative-slider-graphic').css('margin-right')); - var movementSize = this.$('.narrative-slide-container').width() + extraMargin; - var marginDir = {}; - if (animate && !Adapt.config.get('_disableAnimation')) { - marginDir['margin-' + this.model.get('_marginDir')] = -(movementSize * itemIndex); - this.$('.narrative-slider').velocity("stop", true).velocity(marginDir); - this.$('.narrative-strapline-header-inner').velocity("stop", true).velocity(marginDir, {complete:callback}); - } else { - marginDir['margin-' + this.model.get('_marginDir')] = -(movementSize * itemIndex); - this.$('.narrative-slider').css(marginDir); - this.$('.narrative-strapline-header-inner').css(marginDir); - callback(); - } - }, - - setStage: function(stage, initial) { - this.model.set('_stage', stage); - if (this.model.get('_isDesktop')) { - // Set the visited attribute for large screen devices - var currentItem = this.getCurrentItem(stage); - currentItem._isVisited = true; - } - - this.$('.narrative-progress:visible').removeClass('selected').eq(stage).addClass('selected'); - this.$('.narrative-slider-graphic').children('.controls').a11y_cntrl_enabled(false); - this.$('.narrative-slider-graphic').eq(stage).children('.controls').a11y_cntrl_enabled(true); - this.$('.narrative-content-item').addClass('narrative-hidden').a11y_on(false).eq(stage).removeClass('narrative-hidden').a11y_on(true); - this.$('.narrative-strapline-title').a11y_cntrl_enabled(false).eq(stage).a11y_cntrl_enabled(true); - - this.evaluateNavigation(); - this.evaluateCompletion(); - - this.moveSliderToIndex(stage, !initial, _.bind(function() { - if (this.model.get('_isDesktop')) { - if (!initial) this.$('.narrative-content-item').eq(stage).a11y_focus(); - } else { - if (!initial) this.$('.narrative-strapline-title').a11y_focus(); - } - }, this)); - }, - - constrainStage: function(stage) { - if (stage > this.model.get('_items').length - 1) { - stage = this.model.get('_items').length - 1; - } else if (stage < 0) { - stage = 0; - } - return stage; - }, - - constrainXPosition: function(previousLeft, newLeft, deltaX) { - if (newLeft > 0 && deltaX > 0) { - newLeft = previousLeft + (deltaX / (newLeft * 0.1)); - } - var finalItemLeft = this.model.get('_finalItemLeft'); - if (newLeft < -finalItemLeft && deltaX < 0) { - var distance = Math.abs(newLeft + finalItemLeft); - newLeft = previousLeft + (deltaX / (distance * 0.1)); - } - return newLeft; - }, - - evaluateNavigation: function() { - var currentStage = this.model.get('_stage'); - var itemCount = this.model.get('_itemCount'); - if (currentStage == 0) { - this.$('.narrative-controls').addClass('narrative-hidden'); - - if (itemCount > 1) { - this.$('.narrative-control-right').removeClass('narrative-hidden'); - } - } else { - this.$('.narrative-control-left').removeClass('narrative-hidden'); - - if (currentStage == itemCount - 1) { - this.$('.narrative-control-right').addClass('narrative-hidden'); - } else { - this.$('.narrative-control-right').removeClass('narrative-hidden'); - } - } - - }, - - getNearestItemIndex: function() { - var currentPosition = parseInt(this.$('.narrative-slider').css('margin-left')); - var graphicWidth = this.$('.narrative-slider-graphic').width(); - var absolutePosition = currentPosition / graphicWidth; - var stage = this.model.get('_stage'); - var relativePosition = stage - Math.abs(absolutePosition); - - if (relativePosition < -0.3) { - stage++; - } else if (relativePosition > 0.3) { - stage--; - } - - return this.constrainStage(stage); - }, - - getCurrentItem: function(index) { - return this.model.get('_items')[index]; - }, - - getVisitedItems: function() { - return _.filter(this.model.get('_items'), function(item) { - return item._isVisited; - }); - }, - - evaluateCompletion: function() { - if (this.getVisitedItems().length === this.model.get('_items').length) { - this.trigger('allItems'); - } - }, - - moveElement: function($element, deltaX) { - var previousLeft = parseInt($element.css('margin-left')); - var newLeft = previousLeft + deltaX; - - newLeft = this.constrainXPosition(previousLeft, newLeft, deltaX); - $element.css(('margin-' + this.model.get('_marginDir')), newLeft + 'px'); - }, - - openPopup: function(event) { - event.preventDefault(); - var currentItem = this.getCurrentItem(this.model.get('_stage')); - var popupObject = { - title: currentItem.title, - body: currentItem.body - }; - - // Set the visited attribute for small and medium screen devices - currentItem._isVisited = true; - - Adapt.trigger('notify:popup', popupObject); - }, - - onNavigationClicked: function(event) { - - if (!this.model.get('_active')) return; - - var stage = this.model.get('_stage'); - var numberOfItems = this.model.get('_itemCount'); - - if ($(event.currentTarget).hasClass('narrative-control-right')) { - stage++; - } else if ($(event.currentTarget).hasClass('narrative-control-left')) { - stage--; - } - stage = (stage + numberOfItems) % numberOfItems; - this.setStage(stage); - }, - - onProgressClicked: function(event) { - event.preventDefault(); - var clickedIndex = $(event.target).index(); - this.setStage(clickedIndex); - }, - - inview: function(event, visible, visiblePartX, visiblePartY) { - if (visible) { - if (visiblePartY === 'top') { - this._isVisibleTop = true; - } else if (visiblePartY === 'bottom') { - this._isVisibleBottom = true; - } else { - this._isVisibleTop = true; - this._isVisibleBottom = true; - } - - if (this._isVisibleTop && this._isVisibleBottom) { - this.$('.component-inner').off('inview'); - this.setCompletionStatus(); - } - } - }, - - onCompletion: function() { - this.setCompletionStatus(); - if (this.completionEvent && this.completionEvent != 'inview') { - this.off(this.completionEvent, this); - } - }, - - setupEventListeners: function() { - this.completionEvent = (!this.model.get('_setCompletionOn')) ? 'allItems' : this.model.get('_setCompletionOn'); - if (this.completionEvent !== 'inview' && this.model.get('_items').length > 1) { - this.on(this.completionEvent, _.bind(this.onCompletion, this)); - } else { - this.$('.component-widget').on('inview', _.bind(this.inview, this)); - } - } - +define([ + 'core/js/adapt', + './narrativeView', + 'core/js/models/itemsComponentModel' +],function(Adapt, NarrativeView, ItemsComponentModel) { + + return Adapt.register('narrative', { + model: ItemsComponentModel, + view: NarrativeView }); - Adapt.register('narrative', Narrative); - - return Narrative; - }); diff --git a/js/narrativeView.js b/js/narrativeView.js new file mode 100644 index 0000000..60cf295 --- /dev/null +++ b/js/narrativeView.js @@ -0,0 +1,294 @@ +define([ + 'core/js/adapt', + 'core/js/views/componentView' +], function(Adapt, ComponentView) { + 'use strict'; + + var NarrativeView = ComponentView.extend({ + + _isInitial: true, + + events: { + 'click .narrative-strapline-title': 'openPopup', + 'click .narrative-controls': 'onNavigationClicked', + 'click .narrative-indicators .narrative-progress': 'onProgressClicked' + }, + + preRender: function() { + this.listenTo(Adapt, { + 'device:changed': this.reRender, + 'device:resize': this.resizeControl, + 'notify:closed': this.closeNotify + }); + this.setDeviceSize(); + + this.listenTo(this.model.get('_children'), { + 'change:_isActive': this.onItemsActiveChange, + 'change:_isVisited': this.onItemsVisitedChange + }); + + // Checks to see if the narrative should be reset on revisit + this.checkIfResetOnRevisit(); + this.calculateWidths(); + }, + + onItemsActiveChange: function(item, _isActive) { + if (_isActive === true) { + this.setStage(item); + } + }, + + onItemsVisitedChange: function(item, isVisited) { + if (!isVisited) return; + this.$('[data-index="' + item.get('_index') + '"]').addClass('visited'); + }, + + setDeviceSize: function() { + this.model.set('_isDesktop', Adapt.device.screenSize === 'large'); + }, + + postRender: function() { + this.renderState(); + this.$('.narrative-slider').imageready(this.setReadyStatus.bind(this)); + this.setupNarrative(); + + if (Adapt.config.get('_disableAnimation')) { + this.$el.addClass('disable-animation'); + } + }, + + // Used to check if the narrative should reset on revisit + checkIfResetOnRevisit: function() { + var isResetOnRevisit = this.model.get('_isResetOnRevisit'); + // If reset is enabled set defaults + if (isResetOnRevisit) { + this.model.reset(isResetOnRevisit); + } + }, + + setupNarrative: function() { + this.setDeviceSize(); + var items = this.model.get('_children'); + if (!items || !items.length) return; + + var activeItem = this.model.getActiveItem(); + if (!activeItem) { + activeItem = this.model.getItem(0); + activeItem.toggleActive(true); + } else { + // manually trigger change as it is not fired on reentry + items.trigger('change:_isActive', activeItem, true); + } + + this.calculateWidths(); + + if (Adapt.device.screenSize !== 'large' && !this.model.get('_wasHotgraphic')) { + this.replaceInstructions(); + } + this.setupEventListeners(); + this._isInitial = false; + }, + + calculateWidths: function() { + var itemCount = this.model.get('_children').length; + this.model.set({ + '_totalWidth': 100 * itemCount, + '_itemWidth': 100 / itemCount + }); + }, + + resizeControl: function() { + var wasDesktop = this.model.get('_isDesktop'); + this.setDeviceSize(); + if (wasDesktop != this.model.get('_isDesktop')) this.replaceInstructions(); + this.evaluateNavigation(); + var activeItem = this.model.getActiveItem(); + if (activeItem) this.setStage(activeItem); + }, + + reRender: function() { + if (this.model.get('_wasHotgraphic') && Adapt.device.screenSize === 'large') { + this.replaceWithHotgraphic(); + } else { + this.resizeControl(); + } + }, + + closeNotify: function() { + this.evaluateCompletion(); + }, + + replaceInstructions: function() { + if (Adapt.device.screenSize === 'large') { + this.$('.narrative-instruction-inner').html(this.model.get('instruction')).a11y_text(); + } else if (this.model.get('mobileInstruction') && !this.model.get('_wasHotgraphic')) { + this.$('.narrative-instruction-inner').html(this.model.get('mobileInstruction')).a11y_text(); + } + }, + + replaceWithHotgraphic: function() { + if (!Adapt.componentStore.hotgraphic) throw "Hotgraphic not included in build"; + var HotgraphicView = Adapt.componentStore.hotgraphic.view; + + var model = this.prepareHotgraphicModel(); + var newHotgraphic = new HotgraphicView({ model: model }); + var $container = $(".component-container", $("." + this.model.get("_parentId"))); + + $container.append(newHotgraphic.$el); + this.remove(); + $.a11y_update(); + _.defer(function() { + Adapt.trigger('device:resize'); + }); + }, + + prepareHotgraphicModel: function() { + var model = this.model; + model.resetActiveItems(); + model.set({ + '_isPopupOpen': false, + '_component': 'hotgraphic', + 'body': model.get('originalBody'), + 'instruction': model.get('originalInstruction') + }); + + return model; + }, + + moveSliderToIndex: function(itemIndex, shouldAnimate) { + var offset = this.model.get('_itemWidth') * itemIndex; + if (Adapt.config.get('_defaultDirection') === 'ltr') { + offset *= -1; + } + var cssValue = 'translateX('+offset+'%)'; + var $sliderElm = this.$('.narrative-slider'); + var $straplineHeaderElm = this.$('.narrative-strapline-header-inner'); + + $sliderElm.css('transform', cssValue); + $straplineHeaderElm.css('transform', cssValue); + + if (Adapt.config.get('_disableAnimation')) { + this.onTransitionEnd(); + } else { + $sliderElm.one('transitionend', this.onTransitionEnd.bind(this)); + } + }, + + onTransitionEnd: function(event) { + if (this._isInitial) return; + + var index = this.model.getActiveItem().get('_index'); + if (this.model.get('_isDesktop')) { + this.$('.narrative-content-item[data-index="'+index+'"]').a11y_focus(); + } else { + this.$('.narrative-strapline-title').a11y_focus(); + } + }, + + setStage: function(item) { + var index = item.get('_index'); + if (this.model.get('_isDesktop')) { + // Set the visited attribute for large screen devices + item.toggleVisited(true); + } + + var $slideGraphics = this.$('.narrative-slider-graphic'); + this.$('.narrative-progress:visible').removeClass('selected').filter('[data-index="'+index+'"]').addClass('selected'); + $slideGraphics.children('.controls').a11y_cntrl_enabled(false); + $slideGraphics.filter('[data-index="'+index+'"]').children('.controls').a11y_cntrl_enabled(true); + this.$('.narrative-content-item').addClass('narrative-hidden').a11y_on(false).filter('[data-index="'+index+'"]').removeClass('narrative-hidden').a11y_on(true); + this.$('.narrative-strapline-title').a11y_cntrl_enabled(false).filter('[data-index="'+index+'"]').a11y_cntrl_enabled(true); + + this.evaluateNavigation(); + this.evaluateCompletion(); + this.moveSliderToIndex(index, !this._isInitial); + }, + + evaluateNavigation: function() { + var active = this.model.getActiveItem(); + if (!active) return; + + var currentStage = active.get('_index'); + var itemCount = this.model.get('_children').length; + + var isAtStart = currentStage === 0; + var isAtEnd = currentStage === itemCount - 1; + + this.$('.narrative-control-left').toggleClass('narrative-hidden', isAtStart); + this.$('.narrative-control-right').toggleClass('narrative-hidden', isAtEnd); + }, + + evaluateCompletion: function() { + if (this.model.areAllItemsCompleted()) { + this.trigger('allItems'); + } + }, + + openPopup: function(event) { + event && event.preventDefault(); + + var currentItem = this.model.getActiveItem(); + + // Set the visited attribute for small and medium screen devices + currentItem.toggleVisited(true); + + Adapt.trigger('notify:popup', { + title: currentItem.get('title'), + body: currentItem.get('body') + }); + }, + + onNavigationClicked: function(event) { + var stage = this.model.getActiveItem().get('_index'); + var numberOfItems = this.model.get('_children').length; + + if ($(event.currentTarget).hasClass('narrative-control-right')) { + this.model.setActiveItem(++stage); + } else if ($(event.currentTarget).hasClass('narrative-control-left')) { + this.model.setActiveItem(--stage); + } + }, + + onProgressClicked: function(event) { + event && event.preventDefault(); + var clickedIndex = $(event.target).data('index'); + this.model.setActiveItem(clickedIndex); + }, + + inview: function(event, visible, visiblePartX, visiblePartY) { + if (!visible) return; + + if (visiblePartY === 'top') { + this._isVisibleTop = true; + } else if (visiblePartY === 'bottom') { + this._isVisibleBottom = true; + } else { + this._isVisibleTop = true; + this._isVisibleBottom = true; + } + + var wasAllInview = (this._isVisibleTop && this._isVisibleBottom); + if (!wasAllInview) return; + + this.$('.component-inner').off('inview'); + this.setCompletionStatus(); + }, + + setupEventListeners: function() { + if (this.model.get('_setCompletionOn') === 'inview') { + this.$('.component-widget').on('inview', this.inview.bind(this)); + } + }, + + remove: function() { + if (this.model.get('_setCompletionOn') === 'inview') { + this.$('.component-widget').off('inview'); + } + ComponentView.prototype.remove.apply(this, arguments); + } + + }); + + return NarrativeView; + +}); \ No newline at end of file diff --git a/less/narrative.less b/less/narrative.less index 4b167a7..8a75314 100755 --- a/less/narrative.less +++ b/less/narrative.less @@ -1,101 +1,99 @@ -.narrative-component { +html.size-large .narrative-component { + .narrative-slide-container { + width: 60%; + margin-right: 3%; + float: left; + .dir-rtl & { + margin-right: inherit; + margin-left: 3%; + float: right; + } + } - &.desktop { - .narrative-slide-container { - width: 60%; - margin-right: 3%; - float: left; - .dir-rtl & { - margin-right: inherit; - margin-left: 3%; - float: right; + .narrative-slider-graphic { + margin-right: 0; + width:60%; + } + + .narrative-strapline { + display:none; + } + + .narrative-content-inner { + .narrative-controls { + position: static; + display: none; + margin-top: 0px; + margin-bottom: 10px; + width: auto; + height: auto; + padding: 8px; + .icon { + margin: 0px; } } - - .narrative-slider-graphic { - margin-right: 0; - width:60%; + .narrative-indicators { + display: none; + position: relative; + top: -4px; } - - .narrative-strapline { - display:none; + .narrative-progress { + background-color: @item-color; + &.selected { + background-color: @item-color-selected; + } } + .narrative-content-item.narrative-hidden { + display: none; + } + } + .narrative-text-controls { .narrative-content-inner { + position: relative; + .narrative-controls-container { + position: absolute; + width: 100%; + left: 0px; + top: 10px; + display: block; + } .narrative-controls { - position: static; - display: none; - margin-top: 0px; - margin-bottom: 10px; - width: auto; - height: auto; - padding: 8px; - .icon { - margin: 0px; + margin-bottom: 0px; + display: inline-block; + &.narrative-hidden { + visibility: hidden; } } - .narrative-indicators { - display: none; - position: relative; - top: -4px; + .narrative-control-left { + float:left; } - .narrative-progress { - background-color: @item-color; - &.selected { - background-color: @item-color-selected; - } + .narrative-control-right { + float: right; } - .narrative-content-item.narrative-hidden { - display: none; + .narrative-indicators { + display: inline-block; + width: auto; + position: absolute; + margin-top: 10px; + top: 0px; + left: 50%; } } - .narrative-text-controls { - .narrative-content-inner { - position: relative; - .narrative-controls-container { - position: absolute; - width: 100%; - left: 0px; - top: 10px; - display: block; - } - .narrative-controls { - margin-bottom: 0px; - display: inline-block; - &.narrative-hidden { - visibility: hidden; - } - } - .narrative-control-left { - float:left; - } - .narrative-control-right { - float: right; - } - .narrative-indicators { - display: inline-block; - width: auto; - position: absolute; - margin-top: 10px; - top: 0px; - left: 50%; - } - .narrative-content-item { - padding-top: 36px; - } + .narrative-slide-container { + .narrative-controls { + display: none; } - - .narrative-slide-container { - .narrative-controls { - display: none; - } - .narrative-indicators { - display: none; - } + .narrative-indicators { + display: none; } } } +} + + +.narrative-component { .narrative-content { width: 36%; @@ -111,8 +109,9 @@ padding:20px; } - &.mobile { .narrative-content { + .size-small &, + .size-medium & { display:none; } } @@ -135,11 +134,6 @@ } } - .narrative-item-title { - position:relative; - display:block; - } - .narrative-indicators { text-align: center; } @@ -212,7 +206,7 @@ } .narrative-strapline-header-inner { - position:relative; + position: relative; } .narrative-strapline-title { @@ -294,6 +288,13 @@ .narrative-hidden { visibility: hidden; } + + &:not(.disable-animation) { + .narrative-slider, + .narrative-strapline-header-inner { + transition: transform 400ms ease-in-out; + } + } } @@ -315,10 +316,7 @@ html.accessibility { } } - - &.no-touch { - .narrative-strapline-title:focus .focus-rect { - outline: @focus-outline; - } + .narrative-strapline-title:focus .focus-rect { + outline: @focus-outline; } } diff --git a/templates/narrative.hbs b/templates/narrative.hbs index f45d2d9..0e762f7 100644 --- a/templates/narrative.hbs +++ b/templates/narrative.hbs @@ -1,4 +1,3 @@ -{{! Maintainers - Brian Quinn}}
{{> component this}}
@@ -6,7 +5,7 @@
{{#each _items}} -
+
{{#if _graphic.alt}}{{{a11y_aria_label _graphic.alt}}}{{/if}}
@@ -23,7 +22,7 @@
{{#each _items}} -
+
{{/each}}
-
+
{{#each _items}} -
+
{{#if _graphic.attribution}}
{{{_graphic.attribution}}}
@@ -74,7 +73,7 @@
{{#each _items}} -
+
{{/each}}
@@ -82,4 +81,4 @@
-
+
\ No newline at end of file