Skip to content

Commit 020e138

Browse files
david-yz-liudavid-yz-liu
authored
deps: Remove most vendor javascript files. (#1254)
Moved jquery to webpack, and removed jquery-ui and bootstrap.js entirely, as they were no longer being used. Removed some uses of jquery throughout the codebase.
1 parent f31e84d commit 020e138

17 files changed

+69
-98
lines changed

‎.pnp.js

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.yarn/cache/jquery-npm-3.6.0-ca7872bdbb-a0a819022a.zip

461 KB
Binary file not shown.

‎app/MasterTemplate.hs

-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ module MasterTemplate
33

44
import Config (enableCdn)
55
import qualified Data.Text as T
6-
import Scripts (globalScripts)
76
import Text.Blaze ((!))
87
import qualified Text.Blaze.Html5 as H
98
import qualified Text.Blaze.Html5.Attributes as A
@@ -31,7 +30,6 @@ masterTemplate title headers body scripts =
3130
"/static/style/app.css"]
3231
H.body $ do
3332
body
34-
mapM_ toScript globalScripts
3533
scripts
3634

3735
-- Insert the header of the Grid and Graph. This contains the year of the timetable, and

‎app/Scripts.hs

+3-26
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,18 @@
11
module Scripts (
2-
graphScripts, timetableScripts, drawScripts, postScripts, searchScripts, generateScripts,
3-
globalScripts
2+
graphScripts, timetableScripts, drawScripts, postScripts, searchScripts, generateScripts
43
)
54
where
65

7-
import Config (enableCdn)
8-
import qualified Data.Text as T
96
import Text.Blaze ((!))
107
import qualified Text.Blaze.Html5 as H
118
import qualified Text.Blaze.Html5.Attributes as A
129
import Util.Blaze
1310

