1(function (){ 2 var currentSection = ""; 3 4 $(".menu > li > a").on("click", MainMenuClick); 5 6 $(".btn-gameDev, .btn-illustrator, .btn-webDesigner, .btn-aboutMe").on("click", NavMenuClick); 7 8 $(".btn-hamburger").on("click", HamburgerClick); 9 10 $(".btn-backArrow").on("click", NavBackClick); 11 12 $(".portfolio-main > .btn-x").on("click", XOutClick); 13 14 $("#lightbox, #lightbox .btn-x").on("click", XOutLightboxClick); 15 16 function MainMenuClick(e){ 17 console.log(e.currentTarget); 18 19 GoToNewSection("#" + e.currentTarget.parentElement.id.replace("btn-mm", "portfolio"), 0); 20 } 21 22 function NavMenuClick(e){ 23 console.log(e.currentTarget); 24 25 26 GoToNewSection("#" + e.currentTarget.className.replace("btn", "portfolio"), 400); 27 28 } 29 30 function GoToNewSection(targetSection, newSectionDelay){ 31 var previousSection = currentSection; 32 33 if (previousSection){ 34 var ps = $(previousSection); 35 ps.css({top:"", left:""}); 36 AddClass(ps[0], "hide"); 37 ResetNavMenuSlide(previousSection); 38 } 39 40 41 var wrapper = $(targetSection + " .portfolio-nav-wrapper"); 42 setTimeout(function(){ 43 var ts = $(targetSection); 44 ts.css({top:"0", left:"0"}); 45 RemoveClass(ts[0], "hide"); 46 47 if (wrapper.css("margin-left") == "0px"){ 48 AnimatePortfolioNav(targetSection); 49 } 50 }, newSectionDelay); 51 52 currentSection = targetSection; 53 } 54 55 function AnimatePortfolioNav(currentSection){ 56 $(currentSection + " .portfolio-nav-name").addClass("portfolio-nav-nameSlideIn"); 57 $(currentSection + " .portfolio-nav").addClass("portfolio-navSlideIn"); 58 $(currentSection + " .portfolio-nav-wrapper .socialLinks-wrapper").addClass("portfolio-nav-socialLinksSlideIn"); 59 } 60 61 function HamburgerClick(e){ 62 console.log(e.currentTarget); 63 64 //var currentSection = "#" + e.currentTarget.parentElement.parentElement.id; 65 66 //$(currentSection + " .portfolio-nav-wrapper").css({"transform": "translateX(0%)"}); 67 $(currentSection + " .portfolio-nav-wrapper").css("margin-left", "0"); 68 AnimatePortfolioNav(currentSection); 69 } 70 71 function NavBackClick(e){ 72 console.log(e.currentTarget); 73 74 //var currentSection = "#" + e.currentTarget.parentElement.parentElement.parentElement.id; 75 76 ResetNavMenuSlide(currentSection); 77 78 } 79 80 function XOutClick(e){ 81 console.log(e.currentTarget); 82 83 var cs = $(currentSection); 84 cs.css({top:"", left:""}); 85 AddClass(cs[0], "hide"); 86 87 ResetNavMenuSlide(currentSection); 88 89 } 90 91 function ResetNavMenuSlide(section){ 92 //$(section + " .portfolio-nav-wrapper").css({"transform": ""}); 93 $(section + " .portfolio-nav-wrapper").css("margin-left", ""); 94 } 95 96 function CheckIfNavIsOut(whichNav){ 97 98 } 99
100 //Setting up illustrator examples 101 102 //These are the file names - description pairings for each of the portfolio pieces. They will be input into urls later. 103 var illustratorImgs = [ 104 "ArtBashGraphic", 105 "GeorgeHufnagl", 106 "PaleoGame_ELPermian", 107 "PaleoGame_LLPermian", 108 "PaleoGame_MTriassic", 109 "PaleoGame_title", 110 "Rocky", 111 "WhitakerTrebella" 112 ]; 113 114 var illustratorDescriptions = [ 115 "<span><strong>Finish Him!</strong></span><br>My submission for <strong>Bit Bash: Art Bash 2014</strong>, a risograph poster competition.<br><span class='clickForFullImage'>Click for full image</span>", 116 "<strong>George Hufnagl, Sound Designer</strong>.", 117 "<span>Another piece made for the educational game, <strong>Investigation Extinction</strong>, illustrating the Permian period in Earth's history.</span><br>The scene is of an ancient lake that used to exist in Southern Tanzania. An extinct species of dicynodonts, ancient human ancestors, are foraging in the foreground.", 118 "<span>Another piece made for the educational game, <strong>Investigation Extinction</strong>, illustrating the Permian period in Earth's history.</span><br>The scene is of an ancient flood plain that used to exist in Southern Tanzania. In the foreground, the long since extinct species of dicynodonts, <strong>diictodon</strong>, are in conflict over a burrow.", 119 "<span>A piece made for the educational game, <strong>Investigation Extinction</strong>, illustrating the Middle Triassic period of Earth's history.</span><br>The scene is of an ancient pond that used to exist in Southern Tanzania. A family of Asilisaurus, an early species of dinosaur, is eyeing a family of Stenaulorhynchus Stockleyi from across the water.", 120 "<strong>Investigation Extinction</strong>'s title illustration.", 121 "<strong>Rocky in a Blanket</strong><br><span class='clickForFullImage'>Click for full image</span>", 122 "<strong>Whitaker Trebella, Game Developer</strong>" 123 ]; 124 125 var illustratorImgsOrder = [4, 1, 2, 7, 3, 5, 6, 0]; 126 var illustratorSqrPieces = []; 127 128 var illustratorElement = $("#portfolio-illustrator .portfolio-main"); 129 130 for (var i=0; i<illustratorImgs.length/2; i++){ 131 var row = $("<div>", {class:"row"}); 132 illustratorElement.append(row); 133 } 134 var illustratorRows = $("#portfolio-illustrator .row"); 135 console.log(illustratorRows); 136 137 for (var i=0; i<illustratorImgs.length; i++){ 138 var whichImg = illustratorImgsOrder[i]; 139 var newFigure = $("<a>", {class:"portfolio-item", href:"#", id:illustratorImgs[whichImg]}); 140 newFigure[0].dataset.orderNum = i; 141 142 illustratorRows[Math.floor(i/2)].appendChild(newFigure[0]); 143 newFigure[0].innerHTML = "<figure><img src='images/illustrator/" + illustratorImgs[whichImg] + ".jpg'><figcaption class='img-caption'>" + illustratorDescriptions[whichImg] + "</figcaption></figure>"; 144 if (illustratorImgs[whichImg].includes("_desktop")){ 145 illustratorSqrPieces.push($("#" + illustratorImgs[whichImg] + " img")); 146 } 147 } 148 149 console.log(illustratorElement[0]); 150 151 $(window).resize(ResizeEvent); 152 function ResizeEvent(){ 153 var w = $(window).width(); 154 if (currentSection != "" && w > 1000 && !$(currentSection + " .portfolio-nav-name").hasClass(".portfolio-nav-nameSlideIn")){ 155 AnimatePortfolioNav(currentSection); 156 } 157 158 //SquareOrUnSquareImgs(); 159 } 160 161 function SquareOrUnSquareImgs(){ 162 if ($(window).width() > 1000 && !illustratorSqrPieces[0].attr("src").includes("_desktop")){ 163 for (var i=0; i<illustratorSqrPieces.length; i++){ 164 var n = illustratorSqrPieces[i].attr("src").indexOf(".jpg"); 165 illustratorSqrPieces[i].attr("src", illustratorSqrPieces[i].attr("src").slice(0, n) + "_desktop.jpg"); 166 } 167 } else if ($(window).width() <= 1000 && illustratorSqrPieces[0].attr("src").includes("_desktop")){ 168 for (var i=0; i<illustratorSqrPieces.length; i++){ 169 var n = illustratorSqrPieces[i].attr("src").indexOf("_desktop"); 170 illustratorSqrPieces[i].attr("src", illustratorSqrPieces[i].attr("src").slice(0, n) + ".jpg"); 171 } 172 } 173 } 174 175 176 //SquareOrUnSquareImgs(); 177 178 179 180
181 ////////////// Lightbox stuff ///////////////////// 182 183 //////// Variables ///////// 184 185 //generic lightbox variables 186 var lightbox = $("#lightbox"); 187 var lightboxLoading = $("#lightbox-loading"); 188 var lightboxCaption = $("#lightbox-caption"); 189 var lightboxArrowButtons = $("#btn-lightbox-left, #btn-lightbox-right"); 190 var lightboxLeft = $("#btn-lightbox-left"); 191 var lightboxRight = $("#btn-lightbox-right"); 192 var currentImg = 0; 193 var currentGallery = []; 194 var currentCaptions = []; 195 196 // Paleo Game variables 197 var paleoGallery = []; 198 var paleoCaptions = [ 199 "Customize your avatar", 200 "Dig up fauna, flora, and mineral specimens", 201 "Prepare fauna specimens for transport", 202 "Record your findings in your journal", 203 "Discuss the discoveries with your academic advisor", 204 "Analyze your data and reconstruct the past" 205 ]; 206 var paleoGalleryButton = $("#btn-paleoGame"); 207 208 // Illustrator variables 209 var illustratorPortItems = $("#portfolio-illustrator .portfolio-item"); 210 var illustratorMain = $("#portfolio-illustrator .portfolio-main"); 211 var illustratorGallery = []; 212 var illustratorCaptions = []; 213 var ic = [ 214 "Finish Him!", 215 "George Hufnagl, Sound Designer", 216 "Dicynodonts of the Late Permian", 217 "Diictodons Argue Over a Burrow", 218 "A Family of Asilisaurus Eyeing Some Dicynodonts", 219 "Investigation Extinction's Title Page", 220 "Rocky in a Blanket", 221 "Whitaker Trebella, Game Developer" 222 ]; 223 224 225 /////// Fill gallery arrays ////////// 226 227 for (var i=0; i<6; i++){ 228 paleoGallery.push("images/gameDeveloper/paleoGame/PaleoGame_" + i + ".jpg"); 229 } 230 231 for (var i=0; i<illustratorImgs.length; i++){ 232 illustratorGallery.push("images/illustrator/" + illustratorImgs[illustratorImgsOrder[i]] + ".jpg"); 233 illustratorGallery[i] = illustratorGallery[i].replace("_desktop", ""); 234 235 illustratorCaptions.push(ic[illustratorImgsOrder[i]]); 236 } 237 238 var paleoGalleryImgElements = []; 239 var illustratorGalleryImgElements = []; 240 241 242 ////// Setting up click events /////// 243 lightboxArrowButtons.on("click", LightboxArrowClick); 244 paleoGalleryButton.on("click", InitializeLightBox); 245 illustratorPortItems.on("click", InitializeLightBox); 246 247 248 249 250 251 252 function ResetLightbox(){ 253 currentImg = 0; 254 SetLightboxImg(0); 255 } 256 ResetLightbox(); 257 258 259 260 function LightboxArrowClick(e, imgClick){ 261 console.log(e.currentTarget); 262 e.stopPropagation(); 263 264 265 TurnElementOnOff(currentGallery[currentImg][0], false); 266 267 268 if (e.currentTarget.id.includes("left") && currentImg > 0){ 269 currentImg--; 270 } 271 272 if ((e.currentTarget.id.includes("right") || imgClick) && currentImg < currentGallery.length - 1){ 273 currentImg++; 274 } 275 276 277 SetLightboxImg(currentImg); 278 279 } 280 281 282 283 function LightboxImgClick(e){ 284 console.log(e.currentTarget); 285 e.stopPropagation(); 286 287 LightboxArrowClick(e, true); 288 } 289 290 291 292 function SetLightboxImg(imgNum){ 293 294 if (currentGallery.length > 0){ 295 296 if (currentGallery[imgNum][0].dataset.isLoaded){ 297 TurnElementOnOff(lightboxLoading[0], false); 298 TurnElementOnOff(currentGallery[imgNum][0], true); 299 } else { 300 TurnElementOnOff(lightboxLoading[0], true); 301 } 302 //lightboxImg.attr("src", currentGallery[imgNum]); 303 lightboxCaption[0].innerHTML = currentCaptions[imgNum]; 304 } 305 306 if ((currentImg > 0 && lightboxLeft.hasClass("hide")) || (currentImg == 0 && !lightboxLeft.hasClass("hide"))) 307 lightboxLeft.toggleClass("hide"); 308 if ((currentImg < currentGallery.length - 1 && lightboxRight.hasClass("hide")) || (currentImg == currentGallery.length - 1 && !lightboxRight.hasClass("hide"))) 309 lightboxRight.toggleClass("hide"); 310 311 } 312 313 314 315 function InitializeLightBox(e){ 316 console.log(e.currentTarget, "initializing"); 317 318 if (e.currentTarget.id == "btn-paleoGame"){ 319 320 if (paleoGalleryImgElements.length == 0){ 321 for(var i=0; i<paleoGallery.length; i++){ 322 CreateGalleryImg(paleoGallery[i], paleoGalleryImgElements); 323 } 324 } 325 326 currentGallery = paleoGalleryImgElements; 327 console.log(currentGallery); 328 currentCaptions = paleoCaptions; 329 330 ResetLightbox(); 331 332 } else if ($.contains(illustratorMain[0], e.currentTarget)){ 333 334 if (illustratorGalleryImgElements.length == 0){ 335 for(var i=0; i<illustratorGallery.length; i++){ 336 CreateGalleryImg(illustratorGallery[i], illustratorGalleryImgElements); 337 } 338 } 339 340 currentGallery = illustratorGalleryImgElements; 341 currentCaptions = illustratorCaptions; 342 343 ResetLightbox(); 344 TurnElementOnOff(currentGallery[currentImg][0], false); 345 currentImg = e.currentTarget.dataset.orderNum; 346 SetLightboxImg(currentImg); 347 } 348 349 lightbox.toggleClass("displayNone"); 350 } 351 352 353 function CreateGalleryImg(whichImg, elementArray){ 354 355 var orderNum = elementArray.length; 356 var newImg = $("<img>", {class: "lightbox-img displayNone", src: whichImg}); 357 newImg[0].dataset.orderNum = orderNum; 358 newImg[0].dataset.isLoaded = 0; 359 newImg.ready(function(){
360 ImgLoaded(elementArray[orderNum]); 361 }); 362 newImg.on("click", LightboxImgClick); 363 364 elementArray.push(newImg); 365 366 lightboxLoading.after(newImg); 367 368 console.log(newImg); 369 } 370 371 function ImgLoaded(imgElement){ 372 imgElement[0].dataset.isLoaded = 1; 373 374 if (currentImg == currentGallery.indexOf(imgElement)){ 375 TurnElementOnOff(lightboxLoading[0], false); 376 TurnElementOnOff(imgElement[0], true); 377 } 378 } 379 380 function TurnElementOnOff(el, turnOn){ 381 if (turnOn){ 382 RemoveClass(el, "displayNone"); 383 } else { 384 AddClass(el, "displayNone"); 385 } 386 } 387 388 function XOutLightboxClick(e){ 389 console.log(e.currentTarget); 390 391 if (e.currentTarget.id == "lightbox"){ 392 lightbox.toggleClass("displayNone"); 393 TurnElementOnOff(currentGallery[currentImg][0], false); 394 } 395 } 396 397 398 399 400 // Generic functions 401 402 function AddClass(el, c){ 403 if (!el.className.includes(c)){ 404 el.className = el.className + " " + c; 405 } 406 } 407 408 function RemoveClass(el, c){ 409 if (el.className.includes(c)){ 410 el.className = el.className.replace(" " + c, ""); 411 } 412 } 413 414 415})();
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.