1/**************************************************************************************************************************************** 2 3 S2F Base theme JS file 4 5 1. General 6 2. Modals 7 3. Sliders 8 4. Height Match 9 5. Maps 10 6. Load more news 11 7. Custom jQuery 12 13****************************************************************************************************************************************/ 14 15 16// set up $ 17( function( $ ) { 18 19 20 21/*************************************************************************************************************************************** 22 23 1. General 24 25 - variables, menu, tooltip functions, smooth scrolling, responsive tables 26 27***************************************************************************************************************************************/ 28 29 30 /*************************************************************************************************************************** 31 *************************************************************************************************************** Variables */ 32 33 var body = $( 'body' ), 34 _window = $( window ); 35 36 37 38 /*************************************************************************************************************************** 39 **************************************************************************************************************** Tooltips */ 40 41 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) !== true ) { 42 43 $( ".icon img" ).tooltip({ 44 show: { 45 effect: 'fadeIn' 46 }, 47 track: true, 48 open: function (event, ui) { 49 setTimeout(function () { 50 $(ui.tooltip).hide(); 51 }, 2000); 52 }} 53 ); 54 55 } 56 57 58 /*************************************************************************************************************************** 59 **************************************************************************************************************** Fancybox */ 60 61 $('a.fancybox').each(function() { 62 $(this).attr('data-fancybox', ''); 63 }); 64 65 66 /*************************************************************************************************************************** 67 ********************************************************************************************************** Language Links */ 68 69 $('.icon.language-links').on('click', function() { 70 $('.language-links-box').slideDown(200); 71 }); 72 73 $('.close-links').on('click', function() { 74 $('.language-links-box').slideUp(150); 75 }); 76 77 $(document).on('mouseup', function(e) { 78 if( $('.language-links-box').is(':visible') === true ) { 79 var container = $('.language-links-box'); 80 if (!container.is(e.target) && container.has(e.target).length === 0) { 81 $('.language-links-box').slideUp(200); 82 } 83 } 84 85 }); 86 87 88 89 /*************************************************************************************************************************** 90 ******************************************************************************************************* Location Dropdown */ 91 92 $('.location-box-button').on('click', function() { 93 $('.location-box').slideDown(300); 94 $('.location-box-cover').fadeIn(300); 95 }); 96 97 $('.close-location-box').on('click', function() { 98 $('.location-box').slideUp(200); 99 $('.location-box-cover').fadeOut(200); 100 }); 101 102 $(document).on('mouseup', function(e) { 103 if( $('.location-box').is(':visible') === true ) { 104 var container = $('.location-box'); 105 if (!container.is(e.target) && container.has(e.target).length === 0) { 106 $('.location-box').slideUp(200); 107 $('.location-box-cover').fadeOut(200); 108 } 109 } 110 111 }); 112 113 114 /*************************************************************************************************************************** 115 ******************************************************************************************************************** Menu */ 116 117 118 // show/hide menu 119 $('.menu-icon').on('click', function() { 120 if( $('.menu').is(':visible') === true ) { 121 $('.menu').slideUp(200); 122 $('.menu-icon').removeClass('active'); 123 } else { 124 $('.menu').slideDown(350); 125 $('.menu-icon').addClass('active'); 126 } 127 }); 128 129 130 // menu 131 $('.menu li').hover( function(){ 132 $(this).children('ul').hide(); 133 $(this).children('ul').slideDown(275); 134 }, function(){ 135 $(this).children('ul').hide(); 136 }); 137 138 139 // sticky menu 140 $(function() { 141 if( _window.width() > 700 && $('#menu').is(':visible') ) { 142 var sticky_navigation_offset_top = $('#menu').offset().top; 143 var sticky_navigation = function(){ 144 var scroll_top = _window.scrollTop(); 145 if (scroll_top > sticky_navigation_offset_top) { 146 $('#menu').addClass('sticky'); 147 } else { 148 $('#menu').removeClass('sticky'); 149 } 150 }; 151 sticky_navigation(); 152 _window.scroll(function() { 153 sticky_navigation(); 154 });
155 } 156 }); 157 158 159 160 /*************************************************************************************************************************** 161 *********************************************************************************************************** Smooth Scroll */ 162 163 // stop hash link jump 164 $( 'a[href="#"]' ).click( function(e) { 165 e.preventDefault(); 166 }); 167 168 169 // smooth scroll to anchor 170 171 var $root = $('html, body'); 172 $('a[href*=\\#]:not([href=\\#])').click(function() { 173 var href = $.attr(this, 'href'); 174 var distance = $(href).offset().top; 175 $root.animate({ 176 scrollTop: distance-50 177 }, 1000, function () { 178 window.location.hash = href; 179 }); 180 return false; 181 }); 182 183 184 185 // smooth scroll to anchor on load 186 $(document).ready(function() { 187 var $root = $('html, body'); 188 var ancloc = window.location.hash; 189 if( ancloc ) { 190 191 var distance = $(ancloc).offset().top; 192 event.preventDefault(); 193 $root.animate({ 194 scrollTop: distance-50 195 }, 1000); 196 return false; 197 198 } 199 }); 200 201 202 203 /*************************************************************************************************************************** 204 ****************************************************************************************************************** Tables */ 205 206 // responsive tables 207 $('table').each(function() { 208 $(this).wrap( "<div class='scroll-table'></div>" ); 209 }); 210 211 212 213 214 215/*************************************************************************************************************************************** 216 217 2. Modals 218 219***************************************************************************************************************************************/ 220 221 222 /**************************************************************************************************************************** 223 *********************************************************************************************** Show modal Links in footer */ 224 225 _window.on('load', function() { 226 // show quick links 227 setTimeout(function() { 228 229 var count = 0; 230 $('.quick-links .cta').each(function() { 231 var tab = $(this); 232 setTimeout(function() { 233 tab.addClass('loaded'); 234 }, count*225); 235 236 count = count + 1; 237 238 }); 239 240 }, 1000); 241 }); 242 243 244 /**************************************************************************************************************************** 245 *************************************************************************************************************** Open Modal */ 246 247 $('.modal-button').on('click', function() { 248 var rel = $(this).attr('rel'); 249 var height = _window.height(); 250 $('#'+rel).css('height', height).addClass('active').fadeIn(200); 251 }); 252 253 254 /**************************************************************************************************************************** 255 ************************************************************************************************************** Close Modal */ 256 257 // function for closing modal 258 function closeModal() { 259 if( $('.modal').hasClass('active') ) { 260 $('.modal').removeClass('active').fadeOut(150); 261 } 262 } 263 264 // close modal when clicking close button 265 $('.close-modal, .close').click(function() { 266 closeModal(); 267 }); 268 269 // close modal if clicking outside the modal 270 $('.modal').click(function(e) { 271 var children = $('.modal').find('*'); 272 if( !$(e.target).is(children) ) { 273 closeModal(); 274 } 275 }); 276 277 278 279 280 281/*************************************************************************************************************************************** 282 283 3. Sliders 284 285 - Slick slider: http://kenwheeler.github.io/slick/ 286 287***************************************************************************************************************************************/ 288 289 290 /*************************************************************************************************************************** 291 ************************************************************************************************************* Fade Slider */ 292 293 function slider() { 294 295 // init slider 296 $('.slider .slide, .side-slider .slide').each(function() { 297 $(this).addClass('show-slide'); 298 }); 299 300 $('.slider').slick({
301 arrows: false, 302 dots: true, 303 fade: true, 304 infinite: true, 305 speed: 1000, 306 autoplay: true, 307 autoplaySpeed: 4500, 308 slide: '.slide', 309 responsive: [ 310 { 311 breakpoint: 600, 312 settings: { 313 arrows: false, 314 fade: false 315 } 316 }, 317 318 ] 319 }); 320 321 $('.side-slider').slick({ 322 arrows: false, 323 dots: true, 324 fade: false, 325 infinite: true, 326 speed: 500, 327 autoplay: true, 328 autoplaySpeed: 3000, 329 slide: '.slide', 330 }); 331 332 } 333 334 $('.swipe-slider').slick({ 335 arrows: true, 336 dots: false, 337 infinite: true, 338 speed: 500, 339 autoplay: false, 340 slide: '.slide', 341 slidesToShow: 6, 342 slidesToScroll: 2 343 }); 344 345 $('.app-slider').slick({ 346 arrows: true, 347 dots: false, 348 infinite: false, 349 speed: 500, 350 autoplay: false, 351 slide: '.slide', 352 slidesToShow: 5, 353 slidesToScroll: 5, 354 responsive: [ 355 { 356 breakpoint: 1030, 357 settings: { 358 slidesToShow: 4, 359 slidesToScroll: 4, 360 speed: 250, 361 } 362 }, 363 { 364 breakpoint: 750, 365 settings: { 366 slidesToShow: 3, 367 slidesToScroll: 3, 368 } 369 }, 370 { 371 breakpoint: 500, 372 settings: { 373 slidesToShow: 3, 374 centerMode: true, 375 centerPadding: '20px', 376 arrows: false, 377 slidesToScroll: 1, 378 speed: 175, 379 } 380 }, 381 382 ] 383 }); 384 385 386 /*************************************************************************************************************************** 387 ************************************************************************************************************ Init Sliders */ 388 389 $(document).ready(function() { 390 // set up sliders 391 if( $('.slider') ) { 392 slider(); 393 } 394 }); 395 396 397 398 399/*************************************************************************************************************************************** 400 401 4. Height Match 402 403 - Match Height: https://github.com/liabru/jquery-match-height 404 405***************************************************************************************************************************************/ 406 407 _window.on('load', function() { 408 409 $('#list > li ul').matchHeight({ byRow: true }); 410 $('.news-box').matchHeight({ byRow: true }); 411 412 $('.exhibitions-box *').waitForImages(function() { 413 $.fn.matchHeight._update({ byRow: false }); 414 }); 415 416 }); 417 418 $.fn.matchHeight._update({ byRow: false }); 419 420 // height match fix 421 // get all elements that should have been height matched that don't have a height, give them a height equal to themselves 422 $.fn.matchHeight._afterUpdate = function() { 423 $('[data-mh]:not([style*="height"])').each(function() { 424 var element = $(this); 425 element.css('height', element.outerHeight()); 426 }); 427 }; 428 429 430 431 432 433/*************************************************************************************************************************************** 434 435 5. Maps 436 437 - Gmaps JS: https://hpneo.github.io/gmaps/ 438 439***************************************************************************************************************************************/ 440 441 442 /*************************************************************************************************************************** 443 ********************************************************************************************************* Cotact Page Map */ 444
445 if( $('body').hasClass('page-template-contact') ) { 446 447 var map = new GMaps({ 448 div: '.map', 449 lat: 52.5043642, 450 lng: -1.8583093, 451 scrollwheel: false 452 }); 453 454 map.addMarker({ 455 lat: 52.5043642, 456 lng: -1.8583093, 457 icon: directory + '/images/marker.png', 458 }); 459 460 } 461 462 if( $('.custom-map').length > 0 ) { 463 464 var customMap = $('.custom-map'); 465 var lat = customMap.data('lat'); 466 var lng = customMap.data('lng'); 467 468 var map = new GMaps({ 469 div: '.custom-map', 470 lat: lat, 471 lng: lng, 472 scrollwheel: false, 473 zoom: 11 474 }); 475 476 map.addMarker({ 477 lat: lat, 478 lng: lng, 479 icon: directory + '/images/marker.png', 480 }); 481 482 var styles = [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#b5cbe4"}]},{"featureType":"landscape","stylers":[{"color":"#efefef"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#83a5b0"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#bdcdd3"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e3eed3"}]},{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"road"},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},{"featureType":"road","stylers":[{"lightness":20}]}]; 483 484 map.addStyle({ 485 styledMapName:"Styled Map", 486 styles: styles, 487 mapTypeId: "map_style" 488 }); 489 490 map.setStyle("map_style"); 491 492 493 494 } 495 496 if( $('.multi-map').length > 0 && $('body').hasClass('page-template-international-contacts-v2') ) { 497 498 var map = new GMaps({ 499 div: '.multi-map', 500 lat: 40, 501 lng: 10, 502 scrollwheel: false, 503 zoom: 2 504 }); 505 506 var i; 507 for (i = 0; i < markers.length; ++i) { 508 509 var maplat = markers[i][0]; 510 var maplng = markers[i][1]; 511 var link = markers[i][2]; 512 var title = markers[i][3]; 513 var content = markers[i][4]; 514 515 map.addMarker({ 516 lat: maplat, 517 lng: maplng, 518 icon: directory + '/images/marker-new.png', 519 title: title, 520 infoWindow: { 521 content: '<h2>'+ title +'</h2>'+ 522 '<div class="info-window-content">'+ content +'</div>'+ 523 '<a href="'+ link +'" class="button">View Details</a>' 524 } 525 }); 526 527 528 } 529 530 var styles=[{featureType:"all",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"administrative",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"administrative.country",elementType:"geometry.stroke",stylers:[{visibility:"on"},{color:"#ffffff"},{weight:.8}]},{featureType:"administrative.province",elementType:"geometry.fill",stylers:[{saturation:"97"}]},{featureType:"administrative.province",elementType:"geometry.stroke",stylers:[{visibility:"off"}]},{featureType:"landscape",elementType:"all",stylers:[{color:"#d7d7d7"}]},{featureType:"poi",elementType:"all",stylers:[{color:"#d7d7d7"}]},{featureType:"road",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"water",elementType:"all",stylers:[{color:"#FFFFFF"}]}]; 531 532 map.addStyle({ 533 styledMapName:"Styled Map", 534 styles: styles, 535 mapTypeId: "map_style" 536 }); 537 538 map.setStyle("map_style"); 539 540 console.log(map); 541 542 google.maps.event.addListener(map, 'mouseover', function(){ 543 console.log('hover...'); 544 }); 545 546 547 } else if( $('.multi-map').length > 0 ) { 548 549 var map = new GMaps({ 550 div: '.multi-map', 551 lat: 40, 552 lng: 10, 553 scrollwheel: false, 554 zoom: 2 555 }); 556 557 var i; 558 for (i = 0; i < markers.length; ++i) { 559 560 var maplat = markers[i][0]; 561 var maplng = markers[i][1]; 562 563 map.addMarker({ 564 lat: maplat, 565 lng: maplng, 566 icon: directory + '/images/marker.png', 567 }); 568 569 } 570 571 var styles = [{featureType:"all",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"administrative",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"administrative.country",elementType:"geometry.stroke",stylers:[{visibility:"on"},{color:"#a6dcf9"},{weight:.8}]},{featureType:"administrative.province",elementType:"geometry.fill",stylers:[{saturation:"97"}]},{featureType:"administrative.province",elementType:"geometry.stroke",stylers:[{visibility:"off"}]},{featureType:"landscape",elementType:"all",stylers:[{color:"#72b0d3"}]},{featureType:"poi",elementType:"all",stylers:[{color:"#DDD4CB"}]},{featureType:"road",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"water",elementType:"all",stylers:[{color:"#FFFFFF"}]}]; 572 573 map.addStyle({ 574 styledMapName:"Styled Map", 575 styles: styles, 576 mapTypeId: "map_style" 577 }); 578 579 map.setStyle("map_style"); 580 581 } 582 583 584 585 586 587/*************************************************************************************************************************************** 588 589 6. Load more news 590 591***************************************************************************************************************************************/ 592 593 594 $('.load-more-news').on('click', function() { 595 596 var container = $(this).parent(); 597 var postID = $(this).data('post'); 598 var initialHeight = container.outerHeight(); 599 600 container.css('maxHeight', initialHeight); 601 602 var data = { post: postID }; 603 $.ajax({
604 type: 'POST', 605 cache: true, 606 // var directory definied in footer 607 url: directory + '/page-templates/ajax/load-post.php', 608 data: data, 609 success: function(response) { 610 // input content 611 if( response && response.length > 0 ) { 612 container.html(response); 613 container.css('maxHeight', '10000px'); 614 } 615 $(this).hide(); 616 } 617 }); 618 619 }); 620 621 622 623/*************************************************************************************************************************************** 624 625 7. Custom jQuery 626 627***************************************************************************************************************************************/ 628 629 630 /*************************************************************************************************************************** 631 ************************************************************************************************************ Top dropdown */ 632 633 $('#dropdown').on('click', function() { 634 var topDiv = $(this).attr('rel'); 635 $('#top.'+ topDiv +'').slideDown(300); 636 }); 637 638 $('#top .close').on('click', function() { 639 closeTop(); 640 }); 641 642 $('html').click(function(e) { 643 var children = $('#top, #dropdown').find('*'); 644 if( !$(e.target).is(children) ) { 645 closeTop(); 646 } 647 }); 648 649 function closeTop() { 650 $('#top').slideUp(200); 651 } 652 653 654 655 656 657 658 /*************************************************************************************************************************** 659 ***************************************************************************************************************** FitVids */ 660 661 var vidFrame = $('.the-content p').find('iframe'); 662 var vidWidth = 750; // max width of video 663 664 if (typeof vidWidth !== undefined) { 665 // Wrap the iframe in a Div with max-width defined 666 vidFrame.wrap('<div style="max-width:' + vidWidth + 'px;"></div>'); 667 } 668 669 $('.the-content p').fitVids(); 670 671 672 /*************************************************************************************************************************** 673 **************************************************************************************************** Request a quote form */ 674 675 var defaultCountry = 'Thailand'; 676 677 if( $('body').hasClass('page-template-quote') ) { 678 679 $('.wpcf7 select option:nth-child(1)').not( $('select[name="country"] option') ).attr('disabled', 'disabled').attr('selected', 'selected').val(''); 680 $('.wpcf7 .wire-section-shape, .wpcf7 .wire-rope-shape, .wpcf7 .wpcf7-spool-size-box, .wpcf7 .wpcf7-cut-length-box').hide(); 681 682 // re arrange select fields for language 683 684 $('select[name="country"] option[value="'+ defaultCountry +'"]').prop('selected', 'selected').insertBefore($('select[name="country"] option:eq(0)')); 685 686 687 // wire form 688 $('.wpcf7 .wire-form input[type=radio]').on('change', function() { 689 690 var option = $(this).val(); 691 692 // section 693 if( option === 'Section' && $(this).is(':checked') ) { 694 $('.wire-section-shape').delay(200).fadeIn(300); 695 } else { 696 $('.wire-section-shape').fadeOut(200); 697 } 698 // rope 699 if( option === 'Rope' && $(this).is(':checked') ) { 700 $('.wire-rope-shape').delay(200).fadeIn(300); 701 } else { 702 $('.wire-rope-shape').fadeOut(200); 703 } 704 705 }); 706 707 // Supplied As 708 $('.wpcf7 .suppliedas input[type=radio]').on('change', function() { 709 710 var option = $(this).val(); 711 712 // spool 713 if( option === 'Spools' && $(this).is(':checked') ) { 714 $('.wpcf7-spool-size-box').delay(200).fadeIn(300); 715 } else { 716 $('.wpcf7-spool-size-box').fadeOut(200); 717 } 718 // spool 719 if( option === 'Cut Lengths / Bars' && $(this).is(':checked') ) { 720 $('.wpcf7-cut-length-box').delay(200).fadeIn(300); 721 } else { 722 $('.wpcf7-cut-length-box').fadeOut(200); 723 } 724 725 }); 726 727 // wire shape profile img 728 $('.wire-section-shape select').on('change', function() { 729 var selection = $(this).val().replace(/\s+/g, '-').toLowerCase().replace('.', '').replace('/', '');
730 selection = directory + '/images/shapes/' + selection + '.png'; 731 $('.wire-shape-img img').attr('src', selection); 732 }); 733 734 // wire rope profile img 735 $('.wire-rope-shape select').on('change', function() { 736 var selection = $(this).val().replace(/\s+/g, '-').toLowerCase().replace('.', '').replace('/', ''); 737 selection = directory + '/images/shapes/rope-' + selection + '.png'; 738 $('.wire-rope-img img').attr('src', selection); 739 }); 740 741 742 var count = 1; 743 $('.shape-imgs > div').each(function() { 744 $(this).prependTo($('.wire-form .wpcf7-radio .wpcf7-list-item:nth-child('+ count +') label')); 745 count++; 746 }); 747 $('.shape-imgs').remove(); 748 749 count = 1; 750 $('.supplied-imgs > div').each(function() { 751 $(this).prependTo($('.suppliedas .wpcf7-radio .wpcf7-list-item:nth-child('+ count +') label')); 752 count++; 753 }); 754 $('.supplied-imgs').remove(); 755 756 757 } 758 759 /*************************************************************************************************************************** 760 ************************************************************************************************* Request a quote form v2 */ 761 762 if( $('body').hasClass('page-template-quote-v2') ) { 763 764 // set the defauly country 765 $('.wpcf7 select option:nth-child(1)').not( $('select[name="country"] option') ).attr('disabled', 'disabled').attr('selected', 'selected').val(''); 766 767 // hide option boxes 768 $('.wpcf7 .wire-section-shape, .wpcf7 .wire-rope-shape, .wpcf7 .wpcf7-spool-size-box, .wpcf7 .wpcf7-cut-length-box').hide(); 769 770 // move the shape and packaging images next to the correct input 771 var count = 1; 772 $('.shape-imgs > div').each(function() { 773 $(this).prependTo($('.wire-form .wpcf7-radio .wpcf7-list-item:nth-child('+ count +') label')); 774 count++; 775 }); 776 $('.shape-imgs').remove(); 777 778 count = 1; 779 $('.supplied-imgs > div').each(function() { 780 $(this).prependTo($('.suppliedas .wpcf7-radio .wpcf7-list-item:nth-child('+ count +') label')); 781 count++; 782 }); 783 $('.supplied-imgs').remove(); 784 785 786 787 /**************************************** 788 form setup 789 ****************************************/ 790 791 // re arrange select fields for language 792 $('select[name="country"] option[value="'+ defaultCountry +'"]').prop('selected', 'selected').insertBefore($('select[name="country"] option:eq(0)')); 793 794 795 // fetch profile images 796 $('.wire-section-shape input[type="radio"]').each(function() { 797 var option = $(this); 798 var image = option.val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/-+/g,'-').toLowerCase().replace('.', '').replace('/', ''); 799 image = directory + '/images/shapes/' + image + '.png'; 800 option.before('<img src="'+ image +'" />'); 801 }); 802 803 804 // fetch rope images 805 $('.wire-rope-shape input[type="radio"]').each(function() { 806 var option = $(this); 807 var image = option.val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-').replace(/-+/g,'-').toLowerCase().replace('.', '').replace('/', ''); 808 image = directory + '/images/shapes/rope-' + image + '.png'; 809 option.before('<img src="'+ image +'" />'); 810 }); 811 812 813 // show correct dimension image 814 $('input[name=wire-form], input[name=wire-section-shape], input[name=wire-rope-shape]').on('change', function() { 815 816 var selection = $(this); 817 var name = selection.attr('name'); 818 var dimensionContainer = $('.dimension-image'); 819 820 var image = selection.prev().find('img').clone(); 821 if( !image.length ) { 822 image = selection.prev().clone(); 823 } 824 825 var option = selection.prev().data('shape'); 826 if( option ) { 827 if( option === 'profile' ) { 828 option = 'profile'; 829 } else if( option === 'rope' ) { 830 option = 'rope'; 831 } else if( option === 'round' ) { 832 option = 'round-wire'; 833 } else if( option === 'flat' ) { 834 option = 'flat-wire'; 835 } else { 836 option = 'flat-wire'; 837 } 838 } else { 839 option = selection.attr('name'); 840 if( option === 'wire-rope-shape' ) { 841 option = 'rope'; 842 } else if( option === 'wire-section-shape' ) { 843 option = 'profile'; 844 } else { 845 option = 'flat-wire'; 846 } 847 } 848 849 850 option = directory + '/images/dimensions/dimension-' + option + '.png'; 851 852 dimensionContainer.empty(); 853 dimensionContainer.append('<img src="'+ option +'" />'); 854 dimensionContainer.append(image); 855 856 });
857 858 // show the correct dimension image on load 859 _window.on('load', function() { 860 861 var selection = $('input[name=wire-form]:checked'); 862 var dimensionContainer = $('.dimension-image'); 863 864 var image = selection.prev().find('img').eq(0).clone(); 865 866 if( !image.length ) { 867 image = selection.prev().clone(); 868 } 869 870 var option = selection.prev().data('shape'); 871 if( option === 'profile' ) { 872 option = 'profile'; 873 } else if( option === 'rope' ) { 874 option = 'round-wire'; 875 } else { 876 option = 'round-wire'; 877 } 878 879 option = directory + '/images/dimensions/dimension-' + option + '.png'; 880 881 dimensionContainer.empty(); 882 dimensionContainer.append('<img src="'+ option +'" />'); 883 dimensionContainer.append(image); 884 885 }); 886 887 888 889 /**************************************** 890 form actions 891 ****************************************/ 892 893 // show options under radio buttons 894 $('.wpcf7 input[type=radio]').on('change', function() { 895 896 var fieldset = $(this).closest('fieldset'); 897 898 // check if we're changing the shape option first 899 var option = $(this).prev().data('shape'); 900 901 // check if we have packaging options to show 902 if( option === undefined ) { 903 option = $(this).prev().data('packaging'); 904 } 905 906 var selector = '.show-' + option; 907 var element = $(selector); 908 909 910 911 if( element ) { 912 913 if( $(this).attr('name') !== 'wire-section-shape' ) { 914 fieldset.find('[class^="show-"]').not(selector).parent().fadeOut(200); 915 } 916 element.parent().delay(200).fadeIn(300); 917 } 918 919 }); 920 921 922 // show required dimensions based on shape 923 $('.wpcf7 input[type=radio][name="wire-form"]').on('change', function() { 924 925 // remove non-standard characters, swap spaces for hyphens, remove multiple hyphens 926 var option = $(this).prev().data('shape'); 927 var selector = '.size-' + option; 928 var element = $(selector); 929 930 if( element.length ) { 931 element.fadeIn(300); 932 } else { 933 $('.size-profile').fadeOut(300); 934 } 935 936 }); 937 938 939 // change messages about cut length optimal sizes 940 $('select[name="wire-length-unit"]').on('change', function() { 941 942 var input = $(this); 943 var message = $('.cut-length-size-info'); 944 945 if( input.val() === 'meters' ) { 946 message.html('à¸à¸§à¸²à¸¡à¸¢à¸²à¸§à¸¡à¸µà¹à¸«à¹à¸à¸£à¸´à¸à¸²à¸£à¸à¸±à¹à¸à¹à¸à¹ 0.003m à¸à¸¶à¸ 2.8m หาà¸à¸à¸¸à¸à¸à¹à¸à¸à¸à¸²à¸£à¸à¸§à¸²à¸¡à¸¢à¸²à¸§> 2.8m à¹à¸à¸£à¸à¸ªà¸à¸à¸à¸²à¸¡à¹à¸à¸µà¹à¸¢à¸§à¸à¸±à¸à¸à¹à¸²à¹à¸à¹à¸à¹à¸²à¸¢à¹à¸à¸´à¹à¸¡à¹à¸à¸´à¸¡'); 947 } else if( input.val() === 'inches' ) { 948 message.html('à¸à¸§à¸²à¸¡à¸¢à¸²à¸§à¸¡à¸µà¹à¸«à¹à¹à¸¥à¸·à¸à¸à¸à¸±à¹à¸à¹à¸à¹ 0.118 à¸à¸¶à¸ 110 à¸à¸´à¹à¸§ หาà¸à¸à¸¸à¸à¸à¹à¸à¸à¸à¸²à¸£à¸à¸§à¸²à¸¡à¸¢à¸²à¸§> 110â à¹à¸à¸£à¸à¸ªà¸à¸à¸à¸²à¸¡à¹à¸à¸µà¹à¸¢à¸§à¸à¸±à¸à¸à¹à¸²à¹à¸à¹à¸à¹à¸²à¸¢à¹à¸à¸´à¹à¸¡à¹à¸à¸´à¸¡'); 949 } else if( input.val() === 'mm' ) { 950 message.html('à¸à¸§à¸²à¸¡à¸¢à¸²à¸§à¸¡à¸µà¹à¸«à¹à¸à¸±à¹à¸à¹à¸à¹ 3mm à¸à¸¶à¸ 2800mm หาà¸à¸à¸¸à¸à¸à¹à¸à¸à¸à¸²à¸£à¸à¸§à¸²à¸¡à¸¢à¸²à¸§> 2800 มม. à¹à¸à¸£à¸à¸ªà¸à¸à¸à¸²à¸¡à¹à¸à¸µà¹à¸¢à¸§à¸à¸±à¸à¸à¹à¸²à¹à¸à¹à¸à¹à¸²à¸¢à¹à¸à¸´à¹à¸¡à¹à¸à¸´à¸¡'); 951 } else if( input.val() === 'feet' ) { 952 message.html('à¸à¸§à¸²à¸¡à¸¢à¸²à¸§à¸¡à¸µà¹à¸«à¹à¸à¸±à¹à¸à¹à¸à¹ 0.01 à¸à¸¸à¸à¸à¸¶à¸ 9 à¸à¸¸à¸à¸«à¸²à¸à¸à¸¸à¸à¸à¹à¸à¸à¸à¸²à¸£à¸à¸§à¸²à¸¡à¸¢à¸²à¸§> 9 à¸à¸¸à¸à¹à¸à¸£à¸à¸ªà¸à¸à¸à¸²à¸¡à¸à¹à¸²à¹à¸à¹à¸à¹à¸²à¸¢à¹à¸à¸´à¹à¸¡à¹à¸à¸´à¸¡'); 953 } else { 954 message.html(''); 955 } 956 }); 957 958 959 960 // add quantity break 961 $('.add-qty').on('click', function() { 962 963 var availableBreak = $('.quantity.hide:eq(0)'); 964 console.log(availableBreak); 965 if( availableBreak.length ) { 966 availableBreak.css('display', 'none').removeClass('hide').slideDown(50); 967 } else { 968 alert('à¹à¸£à¸²à¸à¸³à¸à¸±à¸à¸à¸£à¸´à¸¡à¸²à¸à¹à¸à¹à¸à¸à¸µà¹ 5 à¸à¸³à¸à¸§à¸'); 969 } 970 971 if( !$('.quantity.hide:eq(0)').length ) { 972 $('.add-qty').attr('disabled', 'disabled'); 973 } 974 975 });
976 977 978 // back a page 979 $('.back-link').on('click', function() { 980 history.back(); 981 }); 982 983 984 // reset form 985 $(document).on('mailsent.wpcf7', function () { 986 987 $('.quantity:gt(0)').hide().slideUp(10); 988 $('.add-qty').prop('disabled', false); 989 990 }); 991 992 } 993 994 995 $('select[name="country"] option[value="'+ defaultCountry +'"]').prop('selected', 'selected').insertBefore($('select[name="country"] option:eq(0)')); 996 997 998 999 // back a page 1000 $('.back-link').on('click', function() { 1001 history.back(); 1002 }); 1003 1004 1005 1006 /*************************************************************************************************************************** 1007 ******************************************************************************************************* App specific code */ 1008 1009 1010 // suggestive search 1011 // var directory defined in footer to allow dynamic link 1012 var products = $.getJSON( ''+ directory +'/inc/search-array.json', function() {}); 1013 var suggestion = ''; 1014 1015 $('.home-search #q').each(function() { 1016 1017 var thisSearch = $(this); 1018 1019 thisSearch.autocomplete({ 1020 options: { 1021 closeOnSelect: false 1022 }, 1023 source: function(request, response){ 1024 var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); 1025 response( $.grep( products.responseJSON, function( value ) { 1026 // set autocomplete to search product name, number & description 1027 return matcher.test(value.product_desc) || matcher.test(value.product_title) || matcher.test(value.product_properties) || matcher.test(value.product_applications); 1028 }) ); 1029 }, 1030 minLength: 2, 1031 response: function() { 1032 return; 1033 }/*, 1034 select: function(event, ui) { 1035 // redirect to product 1036 $('.home-search').addClass('loading'); 1037 setTimeout(function() { 1038 window.location = ui.item.product_link; 1039 }, 500); 1040 1041 }*/ 1042 }); 1043 1044 $.ui.autocomplete.prototype._resizeMenu = function () { 1045 var ul = this.menu.element; 1046 ul.outerWidth(this.element.outerWidth()); 1047 }; 1048 1049 1050 }); 1051 1052 1053 // animations 1054 _window.on('load', function() { 1055 var elements = $('.animate'), counter = 0; 1056 setInterval(function(){ 1057 elements.eq(counter++ % elements.length).addClass('animated fadeInUp'); 1058 }, 75); 1059 }); 1060 1061 1062 // profiles 1063 $('.profile').on('click', function() { 1064 $.fn.matchHeight._update(); 1065 if ($(this).hasClass('active') === true) { 1066 $('.profile-content').removeClass('active').slideUp(300); 1067 $('.profile').removeClass('active'); 1068 } else { 1069 $('.profile').removeClass('active'); 1070 $('.profile-content').slideUp(300); 1071 var selected = $(this).attr('rel'); 1072 $(this).addClass('active'); 1073 $('#' + selected).slideDown(300, function() { 1074 $(this).addClass('active'); 1075 $('.app-slider').slick('setPosition'); 1076 }); 1077 } 1078 }); 1079 1080 // product features 1081 $('.dropdown a').on('click', function() { 1082 $.fn.matchHeight._update(); 1083 if ($(this).hasClass('active') === true) { 1084 $('.dropdown a').removeClass('active'); 1085 $('.dropdown-content').removeClass('active').slideUp(300); 1086 } else { 1087 $('.dropdown a').removeClass('active'); 1088 $('.dropdown-content').removeClass('active').slideUp(300); 1089 $(this).addClass('active'); 1090 $(this).next().slideDown(300, function() { 1091 $(this).addClass('active'); 1092 }); 1093 } 1094 }); 1095 1096 1097 // auto submit form 1098 $('.autosubmit-form label').on('click', function() { 1099 $('.autosubmit-form').submit(); 1100 }); 1101 1102 1103 // filter 1104 /* 1105 var defaultFilter = $('.filter-container .filter:nth-of-type(1) .filter-button a'); 1106 defaultFilter.addClass('active'); 1107 1108 var $grid = $('.isotope-container'); 1109 $grid.isotope({ 1110 itemSelector: '.result', 1111 layoutMode: 'vertical', 1112 stagger: 20, 1113 transitionDuration: '0.6s', 1114 filter: defaultFilter.data('filter') 1115 }); 1116 1117 $('.filter-container').on( 'click', '.filter-button a', function(e) { 1118 var filterValue = $(this).data('filter'); 1119 $grid.isotope({ filter: filterValue });
1120 $('.filter-button a').removeClass('active'); 1121 $(this).addClass('active'); 1122 e.preventDefault(); 1123 }); 1124 */ 1125 1126 1127 if( $('body').hasClass('app') ) { 1128 1129 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) === true ) { 1130 1131 var addtohome = addToHomescreen({ 1132 startDelay: 0, 1133 lifespan: 0, 1134 autostart: false 1135 }); 1136 addtohome.show(); 1137 $('.save-box').on('click', function() { 1138 addtohome.show(true); 1139 }); 1140 1141 } else { 1142 1143 $('.save-box').on('click', function(e) { 1144 e.preventDefault(); 1145 var rel = $(this).attr('rel'); 1146 var height = _window.height(); 1147 $('#'+rel).css('height', height).addClass('active').fadeIn(200); 1148 }); 1149 1150 } 1151 } 1152 1153 1154 1155 /**************************************************************************************************************************** 1156 ******************************************************************************************************* Spool size selector */ 1157 1158 // Runs on https://www.alloywire.com/coils-spools-lengths/spools/ 1159 1160 1161 // addDimensions() outputs the html for each dimension attribute for the spools 1162 function addDimensions(dimensions, rowStructure) { 1163 1164 var output = ''; 1165 $.each(dimensions, function( index, value ) { 1166 output += rowStructure.dimensionChildren.open; 1167 output += '<strong>'+ index.toUpperCase() +') </strong>'; 1168 output += value[primary]; 1169 output += ' <span class="grey">('+ value[secondary] +')</span>'; 1170 output += rowStructure.dimensionChildren.close; 1171 }); 1172 1173 return output; 1174 1175 } 1176 1177 // function to uppercase each word 1178 function toTitleCase(str) { 1179 return str.replace(/\w\S*/g, function(txt){ 1180 return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 1181 }); 1182 } 1183 1184 1185 if( $('.spools-container') ) { 1186 1187 var spoolsDetail = $('.spool-detail'); 1188 1189 var metrics; 1190 var imperials; 1191 var primary; 1192 var secondary; 1193 1194 $('.spools-container table tr:nth-child(n+1)').on('click', function() { 1195 1196 // grab the row data 1197 var row = $(this); 1198 1199 // find out what row we're on so we know where to look for metric and imperial data 1200 var rowLength = row.children().length; 1201 1202 if( rowLength === 8 ) { // 1st row - metrics 1203 1204 // grab metric and imperial data 1205 metrics = row.find('td'); 1206 imperials = row.next().find('td'); 1207 1208 // decide which unit is the primary unit depending on what row they chose 1209 primary = 'metric'; 1210 secondary = 'imperial'; 1211 1212 } else { // 2nd row - imperial 1213 1214 metrics = row.prev().find('td'); 1215 imperials = row.find('td'); 1216 1217 primary = 'imperial'; 1218 secondary = 'metric'; 1219 1220 } 1221 1222 // fetch all the data into an object to keep things tidy 1223 var rowData = { 1224 image: '<img src="' + metrics.find('img').attr('src').replace('-thumb.png', '.jpg') + '" />', 1225 title: metrics.eq(0).find('strong').text(), 1226 dimensions: { 1227 a: { 1228 metric: metrics.eq(1).text(), 1229 imperial: imperials.eq(0).text() 1230 }, 1231 b: { 1232 metric: metrics.eq(2).text(), 1233 imperial: imperials.eq(1).text() 1234 }, 1235 c: { 1236 metric: metrics.eq(3).text(), 1237 imperial: imperials.eq(2).text() 1238 }, 1239 d: { 1240 metric: metrics.eq(4).text(), 1241 imperial: imperials.eq(3).text() 1242 }, 1243 e: { 1244 metric: metrics.eq(5).text(), 1245 imperial: imperials.eq(4).text() 1246 } 1247 }, 1248 range: { 1249 title: $('.spools-container table tr:first-of-type th:eq(6)').text(), 1250 metric: metrics.eq(6).text(), 1251 imperial: imperials.eq(5).text() 1252 }, 1253 weight: { 1254 title: $('.spools-container table tr:first-of-type th:eq(7)').text(), 1255 metric: metrics.eq(7).text(), 1256 imperial: imperials.eq(6).text() 1257 } 1258 }; 1259 1260 // setup the html structure elements we'll be using 1261 var rowStructure = { 1262 title: { 1263 open: '<div class="pad20 spool-title text-center">', 1264 close: '</div>' 1265 }, 1266 image: { 1267 open: '<div class="left50 pad10 spool-image text-center">', 1268 close: '</div>' 1269 }, 1270 dimensions: { 1271 open: '<div class="left50 dimensions">', 1272 close: '</div>' 1273 }, 1274 dimensionChildren: { 1275 open: '<div class="left50 pad10 dimensions-child">', 1276 close: '</div>' 1277 }, 1278 range: { 1279 open: '<div class="pad10 range">', 1280 close: '</div>' 1281 }, 1282 weight: { 1283 open: '<div class="pad10 weight">', 1284 close: '</div>' 1285 } 1286 }; 1287 1288 1289 // empty the container 1290 spoolsDetail.empty().addClass('active'); 1291 1292 1293 // create the elements! 1294 1295 // add the title 1296 spoolsDetail.append(rowStructure.title.open +'<h3>'+ rowData.title +'</h3>'+ rowStructure.title.close); 1297 1298 // add the image 1299 spoolsDetail.append(rowStructure.image.open + rowData.image + rowStructure.image.close); 1300 1301 // add the data 1302 spoolsDetail.append( 1303 rowStructure.dimensions.open + 1304 1305 // add all dimensions using addDimensions() function definied above... 1306 addDimensions(rowData.dimensions, rowStructure)+ 1307 1308 // clear the float 1309 '<div class="clear"></div>'+ 1310 1311 // add range 1312 rowStructure.range.open + 1313 '<strong>'+ toTitleCase(rowData.range.title) +':</strong> '+ 1314 rowData.range[primary] + 1315 ' <span class="grey">('+ rowData.range[secondary] +')</span>'+ 1316 rowStructure.range.close + 1317 1318 // add weight 1319 rowStructure.weight.open + 1320 '<strong>'+ toTitleCase(rowData.weight.title) +':</strong> '+ 1321 rowData.weight[primary] + 1322 ' <span class="grey">('+ rowData.weight[secondary] +')</span>'+ 1323 rowStructure.weight.close + 1324 1325 rowStructure.dimensions.close 1326 ); 1327 1328 spoolsDetail.append('<div class="clear"></div>'); 1329 1330 1331 // scroll the user up to the spool-detail div 1332 $([document.documentElement, document.body]).animate({
1333 scrollTop: $('.spool-detail').offset().top - $('#menu.sticky').outerHeight() - $('#wpadminbar').outerHeight() 1334 }, 300); 1335 1336 }); 1337 1338 } 1339 1340 1341 1342} )( 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.