stretch now accepts a match media query

miguelcobain · Jul 29, 2017 · 13a0294 · 13a0294
1 parent 6df4b66
commit 13a0294
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/addon/components/paper-tabs.js b/addon/components/paper-tabs.js
@@ -3,7 +3,7 @@ import layout from '../templates/components/paper-tabs';
 import { ParentMixin } from 'ember-composability-tools';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 
-const { computed, Component, String: { htmlSafe } } = Ember;
+const { computed, Component, String: { htmlSafe }, inject } = Ember;
 
 export default Component.extend(ParentMixin, ColorMixin, {
   layout,
@@ -12,6 +12,8 @@ export default Component.extend(ParentMixin, ColorMixin, {
   classNames: ['md-no-tab-content', 'md-default-theme'],
   attributeBindings: ['borderBottom:md-border-bottom'],
 
+  constants: inject.service(),
+
   selected: 0, // select first tab by default
 
   _selectedTab: computed('childComponents.@each.value', 'selected', function() {
@@ -26,6 +28,7 @@ export default Component.extend(ParentMixin, ColorMixin, {
   noInk: false,
   ariaLabel: null,
   previousInkBarPosition: 0,
+  stretch: 'sm',
 
   inkBarLeft: computed('_selectedTab.left', function() {
     return this.get('_selectedTab.left') || 0;
@@ -47,8 +50,8 @@ export default Component.extend(ParentMixin, ColorMixin, {
     return !this.get('shouldPaginate') && this.get('center');
   }),
 
-  shouldStretch: computed('shouldPaginate', 'stretch', function() {
-    return !this.get('shouldPaginate') && this.get('stretch');
+  shouldStretch: computed('shouldPaginate', 'currentStretch', function() {
+    return !this.get('shouldPaginate') && this.get('currentStretch');
   }),
 
   didReceiveAttrs() {
@@ -64,11 +67,8 @@ export default Component.extend(ParentMixin, ColorMixin, {
     this._super(...arguments);
 
     let updateCanvasWidth = () => {
-      let { width: canvasWidth } = this.element.querySelector('md-tabs-canvas').getBoundingClientRect();
-      let { width: wrapperWidth } = this.element.querySelector('md-pagination-wrapper').getBoundingClientRect();
-      this.get('childComponents').invoke('updateDimensions');
-      this.set('canvasWidth', canvasWidth);
-      this.set('wrapperWidth', wrapperWidth);
+      this.updateDimensions();
+      this.updateStretchTabs();
     };
 
     window.addEventListener('resize', updateCanvasWidth);
@@ -120,6 +120,30 @@ export default Component.extend(ParentMixin, ColorMixin, {
     }
   },
 
+  updateDimensions() {
+    let { width: canvasWidth } = this.element.querySelector('md-tabs-canvas').getBoundingClientRect();
+    let { width: wrapperWidth } = this.element.querySelector('md-pagination-wrapper').getBoundingClientRect();
+    this.get('childComponents').invoke('updateDimensions');
+    this.set('canvasWidth', canvasWidth);
+    this.set('wrapperWidth', wrapperWidth);
+  },
+
+  updateStretchTabs() {
+    let stretch = this.get('stretch');
+    let currentStretch;
+
+    // if `true` or `false` is specified, always/never "stretch tabs"
+    // otherwise proceed with normal matchMedia test
+    if (typeof stretch === 'boolean') {
+      currentStretch = stretch;
+    } else {
+      let mediaQuery = this.get('constants').MEDIA[stretch] || stretch;
+      currentStretch = window.matchMedia(mediaQuery).matches;
+    }
+
+    this.set('currentStretch', currentStretch);
+  },
+
   currentOffset: 0,
   canPageBack: computed.gt('currentOffset', 0),
   canPageForward: computed('wrapperWidth', 'currentOffset', 'canvasWidth', function() {

diff --git a/tests/dummy/app/templates/demo/tabs.hbs b/tests/dummy/app/templates/demo/tabs.hbs
@@ -238,6 +238,8 @@
         (p-row "onChange" "action" "An action triggered when the active tab changes.")
         (p-row "accent" "boolean" "Pass `true` to enable accent color scheme.")
         (p-row "primary" "boolean" "Pass `true` to enable primary color scheme.")
+        (p-row "stretch" "boolean or matchMedia query" "Use true/false to permanently enable/disable tab stretching. You can also use a matchMedia query to enable tab stretching only at certain viewport sizes. Default value is `sm` (`(min-width: 600px) and (max-width: 959px)`).")
+        (p-row "borderBottom" "boolean" "Use true to enable border beneath tabs. Default is false.")
       )
       (p-section
         "`tabs.tab` API"

diff --git a/tests/integration/components/paper-tabs-test.js b/tests/integration/components/paper-tabs-test.js
@@ -172,6 +172,18 @@ test('borderBottom true adds border', function(assert) {
   assert.ok(find('md-tabs').hasAttribute('md-border-bottom'));
 });
 
+test('stretch true adds correct class', function(assert) {
+  this.render(hbs`
+    {{#paper-tabs stretch=true as |tabs|}}
+      {{tabs.tab}}
+      {{tabs.tab}}
+      {{tabs.tab}}
+    {{/paper-tabs}}
+  `);
+
+  assert.ok(find('md-tabs-wrapper').classList.contains('md-stretch-tabs'));
+});
+
 test('using href renders anchor tags', function(assert) {
   this.render(hbs`
     {{#paper-tabs as |tabs|}}