1/* ************************************* 2 3 4 --------------------------- 5 UIX SHORTCODES SCRIPTS 6 --------------------------- 7 8 TABLE OF CONTENTS 9 --------------------------- 10 11 1. Through the Pricing Styling Parameters to determine the style 12 2. Accordion & Tabs 13 3. Progress Bar 14 4. Pricing 15 5. Parallax 16 6. Testimonials 17 7. prettyPhoto 18 8. Portfolio ( With Filterable and Masonry ) 19 9. Buttons 20 10. Image Slider 21 11. Initialize the map container 22 12. Apply the original scripts 23 24 25 26************************************* */ 27 28 29var templateUrl = wp_plug_uixsc_root_path.templateUrl; 30var uixScRootUrl = wp_plug_uixsc_root_path.uixScRootUrl; 31var styleName = 'elegant'; 32 33var uix_sc = (function ( $, window, document ) { 34 'use strict'; 35 36 var uix_sc = {}, 37 components = { documentReady: [], pageLoaded: [] }; 38 39 if( $.isFunction( $.fn.waitForImages ) ){ 40 $( 'body' ).waitForImages( pageLoaded ); 41 } else { 42 $( window ).on( 'load', pageLoaded ); 43 } 44 45 $( document ).ready( documentReady ); 46 47 48 49 function documentReady( context ) { 50 51 context = typeof context == typeof undefined ? $ : context; 52 components.documentReady.forEach( function( component ) { 53 component( context ); 54 }); 55 } 56 57 function pageLoaded( context ){ 58 59 context = typeof context == "object" ? $ : context; 60 components.pageLoaded.forEach( function( component ) { 61 component( context ); 62 }); 63 } 64 65 uix_sc.setContext = function ( contextSelector ) { 66 var context = $; 67 if( typeof contextSelector !== typeof undefined ) { 68 return function( selector ) { 69 return $( contextSelector ).find( selector ); 70 }; 71 } 72 return context; 73 }; 74 75 uix_sc.components = components; 76 uix_sc.documentReady = documentReady; 77 uix_sc.pageLoaded = pageLoaded; 78 79 return uix_sc; 80}( jQuery, window, document ) ); 81 82 83 84(function($){ 85 var cache = {}; 86 87 $.UixSCTmpl = function UixSCTmpl(str, data){ 88 89 90 // Figure out if we're getting a template, or if we need to 91 // load the template - and be sure to cache the result. 92 // The HTML code "<div data-tmpl="0"></div>" is order to fixed "Maximum call stack size exceeded" 93 var fn = !/\W/.test(str) ? 94 cache[str] = cache[str] || 95 UixSCTmpl( ( document.getElementById( str ) === null ? '<div data-tmpl="0"></div>' + str : document.getElementById(str).innerHTML ) ) : 96 97 // Generate a reusable function that will serve as a template 98 // generator (and which will be cached). 99 new Function("obj", 100 "var p=[],print=function(){p.push.apply(p,arguments);};" + 101 102 // Introduce the data as local variables using with(){} 103 "with(obj){p.push('" + 104 105 // Convert the template into pure JavaScript 106 str 107 .replace(/[\r\t\n]/g, " ") 108 .split("<%").join("\t") 109 .replace(/((^|%>)[^\t]*)'/g, "$1\r") 110 .replace(/\t=(.*?)%>/g, "',$1,'") 111 .split("\t").join("');") 112 .split("%>").join("p.push('") 113 .split("\r").join("\\'") 114 + "');}return p.join('');"); 115 116 // Provide some basic currying to the user 117 return data ? fn( data ) : fn; 118 }; 119 120 $.fn.UixSCTmpl = function(str, data){ 121 return this.each(function(){ 122 123 var curData = $.UixSCTmpl( str, data ); 124 $( this ).html( curData ); 125 126 }); 127 }; 128})(jQuery); 129 130 131/*! 132 ************************************* 133 * 1. Through the Pricing Styling Parameters to determine the style 134 ************************************* 135 */ 136uix_sc = ( function ( uix_sc, $, window, document ) { 137 'use strict'; 138 139 140 var documentReady = function( $ ) { 141 142 var curStyle = $( '#uix-shortcodes-css' ).attr( 'href' ); 143 144 if( typeof curStyle != typeof undefined ) { 145 146 if ( curStyle.indexOf( 'shortcodes.css' ) >= 0 ) styleName = 'elegant'; 147 if ( curStyle.indexOf( 'shortcodes-slant.css' ) >= 0 ) styleName = 'slant'; 148 if ( curStyle.indexOf( 'shortcodes-rich.css' ) >= 0 ) styleName = 'rich'; 149 150 } 151 152 153 }; 154 155 156 uix_sc.stylesname = { 157 documentReady : documentReady 158 }; 159 160 uix_sc.components.documentReady.push( documentReady ); 161 return uix_sc; 162 163}( uix_sc, jQuery, window, document ) ); 164 165
166/*! 167 ************************************* 168 * 2. Accordion & Tabs 169 ************************************* 170 */ 171uix_sc = ( function ( uix_sc, $, window, document ) { 172 'use strict'; 173 174 175 var documentReady = function( $ ) { 176 177 $( '.uix-sc-accordion' ).each( function(){ 178 179 //returns new id 180 var $this = $( this ), 181 tranEfftct = $this.data( 'effect' ), 182 spoilerContent = '.uix-sc-spoiler__content', 183 speed = 300, 184 spoilerCloseClass = 'uix-sc-spoiler--closed', 185 $spoilerBox = $this.find( '.uix-sc-spoiler' ); 186 187 188 189 //Tabs 190 if ( $this.hasClass( 'uix-sc-tabs' ) ) { 191 192 var $tabsLi = $this.find( '.uix-sc-tabs__title li' ); 193 194 $this.find( '.uix-sc-tabs__title li:eq(0)' ).addClass( 'active' ); 195 $this.find( '.uix-sc-spoiler__content:eq(0)' ).show().addClass( 'active' ); 196 197 198 199 200 $tabsLi.on( 'click', function( e ) { 201 202 var contentIndex = $( this ).index(), 203 $title = $( this ), 204 $content = $this.find( spoilerContent+':eq('+contentIndex+')' ), 205 toggleClass = 'active'; 206 207 208 209 $tabsLi.removeClass( toggleClass ); 210 $this.find( spoilerContent ).removeClass( toggleClass ); 211 212 $title.toggleClass( toggleClass ); 213 $content.toggleClass( toggleClass ); 214 215 //Open/close content 216 if ( tranEfftct == 'slide' ) { 217 $this.find( spoilerContent ).not( '.' + toggleClass ).slideUp( speed ); 218 $content.slideDown( speed ); 219 220 } 221 if ( tranEfftct == 'fade' ) { 222 223 $this.find( spoilerContent ).not( '.' + toggleClass ).hide(); 224 $content.fadeIn( speed ); 225 226 } 227 if ( tranEfftct == 'none' ) { 228 $this.find( spoilerContent ).not( '.' + toggleClass ).hide(); 229 $content.show(); 230 231 } 232 233 234 // Scroll in spoiler in accordion 235 e.preventDefault(); 236 237 238 } ); 239 240 241 } else { 242 243 $( '.uix-sc-accordion .'+spoilerCloseClass ).find( spoilerContent ).show(); 244 245 246 $spoilerBox.on( 'click', function( e ) { //prevent the extra click event from $spoilerBox 247 248 var $title = $( '.uix-sc-spoiler__title', this ), 249 $spoiler = $title.parent(), 250 $content = $( this ).find( spoilerContent ); 251 252 253 if ( $title.css( 'widows' ) != 2 ) { 254 255 // Open/close spoiler 256 $spoiler.toggleClass( spoilerCloseClass ); 257 258 // Close other spoilers in accordion 259 $spoilerBox.removeClass( spoilerCloseClass ); 260 261 $( this ).addClass( spoilerCloseClass ); 262 263 //Open/close content 264 if ( tranEfftct == 'slide' ) { 265 $this.find( spoilerContent ).not( '.' + spoilerCloseClass ).slideUp( speed ); 266 $content.slideDown( speed ); 267 268 } 269 if ( tranEfftct == 'fade' ) { 270 $this.find( spoilerContent ).not( '.' + spoilerCloseClass ).hide(); 271 $content.fadeIn( speed ); 272 273 } 274 if ( tranEfftct == 'none' ) { 275 $this.find( spoilerContent ).not( '.' + spoilerCloseClass ).hide(); 276 $content.show(); 277 278 } 279 280 281 } else { 282 283 $( this ).removeClass( spoilerCloseClass ); 284 285 //Open/close content 286 if ( tranEfftct == 'slide' ) { 287 $this.find( spoilerContent ).not( '.' + spoilerCloseClass ).slideUp( speed ); 288 } 289 if ( tranEfftct == 'fade' ) { 290 $this.find( spoilerContent ).not( '.' + spoilerCloseClass ).fadeOut( speed ); 291 } 292 if ( tranEfftct == 'none' ) { 293 $this.find( spoilerContent ).not( '.' + spoilerCloseClass ).hide(); 294 } 295 296 } 297 298 299 // Scroll in spoiler in accordion 300 e.preventDefault(); 301 302 303 } ); 304 305 306 } 307 308 309 }); 310 311 }; 312 313 314 uix_sc.accordion = { 315 documentReady : documentReady 316 }; 317 318 uix_sc.components.documentReady.push( documentReady ); 319 return uix_sc; 320 321}( uix_sc, jQuery, window, document ) ); 322 323 324 325 326/*! 327 ************************************* 328 * 3. Progress Bar 329 ************************************* 330 */ 331uix_sc = ( function ( uix_sc, $, window, document ) { 332 'use strict'; 333 334 335 var documentReady = function( $ ) { 336 337 var barspeed = 1000; 338 339 $( '.uix-sc-bar__box--square' ).each(function() { 340 var $this = $( this ), 341 perc = $( '.uix-sc-bar', this).data( 'percent' ), 342 size = $( '.uix-sc-bar', this).data( 'size' ), 343 linewidth = $( '.uix-sc-bar', this).data( 'linewidth' ), 344 trackcolor = $( '.uix-sc-bar', this).data( 'trackcolor' ), 345 barcolor = $( '.uix-sc-bar', this).data( 'barcolor' ), 346 units = $( '.uix-sc-bar', this).data( 'units' ), 347 icon = $( '.uix-sc-bar', this).data( 'icon' ), 348 chkicon = icon 349 .replace(/fa/g, '' ) 350 .replace(/flaticon/g, '' ) 351 .replace(/-/g, '' ), 352 boxheight = $( '.uix-sc-bar__info', this).height(); 353 354 //Determines whether the width is 100% 355 if ( $( this ).find( '> div' ).attr( 'style' ).indexOf( '100%' ) >= 0 ) { 356 $( this ).css( 'width', '100%' ); 357 } 358 359 360 if ( boxheight > 0 ) $( this ).css( { 'height': linewidth + boxheight + 'px' } ); 361 $( '.uix-sc-bar', this).css( { 'height': linewidth + 'px', 'width': '100%', 'background': trackcolor } ); 362 $( '.uix-sc-bar .uix-sc-bar__percent', this).css( { 'height': linewidth + 'px', 'width': 0, 'background': barcolor } ); 363 $( '.uix-sc-bar .uix-sc-bar__text', this).html( '' ); 364 365 366 $this.find( '.uix-sc-bar .uix-sc-bar__text' ).each( function() { 367 368 if ( $this.find( '.uix-sc-bar .uix-sc-bar__percent' ).width() == 0 ) { 369 370 $this.find( '.uix-sc-bar .uix-sc-bar__percent' ).css( { 'height': linewidth + 'px', 'width': 0, 'background': barcolor } ).animate( { percentage: perc, width: perc + '%' }, {duration: barspeed } ); 371 372 var $el = $( this ), 373 value = perc; 374 375 376 $( { percentage: 0 } ).stop(true).animate( { percentage: value }, {
377 duration : barspeed, 378 step: function () { 379 // percentage with 1 decimal; 380 var percentageVal = parseInt( Math.round(this.percentage * 10) / 10 ); 381 382 if ( chkicon.length > 2 ) { 383 $el.html( '<i class="'+icon+'"></i>' ); 384 } else { 385 $el.html( percentageVal + units ); 386 } 387 388 } 389 }).promise().done(function () { 390 // hard set the value after animation is done to be 391 // sure the value is correct 392 if ( chkicon.length > 2 ) { 393 $el.html( '<i class="'+icon+'"></i>' ); 394 } else { 395 $el.html( value + units ); 396 } 397 398 399 }); 400 401 402 } 403 404 }); 405 406 407 }); 408 409 410 $( '.uix-sc-bar__box-circular' ).each(function() { 411 412 var $this = $( this ), 413 perc = $( '.uix-sc-bar', this).data( 'percent' ), 414 size = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'size' ), 415 sizeNum = size.replace( 'px', '' ), 416 linewidth = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'linewidth' ), 417 trackcolor = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'trackcolor' ), 418 barcolor = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'barcolor' ), 419 units = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'units' ), 420 icon = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'icon' ); 421 422 $( '.uix-sc-bar', this ).easyPieChart({ 423 animate: barspeed, 424 barColor: barcolor, 425 trackColor: trackcolor, 426 scaleLength: 0, 427 lineWidth: linewidth, 428 size: sizeNum 429 }); 430 431 $( '.uix-sc-bar', this ).data( 'easyPieChart' ).update( 0 ); 432 433 434 435 }); 436 437 $( '.uix-sc-bar__box-circular' ).each(function() { 438 439 if ( $( '.uix-sc-bar .uix-sc-bar__percent', this ).text().length == 0 ) { 440 441 var $this = $( this ), 442 perc = $( '.uix-sc-bar', this).data( 'percent' ), 443 size = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'size' ), 444 sizeNum = size.replace( 'px', '' ), 445 linewidth = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'linewidth' ), 446 trackcolor = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'trackcolor' ), 447 barcolor = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'barcolor' ), 448 units = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'units' ), 449 icon = $( '.uix-sc-bar .uix-sc-bar__percent', this).data( 'icon' ), 450 chkicon = icon 451 .replace(/fa/g, '' ) 452 .replace(/flaticon/g, '' ) 453 .replace(/-/g, '' ), 454 $txtcont = $( '.uix-sc-bar', this ).find( '.uix-sc-bar__percent' ); 455 456 457 $( '.uix-sc-bar', this ).data( 'easyPieChart' ).update( perc ); 458 $( '.uix-sc-bar', this ).find( '.uix-sc-bar__percent' ).css( { 'line-height': size, 'width': size } ).animate( { percentage: perc }, {duration: barspeed } ); 459 $( { percentage: 0 } ).stop(true).animate( { percentage: perc }, { 460 duration : barspeed, 461 step: function () { 462 // percentage with 1 decimal; 463 var percentageVal = parseInt( Math.round(this.percentage * 10) / 10 ); 464 465 if ( chkicon.length > 2 ) { 466 $txtcont.html( '<i class="'+icon+'"></i>' ); 467 } else { 468 $txtcont.html( percentageVal + units ); 469 } 470 471 } 472 }).promise().done(function () { 473 // hard set the value after animation is done to be 474 // sure the value is correct 475 if ( chkicon.length > 2 ) { 476 $txtcont.html( '<i class="'+icon+'"></i>' ); 477 } else { 478 $txtcont.html( perc + units ); 479 } 480 481 482 }); 483 484 485 } 486 487 488 }); 489 490 491 }; 492 493 494 uix_sc.progressbar = { 495 documentReady : documentReady 496 }; 497 498 uix_sc.components.documentReady.push( documentReady ); 499 return uix_sc; 500 501}( uix_sc, jQuery, window, document ) ); 502 503 504 505/*! 506 ************************************* 507 * 4. Pricing 508 ************************************* 509 */ 510uix_sc = ( function ( uix_sc, $, window, document ) { 511 'use strict'; 512 513 514 var documentReady = function( $ ) { 515 516 517 //Initialize the height 518 $( '.uix-sc-price' ).each( function(){ 519 520 521 //returns new id 522 var $this = $( this ), 523 priceBGH = Array(), 524 priceBGH_excerpt = Array(), 525 $initHeight = $this.find( '.uix-sc-price__init-height' ); 526 527 $initHeight.each( function( index ) { 528 //Screen protection of height 529 $( this ).find( '.uix-sc-price__border,.uix-sc-price__excerpt' ).css( 'height', 'auto' ); 530 531 var tempheight = $( this ).height(); 532 var tempheight_excerpt = $( this ).find( '.uix-sc-price__excerpt' ).height(); 533 priceBGH.push( tempheight ); 534 priceBGH_excerpt.push( tempheight_excerpt ); 535 536 537 } ); 538
539 var priceBGH_Max = Math.max.apply( Math, priceBGH ), 540 priceBGH_Max_excerpt = Math.max.apply( Math, priceBGH_excerpt ); 541 542 543 544 if ( priceBGH_Max > 0 ) { 545 if ( $( document.body ).width() > 768 ){ 546 547 // Initialize the height of all columns 548 $initHeight.find( '.uix-sc-price__border' ).css( 'height', priceBGH_Max + 'px' ); 549 550 // Actived columns 551 $initHeight.find( '.uix-sc-price__border.uix-sc-price__important' ).each( function() { 552 553 if ( styleName == 'elegant' || styleName == 'slant' ) { 554 var ty = Math.abs( parseInt( $( this ).css('transform').split(',')[5])); 555 if ( !isNaN(ty) ) { 556 $( this ).css( 'height', priceBGH_Max + ty*2 + 'px' ); 557 } 558 } 559 560 }); 561 562 563 564 565 } else { 566 $initHeight.find( '.uix-sc-price__border' ).css( 'height', 'auto' ); 567 568 569 } 570 571 572 // Actived columns 573 $initHeight.find( '.uix-sc-price__border.uix-sc-price__important' ).each( function() { 574 575 if ( styleName == 'rich' ) { 576 var textColor = $( this ).closest( '.uix-sc-price__border-hover' ).data( 'tcolor' ), 577 btnColor = $( this ).closest( '.uix-sc-price__border-hover' ).data( 'bcolor' ); 578 579 $( this ).css( 'background-color', btnColor ); 580 } 581 582 }); 583 584 585 586 } 587 588 589 }); 590 591 //Border of the hover effect 592 $( '.uix-sc-price__border-hover' ).each( function(){ 593 594 var $this = $( this ), 595 hw = 6, 596 defaultColor = $this.find( '.uix-sc-price__border' ).css( 'border-color' ), 597 textColor = $this.data( 'tcolor' ), 598 btnColor = $this.data( 'bcolor' ); 599 600 if ( styleName == 'elegant' ) { 601 $this.hover(function() { 602 $(this).find( '.uix-sc-price__border' ).css({ 603 "border-color": textColor, 604 "-webkit-box-shadow": "inset 0 0px 0px "+hw+"px " + textColor, 605 "-moz-box-shadow": "inset 0 0px 0px "+hw+"px " + textColor, 606 "box-shadow": "inset 0 0px 0px "+hw+"px " + textColor 607 }); 608 },function() { 609 $(this).find( '.uix-sc-price__border' ).css({ 610 "border-color": defaultColor, 611 "-webkit-box-shadow": "none", 612 "-moz-box-shadow": "none", 613 "box-shadow": "none" 614 }); 615 }); 616 } 617 618 }); 619 620 621 622 }; 623 624 625 uix_sc.pricing = { 626 documentReady : documentReady 627 }; 628 629 uix_sc.components.documentReady.push( documentReady ); 630 return uix_sc; 631 632}( uix_sc, jQuery, window, document ) ); 633 634 635 636/*! 637 ************************************* 638 * 5. Parallax 639 ************************************* 640 */ 641 642/* 643 ************************************* 644 * Parallax Effect 645 * 646 * @param {Number} speed - The speed of movement between elements. 647 * @param {JSON} bg - Specify the background display. Default value: { enable: true, xPos: '50%' } 648 * @return {Void} - The constructor. 649 ************************************* 650 */ 651 652( function ( $ ) { 653 $.fn.uix_sc_parallax = function( options ) { 654 655 // This is the easiest way to have default options. 656 var settings = $.extend({ 657 speed : 0.25, 658 bg : { enable: true, xPos: '50%' } 659 }, options ); 660 661 this.each( function() { 662 663 var bgEff = settings.bg, 664 $this = $( this ), 665 bgXpos = '50%', 666 speed = -parseFloat( settings.speed ); 667 668 669 670 //Prohibit transition delay 671 $this.css( { 672 'transition': 'none' 673 } ); 674 675 $( window ).on( 'scroll touchmove', function( e ){ 676 scrollUpdate(); 677 }); 678 679 680 //Initialize the position of the background 681 if ( bgEff ) { 682 //background parallax 683 $this.css('background-position', bgXpos + ' ' + (-$this.offset().top*speed) + 'px' ); 684 685 } 686 687 688 function scrollUpdate() { 689 var scrolled = $( window ).scrollTop(), 690 st = $this.offset().top - scrolled; 691 692 693 if ( bgEff ) { 694 //background parallax 695 $this.css('background-position', bgXpos + ' ' + ( 0 - ( st * speed ) ) + 'px' ); 696 } 697 698 } 699 700 701 702 }); 703 704 }; 705 706}( jQuery )); 707 708 709uix_sc = ( function ( uix_sc, $, window, document ) { 710 'use strict'; 711 712 713 var documentReady = function( $ ) { 714 715 716 var $window = $( window ), 717 windowWidth = $window.width(); 718 719 uix_sc_parallaxInit( windowWidth ); 720
721 $window.on('resize', function() { 722 windowWidth = $window.width(); 723 uix_sc_parallaxInit( windowWidth ); 724 }); 725 726 function uix_sc_parallaxInit( w ) { 727 $( '.uix-sc-parallax' ).each(function() { 728 $( this ).uix_sc_parallax( { speed: $( this ).data( 'parallax' ) } ); 729 }); 730 731 } 732 733 }; 734 735 736 uix_sc.parallax = { 737 documentReady : documentReady 738 }; 739 740 uix_sc.components.documentReady.push( documentReady ); 741 return uix_sc; 742 743}( uix_sc, jQuery, window, document ) ); 744 745 746 747 748/*! 749 ************************************* 750 * 6. Testimonials 751 ************************************* 752 */ 753uix_sc = ( function ( uix_sc, $, window, document ) { 754 'use strict'; 755 756 757 var documentReady = function( $ ) { 758 759 $( '[data-uix-sc-hybridcontent-slider="1"]' ).each( function() { 760 761 var $this = $( this ); 762 763 $this.UixShortcodesHybridContentSlider({ 764 765 //Get parameter configuration from the data-* attribute of HTML 766 dir : $this.data( 'dir' ), 767 auto : $this.data( 'auto' ), 768 speed : $this.data( 'speed' ), 769 timing : $this.data( 'timing' ), 770 loop : $this.data( 'loop' ), 771 draggable : $this.data( 'draggable' ), 772 draggableCursor : $this.data( 'draggable-cursor' ), 773 nextID : $this.data( 'next' ), 774 prevID : $this.data( 'prev' ), 775 paginationID : $this.data( 'pagination' ) 776 777 }); 778 779 }); 780 781 782 }; 783 784 785 uix_sc.testimonials = { 786 documentReady : documentReady 787 }; 788 789 uix_sc.components.documentReady.push( documentReady ); 790 return uix_sc; 791 792}( uix_sc, jQuery, window, document ) ); 793 794
795/*! 796 ************************************* 797 * 7. prettyPhoto 798 ************************************* 799 */ 800uix_sc = ( function ( uix_sc, $, window, document ) { 801 'use strict'; 802 803 804 var documentReady = function( $ ) { 805 806 $( "a[rel^='uix-sc-prettyPhoto']" ).prettyPhoto({ 807 animation_speed:'normal', 808 theme:'dark_rounded', 809 slideshow:3000, 810 utoplay_slideshow: false 811 }); 812 813 }; 814 815 816 uix_sc.prettyPhoto = { 817 documentReady : documentReady 818 }; 819 820 uix_sc.components.documentReady.push( documentReady ); 821 return uix_sc; 822 823}( uix_sc, jQuery, window, document ) ); 824 825 826 827 828/*! 829 ************************************* 830 * 8. Portfolio ( With Filterable and Masonry ) 831 ************************************* 832 */ 833uix_sc = ( function ( uix_sc, $, window, document ) { 834 'use strict'; 835 836 837 var documentReady = function( $ ) { 838 839 840 /* @ Version 1.0 (October 15, 2020) */ 841 $( '.uix-sc-portfolio__wrapper' ).each( function() { 842 843 var galleryType = $( this ).data( 'show-type' ), 844 filterCat = $( this ).data( 'filter-id' ), 845 $grid = $( this ).find( '.uix-sc-portfolio__tiles' ), 846 $allItems = $( this ).find( '.uix-sc-portfolio__item' ), 847 $filterOptions = $( filterCat ); 848 849 if ( typeof galleryType === typeof undefined ) return false; 850 851 852 /* 853 --------------------------- 854 Add a tagname to each list item 855 --------------------------- 856 */ 857 // Masonry 858 if ( galleryType.indexOf( 'masonry' ) >= 0 ) { 859 $( this ).addClass( 'masonry-container' ); 860 $( this ).find( '.uix-sc-portfolio__item' ).addClass( 'masonry-item' ); 861 } 862 863 // Filterable 864 if ( galleryType.indexOf( 'filter' ) >= 0 ) { 865 $( this ).addClass( 'filter-container' ); 866 $( this ).find( '.uix-sc-portfolio__item' ).addClass( 'filter-item' ); 867 } 868 869 870 //Standard layout 871 //-- 872 // When all items have loaded refresh their 873 // dimensions and layout the grid. 874 if ( galleryType.indexOf( 'filter' ) >= 0 && galleryType.indexOf( 'standard' ) >= 0 ) { 875 imagesLoaded( $grid ).on( 'always', function() { 876 var itemH = []; 877 $allItems.each( function( index ) { 878 var tempheight = $( this ).find( '.uix-sc-portfolio__image' ).height(); 879 itemH.push( tempheight ); 880 881 } ); 882 883 $grid.find( '.uix-sc-portfolio__image' ).css( 'height', Math.max.apply( Math, itemH ) + 'px' ); 884 }); 885 } 886 887 888 889 890 if ( galleryType.indexOf( 'filter' ) >= 0 || galleryType.indexOf( 'masonry' ) >= 0 ) { 891 892 var MuuriGrid = new Muuri( $grid.get(0), { 893 items: $grid.get(0).querySelectorAll( '.uix-sc-portfolio__item' ), 894 895 // Default show animation 896 showDuration: 300, 897 showEasing: 'ease', 898 899 // Default hide animation 900 hideDuration: 300, 901 hideEasing: 'ease', 902 903 // Item's visible/hidden state styles 904 visibleStyles: { 905 opacity: '1', 906 transform: 'scale(1)' 907 }, 908 hiddenStyles: { 909 opacity: '0', 910 transform: 'scale(0.5)' 911 }, 912 913 // Layout 914 layout: { 915 fillGaps: false, 916 horizontal: false, 917 alignRight: false, 918 alignBottom: false, 919 rounding: true 920 }, 921 layoutOnResize: 100, 922 layoutOnInit: true, 923 layoutDuration: 300, 924 layoutEasing: 'ease', 925 926 //// Drag & Drop 927 dragEnabled: false 928 }); 929 930 931 // When all items have loaded refresh their 932 // dimensions and layout the grid. 933 imagesLoaded( $grid ).on( 'always', function() { 934 MuuriGrid.refreshItems().layout(); 935 // For a little finishing touch, let's fade in 936 // the images after all them have loaded and 937 // they are corrertly positioned. 938 $( 'body' ).addClass( 'images-loaded' ); 939 }); 940 941 942 /* 943 --------------------------- 944 Function of Filterable and Masonry 945 --------------------------- 946 */ 947 if ( galleryType.indexOf( 'filter' ) >= 0 ) { 948 949 $filterOptions.find( 'li > a' ).off( 'click' ).on( 'click', function() { 950 var $this = $( this ); 951 var activeClass = 'current-cat', 952 isActive = $this.parent().hasClass( activeClass ), 953 group = isActive ? 'all' : $this.data( 'group' ); 954 955 // Hide current label, show current label in title 956 if ( !isActive ) { 957 $filterOptions.find( '.' + activeClass ).removeClass( activeClass ); 958 } 959 960 $this.parent().toggleClass( activeClass ); 961 962 // Filter elements 963 var filterFieldValue = group; 964 MuuriGrid.filter( function ( item ) { 965 966 var element = item.getElement(), 967 curCats = element.getAttribute( 'data-groups' ).toString().replace(/^\,|\,$/g, '').replace(/^\[|\]$/g, '') + ',all', 968 isFilterMatch = !filterFieldValue ? true : ( curCats || '' ).indexOf( filterFieldValue ) > -1; 969 970 return isFilterMatch; 971 }); 972 973 974 return false; 975 }); 976 } 977 978 979 980 }//endif galleryType.indexOf( 'filter' ) >= 0 || galleryType.indexOf( 'masonry' ) >= 0 981 982 983 984 985 //remove filter button of all 986 //------- 987 if ( galleryType.indexOf( 'filter' ) < 0 ) { 988 if ( filterCat == '' ) { 989 $filterOptions = $( '.uix-products-cat-list' ); 990 } 991 992 $filterOptions.find( '[data-group="all"]' ).parent( 'li' ).remove(); 993 } 994 995 996 } ); 997 998 }; 999 1000 1001 uix_sc.portfolio = { 1002 documentReady : documentReady 1003 }; 1004 1005 uix_sc.components.documentReady.push( documentReady ); 1006 return uix_sc; 1007 1008}( uix_sc, jQuery, window, document ) ); 1009 1010
1011/*! 1012 ************************************* 1013 * 9. Buttons 1014 ************************************* 1015 */ 1016uix_sc = ( function ( uix_sc, $, window, document ) { 1017 'use strict'; 1018 1019 1020 var documentReady = function( $ ) { 1021 1022 $( '.uix-sc-btn' ).each( function(){ 1023 1024 var $this = $( this ), 1025 hoverbg = $this.data( 'hover' ), 1026 defaultbg = $this.data( 'default-bg' ); 1027 1028 if ( hoverbg != '' ) { 1029 1030 $this.on( 'mouseenter', function( e ) { 1031 e.preventDefault(); 1032 $( this ).css( 'background-color', hoverbg ); 1033 1034 return false; 1035 }); 1036 $this.on( 'mouseleave', function( e ) { 1037 e.preventDefault(); 1038 $( this ).css( 'background-color', defaultbg ); 1039 1040 return false; 1041 }); 1042 1043 } 1044 1045 1046 1047 1048 }); 1049 1050 1051 }; 1052 1053 1054 uix_sc.buttons = { 1055 documentReady : documentReady 1056 }; 1057 1058 uix_sc.components.documentReady.push( documentReady ); 1059 return uix_sc; 1060 1061}( uix_sc, jQuery, window, document ) ); 1062 1063 1064/*! 1065 ************************************* 1066 * 10. Image Slider 1067 ************************************* 1068 */ 1069uix_sc = ( function ( uix_sc, $, window, document ) { 1070 'use strict'; 1071 1072 1073 var documentReady = function( $ ) { 1074 1075 $( '[data-uix-sc-slideshow="1"]' ).each( function() { 1076 1077 var $this = $( this ); 1078 1079 $this.UixShortcodesSlideshow({ 1080 1081 //Get parameter configuration from the data-* attribute of HTML 1082 auto : $this.data( 'auto' ), 1083 timing : $this.data( 'timing' ), 1084 loop : $this.data( 'loop' ), 1085 countTotalID : $this.data( 'count-total' ), 1086 countCurID : $this.data( 'count-now' ), 1087 paginationID : $this.data( 'controls-pagination' ), 1088 arrowsID : $this.data( 'controls-arrows' ), 1089 draggable : $this.data( 'draggable' ), 1090 draggableCursor : $this.data( 'draggable-cursor' ) 1091 }); 1092 1093 }); 1094 1095 }; 1096 1097 1098 uix_sc.imageSlider = { 1099 documentReady : documentReady 1100 }; 1101 1102 uix_sc.components.documentReady.push( documentReady ); 1103 return uix_sc; 1104 1105}( uix_sc, jQuery, window, document ) ); 1106 1107
1108/*! 1109 ************************************* 1110 * 11. Initialize the map container 1111 ************************************* 1112 */ 1113uix_sc = ( function ( uix_sc, $, window, document ) { 1114 'use strict'; 1115 1116 1117 var documentReady = function( $ ) { 1118 1119 $( '.uix-sc-map-preview-container' ).each( function( index ) { 1120 1121 var $frame = $( this ), 1122 fullclass = $frame.parent( 'div' ).attr( 'class' ), 1123 curheight = $frame.data( 'height' ); 1124 1125 $frame.prev( '.uix-sc-map-preview-tmpl' ).load( uixScRootUrl + 'includes/preview/map.html', function( response, status, xhr ) { 1126 1127 response = response.replace(/\<script([^>]+)\>/g, '' ).replace(/\<\/script\>/g, '' ); 1128 1129 //If it is full screen map 1130 if( typeof fullclass != typeof undefined ) { 1131 if ( fullclass.indexOf( 'full' ) > 0 ) { 1132 1133 $frame.css( 'height', $( window ).height() + 'px' ); 1134 curheight = '100%'; 1135 } 1136 } 1137 1138 1139 $frame.UixSCTmpl( response, { 1140 pluginPath : uixScRootUrl, 1141 width : $frame.data( 'width' ), 1142 height : curheight, 1143 style : $frame.data( 'style' ), 1144 apikey : $frame.data( 'apikey' ), 1145 latitude : $frame.data( 'latitude' ), 1146 longitude : $frame.data( 'longitude' ), 1147 zoom : $frame.data( 'zoom' ), 1148 name : $frame.data( 'name' ), 1149 marker : $frame.data( 'marker' ) 1150 } ); 1151 }); 1152 1153 }); 1154 1155 1156 }; 1157 1158 1159 uix_sc.map = { 1160 documentReady : documentReady 1161 }; 1162 1163 uix_sc.components.documentReady.push( documentReady ); 1164 return uix_sc; 1165 1166}( uix_sc, jQuery, window, document ) ); 1167 1168 1169 1170/*! 1171 * ************************************ 1172 * 12. Apply the original scripts 1173 * 1174 * Usage: if ( $.isFunction( $.uix_sc_init ) ) { $.uix_sc_init(); } 1175 * 1176 ************************************* 1177 */ 1178( function($) { 1179 'use strict'; 1180 1181 $.extend( { 1182 uix_sc_init:function () { 1183 1184 var scipts_pageLoaded = uix_sc.components.pageLoaded, 1185 scipts_documentReady = uix_sc.components.documentReady; 1186 1187 1188 for ( var i = 0, len = scipts_pageLoaded.length; i < len; i++ ) { 1189 scipts_pageLoaded[i](); 1190 } 1191 for ( var i = 0, len = scipts_documentReady.length; i < len; i++ ) { 1192 scipts_documentReady[i]( $ ); 1193 } 1194 1195 1196 } 1197 }); 1198 1199} ) ( jQuery ); 1200 1201 1202 1203 1204 1205 1206/* 1207 ************************************* 1208 * Custom Slidershow for Uix Shortcodes 1209 * @ Version 1.1 (July 30, 2020) 1210 * 1211 * @param {Boolean} auto - Setup a slideshow for the slider to animate automatically. 1212 * @param {Number} timing - Autoplay interval. 1213 * @param {Boolean} loop - Gives the slider a seamless infinite loop. 1214 * @param {String} countTotalID - Total number ID or class of counter. 1215 * @param {String} countCurID - Current number ID or class of counter. 1216 * @param {String} paginationID - Navigation ID for paging control of each slide. 1217 * @param {String} arrowsID - Previous/Next arrow navigation ID. 1218 * @param {Boolean} draggable - Allow drag and drop on the slider. 1219 * @param {String} draggableCursor - Drag & Drop Change icon/cursor while dragging. 1220 * 1221 ************************************* 1222 */ 1223( function ( $ ) { 1224 'use strict'; 1225 $.fn.UixShortcodesSlideshow = function( options ) { 1226 1227 // This is the easiest way to have default options. 1228 var settings = $.extend({ 1229 auto : false, 1230 timing : 10000, 1231 loop : false, 1232 countTotalID : 'p.count em.count', 1233 countCurID : 'p.count em.current', 1234 paginationID : '.uix-advanced-slider__pagination', 1235 arrowsID : '.uix-advanced-slider__arrows', 1236 draggable : false, 1237 draggableCursor : 'move' 1238 }, options ); 1239 1240 1241 this.each( function() { 1242 1243 1244 var $window = $( window ), 1245 windowWidth = window.innerWidth, 1246 windowHeight = window.innerHeight, 1247 animDelay = 0, 1248 $sliderWrapper = $( this ); 1249 1250 1251 sliderInit( false ); 1252 1253 $window.on( 'resize', function() { 1254 // Check window width has actually changed and it's not just iOS triggering a resize event on scroll 1255 if ( window.innerWidth != windowWidth ) { 1256 1257 // Update the window width for next time 1258 windowWidth = window.innerWidth; 1259 1260 sliderInit( true ); 1261 1262 } 1263 }); 1264 1265 1266 1267 /* 1268 * Get the CSS animation/transition duration for a DOM element 1269 * Useful for matching CSS animations and JS events 1270 * 1271 * @private
1272 * @description This function can be used separately in HTML pages or custom JavaScript. 1273 * @param {Object} el - Target object, using class name or ID to locate. 1274 * @return {String|JSON} - The value of property. 1275 */ 1276 function getTransitionDuration( el ) { 1277 1278 if ( typeof el === typeof undefined ) { 1279 return 0; 1280 } 1281 1282 1283 var style = window.getComputedStyle(el), 1284 duration = style.webkitTransitionDuration, 1285 delay = style.webkitTransitionDelay; 1286 1287 1288 if ( typeof duration != typeof undefined ) { 1289 // fix miliseconds vs seconds 1290 duration = (duration.indexOf("ms")>-1) ? parseFloat(duration) : parseFloat(duration)*1000; 1291 delay = (delay.indexOf("ms")>-1) ? parseFloat(delay) : parseFloat(delay)*1000; 1292 1293 return duration; 1294 } else { 1295 return 0; 1296 } 1297 1298 } 1299 1300 1301 1302 1303 /* 1304 * Initialize slideshow 1305 * 1306 * @param {Boolean} resize - Determine whether the window size changes. 1307 * @return {Void} 1308 */ 1309 function sliderInit( resize ) { 1310 1311 $sliderWrapper.each( function() { 1312 1313 var $this = $( this ), 1314 $items = $this.find( '.uix-sc-slideshow__item' ), 1315 $first = $items.first(), 1316 nativeItemW, 1317 nativeItemH, 1318 activated = $this.data( 'activated' ); 1319 1320 1321 1322 if ( typeof activated === typeof undefined || activated === 0 ) { 1323 1324 var dataAuto = settings.auto, 1325 dataTiming = settings.timing, 1326 dataLoop = settings.loop, 1327 dataControlsPagination = settings.paginationID, 1328 dataControlsArrows = settings.arrowsID, 1329 dataDraggable = settings.draggable, 1330 dataDraggableCursor = settings.draggableCursor, 1331 dataCountTotal = settings.countTotalID, 1332 dataCountCur = settings.countCurID; 1333 1334 1335 if ( typeof dataAuto === typeof undefined ) dataAuto = false; 1336 if ( typeof dataTiming === typeof undefined ) dataTiming = 10000; 1337 if ( typeof dataLoop === typeof undefined ) dataLoop = false; 1338 if ( typeof dataControlsPagination === typeof undefined ) dataControlsPagination = '.uix-advanced-slider__pagination'; 1339 if ( typeof dataControlsArrows === typeof undefined || dataControlsArrows == false ) dataControlsArrows = '.uix-advanced-slider__arrows'; 1340 if ( typeof dataDraggable === typeof undefined ) dataDraggable = false; 1341 if ( typeof dataDraggableCursor === typeof undefined || dataDraggableCursor == false ) dataDraggableCursor = 'move'; 1342 if ( typeof dataCountTotal === typeof undefined ) dataCountTotal = 'p.count em.count'; 1343 if ( typeof dataCountCur === typeof undefined ) dataCountCur = 'p.count em.current'; 1344 1345 1346 //Images loaded 1347 //------------------------------------- 1348 var images = []; 1349 $items.each( function() { 1350 var imgURL = $( this ).find( 'img' ).attr( 'src' ); 1351 if ( typeof imgURL != typeof undefined ) { 1352 images.push( imgURL ); 1353 } 1354 }); 1355 1356 loader( images, loadImage, function () { 1357 $sliderWrapper.addClass( 'is-loaded' ); 1358 }); 1359 1360 1361 1362 //Autoplay times 1363 var playTimes; 1364 //A function called "timer" once every second (like a digital watch). 1365 $this[0].animatedSlides; 1366 1367 1368 setTimeout( function(){ 1369 1370 //The speed of movement between elements. 1371 // Avoid the error that getTransitionDuration takes 0 1372 animDelay = getTransitionDuration( $first[0] ); 1373 1374 }, 100 ); 1375 1376 1377 1378 //Initialize the first item container 1379 //------------------------------------- 1380 $items.addClass( 'next' ); 1381 setTimeout( function() { 1382 $first.addClass( 'is-active' ); 1383 }, animDelay ); 1384 1385 1386 if ( $first.find( 'video' ).length > 0 ) { 1387 1388 //Returns the dimensions (intrinsic height and width ) of the video 1389 var video = document.getElementById( $first.find( 'video' ).attr( 'id' ) ), 1390 videoURL = $first.find( 'source:first' ).attr( 'src' ); 1391 1392 if ( typeof videoURL === typeof undefined ) videoURL = $first.find( 'video' ).attr( 'src' ); 1393 $first.find( 'video' ).css({ 1394 'width': $this.width() + 'px' 1395 }); 1396 1397 1398 video.addEventListener( 'loadedmetadata', function( e ) { 1399 $this.css( 'height', this.videoHeight*($this.width()/this.videoWidth) + 'px' ); 1400 1401 nativeItemW = this.videoWidth; 1402 nativeItemH = this.videoHeight; 1403 1404 //Initialize all the items to the stage 1405 addItemsToStage( $this, nativeItemW, nativeItemH, dataControlsPagination, dataControlsArrows, dataLoop, dataDraggable, dataDraggableCursor, dataCountTotal, dataCountCur ); 1406 1407 }, false); 1408 1409 video.src = videoURL; 1410 1411 1412 } else { 1413
1414 var imgURL = $first.find( 'img' ).attr( 'src' ); 1415 1416 if ( typeof imgURL != typeof undefined ) { 1417 var img = new Image(); 1418 1419 img.onload = function() { 1420 $this.css( 'height', $this.width()*(this.height/this.width) + 'px' ); 1421 1422 nativeItemW = this.width; 1423 nativeItemH = this.height; 1424 1425 //Initialize all the items to the stage 1426 addItemsToStage( $this, nativeItemW, nativeItemH, dataControlsPagination, dataControlsArrows, dataLoop, dataDraggable, dataDraggableCursor, dataCountTotal, dataCountCur ); 1427 1428 }; 1429 1430 img.src = imgURL; 1431 } 1432 1433 1434 1435 } 1436 1437 1438 1439 //Autoplay Slider 1440 //------------------------------------- 1441 if ( !resize ) { 1442 1443 1444 1445 if ( dataAuto && !isNaN( parseFloat( dataTiming ) ) && isFinite( dataTiming ) ) { 1446 1447 sliderAutoPlay( playTimes, dataTiming, dataLoop, $this, dataCountTotal, dataCountCur, dataControlsPagination, dataControlsArrows ); 1448 1449 $this.on({ 1450 mouseenter: function() { 1451 clearInterval( $this[0].animatedSlides ); 1452 }, 1453 mouseleave: function() { 1454 sliderAutoPlay( playTimes, dataTiming, dataLoop, $this, dataCountTotal, dataCountCur, dataControlsPagination, dataControlsArrows ); 1455 } 1456 }); 1457 1458 } 1459 1460 1461 } 1462 1463 //Prevents front-end javascripts that are activated with AJAX to repeat loading. 1464 $this.data( 'activated', 1 ); 1465 1466 }//endif activated 1467 1468 1469 1470 }); 1471 1472 1473 } 1474 1475 1476 1477 1478 /* 1479 * Trigger slider autoplay 1480 * 1481 * @param {Function} playTimes - Number of times. 1482 * @param {Number} timing - Autoplay interval. 1483 * @param {Boolean} loop - Gives the slider a seamless infinite loop. 1484 * @param {Object} slider - Selector of the slider . 1485 * @param {String} countTotalID - Total number ID or class of counter. 1486 * @param {String} countCurID - Current number ID or class of counter. 1487 * @param {String} paginationID - Navigation ID for paging control of each slide. 1488 * @param {String} arrowsID - Previous/Next arrow navigation ID. 1489 * @return {Void} - The constructor. 1490 */ 1491 function sliderAutoPlay( playTimes, timing, loop, slider, countTotalID, countCurID, paginationID, arrowsID ) { 1492 1493 var items = slider.find( '.uix-sc-slideshow__item' ), 1494 total = items.length; 1495 1496 slider[0].animatedSlides = setInterval( function() { 1497 1498 playTimes = parseFloat( items.filter( '.is-active' ).index() ); 1499 playTimes++; 1500 1501 1502 if ( !loop ) { 1503 if ( playTimes < total && playTimes >= 0 ) sliderUpdates( playTimes, $sliderWrapper, 'next', countTotalID, countCurID, paginationID, arrowsID, loop ); 1504 } else { 1505 if ( playTimes == total ) playTimes = 0; 1506 if ( playTimes < 0 ) playTimes = total-1; 1507 sliderUpdates( playTimes, $sliderWrapper, 'next', countTotalID, countCurID, paginationID, arrowsID, loop ); 1508 } 1509 1510 1511 1512 }, timing ); 1513 } 1514 1515 1516 1517 1518 /* 1519 * Initialize all the items to the stage 1520 * 1521 * @param {Object} slider - Current selector of each slider. 1522 * @param {Number} nativeItemW - Returns the intrinsic width of the image/video. 1523 * @param {Number} nativeItemH - Returns the intrinsic height of the image/video. 1524 * @param {String} paginationID - Navigation ID for paging control of each slide. 1525 * @param {String} arrowsID - Previous/Next arrow navigation ID. 1526 * @param {Boolean} loop - Gives the slider a seamless infinite loop. 1527 * @param {Boolean} draggable - Allow drag and drop on the slider. 1528 * @param {String} draggableCursor - Drag & Drop Change icon/cursor while dragging. 1529 * @param {String} countTotalID - Total number ID or class of counter. 1530 * @param {String} countCurID - Current number ID or class of counter. 1531 * @return {Void} 1532 */ 1533 function addItemsToStage( slider, nativeItemW, nativeItemH, paginationID, arrowsID, loop, draggable, draggableCursor, countTotalID, countCurID ) { 1534 1535 var $this = slider, 1536 $items = $this.find( '.uix-sc-slideshow__item' ), 1537 $first = $items.first(), 1538 itemsTotal = $items.length; 1539 1540 1541 //If arrows does not exist on the page, it will be added by default, 1542 //and the drag and drop function will be activated. 1543 if ( $( arrowsID ).length == 0 ) { 1544 $( 'body' ).prepend( '<div style="display:none;" class="uix-sc-slideshow__arrows '+arrowsID.replace('#','').replace('.','')+'"><a href="#" class="uix-sc-slideshow__arrows--prev"></a><a href="#" class="uix-sc-slideshow__arrows--next"></a></div>' ); 1545 } 1546 1547 1548 1549 //Prevent bubbling 1550 if ( itemsTotal == 1 ) { 1551 $( paginationID ).hide(); 1552 $( arrowsID ).hide(); 1553 } 1554 1555 1556 //Add identifiers for the first and last items
1557 $items.last().addClass( 'last' ); 1558 $items.first().addClass( 'first' ); 1559 1560 1561 1562 //Pagination dots 1563 //------------------------------------- 1564 var _dot = '', 1565 _dotActive = ''; 1566 _dot += '<ul>'; 1567 for ( var i = 0; i < itemsTotal; i++ ) { 1568 1569 _dotActive = ( i == 0 ) ? 'class="is-active"' : ''; 1570 1571 _dot += '<li><a '+_dotActive+' data-normal="1" data-index="'+i+'" href="javascript:void(0)"></a></li>'; 1572 } 1573 _dot += '</ul>'; 1574 1575 if ( $( paginationID ).html() == '' ) $( paginationID ).html( _dot ); 1576 1577 $( paginationID ).find( 'li a' ).off( 'click' ).on( 'click', function( e ) { 1578 e.preventDefault(); 1579 1580 //Prevent buttons' events from firing multiple times 1581 var $btn = $( this ); 1582 if ( $btn.attr( 'aria-disabled' ) == 'true' ) return false; 1583 $( paginationID ).find( 'li a' ).attr( 'aria-disabled', 'true' ); 1584 setTimeout( function() { 1585 $( paginationID ).find( 'li a' ).attr( 'aria-disabled', 'false' ); 1586 }, animDelay ); 1587 1588 1589 if ( !$( this ).hasClass( 'is-active' ) ) { 1590 1591 1592 //Determine the direction 1593 var curDir = 'prev'; 1594 if ( $( this ).attr( 'data-index' ) > parseFloat( $items.filter( '.is-active' ).index() ) ) { 1595 curDir = 'next'; 1596 } 1597 1598 1599 sliderUpdates( $( this ).attr( 'data-index' ), $this, curDir, countTotalID, countCurID, paginationID, arrowsID, loop ); 1600 1601 //Pause the auto play event 1602 clearInterval( $this[0].animatedSlides ); 1603 } 1604 1605 1606 1607 }); 1608 1609 //Next/Prev buttons 1610 //------------------------------------- 1611 var _prev = $( arrowsID ).find( '.uix-sc-slideshow__arrows--prev' ), 1612 _next = $( arrowsID ).find( '.uix-sc-slideshow__arrows--next' ); 1613 1614 $( arrowsID ).find( 'a' ).attr( { 1615 'href': 'javascript:void(0)', 1616 'data-normal': 1 1617 } ); 1618 1619 $( arrowsID ).find( 'a' ).removeClass( 'is-disabled' ); 1620 if ( !loop ) { 1621 _prev.addClass( 'is-disabled' ); 1622 } 1623 1624 1625 _prev.off( 'click' ).on( 'click', function( e ) { 1626 e.preventDefault(); 1627 1628 //Prevent buttons' events from firing multiple times 1629 if ( _prev.attr( 'aria-disabled' ) == 'true' ) return false; 1630 _prev.attr( 'aria-disabled', 'true' ); 1631 setTimeout( function() { 1632 _prev.attr( 'aria-disabled', 'false' ); 1633 }, animDelay ); 1634 1635 1636 sliderUpdates( parseFloat( $items.filter( '.is-active' ).index() ) - 1, $this, 'prev', countTotalID, countCurID, paginationID, arrowsID, loop ); 1637 1638 //Pause the auto play event 1639 clearInterval( $this[0].animatedSlides ); 1640 1641 }); 1642 1643 _next.off( 'click' ).on( 'click', function( e ) { 1644 e.preventDefault(); 1645 1646 1647 //Prevent buttons' events from firing multiple times 1648 if ( _next.attr( 'aria-disabled' ) == 'true' ) return false; 1649 _next.attr( 'aria-disabled', 'true' ); 1650 setTimeout( function() { 1651 _next.attr( 'aria-disabled', 'false' ); 1652 }, animDelay ); 1653 1654 1655 sliderUpdates( parseFloat( $items.filter( '.is-active' ).index() ) + 1, $this, 'next', countTotalID, countCurID, paginationID, arrowsID, loop ); 1656 1657 1658 //Pause the auto play event 1659 clearInterval( $this[0].animatedSlides ); 1660 1661 1662 }); 1663 1664 1665 1666 //Added touch method to mobile device and desktop 1667 //------------------------------------- 1668 var $dragDropTrigger = $items; 1669 1670 1671 //Make the cursor a move icon when a user hovers over an item 1672 if ( draggable && draggableCursor != '' && draggableCursor != false ) $dragDropTrigger.css( 'cursor', draggableCursor ); 1673 1674 1675 //Mouse event 1676 $dragDropTrigger.on( 'mousedown.UixShortcodesSlideshow touchstart.UixShortcodesSlideshow', function( e ) { 1677 1678 //Do not use "e.preventDefault()" to avoid prevention page scroll on drag in IOS and Android 1679 1680 var touches = e.originalEvent.touches; 1681 1682 $( this ).addClass( 'is-dragging' ); 1683 1684 1685 if ( touches && touches.length ) { 1686 $( this ).data( 'origin_mouse_x', parseInt( touches[0].pageX ) ); 1687 $( this ).data( 'origin_mouse_y', parseInt( touches[0].pageY ) ); 1688 1689 } else { 1690 1691 if ( draggable ) { 1692 $( this ).data( 'origin_mouse_x', parseInt( e.pageX ) ); 1693 $( this ).data( 'origin_mouse_y', parseInt( e.pageY ) ); 1694 } 1695 1696 1697 } 1698 1699 $dragDropTrigger.on( 'mouseup.UixShortcodesSlideshow touchmove.UixShortcodesSlideshow', function( e ) { 1700 1701 1702 $( this ).removeClass( 'is-dragging' ); 1703 var touches = e.originalEvent.touches, 1704 origin_mouse_x = $( this ).data( 'origin_mouse_x' ), 1705 origin_mouse_y = $( this ).data( 'origin_mouse_y' ); 1706 1707 if ( touches && touches.length ) { 1708 1709 var deltaX = origin_mouse_x - touches[0].pageX, 1710 deltaY = origin_mouse_y - touches[0].pageY; 1711 1712 //--- left 1713 if ( deltaX >= 50) { 1714 if ( $items.filter( '.is-active' ).index() < itemsTotal - 1 ) _next.trigger( 'click' ); 1715 } 1716 1717 //--- right 1718 if ( deltaX <= -50) { 1719 if ( $items.filter( '.is-active' ).index() > 0 ) _prev.trigger( 'click' ); 1720 } 1721 1722 //--- up 1723 if ( deltaY >= 50) { 1724 1725 1726 } 1727 1728 //--- down 1729 if ( deltaY <= -50) { 1730 1731 1732 } 1733 1734 1735 if ( Math.abs( deltaX ) >= 50 || Math.abs( deltaY ) >= 50 ) { 1736 $dragDropTrigger.off( 'touchmove.UixShortcodesSlideshow' ); 1737 } 1738 1739 1740 } else { 1741 1742 1743 if ( draggable ) { 1744 //right 1745 if ( e.pageX > origin_mouse_x ) { 1746 if ( $items.filter( '.is-active' ).index() > 0 ) _prev.trigger( 'click' ); 1747 } 1748 1749 //left 1750 if ( e.pageX < origin_mouse_x ) { 1751 if ( $items.filter( '.is-active' ).index() < itemsTotal - 1 ) _next.trigger( 'click' ); 1752 } 1753 1754 //down 1755 if ( e.pageY > origin_mouse_y ) { 1756 1757 } 1758 1759 //up 1760 if ( e.pageY < origin_mouse_y ) { 1761 1762 } 1763 1764 $dragDropTrigger.off( 'mouseup.UixShortcodesSlideshow' ); 1765 1766 } 1767 1768 1769 1770 } 1771 1772 1773 1774 } );//end: mouseup.UixShortcodesSlideshow touchmove.UixShortcodesSlideshow 1775 1776 1777 1778 1779 } );// end: mousedown.UixShortcodesSlideshow touchstart.UixShortcodesSlideshow 1780 1781 } 1782 1783 1784 1785 1786 /* 1787 * Transition Between Slides 1788 * 1789 * @param {Number} elementIndex - Index of current slider. 1790 * @param {Object} slider - Selector of the slider . 1791 * @param {String} dir - Switching direction indicator. 1792 * @param {String} countTotalID - Total number ID or class of counter. 1793 * @param {String} countCurID - Current number ID or class of counter. 1794 * @param {String} paginationID - Navigation ID for paging control of each slide. 1795 * @param {String} arrowsID - Previous/Next arrow navigation ID. 1796 * @param {Boolean} loop - Gives the slider a seamless infinite loop. 1797 * @return {Void} 1798 */
1799 function sliderUpdates( elementIndex, slider, dir, countTotalID, countCurID, paginationID, arrowsID, loop ) { 1800 1801 var $items = slider.find( '.uix-sc-slideshow__item' ), 1802 total = $items.length; 1803 1804 1805 1806 //Prevent bubbling 1807 if ( total == 1 ) { 1808 $( paginationID ).hide(); 1809 $( arrowsID ).hide(); 1810 return false; 1811 } 1812 1813 1814 1815 //Transition Interception 1816 //------------------------------------- 1817 if ( loop ) { 1818 if ( elementIndex == total ) elementIndex = 0; 1819 if ( elementIndex < 0 ) elementIndex = total-1; 1820 } else { 1821 $( arrowsID ).find( 'a' ).removeClass( 'is-disabled' ); 1822 if ( elementIndex == total - 1 ) $( arrowsID ).find( '.uix-sc-slideshow__arrows--next' ).addClass( 'is-disabled' ); 1823 if ( elementIndex == 0 ) $( arrowsID ).find( '.uix-sc-slideshow__arrows--prev' ).addClass( 'is-disabled' ); 1824 } 1825 1826 // To determine if it is a touch screen. 1827 var isTouchCapable = 'ontouchstart' in window || 1828 window.DocumentTouch && document instanceof window.DocumentTouch || 1829 navigator.maxTouchPoints > 0 || 1830 window.navigator.msMaxTouchPoints > 0; 1831 1832 if ( isTouchCapable ) { 1833 if ( elementIndex == total ) elementIndex = total-1; 1834 if ( elementIndex < 0 ) elementIndex = 0; 1835 1836 //Prevent bubbling 1837 if ( !loop ) { 1838 //first item 1839 if ( elementIndex == 0 ) { 1840 $( arrowsID ).find( '.uix-sc-slideshow__arrows--prev' ).addClass( 'is-disabled' ); 1841 } 1842 1843 //last item 1844 if ( elementIndex == total - 1 ) { 1845 $( arrowsID ).find( '.uix-sc-slideshow__arrows--next' ).addClass( 'is-disabled' ); 1846 } 1847 } 1848 1849 1850 } 1851 1852 1853 // call the current item 1854 //------------------------------------- 1855 var $current = $items.eq( elementIndex ); 1856 1857 1858 1859 //Determine the direction and add class to switching direction indicator. 1860 var dirIndicatorClass = ''; 1861 if ( dir == 'prev' ) dirIndicatorClass = 'prev'; 1862 if ( dir == 'next' ) dirIndicatorClass = 'next'; 1863 1864 1865 1866 //Add transition class to Controls Pagination 1867 $( paginationID ).find( 'li a' ).removeClass( 'leave' ); 1868 $( paginationID ).find( 'li a.is-active' ).removeClass( 'is-active' ).addClass( 'leave'); 1869 $( paginationID ).find( 'li a[data-index="'+elementIndex+'"]' ).addClass( 'is-active').removeClass( 'leave' ); 1870 1871 //Add transition class to each item 1872 $items.removeClass( 'leave prev next' ); 1873 $items.addClass( dirIndicatorClass ); 1874 slider.find( '.uix-sc-slideshow__item.is-active' ).removeClass( 'is-active' ).addClass( 'leave ' + dirIndicatorClass ); 1875 $items.eq( elementIndex ).addClass( 'is-active ' + dirIndicatorClass ).removeClass( 'leave' ); 1876 1877 1878 1879 1880 //Display counter 1881 //------------------------------------- 1882 $( countTotalID ).text( total ); 1883 $( countCurID ).text( parseFloat( elementIndex ) + 1 ); 1884 1885 1886 //Reset the default height of item 1887 //------------------------------------- 1888 itemDefaultInit( slider, $current ); 1889 1890 1891 1892 } 1893 1894 /* 1895 * Initialize the default height of item 1896 * 1897 * @param {Object} slider - Selector of the slider . 1898 * @param {Object} currentLlement - Current selector of each slider. 1899 * @return {Void} 1900 */ 1901 function itemDefaultInit( slider, currentLlement ) { 1902 1903 if ( currentLlement.find( 'video' ).length > 0 ) { 1904 1905 //Returns the dimensions (intrinsic height and width ) of the video 1906 var video = document.getElementById( currentLlement.find( 'video' ).attr( 'id' ) ), 1907 videoURL = currentLlement.find( 'source:first' ).attr( 'src' ); 1908 1909 if ( typeof videoURL === typeof undefined ) videoURL = currentLlement.find( 'video' ).attr( 'src' ); 1910 1911 currentLlement.find( 'video' ).css({ 1912 'width': currentLlement.closest( '.uix-sc-slideshow__outline' ).width() + 'px' 1913 }); 1914 1915 1916 video.addEventListener( 'loadedmetadata', function( e ) { 1917 1918 slider.css( 'height', this.videoHeight*(currentLlement.closest( '.uix-sc-slideshow__outline' ).width()/this.videoWidth) + 'px' ); 1919 1920 }, false); 1921 1922 video.src = videoURL; 1923 1924 1925 } else { 1926
1927 var imgURL = currentLlement.find( 'img' ).attr( 'src' ); 1928 1929 1930 if ( typeof imgURL != typeof undefined ) { 1931 var img = new Image(); 1932 1933 img.onload = function() { 1934 1935 slider.css( 'height', currentLlement.closest( '.uix-sc-slideshow__outline' ).width()*(this.height/this.width) + 'px' ); 1936 1937 }; 1938 1939 img.src = imgURL; 1940 } 1941 1942 1943 1944 } 1945 1946 1947 } 1948 1949 // loader will 'load' items by calling thingToDo for each item, 1950 // before calling allDone when all the things to do have been done. 1951 function loader(items, thingToDo, allDone) { 1952 if (!items) { 1953 // nothing to do. 1954 return; 1955 } 1956 1957 if ("undefined" === items.length) { 1958 // convert single item to array. 1959 items = [items]; 1960 } 1961 1962 var count = items.length; 1963 1964 // this callback counts down the things to do. 1965 var thingToDoCompleted = function (items, i) { 1966 count--; 1967 if (0 == count) { 1968 allDone(items); 1969 } 1970 }; 1971 1972 for (var i = 0; i < items.length; i++) { 1973 // 'do' each thing, and await callback. 1974 thingToDo(items, i, thingToDoCompleted); 1975 } 1976 } 1977 1978 function loadImage(items, i, onComplete) { 1979 var onLoad = function (e) { 1980 e.target.removeEventListener("load", onLoad); 1981 1982 // this next line can be removed. 1983 // only here to prove the image was loaded. 1984 document.body.appendChild(e.target); 1985 1986 // notify that we're done. 1987 onComplete(items, i); 1988 } 1989 var img = new Image(); 1990 img.addEventListener("load", onLoad, false); 1991 img.src = items[i]; 1992 img.style.display = 'none'; 1993 } 1994 1995 }); 1996 1997 }; 1998 1999}( jQuery )); 2000 2001 2002 2003 2004 2005/* 2006 ************************************* 2007 * Custom Hybrid Content Slider for Uix Shortcodes 2008 * @ Version 1.1 (July 30, 2020) 2009 * 2010 * @param {String} dir - Switching direction. The value is horizontal/vertical. 2011 * @param {Boolean} auto - Setup a slideshow for the slider to animate automatically. 2012 * @param {Number} timing - Autoplay interval. 2013 * @param {Boolean} loop - Gives the slider a seamless infinite loop. 2014 * @param {Number} speed - Delay Between items. 2015 * @param {String} nextID - Next arrow navigation ID. 2016 * @param {String} prevID - Previous arrow navigation ID. 2017 * @param {String} paginationID - Navigation ID for paging control of each slide. 2018 * @param {Boolean} draggable - Allow drag and drop on the slider. 2019 * @param {String} draggableCursor - Drag & Drop Change icon/cursor while dragging. 2020 * 2021 ************************************* 2022 */ 2023( function ( $ ) { 2024 'use strict'; 2025 $.fn.UixShortcodesHybridContentSlider = function( options ) { 2026 2027 // This is the easiest way to have default options. 2028 var settings = $.extend({ 2029 dir : 'horizontal', //horizontal,vertical 2030 auto : false, 2031 timing : 10000, 2032 speed : 550, 2033 loop : false, 2034 nextID : '#uix-sc-hybridcontent-slider__controls-5 .uix-sc-hybridcontent-slider__controls--next', 2035 prevID : '#uix-sc-hybridcontent-slider__controls-5 .uix-sc-hybridcontent-slider__controls--prev', 2036 paginationID : '#uix-sc-hybridcontent-slider__pagination-5', 2037 draggable : false, 2038 draggableCursor : 'move' 2039 }, options ); 2040 2041 2042 this.each( function() { 2043 2044 2045 var $window = $( window ), 2046 windowWidth = window.innerWidth, 2047 windowHeight = window.innerHeight, 2048 animDelay = 0, 2049 $sliderWrapper = $( this ); 2050 2051 2052 var $carouselWrapper, 2053 $carousel, 2054 $carouselItem, 2055 itemTotal, 2056 amountVisible, 2057 carouselDir, 2058 carouselSpeed, 2059 carouselNext, 2060 carouselPrev, 2061 carouselPagination, 2062 carouseDraggable, 2063 carouseDraggableCursor, 2064 dataAuto, 2065 dataTiming, 2066 dataLoop; 2067 2068 //each item width and height 2069 var eachItemNewWidth, eachItemNewHeight = []; 2070 2071 2072 //Store the latest position (X,Y) in a temporary variable 2073 var tempItemsPos = []; 2074 2075 2076 //Autoplay times 2077 var playTimes; 2078 2079 2080 //Returns the total height of items 2081 var totalItemsHeight = 0; 2082 2083 2084 sliderInit( false ); 2085 2086 $window.on( 'resize', function() { 2087 // Check window width has actually changed and it's not just iOS triggering a resize event on scroll 2088 if ( window.innerWidth != windowWidth ) { 2089 2090 // Update the window width for next time 2091 windowWidth = window.innerWidth; 2092 2093 sliderInit( true ); 2094 2095 } 2096 }); 2097 2098 2099 2100 /* 2101 * Initialize slideshow 2102 * 2103 * @param {Boolean} resize - Determine whether the window size changes. 2104 * @return {Void} 2105 */ 2106 function sliderInit( resize ) { 2107 2108 $sliderWrapper.each( function() { 2109 2110 2111 $carouselWrapper = $( this ); 2112 var activated = $carouselWrapper.data( 'activated' ); 2113 2114 2115 2116 if ( typeof activated === typeof undefined || activated === 0 ) { 2117 2118 2119 $carousel = $carouselWrapper.find( '.uix-sc-hybri
2119dcontent-slider__items' ); 2120 $carouselItem = $carouselWrapper.find( '.uix-sc-hybridcontent-slider__items > div' ); 2121 itemTotal = $carouselItem.length; 2122 amountVisible = 1; 2123 carouselDir = settings.dir; 2124 carouselSpeed = settings.speed; 2125 carouselNext = settings.nextID; 2126 carouselPrev = settings.prevID; 2127 carouselPagination = settings.paginationID; 2128 carouseDraggable = settings.draggable; 2129 carouseDraggableCursor = settings.draggableCursor; 2130 2131 2132 2133 if ( typeof carouselDir === typeof undefined ) carouselDir = 'horizontal'; 2134 if ( typeof carouselSpeed === typeof undefined ) carouselSpeed = 250; 2135 if ( typeof carouselNext === typeof undefined ) carouselNext = '#uix-sc-hybridcontent-slider__controls-123 .uix-sc-hybridcontent-slider__controls--next'; 2136 if ( typeof carouselPrev === typeof undefined ) carouselPrev = '#uix-sc-hybridcontent-slider__controls-123 .uix-sc-hybridcontent-slider__controls--prev'; 2137 if ( typeof carouselPagination === typeof undefined ) carouselPagination = '#uix-sc-hybridcontent-slider__pagination-123'; 2138 if ( typeof carouseDraggable === typeof undefined ) carouseDraggable = false; 2139 if ( typeof carouseDraggableCursor === typeof undefined ) carouseDraggableCursor = 'move'; 2140 2141 2142 //Autoplay parameters 2143 dataAuto = settings.auto; 2144 dataTiming = settings.timing; 2145 dataLoop = settings.loop; 2146 2147 if ( typeof dataAuto === typeof undefined ) dataAuto = false; 2148 if ( typeof dataTiming === typeof undefined ) dataTiming = 10000; 2149 if ( typeof dataLoop === typeof undefined ) dataLoop = false; 2150 2151 2152 //set speed for dom 2153 $carousel.css('transition', 'all '+carouselSpeed+'ms'); 2154 $carouselItem.css('transition', 'all '+carouselSpeed+'ms'); 2155 2156 2157 2158 //A function called "timer" once every second (like a digital watch). 2159 $carouselWrapper[0].animatedSlides; 2160 2161 2162 2163 2164 // Get the width and height of each item 2165 $carouselItem.each( function( index ) { 2166 var _height = $( this ).height(); 2167 2168 eachItemNewHeight.push( _height ); 2169 $( this ).attr({ 2170 'data-height': _height, 2171 'data-index': index 2172 }); 2173 }); 2174 2175 2176 //Returns the total height of items 2177 for (var i = 0; i < eachItemNewHeight.length; i++ ) { 2178 totalItemsHeight += eachItemNewHeight[i]; 2179 if ( (i+1) == (itemTotal - amountVisible) ) break; 2180 } 2181 2182 //Set target index of the carousel buttons 2183 setButtonTargetIndex( $( carouselNext ), $( carouselPrev ), 'init', null ); 2184 2185 2186 2187 //set actived item & initialize the height of container 2188 setContainerSize( 0 ); 2189 $carouselItem.addClass( 'js-is-ready' ); 2190 2191 2192 // Activate the current item from carouse 2193 setItemState( 0 ); 2194 2195 2196 /* 2197 --------------------------- 2198 Initialize carousel 2199 --------------------------- 2200 */ 2201 var eachItemOldWidth = $carousel.width()/amountVisible; 2202 2203 eachItemNewWidth = ( $carouselWrapper.width() / amountVisible ); 2204 2205 if ( carouselDir == 'horizontal' ) { 2206 $carousel.css( 'width', itemTotal * eachItemOldWidth ); 2207 } 2208 2209 2210 // Re-order all items 2211 carouselReOrder(); 2212 2213 2214 2215 //default button status 2216 $( carouselPrev ).addClass( 'is-disabled' ).data( 'disabled', 1 ); 2217 2218 2219 2220 /* 2221 --------------------------- 2222 Move left/up 2223 --------------------------- 2224 */ 2225 $( carouselNext ).off( 'click' ).on( 'click', $carouselWrapper, function( e ) { 2226 e.preventDefault(); 2227 2228 //Prevent buttons' events from firing multiple times 2229 if ( $( this ).attr( 'aria-disabled' ) == 'true' ) return false; 2230 $( this ).attr( 'aria-disabled', 'true' ); 2231 2232 $( this ) 2233 .delay(carouselSpeed) 2234 .queue(function(next) { $( this ).attr( 'aria-disabled', 'false' ); next(); }); 2235 2236 // 2237 movePositionWithButton( false, $( this ), e, 'next' ); 2238 2239 //Pause the auto play event 2240 clearInterval( $carouselWrapper[0].animatedSlides ); 2241 2242 2243 }); 2244 2245 2246 /* 2247 --------------------------- 2248 Move right/down 2249 --------------------------- 2250 */ 2251 2252 $( carouselPrev ).off( 'click' ).on( 'click', $carouselWrapper, function( e ) { 2253 e.preventDefault(); 2254 2255 //Prevent buttons' events from firing multiple times 2256 if ( $( this ).attr( 'aria-disabled' ) == 'true' ) return false;
2257 $( this ).attr( 'aria-disabled', 'true' ); 2258 2259 $( this ) 2260 .delay(carouselSpeed) 2261 .queue(function(next) { $( this ).attr( 'aria-disabled', 'false' ); next(); }); 2262 2263 // 2264 movePositionWithButton( false, $( this ), e, 'prev' ); 2265 2266 //Pause the auto play event 2267 clearInterval( $carouselWrapper[0].animatedSlides ); 2268 2269 }); 2270 2271 2272 /* 2273 --------------------------- 2274 Pagination 2275 --------------------------- 2276 */ 2277 if ( $( carouselPagination ).length > 0 && $( carouselPagination ).html().length == 0 ) { 2278 //Button to add pagination automatically 2279 var _dot = ''; 2280 _dot += '<ul class="uix-sc-hybridcontent-slider__pagination--default">'; 2281 for ( var i = 0; i < itemTotal; i++ ) { 2282 _dot += '<li><a data-normal="1" data-target-index="'+i+'" href="javascript:void(0);"></a></li>'; 2283 } 2284 _dot += '</ul>'; 2285 2286 $( carouselPagination ).html( _dot ).promise().done( function(){ 2287 // Activate the currently selected Pagination 2288 setPaginationState( 0 ); 2289 }); 2290 } else { 2291 // Activate the currently selected Pagination 2292 setPaginationState( 0 ); 2293 } 2294 2295 2296 $( carouselPagination ).find( 'li a' ).off( 'click' ).on( 'click', $carouselWrapper, function( e ) { 2297 e.preventDefault(); 2298 2299 //Prevent buttons' events from firing multiple times 2300 if ( $( this ).attr( 'aria-disabled' ) == 'true' ) return false; 2301 $( carouselPagination ).find( 'li a' ).attr( 'aria-disabled', 'true' ); 2302 2303 $( carouselPagination ).find( 'li a' ) 2304 .delay(carouselSpeed) 2305 .queue(function(next) { $( carouselPagination ).find( 'li a' ).attr( 'aria-disabled', 'false' ); next(); }); 2306 2307 2308 // 2309 if ( !$( this ).parent().hasClass( 'is-active' ) ) { 2310 2311 movePositionWithButton( true, $( this ), e, 'next' ); 2312 2313 //Pause the auto play event 2314 clearInterval( $carouselWrapper[0].animatedSlides ); 2315 } 2316 2317 }); 2318 2319 2320 2321 2322 2323 2324 //Added touch method to mobile device and desktop 2325 //------------------------------------- 2326 var $dragDropTrigger = $carouselWrapper; 2327 2328 2329 //Make the cursor a move icon when a user hovers over an item 2330 if ( carouseDraggable && carouseDraggableCursor != '' && carouseDraggableCursor != false ) $dragDropTrigger.css( 'cursor', carouseDraggableCursor ); 2331 2332 2333 2334 var direction; 2335 2336 2337 //Mouse event 2338 $dragDropTrigger.on( 'mousedown.UixShortcodesHybridContentSlider touchstart.UixShortcodesHybridContentSlider', function( e ) { 2339 2340 //Do not use "e.preventDefault()" to avoid prevention page scroll on drag in IOS and Android 2341 2342 var touches = e.originalEvent.touches; 2343 2344 $( this ).addClass( 'is-dragging' ); 2345 2346 2347 if ( touches && touches.length ) { 2348 $( this ).data( 'origin_mouse_x', parseInt( touches[0].pageX ) ); 2349 $( this ).data( 'origin_mouse_y', parseInt( touches[0].pageY ) ); 2350 2351 } else { 2352 2353 if ( carouseDraggable ) { 2354 $( this ).data( 'origin_mouse_x', parseInt( e.pageX ) ); 2355 $( this ).data( 'origin_mouse_y', parseInt( e.pageY ) ); 2356 } 2357 2358 2359 } 2360 2361 $dragDropTrigger.on( 'mouseup.UixShortcodesHybridContentSlider touchmove.UixShortcodesHybridContentSlider', function( e ) { 2362 2363 2364 $( this ).removeClass( 'is-dragging' ); 2365 var touches = e.originalEvent.touches, 2366 origin_mouse_x = $( this ).data( 'origin_mouse_x' ), 2367 origin_mouse_y = $( this ).data( 'origin_mouse_y' ); 2368 2369 if ( touches && touches.length ) { 2370 2371 var deltaX = origin_mouse_x - touches[0].pageX, 2372 deltaY = origin_mouse_y - touches[0].pageY; 2373 2374 2375 2376 2377 if ( carouselDir == 'horizontal' ) { 2378 //--- left 2379 if ( deltaX >= 50) { 2380 direction = 'panleft'; 2381 } 2382 2383 //--- right 2384 if ( deltaX <= -50) { 2385 direction = 'panright'; 2386 } 2387 } else { 2388 //--- up 2389 if ( deltaY >= 50) { 2390 direction = 'panup'; 2391 } 2392 2393 //--- down 2394 if ( deltaY <= -50) { 2395 direction = 'pandown'; 2396 } 2397 } 2398 2399 2400 2401 if ( Math.abs( deltaX ) >= 50 || Math.abs( deltaY ) >= 50 ) { 2402 $dragDropTrigger.off( 'touchmove.UixShortcodesHybridContentSlider' ); 2403 } 2404 2405 2406 2407 2408 } else { 2409 2410 2411 if ( carouseDraggable ) { 2412 2413 2414 2415 if ( carouselDir == 'horizontal' ) { 2416 //right 2417 if ( e.pageX > origin_mouse_x ) { 2418 direction = 'panright'; 2419 } 2420 2421 //left 2422 if ( e.pageX < origin_mouse_x ) { 2423 direction = 'panleft'; 2424 } 2425 2426 } else { 2427 //down 2428 if ( e.pageY > origin_mouse_y ) { 2429 direction = 'pandown'; 2430 } 2431 2432 //up 2433 if ( e.pageY < origin_mouse_y ) { 2434 direction = 'panup'; 2435 } 2436 } 2437 2438 2439 2440 2441 $dragDropTrigger.off( 'mouseup.UixShortcodesHybridContentSlider' ); 2442 2443 } 2444 2445 2446 2447 } 2448 2449 2450 2451 2452 //=============== 2453 //=============== 2454 switch ( direction ) { 2455 case 'panleft': 2456 case 'panup': 2457 2458 $( carouselNext ).trigger( 'click' ); 2459 2460 break; 2461 2462 case 'panright': 2463 case 'pandown': 2464 2465 $( carouselPrev ).trigger( 'click' ); 2466 2467 break; 2468 2469 } 2470 2471 2472 //Pause the auto play event 2473 clearInterval( $carouselWrapper[0].animatedSlides ); 2474 2475 2476 2477 } );//end: mouseup.UixShortcodesHybridContentSlider touchmove.UixShortcodesHybridContentSlider 2478 2479 2480 2481 2482 } );// end: mousedown.UixShortcodesHybridContentSlider touchstart.UixShortcodesHybridContentSlider 2483 2484 2485 2486 2487 2488 2489 2490 2491 //Autoplay Slider 2492 //------------------------------------- 2493 if ( dataAuto && !isNaN( parseFloat( dataTiming ) ) && isFinite( dataTiming ) ) { 2494
2495 sliderAutoPlay( playTimes, dataTiming, dataLoop ); 2496 2497 $carouselWrapper.on({ 2498 mouseenter: function() { 2499 clearInterval( $carouselWrapper[0].animatedSlides ); 2500 }, 2501 mouseleave: function() { 2502 sliderAutoPlay( playTimes, dataTiming, dataLoop ); 2503 } 2504 }); 2505 2506 } 2507 2508 2509 2510 2511 2512 //Prevents front-end javascripts that are activated with AJAX to repeat loading. 2513 $carouselWrapper.data( 'activated', 1 ); 2514 2515 }//endif activated 2516 2517 2518 2519 2520 2521 2522 }); 2523 2524 2525 } 2526 2527 2528 2529 /* 2530 --------------------------- 2531 Re-order all items 2532 --------------------------- 2533 */ 2534 2535 function carouselReOrder() { 2536 2537 2538 //Initialize the width and height of each item 2539 if ( carouselDir == 'horizontal' ) { 2540 var boxWidth = eachItemNewWidth; 2541 2542 $carouselItem.each( function( i ) { 2543 $( this ).css({ 2544 'width': boxWidth + 'px', 2545 'height': eachItemNewHeight[i] + 'px', 2546 'transform': 'translateX( '+(i * boxWidth)+'px )' 2547 }); 2548 }); 2549 2550 2551 } else { 2552 2553 $carouselItem.each( function( i ) { 2554 2555 var yIncrement = 0; 2556 for (var k = 0; k < eachItemNewHeight.length; k++ ) { 2557 var tempY = ( typeof eachItemNewHeight[k-1] === typeof undefined ) ? 0 : eachItemNewHeight[k-1]; 2558 yIncrement += tempY; 2559 if ( k == i ) break; 2560 } 2561 2562 $( this ).css({ 2563 'height': eachItemNewHeight[i] + 'px', 2564 'transform': 'translateY( '+yIncrement+'px )' 2565 }); 2566 }); 2567 2568 2569 } 2570 2571 2572 } 2573 2574 2575 2576 2577 /* 2578 * Trigger slider autoplay 2579 * 2580 * @param {Function} playTimes - Number of times. 2581 * @param {Number} timing - Autoplay interval. 2582 * @param {Boolean} loop - Gives the slider a seamless infinite loop. 2583 * @return {Void} 2584 */ 2585 function sliderAutoPlay( playTimes, timing, loop ) { 2586 2587 $carouselWrapper[0].animatedSlides = setInterval( function() { 2588 2589 var autoMove = function( indexGo ) { 2590 2591 // Retrieve the position (X,Y) of an element 2592 var moveX = eachItemNewWidth * indexGo; 2593 2594 var moveYIncrement = 0; 2595 for (var k = 0; k < eachItemNewHeight.length; k++ ) { 2596 var tempY = ( typeof eachItemNewHeight[k-1] === typeof undefined ) ? 0 : eachItemNewHeight[k-1]; 2597 moveYIncrement += tempY; 2598 if ( k == indexGo ) break; 2599 } 2600 var moveY = moveYIncrement; 2601 2602 // 2603 var delta = ( carouselDir == 'horizontal' ) ? -moveX : -moveY; 2604 2605 // 2606 itemUpdates( $carouselWrapper, 'auto', delta, null, false, indexGo, eachItemNewHeight ); 2607 }; 2608 2609 playTimes = parseFloat( $carouselItem.filter( '.is-active' ).index() ); 2610 playTimes++; 2611 2612 2613 if ( !loop ) { 2614 if ( playTimes < itemTotal && playTimes >= 0 ) { 2615 autoMove( playTimes ); 2616 } 2617 } else { 2618 if ( playTimes == itemTotal ) playTimes = 0; 2619 if ( playTimes < 0 ) playTimes = itemTotal-1; 2620 2621 autoMove( playTimes ); 2622 } 2623 2624 }, timing ); 2625 } 2626 2627 2628 2629 2630 /* 2631 * Transition Between Items 2632 * 2633 * @param {Element} wrapper - Wrapper of carousel. 2634 * @param {?Element|String} curBtn - The button that currently triggers the move. 2635 * @param {Number|Array} delta - The value returned will need to be adjusted according to the offset rate. 2636 * @param {?Number} speed - Sliding speed. Please set to 0 when rebounding. 2637 * @param {Boolean} dragging - Determine if the object is being dragged. 2638 * @param {!Number} indexGo - The target item index. 2639 * @param {String|Array} itemsHeight - Return all items height. 2640 * @return {Void} 2641 */ 2642 function itemUpdates( wrapper, curBtn, delta, speed, dragging, indexGo, itemsHeight ) { 2643 2644 if ( speed == null ) speed = carouselSpeed/1000; 2645 2646 var $curWrapper = wrapper.children( '.uix-sc-hybridcontent-slider__items' ), //Default: $carousel 2647 $curItems = $curWrapper.find( '> div' ); //Default: $carouselItem 2648 2649 2650 //Get height constant 2651 var itemsHeightArr = []; 2652 var _itemsHeight = itemsHeight.toString().split( ',' ); 2653 _itemsHeight.forEach( function( element ) { 2654 itemsHeightArr.push( parseFloat(element) ); 2655 }); 2656 2657 2658 //Check next or previous event 2659 var btnType = 'init'; 2660 if ( curBtn != null && curBtn != 'auto' ) { 2661 if ( typeof curBtn.attr( 'class' ) !== typeof undefined ) { 2662 btnType = ( curBtn.attr( 'class' ).indexOf( '--next' ) >=0 ) ? 'next' : 'prev'; 2663 } else { 2664 btnType = 'next'; 2665 } 2666 2667 } 2668 2669 //Check next or previous event ( Autoplay ) 2670 if ( curBtn == 'auto' ) btnType = 'next';; 2671 2672 2673 //Clone the first element to the last position 2674 if ( carouselDir == 'horizontal' ) { 2675 2676 var boxWidth = eachItemNewWidth; 2677 2678 2679 $curItems.each( function( i ) { 2680 2681 var xIncrement = 0; 2682 2683 for (var k = 0; k < itemTotal; k++ ) { 2684 var tempX = ( k == 0 ) ? 0 : boxWidth; 2685 xIncrement += tempX; 2686 if ( k == i ) break; 2687 } 2688 2689 2690 2691 if ( Array.isArray( delta ) ) { 2692 2693 //Rebound effect of drag offset 2694 xIncrement = ( delta.length == 0 ) ? xIncrement : delta[i]; 2695 2696 } else { 2697 2698 if ( !dragging ) { 2699 //console.log( 'btnType: ' + btnType + ' indexGo: ' + indexGo ); 2700 2701 2702 var curWidthIncrement = 0; 2703 2704 for (var m= 0; m < itemTotal; m++ ) { 2705 var tempW = ( m == 0 ) ? 0 : boxWidth; 2706 curWidthIncrement += tempW; 2707 if ( m == ( btnType == 'next' ? indexGo : indexGo-1 ) ) break; 2708 } 2709 2710 xIncrement = xIncrement + -curWidthIncrement; 2711 } else { 2712 //console.log( 'dragging...' ); 2713 var x = Math.round(getTranslate(target ) / boxWidth ) * boxWidth; 2714 xIncrement = x + delta; 2715 } 2716 } 2717 2718 2719 //-- 2720 $( this ).css({ 2721 'transform': 'translateX( '+xIncrement+'px )' 2722 }); 2723 2724 //-- 2725 setTimeout( function() { 2726 2727 if ( !dragging && !Array.isArray( delta ) ) { 2728 2729 //Get index of current element 2730 var currentIndex = 0; 2731 2732 2733 2734 //The state of the control button 2735 setButtonState( Math.round( getTranslate($curItems.first()[0] ) ), Math.round( ($curItems.length - amountVisible) * boxWidth ) ); 2736 2737 //Initialize the height of container 2738 currentIndex = Math.round( getTranslate($curItems.first()[0] )/boxWidth ); 2739 setContainerSize( currentIndex ); 2740 2741 //Set target index of the carousel buttons 2742 setButtonTargetIndex( $( carouselNext ), $( carouselPrev ), btnType, ( btnType == 'next' ? Math.abs( currentIndex ) : Math.abs( currentIndex ) + 1 ) ); 2743 2744 // Activate the currently selected Pagination 2745 setPaginationState( Math.abs( currentIndex ) ); 2746 2747 // Activate the current item from carouse 2748 setItemState( Math.abs( currentIndex ) ); 2749 2750 //Store the latest position (X,Y) in a temporary variable 2751 tempItemsPos = createStoreLatestPosition(); 2752 2753 } 2754 }, speed); 2755 2756 }); 2757 2758 2759 } else { 2760 2761 2762 $curItems.each( function( i ) { 2763 2764 var yIncrement = 0; 2765 2766 for (var k = 0; k < itemsHeightArr.length; k++ ) { 2767 var tempY = ( typeof itemsHeightArr[k-1] === typeof undefined ) ? 0 : itemsHeightArr[k-1]; 2768 yIncrement += tempY; 2769 if ( k == i ) break; 2770 } 2771 2772 if ( Array.isArray( delta ) ) { 2773 2774 //Rebound effect of drag offset 2775 yIncrement = ( delta.length == 0 ) ? yIncrement : delta[i]; 2776 2777 } else { 2778 2779 if ( !dragging ) { 2780 //console.log( 'btnType: ' + btnType + ' indexGo: ' + indexGo ); 2781 2782 2783 var curHeightIncrement = 0; 2784 2785 for (var m = 0; m < itemsHeightArr.length; m++ ) { 2786 var tempH = ( typeof itemsHeightArr[m-1] === typeof undefined ) ? 0 : itemsHeightArr[m-1]; 2787 curHeightIncrement += tempH; 2788 if ( m == ( btnType == 'next' ? indexGo : indexGo-1 ) ) break; 2789 } 2790 2791 2792 yIncrement = yIncrement + -curHeightIncrement; 2793 } else { 2794 //console.log( 'dragging...' ); 2795 var draggingItemHeight = ( typeof itemsHeightArr[indexGo-1] === typeof undefined ) ? itemsHeightArr[indexGo] : itemsHeightArr[indexGo-1]; 2796 2797 var y = Math.round(getTranslate(target ) / draggingItemHeight ) * draggingItemHeight; 2798 yIncrement = y + delta; 2799 } 2800 } 2801 2802 2803 //-- 2804 $( this ).css({ 2805 'transform': 'translateY( '+yIncrement+'px )' 2806 }); 2807 2808 //-- 2809 setTimeout( function() { 2810 2811 if ( !dragging && !Array.isArray( delta ) ) { 2812 2813 //The state of the control button 2814 setButtonState( getTranslate($curItems.first()[0] ), totalItemsHeight ); 2815 2816 //Set target index of the carousel buttons 2817 setButtonTargetIndex( $( carouselNext ), $( carouselPrev ), btnType, indexGo ); 2818 2819 //set actived item & initialize the height of container 2820 setContainerSize( ( btnType == 'next' ? indexGo : indexGo-1 ) ); 2821 2822 // Activate the currently selected Pagination 2823 setPaginationState( ( btnType == 'next' ? indexGo : indexGo-1 ) ); 2824 2825 // Activate the current item from carouse 2826 setItemState( ( btnType == 'next' ? indexGo : indexGo-1 ) ); 2827 2828 //Store the latest position (X,Y) in a temporary variable 2829 tempItemsPos = createStoreLatestPosition(); 2830 2831 2832 } 2833 2834 }, speed); 2835 2836 }); 2837 2838 2839 2840 } 2841 2842 2843 2844 2845 } 2846 2847 2848 2849 /* 2850 * Use the button to trigger the transition between the two sliders 2851 * 2852 * @param {Boolean} paginationEnable - Determine whether it is triggered by pagination 2853 * @param {Element} $btn - The button that currently triggers the move. 2854 * @param {Object} event - Bind an event handler to the "click" JavaScript event, 2855 * @param {String} type - Move next or previous. 2856 * @return {Void} 2857 */ 2858 function movePositionWithButton( paginationEnable, $btn, event, type ) { 2859 var $curWrapper = $( event.data[0] ), 2860 //Protection button is not triggered multiple times. 2861 btnDisabled = $btn.data( 'disabled' ), 2862 2863 //Get current button index 2864 tIndex = parseFloat( $btn.attr( 'data-target-index' ) ); 2865 2866 2867 // Retrieve the position (X,Y) of an element 2868 var moveX = eachItemNewWidth, 2869 moveY = ( typeof eachItemNewHeight[tIndex-1] === typeof undefined ) ? 0 : eachItemNewHeight[tIndex-1]; 2870 2871 if ( paginationEnable ) { 2872 2873 //-- 2874 moveX = eachItemNewWidth * tIndex; 2875 2876 //-- 2877 var moveYIncrement = 0; 2878 for (var k = 0; k < eachItemNewHeight.length; k++ ) { 2879 var tempY = ( typeof eachItemNewHeight[k-1] === typeof undefined ) ? 0 : eachItemNewHeight[k-1]; 2880 moveYIncrement += tempY; 2881 if ( k == tIndex ) break; 2882 } 2883 moveY = moveYIncrement; 2884 2885 } 2886 2887 2888 2889 // 2890 var delta; 2891 if ( type == 'next' ) { 2892 delta = ( carouselDir == 'horizontal' ) ? -moveX : -moveY; 2893 } else { 2894 delta = ( carouselDir == 'horizontal' ) ? moveX : moveY; 2895 } 2896 2897 2898 if ( typeof btnDisabled === typeof undefined ) { 2899 itemUpdates( $curWrapper, $btn, delta, null, false, tIndex, eachItemNewHeight ); 2900 2901 } 2902 } 2903 2904 2905 2906 /* 2907 * Activate the currently selected Pagination 2908 * 2909 * @param {Number} index - Get index of current element. 2910 * @return {Void} 2911 */ 2912 function setPaginationState( index ) { 2913 $( carouselPagination ).find( 'li' ).removeClass( 'is-active' ); 2914 $( carouselPagination ).find( 'li a[data-target-index="'+index+'"]' ).parent().addClass( 'is-active' ); 2915 } 2916 2917 /* 2918 * Activate the current item from carouse 2919 * 2920 * @param {Number} index - Get index of current element. 2921 * @return {Void} 2922 */ 2923 function setItemState( index ) { 2924 $carouselItem.removeClass( 'is-active' ); 2925 $carouselItem.eq( index ).addClass( 'is-active' ); 2926 } 2927 2928 /* 2929 * Store the latest position (X,Y) in a temporary variable 2930 * 2931 * @return {Array} - Return to a new position. 2932 */ 2933 function createStoreLatestPosition() { 2934 var pos = []; 2935 // Retrieve the temporary variable of each item. 2936 $carouselItem.each( function() { 2937 pos.push( ( carouselDir == 'horizontal' ? getTranslate($( this )[0] ) : getTranslate($( this )[0] ) ) ); 2938 }); 2939 return pos; 2940 } 2941 2942 2943 /* 2944 * Initialize the height of container 2945 * 2946 * @param {Number} index - Get index of current element. 2947 * @return {Void} 2948 */ 2949 function setContainerSize( index ) { 2950 2951 var _h = eachItemNewHeight[Math.abs( index )]; 2952 if ( typeof _h !== typeof undefined ) { 2953 $carousel.css( 'height', eachItemNewHeight[Math.abs( index )] + 'px' ); 2954 2955 } 2956 2957 } 2958 2959 2960 2961 2962 /* 2963 * Set target index of the carousel buttons 2964 * 2965 * @param {Element} nextBtn - The next move button. 2966 * @param {Element} prevBtn - The previous move button. 2967 * @param {String} type - The type of button is triggered. Values: next, prev, init 2968 * @param {?Number} indexGo - The target item index. 2969 * @return {Void} 2970 */ 2971 function setButtonTargetIndex( nextBtn, prevBtn, type, indexGo ) { 2972 2973 switch ( type ) { 2974 case 'init': 2975 nextBtn.attr({ 2976 'data-target-index': 1 2977 }); 2978 prevBtn.attr({ 2979 'data-target-index': 0 2980 }); 2981 2982 break; 2983 2984 case 'next': 2985 var nextBtnOldTargetIndex1 = parseFloat( nextBtn.attr( 'data-target-index' ) ); 2986 var prevBtnOldTargetIndex1 = parseFloat( prevBtn.attr( 'data-target-index' ) ); 2987 2988 if ( indexGo != null ) { 2989 nextBtnOldTargetIndex1 = indexGo; 2990 prevBtnOldTargetIndex1 = indexGo-1; 2991 } 2992 2993 nextBtn.attr({ 2994 'data-target-index': nextBtnOldTargetIndex1+1 2995 }); 2996 prevBtn.attr({ 2997 'data-target-index': prevBtnOldTargetIndex1+1 2998 }); 2999 3000 break; 3001 3002 case 'prev': 3003 var nextBtnOldTargetIndex2 = parseFloat( nextBtn.attr( 'data-target-index' ) ) - 1; 3004 var prevBtnOldTargetIndex2 = parseFloat( prevBtn.attr( 'data-target-index' ) ) - 1; 3005 3006 if ( indexGo != null ) { 3007 nextBtnOldTargetIndex2 = indexGo; 3008 prevBtnOldTargetIndex2 = indexGo-1; 3009 } 3010 3011 3012 nextBtn.attr({ 3013 'data-target-index': nextBtnOldTargetIndex2 3014 }); 3015 prevBtn.attr({ 3016 'data-target-index': prevBtnOldTargetIndex2 3017 }); 3018 3019 break; 3020 } 3021 } 3022 3023 /* 3024 * The state of the control button 3025 * 3026 * @param {Number} firstOffset - Get the computed Translate X or Y values of a given first DOM element. 3027 * @param {Number} lastOffset - Get the computed Translate X or Y values of a given last DOM element. 3028 * @return {Void} 3029 */ 3030 function setButtonState( firstOffset, lastOffset ) { 3031 3032 if ( Math.abs( firstOffset ) == lastOffset ) { 3033 $( carouselNext ).addClass( 'is-disabled' ).data( 'disabled', 1 ); 3034 $( carouselPrev ).removeClass( 'is-disabled' ).removeData( 'disabled' ); 3035 } else if ( Math.round( firstOffset ) == 0 ) { 3036 $( carouselNext ).removeClass( 'is-disabled' ).removeData( 'disabled' ); 3037 $( carouselPrev ).addClass( 'is-disabled' ).data( 'disabled', 1 ); 3038 } else { 3039 $( carouselNext ).removeClass( 'is-disabled' ).removeData( 'disabled' ); 3040 $( carouselPrev ).removeClass( 'is-disabled' ).removeData( 'disabled' ); 3041 } 3042 } 3043 3044 3045 3046 3047 /* 3048 * Get transform value 3049 * 3050 * @param {Number} node - Dom node selector 3051 * @return {Void} 3052 */ 3053 function getTranslate(node){ 3054 var transformStyle = node.style.transform; 3055 // => "translateX(1239.32px)" 3056 3057 var translateXorY = transformStyle.replace(/[^\d.]/g, ''); 3058 return translateXorY; 3059 } 3060 3061 3062 3063 3064 }); 3065 3066 }; 3067 3068}( jQuery )); 3069 3070 3071 3072 3073 3074 3075
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.