Skip to content
This repository has been archived by the owner on Jun 26, 2021. It is now read-only.

Feature scrolling gallery #18

Merged
merged 12 commits into from
Apr 23, 2021
Merged

Feature scrolling gallery #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
659ed4f
Initial commit
miketvo Apr 22, 2021
d130931
Implemented autoscrolling
miketvo Apr 22, 2021
148dc41
Implemented desktop button scrolling
miketvo Apr 22, 2021
56f96de
Successfully implemented infinite card gallery scrolling
miketvo Apr 22, 2021
fd99860
Add auto infinite scrolling feature to product detail pages
miketvo Apr 22, 2021
fb6e7de
Removed unnecessary ids in /public/mall/index.html
miketvo Apr 22, 2021
8ae5626
Removed unnecessary ids in product detail pages
miketvo Apr 22, 2021
0434cb0
Renamed scrollDir to scrollVector
miketvo Apr 22, 2021
569b04e
Implemented faster MAX_SCROLL_SPEED via scrollVector
miketvo Apr 22, 2021
be6b48a
Added comment for DEFAULT_SCROLL_VECTOR
miketvo Apr 22, 2021
273a1e3
Enabled scrolling in both directions
miketvo Apr 23, 2021
9006afa
Adjusted scrolling behavior to only stop when mouseover on gallery-co…
miketvo Apr 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 130 additions & 0 deletions public/js/cards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
// DOM Access
const GALLERIES = document.querySelectorAll(".card-gallery");
const GALLERIES_LEFT_BTTNS = document.querySelectorAll(".card-gallery-left-bttn");
const GALLERIES_RIGHT_BTTNS = document.querySelectorAll(".card-gallery-right-bttn");
const GALLERIES_CONTENTS = document.querySelectorAll(".card-gallery-content");


// Gallery auto infinite scrolling
const DEFAULT_SCROLL_SPEED = 0.05;
const MAX_SCROLL_SPEED = 5;
const DEFAULT_SCROLL_VECTOR = 1; // This number must always be positive for card gallery buttons to work as intended

if (GALLERIES.length !== GALLERIES_CONTENTS.length ||
GALLERIES_LEFT_BTTNS.length !== GALLERIES.length ||
GALLERIES_RIGHT_BTTNS.length !== GALLERIES.length
) {
console.log("ERROR: Card gallery elements does not match each other");
} else {
// Duplicate the contents of card gallery for infinite scrolling effect, only if that card gallery overflows
let scrollables = [];
for (let index = 0; index < GALLERIES_CONTENTS.length; index++) {
if (GALLERIES_CONTENTS[index].clientWidth < GALLERIES_CONTENTS[index].scrollWidth) {
scrollables.push(true);
GALLERIES_CONTENTS[index].childNodes.forEach(function (item) {
let cloneItem = item.cloneNode(true);
GALLERIES_CONTENTS[index].appendChild(cloneItem);
});
} else {
scrollables.push(false);
GALLERIES_LEFT_BTTNS[index].setAttribute("style", "display: none;");
GALLERIES_RIGHT_BTTNS[index].setAttribute("style", "display: none;");
}
}

// Scrolling implementation
let scrollVector = DEFAULT_SCROLL_VECTOR;
let scrollStatus = [];
let scrollFastStatus = [];
let scrollPositions = [];
for (let index = 0; index < GALLERIES.length; index++) {
if (!scrollables[index]) {
scrollStatus.push(null);
scrollFastStatus.push(null);
scrollPositions.push(null);
} else {
// Initializations
scrollStatus.push(true);
scrollFastStatus.push(false);
scrollPositions.push(0);

// Auto scrolling
setInterval(function () {
if (scrollStatus[index]) {
GALLERIES_CONTENTS[index].scroll(scrollPositions[index], 0);
scrollPositions[index] += scrollVector;
}
}, 1 / DEFAULT_SCROLL_SPEED);

// Stop scrolling on mouseover and touch events
GALLERIES_CONTENTS[index].addEventListener("mouseenter", function () {
scrollStatus[index] = false;
});

GALLERIES_CONTENTS[index].addEventListener("touchstart", function () {
scrollStatus[index] = false;
});

GALLERIES_CONTENTS[index].addEventListener("mouseleave", function () {
scrollStatus[index] = true;
});

GALLERIES_CONTENTS[index].addEventListener("touchend", function () {
scrollStatus[index] = true;
});

GALLERIES_LEFT_BTTNS[index].addEventListener("mouseenter", function () {
scrollStatus[index] = false;
});

GALLERIES_LEFT_BTTNS[index].addEventListener("mouseleave", function () {
scrollStatus[index] = true;
});

GALLERIES_RIGHT_BTTNS[index].addEventListener("mouseenter", function () {
scrollStatus[index] = false;
});

GALLERIES_RIGHT_BTTNS[index].addEventListener("mouseleave", function () {
scrollStatus[index] = true;
});

// Gallery buttons behaviors
setInterval(function () {
if (scrollFastStatus[index] && scrollPositions[index] >= 0) {
GALLERIES_CONTENTS[index].scroll(scrollPositions[index], 0);
scrollPositions[index] += scrollVector;
}
}, 1 / MAX_SCROLL_SPEED);

GALLERIES_LEFT_BTTNS[index].addEventListener("mousedown", function () {
scrollFastStatus[index] = true;
scrollVector = -DEFAULT_SCROLL_VECTOR * MAX_SCROLL_SPEED;
});

GALLERIES_LEFT_BTTNS[index].addEventListener("mouseup", function () {
scrollFastStatus[index] = false;
scrollVector = DEFAULT_SCROLL_VECTOR;
});

GALLERIES_RIGHT_BTTNS[index].addEventListener("mousedown", function () {
scrollFastStatus[index] = true;
scrollVector = DEFAULT_SCROLL_VECTOR * MAX_SCROLL_SPEED;
});

GALLERIES_RIGHT_BTTNS[index].addEventListener("mouseup", function () {
scrollFastStatus[index] = false;
scrollVector = DEFAULT_SCROLL_VECTOR;
});

// Infinite scrolling
setInterval(function () {
if (scrollPositions[index] < 0) {
scrollPositions[index] = GALLERIES_CONTENTS[index].scrollWidth / 2;
} else if (scrollPositions[index] > GALLERIES_CONTENTS[index].scrollWidth / 2) {
scrollPositions[index] = 0;
}
}, 1 / MAX_SCROLL_SPEED);
}
}
}
13 changes: 7 additions & 6 deletions public/mall/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,10 @@
</div>

