Remove jquery from project

Author: wishdasher

package-lock.json

@@ -27,7 +27,6 @@
   "homepage": "https://github.com/npfoss/courseroad2#readme",
   "dependencies": {
     "axios": "^0.18.0",
-    "jquery": "^3.3.1",
     "material-design-icons-iconfont": "^4.0.5",
     "moment": "^2.24.0",
     "typeface-roboto": "0.0.54",

package.json

@@ -171,7 +171,7 @@ export default {
         } };
         return this.verify()
           .then(function (verifyResponse) {
-            return !!params
+            return params
               ? axiosFunc(process.env.FIREROAD_URL + link, params, headerList)
               : axiosFunc(process.env.FIREROAD_URL + link, headerList);
           });

src/components/Auth.vue

@@ -194,7 +194,6 @@
 </template>
 
 <script>
-import $ from 'jquery';
 import SubjectScroll from '../components/SubjectScroll.vue';
 import ExpansionReqs from '../components/ExpansionReqs.vue';
 import colorMixin from './../mixins/colorMixin.js';
@@ -236,7 +235,7 @@ export default {
     },
     clickRelatedSubject: function (subject) {
       this.$emit('push-stack', subject.id);
-      $('#cardBody').animate({ scrollTop: 0 });
+      document.getElementById('cardBody').scrollTop = 0;
     },
     parseRequirements: function (requirements) {
       // TODO: a way to make this more ETU?
@@ -425,4 +424,7 @@ table td:first-child {
   padding-right: 1em;
 }
 
+#cardBody {
+  scroll-behavior: smooth;
+}
 </style>

src/components/ClassInfo.vue

@@ -30,10 +30,14 @@
                 @click="viewClassInfo(props)"
               >
                 <td style="padding: 0px; white-space: nowrap; width: 30%;">
-                  <v-icon style="vertical-align: middle;">drag_indicator</v-icon>
-                  <span style="vertical-align: middle;"> {{props.item.subject_id}}</span>
+                  <v-icon style="vertical-align: middle;">
+                    drag_indicator
+                  </v-icon>
+                  <span style="vertical-align: middle;"> {{ props.item.subject_id }}</span>
+                </td>
+                <td style="padding: 2px 4px 2px 0px; width: 60%;">
+                  {{ props.item.title }}
                 </td>
-                <td style="padding: 2px 4px 2px 0px; width: 60%;">{{props.item.title}}</td>
               </tr>
             </v-hover>
           </template>
@@ -45,7 +49,6 @@
 
 <script>
 import FilterSet from './FilterSet.vue';