14-
-- | Scripts that are loaded on every page.
15-
globalScripts :: [T.Text]
16-
globalScripts = jQueryScripts
17-
18-
jQueryScripts :: [T.Text]
19-
jQueryScripts = if enableCdn
20-
then ["https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
21-
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"]
22-
else ["/static/js/vendor/jquery.min.1.10.2.js",
23-
"/static/js/vendor/jquery-ui.min.1.10.4.js"]
24-
2511
graphScripts :: H.Html
26-
graphScripts = do
27-
mapM_ toScript
28-
["/static/js/vendor/bootstrap.min.3.1.1.js"]
29-
H.script ! A.src "/static/js/graph/app.js" $ ""
12+
graphScripts = H.script ! A.src "/static/js/graph/app.js" $ ""
3013

3114
timetableScripts :: H.Html
32-
timetableScripts = do
33-
mapM_ toScript
34-
[if enableCdn
35-
then "https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"
36-
else "/static/js/vendor/bootstrap.min.3.1.1.js"
37-
]
38-
H.script ! A.src "/static/js/grid/app.js" $ ""
15+
timetableScripts = H.script ! A.src "/static/js/grid/app.js" $ ""
3916

4017
drawScripts :: H.Html
4118
drawScripts = do

‎js/components/draw/draw.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ function makeNode(posX, posY, jsonObj) {
8585
} else {
8686
var nodeWidth = 40
8787
var nodeHeight = 32
88-
var nodeFill = "#" + $("#select-colour").val()
88+
var nodeFill = "#" + document.getElementById("select-colour").value
8989
var nodeId_ = "n" + nodeId
9090
var nodeTolerance = 9
9191

@@ -472,7 +472,7 @@ function finishRegion() {
472472
curPath.elbows.length >= 3
473473
) {
474474
curPath.setAttributeNS(null, "d", curPath.getAttribute("d") + "Z")
475-
curPath.setAttributeNS(null, "style", "fill:#" + $("#select-colour").val())
475+
curPath.setAttributeNS(null, "style", "fill:#" + document.getElementById("select-colour").value)
476476
curPath.addEventListener("mousedown", regionClicked, false)
477477
curPath.setAttributeNS(null, "pointer-events", "boundingBox") // to solve point in polygon problem
478478
curPath.setAttributeNS(null, "class", "region")

‎js/components/graph/Container.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ export default class Container extends React.Component {
3434
}
3535
)
3636

37-
// Need to use jQuery because nav-export is still a Haskell generated HTML component
38-
$("#nav-export").click(() => {
37+
// Enable "Export" link
38+
document.getElementById("nav-export")?.addEventListener("click", () => {
3939
this.graph.current.openExportModal()
4040
})
4141
}

‎js/components/grid/grid.js.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ class Grid extends React.Component {
6868
}
6969

7070
// Enable "Export" link
71-
$("#nav-export").click(() => this.exportModal.openModal())
71+
document.getElementById("nav-export")?.addEventListener("click", () => {
72+
this.exportModal.openModal()
73+
})
7274
}
7375

7476
componentDidUpdate(prevProps, prevState) {

‎js/components/search/search.js.jsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -154,14 +154,14 @@ class Timetable extends React.Component {
154154
}
155155

156156
componentDidMount() {
157-
$("#codeFilter").keyup(() => {
158-
this.setState({ codeSearch: $("#codeFilter").val() })
157+
document.getElementById("codeFilter").addEventListener("keyup", e => {
158+
this.setState({ codeSearch: e.target.value })
159159
})
160-
$("#instFilter").keyup(() => {
161-
this.setState({ instSearch: $("#instFilter").val() })
160+
document.getElementById("instFilter").addEventListener("keyup", e => {
161+
this.setState({ codeSearch: e.target.value })
162162
})
163-
$("#timeFilter").keyup(() => {
164-
this.setState({ timeSearch: $("#timeFilter").val() })
163+
document.getElementById("timeFilter").addEventListener("keyup", e => {
164+
this.setState({ codeSearch: e.target.value })
165165
})
166166
}
167167

‎js/setupTests.js

-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@ import testContainerData from "./components/graph/__mocks__/testContainerData"
66
import aaa100CourseInfo from "./components/graph/__mocks__/aaa100-course-info"
77
import statisticsTestData from "./components/graph/__mocks__/statisticsTestData"
88
import fetchMock from "fetch-mock"
9-
import $ from "../public/js/vendor/jquery.min.1.10.2"
10-
11-
// Need to import jQuery globally as we are loading it through Haskell
12-
global.$ = global.jQuery = $
139

1410
fetchMock.get("http://localhost/get-json-data?graphName=Computer+Science", testData)
1511
fetchMock.get(

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"dependencies": {
4343
"core-js": "^3.11.0",
4444
"handlebars": "^4.7.7",
45+
"jquery": "^3.6.0",
4546
"leaflet": "^1.5.1",
4647
"lodash": "^4.17.19",
4748
"react": "^16.4.1",

‎public/js/draw/draw.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function makeNode(posX, posY, jsonObj) {
8787
} else {
8888
var nodeWidth = 40;
8989
var nodeHeight = 32;
90-
var nodeFill = '#' + $('#select-colour').val();
90+
var nodeFill = '#' + document.getElementById('select-colour').value;
9191
var nodeId_ = 'n' + nodeId;
9292
var nodeTolerance = 9;
9393

@@ -432,7 +432,7 @@ function finishRegion() {
432432

433433
if (mode === 'region-mode' && curPath !== null && curPath.elbows.length >= 3) {
434434
curPath.setAttributeNS(null, 'd', curPath.getAttribute('d') + 'Z');
435-
curPath.setAttributeNS(null, 'style', 'fill:#' + $('#select-colour').val());
435+
curPath.setAttributeNS(null, 'style', 'fill:#' + document.getElementById('select-colour').value);
436436
curPath.addEventListener('mousedown', regionClicked, false);
437437
curPath.setAttributeNS(null, 'pointer-events','boundingBox'); // to solve point in polygon problem
438438
curPath.setAttributeNS(null, 'class', 'region');

‎public/js/draw/setup.js

+26-34
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,21 @@
11
/* SET UP SIDEBAR AND ONCLICKS FOR BUTTONS */
22

3-
$('.mode').each(function () {
4-
'use strict';
5-
6-
$(this).click(function () {
7-
changeMode(this.id);});
8-
});
9-
10-
$('#add-text').click(function () {
11-
addText();
12-
});
3+
for (const node of document.getElementsByClassName('mode')) {
4+
node.addEventListener('click', () => changeMode(node.id))
5+
}
136

14-
$('#finish-region').click(function () {
15-
finishRegion();
16-
});
7+
document.getElementById('add-text').addEventListener('click', addText)
8+
document.getElementById('finish-region').addEventListener('click', finishRegion)
179

1810
$('#colour-table').on('click', 'td', function() {
1911
document.getElementById('select-colour').jscolor.fromString($(this).css('backgroundColor'));
2012
});
2113

22-
$('#save-graph').click(function () {
14+
document.getElementById('save-graph').addEventListener('click', () => {
2315
$.ajax({
2416
url: '/save-json',
2517
data: {'jsonData' : convertSvgToJson(),
26-
'nameData' : $('#area-of-study').val()},
18+
'nameData' : document.getElementById('area-of-study').value},
2719
method: 'POST',
2820
success: function(status) {
2921
console.log(status);
@@ -34,23 +26,23 @@ $('#save-graph').click(function () {
3426
});
3527
});
3628

37-
$('#submit-graph-name').click(function() {
38-
$.ajax({
39-
url: '/get-json-data',
40-
data: {graphName : $('#area-of-study').val()},
41-
dataType: 'json',
42-
success: function(data) {
43-
var div = document.getElementById('main');
44-
document.body.removeChild(div);
45-
setupSVGCanvas();
46-
svgDoc.appendChild(setupMarker());
47-
renderJson(JSON.stringify(data));
48-
},
49-
error: function(xhr, status, err) {
50-
console.error('graphs', status, err.toString());
51-
}
52-
});
29+
document.getElementById('submit-graph-name').addEventListener('click', () => {
30+
$.ajax({
31+
url: '/get-json-data',
32+
data: {graphName : document.getElementById('area-of-study').value},
33+
dataType: 'json',
34+
success: function(data) {
35+
var div = document.getElementById('main');
36+
document.body.removeChild(div);
37+
setupSVGCanvas();
38+
svgDoc.appendChild(setupMarker());
39+
renderJson(JSON.stringify(data));
40+
},
41+
error: function(xhr, status, err) {
42+
console.error('graphs', status, err.toString());
43+
}
5344
});
45+
});
5446

5547
document.addEventListener('keydown', keyboard, false);
5648

@@ -62,7 +54,7 @@ document.addEventListener('keydown', keyboard, false);
6254
function keyboard(e) {
6355
'use strict';
6456

65-
if (! $("#course-code").is(":focus")) {
57+
if (document.getElementById("course-code") == document.activeElement) {
6658
if (e.which === 78) {
6759
changeMode("node-mode"); // n
6860
} else if (e.which === 80) {
@@ -87,7 +79,7 @@ function keyboard(e) {
8779
function changeMode(id) {
8880
'use strict';
8981

90-
$('#' + mode).toggleClass('clicked');
82+
document.getElementById(mode).classList.toggle('clicked');
9183

9284
if (mode === 'path-mode') {
9385
// clean up partial temp path
@@ -117,7 +109,7 @@ function changeMode(id) {
117109
}
118110

119111
mode = id;
120-
$('#' + mode).toggleClass('clicked');
112+
document.getElementById(mode).classList.toggle('clicked');
121113
}
122114

123115

‎public/js/vendor/bootstrap.min.3.1.1.js

-6
This file was deleted.

‎public/js/vendor/jquery-ui.min.1.10.4.js

-7
This file was deleted.

‎public/js/vendor/jquery.min.1.10.2.js

-6
This file was deleted.

‎webpack.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const path = require("path")
22
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
3+
const webpack = require("webpack")
34

45
const presets = [
56
["@babel/preset-env", { useBuiltIns: "usage", corejs: 3 }],
@@ -56,6 +57,10 @@ module.exports = {
5657
filename: "[name].css",
5758
chunkFilename: "[id].css",
5859
}),
60+
new webpack.ProvidePlugin({
61+
$: "jquery",
62+
jQuery: "jquery",
63+
}),
5964
],
6065
mode: "development",
6166
}

‎yarn.lock

+8
Original file line numberDiff line numberDiff line change
@@ -4223,6 +4223,7 @@ __metadata:
42234223
fetch-mock: ^7.3.1
42244224
handlebars: ^4.7.7
42254225
jest: 26.6.3
4226+
jquery: ^3.6.0
42264227
leaflet: ^1.5.1
42274228
lodash: ^4.17.19
42284229
mini-css-extract-plugin: ^1.5.1
@@ -7981,6 +7982,13 @@ fsevents@^1.2.7:
79817982
languageName: node
79827983
linkType: hard
79837984

7985+
"jquery@npm:^3.6.0":
7986+
version: 3.6.0
7987+
resolution: "jquery@npm:3.6.0"
7988+
checksum: a0a819022a1bdff5efa79bbd9d4d7352de5bd32dabe42108e6ec0797238dba36c09c108e0eea2724f5d03acc1b30ee87d76bec80e15b9510106532292ebe6ba4
7989+
languageName: node
7990+
linkType: hard
7991+
79847992
"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
79857993
version: 4.0.0
79867994
resolution: "js-tokens@npm:4.0.0"

0 commit comments

Comments
 (0)