diff --git a/javascript.js b/javascript.js new file mode 100644 index 0000000..28bd764 --- /dev/null +++ b/javascript.js @@ -0,0 +1,415 @@ +var submenuWidth = "200"; +var dlmenu_showmore = "1"; +var dlmenu_shownumber = "10"; +var dlmenu_columnHeight = "320"; +var dlmenu_columnConcat = "1"; +var dlmenu_padding = "30"; +var dlmenu_columns = "5"; +var dlmenu_wide = "true"; +dlmenu_padding == "" ? 0 : dlmenu_padding; +dlmenu_columns == "" ? 5 : dlmenu_columns; + +app_shop.fn.mobileGen = function (reverse = false) { + if (reverse) { + $(".nav-header").remove(); + } else if (!$(".nav-header").length) { + var menuList = $("aside .nav-link + ul"); + $.each(menuList, function (index, val) { + var navHeader = $(val).prev(); + $(val).prepend('
  • '); + $(val).find(".nav-header").prepend(navHeader.clone()); + $(val) + .find(".nav-header") + .prepend( + '' + ); + }); + } +}; + +app_shop.run( + function () { + var window_w = $(window).width(); + $(".navbar-nav .isOverflow").removeClass("isOverflow"); + $(".navbar-nav > .nav-item").each(function () { + var place = 0; + $this = $(this); + place = window_w - $this.offset().left; + if (place < parseInt(submenuWidth)) { + $this.addClass("isOverflow"); + } + if (place < parseInt(submenuWidth * 2)) { + $this.find(".navbar-subnav").addClass("isOverflow"); + } + }); + $(".nav-link img.rwd-src").each(function () { + $this = $(this); + $this.attr("src", app_shop.fn.getRwdSrc($this)); + }); + + if (app_shop.vars.view < 2) { + if (window.matchMedia("(display-mode: standalone)").matches) { + $(".nav-link").each(function (event) { + if ($(this).next().is("ul")) { + $(this).attr("data-href", $(this).attr("href")); + $(this).attr("href", "##"); + $(this).addClass("not_selectable"); + } + }); + } + } else { + $(".nav-link").each(function (event) { + if ($(this).attr("data-href") != "") { + $(this).attr("href", $(this).attr("data-href")); + $(this).removeAttr("data-href"); + } + $(this).removeClass("not_selectable"); + }); + } + if (app_shop.vars.view > 2) { + $("html").removeClass("filters_open").removeClass("sidebar_open"); + } + }, + [1, 2, 3, 4], + "#menu_categories" +); + +app_shop.run( + function () { + app_shop.fn.mobileGen(true); + }, + [3, 4], + "#menu_categories" +); + +$(document).on("click", ".navbar-toggler", function (e) { + e.preventDefault(); + if ( + $("html").hasClass("filters_open") || + $("html").hasClass("sidebar_open") + ) { + $("html").removeClass("filters_open").removeClass("sidebar_open"); + $('header .handler[data-item="menu_search"]').before($("#menu_search")); //przeniesienie wyszukiwarki do menu + $('header .handler[data-item="menu_search"]').remove(); + } else { + $("html").addClass("sidebar_open"); + $("#menu_search").before( + '' + ); + if (typeof app_shop.fn.shoppingList === "object") { + $('aside .setMobileGrid[data-item="#menu_navbar"]').before( + $("#menu_search") + ); //przeniesienie wyszukiwarki do menu + } else { + $('aside .setMobileGrid[data-item="#menu_navbar"]').after( + $("#menu_search") + ); //przeniesienie wyszukiwarki do menu + } + } + $( + "aside .navbar-subnav, aside .navbar-subsubnav, aside, #menu_settings form" + ).scrollTop(0); + app_shop.fn.mobileGen(); // duplicate not only-child elements and paste their to ul as first child + app_shop.fn.setMobileCategories ? app_shop.fn.setMobileCategories() : ""; //zakładki w menu mobilnym + return false; +}); + +$(document).on("click", "aside .navbar-collapse .nav-link", function () { + var _next = $(this).next(), + _parent = $(this).parent(), + _children = _next.children(); + if (_next.is("ul") && app_shop.vars.view < 3) { + _parent.toggleClass("nav-open"); + if (_children.length === 2) _children.last().toggleClass("nav-open"); + return false; + } +}); + +$(document).on("click", "aside .nav-header .nav-header__backLink", function () { + var _parent = $(this).parents(".nav-open").eq(0), + _ul = _parent.parents("ul").eq(0), + _children = _ul.children(); + _parent.removeClass("nav-open"); + if (_children.length === 2) + _ul.parents(".nav-open").eq(0).removeClass("nav-open"); + return false; +}); + +$(document).on( + "click", + ".touch header .navbar-collapse .nav-link", + function (event) { + var _next = $(this).next(); + var _visible = _next.is(".active"); + $(".nav-item ul").removeClass("active"); + + if ($(this).parent().parent().hasClass("navbar-nav")) { + $(".navbar-subnav").removeClass("--hover"); + } + + if ( + $("#menu_navbar").parent(".wide").size() && + _next.parents("ul").size() > 1 + ) { + return true; + } + + if (_next.is("ul")) { + if (_visible) { + _next.removeClass("active"); + _next.find("ul.active").removeClass("active"); + _next.parents("ul").not(".navbar-nav").addClass("active"); + } else { + _next.addClass("active"); + _next.parents("ul").not(".navbar-nav").addClass("active"); + + $("body").off("click.navbar"); + $("body").on("click.navbar", function (event) { + $(".nav-item ul").removeClass("active"); + }); + } + if ($(this).next(".navbar-subnav").length > 0) { + $(this).attr("data-visited") + ? "" + : (app_shop.fn.concatColumns(_next), + app_shop.fn.setPositionMenu(_next)); + $(this).attr("data-visited", "true"); + } + event.preventDefault(); + return false; + } + } +); +$(document).on( + "click", + ".sidebar_open header, .sidebar_open #content, .sidebar_open footer, .filters_open header, .filters_open #content, .filters_open footer", + function (event) { + $("html").removeClass("sidebar_open filters_open"); + $(".nav-open").removeClass("nav-open"); + $("#menu_settings form").removeClass("active"); + $('header .handler[data-item="menu_search"]').before($("#menu_search")); //przeniesienie wyszukiwarki do menu + $('header .handler[data-item="menu_search"]').remove(); + app_shop.fn.setMobileCategories ? app_shop.fn.setMobileCategories() : ""; //zakładki w menu mobilnym + event.preventDefault(); + return false; + } +); + +app_shop.run( + function megaMenuInit() { + if (dlmenu_wide) { + /* event dodanie przycisku rozwin */ + $("#menu_categories .nav-item.--extend").each(function () { + $(this).off(); + $(this).on("click", function naviShowMore(e) { + e.preventDefault(); + $(this).parent().toggleClass("show"); + let link = $(this).find("a"); + let oldTxt = link.text(); + link.off(); + link.text(link.attr("txt_alt")); + link.attr("txt_alt", oldTxt); + link.parents(".navbar-subnav").addClass("--hover"); + return false; + }); + }); + /* pokazywanie menu po akcji zwiń */ + $(".navbar-subnav").on("mouseover", function () { + $(".navbar-subnav").removeClass("--hover"); + }); + /* pokazywanie menu po akcji zwiń */ + $(".no-touch .navbar-nav > .nav-item > .nav-link").on( + "mouseover", + function () { + if ($(this).next(".navbar-subnav").length > 0) { + $(this).attr("data-visited") + ? "" + : (app_shop.fn.concatColumns($(this).next(".navbar-subnav")), + app_shop.fn.setPositionMenu($(this).next(".navbar-subnav"))); + $(this).attr("data-visited", "true"); + } + } + ); + + app_shop.fn.concatColumns = function (subnav) { + /* laczenie elementów menu */ + if ( + typeof dlmenu_columnConcat != "undefined" && + dlmenu_columnConcat != "" + ) { + let html = $("
  • ", { class: "nav-item nav-merge" }); + let x = parseInt(dlmenu_columnHeight); + + subnav.find(" > .nav-item").each(function () { + const $this = $(this); + + let $thisItemsHeight = $this.height(); + let $nextItemsHeight = $this.next().height(); + + !$this.hasClass("nav-merge") + ? ($thisItemsHeight = $this.height()) + : ""; + !$this.next().hasClass("nav-merge") + ? ($nextItemsHeight = $this.next().height()) + : ""; + if ($this.hasClass("--all")) { + x = 0; + } + $thisItemsHeight < x && $nextItemsHeight + $thisItemsHeight < x + ? ($this.after(html), + html.append($this), + (x = x - $thisItemsHeight)) + : $thisItemsHeight < x + ? ($this.after(html), + html.append($this), + (x = parseInt(dlmenu_columnHeight)), + (html = $("
  • ", { class: "nav-item nav-merge" }))) + : ""; + }); + } + }; + + /* bez pogrubienia kiedy jest tylko 2 poziom */ + $("#menu_categories .navbar-nav > .nav-item").each(function () { + if ( + $(this).find("li.nav-item:not(.empty):not(.nav-merge)").length === 0 + ) { + $(this).addClass("--noBold"); + } + }); + + app_shop.fn.setPositionMenu = function (subnav) { + /* ustawienie pozycji aby nie było pustch przestrzeni */ + const containerW = $("#menu_categories").width() - dlmenu_padding; + const colsCount = subnav.find("> .nav-item:not(.--all)").length; + subnav.addClass("--cols1"); + if ( + (colsCount < dlmenu_columns && window.screen.width > 1200) || + (colsCount < dlmenu_columns - 1 && window.screen.width < 1200) + ) { + let $this = subnav; + let thisLeft = $this.parent().position().left; + thisLeft = thisLeft < 0 ? 0 : thisLeft; + let thisOver = containerW - ($this.width() + thisLeft); + let posL = thisLeft - thisOver * -1; + posL = thisOver > 0 ? thisLeft : posL; + $this.css("left", posL + "px"); + } + }; + document + .querySelectorAll(".nav-link:not(.nav-gfx) > img.gfx_lvl_1.--omo") + .forEach((el) => { + el.style.maxWidth = `${el.previousElementSibling.offsetWidth}px`; + }); + } + }, + [3, 4], + "#menu_categories" +); + +app_shop.run( + function () { + $(".nav-link.nav-gfx").on({ + mouseenter() { + const imgElement = $(this).find("img"); + const dataOmo = imgElement.data("omo"); + const paddingWidth = + imgElement.parent().innerWidth() - imgElement.parent().width(); + const paddingHeight = + imgElement.parent().innerHeight() - imgElement.parent().height(); + if (dataOmo) { + imgElement + .parent() + .css("min-width", imgElement.width() + paddingWidth); + imgElement + .parent() + .css("min-height", imgElement.height() + paddingHeight); + imgElement.attr("data-tmp_img", imgElement.attr("src")); + if (dataOmo === "img_rwd") { + if (app_shop.vars.view === 1) { + imgElement.attr("src", imgElement.data("omo_mobile")); + } else if (app_shop.vars.view === 2) { + imgElement.attr("src", imgElement.data("omo_tablet")); + } else { + imgElement.attr("src", imgElement.data("omo_desktop")); + } + } else { + imgElement.attr("src", imgElement.data("omo_img")); + } + } + }, + mouseleave() { + const imgElement = $(this).find("img"); + const tmpImg = imgElement.data("tmp_img"); + if (tmpImg) { + imgElement.attr("src", tmpImg); + imgElement.removeAttr("data-tmp_img"); + } + }, + }); + }, + "all", + ".nav-link" +); + +app_shop.run( + function () { + $(".navbar-subsubnav").on({ + mouseenter() { + $(this).parent()[0].classList.add("nav-item-hoversub"); + }, + mouseleave() { + $(this).parent()[0].classList.remove("nav-item-hoversub"); + }, + }); + }, + "all", + ".navbar-subsubnav" +); + +app_shop.run( + function () { + $(".navbar-subnav").on({ + mouseenter() { + $(this).parent()[0].classList.add("nav-item-hoverNavLink"); + const imgElement = $(this).parent().find("img#gfx_inactive_img"); + const dataOmo = imgElement.data("omo"); + const paddingWidth = + imgElement.parent().innerWidth() - imgElement.parent().width(); + const paddingHeight = + imgElement.parent().innerHeight() - imgElement.parent().height(); + if (dataOmo) { + imgElement + .parent() + .css("min-width", imgElement.width() + paddingWidth); + imgElement + .parent() + .css("min-height", imgElement.height() + paddingHeight); + imgElement.attr("data-tmp_img", imgElement.attr("src")); + if (dataOmo === "img_rwd") { + if (app_shop.vars.view === 1) { + imgElement.attr("src", imgElement.data("omo_mobile")); + } else if (app_shop.vars.view === 2) { + imgElement.attr("src", imgElement.data("omo_tablet")); + } else { + imgElement.attr("src", imgElement.data("omo_desktop")); + } + } else { + imgElement.attr("src", imgElement.data("omo_img")); + } + } + }, + mouseleave() { + $(this).parent()[0].classList.remove("nav-item-hoverNavLink"); + const imgElement = $(this).parent().find("img#gfx_inactive_img"); + const tmpImg = imgElement.data("tmp_img"); + if (tmpImg) { + imgElement.attr("src", tmpImg); + imgElement.removeAttr("data-tmp_img"); + } + }, + }); + }, + "all", + ".navbar-subnav" +); diff --git a/less_css.less b/less_css.less new file mode 100644 index 0000000..a3f422a --- /dev/null +++ b/less_css.less @@ -0,0 +1,943 @@ +@media (min-width: 979px) { + .nav-item-hoversub { + background: #0587ec; + + > .nav-link { + color: #fff; + + &:after { + color: #fff !important; + } + } + } +} + +@keyframes loading { + 0% { + border-left: 0 solid #e21e24; + } + 10% { + border-left: 0 solid #e21e24; + } + 90% { + border-left: 150px solid #e21e24; + } + 100% { + border-left: 150px solid #e21e24; + } +} + +.fetchingData { + display: grid !important; +} + +@media (max-width: 979px) { + #loaded_contant_bm_hotspots { + display: none; + } +} + +#loaded_contant_bm_hotspots:after { + content: ""; + position: absolute; + text-align: center; + display: flex; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + height: 7px; + width: 150px; + display: block; + background: #fff; + opacity: 1; + z-index: 1; + box-sizing: border-box; + animation: loading 2s infinite linear; + box-shadow: 0 0 0 7px #f1f1f1; +} + +#menu_navbar { + @media (min-width: 979px) { + .navbar__whiteBackground { + position: absolute; + top: 0; + min-height: 100%; + left: 100%; + width: calc((3 * 100%) - 13.4rem); + // width: 500px !important; + z-index: 1; + background: #fff; + border-left: 1px solid #efefef; + box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 8px 0px, + rgba(0, 0, 0, 0.04) 5px -1px 7px 2px; + z-index: -1; + + > .navbar-whiteBackground__recommendationContainer { + height: 430px !important; + min-width: 800px !important; + + .product { + height: 430px !important; + } + + .product__icon > img { + width: 100% !important; + height: 100% !important; + } + } + + > .navbar-whiteBackground__baner { + // position: absolute; + // top: 0; + // left: 0; + width: 100%; + > img { + width: 100%; + height: 100%; + box-shadow: rgba(0, 0, 0, 0.04) 4px 5px 8px 0px, + rgba(0, 0, 0, 0.04) 8px 5px 7px 2px; + } + } + } + + .nav-item-hoverNavLink { + background-color: #fff; + > .nav-link.nav-gfx { + color: #0c2cac; + } + } + } + + .menu_go_up { + text-decoration: none !important; + } + + .mobile_category_list { + > .menu_categories_list_item { + padding: 15px 0; + color: #000; + font-weight: 400; + line-height: 20px; + border-bottom: 1px solid #efefef; + font-size: 14px; + text-decoration: none; + > .menu_categories_list_item_label { + cursor: pointer; + > div { + &:not(.--not-expanded) { + &:after { + content: "\f0d7"; + margin-right: 1rem; + font-family: FontAwesome; + font-size: 1.6rem; + } + } + + &.--not-expanded { + &:after { + content: "\f0d8"; + margin-right: 1rem; + font-family: FontAwesome; + font-size: 1.6rem; + } + } + } + + img { + margin-right: 1rem; + } + } + > .menu_categories_sublist { + display: none; + margin-top: 1rem; + border-top: 1px solid #efefef; + > li:first-child { + margin-top: 1rem; + } + a { + text-decoration: none; + } + .active { + display: flex; + flex-direction: column; + justify-content: space-between; + font-weight: 600; + .menu_categories_sublist_item_label { + > div { + > .menu_go_up { + color: #e21e24 !important; + } + &:not(.--not-expanded) { + &:after { + content: "\f0d7"; + margin-right: 1rem; + font-family: FontAwesome; + font-size: 1.6rem; + } + } + + &.--not-expanded { + &:after { + content: "\f0d8"; + margin-right: 1rem; + font-family: FontAwesome; + font-size: 1.6rem; + } + } + } + } + } + + .active_subsublist { + .menu_categories_subsublist_item_label { + width: 100%; + a { + color: #e21e24 !important; + } + } + } + > .empty { + font-weight: 600; + margin-bottom: 1.5rem; + } + > .menu_categories_sublist_item { + cursor: pointer; + font-weight: 600; + margin-bottom: 1.5rem; + > .menu_categories_sublist_item_label { + > div { + &:not(.--not-expanded) { + &:after { + content: "\f0d7"; + margin-right: 1rem; + font-family: FontAwesome; + font-size: 1.6rem; + } + } + + &.--not-expanded { + &:after { + content: "\f0d8"; + margin-right: 1rem; + font-family: FontAwesome; + font-size: 1.6rem; + } + } + } + } + + > .menu_categories_subsublist { + display: none; + > .menu_categories_subsublist_item { + > .menu_categories_subsublist_item_label { + width: 100%; + padding: 0.7rem 0; + font-weight: 300; + } + } + } + } + } + } + } +} + +#menu_categories { + border: none; + padding: 0; + grid-area: menu_categories; + z-index: 1; + + @media (min-width: 979px) { + width: auto; + clear: both; + position: relative; + + &:before { + content: ""; + display: block; + position: absolute; + top: 0; + left: 50%; + margin-left: -50vw; + width: 100vw; + height: calc(100%); + background: rgb(8, 13, 87); + background: -moz-radial-gradient( + circle, + rgba(8, 13, 87, 1) 0%, + rgba(0, 133, 236, 1) 100% + ); + background: -webkit-radial-gradient( + circle, + rgba(8, 13, 87, 1) 0%, + rgba(0, 133, 236, 1) 100% + ); + background: radial-gradient( + circle, + rgba(8, 13, 87, 1) 0%, + rgba(0, 133, 236, 1) 100% + ); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#080d57",endColorstr="#0085ec",GradientType=1); + overflow: hidden; + } + } +} + +.navbar-toggler { + display: inline-block; + color: @less_iaicolorscheme_background_text_color; + border: none; + background: none; + font-size: 1.7rem; + padding: 0; + width: 45px; + line-height: @header_height_mobile; + text-align: right; + padding-right: 1.5rem; + + @media (min-width: 979px) { + display: none; + } +} + +aside { + .navbar-collapse { + background: @less_iaicolorscheme_background_color; + clear: both; + display: block; + margin-bottom: 1.5rem; + + @media (min-width: 979px) { + display: none; + } + + ul { + list-style: none; + } + + img { + &.--omo { + display: none; + } + } + } + + .navbar-nav { + z-index: 9; + #product_category_element { + @media (max-width: 979px) { + display: none !important; + } + } + } + + .navbar-subnav { + z-index: 9; + } + + .navbar-subsubnav { + z-index: 19; + } + + .navbar-subnav, + .navbar-subsubnav, + .navbar-subsubsubnav { + width: ~"calc(100vw - 60px)"; + position: fixed; + background: @less_iaicolorscheme_background_color; + top: 0; + height: 100vh; + overflow: auto; + right: -100%; + transition: right 0.3s; + padding: 60px 1.5rem 120px; + display: none; + + @media (min-width: 757px) { + width: 50vw; + } + } + + .nav-item { + display: block; + + &.--extend { + display: none; + } + } + + .nav-link { + padding: 15px 0; + color: @link_color_hover; + font-weight: 400; + display: flex; + line-height: 20px; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #efefef; + font-size: 14px; + cursor: pointer; + text-decoration: none; + + &.not_selectable { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + } + + &:not(:only-child) { + &:after { + font-family: FontAwesome; + font-size: 22px; + content: "\f105"; + color: inherit; + } + } + + &:hover { + span.--omo { + display: none; + } + + img.--omo { + display: block; + } + } + + &.active { + color: @link_color; + } + } + + a.nav-link { + &:hover { + color: @link_color; + } + } + + .nav-header { + position: fixed; + top: 0; + right: -100%; + transition: right 0.3s; + width: ~"calc(100vw - 60px)"; + padding: 0 1.5rem; + + @media (min-width: 757px) { + width: 50vw; + } + + &__backLink { + position: absolute; + width: 40px; + height: 61px; + display: flex; + align-items: center; + font-size: 24px; + line-height: 29px; + text-decoration: none; + left: 20px; + z-index: 1; + } + + .nav-link { + background: @less_iaicolorscheme_background_color; + text-align: center; + display: block; + font-weight: 600; + font-size: 18px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + padding-left: 40px; + padding-right: 40px; + line-height: 30px; + + &:after { + content: "\f104"; + position: absolute; + left: 20px; + font-weight: 400; + font-family: FontAwesome; + font-size: 24px; + line-height: 29px; + display: none; + } + + &.nav-gfx { + padding: 5px 20px 5px 40px; + height: 60px; + line-height: normal; + display: flex; + justify-content: center; + align-items: center; + + &:after { + line-height: 50px; + } + + img { + max-height: 50px; + } + } + } + } +} + +header { + .navbar-collapse { + display: none; + position: relative; + + @media (min-width: 979px) { + display: block; + } + + ul { + list-style: none; + } + + img { + display: block; + margin-right: 1rem; + width: 32px; + height: 32px; + + &.--omo { + display: none; + } + } + } + + .navbar-nav { + display: flex; + flex-wrap: wrap; + list-style: none; + font-size: 1.5rem; + align-items: center; + justify-content: space-between; + + #nav-item-mark { + &:hover { + .menu_categories_sublist { + display: flex; + } + } + > .menu_categories_sublist { + position: absolute; + width: 72%; + display: none; + left: 323px; + z-index: 9999999999; + min-height: 500px !important; + background: #f3f3f3; + line-height: 2rem; + padding: 10px 20px !important; + line-height: 2; + flex-wrap: wrap; + + > li { + margin-right: 3rem; + + a { + text-decoration: none; + font-weight: 900; + cursor: pointer; + } + } + } + } + + & > li { + &:hover { + & > ul { + // display: grid; + } + } + } + } + + .navbar-subnav { + display: none; + height: 430px !important; + // width: 100%; + font-size: 1.3rem; + z-index: 100; + position: absolute; + background: @less_iaicolorscheme_background_color; + // border: 1px solid @less_iaicolorscheme_background_border_color; + // right: 0; + //left: -1.1rem; + top: 60px; + left: -10px !important; + // width: ~'calc(100% + 3rem)'; + // box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.2); + flex-wrap: wrap; + justify-content: left; + align-items: start; + grid-template-columns: 1fr 1fr 1fr 1fr; + box-shadow: rgba(0, 0, 0, 17%) 0px 4px 8px 0px, + rgba(0, 0, 0, 0.04) 5px -1px 7px 2px; + // border-radius: @less_iaicolorscheme_border_radius_value_sm; + padding: 10px; + z-index: -1; + + @media @desktop { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + } + + @media @large { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + } + + &.--cols1 { + width: ~"calc(30% - 2rem)"; + grid-template-columns: 1fr; + grid-template-rows: 30px; + + @media @desktop { + width: ~"calc(30% - 2rem)"; + } + } + + &.--cols2 { + width: ~"calc(50% - 2rem)"; + grid-template-columns: 1fr 1fr; + + @media @desktop { + width: ~"calc(40% - 2rem)"; + } + } + + &.--cols3 { + width: ~"calc(75% - 2rem)"; + grid-template-columns: 1fr 1fr 1fr; + + @media @desktop { + width: ~"calc(60% - 2rem)"; + } + } + + &.--cols4 { + width: ~"calc(100% + 3rem)"; + grid-template-columns: 1fr 1fr 1fr 1fr; + + @media @desktop { + width: ~"calc(80% - 2rem)"; + } + } + + &.--cols5 { + width: ~"calc(100% + 3rem)"; + grid-template-columns: 1fr 1fr 1fr 1fr; + + @media @desktop { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + } + } + + &.active, + &.--hover { + display: grid; + } + + .nav-link { + // text-transform: uppercase; + font-size: 1.4rem; + padding: 10px; + } + + & > .nav-item { + &.--all { + grid-column: span 5; + display: flex; + justify-content: center; + } + } + } + + .navbar-subsubnav { + padding-bottom: 10px; + + .navbar-subsubnav__itemContainer { + max-width: 50%; + flex: 50%; + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: max-content; + + > .nav-item { + > .nav-link { + color: #a5a5a5; + font-weight: 600; + font-size: 1.1em; + &:hover { + color: #fff; + cursor: pointer; + } + } + } + } + + .navbar-subsbunav__baner { + // display: none; + width: 100%; + flex: 50%; + > img { + width: 100%; + height: 190px; + } + } + + .nav-link { + font-weight: normal; + text-transform: none; + font-size: 1.2rem; + padding: 2.5px 10px; + } + } + + .nav-item { + &.--extend, + &.--all { + .nav-link { + text-decoration: underline; + text-transform: none; + font-weight: normal; + font-size: 1.2rem; + } + } + } + + .nav-link { + display: block; + padding: 5px 10px 8px; + text-decoration: none; + font-weight: 600; + // text-transform: uppercase; + + &:hover { + span.--omo { + display: none; + } + + img.--omo { + display: block; + } + } + + &.active { + color: @link_color; + } + } +} + +.sidebar_open, +.filters_open { + header { + @media (max-width: 979px) { + grid-template-columns: 25vw 25vw 25vw 25vw; + grid-template-areas: + "rabateCode rabateCode rabateCode rabateCode" + "freeShipping freeShipping freeShipping freeShipping" + "menu_categories logo menu_search menu_basket"; + } + + #menu_categories { + margin-left: 0; + text-align: left; + width: auto; + + @media (min-width: 757px) { + width: 50vw; + text-align: right; + } + } + + .navbar-toggler { + border: none; + } + } +} + +.sidebar_open { + aside { + .nav-open { + & > ul { + right: 0; + display: block; + left: auto !important; + + & > .nav-header { + right: 0; + } + } + } + } +} + +// www.code-ready.pl +@media (min-width: 979px) { + header .navbar-nav { + & > .nav-item { + &:nth-child(1) { + & > .nav-link { + display: flex; + justify-content: space-between; + align-items: center; + } + } + + & > .nav-link { + color: #fff; + padding: 0px 15px; + height: 60px; + display: flex; + justify-content: space-between; + align-items: center; + + &:hover { + background: #fff; + color: #0c2cac; + } + } + } + } + + .wide .navbar-subnav { + padding: 0; + height: var(--height); + + .navbar-subnav__topName { + padding: 10px; + @media (max-width: 979px) { + display: none !important; + } + + > .navbar-subnav__topName_name, + .navbar-subnav__topName_link { + color: #a5a5a5; + font-weight: 600; + } + + > .navbar-subnav__topName_link { + text-decoration: none; + &:hover { + color: #0587ec; + } + } + } + + .nav-item { + border-bottom: 1px solid #efefef; + + &:not(.empty) > .nav-link { + display: flex; + align-items: center; + justify-content: space-between; + + &:after { + content: "\F105"; + font-family: FontAwesome; + font-size: 15px; + color: #0587ec; + } + + & > .nav-link { + padding: 10px 20px !important; + + &:after { + content: ""; + } + } + } + + .nav-link { + &:hover { + background: #0085ec; + color: #fff; + &:after { + color: #fff; + } + } + } + + img { + mix-blend-mode: multiply; + margin-right: 1rem; + } + } + } + + /* SUBMENU */ + .wide ul.navbar-nav li.nav-item { + > ul.navbar-subsubnav { + display: none; + position: absolute; + top: 0; + min-height: 100%; + left: 100%; + width: calc((3 * 100%) - 13.4rem); + box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 8px 0px, + rgba(0, 0, 0, 0.04) 5px -1px 7px 2px; + padding: 10px 20px !important; + background: #fff; + z-index: 2; + + .nav-item { + border: none !important; + > .nav-link { + &:after { + content: ""; + } + } + } + + .navbar-subsubsubnav { + .nav-item { + border: none !important; + color: #000 !important; + > .nav-link { + &:after { + content: ""; + } + } + } + } + } + + &:hover > ul.navbar-subsubnav { + display: flex; + line-height: 2rem; + } + } + + header .navbar-subsubnav { + -webkit-column-width: 20em; + -webkit-column-gap: 2em; + -webkit-column-count: 4; + -moz-column-width: 20em; + -moz-column-gap: 2em; + -moz-column-count: 3; + -ms-column-width: 20em; + -ms-column-gap: 2em; + -ms-column-count: 3; + column-width: 10em; + column-gap: 2em; + column-count: 3; + padding: 20px; + + .nav-item { + margin-bottom: 1rem; + } + } + + .core-menu-banner { + position: absolute; + left: 0; + bottom: 0; + } +} //END diff --git a/wydzielony_javascript.js b/wydzielony_javascript.js new file mode 100644 index 0000000..ac44288 --- /dev/null +++ b/wydzielony_javascript.js @@ -0,0 +1,287 @@ +const obj = { + "/pl/menu/fotografia-205": { + id: "3827", + val: "3828", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, + "/pl/menu/filmowanie-212": { + id: "3829", + val: "3830", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, + "/pl/menu/statywy-201": { + id: "3831", + val: "3832", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, + "/pl/menu/torby-i-plecaki-202": { + id: "3833", + val: "3834", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, + "/pl/menu/studio-204": { + id: "3835", + val: "3836", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, + "/pl/menu/audio-203": { + id: "3837", + val: "3838", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, + "/pl/menu/outdoor-252": { + id: "3839", + val: "3840", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, + "/pl/menu/mobile-334": { + id: "3841", + val: "3842", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, + "/pl/menu/inne-1019": { + id: "3843", + val: "3844", + isFetched: false, + tmp_fetch: false, + isMouseOver: false, + }, +}; + +const initSlider = (slickContainer, navEl, objLinkHref) => { + $(slickContainer).slick({ + slidesToShow: 3, + prevArrow: + '', + nextArrow: + '', + }); + $(slickContainer).on("afterInit", function (event, slick, direction) { + console.log("dasdasdXDD"); + }); + + setTimeout(() => { + objLinkHref.isFetched = true; + objLinkHref.isMouseOver ? "" : (navEl.style.display = "none"); + }, 100); +}; + +const fetchProducts = ( + container, + traitId, + traitVal, + subNavHandler, + objLinkHref +) => { + let tmp_text = ``; + $.ajax({ + type: "GET", + url: `https://multifoto.pl/pl/search.php?traits_alt[${traitId}]=${traitVal}&getProductXML=true&limit=10`, + dataType: "xml", + timeout: 12000, + success: function (xml) { + $(xml) + .find("page > products > product") + .each(function (index) { + const prod = $(this); + + const name = + prod.find("name").eq(1).text().length > 3 + ? prod.find("name").eq(1).text() + : prod.find("name").eq(0).text(); + const id = prod.attr("id"); + const photo = prod.find("icon_src").eq(0).text(); + const url = prod.attr("link"); + const rate = prod.find("comments").attr("avg"); + const size = prod.find("sizes > size").attr("name"); + const availability = prod.find("sizes > availability").attr("status"); + + // Zmienne związane z ceną + const pricesEl = prod.find("prices"); + const priceEl = prod.find("price"); + + const price = priceEl.attr("price_formatted"); + const maxPrice = priceEl.attr("maxprice_formatted"); + const omnibusPrice = priceEl.attr("omnibus_price_formatted"); + + // markup produktu + tmp_text += ` + +
    + + ${name} +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +

    + ${name} + +

    +
    +
    +
    + ${ + maxPrice && omnibusPrice + ? ` +
    + ${maxPrice} brutto${price} brutto +
    + ` + : ` + ${price} brutto + + ` + } +
    + ${ + availability === "enable" + ? 'Dostępny' + : 'Niedostępny' + } +
    +
    + +
    + ${ + maxPrice && omnibusPrice + ? ` + Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki: ${omnibusPrice}` + : `` + } +
    +
    + `; + }); + + container.innerHTML = tmp_text; + initSlider(container, subNavHandler, objLinkHref); + }, + }); +}; + +if (window.innerWidth > 979) { + document.querySelectorAll("ul.navbar-nav > .nav-item").forEach((navItem) => { + const link = navItem.querySelector(".nav-link"); + const subNav = navItem.querySelector("ul.navbar-subnav"); + const sliderContainer = navItem.querySelector( + ".navbar-whiteBackground__recommendationContainer" + ); + const loaderContainer = sliderContainer.querySelector( + "#loaded_contant_bm_hotspots" + ); + const ul_container = navItem.querySelector("ul"); + const linkHref = link.getAttribute("href"); + + navItem.addEventListener("mouseleave", (e) => { + if (obj[linkHref] && obj[linkHref].isFetched) { + ul_container.style.display = "none"; + obj[linkHref].isMouseOver = false; + } else { + obj[linkHref].isMouseOver = false; + } + }); + + navItem.addEventListener("mouseover", (e) => { + obj[linkHref].isMouseOver = true; + ul_container.style.display = "grid"; + + if (!obj[linkHref]) { + loaderContainer.style.display = "none"; + sliderContainer.remove(); + } + + if (obj[linkHref] && !obj[linkHref].tmp_fetch) { + const { id, val } = obj[linkHref]; + + obj[linkHref].tmp_fetch = true; + fetchProducts(sliderContainer, id, val, subNav, obj[linkHref]); + } + + navItem.querySelectorAll(".nav-merge > li:not(.empty)").forEach((el) => { + el.addEventListener("mouseover", () => { + navItem.querySelector( + ".navbar-whiteBackground__baner" + ).style.display = "none"; + }); + el.addEventListener("mouseleave", () => { + navItem.querySelector( + ".navbar-whiteBackground__baner" + ).style.display = "block"; + }); + }); + }); + }); +} diff --git a/xml_xslt.xml b/xml_xslt.xml new file mode 100644 index 0000000..3c4093d --- /dev/null +++ b/xml_xslt.xml @@ -0,0 +1,582 @@ + + + + + + - + 1 + 1 + + 1 + 10 + + + + + \ No newline at end of file