♻️ Remove Dependency On JQuery

addon/mixins/viewport.js

@@ -1,7 +1,6 @@
-import { computed } from '@ember/object';
-import { not } from '@ember/object/computed';
-import Mixin from '@ember/object/mixin';
-import $ from 'jquery';
+import { computed } from "@ember/object";
+import { not } from "@ember/object/computed";
+import Mixin from "@ember/object/mixin";
 
 /**
  * The Viewport mixin can be used to add a number of helpful responsive queries to any component.  These
@@ -16,44 +15,44 @@ export default Mixin.create({
   /**
    * @return true when viewport is 1200px or wider, false otherwise.
    */
-  'lg?': computed('_width', function() {
+  "lg?": computed("_width", function () {
     const width = this._width;
     return width >= 1200;
   }),
   /**
    * @return true when viewport is 992px to 1199px, false otherwise.
    */
-  'md?': computed('_width', function() {
+  "md?": computed("_width", function () {
     const width = this._width;
     return width >= 992 && width < 1200;
   }),
   /**
    * @return true when the Viewport is less than 1200px, false otherwise.
    */
-  'notLg?': not('lg?'),
+  "notLg?": not("lg?"),
   /**
    * @return true when the Viewport is less than 992px or greater than 1199px, false otherwise.
    */
-  'notMd?': not('md?'),
+  "notMd?": not("md?"),
   /**
    * @return true when the Viewport is less than 768px or greater than 991px, false otherwise.
    */
-  'notSm?': not('sm?'),
+  "notSm?": not("sm?"),
   /**
    * @return true when the Viewport is greater than 767px, false otherwise.
    */
-  'notXs?': not('xs?'),
+  "notXs?": not("xs?"),
   /**
    * @return true when viewport is 768px to 991px, false otherwise.
    */
-  'sm?': computed('_width', function() {
+  "sm?": computed("_width", function () {
     const width = this._width;
     return width >= 768 && width < 992;
   }),
   /**
    * @return true when viewport is smaller than 768px, false otherwise.
    */
-  'xs?': computed('_width', function() {
+  "xs?": computed("_width", function () {
     const width = this._width;
     return width < 768;
   }),
@@ -63,11 +62,11 @@ export default Mixin.create({
   init() {
     this._super(arguments);
     const self = this;
-    $(window).on('resize', () => {
-      if (!(self.get('isDestroyed') || self.get('isDestroying'))) {
-        self.set('_width', $(window).width());
+    window.addEventListener("resize", () => {
+      if (!(self.get("isDestroyed") || self.get("isDestroying"))) {
+        self.set("_width", window.innerWidth);
       }
     });
   },
-  _width: $(window).width()
+  _width: window.innerWidth,
 });

tests/dummy/app/controllers/viewport-demo.js

@@ -0,0 +1,5 @@
+import Viewport from "ember-cli-bootstrap3-grid/mixins/viewport";
+
+import Controller from "@ember/controller";
+
+export default Controller.extend(Viewport, {});

tests/dummy/app/router.js

@@ -8,6 +8,7 @@ const Router = EmberRouter.extend({
 
 Router.map(function() {
   this.route('twbs-clearfix');
+  this.route('viewport-demo');
 });
 
 export default Router;

tests/dummy/app/routes/viewport-demo.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

tests/dummy/app/templates/index.hbs

@@ -2,7 +2,13 @@
   <h1>Demo</h1>
   <ul>
     <li>
-      {{#link-to "twbs-clearfix"}}<code>twbs-clearfix</code> Component{{/link-to}}
+      {{#link-to "twbs-clearfix"}}
+        <code>twbs-clearfix</code>
+        Component
+      {{/link-to}}
+    </li>
+    <li>
+      {{#link-to "viewport-demo"}}<code>Viewport</code> Mixin Demo{{/link-to}}
     </li>
   </ul>
-</div>
+</div>

tests/dummy/app/templates/viewport-demo.hbs

@@ -0,0 +1,9 @@
+<div class="container">
+  <h2>Viewport</h2>
+  <ul>
+    <li>Is XS {{xs?}}</li>
+    <li>Is SM {{sm?}}</li>
+    <li>Is MD {{md?}}</li>
+    <li>Is LG {{lg?}}</li>
+  </ul>
+</div>