Skip to content

Commit b46fa88

Browse files
cleooldcleoold
committed
added prev/next buttons for navigating multiple object settings; check IE browser
1 parent c9c6132 commit b46fa88

File tree

3 files changed

+73
-18
lines changed

3 files changed

+73
-18
lines changed

‎css/style.css

+24-8
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ body {
3232
overflow: hidden;
3333
}
3434

35+
36+
3537
/* data input area */
3638

3739
.info-container {
@@ -60,9 +62,29 @@ body {
6062
}
6163
}
6264

63-
.info-container > h3 {
65+
.info-container > .obj-titles {
6466
grid-column: 1 / span 4;
65-
margin-bottom: .5em;
67+
display: grid;
68+
grid-template-columns: 1fr 1fr 1fr;
69+
justify-content: center;
70+
align-content: center;
71+
padding-top: 1em;
72+
padding-bottom: .5em;
73+
height: 2em;
74+
}
75+
76+
.info-container > .obj-titles .switch-obj {
77+
align-self: flex-start;
78+
cursor: pointer;
79+
line-height: 100%;
80+
margin: auto;
81+
padding: 1em 40% 1em 40%;
82+
}
83+
84+
.info-container > .obj-titles .switch-obj:hover {
85+
background-color: rgba(255, 255, 255, .1);
86+
transition: background-color .3s ease;
87+
-webkit-transition: background-color .3s ease;
6688
}
6789

6890
.info-container > .box-label, .info-container > input[type="text"] {
@@ -242,12 +264,6 @@ div.moving-obj-prj {
242264
background-color: rgba(255, 255, 255, .4);
243265
}
244266

245-
.obj-manage .objs-oneclick-go,
246-
.obj-manage .objs-oneclick-reset,
247-
.obj-manage br {
248-
display: none;
249-
}
250-
251267
/* description */
252268

253269
.description {

‎index.html

+9-2
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33
<head>
44
<!--uniform circular motion demo! ()cleoold-->
55

6-
<title>Circular Motion Demo</title>
6+
<title>Circular and elliptic motion interactive</title>
77
<meta name="description" content="circular motion demo">
88
<meta charset="utf-8">
99
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1010
<link rel="stylesheet" href="./css/style.css" type="text/css" />
1111
<link rel="icon" href="./ahp.png" sizes="32x32">
1212
</head>
1313

14+
<script type="text/javascript">
15+
if (/*@cc_on!@*/false || !!document.documentMode) document.write('Internet Explorer is not supported well. You can change a browser if this page isn\'t displaying correctly.');
16+
</script>
1417

1518
<body>
1619
<header>
@@ -21,7 +24,11 @@ <h1><del>Uniform</del> circular motion demo</h1>
2124
<span>container width </span><input type="text" class="container-width" autocomplete="off" readonly />
2225
</div>
2326
<div id="info-container-1" class="info-container">
24-
<h3>Block one</h3>
27+
<div class="obj-titles">
28+
<div class="switch-obj-prev switch-obj"> &lt;&lt;&lt; </div>
29+
<h3>Block one</h3>
30+
<div class="switch-obj-next switch-obj"> &gt;&gt;&gt; </div>
31+
</div>
2532
<div class="box-label"><span>moving box X-axis</span></div>
2633
<input type="text" class="box-x" autocomplete="off" placeholder="leave this be :-)" readonly />
2734
<div class="box-label"><span>moving box Y-axis</span></div>

‎js/movingboxmany.js

+40-8
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@ const movingObjProjection1 = document.querySelector('#moving-obj-prj-1');
1515
const oneClickGoBtn = document.querySelector('.obj-manage .objs-oneclick-go');
1616
const oneClickResetBtn = document.querySelector('.obj-manage .objs-oneclick-reset');
1717
const oneClickBtnsSeparator = document.querySelector('.obj-manage br');
18+
oneClickGoBtn.style.display = 'none';
19+
oneClickResetBtn.style.display = 'none';
20+
oneClickBtnsSeparator.style.display = 'none';
21+
22+
var prevObjSelect = new Array();
23+
var nextObjSelect = new Array();
24+
// var prevBtnHandlers = too lazy do not want to do it is not needed
25+
var nextBtnHandlers = new Array();
1826

1927
var circular1 = new BlockInMotion('1');
2028

@@ -29,7 +37,8 @@ document.querySelector('.obj-manage .append-objs').addEventListener('click', (e)
2937
// create nodes
3038
var clonedInfoContainer = infoContainer1.cloneNode(true);
3139
clonedInfoContainer.id = `info-container-${CircularsCount}`;
32-
clonedInfoContainer.children[0].innerText = `Block ${CircularsCount}`;
40+
clonedInfoContainer.children[0].children[1].innerText = `Block ${CircularsCount}`;
41+
clonedInfoContainer.style.display = 'none';
3342
grandContainer.insertBefore(clonedInfoContainer, container);
3443

3544
var clonedMovingObj = movingObj1.cloneNode(true);
@@ -54,10 +63,24 @@ document.querySelector('.obj-manage .append-objs').addEventListener('click', (e)
5463
Circulars.push(bl);
5564

5665
// displays the multi-ball control buttons
57-
oneClickGoBtn.style.display = 'unset';
58-
oneClickResetBtn.style.display = 'unset';
59-
oneClickBtnsSeparator.style.display = 'unset';
60-
window.scrollBy(0, 299);
66+
if (CircularsCount == 2) {
67+
oneClickGoBtn.style.display = '';
68+
oneClickResetBtn.style.display = '';
69+
oneClickBtnsSeparator.style.display = '';
70+
}
71+
//window.scrollBy(0, 299);
72+
73+
// activates the switch-previous-next buttons
74+
const cc = CircularsCount
75+
document.querySelector(`#info-container-${cc} .switch-obj-prev`).addEventListener('click', (e) => {
76+
document.querySelector(`#info-container-${cc}`).style.display = 'none';
77+
document.querySelector(`#info-container-${cc-1}`).style.display = 'grid';
78+
});
79+
nextBtnHandlers.push((e) => {
80+
document.querySelector(`#info-container-${cc-1}`).style.display = 'none';
81+
document.querySelector(`#info-container-${cc}`).style.display = 'grid';
82+
});
83+
document.querySelector(`#info-container-${cc-1} .switch-obj-next`).addEventListener('click', nextBtnHandlers[cc-2]);
6184
});
6285

6386
document.querySelector('.obj-manage .delete-objs').addEventListener('click', (e) => {
@@ -66,19 +89,28 @@ document.querySelector('.obj-manage .delete-objs').addEventListener('click', (e)
6689
delete Circulars[Circulars.length - 1];
6790
Circulars.pop();
6891

92+
const infoBox = document.querySelector(`#info-container-${CircularsCount}`);
93+
const prevInfoBox = document.querySelector(`#info-container-${CircularsCount-1}`);
94+
const amIAtThisPage = infoBox.style.display != 'none';
95+
6996
// remove nodes
70-
document.querySelector(`#info-container-${CircularsCount}`).remove();
97+
infoBox.remove();
7198
document.querySelector(`#moving-obj-${CircularsCount}`).remove();
7299
document.querySelector(`#moving-obj-trajectory-${CircularsCount}`).remove();
73-
document.querySelector(`#moving-obj-prj-${CircularsCount}`).parentNode.remove()
100+
document.querySelector(`#moving-obj-prj-${CircularsCount}`).parentNode.remove();
101+
102+
// unbind the next-button event for the previous one
103+
document.querySelector(`#info-container-${CircularsCount-1} .switch-obj-next`).removeEventListener('click', nextBtnHandlers.pop());
104+
// if user is now at this page, move to the previous page
105+
if (amIAtThisPage) prevInfoBox.style.display = 'grid';
74106

75107
if (--CircularsCount == 1) {
76108
// hides the multi-ball control buttons
77109
oneClickGoBtn.style.display = 'none';
78110
oneClickResetBtn.style.display = 'none';
79111
oneClickBtnsSeparator.style.display = 'none';
80112
}
81-
window.scrollBy(0, -299);
113+
//window.scrollBy(0, -299);
82114
});
83115

84116
document.querySelector('.obj-manage .objs-oneclick-go').addEventListener('click', (e) => {

0 commit comments

Comments
 (0)