Skip to content

Commit 9ea97fa

Browse files
muratcakirmuratcakir
committed
MegaMenu: fixed nav-item focus loss while loading rotator content
1 parent 44b8258 commit 9ea97fa

2 files changed

Lines changed: 11 additions & 60 deletions

File tree

‎src/Presentation/SmartStore.Web/Scripts/smartstore.megamenu.js‎

Lines changed: 2 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -207,16 +207,11 @@
207207
var isFirstItemVisible = true;
208208
var isLastItemVisible = false;
209209

210-
megamenuContainer.find('ul').wrap('<div class="nav-slider" style="overflow: hidden;position: relative;" />');
211-
212-
// //
213-
//toggleSlideArrows();
210+
megamenuContainer.find('ul').wrap('<div class="nav-slider" style="overflow:hidden; position:relative;" />');
214211

215212
var navSlider = $(".nav-slider", megamenu);
216213
var nav = $(".navbar-nav", navSlider);
217214

218-
//updateNavState();
219-
220215
if (!Modernizr.touchevents) {
221216
megamenuNext.on('click', function (e) {
222217
e.preventDefault();
@@ -287,12 +282,10 @@
287282
// iterates all nav items from the left OR the right side and breaks loop once the left AND the right edges fall into the viewport
288283
var navItem = $(el);
289284
var leftPos = navItem.position().left;
290-
//console.log("leftPos", fromStart, leftPos + curMarginStart, el);
291285
var leftIn = isInView(leftPos);
292286
if (leftIn) {
293287
var rightIn = isInView(leftPos + navItem.outerWidth(true));
294288
if (rightIn) {
295-
console.log("firstVisible", navItem[0]);
296289
result = navItem;
297290
return false;
298291
}
@@ -336,7 +329,6 @@
336329
megamenu.tapstart(function () {
337330
closeNow($(".nav-item.active .nav-link"));
338331
}).tapend(function () {
339-
//toggleSlideArrows();
340332
updateNavState();
341333
});
342334
}
@@ -354,16 +346,14 @@
354346
megamenuContainer.removeClass("show-scroll-buttons");
355347
}
356348

357-
toggleSlideArrows();
358-
359349
megamenuDropdownContainer.find('.mega-menu-product-rotator > .artlist-grid').each(function(i, el) {
360350
try {
361351
$(this).slick('unslick');
362352
$(this).attr('data-slick', '{"dots": false, "autoplay": true}');
363353
applyCommonPlugins($(this).closest('.rotator-content'));
364354
}
365355
catch (err) { }
366-
});
356+
});
367357
}
368358

369359
// show scroll buttons when menu items don't fit into screen
@@ -372,51 +362,6 @@
372362
});
373363

374364
onPageResized();
375-
376-
// function toggleSlideArrows() {
377-
// firstVisibleElem = null;
378-
// isLastItemVisible = false;
379-
380-
// var navSlider = $(".nav-slider", megamenuContainer);
381-
382-
// navElems.each(function (i, val) {
383-
// var el = $(val);
384-
// console.log(el.offset().left, navSlider.offset().left, el.position().left);
385-
// if ((el.offset().left > navSlider.offset().left) && firstVisibleElem == null) {
386-
// firstVisibleElem = el.prev();
387-
// isFirstItemVisible = firstVisibleElem.position().left == 0;
388-
// }
389-
390-
// // if visible
391-
// if (parseInt(el.offset().left) + parseInt(el.width()) == parseInt(navSlider.offset().left) + parseInt(navSlider.width())) {
392-
// lastVisibleElem = el;
393-
// isLastItemVisible = parseInt(el.offset().left) + parseInt(el.width()) == parseInt(navSlider.offset().left) + parseInt(navSlider.width());
394-
395-
// // we've got everything we need, so get out of here
396-
// return false;
397-
// }
398-
// });
399-
400-
// // show or hide navigation buttons depending on whether first or last navitems are displayed
401-
//megamenu.toggleClass("megamenu-blend--prev", !isFirstItemVisible);
402-
//megamenu.toggleClass("megamenu-blend--next", !isLastItemVisible);
403-
// }
404-
405-
function toggleSlideArrows() {
406-
//var navSlider = $(".nav-slider", megamenuContainer);
407-
//var nav = $(".navbar-nav", navSlider);
408-
//var cntWidth = navSlider.width();
409-
//var curMarginStart = parseFloat(nav.css(marginX));
410-
411-
//function isInView(pos) {
412-
// var realPos = pos + curMarginStart;
413-
// return realPos >= 0 && realPos < cntWidth;
414-
//}
415-
416-
//// show or hide navigation buttons depending on whether first or last navitems are displayed
417-
//megamenu.toggleClass("megamenu-blend--prev", !isFirstItemVisible);
418-
//megamenu.toggleClass("megamenu-blend--next", !isLastItemVisible);
419-
}
420365
});
421366

422367
function initRotator(containerId) {
@@ -436,7 +381,6 @@
436381

437382
//if ($(".pl-slider", container).length == 0 && catId != null && displayRotator) {
438383
if (catId != null && displayRotator) {
439-
440384
var rotatorColumn = $(".rotator-" + catId);
441385

442386
// clear content & init throbber
@@ -446,14 +390,12 @@
446390

447391
// wait a little to imply hard work is going on ;-)
448392
setTimeout(function () {
449-
450393
$.ajax({
451394
cache: false,
452395
type: "POST",
453396
url: settings.productRotatorAjaxUrl,
454397
data: { "catId": catId },
455398
success: function (data) {
456-
457399
// add html view
458400
rotatorColumn.find(".rotator-content").html(data);
459401

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/_megamenu.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,10 +337,12 @@ $mixed-megamenu-bg: $megamenu-bg;
337337
border: 1px solid rgba(0, 0, 0, 0.1);
338338
background: $megamenu-rotator-bg;
339339
overflow: hidden;
340+
min-height: 320px;
340341

341342
.rotator-heading {
342343
padding: 0.5rem 0;
343344
}
345+
344346
.rotator-content > div.placeholder {
345347
height: 280px;
346348
background-color: rgba(255,255,255, 0.85);
@@ -351,6 +353,13 @@ $mixed-megamenu-bg: $megamenu-bg;
351353
}
352354
}
353355

356+
@include media-breakpoint-up(xl) {
357+
.megamenu-container .rotator-container {
358+
// Prevents nav-item focus loss when background image is available
359+
min-height: 370px;
360+
}
361+
}
362+
354363
// brand menu
355364
#dropdown-menu--10 .dropdown-menu .mega-menu-dropdown-heading {
356365
line-height: 1.125rem;

0 commit comments

Comments
 (0)