<main id="mall-main">
<section class="card-gallery mall-home-section mall-home-section-gallery" id="new-products">
<section class="card-gallery mall-home-section mall-home-section-gallery">
<h1 class="card-gallery-title">NEW PRODUCTS<span class="mall-home-section-heading-link"><a href="browse/by-product/by-date.html">MORE</a></span></h1>

<button class="card-gallery-left-bttn" id="new-products-left-bttn"><i class="fas fa-angle-left"></i></button>
<button class="card-gallery-left-bttn"><i class="fas fa-angle-left"></i></button>
<div class="card-gallery-content flex-container flex-justify-content-space-between flex-align-items-center overflow-hidden">
<div class="product-card">
<a href="../store/store-template/product-detail/"><img alt="image of a product" src="../media/image/best_buy_shop/camera/4_best_buy.jpg"></a>
Expand Down Expand Up @@ -146,7 +146,7 @@ <h1 class="card-gallery-title">NEW PRODUCTS<span class="mall-home-section-headin
</div>
</div>
</div>
<button class="card-gallery-right-bttn" id="new-products-right-bttn"><i class="fas fa-angle-right"></i></button>
<button class="card-gallery-right-bttn"><i class="fas fa-angle-right"></i></button>
</section>

<section class="mall-home-section" id="featured-products">
Expand Down Expand Up @@ -357,10 +357,10 @@ <h1>FEATURED STORES<span class="mall-home-section-heading-link"><a href="browse/
<button class="cards-load-more-bttn" id="load-more-featured-stores" onclick="">LOAD MORE</button>
</section>

<section class="mall-home-section card-gallery" id="new-stores">
<section class="mall-home-section card-gallery">
<h1 class="card-gallery-title">NEW STORES<span class="mall-home-section-heading-link"><a href="browse/by-store/by-date.html">MORE</a></span></h1>

