Merge pull request ember-learn#612 from dbendaou/removing_jquery_usage_from_app

Removing jQuery usage from app

Author: sivakumar-kailasam

app/components/ember-anchor.js

@@ -1,18 +1,18 @@
-import $ from 'jquery';
 import { get } from '@ember/object';
 import AnchorComponent from 'ember-anchor/components/ember-anchor';
 import config from 'ember-api-docs/config/environment';
+import getOffset from 'ember-api-docs/utils/get-offset';
 
 export default AnchorComponent.extend({
-
   // This overrides Ember Anchor to support scrolling within a fixed position element
   _scrollToElemPosition() {
     let qp = this.anchorQueryParam;
     let qpVal = this.get(get(this, 'attrs.a') ? 'a' : `controller.${qp}`);
-    let elem = $(`[data-${qp}="${qpVal}"]`);
-    let offset = elem.offset() ? elem.offset().top : 0;
-    if (offset) {
-      $(config.APP.scrollContainerSelector).scrollTop(offset);
+    let elem = document.querySelector(`[data-${qp}="${qpVal}"]`);
+
+    if (elem && elem.offsetHeight) {
+      const offsetToScroll = getOffset(elem, config.APP.scrollContainerSelector)
+      document.querySelector(config.APP.scrollContainerSelector).scrollTo(0, offsetToScroll);
     }
   }
 });

app/mixins/scroll-tracker.js

@@ -1,7 +1,7 @@
 import Mixin from '@ember/object/mixin';
 import { inject as service } from '@ember/service';
-import $ from 'jquery';
 import config from 'ember-api-docs/config/environment';
+import getOffset from 'ember-api-docs/utils/get-offset';
 
 export default Mixin.create({
 
@@ -15,10 +15,11 @@ export default Mixin.create({
     didTransition() {
       this._super();
       if ((typeof FastBoot === 'undefined') && window.location.search === '?anchor=' ) {
-        let elem = $('#methods');
-        let offset = elem.offset() ? elem.offset().top : 0;
-        if (offset) {
-          $(config.APP.scrollContainerSelector).scrollTop(offset - 10);
+        let elem = document.querySelector('#methods');
+
+        if (elem && elem.offsetHeight) {
+          const offsetToScroll = getOffset(elem, config.APP.scrollContainerSelector)
+          document.querySelector(config.APP.scrollContainerSelector).scrollTo(0, offsetToScroll - 10);
           return;
         }
       }

app/services/scroll-position-reset.js

@@ -1,5 +1,4 @@
 import Service from '@ember/service';
-import $ from 'jquery';
 import config from 'ember-api-docs/config/environment';
 
 const { scrollContainerSelector } = config.APP;
@@ -27,7 +26,8 @@ export default Service.extend({
 
   doReset() {
     if (this._shouldResetScroll) {
-      $(scrollContainerSelector).scrollTop(0);
+      const selector = document.querySelector(scrollContainerSelector);
+      selector.scrollTo(0,0);
       this.set('_shouldResetScroll', false);
     }
   }

app/utils/get-offset.js

@@ -0,0 +1,9 @@
+export default function getOffset(element, container) {
+  let offsetTop = element.offsetTop;
+  let parent = element.offsetParent;
+  while (parent != null && parent != container) {
+    offsetTop  += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  return offsetTop;
+}