1function Header(navigation, currentLvl1Id, currentLvl2id) { 2 3 var $navLvl1 = $("nav.nav-main .lvl-1") 4 var navLvl1TopNarrow = $navLvl1.css("top") 5 var navLvl1TopWide = 24 6 var $navLvl2 = $("nav.nav-main .lvl-2") 7 var navLvl2TopNarrow = $navLvl2.css("top") 8 var navLvl2TopWide = 85 9 var $search = $("header .search") 10 var $navItems = $navLvl1.find(".nav-item") 11 var $navLinks = $navLvl1.find(".nav-link") 12 var isHome = $("body").hasClass("home") 13 var logoAndBgCanvas = Snap("#logo-svg") 14 15 var state = "narrow" 16 17 var metrics = { 18 false: { 19 logoBg: { 20 "min": [85], 21 "md": [110], // > md 22 "xl": [130] // > xl 23 }, 24 logoText: { 25 "min": [20, 30, 100], 26 "md": [30, 30, 125], 27 "xl": [40, 40, 135] 28 }, 29 searchTop: { 30 "min": 20, 31 "md": 24, 32 "xl": 40 33 } 34 }, 35 true: { 36 logoText: { 37 "min": [20, 25, 100], 38 "md": [30, 20, 125],
39 "xl": [40, 20, 135] 40 }, 41 bgHeightScale: { 42 "min": 0.8, 43 "md": 0.9, 44 "xl": 1 45 }, 46 searchTop: { 47 "min": 15, 48 "md": 20, 49 "xl": 26 50 } 51 } 52 } 53 54 55 /* 56 <ul class="nav"> 57 {% set subnav = topLevel.getDescendants().all() %} 58 {% nav page in subnav %} 59 <li class="nav-item {{ (page.id == entry.id) ? 'active' }}"> 60 <a class="nav-link" href="{{ page.url }}">{{ page.title }}</a> 61 </li> 62 {% endnav %} 63 </ul> 64 */ 65 Snap.load("/assets/images/logo_sprite.svg", function (logo) { 66 var logoShapeNarrow = logo.select("#shape_left") 67 var logoShapeWide = logo.select("#shape_wide") 68 var logoShape = logoShapeNarrow 69 logoAndBgCanvas.append(logoShape) 70 var logoShapeNarrowPoints = logoShapeNarrow.node.getAttribute('d') 71 var logoShapeWidePoints = logoShapeWide.node.getAttribute('d') 72 var logoShapeWidePointsOrig = logoShapeWidePoints 73 var logoText = logo.select("#logo_text") 74 logoAndBgCanvas.append(logoText) 75 76 function animateWide(immediate) { 77 state = "wide" 78 var currentSize = sizeDetect.getCurrentSize() 79 var windowWidth = $(window).width() 80 var delay = immediate ? 0 : 500 81 if (immediate) { 82 $navLinks.css("transition", "color 0s") 83 } else { 84 $navLinks.css("transition", "color 0.5s ease-in-out") 85 } 86 var bgHeightScale = metrics.true.bgHeightScale[currentSize] 87 var textScale = metrics.false.logoText[currentSize][2] / metrics.false.logoText.xl[2] 88 logoShapeWidePoints = logoShapeWidePointsOrig.replace(new RegExp("1200", 'g'), "" + windowWidth) 89 // console.log("logoShapeWidePoints", logoShapeWidePoints) 90 logoShape.animate({d: logoShapeWidePoints}, delay, mina.easeinout) 91 logoShape.animate({transform: "scale(1, " + bgHeightScale + ")"}, delay, mina.easeinout) 92 var logoTextTransform = 'scale(' + textScale + ') ' + 'translate(' + metrics.true.logoText[currentSize][0] + "," + metrics.true.logoText[currentSize][1] + ")" 93 logoText.animate({transform: logoTextTransform}, delay, mina.easeinout) 94 $navLvl1.animate({top: navLvl1TopWide}, delay, function() { 95 $navLinks.css("transition", "color 0s") 96 }) 97 $navLvl1.addClass("wide") 98 $navLvl2.animate({top: navLvl2TopWide}, delay) 99 $search.animate({top: metrics.true.searchTop[currentSize]}, delay) 100 } 101 102 function redraw(immediate) { 103 var currentSize = sizeDetect.getCurrentSize() 104 var windowWidth = $(window).width() 105 var delay = immediate ? 0 : 500 106 if (immediate) { 107 $navLinks.css("transition", "color 0s") 108 } else { 109 $navLinks.css("transition", "color 0.5s ease-in-out") 110 } 111 // console.log("redraw", currentSize) 112 if (scrollDetect.scrolled() || !isHome) { // wide 113 animateWide(immediate) 114 } else { 115 state = "narrow" 116 // logo 117 var shapeScale = metrics.false.logoBg[currentSize][0] / metrics.false.logoBg.xl[0] 118 var textScale = metrics.false.logoText[currentSize][2] / metrics.false.logoText.xl[2] 119 // console.log("scale", scale, metrics.false.logoBg.xl) 120 logoShape.animate({transform: "scale(" + shapeScale + ")"}, delay, mina.easeinout) 121 logoShape.animate({d: logoShapeNarrowPoints}, delay, mina.easeinout) 122 var logoTextTransform = 'scale(' + textScale + ') ' + 'translate(' + metrics.false.logoText[currentSize][0] + "," + metrics.false.logoText[currentSize][1] + ")" 123 logoText.animate({transform: logoTextTransform}, delay, mina.easeinout) 124 $navLvl1.animate({top: navLvl1TopNarrow}, delay, function() { 125 $navLinks.css("transition", "color 0s") 126 }) 127 $navLvl1.removeClass("wide") 128 $navLvl2.animate({top: navLvl2TopNarrow}, delay) 129 $search.animate({top: metrics.false.searchTop[currentSize]}, delay) 130 } 131 } 132 133 $(window).resize(function () { 134 window.clearTimeout(this.debounce) 135 this.debounce = setTimeout(function () { 136 var windowWidth = $(window).width() 137 if (scrollDetect.scrolled() || !isHome) { 138 logoShapeWidePoints = logoShapeWidePointsOrig.replace(new RegExp("1200", 'g'), "" + windowWidth) 139 logoShape.animate({d: logoShapeWidePoints}, 0, mina.easeinout) 140 } 141 }) 142 }) 143 144 var submenuShown = "" + currentLvl1Id 145 function showSubmenu(targetId) { 146 // console.log("showSubmenu", targetId) 147 148 if (targetId) { 149 $navItems.removeClass("active") 150 $(".nav-item-" + targetId).addClass("active") 151 } 152 var submenu = "" 153 154 for (var i = 0; i < navigation.length; i++) { 155 var navigationElement = navigation[i] 156 var navigationElementId = navigationElement.pageId 157 if (navigationElement.parentId === targetId) { 158 var active = "" 159 // console.log(currentLvl2id, navigationElement.id) 160 if(currentLvl2id === navigationElementId) { 161 active = "active" 162 } 163 submenu += '<li class="nav-item ' + active + '">' + 164 '<a class="nav-link" href="' + navigationElement.url + '">' + navigationElement.name + '</a>' + 165 '</li>' 166 } 167 } 168 169 if (submenuShown === targetId) { 170 $navLvl2.html("") 171 submenuShown = "" 172 $navItems.removeClass("active") 173 if(currentLvl1Id) { 174 $(".nav-item-" + currentLvl1Id).addClass("active") 175 } 176 } else { 177 /* 178 if (state !== "wide") { 179 $navLvl2.html("<ul class='nav'>" + submenu + "</ul>") 180 animateWide(false) 181 } else { 182 $navLvl2.html("<ul class='nav'>" + submenu + "</ul>") 183 } 184 */ 185 $navLvl2.html("<ul class='nav'>" + submenu + "</ul>") 186 submenuShown = targetId 187 } 188 } 189 190 $navLinks.click(function(params) { 191 // console.log("click", params.target.getAttribute("data-id")) 192 showSubmenu(params.target.getAttribute("data-id")) 193 }) 194 195 var scrollDetect = new ScrollDetect(function (scrolled) { 196 redraw() 197 }) 198 var sizeDetect = new SizeDetect(function (size) { 199 redraw(true) 200 }) 201 redraw(true) 202 $("header").show() 203 }) 204}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.