<button class="card-gallery-left-bttn" id="new-stores-left-bttn"><i class="fas fa-angle-left"></i></button>
<button class="card-gallery-left-bttn"><i class="fas fa-angle-left"></i></button>
<div class="card-gallery-content flex-container flex-justify-content-space-between flex-align-items-center overflow-hidden clear-both">
<div class="store-card">
<a href="../store/store-template"><img class="store-card-thumbnail" alt="image representation of a shop" src="../media/image/store_logos/apple_logo.png"></a>
Expand Down Expand Up @@ -392,7 +392,7 @@ <h1 class="card-gallery-title">NEW STORES<span class="mall-home-section-heading-
<a class="store-card-name" href="../store/store-template">HP</a>
</div>
</div>
<button class="card-gallery-right-bttn" id="new-stores-right-bttn"><i class="fas fa-angle-right"></i></button>
<button class="card-gallery-right-bttn"><i class="fas fa-angle-right"></i></button>
</section>
</main>

Expand Down Expand Up @@ -443,5 +443,6 @@ <h1 class="card-gallery-title">NEW STORES<span class="mall-home-section-heading-
</footer>

<script src="../js/common.js"></script>
<script src="../js/cards.js"></script>
</body>
</html>
12 changes: 5 additions & 7 deletions public/store/store-template/product-detail-2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,12 +152,10 @@ <h3 class="more-info">More information</h3>
</table>
</section>

<section id="recommended-product" class="card-gallery">
<section class="card-gallery">
<h2 class="card-gallery-title text-align-center">RECOMMENDED PRODUCTS</h2>
<button class="card-gallery-left-bttn" id="recommended-product-left-bttn">
<i class="fas fa-angle-left"></i></button>
<div class="card-gallery-content flex-container flex-justify-content-space-between
flex-align-items-center overflow-hidden clear-both">
<button class="card-gallery-left-bttn"><i class="fas fa-angle-left"></i></button>
<div class="card-gallery-content flex-container flex-justify-content-space-between flex-align-items-center overflow-hidden clear-both">
<div class="product-card">
<a href="../product-detail"><img alt="image of a product"
src="../../../media/image/book_cover/the-blind_prince_cover.jpg"></a>
Expand Down Expand Up @@ -224,8 +222,7 @@ <h2 class="card-gallery-title text-align-center">RECOMMENDED PRODUCTS</h2>
</div>
</div>
</div>
<button class="card-gallery-right-bttn" id="recommended-product-right-bttn">
<i class="fas fa-angle-right"></i></button>
<button class="card-gallery-right-bttn"><i class="fas fa-angle-right"></i></button>
</section>
</main>

Expand Down Expand Up @@ -277,5 +274,6 @@ <h2 class="card-gallery-title text-align-center">RECOMMENDED PRODUCTS</h2>
</footer>

<script src="../../../js/common.js"></script>
<script src="../../../js/cards.js"></script>
</body>
</html>
13 changes: 6 additions & 7 deletions public/store/store-template/product-detail/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,12 +149,11 @@ <h3 class="more-info">More information</h3>
</table>
</section>

<section id="recommended-product" class="card-gallery">
<section class="card-gallery">
<h2 class="card-gallery-title text-align-center">RECOMMENDED PRODUCTS</h2>
<button class="card-gallery-left-bttn" id="recommended-product-left-bttn">
<i class="fas fa-angle-left"></i></button>
<div class="card-gallery-content flex-container flex-justify-content-space-between
flex-align-items-center overflow-hidden clear-both">

<button class="card-gallery-left-bttn"><i class="fas fa-angle-left"></i></button>
<div class="card-gallery-content flex-container flex-justify-content-space-between flex-align-items-center overflow-hidden clear-both">
<div class="product-card">
<a href="./"><img alt="image of a product"
src="../../../media/image/book_cover/the-blind_prince_cover.jpg"></a>
Expand Down Expand Up @@ -221,8 +220,7 @@ <h2 class="card-gallery-title text-align-center">RECOMMENDED PRODUCTS</h2>
</div>
</div>
</div>
<button class="card-gallery-right-bttn" id="recommended-product-right-bttn">
<i class="fas fa-angle-right"></i></button>
<button class="card-gallery-right-bttn"><i class="fas fa-angle-right"></i></button>
</section>
</main>

Expand Down Expand Up @@ -274,5 +272,6 @@ <h2 class="card-gallery-title text-align-center">RECOMMENDED PRODUCTS</h2>
</footer>

<script src="../../../js/common.js"></script>
<script src="../../../js/cards.js"></script>
</body>
</html>