Skip to content

Commit 3f4df31

Browse files
dustinuseydustinusey
committed
support for dynamic mockup files in utility panel
1 parent 8103199 commit 3f4df31

File tree

5 files changed

+142
-24
lines changed

5 files changed

+142
-24
lines changed

‎frontend/dist/scripts/app.js

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,74 @@ function loadProjectRequirements(data) {
462462
});
463463
// createReqFooter();
464464
}
465+
466+
// load project files
467+
468+
let projectFileData = {
469+
mockups: {},
470+
currentMocks: []
471+
}
472+
473+
let mockupIconContainer = document.getElementById('mockupTypeContainer');
474+
mockupIconContainer.innerHTML = '';
475+
476+
if (data.mobileMockup) {
477+
projectFileData.mockups.mobile = data.mobileMockup
478+
projectFileData.currentMocks.push(data.mobileMockup)
479+
480+
let li = document.createElement('li');
481+
li.classList = 'mockup-type';
482+
let icon = document.createElement('i');
483+
icon.classList = 'fa-solid fa-mobile-screen-button';
484+
let name = document.createElement('span')
485+
name.textContent = 'mobile';
486+
li.appendChild(icon);
487+
li.appendChild(name);
488+
489+
mockupIconContainer.appendChild(li)
490+
}
491+
492+
if (data.tabletMockup) {
493+
projectFileData.mockups.tablet = data.tabletMockup
494+
projectFileData.currentMocks.push(data.tabletMockup)
495+
496+
let li = document.createElement('li');
497+
li.classList = 'mockup-type';
498+
let icon = document.createElement('i');
499+
icon.classList = 'fa-solid fa-tablet-screen-button';
500+
let name = document.createElement('span')
501+
name.textContent = 'tablet';
502+
li.appendChild(icon);
503+
li.appendChild(name);
504+
505+
mockupIconContainer.appendChild(li)
506+
}
507+
508+
if (data.desktopMockup) {
509+
projectFileData.mockups.desktop = data.desktopMockup
510+
projectFileData.currentMocks.push(data.desktopMockup)
511+
512+
let li = document.createElement('li');
513+
li.classList = 'mockup-type';
514+
let icon = document.createElement('i');
515+
icon.classList = 'fa-solid fa-desktop';
516+
let name = document.createElement('span')
517+
name.textContent = 'desktop';
518+
li.appendChild(icon);
519+
li.appendChild(name);
520+
521+
mockupIconContainer.appendChild(li)
522+
}
523+
524+
if (!data.mobileMockup && !data.tabletMockup && !data.desktopMockup) {
525+
526+
let li = document.createElement('li');
527+
li.classList.add('disabled');
528+
li.textContent = 'There are no mockups for this project 😢';
529+
mockupIconContainer.append(li)
530+
}
531+
532+
465533
}
466534

467535
function updateProgressBar() {
@@ -760,13 +828,8 @@ reviewHeader.addEventListener('click', e => {
760828
function handleReviewToggles(e) {
761829

762830
const correctItemsParent = document.querySelector('.correct-items-container');
763-
const correctItems = document.querySelectorAll('.review-output li.correct');
764-
765831
const questionedItemsParent = document.querySelector('.questioned-items-container');
766-
const questionedItems = document.querySelectorAll('.review-output li.questioned');
767-
768832
const incorrectItemsParent = document.querySelector('.incorrect-items-container');
769-
const incorrectItems = document.querySelectorAll('.review-output li.incorrect');
770833

771834
if (e.target === reviewHeader_toggle_correct) {
772835
e.target.classList.toggle('active');

‎frontend/dist/styles/app.css

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

‎frontend/src/scripts/app.js

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,74 @@ function loadProjectRequirements(data) {
462462
});
463463
// createReqFooter();
464464
}
465+
466+
// load project files
467+
468+
let projectFileData = {
469+
mockups: {},
470+
currentMocks: []
471+
}
472+
473+
let mockupIconContainer = document.getElementById('mockupTypeContainer');
474+
mockupIconContainer.innerHTML = '';
475+
476+
if (data.mobileMockup) {
477+
projectFileData.mockups.mobile = data.mobileMockup
478+
projectFileData.currentMocks.push(data.mobileMockup)
479+
480+
let li = document.createElement('li');
481+
li.classList = 'mockup-type';
482+
let icon = document.createElement('i');
483+
icon.classList = 'fa-solid fa-mobile-screen-button';
484+
let name = document.createElement('span')
485+
name.textContent = 'mobile';
486+
li.appendChild(icon);
487+
li.appendChild(name);
488+
489+
mockupIconContainer.appendChild(li)
490+
}
491+
492+
if (data.tabletMockup) {
493+
projectFileData.mockups.tablet = data.tabletMockup
494+
projectFileData.currentMocks.push(data.tabletMockup)
495+
496+
let li = document.createElement('li');
497+
li.classList = 'mockup-type';
498+
let icon = document.createElement('i');
499+
icon.classList = 'fa-solid fa-tablet-screen-button';
500+
let name = document.createElement('span')
501+
name.textContent = 'tablet';
502+
li.appendChild(icon);
503+
li.appendChild(name);
504+
505+
mockupIconContainer.appendChild(li)
506+
}
507+
508+
if (data.desktopMockup) {
509+
projectFileData.mockups.desktop = data.desktopMockup
510+
projectFileData.currentMocks.push(data.desktopMockup)
511+
512+
let li = document.createElement('li');
513+
li.classList = 'mockup-type';
514+
let icon = document.createElement('i');
515+
icon.classList = 'fa-solid fa-desktop';
516+
let name = document.createElement('span')
517+
name.textContent = 'desktop';
518+
li.appendChild(icon);
519+
li.appendChild(name);
520+
521+
mockupIconContainer.appendChild(li)
522+
}
523+
524+
if (!data.mobileMockup && !data.tabletMockup && !data.desktopMockup) {
525+
526+
let li = document.createElement('li');
527+
li.classList.add('disabled');
528+
li.textContent = 'There are no mockups for this project 😢';
529+
mockupIconContainer.append(li)
530+
}
531+
532+
465533
}
466534

467535
function updateProgressBar() {
@@ -760,13 +828,8 @@ reviewHeader.addEventListener('click', e => {
760828
function handleReviewToggles(e) {
761829

762830
const correctItemsParent = document.querySelector('.correct-items-container');
763-
const correctItems = document.querySelectorAll('.review-output li.correct');
764-
765831
const questionedItemsParent = document.querySelector('.questioned-items-container');
766-
const questionedItems = document.querySelectorAll('.review-output li.questioned');
767-
768832
const incorrectItemsParent = document.querySelector('.incorrect-items-container');
769-
const incorrectItems = document.querySelectorAll('.review-output li.incorrect');
770833

771834
if (e.target === reviewHeader_toggle_correct) {
772835
e.target.classList.toggle('active');

‎frontend/src/styles/components/utility-panel/_project-files.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
cursor: pointer;
1414
text-align: center;
1515
transition: transform 0.2s;
16+
&.disabled {
17+
pointer-events: none;
18+
}
1619
span {
1720
font-size: 0.8rem;
1821
margin-top: 1rem;

‎index.html

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -136,19 +136,8 @@ <h1 data-project-name></h1>
136136
<header>
137137
<p class="title">Mockups</p>
138138
</header>
139-
<ul class="mockup-type-container">
140-
<li class="mockup-type">
141-
<i class="fa-solid fa-mobile-screen-button"></i>
142-
<span>mobile</span>
143-
</li>
144-
<li class="mockup-type">
145-
<i class="fa-solid fa-tablet-screen-button"></i>
146-
<span>tablet</span>
147-
</li>
148-
<li class="mockup-type">
149-
<i class="fa-solid fa-desktop"></i>
150-
<span>desktop</span>
151-
</li>
139+
<ul class="mockup-type-container" id="mockupTypeContainer">
140+
<!-- dynamic -->
152141
</ul>
153142
</div>
154143

0 commit comments

Comments
 (0)