-import $ from 'jquery';
 import Vue from 'vue';
 
 export default {
@@ -244,9 +247,7 @@ export default {
     this.updateMenuStyle();
 
     window.cookies = this.$cookies;
-    $(window).resize(function () {
-      this.updateMenuStyle();
-    }.bind(this));
+    window.addEventListener('resize', this.updateMenuStyle.bind(this));
 
     if (this.$cookies.isKey('paginationRows')) {
       this.pagination.rowsPerPage = parseInt(this.$cookies.get('paginationRows'));
@@ -261,19 +262,17 @@ export default {
         isNew: true
       });
     },
+    // Change search menu size based on existence of class info card
     updateMenuStyle: function () {
       const searchInputElem = document.getElementById('searchInputTF');
       const searchInputRect = searchInputElem.getBoundingClientRect();
       const searchMenuTop = searchInputRect.top + searchInputRect.height;
-      const searchInput = $('#searchInputTF');
-      const menuWidth = searchInput.outerWidth();
-      const classInfoCard = $('#classInfoCard');
-      let menuBottom;
-      if (classInfoCard.length) {
-        menuBottom = classInfoCard.position().top;
-      } else {
-        menuBottom = $(window).innerHeight();
-      }
+      const searchInput = document.getElementById('searchInputTF');
+      const menuWidth = searchInput.offsetWidth;
+      const classInfoCard = document.getElementById('classInfoCard');
+      const menuBottom = classInfoCard
+        ? classInfoCard.getBoundingClientRect().top
+        : window.innerHeight;
       const maxHeight = menuBottom - searchMenuTop - this.menuMargin;
       this.searchHeight = 'max-height: ' + maxHeight + 'px;width: ' + menuWidth + 'px;';
     },

src/components/ClassSearch.vue

@@ -46,7 +46,6 @@
 
 <script>
 import SubjectScroll from '../components/SubjectScroll.vue';
-import $ from 'jquery';
 import Vue from 'vue';
 
 export default {
@@ -93,12 +92,12 @@ export default {
         this.expansionIndex = subj.index;
         this.open = true;
         this.nextReqs = nextReqs;
-        Vue.nextTick(function () {
-          const scrollPoint = $('#' + $.escapeSelector(scrollPointID));
-          const topPoint = scrollPoint.offset().top;
-          const cardBody = $('#cardBody');
-          cardBody.animate({ scrollTop: topPoint - cardBody.offset().top + cardBody.scrollTop() - 10 }, 200);
-        });
+        // Vue.nextTick(function () {
+          // const scrollPoint = $('#' + $.escapeSelector(scrollPointID));
+          // const topPoint = scrollPoint.offset().top;
+          // const cardBody = $('#cardBody');
+          // cardBody.animate({ scrollTop: topPoint - cardBody.offset().top + cardBody.scrollTop() - 10 }, 200);
+        // });
       } else {
         if (subj.id.indexOf('GIR:') >= 0) {
           subj.id = subj.id.substring(4);
@@ -111,15 +110,15 @@ export default {
     },
     closeMyExpansion: function (event) {
       this.open = false;
-      let scrollPoint;
-      if (!this.doubleScroller) {
-        scrollPoint = $('#' + $.escapeSelector(this.reqID));
-      } else {
-        scrollPoint = $('#ds' + this.whichScroller + $.escapeSelector(this.reqID));
-      }
-      const topPoint = scrollPoint.offset().top;
-      const cardBody = $('#cardBody');
-      cardBody.animate({ scrollTop: topPoint - cardBody.offset().top + cardBody.scrollTop() - 10 }, 350);
+      // let scrollPoint;
+      // if (!this.doubleScroller) {
+        // scrollPoint = $('#' + $.escapeSelector(this.reqID));
+      // } else {
+        // scrollPoint = $('#ds' + this.whichScroller + $.escapeSelector(this.reqID));
+      // }
+      // const topPoint = scrollPoint.offset().top;
+      // const cardBody = $('#cardBody');
+      // cardBody.animate({ scrollTop: topPoint - cardBody.offset().top + cardBody.scrollTop() - 10 }, 350);
     }
   }
 };

src/components/ExpansionReqs.vue

@@ -12,7 +12,7 @@
           <span v-if="'title-no-degree' in req && req['title-no-degree'] !=''">
             {{ req["title-no-degree"] }}
           </span>
-          <span v-else-if = "'medium-title' in req && req['medium-title'] != ''">{{ req['medium-title']}}</span>
+          <span v-else-if="'medium-title' in req && req['medium-title'] != ''">{{ req['medium-title'] }}</span>
           <span v-else-if="'short-title' in req && req['short-title'] != ''">
             {{ req['short-title'] }}
           </span>

src/components/Requirement.vue

@@ -239,7 +239,7 @@ export default {
     },
     semesterYear: function () {
       return this.index === 0
-        ?  ''
+        ? ''
         : Math.floor((this.index - 2) / 3) + this.baseYear;
     },
     semesterType: function () {
@@ -303,7 +303,7 @@ export default {
       const allIDs = subjects.map((s) => s.id);
       reqString = reqString.replace(/''/g, '"').replace(/,[\s]+/g, ',');
       const splitReq = reqString.split(/(,|\(|\)|\/)/);
-      const _this = this
+      const _this = this;
       for (let i = 0; i < splitReq.length; i++) {
         if (splitReq[i].indexOf('"') >= 0) {
           splitReq[i] = 'true';

src/components/Semester.vue

@@ -68,29 +68,28 @@
         @reset-id="resetID(...arguments)"
         @allow-cookies="allowCookies"
         @set-sem="setSemester"
-      >
-      </auth>
+      />
 
       <v-layout justify-end>
         <v-text-field
-          id = "searchInputTF"
-          autocomplete = "false"
-          class = "expanded-search"
+          id="searchInputTF"
+          v-model="searchInput"
+          autocomplete="false"
+          class="expanded-search"
           prepend-icon="search"
-          v-model = "searchInput"
-          placeholder = "Add classes"
+          placeholder="Add classes"
           autofocus
-          @click.native = "clickSearch"
-          @input = "typeSearch"
-          style = "width:100%;"
+          style="width:100%;"
+          @click.native="clickSearch"
+          @input="typeSearch"
         />
       </v-layout>
 
       <v-menu
+        v-model="searchOpen"
         :close-on-content-click="false"
-        v-model = "searchOpen"
-        :position-x = "searchX"
-        :position-y = "searchY"
+        :position-x="searchX"
+        :position-y="searchY"
       >
         <class-search
           id="searchMenu"
@@ -106,7 +105,6 @@
           @drag-start-class="dragStartClass"
         />
       </v-menu>
-
     </v-toolbar>
 
     <v-navigation-drawer
@@ -274,7 +272,6 @@ import RoadTabs from './../components/RoadTabs.vue';
 import ConflictDialog from './../components/ConflictDialog.vue';
 import Auth from './../components/Auth.vue';
 import axios from 'axios';
-import $ from 'jquery';
 import moment from 'moment';
 import UAParser from 'ua-parser-js';
 import Vue from 'vue';
@@ -393,23 +390,6 @@ export default {
     }
   },
   mounted () {
-    const borders = $('.v-navigation-drawer__border');
-    const scrollers = $('.scroller');
-    const scrollWidth = scrollers.width();
-
-    // moves nav drawer border with scroll
-    // if the effect proves too annoying we can remove the borders instead
-    // (commented out below)
-
-    scrollers.scroll(function () {
-      const scrollPosition = scrollers.scrollLeft();
-      borders.css({ top: 0, left: scrollWidth - 1 + scrollPosition });
-    });
-
-    $(window).on('hashchange', function () {
-      this.setActiveRoad();
-    }.bind(this));
-
     this.setActiveRoad();
 
     axios.get(process.env.FIREROAD_URL + `/requirements/list_reqs/`)
@@ -423,19 +403,23 @@ export default {
 
     this.updateFulfillment();
 
-    this.searchX = $("#searchInputTF").offset().left;
-    this.searchY = $("#searchInputTF").offset().top + $("#searchInputTF").outerHeight();
+    const searchInput = document.getElementById('searchInputTF');
+    const rect = searchInput.getBoundingClientRect();
+    this.searchX = rect.left + document.body.scrollLeft;
+    this.searchY = rect.top + document.body.scrollTop + searchInput.offsetHeight;
 
-    $(window).on("resize", function() {
-      this.searchX = $("#searchInputTF").offset().left;
-      this.searchY = $("#searchInputTF").offset().top + $("#searchInputTF").outerHeight();
+    window.addEventListener('resize', function () {
+      const searchInput = document.getElementById('searchInputTF');
+      const rect = searchInput.getBoundingClientRect();
+      this.searchX = rect.left + document.body.scrollLeft;
+      this.searchY = rect.top + document.body.scrollTop + searchInput.offsetHeight;
     }.bind(this));
 
     document.body.addEventListener('click', function (e) {
       this.showSearch = false;
     }.bind(this));
 
-    if(this.$cookies.isKey('dismissedOld')) {
+    if (this.$cookies.isKey('dismissedOld')) {
       this.dismissedOld = JSON.parse(this.$cookies.get('dismissedOld'));
       this.cookiesAllowed = true;
     }
@@ -710,22 +694,22 @@ export default {
       Vue.set(this.roads[this.activeRoad].contents.progressOverrides, newProgress.listID, newProgress.progress);
       Vue.set(this.roads[this.activeRoad], 'changed', moment().format(DATE_FORMAT));
     },
-    dismissOld: function() {
+    dismissOld: function () {
       this.dismissedOld = true;
-      if(this.cookiesAllowed) {
+      if (this.cookiesAllowed) {
         this.$cookies.set('dismissedOld', true);
       }
     },
     dismissCookies: function() {
       this.dismissedCookies = true;
-      if(this.cookiesAllowed) {
+      if (this.cookiesAllowed) {
         this.$cookies.set('dismissedCookies', true);
       }
     },
     clickSearch: function(event) {
       this.searchOpen = !this.searchOpen;
     },
-    typeSearch: function(searchString) {
+    typeSearch: function (searchString) {
       this.searchOpen = searchString.length > 0;
     }
   }