Created
July 5, 2018 12:35
-
-
Save shakyShane/4345b30bc26f6dde232eb0dd58ee2e27 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Menu template | |
| * | |
| * @var $block \Ves\Megamenu\Block\Menu | |
| */ | |
| ?> | |
| <?php | |
| if ($menu = $this->getMenu()) { | |
| $html = $classes = ''; | |
| $data = $this->helper("Ves\Megamenu\Helper\Data"); | |
| $generator = $this->helper("Ves\Megamenu\Helper\Generator"); | |
| $mobileTemplate = $menu->getMobileTemplate(); | |
| if ($mobileTemplate == 0) { | |
| $classes = 'ves-offcanvas'; | |
| } else if ($mobileTemplate == 1) { | |
| $classes = 'ves-maccordion'; | |
| } else if ($mobileTemplate == 2) { | |
| $classes = 'ves-mcustommenu'; | |
| } else if ($mobileTemplate == 3) { | |
| $classes = 'ves-mdrilldown'; | |
| } | |
| $desktopTemplate = $menu->getDesktopTemplate(); | |
| if ($desktopTemplate == 'vertical-left' || $desktopTemplate == 'vertical-right') { | |
| $classes .= ' ves-vertical'; | |
| } | |
| $classes .= ' ves-d' . $desktopTemplate; | |
| if ($disableItemBlocks = $menu->getData("disable_iblocks")) { | |
| $classes .= ' hide-blocks'; | |
| } | |
| $html = $generator->getMenuCacheHtml($menu); | |
| if (!$html) { | |
| $menuItems = $menu->getData('menuItems'); | |
| $structure = json_decode($menu->getStructure(), true); | |
| $categories = []; | |
| foreach ($menuItems as $item) { | |
| if (isset($item['link_type']) && $item['link_type'] == 'category_link' && isset($item['category']) && !in_array($item['category'], $categories)) { | |
| $categories[] = $item['category']; | |
| } | |
| } | |
| $data->setMenuCategories($categories); | |
| if (is_array($structure)) { | |
| foreach ($structure as $k => $v) { | |
| $itemData = $data->renderMenuItemData($v, [], $menuItems); | |
| $html .= $data->drawItem($itemData); | |
| } | |
| } | |
| } | |
| $html = $data->filter($html); | |
| $event = $menu->getEvent(); | |
| $id = time() . uniqid(); | |
| $blockId = $menu->getAlias() . time(); | |
| $disableBellow = (int) $menu->getDisableBellow(); | |
| $navId = 'nav' . $id; | |
| $classes .= ' ves-megamenu-' . $event . ' ' . $menu->getData("classes") . ' ' . $menu->getAlias(); | |
| $title = $this->getData("title"); | |
| if ($title) $classes .= ' ' . 'has-title'; | |
| $sticky = $menu->getData('scrolltofixed'); | |
| $design = $menu->getDesign(); | |
| $googleLink = $styles = ''; | |
| if ($design) { | |
| if (!is_array($design)) { | |
| $design = unserialize($design); | |
| } | |
| if (isset($design['margin_top']) && $design['margin_top']) { | |
| $styles .= 'margin-top:' . $design['margin_top'] . $design['margin_units'] . ';'; | |
| } | |
| if (isset($design['margin_right']) && $design['margin_right']) { | |
| $styles .= 'margin-right:' . $design['margin_right'] . $design['margin_units'] . ';'; | |
| } | |
| if (isset($design['margin_bottom']) && $design['margin_bottom']) { | |
| $styles .= 'margin-bottom:' . $design['margin_bottom'] . $design['margin_units'] . ';'; | |
| } | |
| if (isset($design['margin_left']) && $design['margin_left']) { | |
| $styles .= 'margin-left:' . $design['margin_left'] . $design['margin_units'] . ';'; | |
| } | |
| if (isset($design['border_top_width']) && $design['border_top_width']) { | |
| $styles .= 'border-top-width:' . $design['border_top_width'] . $design['border_units'] . ';'; | |
| } | |
| if (isset($design['border_right_width']) && $design['border_right_width']) { | |
| $styles .= 'border-right-width:' . $design['border_right_width'] . $design['border_units'] . ';'; | |
| } | |
| if (isset($design['border_bottom_width']) && $design['border_bottom_width']) { | |
| $styles .= 'border-bottom-width:' . $design['border_bottom_width'] . $design['border_units'] . ';'; | |
| } | |
| if (isset($design['border_left_width']) && $design['border_left_width']) { | |
| $styles .= 'border-left-width:' . $design['border_left_width'] . $design['border_units'] . ';'; | |
| } | |
| if (isset($design['padding_top']) && $design['padding_top']) { | |
| $styles .= 'padding-top:' . $design['padding_top'] . $design['padding_units'] . ';'; | |
| } | |
| if (isset($design['padding_right']) && $design['padding_right']) { | |
| $styles .= 'padding-right:' . $design['padding_right'] . $design['padding_units'] . ';'; | |
| } | |
| if (isset($design['padding_bottom']) && $design['padding_bottom']) { | |
| $styles .= 'padding-bottom:' . $design['padding_bottom'] . $design['padding_units'] . ';'; | |
| } | |
| if (isset($design['padding_left']) && $design['padding_left']) { | |
| $styles .= 'padding-left:' . $design['padding_left'] . $design['padding_units'] . ';'; | |
| } | |
| if (isset($design['border_style']) && $design['border_style']) { | |
| $styles .= 'border-style: ' . $design['border_style'] . ';'; | |
| } | |
| if (isset($design['border_color']) && $design['border_color']) { | |
| $styles .= 'border-color: ' . $design['border_color'] . ';'; | |
| } | |
| if (isset($design['border_top_left_radius']) && $design['border_top_left_radius']) { | |
| $styles .= 'border-top-left-radius: ' . $design['border_top_left_radius'] . $design['radius_units'] . ';'; | |
| } | |
| if (isset($design['border_top_right_radius']) && $design['border_top_right_radius']) { | |
| $styles .= 'border-top-right-radius: ' . $design['border_top_right_radius'] . $design['radius_units'] . ';'; | |
| } | |
| if (isset($design['border_bottom_right_radius']) && $design['border_bottom_right_radius']) { | |
| $styles .= 'border-bottom-right-radius: ' . $design['border_bottom_right_radius'] . $design['radius_units'] . ';'; | |
| } | |
| if (isset($design['border_bottom_left_radius']) && $design['border_bottom_left_radius']) { | |
| $styles .= 'border-top-left-radius: ' . $design['border_bottom_left_radius'] . $design['radius_units'] . ';'; | |
| } | |
| if (isset($design['background']) && $design['background']) { | |
| $styles .= 'background-color: ' . $design['background'] . ';'; | |
| } | |
| if (isset($design['boxshadow_color']) && $design['boxshadow_color']) { | |
| $boxshadowUnits = $design['boxshadow_units']; | |
| $styles .= 'box-shadow: ' . ($design['boxshadow_x']?'inset':'') . ' ' . $design['boxshadow_x'] . $boxshadowUnits . ' ' . $design['boxshadow_y'] . $boxshadowUnits . ' ' . $design['boxshadow_blur'] . $boxshadowUnits . ' ' . $design['boxshadow_spread'] . $boxshadowUnits . ' ' . $design['boxshadow_color'] . ';'; | |
| } | |
| if (isset($design['font_group']) && $design['font_group'] == 'google') { | |
| $amp = ','; | |
| $charSubset = ''; | |
| if ($subsets = $design['font_char_subset']){ | |
| $charSubset = "{$amp}subset={$subsets}"; | |
| } | |
| $fontWeight = ''; | |
| $weight = $design['font_weight']; | |
| if ($weight){ | |
| $fontWeight = ':' . $weight; | |
| } | |
| $googleLink = 'https://fonts.googleapis.com/css?family='.str_replace(' ', '+', $design['font_google']) . $fontWeight . $charSubset; | |
| if (isset($design['font_google']) && $design['font_google'] && $design['font_google']) { | |
| $styles .= 'font-family: ' . $design['font_google'] . ';'; | |
| } | |
| } else if (isset($design['font_group']) && $design['font_group'] != 'custom') { | |
| $styles .= 'font-family: ' . $design['font_group'] . ';'; | |
| } else if (isset($design['font_custom']) && $design['font_custom'] && $design['font_group'] == 'custom') { | |
| $styles .= 'font-family: ' . $design['font_custom'] . ';'; | |
| } | |
| if (isset($design['font_size']) && $design['font_size']) { | |
| $styles .= 'font-size: ' . $design['font_size'] . ';'; | |
| } | |
| if (isset($design['font_weight']) && $design['font_weight']) { | |
| $styles .= 'font-weight: ' . $design['font_weight'] . ';'; | |
| } | |
| } | |
| if ($styles) { | |
| $styles = 'style="' . $styles . '"'; | |
| } | |
| ?> | |
| <div id="<?php echo $blockId ?>" class="block ves-megamenu top-navigation <?php echo $classes ?>" <?php echo $styles; ?>> | |
| <?php if ($title) { ?> | |
| <div class="block-title"><strong><span><?php echo __($title); ?></span></strong></div> | |
| <?php } ?> | |
| <?php if($mobileTemplate == 0 || $mobileTemplate == 2){ ?> | |
| <div class="navbar ves-navbar"> | |
| <span class="ves-navtoggle ves-navtoggle<?php echo $blockId ?>"> | |
| <span><?php echo __('Toggle Nav'); ?></span> | |
| </span> | |
| </div> | |
| <?php } ?> | |
| <div class="navigation navitaion<?php echo $id ?>"> | |
| <?php echo $block->getChildHtml() ?> | |
| <ul id="<?php echo $navId ?>" class="<?php echo $navId ?>" <?php if($disableBellow>0){ ?>data-disable-bellow="<?php echo $disableBellow ?>"<?php } ?>> | |
| <?php echo $html; ?> | |
| </ul> | |
| </div> | |
| </div> | |
| <script> | |
| require(['jquery' | |
| <?php if($menu->getData('scrolltofixed')){ ?>,'scrolltofixed'<?php } ?> | |
| <?php if ($mobileTemplate == 3 || ($desktopTemplate=='drill')) { ?>,'jquery.drilldown'<?php } ?> | |
| ], function($) { | |
| <?php if ($googleLink && $design['font_google'] !== 'Open Sans') { ?> | |
| var ss = document.createElement("link"); | |
| ss.type = "text/css"; | |
| ss.rel = "stylesheet"; | |
| ss.href = "<?php echo $googleLink ?>"; | |
| document.getElementsByTagName("head")[0].appendChild(ss); | |
| <?php } ?> | |
| jQuery(document).ready(function($) { | |
| var $document = $(document), | |
| $window = $(window), | |
| $html = $('html'), | |
| $block = $('#<?php echo $blockId ?>'), | |
| $nav = $('#<?php echo $navId ?>'), | |
| $navItems = $nav.find('.nav-item'); | |
| $nav.find('p').each(function() { | |
| var $this = $(this); | |
| if ($this.html().replace(/\s| /g, '').length == 0) | |
| $this.remove(); | |
| }); | |
| <?php if ($event == 'hover' && $desktopTemplate != 'accordion' && $desktopTemplate != 'drill') { ?> | |
| $navItems.hover(function() { | |
| var $this = $(this); | |
| $this.addClass('current'); | |
| var id = $this.data("dynamic-id"); | |
| if (id) { | |
| $this.parents(".dynamic-items").find("li").removeClass("dynamic-active"); | |
| $this.addClass("dynamic-active"); | |
| } | |
| $nav.find('.'+id).parent().find(".dynamic-item").removeClass("dynamic-active"); | |
| $("#<?php echo $navId ?> ."+id).addClass("dynamic-active"); | |
| if ($this.data('hovericon')) { | |
| $this.children('.nav-anchor').find('.item-icon').attr('src', $this.data('hovericon')); | |
| } | |
| if ($this.data('caret') && $(this).data('hovercaret')) { | |
| $this.children('.nav-anchor').find('.ves-caret').removeClass($this.data('caret')).addClass($this.data('hovercaret')); | |
| } | |
| $this.children('.nav-anchor').css({ | |
| "background-color": $this.data("hover-bgcolor"), | |
| "color": $this.data("hover-color") | |
| }); | |
| <?php if ($desktopTemplate == 'horizontal') { ?> | |
| if ($this.hasClass('level0')) { | |
| var mParentTop = $('#<?php echo $blockId ?> .navigation').offset().top; | |
| var mParentHeight = $this.parent().height(); | |
| var mTop = $this.height(); | |
| var mHeight = $this.height(); | |
| var mParent = $this.parent(); | |
| if (mHeight < mParentHeight) { | |
| mTop = $this.offset().top - mParent.offset().top + mHeight; | |
| } | |
| $this.children('.submenu').css({top:mTop}); | |
| } | |
| <?php } ?> | |
| }, function() { | |
| var $this = $(this), | |
| id = $this.attr('id'); | |
| if ($this.data('iconsrc')) { | |
| $this.children('.nav-anchor').find('.item-icon').attr('src', $this.data('iconsrc')); | |
| } | |
| if ($this.data('caret')) { | |
| $this.children('.nav-anchor').find('.ves-caret').removeClass($this.data('hovercaret')).addClass($this.data('caret')); | |
| } | |
| $this.removeClass('current'); | |
| $this.children('.nav-anchor').css({ | |
| "background-color": $this.data("bgcolor"), | |
| "color": $this.data("color") | |
| }); | |
| }); | |
| <?php } ?> | |
| <?php if ($event == 'click') { ?> | |
| $navItems.click(function() { | |
| var $this = $(this); | |
| if ($this.children('.submenu').length) { | |
| if ($this.hasClass('level0')) { | |
| $('#<?php echo $navId ?> > .nav-item').removeClass('current'); | |
| } | |
| var id = $this.data("dynamic-id"); | |
| if (id) { | |
| $this.parents(".dynamic-items").find("li").removeClass("dynamic-active"); | |
| $this.addClass("dynamic-active"); | |
| } | |
| $this.addClass('current'); | |
| $("#<?php echo $navId ?> ."+id).parent().find(".dynamic-item").removeClass("dynamic-active"); | |
| $("#<?php echo $navId ?> ."+id).addClass("dynamic-active"); | |
| if ($this.data('hovericon')) { | |
| $this.children('.nav-anchor').find('.item-icon').attr('src', $this.data('hovericon')); | |
| } | |
| return false; | |
| } | |
| }); | |
| <?php } ?> | |
| /** ACCORDION */ | |
| <?php if ($desktopTemplate == 'accordion') { ?> | |
| $('#<?php echo $navId ?> .ves-caret').on('click', function(e) { | |
| e.preventDefault(); | |
| var $this = $(this), | |
| $parent = $($this.parents(".nav-item").eq(0)), | |
| subMenu = $parent.children(".submenu"); | |
| if (!$this.hasClass('item-active')) { | |
| if ($parent.data('caret') && $(parent).data('hovercaret')) { | |
| $this.removeClass($parent.data('caret')).addClass($parent.data('hovercaret')); | |
| } | |
| //parent.addClass('current'); | |
| $this.addClass('item-active'); | |
| subMenu.stop().slideToggle(); | |
| setTimeout(function(){ | |
| subMenu.css({'height':''}); | |
| }, 200); | |
| } else { | |
| subMenu.stop().slideToggle(); | |
| //parent.removeClass('current'); | |
| $this.removeClass('item-active'); | |
| $this.removeClass($(parent).data('hovercaret')).addClass($parent.data('caret')); | |
| } | |
| return false; | |
| }); | |
| <?php } ?> | |
| /* OPENER */ | |
| $('#<?php echo $navId ?> .opener').on('click', function(e) { | |
| e.preventDefault(); | |
| $navItems.removeClass("item-active"); | |
| var $this = $(this), | |
| $parent = $($this.parents(".nav-item").eq(0)); | |
| $this.toggleClass('item-active'); | |
| var subMenu = $parent.find(".submenu").eq(0); | |
| subMenu.stop().slideToggle(); | |
| subMenu.css({'height':''}); | |
| return false; | |
| }); | |
| /* TOGGLE */ | |
| $("#<?php echo $blockId ?> .ves-navtoggle<?php echo $blockId ?>").click(function() { | |
| $html.removeClass('nav-before-open nav-open'); | |
| $('.ves-overlay<?php echo $blockId ?>').show(); | |
| $block.append('<div class="ves-overlay ves-overlay<?php echo $blockId ?>"></div>'); | |
| $nav.css("left", "0px"); | |
| if ($html.hasClass('ves-navopen')) { | |
| $html.removeClass('ves-navopen'); | |
| setTimeout(function () { | |
| $html.removeClass('ves-nav-before-open'); | |
| }, 300); | |
| } else { | |
| $html.addClass('ves-nav-before-open'); | |
| setTimeout(function () { | |
| $html.addClass('ves-navopen'); | |
| }, 42); | |
| } | |
| }); | |
| /* OFF-CANVAS */ | |
| $document.on("click", ".ves-overlay<?php echo $blockId ?>", function(){ | |
| $nav.css("left",""); | |
| $html.removeClass('ves-navopen'); | |
| setTimeout(function () { | |
| $html.removeClass('ves-nav-before-open'); | |
| }, 300); | |
| $(this).remove(); | |
| return false; | |
| }); | |
| /* STICKY MENY */ | |
| <?php if($menu->getData('scrolltofixed')){ ?> | |
| $('.section-items.nav-sections-items').scrollToFixed({ | |
| zIndex: 999 | |
| }); | |
| <?php } ?> | |
| /** DRILLDOWN MENU */ | |
| <?php if ($mobileTemplate == 3 && $desktopTemplate=='drill') { ?> | |
| $block.drilldown({ | |
| selector: '.opener', | |
| cssClass: { | |
| container: 'navitaion<?php echo $id ?>', | |
| root: '<?php echo $navId ?>', | |
| sub: 'submenu', | |
| back: 'drilldown-back' | |
| }, | |
| speed: 300 | |
| }); | |
| <?php } ?> | |
| var mobileDrill, desktopDrill; | |
| /* WINDOW RESIZE */ | |
| $window.on("resize", function() { | |
| if ($window.width() < 768) { | |
| $block.addClass("nav-mobile").removeClass('nav-desktop'); | |
| /** DRILLDOWN MOBILE MENU */ | |
| <?php if ($mobileTemplate == 3) { ?> | |
| $('#<?php echo $blockId ?> .drill-opener').show(); | |
| mobileDrill = $nav.drilldown({ | |
| selector: '.drill-opener', | |
| cssClass: { | |
| container: 'navitaion<?php echo $id ?>', | |
| root: '<?php echo $navId ?>', | |
| sub: 'submenu', | |
| back: 'drilldown-back' | |
| }, | |
| speed: 300 | |
| }); | |
| <?php } ?> | |
| <?php if ($desktopTemplate=='drill') { ?> | |
| $('#<?php echo $blockId ?> .drill-opener').hide(); | |
| $block.css('width', ''); | |
| if (typeof(desktopDrill) === 'object') { | |
| $block.drilldown('reset'); | |
| } | |
| <?php } ?> | |
| $('#<?php echo $blockId ?> .opener').removeClass('item-active'); | |
| } else { | |
| $("#<?php echo $blockId ?> .submenu").css({'display':''}); | |
| $block.removeClass("nav-mobile").addClass('nav-desktop'); | |
| /** DRILLDOWN MOBILE MENU */ | |
| <?php if ($desktopTemplate=='drill') { ?> | |
| $('#<?php echo $blockId ?> .drill-opener').show(); | |
| $('#<?php echo $blockId ?>').drilldown({ | |
| selector: '.drill-opener', | |
| cssClass: { | |
| container: 'navitaion<?php echo $id ?>', | |
| root: '<?php echo $navId ?>', | |
| sub: 'submenu', | |
| back: 'drilldown-back' | |
| }, | |
| speed: 300 | |
| }); | |
| <?php } ?> | |
| <?php if ($mobileTemplate == 3) { ?> | |
| $('#<?php echo $blockId ?> .drill-opener').hide(); | |
| $block.css('width', ''); | |
| if (typeof(mobileDrill) === 'object') { | |
| $('#<?php echo $blockId ?>').drilldown('reset'); | |
| } | |
| $('#<?php echo $blockId ?>').find('.submenu').each(function() { | |
| var subWidth = $(this).data('width'); | |
| if (!subWidth) { | |
| subWidth = '100%'; | |
| } | |
| $(this).css('width', subWidth); | |
| }); | |
| <?php } ?> | |
| } | |
| // TABLET | |
| $("#<?php echo $navId ?> .nav-item").click(function() { | |
| if ($window.width() >= 768 && $window.width() < 1024) { | |
| var $this = $(this), | |
| $parent = $(this).parent(); | |
| if ($parent.children('.submenu').length == 1) { | |
| if ($parent.hasClass('level0')) { | |
| if ($parent.hasClass('current')) { | |
| $parent.removeClass('current'); | |
| return false; | |
| } | |
| $("#<?php echo $navId ?> .level0").removeClass('current'); | |
| var mParent = $('#<?php echo $blockId ?> .navigation').offset().top; | |
| var mHeight = $(parent).offset().top; | |
| var mTop = (mHeight - mParent) + $(parent).height(); | |
| $parent.children('.submenu').css({top:mTop}); | |
| } | |
| $parent.addClass('current'); | |
| if ($parent.hasClass('submenu-alignleft') || $parent.hasClass('submenu-alignright')){ | |
| if (($parent.offset().left + $parent.children('.submenu').width()) > $window.width()) { | |
| $parent.children('.submenu').css('max-width','100%'); | |
| $parent.css('position','static'); | |
| } | |
| } | |
| return false; | |
| } | |
| } else { | |
| $nav.find('.submenu').css('max-width',''); | |
| $nav.find('.submenu-alignleft').css('position','relative'); | |
| } | |
| }); | |
| }).resize(); | |
| }); | |
| }); | |
| </script> | |
| <?php } ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment