Skip to content

Commit ceca2b2

Browse files
cleooldcleoold
committed
replace var wherever possible
also use `const` as possible
1 parent 7259224 commit ceca2b2

File tree

5 files changed

+74
-76
lines changed

5 files changed

+74
-76
lines changed

‎js/bg.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ const pHtml = document.querySelector('html');
88

99
// background change
1010

11-
var bgChangeFlag = -1;
11+
let bgChangeFlag = -1;
1212
(() => {
1313
const colors = ['#30542c', '#232170', '#530a80', '#870c6d', '#873a0b'];
14-
//var colorsLight = ['#4c9144', '#514db0', '#a06bc2', '#ab609b'];
14+
//const colorsLight = ['#4c9144', '#514db0', '#a06bc2', '#ab609b'];
1515
let i = 0;
1616
bgChangeFlag = setTimeout(function loopBgColor() {
17-
if (++i == 5) i = 0;
17+
if (++i === 5) i = 0;
1818
pBody.style.backgroundColor = colors[i];
1919
pHtml.style.backgroundColor = colors[i];
2020
if (bgChangeFlag)
@@ -55,9 +55,9 @@ document.querySelector('.cancel-bg-change-and-enable-star').addEventListener('cl
5555
origin.style.width = '8px';
5656
origin.style.height = '8px';
5757
setTimeout(function loopSunColor() {
58-
if (++i == 6) i =0;
58+
if (++i === 6) i =0;
5959
origin.style.boxShadow = colors[i];
6060
origin.style.WebkitBoxShadow = colors[i];
6161
setTimeout(loopSunColor, 4000);
6262
}, 0);
63-
});
63+
});

‎js/min.js

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

‎js/movingbox.js

+46-48
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,19 @@ const container = document.querySelector('div#container');
1010
const containerWidthText = document.querySelector('.container-width');
1111
const origin = document.querySelector('div#origin');
1212

13-
var containerLength = 0;
13+
let containerLength = 0;
1414

1515
function floatToPx(num) {
1616
return String(num) + 'px';
1717
}
1818

1919
function parseFloat200(s) {
20-
let res = parseFloat(s);
20+
const res = parseFloat(s);
2121
return (isNaN(res))? Infinity : res;
2222
}
2323

2424
function wrongInput(elem) {
25-
let o = elem.style.backgroundColor;
25+
const o = elem.style.backgroundColor;
2626
elem.style.backgroundColor = '#c98d8d';
2727
setTimeout(() => {
2828
elem.style.backgroundColor = o;
@@ -31,7 +31,7 @@ function wrongInput(elem) {
3131

3232
function onChangeContainerSize(e) {
3333
containerLength = parseFloat(window.getComputedStyle(container).width);
34-
var containerLengthPx = floatToPx(containerLength);
34+
const containerLengthPx = floatToPx(containerLength);
3535
container.style.height = containerLengthPx;
3636
containerWidthText.value = containerLengthPx;
3737

@@ -77,10 +77,10 @@ function Block(initOffset = 0, initPeriod = 0, initSemiX = 0, initSemiY = 0, ini
7777
* rad:rotation angle in radians, deg:rotation angle in deg
7878
*/
7979
this.yieldRotated = (t) => {
80-
let x = this.yieldX(t);
81-
let y = this.yieldY(t);
82-
let deg = this.rotate(t);
83-
let rad = degToRadian(deg);
80+
const x = this.yieldX(t);
81+
const y = this.yieldY(t);
82+
const deg = this.rotate(t);
83+
const rad = degToRadian(deg);
8484
return {
8585
x: rotateX(x,y,rad),
8686
y: rotateY(x,y,rad),
@@ -94,18 +94,18 @@ function Block(initOffset = 0, initPeriod = 0, initSemiX = 0, initSemiY = 0, ini
9494

9595
// moving block area
9696

97-
var intervals = 40;
97+
let intervals = 40;
9898

9999
/**
100100
* the rendered block
101101
* @function BlockInMotion
102102
* @param {Number} id specifies the index number of the spawned block
103103
* @return {BlockInMotion} a newly spawned moving block
104104
*
105-
* usage var x = new BlockInMotion(1)
105+
* usage let x = new BlockInMotion(1)
106106
*/
107107
function BlockInMotion(id) {
108-
var block1 = new Block();
108+
let block1 = new Block();
109109
const blockElement = document.querySelector(`div#moving-obj-${id}`);
110110
const blockTrajectoryElement = document.querySelector(`div#moving-obj-trajectory-${id}`);
111111
const blockPrjElement = document.querySelector(`div#moving-obj-prj-${id}`);
@@ -124,14 +124,14 @@ function BlockInMotion(id) {
124124
const setRotateAroundSelect = document.querySelector(`#info-container-${id} .set-rotate-around`);
125125
const enterBtn = document.querySelector(`#info-container-${id} .set-attr-go`);
126126
const resetBtn = document.querySelector(`#info-container-${id} .set-attr-reset`);
127-
var maxRadiusInContainer = 0;
128-
var timer = 0;
129-
var rendered = null;
130-
var isFocus = false;
127+
let maxRadiusInContainer = 0;
128+
let timer = 0;
129+
let rendered = null;
130+
let isFocus = false;
131131

132-
var dragFlag = false;
133-
var blockElementIniX = 0;
134-
var blockElementIniY = 0;
132+
let dragFlag = false;
133+
let blockElementIniX = 0;
134+
let blockElementIniY = 0;
135135

136136
// set default values of the circle
137137
function setDefaultValsForCircle(e, resetColor=true) {
@@ -187,16 +187,16 @@ function BlockInMotion(id) {
187187
// also renders semiX/semiY trajectory // |
188188
function rendersBlock() { // |
189189
timer += intervals; // |
190-
let realTimer = timer / 1000; // intriguing geometry. i do not like // |
191-
let o = parseFloat(blockElement.style.width);
192-
let correction = maxRadiusInContainer - o / 2;
190+
const realTimer = timer / 1000; // intriguing geometry. i do not like // |
191+
const o = parseFloat(blockElement.style.width);
192+
const correction = maxRadiusInContainer - o / 2;
193193
const coordinateSet = block1.yieldRotated(realTimer);
194194
let x = coordinateSet.x + correction;
195195
let y = coordinateSet.y + correction;
196196

197197
let dX = 0, dY = 0;
198198
if (isFocus) { // if ellipse circulates around the focus, shift
199-
let rad = coordinateSet.rad;
199+
const rad = coordinateSet.rad;
200200
if (Math.abs(coordinateSet.rx) >= Math.abs(coordinateSet.ry)) {
201201
let c = Math.sqrt(coordinateSet.rx ** 2 - coordinateSet.ry ** 2);
202202
dX = c * Math.cos(rad);
@@ -245,7 +245,7 @@ function BlockInMotion(id) {
245245
semiY = Math.abs(semiY);
246246
blockTrajectoryElement.style.width = floatToPx(semiX * 2);
247247
blockTrajectoryElement.style.height = floatToPx(semiY * 2);
248-
let leftTopPos = parseFloat(window.getComputedStyle(container).width) / 2;
248+
const leftTopPos = parseFloat(window.getComputedStyle(container).width) / 2;
249249
blockTrajectoryElement.style.left = floatToPx(leftTopPos - semiX + dX);
250250
blockTrajectoryElement.style.top = floatToPx(leftTopPos - semiY + dY);
251251
blockTrajectoryElement.style.transform = `rotate(${deg}deg)`;
@@ -284,15 +284,15 @@ function BlockInMotion(id) {
284284
// by changing the 'rotate around', we can make the ball circulate around origin, or focus (apply to ellipses)
285285
// updates the isFocus
286286
setRotateAroundSelect.addEventListener('change', (e) => {
287-
let option = setRotateAroundSelect.value;
288-
if (option == 'origin') isFocus = false;
287+
const option = setRotateAroundSelect.value;
288+
if (option === 'origin') isFocus = false;
289289
else isFocus = true;
290290
});
291291

292292
// by clicking go button, start rotating the ball
293293
enterBtn.addEventListener('click', function triggerCircleMotion(e) {
294294
// check color and size boxes
295-
const setSizeTextVal = parseFloat(setSizeText.value)
295+
const setSizeTextVal = parseFloat(setSizeText.value);
296296
if (setSizeTextVal <= 30 && setSizeTextVal >= 5) {
297297
enterBtn.style.backgroundColor = setColorText.value;
298298

@@ -306,10 +306,10 @@ function BlockInMotion(id) {
306306
return;
307307
}
308308
// check period, semiX/semiY, rotation boxes
309-
let TNotValid = isNaN(parseFloat(setPeriodText.value));
310-
let ANotValid = isNaN(parseFloat(setRotateText.value)) || Math.abs(parseFloat(setRotateText.value)) > 360;
311-
let XToLarge = Math.abs(parseFloat200(setSemiXText.value)) > maxRadiusInContainer;
312-
let YToLarge = Math.abs(parseFloat200(setSemiYText.value)) > maxRadiusInContainer;
309+
const TNotValid = isNaN(parseFloat(setPeriodText.value));
310+
const ANotValid = isNaN(parseFloat(setRotateText.value)) || Math.abs(parseFloat(setRotateText.value)) > 360;
311+
const XToLarge = Math.abs(parseFloat200(setSemiXText.value)) > maxRadiusInContainer;
312+
const YToLarge = Math.abs(parseFloat200(setSemiYText.value)) > maxRadiusInContainer;
313313
if (!XToLarge && !YToLarge && !TNotValid && !ANotValid) {
314314
block1.initPeriod = parseFloat(setPeriodText.value);
315315
block1.initSemiX = parseFloat(setSemiXText.value);
@@ -332,18 +332,18 @@ function BlockInMotion(id) {
332332
if (!setSemiXLDeltaText.value) setSemiXLDeltaText.value = 0;
333333
if (!setSemiYLDeltaText.value) setSemiYLDeltaText.value = 0;
334334
if (!setRotateLDeltaText.value) setRotateLDeltaText.value = 0;
335-
let TLDNotValid = isNaN(parseFloat(setPeriodLDeltaText.value));
336-
let ALDNotValid = isNaN(parseFloat(setRotateLDeltaText.value)) || Math.abs(parseFloat(setRotateLDeltaText.value)) > 360;
337-
let XLDToLarge = Math.abs(parseFloat200(setSemiXLDeltaText.value)) > maxRadiusInContainer;
338-
let YLDToLarge = Math.abs(parseFloat200(setSemiYLDeltaText.value)) > maxRadiusInContainer;
335+
const TLDNotValid = isNaN(parseFloat(setPeriodLDeltaText.value));
336+
const ALDNotValid = isNaN(parseFloat(setRotateLDeltaText.value)) || Math.abs(parseFloat(setRotateLDeltaText.value)) > 360;
337+
const XLDToLarge = Math.abs(parseFloat200(setSemiXLDeltaText.value)) > maxRadiusInContainer;
338+
const YLDToLarge = Math.abs(parseFloat200(setSemiYLDeltaText.value)) > maxRadiusInContainer;
339339
if (!XLDToLarge && !YLDToLarge && !TLDNotValid && !ALDNotValid) {
340-
var periodLD = parseFloat(setPeriodLDeltaText.value);
340+
const periodLD = parseFloat(setPeriodLDeltaText.value);
341341
block1.period = (t) => block1.initPeriod + t * periodLD;
342-
var semiXLD = parseFloat(setSemiXLDeltaText.value);
342+
const semiXLD = parseFloat(setSemiXLDeltaText.value);
343343
block1.semiX = (t) => block1.initSemiX + t * semiXLD;
344-
var semiYLD = parseFloat(setSemiYLDeltaText.value);
344+
const semiYLD = parseFloat(setSemiYLDeltaText.value);
345345
block1.semiY = (t) => block1.initSemiY + t * semiYLD;
346-
var rotateLD = parseFloat(setRotateLDeltaText.value);
346+
const rotateLD = parseFloat(setRotateLDeltaText.value);
347347
block1.rotate = (t) => block1.initRotate + t * rotateLD;
348348

349349
setPeriodLDeltaText.value = periodLD;
@@ -390,9 +390,9 @@ function BlockInMotion(id) {
390390
if (dragFlag) {
391391
e = e || window.event;
392392
e.preventDefault();
393-
let o = parseFloat(blockElement.style.width);
394-
let newX = (e.clientX || e.touches[0].clientX) - blockElementIniX;
395-
let newY = (e.clientY || e.touches[0].clientY) - blockElementIniY;
393+
const o = parseFloat(blockElement.style.width);
394+
const newX = (e.clientX || e.touches[0].clientX) - blockElementIniX;
395+
const newY = (e.clientY || e.touches[0].clientY) - blockElementIniY;
396396
if (blockOffBoundary(newX, newY, o)) return;
397397
blockElement.style.left = floatToPx(newX);
398398
blockElement.style.top = floatToPx(newY);
@@ -401,9 +401,9 @@ function BlockInMotion(id) {
401401

402402
blockPrjElement.style.left = floatToPx(newX);
403403

404-
let dX = newX - parseFloat(origin.style.left);
405-
let dY = newY - parseFloat(origin.style.top);
406-
let newRadius = Math.sqrt((dX ** 2 + dY ** 2));
404+
const dX = newX - parseFloat(origin.style.left);
405+
const dY = newY - parseFloat(origin.style.top);
406+
const newRadius = Math.sqrt((dX ** 2 + dY ** 2));
407407
setSemiXText.value = newRadius;
408408
setSemiYText.value = newRadius;
409409
block1.offset = -Math.atan2(dY, dX);
@@ -440,7 +440,7 @@ function BlockInMotion(id) {
440440
const setFpsText = document.querySelector('.shared-info-container-bo > span:nth-child(2)');
441441

442442
document.querySelector('.shared-info-container-bo .fps-decrease').addEventListener('click', (e) => {
443-
let fps = parseInt(setFpsText.innerText);
443+
const fps = parseInt(setFpsText.innerText);
444444
if (fps <= 5) {
445445
setFpsText.innerText = 5;
446446
return;
@@ -449,13 +449,11 @@ document.querySelector('.shared-info-container-bo .fps-decrease').addEventListen
449449
setFpsText.innerText = fps - ((fps >= 40) ? 10 : 5);
450450
});
451451
document.querySelector('.shared-info-container-bo .fps-increase').addEventListener('click', (e) => {
452-
let fps = parseInt(setFpsText.innerText);
452+
const fps = parseInt(setFpsText.innerText);
453453
if (fps >= 150) {
454454
setFpsText.innerText = 150;
455455
return;
456456
}
457457
intervals = parseInt(1000 / fps);
458458
setFpsText.innerText = fps + ((fps >= 40) ? 10 : 5);
459459
});
460-
461-

‎js/movingboxmany.js

+19-19
Original file line numberDiff line numberDiff line change
@@ -19,59 +19,59 @@ oneClickGoBtn.style.display = 'none';
1919
oneClickResetBtn.style.display = 'none';
2020
oneClickBtnsSeparator.style.display = 'none';
2121

22-
var prevObjSelect = [];
23-
var nextObjSelect = [];
24-
// var prevBtnHandlers = too lazy do not want to do it is not needed
25-
var nextBtnHandlers = [];
22+
const prevObjSelect = [];
23+
const nextObjSelect = [];
24+
// const prevBtnHandlers = too lazy do not want to do it is not needed
25+
const nextBtnHandlers = [];
2626

27-
var circular1 = new BlockInMotion(1);
27+
const circular1 = new BlockInMotion(1);
2828

2929
// manage multiple circulations (max 1+5=6)
30-
var CircularsCount = 1;
31-
var Circulars = [];
30+
let CircularsCount = 1;
31+
const Circulars = [];
3232

3333
document.querySelector('.obj-manage .append-objs').addEventListener('click', (e) => {
3434
if (CircularsCount >= 6) return;
3535
++CircularsCount;
3636

3737
// create nodes
38-
var clonedInfoContainer = infoContainer1.cloneNode(true);
38+
const clonedInfoContainer = infoContainer1.cloneNode(true);
3939
clonedInfoContainer.id = `info-container-${CircularsCount}`;
4040
clonedInfoContainer.children[0].children[1].innerText = `Block ${CircularsCount}`;
4141
clonedInfoContainer.style.display = 'none';
4242
grandContainer.insertBefore(clonedInfoContainer, container);
4343

44-
var clonedMovingObj = movingObj1.cloneNode(true);
44+
const clonedMovingObj = movingObj1.cloneNode(true);
4545
clonedMovingObj.id = `moving-obj-${CircularsCount}`;
4646
container.appendChild(clonedMovingObj);
4747

48-
var clonedMovingObjTrajectory = movingObjTrajectory1.cloneNode(true);
48+
const clonedMovingObjTrajectory = movingObjTrajectory1.cloneNode(true);
4949
clonedMovingObjTrajectory.id = `moving-obj-trajectory-${CircularsCount}`;
5050
container.insertBefore(clonedMovingObjTrajectory, origin);
5151

52-
var clonedMovingObjProjection = movingObjProjection1.cloneNode();
52+
const clonedMovingObjProjection = movingObjProjection1.cloneNode();
5353
clonedMovingObjProjection.id = `moving-obj-prj-${CircularsCount}`;
54-
var clonedMovingObjProjectionContainer = document.createElement('div');
54+
const clonedMovingObjProjectionContainer = document.createElement('div');
5555
clonedMovingObjProjectionContainer.setAttribute('class', 'projections');
5656
clonedMovingObjProjectionContainer.appendChild(clonedMovingObjProjection);
5757
grandContainer.insertBefore(clonedMovingObjProjectionContainer, objManageNode);
5858

5959
// create moving block js objects
60-
var bl = new BlockInMotion(CircularsCount);
60+
const bl = new BlockInMotion(CircularsCount);
6161
document.querySelector(`#info-container-${CircularsCount} .set-color`).value =
6262
`rgba(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},1)`;
6363
Circulars.push(bl);
6464

6565
// displays the multi-ball control buttons
66-
if (CircularsCount == 2) {
66+
if (CircularsCount === 2) {
6767
oneClickGoBtn.style.display = '';
6868
oneClickResetBtn.style.display = '';
6969
oneClickBtnsSeparator.style.display = '';
7070
}
7171
//window.scrollBy(0, 299);
7272

7373
// activates the switch-previous-next buttons
74-
const cc = CircularsCount
74+
const cc = CircularsCount;
7575
document.querySelector(`#info-container-${cc} .switch-obj-prev`).addEventListener('click', (e) => {
7676
document.querySelector(`#info-container-${cc}`).style.display = 'none';
7777
document.querySelector(`#info-container-${cc-1}`).style.display = 'grid';
@@ -104,7 +104,7 @@ document.querySelector('.obj-manage .delete-objs').addEventListener('click', (e)
104104
// if user is now at this page, move to the previous page
105105
if (amIAtThisPage) prevInfoBox.style.display = 'grid';
106106

107-
if (--CircularsCount == 1) {
107+
if (--CircularsCount === 1) {
108108
// hides the multi-ball control buttons
109109
oneClickGoBtn.style.display = 'none';
110110
oneClickResetBtn.style.display = 'none';
@@ -114,11 +114,11 @@ document.querySelector('.obj-manage .delete-objs').addEventListener('click', (e)
114114
});
115115

116116
document.querySelector('.obj-manage .objs-oneclick-go').addEventListener('click', (e) => {
117-
var btns = document.querySelectorAll('.info-container .set-attr-go');
117+
const btns = document.querySelectorAll('.info-container .set-attr-go');
118118
for (let each of btns) each.click();
119119
});
120120

121121
document.querySelector('.obj-manage .objs-oneclick-reset').addEventListener('click', (e) => {
122-
var btns = document.querySelectorAll('.info-container .set-attr-reset');
122+
const btns = document.querySelectorAll('.info-container .set-attr-reset');
123123
for (let each of btns) each.click();
124-
});
124+
});

‎js/req.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ let samplesShown = false;
1111

1212
samplesClickDisplay.addEventListener('click', (e) => {
1313
if (!samplesShown) {
14-
let urls = [
14+
const urls = [
1515
'./assets/uniformcircular1.gif',
1616
'./assets/uniformcircular2.gif',
1717
'./assets/uniformcircular3.gif',
1818
'./assets/uniformcircular4.gif'
1919
];
2020
for (let url of urls) {
21-
let imgContainer = document.createElement('img');
21+
const imgContainer = document.createElement('img');
2222
imgContainer.src = url;
2323
document.querySelector('.samples-display').appendChild(imgContainer);
2424
}
@@ -27,4 +27,4 @@ samplesClickDisplay.addEventListener('click', (e) => {
2727
each.remove();
2828
}
2929
samplesShown = !samplesShown;
30-
});
30+
});

0 commit comments

Comments
 (0)