1/* 2 Name: Impose 3 Description: Responsive HTML5 Template 4 Version: 1.0 5 Author: pixelwars 6*/ 7 8(function($) { "use strict"; 9 10 /* global variables */ 11 var $masonry_container; 12 13 /* DOCUMENT READY */ 14 $(function() { 15 16 17 // ------------------------------ 18 // HOME LINK BOXES 19 if($(".intro figure").length) { 20 $(".intro figure").eq(0).before('<div class="figure-boxes"></div>'); 21 $('.intro figure').each(function(index, element) { 22 $(this).wrap('<div class="figure-box"></div>'); 23 $(this).find('a').css('background-image', 'url(' + $(this).find('img').attr('src') + ')'); 24 $(this).append('<a class="figure-link" href="' + $(this).find('a').attr('href') + '"></a>' ); 25 }); 26 $('.intro .figure-box').appendTo('.figure-boxes'); 27 } 28 // ------------------------------ 29 30 31 // ------------------------------ 32 // MOBILE MENU 33 var $menu = $('.nav-menu'); 34 35 // add classes 36 $menu.find('li').each(function(index, element) { 37 if($(this).children('ul').length) { 38 $(this).addClass('has-submenu'); 39 $(this).find('>a').after('<span class="submenu-toggle"></span>'); 40 } 41 }); 42 43 var $submenuTrigger = $('.has-submenu > .submenu-toggle'); 44 // submenu link click event 45 $submenuTrigger.on( "click", function() { 46 $(this).parent().toggleClass('active'); 47 $(this).siblings('ul').toggleClass('active'); 48 }); 49 // ------------------------------ 50 51 52 53 // ------------------------------ 54 // INTRO ROTATING WORDS 55 56 var $intro_h = $('.intro h3'); 57 $intro_h.append('<span class="words-wrapper"></span>'); 58 $intro_h.find('strong').appendTo('.words-wrapper'); 59 $intro_h.find('strong').eq(0).addClass('is-visible'); 60 var rotate_classes = 'rotate-title ' + $('.intro').data('animation'); 61 $intro_h.addClass(rotate_classes); 62 63 //set animation timing 64 var animationDelay = 2500, 65 //loading bar effect 66 barAnimationDelay = 3800, 67 barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file 68 //letters effect 69 lettersDelay = 50, 70 //type effect 71 typeLettersDelay = 150, 72 selectionDuration = 500, 73 typeAnimationDelay = selectionDuration + 800, 74 //clip effect 75 revealDuration = 600, 76 revealAnimationDelay = 1500; 77 78 initHeadline(); 79 80 81 function initHeadline() { 82 //insert <i> element for each letter of a changing word 83 singleLetters($('.rotate-title.letters').find('strong')); 84 //initialise headline animation 85 animateHeadline($('.intro h3')); 86 } 87 88 function singleLetters($words) { 89 $words.each(function(){ 90 var word = $(this),
91 letters = word.text().split(''), 92 selected = word.hasClass('is-visible'); 93 for (var i in letters) { 94 if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>'; 95 letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>'; 96 } 97 var newLetters = letters.join(''); 98 word.html(newLetters).css('opacity', 1); 99 }); 100 } 101 102 function animateHeadline($headlines) { 103 var duration = animationDelay; 104 $headlines.each(function(){ 105 var headline = $(this); 106 107 if(headline.hasClass('loading-bar')) { 108 duration = barAnimationDelay; 109 setTimeout(function(){ headline.find('.words-wrapper').addClass('is-loading') }, barWaiting); 110 } else if (headline.hasClass('clip')){ 111 var spanWrapper = headline.find('.words-wrapper'), 112 newWidth = spanWrapper.width() + 10 113 spanWrapper.css('width', newWidth); 114 } else if (!headline.hasClass('type') ) { 115 //assign to .words-wrapper the width of its longest word 116 var words = headline.find('.words-wrapper strong'), 117 width = 0; 118 words.each(function(){ 119 var wordWidth = $(this).width(); 120 if (wordWidth > width) width = wordWidth; 121 }); 122 headline.find('.words-wrapper').css('width', width); 123 }; 124 125 //trigger animation 126 setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration); 127 }); 128 } 129 130 function hideWord($word) { 131 var nextWord = takeNext($word); 132 133 if($word.parents('.rotate-title').hasClass('type')) { 134 var parentSpan = $word.parent('.words-wrapper'); 135 parentSpan.addClass('selected').removeClass('waiting'); 136 setTimeout(function(){ 137 parentSpan.removeClass('selected'); 138 $word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out'); 139 }, selectionDuration); 140 setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay); 141 142 } else if($word.parents('.rotate-title').hasClass('letters')) { 143 var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false; 144 hideLetter($word.find('i').eq(0), $word, bool, lettersDelay); 145 showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay); 146 147 } else if($word.parents('.rotate-title').hasClass('clip')) { 148 $word.parents('.words-wrapper').animate({ width : '2px' }, revealDuration, function(){ 149 switchWord($word, nextWord); 150 showWord(nextWord); 151 }); 152 153 } else if ($word.parents('.rotate-title').hasClass('loading-bar')){ 154 $word.parents('.words-wrapper').removeClass('is-loading'); 155 switchWord($word, nextWord); 156 setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay); 157 setTimeout(function(){ $word.parents('.words-wrapper').addClass('is-loading') }, barWaiting); 158 159 } else { 160 switchWord($word, nextWord); 161 setTimeout(function(){ hideWord(nextWord) }, animationDelay); 162 } 163 } 164 165 function showWord($word, $duration) { 166 if($word.parents('.rotate-title').hasClass('type')) { 167 showLetter($word.find('i').eq(0), $word, false, $duration); 168 $word.addClass('is-visible').removeClass('is-hidden'); 169 170 } else if($word.parents('.rotate-title').hasClass('clip')) { 171 $word.parents('.words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 172 setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 173 }); 174 } 175 } 176 177 function hideLetter($letter, $word, $bool, $duration) { 178 $letter.removeClass('in').addClass('out'); 179 180 if(!$letter.is(':last-child')) { 181 setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration); 182 } else if($bool) { 183 setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay); 184 } 185 186 if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) { 187 var nextWord = takeNext($word); 188 switchWord($word, nextWord); 189 } 190 } 191 192 function showLetter($letter, $word, $bool, $duration) { 193 $letter.addClass('in').removeClass('out'); 194 195 if(!$letter.is(':last-child')) { 196 setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 197 } else { 198 if($word.parents('.rotate-title').hasClass('type')) { setTimeout(function(){ $word.parents('.words-wrapper').addClass('waiting'); }, 200);} 199 if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) } 200 } 201 } 202 203 function takeNext($word) { 204 return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0); 205 } 206 207 function takePrev($word) { 208 return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last(
208); 209 } 210 211 function switchWord($oldWord, $newWord) { 212 $oldWord.removeClass('is-visible').addClass('is-hidden'); 213 $newWord.removeClass('is-hidden').addClass('is-visible'); 214 } 215 // ------------------------------ 216 217 218 219 // ------------------------------ 220 // BLOG MINIMAL LAYOUT 221 blogMinLayout(); 222 setPostTypes('.img-vertical'); 223 setPostTypes('.img-square'); 224 setPostTypes('.img-horizontal'); 225 226 function blogMinLayout() { 227 228 $('.blog-irregular img').each(function(index, element) { 229 var $img = $(this); 230 var ratio = $img.attr('width') / $img.attr('height'); 231 var ratio_class = ""; 232 233 if((ratio < 1.33) & (ratio > 0.8)) { 234 ratio_class = 'img-square' 235 } else if(ratio < 0.8) { 236 ratio_class = 'img-vertical' 237 } else if(ratio > 1.33) { 238 ratio_class = 'img-horizontal' 239 } 240 241 $img.parents('.hentry').addClass(ratio_class); 242 }); 243 } 244 245 function setPostTypes(el) { 246 $(el).each(function(index, element) { 247 var mod = index % 2; 248 $(this).addClass('type-' + mod); 249 }); 250 } 251 // ------------------------------ 252 253 254 255 // ------------------------------ 256 // HEADER SMALL MENU BORDER FIX 257 if(!($('.header-small .post-slider, .header-small .featured-top, .header-small .blog-bold, .header-small .blog-waterfall, .blog-creative.first-full').length)) { 258 $('html').addClass('has-menu-border'); 259 } 260 // ------------------------------ 261 262 263 // ------------------------------ 264 // Fitvids.js : fluid width video embeds 265 $("body").fitVids({ customSelector: 'iframe[src*="facebook.com/plugins/video"], iframe[src*="facebook.com/video/embed"]' }); 266 // preserve 16:9 aspect ratio for soundcloud embeds 267 $('iframe[src*="soundcloud.com"]').wrap('<div class="fluid-audio fluid-width-video-wrapper"></div>'); 268 $('.fluid-width-video-wrapper').wrap('<div class="media-wrap"></div>'); 269 // ------------------------------ 270 271 272 // ------------------------------ 273 // FluidBox : Zoomable Images 274 $('.entry-content > p a, .wp-caption a').each(function(index, element) { 275 if($(this).attr('href').match(/\.(jpeg|jpg|gif|png)$/) != null) { 276 $(this).fluidbox(); 277 } 278 }); 279 // ------------------------------ 280 281 282 // ------------------------------ 283 // GALLERY COLLAGE LAYOUT 284 collage(); 285 286 var resizeTimer = null; 287 $(window).bind('resize', function() { 288 289 // hide all the images until we resize them 290 // set the element you are scaling i.e. the first child nodes of ```.Collage``` to opacity 0 291 $('.gallery figure').css("opacity", 0); 292 // set a timer to re-apply the plugin 293 if (resizeTimer) clearTimeout(resizeTimer); 294 resizeTimer = setTimeout(collage, 1200); 295 collage(); 296 }); 297 // ------------------------------ 298 299 300 // ------------------------------ 301 // LIGHTBOX - applied to gallery post format 302 if($(".lightbox, .gallery.link-to-file").length) { 303 $('.media-box, .gallery.link-to-file').each(function(index, element) { 304 var $media_box = $(this); 305 $media_box.magnificPopup({ 306 delegate: '.lightbox, .gallery-item a', 307 type: 'image', 308 image: { 309 markup: '<div class="mfp-figure">'+ 310 '<div class="mfp-close"></div>'+ 311 '<div class="mfp-img"></div>'+ 312 '</div>' + 313 '<div class="mfp-bottom-bar">'+ 314 '<div class="mfp-title"></div>'+ 315 '<div class="mfp-counter"></div>'+ 316 '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button 317 318 cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to null to disable zoom out cursor. 319 verticalFit: true, // Fits image in area vertically 320 tError: '<a href="%url%">The image</a> could not be loaded.' // Error message 321 }, 322 gallery: { 323 enabled:true, 324 tCounter: '<span class="mfp-counter">%curr% / %total%</span>' // markup of counter 325 }, 326 iframe: { 327 markup: '<div class="mfp-iframe-scaler">'+ 328 '<div class="mfp-close"></div>'+ 329 '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ 330 '<div class="mfp-title">Some caption</div>'+ 331 '</div>' 332 }, 333 mainClass: 'mfp-zoom-in', 334 tLoading: '', 335 removalDelay: 300, //delay removal by X to allow out-animation 336 callbacks: { 337 markupParse: function(template, values, item) { 338 var title = ""; 339 if(item.el.parents('.gallery-item').length) { 340 title = item.el.parents('.gallery-item').find('.gallery-caption').text(); 341 } else { 342 title = item.el.attr('title') == undefined ? "" : item.el.attr('title'); 343 } 344 //return title; 345 values.title = title; 346 }, 347 imageLoadComplete: function() { 348 var self = this; 349 setTimeout(function() { 350 self.wrap.addClass('mfp-image-loaded'); 351 }, 16); 352 }, 353 close: function() { 354 this.wrap.removeClass('mfp-image-loaded'); 355 }, 356 beforeAppend: function() { 357 var self = this; 358 this.content.find('iframe').on('load', function() { 359 setTimeout(function() { 360 self.wrap.addClass('mfp-image-loaded'); 361 }, 16); 362 });
363 } 364 }, 365 closeBtnInside: false, 366 closeOnContentClick: true, 367 midClick: true 368 }); 369 }); 370 } 371 // ------------------------------ 372 373 374 375 376 377 // ------------------------------ 378 // OWL-CAROUSEL 379 var owl = $('.owl-carousel'); 380 if(owl.length) { 381 owl.each(function(index, element) { 382 //wait for images 383 $(element).imagesLoaded( function() { 384 385 //remove loading 386 $(element).find('.loading').remove(); 387 388 var items = $(element).data('items'); 389 if (items === 1) { 390 $(element).addClass('single-slide'); 391 } 392 else if (items === 2) { 393 $(element).addClass('two-slides'); 394 } 395 $(element).owlCarousel({ 396 loop: $(element).data('loop'), 397 center : $(element).data('center'), 398 mouseDrag : $(element).data('mouse-drag'), 399 dots : $(element).data('dots'), 400 nav : $(element).data('nav'), 401 autoplay : $(element).data('autoplay'), 402 autoplaySpeed : $(element).data('autoplay-speed'), 403 autoplayTimeout : $(element).data('autoplay-timeout'), 404 autoplayHoverPause :true, 405 navText : [], 406 autoHeight: $(element).hasClass('post-slider') ? false : true, 407 responsive:{ 408 0: { items: 1 }, 409 768: { items: items <= 2 ? items : 2 }, 410 1200: { items: items <= 3 ? items : 3 }, 411 1600: { items: items } 412 }, 413 onInitialized : animate_blog 414 }); 415 }); 416 }); 417 } 418 // ------------------------------ 419 420 421 422 423 // ------------------------------ 424 // FIXED NAV MENU 425 var previousScroll = 0, // previous scroll position 426 menuOffset = 54, // height of menu (once scroll passed it, menu is hidden) 427 detachPoint = 650, // point of detach (after scroll passed it, menu is fixed) 428 hideShowOffset = 6; // scrolling value after which triggers hide/show menu 429 var $navMenu = $('.site-navigation'), 430 $html = $('html'); 431 432 // on scroll hide/show menu 433 $(window).scroll(function() { 434 435 if (!$html.hasClass('menu-expanded')) { 436 var currentScroll = $(this).scrollTop(), // gets current scroll position 437 scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling 438 // if scrolled past menu 439 if (currentScroll > menuOffset) { 440 // if scrolled past detach point add class to fix menu 441 if (currentScroll > detachPoint) { 442 if (!$html.hasClass('menu-detached')) 443 $html.addClass('menu-detached'); 444 } 445 // if scrolling faster than hideShowOffset hide/show menu 446 if (scrollDifference >= hideShowOffset) { 447 if (currentScroll > previousScroll) { 448 // scrolling down; hide menu 449 if (!$html.hasClass('menu-invisible')) 450 $html.addClass('menu-invisible'); 451 } else { 452 // scrolling up; show menu 453 if ($html.hasClass('menu-invisible')) 454 $html.removeClass('menu-invisible'); 455 } 456 } 457 } else { 458 // only remove âdetachedâ class if user is at the top of document (menu jump fix) 459 if (currentScroll <= 0){ 460 $html.removeClass('menu-detached').removeClass('menu-invisible'); 461 } 462 } 463 // if user is at the bottom of document show menu 464 if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 465 $html.removeClass('menu-invisible'); 466 } 467 // replace previous scroll position with new one 468 previousScroll = currentScroll; 469 } 470 471 })// window.scroll 472 473 474 // shows/hides navigationâs popover if class "expanded" 475 $('.search-toggle').on('click', function(event) { 476 showHideNav(); 477 event.preventDefault(); 478 }); 479 480 481 // checks if navigationâs popover is shown 482 function showHideNav() { 483 if ($html.hasClass('menu-expanded')) { 484 hideNav(); 485 } else { 486 showNav(); 487 } 488 } 489 // shows the navigationâs popover 490 function showNav() { 491 setTimeout(function() { $('.search-container input[type="search"]').trigger('focus'); },300); 492 $html.removeClass('menu-invisible').addClass('menu-expanded'); 493 window.setTimeout(function(){$('body').addClass('no_scroll');}, 200); // Firefox hack. Hides scrollbar as soon as menu animation is done 494 } 495 // hides the navigationâs popover 496 function hideNav() { 497 window.setTimeout(function(){$('body').removeClass('no_scroll');}, 10); // allow animations to start before removing class (Firefox) 498 $html.removeClass('menu-expanded'); 499 } 500 // keyboard shortcuts 501 $('body').keydown(function(e) { 502 // if ESC show/hide menu 503 if (e.keyCode === 27) { 504 showHideNav(); 505 e.preventDefault(); 506 } 507 }); 508 // ------------------------------ 509 510 511 512 // ------------------------------ 513 // HEADER MOBILE MENU TOGGLE 514 $('.menu-toggle').on( "click", function(e) { 515 e.stopPropagation(); 516 $('html').toggleClass('is-menu-toggled-on'); 517 }); 518 // ------------------------------ 519 520 521 522 523 // ------------------------------ 524 /* SOCIAL FEED WIDGET */ 525 var socialFeed = $('.social-feed'); 526 if(socialFeed.length) { 527 socialFeed.each(function() { 528 $(this).socialstream({ 529 socialnetwork: $(this).data("social-network"), 530 limit: $(this).data("limit"), 531 username: $(this).data("username") 532 }); 533 }); 534 } 535 // ------------------------------ 536 537 538 539 540 // ------------------------------ 541 // Selection Sharer 542 if($('.is-selection-shareable').length) { 543 $('.single-post .entry-content p, .single-post .entry-content blockquote').selectionSharer(); 544 } 545 // ------------------------------ 546 547 548 549 550 // ------------------------------ 551 // remove click delay on touch devices 552 FastClick.attach(document.body); 553 // ------------------------------ 554 555 556 557 558 // ------------------------------ 559 // FORM VALIDATION 560 // comment form validation fix 561 $('#commentform, .mc4wp-form form').addClass('validate-form'); 562 $('#commentform').find('input,textarea').each(function(index, element) { 563 if($(this).attr('aria-required') === "true") { 564 $(this).addClass('required'); 565 } 566 if($(this).attr('name') == "email") { 567 $(this).addClass('email'); 568 } 569 }); 570 571 // validate form 572 if($('.validate-form').length) { 573 $('.validate-form').each(function() {
574 $(this).validate(); 575 }); 576 } 577 // ------------------------------ 578 579 580 581 582 // ------------------------------ 583 // MASONRY - ISOTOPE 584 $masonry_container = $('.masonry'); 585 if($masonry_container.length) { 586 $masonry_container.imagesLoaded(function() { 587 $masonry_container.width($masonry_container.parent().width()); 588 // initialize isotope 589 $masonry_container.isotope({ 590 itemSelector : '.hentry', 591 layoutMode : $masonry_container.data('layout'), 592 transitionDuration: 0 593 }); 594 595 setMasonry(); 596 setTimeout(function() { $masonry_container.isotope(); }, 20); 597 $(window).resize(function() { 598 // hack : make container width fixed 599 $masonry_container.width($masonry_container.parent().width()); 600 setMasonry(); 601 }); 602 }); 603 } 604 // ------------------------------ 605 606 607 608 609 }); 610 // DOCUMENT READY 611 612 613 614 // WINDOW ONLOAD 615 window.onload = function() { 616 617 /* GALLERY COLLAGE LAYOUT */ 618 collage(); 619 620 // ON SCROLL ANIMATIONS 621 animate_blog(); 622 623 }; 624 // WINDOW ONLOAD 625 626 627 628 629 // ------------------------------ 630 // ------------------------------ 631 // FUNCTIONS 632 // ------------------------------ 633 // ------------------------------ 634 635 636 637 // ------------------------------ 638 // ON SCROLL ANIMATIONS FOR BLOG 639 function animate_blog() { 640 641 var items = $('.blog-animated .blog-stream .hentry'); 642 var items_in_viewport = $('.blog-animated .blog-stream .hentry:in-viewport'); 643 var effect = $('html').data('effect'); 644 items.addClass('animated out'); 645 items_in_viewport.removeClass('animated out'); 646 647 items.each(function(index, element) { 648 var el = $(element); 649 el.waypoint(function() { 650 651 el.addClass(effect).removeClass('out'); 652 653 }, { offset: '75%' }); 654 }); 655 656 } 657 // ------------------------------ 658 659 660 661 // ------------------------------ 662 // COLLAGE 663 function collage() { 664 var collage = $('.gallery'); 665 if(collage.length) { 666 667 collage.each(function(index, el) { 668 669 // wait for images to be loaded 670 $(el).imagesLoaded(function() { 671 672 $(el).addClass('collage-loaded'); 673 $(el).collagePlus({ 674 675 'targetHeight' : 320, 676 'effect' : 'effect-2', 677 'allowPartialLastRow' : false 678 679 }); //collagePlus() 680 681 }); //imagesLoaded() 682 683 }); //each 684 } 685 } 686 // ------------------------------ 687 688 689 // ------------------------------ 690 // MASONRY LAYOUT : changes the number of masonry columns based on the current container's width 691 function setMasonry() { 692 693 var itemW = $masonry_container.data('item-width'); 694 var mobileItemW = $masonry_container.data('mobile-item-width'); 695 var containerW = $masonry_container.width(); 696 itemW = containerW > 680 ? itemW : mobileItemW; // old :548 697 var items = $masonry_container.children('.hentry'); 698 var columns = Math.round(containerW/itemW); 699 700 if(containerW > 680 & containerW < 940) { 701 $masonry_container.removeClass('desktop-view').addClass('tablet-view'); 702 } else if(containerW > 940) { 703 $masonry_container.addClass('desktop-view'); 704 } else { 705 $masonry_container.removeClass('desktop-view tablet-view') 706 } 707 708 // set the widths (%) for each of item 709 items.each(function(index, element) { 710 var multiplier = $(this).hasClass('x2') && columns > 1 ? 2 : 1; 711 var itemRealWidth = (Math.floor( containerW / columns ) * 100 / containerW) * multiplier ; 712 if($masonry_container.hasClass('first-full') && index == 0) { 713 itemRealWidth = 100; 714 } 715 $(this).css( 'width', itemRealWidth + '%' ); 716 }); 717 718 var columnWidth = Math.floor( containerW / columns ); 719 $masonry_container.isotope( 'option', { masonry: { columnWidth: columnWidth } } ); 720 } 721 // ------------------------------ 722 723 724 725})(jQuery);
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.