Skip to content

Commit 6e36473

Browse files
aholachekaholachek
committed
fix demo
1 parent 8423104 commit 6e36473

File tree

4 files changed

+110
-109
lines changed

4 files changed

+110
-109
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ node_modules
33
*.log
44
.vscode
55
src/*.js
6+
.rpt2_cache

‎demo/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282

8383
</div>
8484
</div>
85-
<!-- <div class="p-4">
85+
<div class="p-4">
8686
<div class="subjects">
8787
<section class="subject subject--active">
8888
<div>
@@ -258,7 +258,7 @@ <h2 class="subject__title">
258258
</div>
259259

260260
</div>
261-
</div> -->
261+
</div>
262262

263263

264264
<script src="../bundle.js"></script>

‎demo/index.js‎

Lines changed: 106 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -43,120 +43,120 @@ document
4343
// // accordion test
4444
// // ========================================================
4545

46-
// const subjects = document.querySelector('.subjects');
47-
48-
// // animate the grid
49-
// const { unwrapGridSubjects } = wrapGrid(subjects, { easing: 'linear' });
50-
51-
// // add a click handler
52-
// subjects.addEventListener('click', ev => {
53-
// [...document.querySelectorAll('.subject')].forEach(el =>
54-
// el.classList.remove('subject--active')
55-
// );
56-
// let target = ev.target;
57-
// while (target.tagName !== 'HTML') {
58-
// if (target.classList.contains('subject')) {
59-
// target.classList.toggle('subject--active');
60-
// return;
61-
// }
62-
// target = target.parentElement;
63-
// }
64-
// });
46+
const subjects = document.querySelector('.subjects');
6547

66-
// // ========================================================
67-
// // children change
68-
// // ========================================================
48+
// animate the grid
49+
const { unwrapGridSubjects } = wrapGrid(subjects, { easing: 'linear' });
6950

70-
// // event handler to toggle card size on click
71-
// // const changeGrid = document.querySelector('.grid-children-change');
72-
// // const { unwrapChangeGrid, forceGridAnimation } = wrapGrid(changeGrid);
51+
// add a click handler
52+
subjects.addEventListener('click', ev => {
53+
[...document.querySelectorAll('.subject')].forEach(el =>
54+
el.classList.remove('subject--active')
55+
);
56+
let target = ev.target;
57+
while (target.tagName !== 'HTML') {
58+
if (target.classList.contains('subject')) {
59+
target.classList.toggle('subject--active');
60+
return;
61+
}
62+
target = target.parentElement;
63+
}
64+
});
7365

74-
// // const updateContents = () => {
75-
// // [...changeGrid.querySelectorAll('.card')].forEach(el => {
76-
// // const width = Math.random() * 300;
77-
// // const height = Math.random() * 200;
78-
// // const inner = el.querySelector('.card__inner');
79-
// // inner.style.width = `${width}px`;
80-
// // inner.style.height = `${height}px`;
81-
// // });
82-
// // forceGridAnimation();
83-
// // };
66+
// ========================================================
67+
// children change
68+
// ========================================================
69+
70+
// event handler to toggle card size on click
71+
// const changeGrid = document.querySelector('.grid-children-change');
72+
// const { unwrapChangeGrid, forceGridAnimation } = wrapGrid(changeGrid);
73+
74+
// const updateContents = () => {
75+
// [...changeGrid.querySelectorAll('.card')].forEach(el => {
76+
// const width = Math.random() * 300;
77+
// const height = Math.random() * 200;
78+
// const inner = el.querySelector('.card__inner');
79+
// inner.style.width = `${width}px`;
80+
// inner.style.height = `${height}px`;
81+
// });
82+
// forceGridAnimation();
83+
// };
8484

85-
// // setInterval(updateContents, 2000);
85+
// setInterval(updateContents, 2000);
8686

87-
// // ========================================================
88-
// // nested grid
89-
// // ========================================================
87+
// ========================================================
88+
// nested grid
89+
// ========================================================
9090

91-
// const addCard = container => i => {
92-
// const randomNumber = Math.floor(Math.random() * 5) + 1;
93-
// container.insertAdjacentHTML(
94-
// 'beforeend',
95-
// `
96-
// <div class="card card--${randomNumber}">
97-
// <div></div>
98-
// </div>
99-
// `
100-
// );
101-
// };
91+
const addCard = container => i => {
92+
const randomNumber = Math.floor(Math.random() * 5) + 1;
93+
container.insertAdjacentHTML(
94+
'beforeend',
95+
`
96+
<div class="card card--${randomNumber}">
97+
<div></div>
98+
</div>
99+
`
100+
);
101+
};
102102

103-
// const nestedGrid = document.querySelector('.nested-grid');
104-
// [...Array(400).keys()].forEach(addCard(nestedGrid));
103+
const nestedGrid = document.querySelector('.nested-grid');
104+
[...Array(400).keys()].forEach(addCard(nestedGrid));
105105

106-
// wrapGrid(nestedGrid, { duration: 300, stagger: 10 });
106+
wrapGrid(nestedGrid, { duration: 300, stagger: 10 });
107107

108-
// nestedGrid.addEventListener('click', ev => {
109-
// let target = ev.target;
110-
// while (target.tagName !== 'HTML') {
111-
// if (target.classList.contains('card')) {
112-
// target.classList.toggle('card--expanded');
113-
// return;
114-
// }
115-
// target = target.parentElement;
116-
// }
117-
// });
108+
nestedGrid.addEventListener('click', ev => {
109+
let target = ev.target;
110+
while (target.tagName !== 'HTML') {
111+
if (target.classList.contains('card')) {
112+
target.classList.toggle('card--expanded');
113+
return;
114+
}
115+
target = target.parentElement;
116+
}
117+
});
118118

119-
// // ========================================================
120-
// // hidden cards grid
121-
// // ========================================================
119+
// ========================================================
120+
// hidden cards grid
121+
// ========================================================
122+
123+
const hiddenCardGrid = document.querySelector('.hidden-cards-grid');
124+
125+
document
126+
.querySelector('.js-toggle-grid')
127+
.addEventListener('click', () => hiddenCardGrid.classList.toggle('grid--full'));
128+
129+
document.querySelector('.js-hide-button').addEventListener('click', () => {
130+
[...hiddenCardGrid.querySelectorAll('.card')].forEach(el =>
131+
el.classList.remove('card--hidden')
132+
);
133+
});
134+
135+
document.querySelector('.js-add-card').addEventListener('click', () => {
136+
const randomNumber = Math.floor(Math.random() * 5) + 1;
137+
hiddenCardGrid.insertAdjacentHTML(
138+
'beforeend',
139+
`
140+
<div class="card card--${randomNumber}">
141+
<div>
142+
<div class="card__avatar"></div>
143+
<div class="card__title"></div>
144+
<div class="card__description"></div>
145+
</div>
146+
</div>
147+
`
148+
);
149+
});
150+
151+
hiddenCardGrid.addEventListener('click', ev => {
152+
let target = ev.target;
153+
while (target.tagName !== 'HTML') {
154+
if (target.classList.contains('card')) {
155+
target.classList.toggle('card--hidden');
156+
return;
157+
}
158+
target = target.parentElement;
159+
}
160+
});
122161

123-
// const hiddenCardGrid = document.querySelector('.hidden-cards-grid');
124-
125-
// document
126-
// .querySelector('.js-toggle-grid')
127-
// .addEventListener('click', () => hiddenCardGrid.classList.toggle('grid--full'));
128-
129-
// document.querySelector('.js-hide-button').addEventListener('click', () => {
130-
// [...hiddenCardGrid.querySelectorAll('.card')].forEach(el =>
131-
// el.classList.remove('card--hidden')
132-
// );
133-
// });
134-
135-
// document.querySelector('.js-add-card').addEventListener('click', () => {
136-
// const randomNumber = Math.floor(Math.random() * 5) + 1;
137-
// hiddenCardGrid.insertAdjacentHTML(
138-
// 'beforeend',
139-
// `
140-
// <div class="card card--${randomNumber}">
141-
// <div>
142-
// <div class="card__avatar"></div>
143-
// <div class="card__title"></div>
144-
// <div class="card__description"></div>
145-
// </div>
146-
// </div>
147-
// `
148-
// );
149-
// });
150-
151-
// hiddenCardGrid.addEventListener('click', ev => {
152-
// let target = ev.target;
153-
// while (target.tagName !== 'HTML') {
154-
// if (target.classList.contains('card')) {
155-
// target.classList.toggle('card--hidden');
156-
// return;
157-
// }
158-
// target = target.parentElement;
159-
// }
160-
// });
161-
162-
// wrapGrid(hiddenCardGrid, { stagger: 20, easing: 'backOut', duration: 10000 });
162+
wrapGrid(hiddenCardGrid, { stagger: 20, easing: 'backOut', duration: 10000 });

‎dist/main.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)