move scrollbar thickness measurement to service

addon/components/ember-scrollable.js

@@ -8,6 +8,9 @@ const {
   computed,
   deprecate,
   isPresent,
+  inject: {
+    service
+  },
   run: {
     scheduleOnce,
     debounce,
@@ -110,6 +113,8 @@ export default Ember.Component.extend(InboundActionsMixin, DomMixin, {
    */
   verticalScrollbar: null,
 
+  scrollbarThickness: service(),
+
   didReceiveAttrs() {
     const horizontal = this.get('horizontal');
     const vertical = this.get('horizontal');
@@ -215,35 +220,6 @@ export default Ember.Component.extend(InboundActionsMixin, DomMixin, {
     this._contentElement = this.$(`${contentSelector}:first`);
   },
 
-  /**
-  * Original function by Jonathan Sharp:
-  * http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
-  *
-  * Modified to work with newer jQuery version.
-  *
-  * @property scrollbarThickness
-  * @private
-  * @type Number
-  */
-  scrollbarThickness: computed(() => {
-    // Append a temporary scrolling element to the DOM, then measure
-    // the difference between between its outer and inner elements.
-    let tempEl = $(`
-      <div class="scrollbar-width-tester" style="width: 50px; position: absolute; top: 0px;">
-        <div style="overflow: scroll;">
-          <div class="scrollbar-width-tester__inner"></div>
-        </div>
-      </div>
-    `);
-    $('body').append(tempEl);
-    let width = $(tempEl).width();
-    let widthMinusScrollbars = $('.scrollbar-width-tester__inner', tempEl).width();
-    tempEl.remove();
-
-    return (width - widthMinusScrollbars);
-  }),
-
-
   /**
    * Used to create/reset scrollbar(s) if they are necessary
    *
@@ -269,7 +245,7 @@ export default Ember.Component.extend(InboundActionsMixin, DomMixin, {
   resizeScrollContent() {
     const width = this.$().width();
     const height = this.$().height();
-    const scrollbarThickness = this.get('scrollbarThickness');
+    const scrollbarThickness = this.get('scrollbarThickness.thickness');
 
     const hasHorizontal = this.get('horizontal');
     const hasVertical = this.get('vertical');

addon/services/scrollbar-thickness.js

@@ -0,0 +1,24 @@
+import Ember from 'ember';
+
+const {
+  computed,
+  Service
+} = Ember;
+
+export default Service.extend({
+  thickness: computed(() => {
+    const tempEl = $(`
+      <div class="scrollbar-width-tester" style="width: 50px; position: absolute; left: -100px;">
+        <div style="overflow: scroll;">
+          <div class="scrollbar-width-tester__inner"></div>
+        </div>
+      </div>
+    `);
+    $('body').append(tempEl);
+    const width = $(tempEl).width();
+    const widthMinusScrollbars = $('.scrollbar-width-tester__inner', tempEl).width();
+    tempEl.remove();
+
+    return (width - widthMinusScrollbars);
+  })
+});

app/services/scrollbar-thickness.js

@@ -0,0 +1 @@
+export { default } from 'ember-scrollable/services/scrollbar-thickness';