1/* global jQuery */ 2/* global G1 */ 3/* global Galleria */ 4 5(function ($, globalContext, themeContext) { 6 "use strict"; 7 8 var helpers = {}; 9 var handlers = {}; 10 var classes = {}; 11 var factoryMethods = {}; 12 13 $(window).load(function () { 14 $('.g1-simple-slider, .g1-mediabox--slider').each(function() { 15 var $slider = $(this); 16 var configObj = $slider.metadata( { type: 'attr', name: 'data-config' }); 17 var sliderHandlerFuncName = configObj.layout + 'Slider'; 18 19 var handler = helpers.getSliderHandler(sliderHandlerFuncName); 20 21 if (handler) { 22 handler($slider, configObj); 23 } else { 24 throw 'Handler "'+ sliderHandlerFuncName +'" does not exist!'; 25 } 26 }); 27 }); 28 29 helpers.getSliderHandler = function (funcName) { 30 var customHandlers = themeContext.simpleSliders.customHandlers; 31 32 if (customHandlers && customHandlers[funcName]) { 33 var customHandler = customHandlers[funcName]; 34 35 switch (typeof customHandler) { 36 case 'function': 37 return customHandler; 38 39 case 'string': 40 funcName = customHandler; 41 break; 42 } 43 } 44 45 if (handlers[funcName]) { 46 return handlers[funcName]; 47 } 48 49 return null; 50 }; 51 52 factoryMethods.createCoinNav = function (type, $sliderContainer, options) { 53 // standard nav will be displayed as thumbs, style will be applied via css instrad of building coins via js 54 if (type === 'standard') { 55 type = 'thumbs'; 56 } 57 58 var navClassName = type + 'CoinNav'; 59 60 if (typeof classes[navClassName] !== 'undefined') { 61 var args = { 62 'sliderContainer': $sliderContainer, 63 'containerClass': 'g1-nav-coin', 64 'selectedItemClass': 'g1-selected' 65 }; 66 67 if (typeof options.container !== 'undefined') { 68 args.container = options.container; 69 } 70 71 if (typeof options.itemSelectionHandler !== 'undefined') { 72 args.itemSelectionHandler = options.itemSelectionHandler; 73 } 74 75 return classes[navClassName](args); 76 } 77 78 return null; 79 }; 80 81 factoryMethods.createDirectionNav = function (type, $sliderContainer) { 82 var navClassName = type + 'DirectionNav'; 83 84 if (typeof classes[navClassName] !== 'undefined') { 85 var args = { 86 'sliderContainer': $sliderContainer, 87 'containerClass': 'g1-nav-direction', 88 'prevClass': 'g1-nav-direction__prev', 89 'nextClass': 'g1-nav-direction__next', 90 'selectedItemClass': 'g1-selected' 91 }; 92 93 return classes[navClassName](args); 94 } 95 96 return null; 97 }; 98 99 factoryMethods.createFullscreenButton = function (type, $sliderContainer) { 100 var fullscreenClassName = type + 'FullscreenButton'; 101 102 if (typeof classes[fullscreenClassName] !== 'undefined') { 103 var args = { 104 'sliderContainer': $sliderContainer, 105 'containerClass': 'g1-fullscreen', 106 'buttonLabel': 'Enter fullscreen' 107 }; 108 109 return classes[fullscreenClassName](args); 110 } 111 112 return null; 113 }; 114 115 factoryMethods.createProgressBar = function (type, $sliderContainer) { 116 var className = type + 'ProgressBar'; 117 118 if (typeof classes[className] !== 'undefined') { 119 var args = { 120 'sliderContainer': $sliderContainer, 121 'containerClass': 'g1-progress' 122 }; 123 124 return classes[className](args); 125 } 126 127 return null; 128 }; 129 130 factoryMethods.createSlider = function ($context, config, options) { 131 var args = { 132 'context': $context, 133 'config': config, 134 'selector': '.g1-slides', 135 'slideSelector': 'li', 136 'selectedSlideSelector': '.g1-selected', 137 'options': options ? options : {} 138 }; 139 140 return classes.slider(args); 141 }; 142 143 classes.standardFullscreenButton = function (args) { 144 // private 145 var that = {}; 146 var $container; 147 var $button; 148 var offset; 149 150 var init = function () { 151 offset = 0; 152 buildButton(); 153 handleClickEvent(); 154 }; 155 156 var handleClickEvent = function () { 157 $button.click(function(e) { 158 e.preventDefault(); 159 160 var data = []; 161 162 var $slides = args.sliderContainer.find('li'); 163 164 $slides.each(function() { 165 var imagePath = $(this).find('img').attr('src'); 166 var title = $(this).find('figcaption p').html(); 167 var caption = $(this).find('figcaption div').html(); 168 169 if (imagePath) { 170 data.push({ 171 'image': imagePath, 172 'title': title ? title : '', 173 'description': caption ? caption : '' 174 }); 175 } 176 }); 177 178 if (data.length > 0) { 179 Galleria.configure({ 180 wait: true 181 }); 182 183 $('#galleria').remove();
184 var $wrapper = $('<div id="galleria" style="height: '+ $(window).height() +'px;">'); 185 $('body').prepend($wrapper); 186 187 data = addOffset(data, getOffset()); 188 189 Galleria.run('#galleria', { 190 dataSource: data 191 }); 192 193 Galleria.ready(function() { 194 var gallery = this; 195 196 gallery.addElement('exit').appendChild('container','exit'); 197 198 var btn = this.$('exit').html('<a href="#" class="galleria-exit-button"></a>'); 199 200 btn.click(function(e) { 201 e.preventDefault(); 202 gallery.exitFullscreen(); 203 $wrapper.hide(); 204 }); 205 }); 206 207 var galleria = $('#galleria').data('galleria'); 208 209 galleria.bind('fullscreen_exit', function() { 210 $wrapper.hide(); 211 }); 212 213 galleria.enterFullscreen(); 214 } 215 }); 216 }; 217 218 var addOffset = function (data, offset) { 219 var i,temp; 220 221 if (offset !== 0) { 222 if (offset > 0) { 223 for (i = 0; i < offset; i++) { 224 temp = data.pop(); 225 data.unshift(temp); 226 } 227 } else { 228 offset *= -1; 229 230 for (i = 0; i < offset; i++) { 231 temp = data.shift(); 232 data.push(temp); 233 } 234 } 235 } 236 237 return data; 238 }; 239 240 var buildButton = function () {
241 $container = $('<div>').addClass(args.containerClass); 242 $button = $('<a>').text(args.buttonLabel); 243 $container.append($button); 244 }; 245 246 var getContainer = function () { 247 return $container; 248 }; 249 250 var getOffset = function () { 251 return offset; 252 }; 253 254 var setOffset = function (value) { 255 offset = value; 256 }; 257 258 var getType = function () { 259 return 'standard'; 260 }; 261 262 init(); 263 264 // public 265 that.getType = getType; 266 that.getContainer = getContainer; 267 that.getOffset = getOffset; 268 that.setOffset = setOffset; 269 270 return that; 271 }; 272 273 classes.noneFullscreenButton = function () { 274 // private 275 var that = {}; 276 277 that.getType = function () { return 'none'; }; 278 that.getContainer = function () { return $(); }; 279 that.getOffset = function () { return 0; }; 280 that.setOffset = function () {}; 281 282 return that; 283 }; 284 285 classes.standardProgressBar = function (args) { 286 // private 287 var that = {}; 288 var $container; 289 var $progressBar; 290 291 var init = function () { 292 buildProgressBar(); 293 }; 294 295 var buildProgressBar = function () {
296 $container = $('<div>').addClass(args.containerClass); 297 $progressBar = $('<div>'); 298 $container.append($('<div>').append($progressBar)); 299 }; 300 301 var getContainer = function () { 302 return $container; 303 }; 304 305 var update = function (percentage) { 306 $progressBar.css('width', percentage + '%'); 307 }; 308 309 var getType = function () { 310 return 'standard'; 311 }; 312 313 init(); 314 315 // public 316 that.getType = getType; 317 that.getContainer = getContainer; 318 that.update = update; 319 320 return that; 321 }; 322 323 classes.noneProgressBar = function () { 324 // private 325 var that = {}; 326 327 // public 328 that.getType = function () { return 'none'; }; 329 that.getContainer = function () { return $(); }; 330 that.update = function () {}; 331 332 return that; 333 }; 334 335 classes.slider = function (args) { 336 // private 337 var that = {}; 338 var $context; 339 var config; 340 var $container; 341 var coinNavigation; 342 var directionNavigation; 343 var fullscreen; 344 var progressBar; 345 var slidesOffset; 346 347 var init = function () { 348 349 350 $context = args.context; 351 config = args.config; 352 slidesOffset = typeof args.options.slidesOffset !== 'undefined' ? args.options.slidesOffset : 0; 353 354 $container = $(args.selector, $context); 355 356 assignIndexToEachSlide(); 357 storeOriginalSlider(); 358 359 buildSlider(); 360 handleSliderPauseOnMouseHover(); 361 handleSlideLightboxLinkingMethod(); 362 }; 363 364 var storeOriginalSlider = function () { 365 $context.data('g1_original_slider', $context.clone(true, true)); 366 }; 367 368 var getOriginalSlider = function () { 369 return $context.data('g1_original_slider'); 370 }; 371 372 var buildSlider = function () { 373 directionNavigation = createDirectionNavigation(); 374 coinNavigation = createCoinNavigation(); 375 fullscreen = createFullscreenButton(); 376 progressBar = createProgressBar(); 377 378 var $toolbar = $('<div class="g1-toolbar" />'); 379 380 $toolbar.append(directionNavigation.getContainer()); 381 $toolbar.append(coinNavigation.getContainer()); 382 $toolbar.append(fullscreen.getContainer()); 383 $toolbar.append(progressBar.getContainer()); 384 385 $container.after($toolbar.wrapInner('<div class="g1-inner" />')); 386 387 $context.toggleClass('g1-slider-ready g1-slider-not-ready'); 388 }; 389 390 var assignIndexToEachSlide = function () { 391 getSlides().each(function(i) { 392 $(this).data('index', i); 393 }); 394 }; 395 396 var handleSliderPauseOnMouseHover = function () { 397 getSlides().mouseover(function () { 398 var stopImmediately = false; 399 var resumeTimeoutCounting = true; 400 401 getContainer().trigger('pause', [stopImmediately, resumeTimeoutCounting]); 402 }); 403 404 getSlides().mouseout(function () { 405 getContainer().trigger('resume'); 406 }); 407 }; 408 409 var handleSlideLightboxLinkingMethod = function () { 410 var $slides = getSlides().filter('[data-g1-linking="lightbox"]'); 411 var buildLighboxItem = function (link, title) { 412 var item; 413 var isVideo = (link.indexOf('youtube') !== -1) || (link.indexOf('youtube') !== -1); 414 415 if (isVideo) { 416 item = { 417 src: link, 418 type: 'iframe' 419 }; 420 } else { // image 421 item = { 422 src: link, 423 type: 'image' 424 }; 425 } 426 427 if (title && title.length > 0) { 428 item.title = title; 429 } 430 431 return item; 432 }; 433 434 $slides.click(function (e) { 435 e.preventDefault(); 436 437 var lightboxItems = []; 438 var index = 0; 439 440 $slides.each(function(i) { 441 if ($(this).is('.g1-selected')) { 442 index = i; 443 } 444 445 var link = $(this).find('a').attr('href'); 446 var title = $(this).find('figcaption > div:first').html(); 447 448 lightboxItems.push(buildLighboxItem(link, title)); 449 }); 450 451 if (lightboxItems.length > 0) { 452 $.magnificPopup.open({ 453 'items': lightboxItems, 454 gallery: { 455 enabled: true 456 }, 457 type: 'image' 458 }, index); 459 } 460 }); 461 }; 462 463 var createCoinNavigation = function () { 464 var options = {}; 465 var $container = $context.find('.g1-nav-coin'); 466 467 // coin nav was found in markup 468 if ($container.length > 0) { 469 options.container = $container; 470 } 471 472 if (typeof args.options.coinNavigationItemSelectionHandler !== 'undefined') { 473 options.itemSelectionHandler = args.options.coinNavigationItemSelectionHandler; 474 } 475 476 coinNavigation = factoryMethods.createCoinNav(config.coinNavigation, getContainer(), options); 477 coinNavigation.setOffset(getSlidesOffset()); 478 479 return coinNavigation; 480 }; 481 482 var createDirectionNavigation = function () { 483 directionNavigation = factoryMethods.createDirectionNav(config.directionNavigation, getContainer()); 484 485 return directionNavigation; 486 }; 487 488 var createFullscreenButton = function () { 489 fullscreen = factoryMethods.createFullscreenButton(config.fullscreen, getContainer()); 490 fullscreen.setOffset(getSlidesOffset()); 491 492 return fullscreen; 493 }; 494 495 var createProgressBar = function () { 496 progressBar = factoryMethods.createProgressBar(config.progressBar, getContainer()); 497 498 return progressBar; 499 }; 500 501 var isFullyVisible = function (width) { 502 var threshold = parseInt(config.width_in_px, 10); 503 504 width = width || $(window).width(); 505 506 return width > threshold; 507 }; 508 509 var getContainer = function () { 510 return $container; 511 }; 512 513 var getSlides = function () { 514 return getContainer().find(args.slideSelector); 515 }; 516 517 var getSelectedSlide = function () { 518 return getSlides().filter(args.selectedSlideSelector); 519 }; 520 521 var getCoinNavigation = function () { 522 return coinNavigation; 523 }; 524 525 var getDirectionNavigation = function () { 526 return directionNavigation; 527 }; 528 529 var getFullscreen = function () { 530 return fullscreen; 531 }; 532 533 var getProgressBar = function () { 534 return progressBar; 535 }; 536 537 var getSlidesOffset = function () { 538 return slidesOffset; 539 }; 540 541 var getConfig = function () { 542 return config; 543 }; 544 545 var getContext = function () { 546 return $context; 547 }; 548 549 init(); 550 551 // public 552 that.getContext = getContext; 553 that.getContainer = getContainer; 554 that.getConfig = getConfig; 555 that.getSlides = getSlides; 556 that.getSelectedSlide = getSelectedSlide; 557 that.getCoinNavigation = getCoinNavigation; 558 that.getDirectionNavigation = getDirectionNavigation; 559 that.getFullscreen = getFullscreen; 560 that.getProgressBar = getProgressBar; 561 that.getSlidesOffset = getSlidesOffset; 562 that.getOriginalSlider = getOriginalSlider; 563 that.isFullyVisible = isFullyVisible; 564 565 return that; 566 }; 567 568 classes.thumbsCoinNav = function (args) { 569 // private 570 var that = {}; 571 var $container; 572 var offset; 573 var itemSelectionHandler; 574 575 // pseud constructor 576 var init = function () { 577 if (typeof args.container !== 'undefined') { 578 $container = args.container; 579 } 580 581 // item selection handler 582 if (typeof args.itemSelectionHandler !== 'undefined') { 583 itemSelectionHandler = args.itemSelectionHandler; 584 } 585 586 offset = 0; 587 588 buildNav(); 589 }; 590 591 var buildNav = function () { 592 if (!$container) { 593 $container = $('<ol>').addClass(args.containerClass); 594 595 args.sliderContainer.find('img').each(function() { 596 var $img = $(this).clone(); 597
598 var $navItem = $('<li>'); 599 $navItem.append($('<a>').append($img)); 600 601 $container.append($navItem); 602 }); 603 } 604 605 assignIndexToEachItem(); 606 handleItemSelection(); 607 }; 608 609 var assignIndexToEachItem = function () { 610 getItems().each(function (i) { 611 $(this).data('index', i); 612 }); 613 }; 614 615 var handleItemSelection = function () { 616 var $items = getItems(); 617 618 $items.each(function() { 619 $(this).click(function(e) { 620 e.preventDefault(); 621 622 if (itemSelectionHandler) { 623 itemSelectionHandler({ 624 sliderContainer: args.sliderContainer, 625 slideTo: getOffset() + $items.index($(this)) 626 }); 627 } else { 628 args.sliderContainer.trigger('slideTo', getOffset() + $items.index($(this))); 629 } 630 }); 631 }); 632 }; 633 634 var getContainer = function () { 635 return $container; 636 }; 637 638 var getItems = function () { 639 return getContainer().find('li'); 640 }; 641 642 var getItem = function (index) { 643 return getItems().eq(index); 644 }; 645 646 /** 647 * @param item Item index or jQuery object 648 */ 649 var selectItem = function (item) { 650 var selectedClassName = args.selectedItemClass; 651 652 getItems().removeClass(selectedClassName); 653 var $item = item; 654 655 if (typeof $item === 'number') { 656 $item = getItem(item); 657 } 658 659 $item.addClass(selectedClassName); 660 }; 661 662 var setOffset = function (value) { 663 offset = value; 664 }; 665 666 var getOffset = function () { 667 return offset; 668 }; 669 670 var getType = function () { 671 return 'thumbs'; 672 }; 673 674 init(); 675 676 // public 677 that.getType = getType; 678 that.getContainer = getContainer; 679 that.getItems = getItems; 680 that.getItem = getItem; 681 that.selectItem = selectItem; 682 that.getOffset = getOffset; 683 that.setOffset = setOffset; 684 685 return that; 686 }; 687 688 classes.standardCoinNav = function (args) { 689 // private 690 var that = {}; 691 var $container; 692 var offset; 693 var itemSelectionHandler; 694 695 // pseud constructor 696 var init = function () { 697 if (typeof args.itemSelectionHandler !== 'undefined') { 698 itemSelectionHandler = args.itemSelectionHandler; 699 } 700 701 offset = 0; 702 703 buildNav(); 704 }; 705 706 var buildNav = function () { 707 $container = $('<ol>').addClass(args.containerClass); 708 709 args.sliderContainer.find('img').each(function(i) { 710 var $navItem = $('<li>'); 711 $navItem.data('index', i); 712 $navItem.append($('<a>').text(i + 1)); 713 714 $container.append($navItem); 715 }); 716 717 handleItemSelection(); 718 }; 719 720 var handleItemSelection = function () { 721 var $items = getItems(); 722 723 $items.each(function() { 724 $(this).click(function(e) { 725 e.preventDefault(); 726 727 if (itemSelectionHandler) { 728 itemSelectionHandler({ 729 sliderContainer: args.sliderContainer, 730 slideTo: getOffset() + $items.index($(this)) 731 }); 732 } else { 733 args.sliderContainer.trigger('slideTo', getOffset() + $items.index($(this))); 734 } 735 }); 736 }); 737 }; 738 739 var getContainer = function () { 740 return $container; 741 }; 742 743 var getItems = function () { 744 return getContainer().find('li'); 745 }; 746 747 var getItem = function (index) { 748 return getItems().eq(index); 749 }; 750 751 /** 752 * @param item Item index or jQuery object 753 */ 754 var selectItem = function (item) { 755 var selectedClassName = args.selectedItemClass; 756 757 getItems().removeClass(selectedClassName); 758 var $item = item; 759 760 if (typeof $item === 'number') { 761 $item = getItem(item); 762 } 763 764 $item.addClass(selectedClassName); 765 }; 766 767 var setOffset = function (value) { 768 offset = value; 769 }; 770 771 var getOffset = function () { 772 return offset; 773 }; 774 775 var getType = function () { 776 return 'standard'; 777 }; 778 779 init(); 780 781 // public 782 that.getType = getType; 783 that.getContainer = getContainer; 784 that.getItems = getItems; 785 that.getItem = getItem; 786 that.selectItem = selectItem; 787 that.getOffset = getOffset; 788 that.setOffset = setOffset; 789 790 return that; 791 }; 792 793 classes.noneCoinNav = function () { 794 // private 795 var that = {}; 796 797 // public 798 that.getType = function () { return 'none'; }; 799 that.getContainer = function () { return $(); }; 800 that.getItems = function () { return $(); }; 801 that.getItem = function () { return $(); }; 802 that.selectItem = function () {}; 803 that.getOffset = function () { return 0; }; 804 that.setOffset = function () {}; 805 806 return that; 807 }; 808 809 classes.standardDirectionNav = function (args) { 810 // private 811 var that = {}; 812 var $container; 813 var $prev; 814 var $next; 815 816 // pseud constructor 817 var init = function () { 818 buildNav(); 819 }; 820 821 var buildNav = function () {
822 $container = $('<div>').addClass(args.containerClass); 823 824 $prev = $('<a href="#">prev</a>').addClass(args.prevClass); 825 $next = $('<a href="#">next</a>').addClass(args.nextClass); 826 827 $container. 828 append($prev). 829 append($next); 830 }; 831 832 var getContainer = function () { 833 return $container; 834 }; 835 836 var getPrev = function () { 837 return $prev; 838 }; 839 840 var getNext = function () { 841 return $next; 842 }; 843 844 var getPrevKey = function () { 845 return 'left'; 846 }; 847 848 var getNextKey = function () { 849 return 'right'; 850 }; 851 852 var getType = function () { 853 return 'standard'; 854 }; 855 856 init(); 857 858 // public 859 that.getType = getType; 860 that.getContainer = getContainer; 861 that.getPrev = getPrev; 862 that.getNext = getNext; 863 that.getPrevKey = getPrevKey; 864 that.getNextKey = getNextKey; 865 866 return that; 867 }; 868 869 classes.noneDirectionNav = function () { 870 // private 871 var that = {}; 872 873 // public 874 that.getType = function () { return 'none'; }; 875 that.getContainer = function () { return $(); }; 876 that.getPrev = function () { return $(); }; 877 that.getNext = function () { return $(); }; 878 that.getPrevKey = function () { return null; }; 879 that.getNextKey = function () { return null; }; 880 881 return that; 882 }; 883 884 classes.carouFredSelConfig = function (args) { 885 // private 886 var that = {}; 887 var config; 888 var sliderConfig; 889 var slider; 890 var coinNav; 891 var directionNav; 892 var progressBar; 893 var selectedSlideIndex; 894 895 var init = function () { 896 slider = args.slider; 897 sliderConfig = slider.getConfig(); 898 coinNav = slider.getCoinNavigation(); 899 directionNav = slider.getDirectionNavigation(); 900 progressBar = slider.getProgressBar(); 901 selectedSlideIndex = 0 - slider.getSlidesOffset(); 902 903 buildConfig(); 904 }; 905 906 var doAction = function (actionName, data, options) { 907 if (typeof config[actionName] === 'function') { 908 config[actionName](data, options); 909 } 910 }; 911 912 var getCurrentSlide = function (data, selectedSlideIndex) { 913 if (typeof data.items.visible[selectedSlideIndex] !== 'undefined') { 914 return data.items.visible.eq(selectedSlideIndex); 915 } else { 916 return data.items.visible; 917 } 918 }; 919 920 var buildConfig = function () { 921 config = { 922 responsive: true, 923 width:'100%', 924 height:'variable', 925 items: { 926 visible: 1, 927 start: slider.getSlidesOffset() 928 }, 929 swipe: { 930 onTouch : true, 931 onMouse : false 932 }, 933 scroll: { 934 items: 1, 935 onBefore: function (data) { 936 var options = { 937 'selectedSlideIndex': selectedSlideIndex 938 }; 939 940 doAction('scroll_onBefore_start', data, options); 941 942 slider.getContext().addClass('g1-transition'); 943 944 var $currentSlide = getCurrentSlide(data, selectedSlideIndex); 945 946 if ($currentSlide.length > 0) { 947 slider.getSlides().removeClass('g1-selected'); 948 $currentSlide.addClass('g1-selected'); 949 950 coinNav.selectItem($currentSlide.data('index')); 951 } 952 953 doAction('scroll_onBefore_end', data, options); 954 }, 955 onAfter: function (data) { 956 var options = { 957 'selectedSlideIndex': selectedSlideIndex 958 }; 959 960 doAction('scroll_onAfter_start', data, options); 961 962 slider.getContext().removeClass('g1-transition'); 963 964 doAction('scroll_onAfter_end', data, options); 965 } 966 }, 967 prev: { 968 button: directionNav.getPrev(), 969 key: directionNav.getPrevKey() 970 }, 971 next: { 972 button: directionNav.getNext(), 973 key: directionNav.getNextKey() 974 }, 975 onCreate: function (data) { 976 doAction('onCreate_start', data); 977 coinNav.selectItem(0); 978 doAction('onCreate_end', data); 979 } 980 }; 981 982 setUpAutoParam(); // pause time 983 setUpDirectionAndScrollFxParam(); // transition 984 setUpScrollDurationParam(); // transition speed 985 }; 986 987 var setUpAutoParam = function () { 988 config.auto = {
989 play: (sliderConfig.autoplay !== 'none'), 990 timeoutDuration: sliderConfig.slideshowSpeed ? parseInt(sliderConfig.slideshowSpeed, 10): 0 991 }; 992 993 if (sliderConfig.progressBar !== 'none') { 994 config.auto.progress = { 995 'bar': progressBar.getContainer(), 996 'updater': progressBar.update, 997 'interval': 50 998 }; 999 } 1000 }; 1001 1002 var setUpDirectionAndScrollFxParam = function () { 1003 var animation = sliderConfig.animation ? sliderConfig.animation : 'fade'; 1004 1005 switch (animation) { 1006 case 'fade': 1007 config.scroll.fx = 'crossfade'; 1008 break; 1009 1010 case 'slide_up': 1011 config.direction = 'up'; 1012 config.scroll.fx = 'scroll'; 1013 break; 1014 1015 case 'slide_down': 1016 config.direction = 'down'; 1017 config.scroll.fx = 'scroll'; 1018 break; 1019 1020 case 'slide_left': 1021 config.direction = 'left'; 1022 config.scroll.fx = 'scroll'; 1023 break; 1024 1025 case 'slide_right': 1026 config.direction = 'right'; 1027 config.scroll.fx = 'scroll'; 1028 break; 1029 } 1030 }; 1031 1032 var setUpScrollDurationParam = function () { 1033 config.scroll.duration = sliderConfig.animationDuration ? parseInt(sliderConfig.animationDuration, 10) : 0; 1034 }; 1035 1036 var getJson = function () { 1037 return config; 1038 }; 1039 1040 init(); 1041 1042 // public 1043 that.getJson = getJson; 1044 1045 return that; 1046 }; 1047 1048 handlers.simpleSlider = function ($slider, configObj) { 1049 var slider = factoryMethods.createSlider($slider, configObj); 1050 var $sliderContainer = slider.getContainer(); 1051 1052 var config = classes.carouFredSelConfig({ 1053 'slider': slider 1054 }); 1055 1056 var mainSliderConfig = config.getJson(); 1057 1058 var $firstImg = slider.getSlides().find('img:first'); 1059 var width = $firstImg.prop('width'); 1060 var height = $firstImg.prop('height'); 1061 height = Math.round(height/width * 100) + '%'; 1062 1063 mainSliderConfig.items.width = width; 1064 mainSliderConfig.items.height = height; 1065 mainSliderConfig.scroll.easing = 'easeInOutExpo'; 1066 1067 var pluginOptions = { 1068 wrapper: { 1069 element: 'div', 1070 classname:'g1-carousel' 1071 } 1072 }; 1073 1074 // store data in DOM element 1075 $slider.data('g1_simple_slider', slider); 1076 1077 // handle main slider 1078 $sliderContainer.carouFredSel(mainSliderConfig, pluginOptions); 1079 1080 slider.getContainer().after(slider.getDirectionNavigation().getContainer(), slider.getProgressBar().getContainer()); 1081 }; 1082 1083 handlers.relaySlider = function ($slider, configObj) { 1084 var options = { 1085 coinNavigationItemSelectionHandler: coinNavSelectItem 1086 }; 1087 1088 var slider = factoryMethods.createSlider($slider, configObj, options); 1089 var $sliderContainer = slider.getContainer(); 1090 1091 var $leftSlider = $slider.find('.g1-slides').clone(); 1092 var $rightSlider = $slider.find('.g1-slides').clone(); 1093 1094 $leftSlider.prependTo($slider.find('> .g1-inner')); 1095 $rightSlider.appendTo($slider.find('> .g1-inner')); 1096 1097 1098 var config = classes.carouFredSelConfig({ 1099 'slider': slider 1100 }); 1101 1102 /* =============== 1103 * main slider 1104 /* =============== */ 1105 var mainSliderConfig = config.getJson(); 1106 1107 // change config 1108 mainSliderConfig.auto.play = false; 1109 mainSliderConfig.next = null; 1110 mainSliderConfig.prev = null; 1111 1112 mainSliderConfig.scroll.duration = mainSliderConfig.scroll.duration/2; 1113 1114 var leftEasing = 'linear'; 1115 var centerEasing = 'linear'; 1116 var rightEasing = 'linear'; 1117 1118 mainSliderConfig.auto.easing = centerEasing; 1119 mainSliderConfig.scroll.easing = centerEasing; 1120 1121 1122 // synchronise carousels
1123 var carouselDelay = mainSliderConfig.scroll.duration/2; 1124 1125 var $prev = slider.getDirectionNavigation().getPrev(); 1126 var $next = slider.getDirectionNavigation().getNext(); 1127 1128 $prev.click(function (e) { 1129 e.preventDefault(); 1130 1131 $leftSlider.trigger('prev'); 1132 1133 setTimeout(function() { 1134 $sliderContainer.trigger('prev'); 1135 }, carouselDelay); 1136 1137 setTimeout(function() { 1138 $rightSlider.trigger('prev'); 1139 }, 2 * carouselDelay); 1140 }); 1141 1142 $next.click(function (e) { 1143 e.preventDefault(); 1144 1145 $rightSlider.trigger('next'); 1146 1147 setTimeout(function() { 1148 $sliderContainer.trigger('next'); 1149 }, carouselDelay); 1150 1151 setTimeout(function() { 1152 $leftSlider.trigger('next'); 1153 }, 2 * carouselDelay); 1154 }); 1155 1156 var pluginOptions = { 1157 wrapper: { 1158 element: 'div', 1159 classname:'g1-carousel' 1160 } 1161 }; 1162 1163 // store data in DOM element 1164 $slider.data('g1_simple_slider', slider); 1165 1166 $sliderContainer.carouFredSel(mainSliderConfig, pluginOptions); 1167 slider.getContainer().after(slider.getDirectionNavigation().getContainer(), slider.getProgressBar().getContainer()); 1168 $sliderContainer.parent().wrap('<div class="g1-carousel-center"></div>'); 1169 1170 // coin nav selection 1171 function coinNavSelectItem (args) { 1172 var nextSlide = args.slideTo; 1173 1174 $rightSlider.trigger('slideTo', nextSlide); 1175 1176 setTimeout(function() { 1177 $sliderContainer.trigger('slideTo', nextSlide); 1178 }, carouselDelay); 1179 1180 setTimeout(function() { 1181 $leftSlider.trigger('slideTo', nextSlide); 1182 }, 2 * carouselDelay); 1183 } 1184 1185 // auto play 1186 var autoplay = configObj.autoplay === 'standard'; 1187 var pause = false; 1188 1189 $sliderContainer.mouseover(function () { 1190 pause = true; 1191 }); 1192 1193 $sliderContainer.mouseout(function () { 1194 pause = false; 1195 }); 1196 1197 if (autoplay) { 1198 var slideshowSpeed = parseInt(configObj.slideshowSpeed, 10); 1199 1200 var showNextSlide = function() { 1201 var isScrolling; 1202 $sliderContainer.trigger('isScrolling', function(scrolling) { isScrolling = scrolling; }); 1203 1204 if (!isScrolling && !pause) { 1205 $next.trigger('click'); 1206 1207 var $progressBarContainer = slider.getProgressBar().getContainer(); 1208 var progressBar = $progressBarContainer.find('> div > div'); 1209 progressBar.css('width', '0'); 1210 progressBar.animate({ 1211 width: '100%' 1212 }, slideshowSpeed - 10, 'linear'); 1213 } 1214 1215 setTimeout(showNextSlide, slideshowSpeed); 1216 }; 1217 1218 setTimeout(showNextSlide, slideshowSpeed); 1219 } 1220 1221 /* =============== 1222 * left slider 1223 /* =============== */ 1224 $leftSlider.find('> li:last').prependTo($leftSlider); 1225 1226 var leftSliderConfig = { 1227 responsive:true, 1228 width:'80%', 1229 height:'variable', 1230 auto: { 1231 play: false, 1232 easing: leftEasing 1233 }, 1234 direction: mainSliderConfig.direction, 1235 scroll: { 1236 //fx: mainSliderConfig.scroll.fx, 1237 fx: 'cover', 1238 easing: leftEasing, 1239 duration: mainSliderConfig.scroll.duration 1240 } 1241 }; 1242 1243 $leftSlider.carouFredSel(leftSliderConfig, pluginOptions); 1244 $leftSlider.parent().wrap('<div class="g1-carousel-left"></div>'); 1245 1246 /* =============== 1247 * right slider 1248 /* =============== */ 1249 $rightSlider.find('> li:first').appendTo($rightSlider); 1250 1251 var rightSliderConfig = { 1252 responsive: true, 1253 width:'80%', 1254 height:'variable', 1255 auto: { 1256 play: false, 1257 easing: rightEasing 1258 }, 1259 direction: mainSliderConfig.direction, 1260 scroll: { 1261 //fx: mainSliderConfig.scroll.fx, 1262 fx: 'uncover', 1263 easing: rightEasing, 1264 duration: mainSliderConfig.scroll.duration 1265 } 1266 }; 1267 1268 $rightSlider.carouFredSel(rightSliderConfig, pluginOptions); 1269 $rightSlider.parent().wrap('<div class="g1-carousel-right"></div>'); 1270 }; 1271 1272 handlers.viewportSlider = function ($slider, configObj) { 1273 var options = { 1274 'slidesOffset': -1 1275 }; 1276 var log = function (content) { if (typeof console !== 'undefined') { console.log(content); } }; 1277 var slider = factoryMethods.createSlider($slider, configObj, options); 1278 var $sliderContainer = slider.getContainer(); 1279 var config = classes.carouFredSelConfig({ 1280 'slider': slider 1281 }); 1282 1283 var mainSliderConfig = config.getJson(); 1284 1285 mainSliderConfig.items.visible = 3; 1286 mainSliderConfig.scroll.easing = 'easeInOutExpo'; 1287 mainSliderConfig.responsive = false;
1288 1289 // store data in DOM element 1290 $slider.data('g1_simple_slider', slider); 1291 1292 var pluginOptions = { 1293 wrapper: { 1294 element: 'div', 1295 classname:'g1-carousel' 1296 } 1297 }; 1298 1299 // store data in DOM element 1300 $slider.data('g1_simple_slider', slider); 1301 1302 // handle main slider 1303 $sliderContainer.carouFredSel(mainSliderConfig, pluginOptions); 1304 log(mainSliderConfig); 1305 log(pluginOptions); 1306 1307 // move direction nav after slides container 1308 slider.getContainer().after(slider.getDirectionNavigation().getContainer(), slider.getProgressBar().getContainer()); 1309 }; 1310 1311 handlers.standoutSlider = function ($slider, configObj) { 1312 var options = { 1313 'slidesOffset': -1 1314 }; 1315 1316 var slider = factoryMethods.createSlider($slider, configObj, options); 1317 var $sliderContainer = slider.getContainer(); 1318 1319 var config = classes.carouFredSelConfig({ 1320 'slider': slider 1321 }); 1322 1323 var mainSliderConfig = config.getJson(); 1324 1325 var $firstImg = slider.getSlides().find('img:first'); 1326 var width = $firstImg.width(); 1327 var height = $firstImg.height(); 1328 var scale = 2; 1329 1330 var marginVertical = Math.round((height - height/scale)/2); 1331 1332 var defaultCss = { 1333 'width': Math.round(width/scale), 1334 'height': Math.round(height/scale), 1335 marginTop:marginVertical, 1336 marginRight:0, 1337 marginLeft:0, 1338 opacity: 0.5 1339 }; 1340 var selectedCss = { 1341 'width': width, 1342 'height': height, 1343 marginTop: 0, 1344 marginRight:0, 1345 marginLeft:0, 1346 opacity: 1 1347 }; 1348 var aniOpts = { 1349 queue: false, 1350 duration: 1000, // tyle samo co czas transition 1351 easing: 'easeInOutCirc' 1352 }; 1353 1354 $sliderContainer.find('img:gt(0)').css('zIndex', 1).css( defaultCss ); 1355 $sliderContainer.find('img:eq(0)').css('zIndex', 2).css( selectedCss ); 1356 1357 mainSliderConfig.items.visible = 3; 1358 mainSliderConfig.scroll.easing = 'easeInOutCirc'; 1359 mainSliderConfig.responsive = false; 1360 1361 // store data in DOM element 1362 $slider.data('g1_simple_slider', slider); 1363 1364 mainSliderConfig.scroll_onBefore_start = function( data ) { 1365 data.items.old.eq(1).find('img').css('zIndex', 1).animate( defaultCss, aniOpts ); 1366 data.items.visible.eq(1).find('img').css('zIndex', 2).animate( selectedCss, aniOpts ); 1367 }; 1368 1369 mainSliderConfig.scroll_onAfter_start = function() { 1370 //$sliderContainer.trigger('updateSizes'); 1371 }; 1372 1373 var pluginOptions = { 1374 wrapper: { 1375 element: 'div', 1376 classname:'g1-carousel' 1377 } 1378 }; 1379 1380 mainSliderConfig.height = 'auto'; 1381 1382 // handle main slider 1383 $sliderContainer.carouFredSel(mainSliderConfig, pluginOptions); 1384 slider.getContainer().after(slider.getDirectionNavigation().getContainer(), slider.getProgressBar().getContainer()); 1385 }; 1386 1387 handlers.kenburnsSlider = function ($slider, configObj) { 1388 var slider = factoryMethods.createSlider($slider, configObj); 1389 var $sliderContainer = slider.getContainer(); 1390 1391 var config = classes.carouFredSelConfig({ 1392 'slider': slider 1393 }); 1394 1395 var mainSliderConfig = config.getJson(); 1396 1397 var $firstImg = slider.getSlides().find('img:first'); 1398 var width = $firstImg.prop('width'); 1399 var height = $firstImg.prop('height'); 1400 height = Math.round(height/width * 100) + '%'; 1401 1402 mainSliderConfig.items.width = width; 1403 mainSliderConfig.items.height = height; 1404 1405 var dur = mainSliderConfig.scroll.duration; 1406 var pDur = 3 * dur; 1407 1408 mainSliderConfig.scroll_onBefore_start = function( data ) { 1409 animate( data.items.visible, pDur + ( dur * 3 ) ); 1410 }; 1411 1412 mainSliderConfig.scroll_onAfter_start = function( data ) { 1413 data.items.old.find( 'img' ).each(function(){ 1414 var $this = $(this); 1415 1416 $this.stop(); 1417 $this.css({ 1418 width:'auto', 1419 height:'auto', 1420 marginTop: 0, 1421 marginLeft: 0 1422 }); 1423 }); 1424 }; 1425 1426 mainSliderConfig.onCreate_start = function( data ) { 1427 animate( data.items, pDur + ( dur *2 ) ); 1428 }; 1429 1430 var pluginOptions = { 1431 wrapper: { 1432 element: 'div', 1433 classname:'g1-carousel' 1434 } 1435 }; 1436 1437 // handle main slider 1438 $sliderContainer.carouFredSel(mainSliderConfig, pluginOptions); 1439 slider.getContainer().after(slider.getDirectionNavigation().getContainer(), slider.getProgressBar().getContainer()); 1440 1441 function animate( item, dur ) { 1442 var $img = item.find('img'); 1443 var width = $img.prop('width'); 1444 var height = $img.prop('height'); 1445 1446 var obj = { 1447 width:width * 1.2, 1448 height:height * 1.2 1449 }; 1450 switch( Math.ceil( Math.random() * 2 ) ) { 1451 case 1: 1452 obj.marginTop = 0; 1453 break; 1454 case 2: 1455 obj.marginTop = -height * 0.2;
1456 break; 1457 } 1458 switch( Math.ceil( Math.random() * 2 ) ) { 1459 case 1: 1460 obj.marginLeft = 0; 1461 break; 1462 case 2: 1463 obj.marginLeft = -width * 0.2; 1464 break; 1465 } 1466 item.find( 'img' ).animate(obj, dur, 'linear' ); 1467 } 1468 }; 1469 1470 // expose to public scope 1471 if (typeof themeContext.simpleSliders === 'undefined') { 1472 themeContext.simpleSliders = {}; 1473 } 1474 1475 themeContext.simpleSliders.handlers = handlers; 1476 themeContext.simpleSliders.helpers = helpers; 1477})(jQuery, window, G1.theme);
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.