Skip to content

Remove jquery from project #239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wishdasher wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Remove jquery from project #239

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fca2e7e
Remove jquery from project
wishdasher May 2, 2019
f831f61
Reimplement card nested req scrolling in Javascript
wishdasher May 3, 2019
de45a12
Merge branch 'master' into remove-jquery
georgiashay Oct 8, 2019
6ac3418
lint
georgiashay Oct 8, 2019
ac27c56
Merge branch 'master' into remove-jquery
georgiashay Dec 29, 2020
08c9cdd
Remove unused code escape
georgiashay Dec 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
396 changes: 186 additions & 210 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Auth.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
6 changes: 4 additions & 2 deletions src/components/ClassInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -236,7 +235,7 @@ export default {
},
clickRelatedSubject: function (subject) {
this.$emit('push-stack', subject.id);
$('#cardBody').animate({ scrollTop: 0 });
document.getElementById('cardBody').scrollTop = 0;
Copy link
Collaborator

@georgiashay georgiashay May 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This no longer animates the scroll nicely. Not sure if there is a way to animate this without jquery? The scroll-behavior:smooth doesn't seem to be having the same effect.

Copy link
Member

@ttpcodes ttpcodes May 7, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are two ways we can do this: figure out the CSS animation or drop in a replacement for jQuery that only handles animations. I can't comment on the former since I'm atrociously awful at CSS animation, but I have used Velocity.js as a replacement for jQuery before. It only contains animation libraries and should be smaller than jQuery, while also having more responsive animations in comparison.

Copy link
Collaborator

@georgiashay georgiashay May 7, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think vuetify also has transitions that could be helpful here

},
parseRequirements: function (requirements) {
// TODO: a way to make this more ETU?
Expand Down Expand Up @@ -425,4 +424,7 @@ table td:first-child {
padding-right: 1em;
}

#cardBody {
scroll-behavior: smooth;
}
</style>
31 changes: 15 additions & 16 deletions src/components/ClassSearch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -45,7 +49,6 @@

<script>
import FilterSet from './FilterSet.vue';
import $ from 'jquery';
import Vue from 'vue';

export default {
Expand Down Expand Up @@ -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'));
Expand All @@ -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;';
},
Expand Down
34 changes: 24 additions & 10 deletions src/components/ExpansionReqs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@

<script>
import SubjectScroll from '../components/SubjectScroll.vue';
import $ from 'jquery';
import Vue from 'vue';

export default {
Expand Down Expand Up @@ -79,6 +78,19 @@ export default {
}
},
methods: {
fcssecape: function (ch, asCodePoint) {
if (asCodePoint) {
if (ch === "\0") {
return "\uFFFD";
}
return ch.slice(0, -1) + "\\" + ch.charCodeAt(ch.length - 1).toString(16) + " ";
}
return "\\" + ch;
},
escape: function (sel) {
return (sel + "").replace(/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g
, fcssescape);
},
clickSubject: function (subj, scroller) {
let scrollPointID;
let nextReqs;
Expand All @@ -94,10 +106,11 @@ export default {
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);
const scrollPoint = document.getElementById(escape(scrollPointID));
const topPoint = scrollPoint.getBoundingClientRect().top;
const cardBody = document.getElementById("cardBody");
const cardTopPoint = cardBody.getBoundingClientRect().top;
cardBody.scrollTop = topPoint - cardTopPoint + cardBody.scrollTop - 10;
});
} else {
if (subj.id.indexOf('GIR:') >= 0) {
Expand All @@ -113,13 +126,14 @@ export default {
this.open = false;
let scrollPoint;
if (!this.doubleScroller) {
scrollPoint = $('#' + $.escapeSelector(this.reqID));
scrollPoint = document.getElementById(escape(this.reqID));
Copy link
Collaborator

@georgiashay georgiashay May 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This scrolling also does not seem to be animated anymore.

} else {
scrollPoint = $('#ds' + this.whichScroller + $.escapeSelector(this.reqID));
scrollPoint = document.getElementById('ds' + this.whichScroller + escape(this.reqID));
}
const topPoint = scrollPoint.offset().top;
const cardBody = $('#cardBody');
cardBody.animate({ scrollTop: topPoint - cardBody.offset().top + cardBody.scrollTop() - 10 }, 350);
const topPoint = scrollPoint.getBoundingClientRect().top;
const cardBody = document.getElementById("cardBody");
const cardTopPoint = cardBody.getBoundingClientRect().top;
cardBody.scrollTop = topPoint - cardTopPoint + cardBody.scrollTop - 10;
}
}
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/Requirement.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Semester.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export default {
},
semesterYear: function () {
return this.index === 0
? ''
? ''
: Math.floor((this.index - 2) / 3) + this.baseYear;
},
semesterType: function () {
Expand Down Expand Up @@ -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';
Expand Down
68 changes: 26 additions & 42 deletions src/pages/MainPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -106,7 +105,6 @@
@drag-start-class="dragStartClass"
/>
</v-menu>

</v-toolbar>

<v-navigation-drawer
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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 () {
Copy link
Collaborator

@georgiashay georgiashay May 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this removed?

this.setActiveRoad();
}.bind(this));

this.setActiveRoad();

axios.get(process.env.FIREROAD_URL + `/requirements/list_reqs/`)
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
}
Expand Down