|
| 1 | +import Ember from 'ember'; |
| 2 | +import Analytics from '../mixins/analytics'; |
| 3 | + |
| 4 | +/** |
| 5 | + * @module ember-preprints |
| 6 | + * @submodule components |
| 7 | + */ |
| 8 | + |
| 9 | +/** |
| 10 | + * Displays active preprint providers in a horizontal carousel with five providers per slide. Does not auto-advance. |
| 11 | + * Handles display on two pages: index (lightLogo=true) and discover (lightLogo=false). If using elsewhere, need to add more customization |
| 12 | + * around how provider logos and links are built. |
| 13 | + * |
| 14 | + * Sample usage: |
| 15 | + * ```handlebars |
| 16 | + * {{provider-carousel |
| 17 | + * providers=providers |
| 18 | + * lightLogo=true |
| 19 | + *}} |
| 20 | + * ``` |
| 21 | + * @class provider-carousel |
| 22 | + */ |
| 23 | +export default Ember.Component.extend(Analytics, { |
| 24 | + _resizeListener: null, |
| 25 | + providers: Ember.A(), // Pass in preprint providers |
| 26 | + itemsPerSlide: 5, // Default |
| 27 | + lightLogo: true, // Light logos by default, for Index page. |
| 28 | + numProviders: Ember.computed('providers', function() { |
| 29 | + return this.get('providers').length; |
| 30 | + }), |
| 31 | + numSlides: Ember.computed('numProviders', 'itemsPerSlide', function() { |
| 32 | + return Math.ceil(this.get('numProviders') / this.get('itemsPerSlide')); |
| 33 | + }), |
| 34 | + slides: Ember.computed('numSlides', 'providers', 'itemsPerSlide', function() { |
| 35 | + const numSlides = this.get('numSlides'); |
| 36 | + const itemsPerSlide = this.get('itemsPerSlide'); |
| 37 | + return new Array(numSlides).fill().map((_, i) => this.get('providers').slice(i * itemsPerSlide, i * itemsPerSlide + itemsPerSlide)); |
| 38 | + }), |
| 39 | + setSlideItems: function() { |
| 40 | + // On xs screens, show one provider per slide. Otherwise, five. |
| 41 | + if (window.innerWidth < 768) { |
| 42 | + this.set('itemsPerSlide', 1); |
| 43 | + } else { |
| 44 | + this.set('itemsPerSlide', 5); |
| 45 | + } |
| 46 | + }, |
| 47 | + didInsertElement: function () { |
| 48 | + // On xs screen, display one provider per slide |
| 49 | + Ember.$('.carousel').carousel(); |
| 50 | + }, |
| 51 | + init: function() { |
| 52 | + // Set resize listener so number of providers per slide can be changed |
| 53 | + this._super(...arguments); |
| 54 | + this.setSlideItems(); |
| 55 | + this._resizeListener = Ember.run.bind(this, this.setSlideItems); |
| 56 | + Ember.$(window).on('resize', this._resizeListener); |
| 57 | + }, |
| 58 | + willDestroy: function() { |
| 59 | + // Unbinds _resizeListener |
| 60 | + if (this._resizeListener) { |
| 61 | + Ember.$(window).off('resize', this._resizeListener); |
| 62 | + } |
| 63 | + } |
| 64 | +}); |
| 65 | + |
0 commit comments