vendor: 1,939 bytes, lines 1-94
1'use strict'; 2 3Object.defineProperty(exports, '__esModule', { value: true }); 4 5var win = window; 6var caf = win.cancelAnimationFrame || win.mozCancelAnimationFrame || function (id) { 7 clearTimeout(id); 8}; 9 10function extend() { 11 var obj, 12 name, 13 copy, 14 target = arguments[0] || {}, 15 i = 1, 16 length = arguments.length; 17 18 for (; i < length; i++) { 19 if ((obj = arguments[i]) !== null) { 20 for (name in obj) { 21 copy = obj[name]; 22 23 if (target === copy) { 24 continue; 25 } else if (copy !== undefined) { 26 target[name] = copy; 27 } 28 } 29 } 30 } 31 32 return target; 33} 34 35function checkStorageValue(value) { 36 return ['true', 'false'].indexOf(value) >= 0 ? JSON.parse(value) : value; 37} 38 39function setLocalStorage(storage, key, value, access) { 40 if (access) { 41 try { 42 storage.setItem(key, value); 43 } catch (e) {} 44 } 45 46 return value; 47} 48 49function getSlideId() { 50 var id = window.tnsId; 51 window.tnsId = !id ? 1 : id + 1; 52 return 'tns' + window.tnsId; 53} 54 55function getBody() { 56 var doc = document, 57 body = doc.body; 58 59 if (!body) { 60 body = doc.createElement('body'); 61 body.fake = true; 62 } 63 64 return body; 65} 66 67var docElement = document.documentElement; 68 69function setFakeBody(body) { 70 var docOverflow = ''; 71 72 if (body.fake) { 73 docOverflow = docElement.style.overflow; //avoid crashing IE8, if background image is used 74 75 body.style.background = ''; //Safari 5.13/5.1.4 OSX stops loading if ::-webkit-scrollbar is used and scrollbars are visible 76 77 body.style.overflow = docElement.style.overflow = 'hidden'; 78 docElement.appendChild(body); 79 } 80 81 return docOverflow; 82} 83 84function resetFakeBody(body, docOverflow) { 85 if (body.fake) { 86 body.remove(); 87 docElement.style.overflow = docOverflow; // Trigger layout so kinetic scrolling isn't disabled in iOS6+ 88 // eslint-disable-next-line 89 90 docElement.offsetHeight; 91 } 92} 93 94// get css-calc
vendor: 6,450 bytes, lines 94-350
94 95function calc() { 96 var doc = document, 97 body = getBody(), 98 docOverflow = setFakeBody(body), 99 div = doc.createElement('div'), 100 result = false; 101 body.appendChild(div); 102 103 try { 104 var str = '(10px * 10)', 105 vals = ['calc' + str, '-moz-calc' + str, '-webkit-calc' + str], 106 val; 107 108 for (var i = 0; i < 3; i++) { 109 val = vals[i]; 110 div.style.width = val; 111 112 if (div.offsetWidth === 100) { 113 result = val.replace(str, ''); 114 break; 115 } 116 } 117 } catch (e) {} 118 119 body.fake ? resetFakeBody(body, docOverflow) : div.remove(); 120 return result; 121} 122 123// get subpixel support value 124function percentageLayout() { 125 // check subpixel layout supporting 126 var doc = document, 127 body = getBody(), 128 docOverflow = setFakeBody(body), 129 wrapper = doc.createElement('div'), 130 outer = doc.createElement('div'), 131 str = '', 132 count = 70, 133 perPage = 3, 134 supported = false; 135 wrapper.className = "tns-t-subp2"; 136 outer.className = "tns-t-ct"; 137 138 for (var i = 0; i < count; i++) { 139 str += '<div></div>'; 140 } 141 142 outer.innerHTML = str; 143 wrapper.appendChild(outer); 144 body.appendChild(wrapper); 145 supported = Math.abs(wrapper.getBoundingClientRect().left - outer.children[count - perPage].getBoundingClientRect().left) < 2; 146 body.fake ? resetFakeBody(body, docOverflow) : wrapper.remove(); 147 return supported; 148} 149 150function mediaquerySupport() { 151 if (window.matchMedia || window.msMatchMedia) { 152 return true; 153 } 154 155 var doc = document, 156 body = getBody(), 157 docOverflow = setFakeBody(body), 158 div = doc.createElement('div'), 159 style = doc.createElement('style'), 160 rule = '@media all and (min-width:1px){.tns-mq-test{position:absolute}}', 161 position; 162 style.type = 'text/css'; 163 div.className = 'tns-mq-test'; 164 body.appendChild(style); 165 body.appendChild(div); 166 167 if (style.styleSheet) { 168 style.styleSheet.cssText = rule; 169 } else { 170 style.appendChild(doc.createTextNode(rule)); 171 } 172 173 position = window.getComputedStyle ? window.getComputedStyle(div).position : div.currentStyle['position']; 174 body.fake ? resetFakeBody(body, docOverflow) : div.remove(); 175 return position === "absolute"; 176} 177 178// create and append style sheet 179function createStyleSheet(media, nonce) { 180 // Create the <style> tag 181 var style = document.createElement("style"); // style.setAttribute("type", "text/css"); 182 // Add a media (and/or media query) here if you'd like! 183 // style.setAttribute("media", "screen") 184 // style.setAttribute("media", "only screen and (max-width : 1024px)") 185 186 if (media) { 187 style.setAttribute("media", media); 188 } // Add nonce attribute for Content Security Policy 189 190 191 if (nonce) { 192 style.setAttribute("nonce", nonce); 193 } // WebKit hack :( 194 // style.appendChild(document.createTextNode("")); 195 // Add the <style> element to the page 196 197 198 document.querySelector('head').appendChild(style); 199 return style.sheet ? style.sheet : style.styleSheet; 200} 201 202// cross browsers addRule method 203function addCSSRule(sheet, selector, rules, index) { 204 // return raf(function() { 205 'insertRule' in sheet ? sheet.insertRule(selector + '{' + rules + '}', index) : sheet.addRule(selector, rules, index); // }); 206} 207 208// cross browsers addRule method 209function removeCSSRule(sheet, index) { 210 // return raf(function() { 211 'deleteRule' in sheet ? sheet.deleteRule(index) : sheet.removeRule(index); // }); 212} 213 214function getCssRulesLength(sheet) { 215 var rule = 'insertRule' in sheet ? sheet.cssRules : sheet.rules; 216 return rule.length; 217} 218 219function toDegree(y, x) { 220 return Math.atan2(y, x) * (180 / Math.PI); 221} 222 223function getTouchDirection(angle, range) { 224 var direction = false, 225 gap = Math.abs(90 - Math.abs(angle)); 226 227 if (gap >= 90 - range) { 228 direction = 'horizontal'; 229 } else if (gap <= range) { 230 direction = 'vertical'; 231 } 232 233 return direction; 234} 235 236// https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/ 237function forEach(arr, callback, scope) { 238 for (var i = 0, l = arr.length; i < l; i++) { 239 callback.call(scope, arr[i], i); 240 } 241} 242 243var classListSupport = ('classList' in document.createElement('_')); 244 245var hasClass = classListSupport ? function (el, str) { 246 return el.classList.contains(str); 247} : function (el, str) { 248 return el.className.indexOf(str) >= 0; 249}; 250 251var addClass = classListSupport ? function (el, str) { 252 if (!hasClass(el, str)) { 253 el.classList.add(str); 254 } 255} : function (el, str) { 256 if (!hasClass(el, str)) { 257 el.className += ' ' + str; 258 } 259}; 260 261var removeClass = classListSupport ? function (el, str) { 262 if (hasClass(el, str)) { 263 el.classList.remove(str); 264 } 265} : function (el, str) { 266 if (hasClass(el, str)) { 267 el.className = el.className.replace(str, ''); 268 } 269}; 270 271function hasAttr(el, attr) { 272 return el.hasAttribute(attr); 273} 274 275function getAttr(el, attr) { 276 return el.getAttribute(attr); 277} 278 279function isNodeList(el) { 280 // Only NodeList has the "item()" function 281 return typeof el.item !== "undefined"; 282} 283 284function setAttrs(els, attrs) { 285 els = isNodeList(els) || els instanceof Array ? els : [els]; 286 287 if (Object.prototype.toString.call(attrs) !== '[object Object]') { 288 return; 289 } 290 291 for (var i = els.length; i--;) { 292 for (var key in attrs) { 293 els[i].setAttribute(key, attrs[key]); 294 } 295 } 296} 297 298function removeAttrs(els, attrs) { 299 els = isNodeList(els) || els instanceof Array ? els : [els]; 300 attrs = attrs instanceof Array ? attrs : [attrs]; 301 var attrLength = attrs.length; 302 303 for (var i = els.length; i--;) { 304 for (var j = attrLength; j--;) { 305 els[i].removeAttribute(attrs[j]); 306 } 307 } 308} 309 310function arrayFromNodeList(nl) { 311 var arr = []; 312 313 for (var i = 0, l = nl.length; i < l; i++) { 314 arr.push(nl[i]); 315 } 316 317 return arr; 318} 319 320function hideElement(el, forceHide) { 321 if (el.style.display !== 'none') { 322 el.style.display = 'none'; 323 } 324} 325 326function showElement(el, forceHide) { 327 if (el.style.display === 'none') { 328 el.style.display = ''; 329 } 330} 331 332function isVisible(el) { 333 return window.getComputedStyle(el).display !== 'none'; 334} 335 336function whichProperty(props) { 337 if (typeof props === 'string') { 338 var arr = [props], 339 Props = props.charAt(0).toUpperCase() + props.substr(1), 340 prefixes = ['Webkit', 'Moz', 'ms', 'O']; 341 prefixes.forEach(function (prefix) { 342 if (prefix !== 'ms' || props === 'transform') { 343 arr.push(prefix + Props); 344 } 345 }); 346 props = arr; 347 } 348 349 var el = document.createElement('fakeelement'); 350
vendor: 17,825 bytes, lines 350-923
350props.length; 351 352 for (var i = 0; i < props.length; i++) { 353 var prop = props[i]; 354 355 if (el.style[prop] !== undefined) { 356 return prop; 357 } 358 } 359 360 return false; // explicit for ie9- 361} 362 363function has3DTransforms(tf) { 364 if (!tf) { 365 return false; 366 } 367 368 if (!window.getComputedStyle) { 369 return false; 370 } 371 372 var doc = document, 373 body = getBody(), 374 docOverflow = setFakeBody(body), 375 el = doc.createElement('p'), 376 has3d, 377 cssTF = tf.length > 9 ? '-' + tf.slice(0, -9).toLowerCase() + '-' : ''; 378 cssTF += 'transform'; // Add it to the body to get the computed style 379 380 body.insertBefore(el, null); 381 el.style[tf] = 'translate3d(1px,1px,1px)'; 382 has3d = window.getComputedStyle(el).getPropertyValue(cssTF); 383 body.fake ? resetFakeBody(body, docOverflow) : el.remove(); 384 return has3d !== undefined && has3d.length > 0 && has3d !== "none"; 385} 386 387// get transitionend, animationend based on transitionDuration 388// @propin: string 389// @propOut: string, first-letter uppercase 390// Usage: getEndProperty('WebkitTransitionDuration', 'Transition') => webkitTransitionEnd 391function getEndProperty(propIn, propOut) { 392 var endProp = false; 393 394 if (/^Webkit/.test(propIn)) { 395 endProp = 'webkit' + propOut + 'End'; 396 } else if (/^O/.test(propIn)) { 397 endProp = 'o' + propOut + 'End'; 398 } else if (propIn) { 399 endProp = propOut.toLowerCase() + 'end'; 400 } 401 402 return endProp; 403} 404 405// Test via a getter in the options object to see if the passive property is accessed 406var supportsPassive = false; 407 408try { 409 var opts = Object.defineProperty({}, 'passive', { 410 get: function () { 411 supportsPassive = true; 412 } 413 }); 414 window.addEventListener("test", null, opts); 415} catch (e) {} 416 417var passiveOption = supportsPassive ? { 418 passive: true 419} : false; 420 421function addEvents(el, obj, preventScrolling) { 422 for (var prop in obj) { 423 var option = ['touchstart', 'touchmove'].indexOf(prop) >= 0 && !preventScrolling ? passiveOption : false; 424 el.addEventListener(prop, obj[prop], option); 425 } 426} 427 428function removeEvents(el, obj) { 429 for (var prop in obj) { 430 var option = ['touchstart', 'touchmove'].indexOf(prop) >= 0 ? passiveOption : false; 431 el.removeEventListener(prop, obj[prop], option); 432 } 433} 434 435function Events() { 436 return { 437 topics: {}, 438 on: function (eventName, fn) { 439 this.topics[eventName] = this.topics[eventName] || []; 440 this.topics[eventName].push(fn); 441 }, 442 off: function (eventName, fn) { 443 if (this.topics[eventName]) { 444 for (var i = 0; i < this.topics[eventName].length; i++) { 445 if (this.topics[eventName][i] === fn) { 446 this.topics[eventName].splice(i, 1); 447 break; 448 } 449 } 450 } 451 }, 452 emit: function (eventName, data) { 453 data.type = eventName; 454 455 if (this.topics[eventName]) { 456 this.topics[eventName].forEach(function (fn) { 457 fn(data, eventName); 458 }); 459 } 460 } 461 }; 462} 463 464function jsTransform(element, attr, prefix, postfix, to, duration, callback) { 465 var tick = Math.min(duration, 10), 466 unit = to.indexOf('%') >= 0 ? '%' : 'px', 467 to = to.replace(unit, ''), 468 from = Number(element.style[attr].replace(prefix, '').replace(postfix, '').replace(unit, '')), 469 positionTick = (to - from) / duration * tick; 470 setTimeout(moveElement, tick); 471 472 function moveElement() { 473 duration -= tick; 474 from += positionTick; 475 element.style[attr] = prefix + from + unit + postfix; 476 477 if (duration > 0) { 478 setTimeout(moveElement, tick); 479 } else { 480 callback(); 481 } 482 } 483} 484 485// Object.keys 486if (!Object.keys) { 487 Object.keys = function (object) { 488 var keys = []; 489 490 for (var name in object) { 491 if (Object.prototype.hasOwnProperty.call(object, name)) { 492 keys.push(name); 493 } 494 } 495 496 return keys; 497 }; 498} // ChildNode.remove 499 500 501if (!("remove" in Element.prototype)) { 502 Element.prototype.remove = function () { 503 if (this.parentNode) { 504 this.parentNode.removeChild(this); 505 } 506 }; 507} 508var tns = function (options) { 509 options = extend({ 510 container: '.slider', 511 mode: 'carousel', 512 axis: 'horizontal', 513 items: 1, 514 gutter: 0, 515 edgePadding: 0, 516 fixedWidth: false, 517 autoWidth: false, 518 viewportMax: false, 519 slideBy: 1, 520 center: false, 521 controls: true, 522 controlsPosition: 'top', 523 controlsText: ['prev', 'next'], 524 controlsContainer: false, 525 prevButton: false, 526 nextButton: false, 527 nav: true, 528 navPosition: 'top', 529 navContainer: false, 530 navAsThumbnails: false, 531 arrowKeys: false, 532 speed: 300, 533 autoplay: false, 534 autoplayPosition: 'top', 535 autoplayTimeout: 5000, 536 autoplayDirection: 'forward', 537 autoplayText: ['start', 'stop'], 538 autoplayHoverPause: false, 539 autoplayButton: false, 540 autoplayButtonOutput: true, 541 autoplayResetOnVisibility: true, 542 animateIn: 'tns-fadeIn', 543 animateOut: 'tns-fadeOut', 544 animateNormal: 'tns-normal', 545 animateDelay: false, 546 loop: true, 547 rewind: false, 548 autoHeight: false, 549 responsive: false, 550 lazyload: false, 551 lazyloadSelector: '.tns-lazy-img', 552 touch: true, 553 mouseDrag: false, 554 swipeAngle: 15, 555 nested: false, 556 preventActionWhenRunning: false, 557 preventScrollOnTouch: false, 558 freezable: true, 559 onInit: false, 560 useLocalStorage: true, 561 nonce: false 562 }, options || {}); 563 var doc = document, 564 win = window, 565 KEYS = { 566 ENTER: 13, 567 SPACE: 32, 568 LEFT: 37, 569 RIGHT: 39 570 }, 571 tnsStorage = {}, 572 localStorageAccess = options.useLocalStorage; 573 574 if (localStorageAccess) { 575 // check browser version and local storage access 576 var browserInfo = navigator.userAgent; 577 var uid = new Date(); 578 579 try { 580 tnsStorage = win.localStorage; 581 582 if (tnsStorage) { 583 tnsStorage.setItem(uid, uid); 584 localStorageAccess = tnsStorage.getItem(uid) == uid; 585 tnsStorage.removeItem(uid); 586 } else { 587 localStorageAccess = false; 588 } 589 590 if (!localStorageAccess) { 591 tnsStorage = {}; 592 } 593 } catch (e) { 594 localStorageAccess = false; 595 } 596 597 if (localStorageAccess) { 598 // remove storage when browser version changes 599 if (tnsStorage['tnsApp'] && tnsStorage['tnsApp'] !== browserInfo) { 600 ['tC', 'tPL', 'tMQ', 'tTf', 't3D', 'tTDu', 'tTDe', 'tADu', 'tADe', 'tTE', 'tAE'].forEach(function (item) { 601 tnsStorage.removeItem(item); 602 }); 603 } // update browserInfo 604 605 606 localStorage['tnsApp'] = browserInfo; 607 } 608 } 609 610 var CALC = tnsStorage['tC'] ? checkStorageValue(tnsStorage['tC']) : setLocalStorage(tnsStorage, 'tC', calc(), localStorageAccess), 611 PERCENTAGELAYOUT = tnsStorage['tPL'] ? checkStorageValue(tnsStorage['tPL']) : setLocalStorage(tnsStorage, 'tPL', percentageLayout(), localStorageAccess), 612 CSSMQ = tnsStorage['tMQ'] ? checkStorageValue(tnsStorage['tMQ']) : setLocalStorage(tnsStorage, 'tMQ', mediaquerySupport(), localStorageAccess), 613 TRANSFORM = tnsStorage['tTf'] ? checkStorageValue(tnsStorage['tTf']) : setLocalStorage(tnsStorage, 'tTf', whichProperty('transform'), localStorageAccess), 614 HAS3DTRANSFORMS = tnsStorage['t3D'] ? checkStorageValue(tnsStorage['t3D']) : setLocalStorage(tnsStorage, 't3D', has3DTransforms(TRANSFORM), localStorageAccess), 615 TRANSITIONDURATION = tnsStorage['tTDu'] ? checkStorageValue(tnsStorage['tTDu']) : setLocalStorage(tnsStorage, 'tTDu', whichProperty('transitionDuration'), localStorageAccess), 616 TRANSITIONDELAY = tnsStorage['tTDe'] ? checkStorageValue(tnsStorage['tTDe']) : setLocalStorage(tnsStorage, 'tTDe', whichProperty('transitionDelay'), localStorageAccess), 617 ANIMATIONDURATION = tnsStorage['tADu'] ? checkStorageValue(tnsStorage['tADu']) : setLocalStorage(tnsStorage, 'tADu', whichProperty('animationDuration'), localStorageAccess), 618 ANIMATIONDELAY = tnsStorage['tADe'] ? checkStorageValue(tnsStorage['tADe']) : setLocalStorage(tnsStorage, 'tADe', whichProperty('animationDelay'), localStorageAccess), 619 TRANSITIONEND = tnsStorage['tTE'] ? checkStorageValue(tnsStorage['tTE']) : setLocalStorage(tnsStorage, 'tTE', getEndProperty(TRANSITIONDURATION, 'Transition'), localStorageAccess), 620 ANIMATIONEND = tnsStorage['tAE'] ? checkStorageValue(tnsStorage['tAE']) : setLocalStorage(tnsStorage, 'tAE', getEndProperty(ANIMATIONDURATION, 'Animation'), localStorageAccess); // get element nodes from selectors 621 622 var supportConsoleWarn = win.console && typeof win.console.warn === "function", 623 tnsList = ['container', 'controlsContainer', 'prevButton', 'nextButton', 'navContainer', 'autoplayButton'], 624 optionsElements = {}; 625 tnsList.forEach(function (item) { 626 if (typeof options[item] === 'string') { 627 var str = options[item], 628 el = doc.querySelector(str); 629 optionsElements[item] = str; 630 631 if (el && el.nodeName) { 632 options[item] = el; 633 } else { 634 if (supportConsoleWarn) { 635 console.warn('Can\'t find', options[item]); 636 } 637 638 return; 639 } 640 } 641 }); // make sure at least 1 slide 642 643 if (options.container.children.length < 1) { 644 if (supportConsoleWarn) { 645 console.warn('No slides found in', options.container); 646 } 647 648 return; 649 } // update options 650 651 652 var responsive = options.responsive, 653 nested = options.nested, 654 carousel = options.mode === 'carousel' ? true : false; 655 656 if (responsive) { 657 // apply responsive[0] to options and remove it 658 if (0 in responsive) { 659 options = extend(options, responsive[0]); 660 delete responsive[0]; 661 } 662 663 var responsiveTem = {}; 664 665 for (var key in responsive) { 666 var val = responsive[key]; // update responsive 667 // from: 300: 2 668 // to: 669 // 300: { 670 // items: 2 671 // } 672 673 val = typeof val === 'number' ? { 674 items: val 675 } : val; 676 responsiveTem[key] = val; 677 } 678 679 responsive = responsiveTem; 680 responsiveTem = null; 681 } // update options 682 683 684 function updateOptions(obj) { 685 for (var key in obj) { 686 if (!carousel) { 687 if (key === 'slideBy') { 688 obj[key] = 'page'; 689 } 690 691 if (key === 'edgePadding') { 692 obj[key] = false; 693 } 694 695 if (key === 'autoHeight') { 696 obj[key] = false; 697 } 698 } // update responsive options 699 700 701 if (key === 'responsive') { 702 updateOptions(obj[key]); 703 } 704 } 705 } 706 707 if (!carousel) { 708 updateOptions(options); 709 } // === define and set variables === 710 711 712 if (!carousel) { 713 options.axis = 'horizontal'; 714 options.slideBy = 'page'; 715 options.edgePadding = false; 716 var animateIn = options.animateIn, 717 animateOut = options.animateOut, 718 animateDelay = options.animateDelay, 719 animateNormal = options.animateNormal; 720 } 721 722 var horizontal = options.axis === 'horizontal' ? true : false, 723 outerWrapper = doc.createElement('div'), 724 innerWrapper = doc.createElement('div'), 725 middleWrapper, 726 container = options.container, 727 containerParent = container.parentNode, 728 containerHTML = container.outerHTML, 729 slideItems = container.children, 730 slideCount = slideItems.length, 731 breakpointZone, 732 windowWidth = getWindowWidth(), 733 isOn = false; 734 735 if (responsive) { 736 setBreakpointZone(); 737 } 738 739 if (carousel) { 740 container.className += ' tns-vpfix'; 741 } // fixedWidth: viewport > rightBoundary > indexMax 742 743 744 var autoWidth = options.autoWidth, 745 fixedWidth = getOption('fixedWidth'), 746 edgePadding = getOption('edgePadding'), 747 gutter = getOption('gutter'), 748 viewport = getViewportWidth(), 749 center = getOption('center'), 750 items = !autoWidth ? Math.floor(getOption('items')) : 1, 751 slideBy = getOption('slideBy'), 752 viewportMax = options.viewportMax || options.fixedWidthViewportWidth, 753 arrowKeys = getOption('arrowKeys'), 754 speed = getOption('speed'), 755 rewind = options.rewind, 756 loop = rewind ? false : options.loop, 757 autoHeight = getOption('autoHeight'), 758 controls = getOption('controls'), 759 controlsText = getOption('controlsText'), 760 nav = getOption('nav'), 761 touch = getOption('touch'), 762 mouseDrag = getOption('mouseDrag'), 763 autoplay = getOption('autoplay'), 764 autoplayTimeout = getOption('autoplayTimeout'), 765 autoplayText = getOption('autoplayText'), 766 autoplayHoverPause = getOption('autoplayHoverPause'), 767 autoplayResetOnVisibility = getOption('autoplayResetOnVisibility'), 768 sheet = createStyleSheet(null, getOption('nonce')), 769 lazyload = options.lazyload, 770 lazyloadSelector = options.lazyloadSelector, 771 slidePositions, 772 // collection of slide positions 773 slideItemsOut = [], 774 cloneCount = loop ? getCloneCountForLoop() : 0, 775 slideCountNew = !carousel ? slideCount + cloneCount : slideCount + cloneCount * 2, 776 hasRightDeadZone = (fixedWidth || autoWidth) && !loop ? true : false, 777 rightBoundary = fixedWidth ? getRightBoundary() : null, 778 updateIndexBeforeTransform = !carousel || !loop ? true : false, 779 // transform 780 transformAttr = horizontal ? 'left' : 'top', 781 transformPrefix = '', 782 transformPostfix = '', 783 // index 784 getIndexMax = function () { 785 if (fixedWidth) { 786 return function () { 787 return center && !loop ? slideCount - 1 : Math.ceil(-rightBoundary / (fixedWidth + gutter)); 788 }; 789 } else if (autoWidth) { 790 return function () { 791 for (var i = 0; i < slideCountNew; i++) { 792 if (slidePositions[i] >= -rightBoundary) { 793 return i; 794 } 795 } 796 }; 797 } else { 798 return function () { 799 if (center && carousel && !loop) { 800 return slideCount - 1; 801 } else { 802 return loop || carousel ? Math.max(0, slideCountNew - Math.ceil(items)) : slideCountNew - 1; 803 } 804 }; 805 } 806 }(), 807 index = getStartIndex(getOption('startIndex')), 808 indexCached = index; 809 getCurrentSlide(); 810 var indexMin = 0, 811 indexMax = !autoWidth ? getIndexMax() : null, 812 preventActionWhenRunning = options.preventActionWhenRunning, 813 swipeAngle = options.swipeAngle, 814 moveDirectionExpected = swipeAngle ? '?' : true, 815 running = false, 816 onInit = options.onInit, 817 events = new Events(), 818 // id, class 819 newContainerClasses = ' tns-slider tns-' + options.mode, 820 slideId = container.id || getSlideId(), 821 disable = getOption('disable'), 822 disabled = false, 823 freezable = options.freezable, 824 freeze = freezable && !autoWidth ? getFreeze() : false, 825 frozen = false, 826 controlsEvents = { 827 'click': onControlsClick, 828 'keydown': onControlsKeydown 829 }, 830 navEvents = { 831 'click': onNavClick, 832 'keydown': onNavKeydown 833 }, 834 hoverEvents = { 835 'mouseover': mouseoverPause, 836 'mouseout': mouseoutRestart 837 }, 838 visibilityEvent = { 839 'visibilitychange': onVisibilityChange 840 }, 841 docmentKeydownEvent = { 842 'keydown': onDocumentKeydown 843 }, 844 touchEvents = { 845 'touchstart': onPanStart, 846 'touchmove': onPanMove, 847 'touchend': onPanEnd, 848 'touchcancel': onPanEnd 849 }, 850 dragEvents = { 851 'mousedown': onPanStart, 852 'mousemove': onPanMove, 853 'mouseup': onPanEnd, 854 'mouseleave': onPanEnd 855 }, 856 hasControls = hasOption('controls'), 857 hasNav = hasOption('nav'), 858 navAsThumbnails = autoWidth ? true : options.navAsThumbnails, 859 hasAutoplay = hasOption('autoplay'), 860 hasTouch = hasOption('touch'), 861 hasMouseDrag = hasOption('mouseDrag'), 862 slideActiveClass = 'tns-slide-active', 863 slideClonedClass = 'tns-slide-cloned', 864 imgCompleteClass = 'tns-complete', 865 imgEvents = { 866 'load': onImgLoaded, 867 'error': onImgFailed 868 }, 869 imgsComplete, 870 liveregionCurrent, 871 preventScroll = options.preventScrollOnTouch === 'force' ? true : false; // controls 872 873 874 if (hasControls) { 875 var controlsContainer = options.controlsContainer, 876 controlsContainerHTML = options.controlsContainer ? options.controlsContainer.outerHTML : '', 877 prevButton = options.prevButton, 878 nextButton = options.nextButton, 879 prevButtonHTML = options.prevButton ? options.prevButton.outerHTML : '', 880 nextButtonHTML = options.nextButton ? options.nextButton.outerHTML : '', 881 prevIsButton, 882 nextIsButton; 883 } // nav 884 885 886 if (hasNav) { 887 var navContainer = options.navContainer, 888 navContainerHTML = options.navContainer ? options.navContainer.outerHTML : '', 889 navItems, 890 pages = autoWidth ? slideCount : getPages(), 891 pagesCached = 0, 892 navClicked = -1, 893 navCurrentIndex = getCurrentNavIndex(), 894 navCurrentIndexCached = navCurrentIndex, 895 navActiveClass = 'tns-nav-active', 896 navStr = 'Carousel Page ', 897 navStrCurrent = ' (Current Slide)'; 898 } // autoplay 899 900 901 if (hasAutoplay) { 902 var autoplayDirection = options.autoplayDirection === 'forward' ? 1 : -1, 903 autoplayButton = options.autoplayButton, 904 autoplayButtonHTML = options.autoplayButton ? options.autoplayButton.outerHTML : '', 905 autoplayHtmlStrings = ['<span class=\'tns-visually-hidden\'>', ' animation</span>'], 906 autoplayTimer, 907 animating, 908 autoplayHoverPaused, 909 autoplayUserPaused, 910 autoplayVisibilityPaused; 911 } 912 913 if (hasTouch || hasMouseDrag) { 914 var initPosition = {}, 915 lastPosition = {}, 916 translateInit, 917 panStart = false, 918 rafIndex, 919 getDist = horizontal ? function (a, b) { 920 return a.x - b.x; 921 } : function (a, b) { 922 return a.y - b.y; 923
vendor: 40,138 bytes, lines 923-2207
923 }; 924 } // disable slider when slidecount <= items 925 926 927 if (!autoWidth) { 928 resetVariblesWhenDisable(disable || freeze); 929 } 930 931 if (TRANSFORM) { 932 transformAttr = TRANSFORM; 933 transformPrefix = 'translate'; 934 935 if (HAS3DTRANSFORMS) { 936 transformPrefix += horizontal ? '3d(' : '3d(0px, '; 937 transformPostfix = horizontal ? ', 0px, 0px)' : ', 0px)'; 938 } else { 939 transformPrefix += horizontal ? 'X(' : 'Y('; 940 transformPostfix = ')'; 941 } 942 } 943 944 if (carousel) { 945 container.className = container.className.replace('tns-vpfix', ''); 946 } 947 948 initStructure(); 949 initSheet(); 950 initSliderTransform(); // === COMMON FUNCTIONS === // 951 952 function resetVariblesWhenDisable(condition) { 953 if (condition) { 954 controls = nav = touch = mouseDrag = arrowKeys = autoplay = autoplayHoverPause = autoplayResetOnVisibility = false; 955 } 956 } 957 958 function getCurrentSlide() { 959 var tem = carousel ? index - cloneCount : index; 960 961 while (tem < 0) { 962 tem += slideCount; 963 } 964 965 return tem % slideCount + 1; 966 } 967 968 function getStartIndex(ind) { 969 ind = ind ? Math.max(0, Math.min(loop ? slideCount - 1 : slideCount - items, ind)) : 0; 970 return carousel ? ind + cloneCount : ind; 971 } 972 973 function getAbsIndex(i) { 974 if (i == null) { 975 i = index; 976 } 977 978 if (carousel) { 979 i -= cloneCount; 980 } 981 982 while (i < 0) { 983 i += slideCount; 984 } 985 986 return Math.floor(i % slideCount); 987 } 988 989 function getCurrentNavIndex() { 990 var absIndex = getAbsIndex(), 991 result; 992 result = navAsThumbnails ? absIndex : fixedWidth || autoWidth ? Math.ceil((absIndex + 1) * pages / slideCount - 1) : Math.floor(absIndex / items); // set active nav to the last one when reaches the right edge 993 994 if (!loop && carousel && index === indexMax) { 995 result = pages - 1; 996 } 997 998 return result; 999 } 1000 1001 function getItemsMax() { 1002 // fixedWidth or autoWidth while viewportMax is not available 1003 if (autoWidth || fixedWidth && !viewportMax) { 1004 return slideCount - 1; // most cases 1005 } else { 1006 var str = fixedWidth ? 'fixedWidth' : 'items', 1007 arr = []; 1008 1009 if (fixedWidth || options[str] < slideCount) { 1010 arr.push(options[str]); 1011 } 1012 1013 if (responsive) { 1014 for (var bp in responsive) { 1015 var tem = responsive[bp][str]; 1016 1017 if (tem && (fixedWidth || tem < slideCount)) { 1018 arr.push(tem); 1019 } 1020 } 1021 } 1022 1023 if (!arr.length) { 1024 arr.push(0); 1025 } 1026 1027 return Math.ceil(fixedWidth ? viewportMax / Math.min.apply(null, arr) : Math.max.apply(null, arr)); 1028 } 1029 } 1030 1031 function getCloneCountForLoop() { 1032 var itemsMax = getItemsMax(), 1033 result = carousel ? Math.ceil((itemsMax * 5 - slideCount) / 2) : itemsMax * 4 - slideCount; 1034 result = Math.max(itemsMax, result); 1035 return hasOption('edgePadding') ? result + 1 : result; 1036 } 1037 1038 function getWindowWidth() { 1039 return win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; 1040 } 1041 1042 function getInsertPosition(pos) { 1043 return pos === 'top' ? 'afterbegin' : 'beforeend'; 1044 } 1045 1046 function getClientWidth(el) { 1047 if (el == null) { 1048 return; 1049 } 1050 1051 var div = doc.createElement('div'), 1052 rect, 1053 width; 1054 el.appendChild(div); 1055 rect = div.getBoundingClientRect(); 1056 width = rect.right - rect.left; 1057 div.remove(); 1058 return width || getClientWidth(el.parentNode); 1059 } 1060 1061 function getViewportWidth() { 1062 var gap = edgePadding ? edgePadding * 2 - gutter : 0; 1063 return getClientWidth(containerParent) - gap; 1064 } 1065 1066 function hasOption(item) { 1067 if (options[item]) { 1068 return true; 1069 } else { 1070 if (responsive) { 1071 for (var bp in responsive) { 1072 if (responsive[bp][item]) { 1073 return true; 1074 } 1075 } 1076 } 1077 1078 return false; 1079 } 1080 } // get option: 1081 // fixed width: viewport, fixedWidth, gutter => items 1082 // others: window width => all variables 1083 // all: items => slideBy 1084 1085 1086 function getOption(item, ww) { 1087 if (ww == null) { 1088 ww = windowWidth; 1089 } 1090 1091 if (item === 'items' && fixedWidth) { 1092 return Math.floor((viewport + gutter) / (fixedWidth + gutter)) || 1; 1093 } else { 1094 var result = options[item]; 1095 1096 if (responsive) { 1097 for (var bp in responsive) { 1098 // bp: convert string to number 1099 if (ww >= parseInt(bp)) { 1100 if (item in responsive[bp]) { 1101 result = responsive[bp][item]; 1102 } 1103 } 1104 } 1105 } 1106 1107 if (item === 'slideBy' && result === 'page') { 1108 result = getOption('items'); 1109 } 1110 1111 if (!carousel && (item === 'slideBy' || item === 'items')) { 1112 result = Math.floor(result); 1113 } 1114 1115 return result; 1116 } 1117 } 1118 1119 function getSlideMarginLeft(i) { 1120 return CALC ? CALC + '(' + i * 100 + '% / ' + slideCountNew + ')' : i * 100 / slideCountNew + '%'; 1121 } 1122 1123 function getInnerWrapperStyles(edgePaddingTem, gutterTem, fixedWidthTem, speedTem, autoHeightBP) { 1124 var str = ''; 1125 1126 if (edgePaddingTem !== undefined) { 1127 var gap = edgePaddingTem; 1128 1129 if (gutterTem) { 1130 gap -= gutterTem; 1131 } 1132 1133 str = horizontal ? 'margin: 0 ' + gap + 'px 0 ' + edgePaddingTem + 'px;' : 'margin: ' + edgePaddingTem + 'px 0 ' + gap + 'px 0;'; 1134 } else if (gutterTem && !fixedWidthTem) { 1135 var gutterTemUnit = '-' + gutterTem + 'px', 1136 dir = horizontal ? gutterTemUnit + ' 0 0' : '0 ' + gutterTemUnit + ' 0'; 1137 str = 'margin: 0 ' + dir + ';'; 1138 } 1139 1140 if (!carousel && autoHeightBP && TRANSITIONDURATION && speedTem) { 1141 str += getTransitionDurationStyle(speedTem); 1142 } 1143 1144 return str; 1145 } 1146 1147 function getContainerWidth(fixedWidthTem, gutterTem, itemsTem) { 1148 if (fixedWidthTem) { 1149 return (fixedWidthTem + gutterTem) * slideCountNew + 'px'; 1150 } else { 1151 return CALC ? CALC + '(' + slideCountNew * 100 + '% / ' + itemsTem + ')' : slideCountNew * 100 / itemsTem + '%'; 1152 } 1153 } 1154 1155 function getSlideWidthStyle(fixedWidthTem, gutterTem, itemsTem) { 1156 var width; 1157 1158 if (fixedWidthTem) { 1159 width = fixedWidthTem + gutterTem + 'px'; 1160 } else { 1161 if (!carousel) { 1162 itemsTem = Math.floor(itemsTem); 1163 } 1164 1165 var dividend = carousel ? slideCountNew : itemsTem; 1166 width = CALC ? CALC + '(100% / ' + dividend + ')' : 100 / dividend + '%'; 1167 } 1168 1169 width = 'width:' + width; // inner slider: overwrite outer slider styles 1170 1171 return nested !== 'inner' ? width + ';' : width + ' !important;'; 1172 } 1173 1174 function getSlideGutterStyle(gutterTem) { 1175 var str = ''; // gutter maybe interger || 0 1176 // so can't use 'if (gutter)' 1177 1178 if (gutterTem !== false) { 1179 var prop = horizontal ? 'padding-' : 'margin-', 1180 dir = horizontal ? 'right' : 'bottom'; 1181 str = prop + dir + ': ' + gutterTem + 'px;'; 1182 } 1183 1184 return str; 1185 } 1186 1187 function getCSSPrefix(name, num) { 1188 var prefix = name.substring(0, name.length - num).toLowerCase(); 1189 1190 if (prefix) { 1191 prefix = '-' + prefix + '-'; 1192 } 1193 1194 return prefix; 1195 } 1196 1197 function getTransitionDurationStyle(speed) { 1198 return getCSSPrefix(TRANSITIONDURATION, 18) + 'transition-duration:' + speed / 1000 + 's;'; 1199 } 1200 1201 function getAnimationDurationStyle(speed) { 1202 return getCSSPrefix(ANIMATIONDURATION, 17) + 'animation-duration:' + speed / 1000 + 's;'; 1203 } 1204 1205 function initStructure() { 1206 var classOuter = 'tns-outer', 1207 classInner = 'tns-inner'; 1208 hasOption('gutter'); 1209 outerWrapper.className = classOuter; 1210 innerWrapper.className = classInner; 1211 outerWrapper.id = slideId + '-ow'; 1212 innerWrapper.id = slideId + '-iw'; // set container properties 1213 1214 if (container.id === '') { 1215 container.id = slideId; 1216 } 1217 1218 newContainerClasses += PERCENTAGELAYOUT || autoWidth ? ' tns-subpixel' : ' tns-no-subpixel'; 1219 newContainerClasses += CALC ? ' tns-calc' : ' tns-no-calc'; 1220 1221 if (autoWidth) { 1222 newContainerClasses += ' tns-autowidth'; 1223 } 1224 1225 newContainerClasses += ' tns-' + options.axis; 1226 container.className += newContainerClasses; // add constrain layer for carousel 1227 1228 if (carousel) { 1229 middleWrapper = doc.createElement('div'); 1230 middleWrapper.id = slideId + '-mw'; 1231 middleWrapper.className = 'tns-ovh'; 1232 outerWrapper.appendChild(middleWrapper); 1233 middleWrapper.appendChild(innerWrapper); 1234 } else { 1235 outerWrapper.appendChild(innerWrapper); 1236 } 1237 1238 if (autoHeight) { 1239 var wp = middleWrapper ? middleWrapper : innerWrapper; 1240 wp.className += ' tns-ah'; 1241 } 1242 1243 containerParent.insertBefore(outerWrapper, container); 1244 innerWrapper.appendChild(container); // add id, class, aria attributes 1245 // before clone slides 1246 1247 forEach(slideItems, function (item, i) { 1248 addClass(item, 'tns-item'); 1249 1250 if (!item.id) { 1251 item.id = slideId + '-item' + i; 1252 } 1253 1254 if (!carousel && animateNormal) { 1255 addClass(item, animateNormal); 1256 } 1257 1258 setAttrs(item, { 1259 'aria-hidden': 'true', 1260 'tabindex': '-1' 1261 }); 1262 }); // ## clone slides 1263 // carousel: n + slides + n 1264 // gallery: slides + n 1265 1266 if (cloneCount) { 1267 var fragmentBefore = doc.createDocumentFragment(), 1268 fragmentAfter = doc.createDocumentFragment(); 1269 1270 for (var j = cloneCount; j--;) { 1271 var num = j % slideCount, 1272 cloneFirst = slideItems[num].cloneNode(true); 1273 addClass(cloneFirst, slideClonedClass); 1274 removeAttrs(cloneFirst, 'id'); 1275 fragmentAfter.insertBefore(cloneFirst, fragmentAfter.firstChild); 1276 1277 if (carousel) { 1278 var cloneLast = slideItems[slideCount - 1 - num].cloneNode(true); 1279 addClass(cloneLast, slideClonedClass); 1280 removeAttrs(cloneLast, 'id'); 1281 fragmentBefore.appendChild(cloneLast); 1282 } 1283 } 1284 1285 container.insertBefore(fragmentBefore, container.firstChild); 1286 container.appendChild(fragmentAfter); 1287 slideItems = container.children; 1288 } 1289 } 1290 1291 function initSliderTransform() { 1292 // ## images loaded/failed 1293 if (hasOption('autoHeight') || autoWidth || !horizontal) { 1294 var imgs = container.querySelectorAll('img'); // add img load event listener 1295 1296 forEach(imgs, function (img) { 1297 var src = img.src; 1298 1299 if (!lazyload) { 1300 // not data img 1301 if (src && src.indexOf('data:image') < 0) { 1302 img.src = ''; 1303 addEvents(img, imgEvents); 1304 addClass(img, 'loading'); 1305 img.src = src; // data img 1306 } else { 1307 imgLoaded(img); 1308 } 1309 } 1310 }); // set imgsComplete 1311 1312 raf(function () { 1313 imgsLoadedCheck(arrayFromNodeList(imgs), function () { 1314 imgsComplete = true; 1315 }); 1316 }); // reset imgs for auto height: check visible imgs only 1317 1318 if (hasOption('autoHeight')) { 1319 imgs = getImageArray(index, Math.min(index + items - 1, slideCountNew - 1)); 1320 } 1321 1322 lazyload ? initSliderTransformStyleCheck() : raf(function () { 1323 imgsLoadedCheck(arrayFromNodeList(imgs), initSliderTransformStyleCheck); 1324 }); 1325 } else { 1326 // set container transform property 1327 if (carousel) { 1328 doContainerTransformSilent(); 1329 } // update slider tools and events 1330 1331 1332 initTools(); 1333 initEvents(); 1334 } 1335 } 1336 1337 function initSliderTransformStyleCheck() { 1338 if (autoWidth && slideCount > 1) { 1339 // check styles application 1340 var num = loop ? index : slideCount - 1; 1341 1342 (function stylesApplicationCheck() { 1343 var left = slideItems[num].getBoundingClientRect().left; 1344 var right = slideItems[num - 1].getBoundingClientRect().right; 1345 Math.abs(left - right) <= 1 ? initSliderTransformCore() : setTimeout(function () { 1346 stylesApplicationCheck(); 1347 }, 16); 1348 })(); 1349 } else { 1350 initSliderTransformCore(); 1351 } 1352 } 1353 1354 function initSliderTransformCore() { 1355 // run Fn()s which are rely on image loading 1356 if (!horizontal || autoWidth) { 1357 setSlidePositions(); 1358 1359 if (autoWidth) { 1360 rightBoundary = getRightBoundary(); 1361 1362 if (freezable) { 1363 freeze = getFreeze(); 1364 } 1365 1366 indexMax = getIndexMax(); // <= slidePositions, rightBoundary <= 1367 1368 resetVariblesWhenDisable(disable || freeze); 1369 } else { 1370 updateContentWrapperHeight(); 1371 } 1372 } // set container transform property 1373 1374 1375 if (carousel) { 1376 doContainerTransformSilent(); 1377 } // update slider tools and events 1378 1379 1380 initTools(); 1381 initEvents(); 1382 } 1383 1384 function initSheet() { 1385 // gallery: 1386 // set animation classes and left value for gallery slider 1387 if (!carousel) { 1388 for (var i = index, l = index + Math.min(slideCount, items); i < l; i++) { 1389 var item = slideItems[i]; 1390 item.style.left = (i - index) * 100 / items + '%'; 1391 addClass(item, animateIn); 1392 removeClass(item, animateNormal); 1393 } 1394 } // #### LAYOUT 1395 // ## INLINE-BLOCK VS FLOAT 1396 // ## PercentageLayout: 1397 // slides: inline-block 1398 // remove blank space between slides by set font-size: 0 1399 // ## Non PercentageLayout: 1400 // slides: float 1401 // margin-right: -100% 1402 // margin-left: ~ 1403 // Resource: https://docs.google.com/spreadsheets/d/147up245wwTXeQYve3BRSAD4oVcvQmuGsFteJOeA5xNQ/edit?usp=sharing 1404 1405 1406 if (horizontal) { 1407 if (PERCENTAGELAYOUT || autoWidth) { 1408 addCSSRule(sheet, '#' + slideId + ' > .tns-item', 'font-size:' + win.getComputedStyle(slideItems[0]).fontSize + ';', getCssRulesLength(sheet)); 1409 addCSSRule(sheet, '#' + slideId, 'font-size:0;', getCssRulesLength(sheet)); 1410 } else if (carousel) { 1411 forEach(slideItems, function (slide, i) { 1412 slide.style.marginLeft = getSlideMarginLeft(i); 1413 }); 1414 } 1415 } // ## BASIC STYLES 1416 1417 1418 if (CSSMQ) { 1419 // middle wrapper style 1420 if (TRANSITIONDURATION) { 1421 var str = middleWrapper && options.autoHeight ? getTransitionDurationStyle(options.speed) : ''; 1422 addCSSRule(sheet, '#' + slideId + '-mw', str, getCssRulesLength(sheet)); 1423 } // inner wrapper styles 1424 1425 1426 str = getInnerWrapperStyles(options.edgePadding, options.gutter, options.fixedWidth, options.speed, options.autoHeight); 1427 addCSSRule(sheet, '#' + slideId + '-iw', str, getCssRulesLength(sheet)); // container styles 1428 1429 if (carousel) { 1430 str = horizontal && !autoWidth ? 'width:' + getContainerWidth(options.fixedWidth, options.gutter, options.items) + ';' : ''; 1431 1432 if (TRANSITIONDURATION) { 1433 str += getTransitionDurationStyle(speed); 1434 } 1435 1436 addCSSRule(sheet, '#' + slideId, str, getCssRulesLength(sheet)); 1437 } // slide styles 1438 1439 1440 str = horizontal && !autoWidth ? getSlideWidthStyle(options.fixedWidth, options.gutter, options.items) : ''; 1441 1442 if (options.gutter) { 1443 str += getSlideGutterStyle(options.gutter); 1444 } // set gallery items transition-duration 1445 1446 1447 if (!carousel) { 1448 if (TRANSITIONDURATION) { 1449 str += getTransitionDurationStyle(speed); 1450 } 1451 1452 if (ANIMATIONDURATION) { 1453 str += getAnimationDurationStyle(speed); 1454 } 1455 } 1456 1457 if (str) { 1458 addCSSRule(sheet, '#' + slideId + ' > .tns-item', str, getCssRulesLength(sheet)); 1459 } // non CSS mediaqueries: IE8 1460 // ## update inner wrapper, container, slides if needed 1461 // set inline styles for inner wrapper & container 1462 // insert stylesheet (one line) for slides only (since slides are many) 1463 1464 } else { 1465 // middle wrapper styles 1466 update_carousel_transition_duration(); // inner wrapper styles 1467 1468 innerWrapper.style.cssText = getInnerWrapperStyles(edgePadding, gutter, fixedWidth, autoHeight); // container styles 1469 1470 if (carousel && horizontal && !autoWidth) { 1471 container.style.width = getContainerWidth(fixedWidth, gutter, items); 1472 } // slide styles 1473 1474 1475 var str = horizontal && !autoWidth ? getSlideWidthStyle(fixedWidth, gutter, items) : ''; 1476 1477 if (gutter) { 1478 str += getSlideGutterStyle(gutter); 1479 } // append to the last line 1480 1481 1482 if (str) { 1483 addCSSRule(sheet, '#' + slideId + ' > .tns-item', str, getCssRulesLength(sheet)); 1484 } 1485 } // ## MEDIAQUERIES 1486 1487 1488 if (responsive && CSSMQ) { 1489 for (var bp in responsive) { 1490 // bp: convert string to number 1491 bp = parseInt(bp); 1492 var opts = responsive[bp], 1493 str = '', 1494 middleWrapperStr = '', 1495 innerWrapperStr = '', 1496 containerStr = '', 1497 slideStr = '', 1498 itemsBP = !autoWidth ? getOption('items', bp) : null, 1499 fixedWidthBP = getOption('fixedWidth', bp), 1500 speedBP = getOption('speed', bp), 1501 edgePaddingBP = getOption('edgePadding', bp), 1502 autoHeightBP = getOption('autoHeight', bp), 1503 gutterBP = getOption('gutter', bp); // middle wrapper string 1504 1505 if (TRANSITIONDURATION && middleWrapper && getOption('autoHeight', bp) && 'speed' in opts) { 1506 middleWrapperStr = '#' + slideId + '-mw{' + getTransitionDurationStyle(speedBP) + '}'; 1507 } // inner wrapper string 1508 1509 1510 if ('edgePadding' in opts || 'gutter' in opts) { 1511 innerWrapperStr = '#' + slideId + '-iw{' + getInnerWrapperStyles(edgePaddingBP, gutterBP, fixedWidthBP, speedBP, autoHeightBP) + '}'; 1512 } // container string 1513 1514 1515 if (carousel && horizontal && !autoWidth && ('fixedWidth' in opts || 'items' in opts || fixedWidth && 'gutter' in opts)) { 1516 containerStr = 'width:' + getContainerWidth(fixedWidthBP, gutterBP, itemsBP) + ';'; 1517 } 1518 1519 if (TRANSITIONDURATION && 'speed' in opts) { 1520 containerStr += getTransitionDurationStyle(speedBP); 1521 } 1522 1523 if (containerStr) { 1524 containerStr = '#' + slideId + '{' + containerStr + '}'; 1525 } // slide string 1526 1527 1528 if ('fixedWidth' in opts || fixedWidth && 'gutter' in opts || !carousel && 'items' in opts) { 1529 slideStr += getSlideWidthStyle(fixedWidthBP, gutterBP, itemsBP); 1530 } 1531 1532 if ('gutter' in opts) { 1533 slideStr += getSlideGutterStyle(gutterBP); 1534 } // set gallery items transition-duration 1535 1536 1537 if (!carousel && 'speed' in opts) { 1538 if (TRANSITIONDURATION) { 1539 slideStr += getTransitionDurationStyle(speedBP); 1540 } 1541 1542 if (ANIMATIONDURATION) { 1543 slideStr += getAnimationDurationStyle(speedBP); 1544 } 1545 } 1546 1547 if (slideStr) { 1548 slideStr = '#' + slideId + ' > .tns-item{' + slideStr + '}'; 1549 } // add up 1550 1551 1552 str = middleWrapperStr + innerWrapperStr + containerStr + slideStr; 1553 1554 if (str) { 1555 sheet.insertRule('@media (min-width: ' + bp / 16 + 'em) {' + str + '}', sheet.cssRules.length); 1556 } 1557 } 1558 } 1559 } 1560 1561 function initTools() { 1562 // == slides == 1563 updateSlideStatus(); // == live region == 1564 1565 outerWrapper.insertAdjacentHTML('afterbegin', '<div class="tns-liveregion tns-visually-hidden" aria-live="polite" aria-atomic="true">slide <span class="current">' + getLiveRegionStr() + '</span> of ' + slideCount + '</div>'); 1566 liveregionCurrent = outerWrapper.querySelector('.tns-liveregion .current'); // == autoplayInit == 1567 1568 if (hasAutoplay) { 1569 var txt = autoplay ? 'stop' : 'start'; 1570 1571 if (autoplayButton) { 1572 setAttrs(autoplayButton, { 1573 'data-action': txt 1574 }); 1575 } else if (options.autoplayButtonOutput) { 1576 outerWrapper.insertAdjacentHTML(getInsertPosition(options.autoplayPosition), '<button type="button" data-action="' + txt + '">' + autoplayHtmlStrings[0] + txt + autoplayHtmlStrings[1] + autoplayText[0] + '</button>'); 1577 autoplayButton = outerWrapper.querySelector('[data-action]'); 1578 } // add event 1579 1580 1581 if (autoplayButton) { 1582 addEvents(autoplayButton, { 1583 'click': toggleAutoplay 1584 }); 1585 } 1586 1587 if (autoplay) { 1588 startAutoplay(); 1589 1590 if (autoplayHoverPause) { 1591 addEvents(container, hoverEvents); 1592 } 1593 1594 if (autoplayResetOnVisibility) { 1595 addEvents(container, visibilityEvent); 1596 } 1597 } 1598 } // == navInit == 1599 1600 1601 if (hasNav) { 1602 // will not hide the navs in case they're thumbnails 1603 1604 if (navContainer) { 1605 setAttrs(navContainer, { 1606 'aria-label': 'Carousel Pagination' 1607 }); 1608 navItems = navContainer.children; 1609 forEach(navItems, function (item, i) { 1610 setAttrs(item, { 1611 'data-nav': i, 1612 'tabindex': '-1', 1613 'aria-label': navStr + (i + 1), 1614 'aria-controls': slideId 1615 }); 1616 }); // generated nav 1617 } else { 1618 var navHtml = '', 1619 hiddenStr = navAsThumbnails ? '' : 'style="display:none"'; 1620 1621 for (var i = 0; i < slideCount; i++) { 1622 // hide nav items by default 1623 navHtml += '<button type="button" data-nav="' + i + '" tabindex="-1" aria-controls="' + slideId + '" ' + hiddenStr + ' aria-label="' + navStr + (i + 1) + '"></button>'; 1624 } 1625 1626 navHtml = '<div class="tns-nav" aria-label="Carousel Pagination">' + navHtml + '</div>'; 1627 outerWrapper.insertAdjacentHTML(getInsertPosition(options.navPosition), navHtml); 1628 navContainer = outerWrapper.querySelector('.tns-nav'); 1629 navItems = navContainer.children; 1630 } 1631 1632 updateNavVisibility(); // add transition 1633 1634 if (TRANSITIONDURATION) { 1635 var prefix = TRANSITIONDURATION.substring(0, TRANSITIONDURATION.length - 18).toLowerCase(), 1636 str = 'transition: all ' + speed / 1000 + 's'; 1637 1638 if (prefix) { 1639 str = '-' + prefix + '-' + str; 1640 } 1641 1642 addCSSRule(sheet, '[aria-controls^=' + slideId + '-item]', str, getCssRulesLength(sheet)); 1643 } 1644 1645 setAttrs(navItems[navCurrentIndex], { 1646 'aria-label': navStr + (navCurrentIndex + 1) + navStrCurrent 1647 }); 1648 removeAttrs(navItems[navCurrentIndex], 'tabindex'); 1649 addClass(navItems[navCurrentIndex], navActiveClass); // add events 1650 1651 addEvents(navContainer, navEvents); 1652 } // == controlsInit == 1653 1654 1655 if (hasControls) { 1656 if (!controlsContainer && (!prevButton || !nextButton)) { 1657 outerWrapper.insertAdjacentHTML(getInsertPosition(options.controlsPosition), '<div class="tns-controls" aria-label="Carousel Navigation" tabindex="0"><button type="button" data-controls="prev" tabindex="-1" aria-controls="' + slideId + '">' + controlsText[0] + '</button><button type="button" data-controls="next" tabindex="-1" aria-controls="' + slideId + '">' + controlsText[1] + '</button></div>'); 1658 controlsContainer = outerWrapper.querySelector('.tns-controls'); 1659 } 1660 1661 if (!prevButton || !nextButton) { 1662 prevButton = controlsContainer.children[0]; 1663 nextButton = controlsContainer.children[1]; 1664 } 1665 1666 if (options.controlsContainer) { 1667 setAttrs(controlsContainer, { 1668 'aria-label': 'Carousel Navigation', 1669 'tabindex': '0' 1670 }); 1671 } 1672 1673 if (options.controlsContainer || options.prevButton && options.nextButton) { 1674 setAttrs([prevButton, nextButton], { 1675 'aria-controls': slideId, 1676 'tabindex': '-1' 1677 }); 1678 } 1679 1680 if (options.controlsContainer || options.prevButton && options.nextButton) { 1681 setAttrs(prevButton, { 1682 'data-controls': 'prev' 1683 }); 1684 setAttrs(nextButton, { 1685 'data-controls': 'next' 1686 }); 1687 } 1688 1689 prevIsButton = isButton(prevButton); 1690 nextIsButton = isButton(nextButton); 1691 updateControlsStatus(); // add events 1692 1693 if (controlsContainer) { 1694 addEvents(controlsContainer, controlsEvents); 1695 } else { 1696 addEvents(prevButton, controlsEvents); 1697 addEvents(nextButton, controlsEvents); 1698 } 1699 } // hide tools if needed 1700 1701 1702 disableUI(); 1703 } 1704 1705 function initEvents() { 1706 // add events 1707 if (carousel && TRANSITIONEND) { 1708 var eve = {}; 1709 eve[TRANSITIONEND] = onTransitionEnd; 1710 addEvents(container, eve); 1711 } 1712 1713 if (touch) { 1714 addEvents(container, touchEvents, options.preventScrollOnTouch); 1715 } 1716 1717 if (mouseDrag) { 1718 addEvents(container, dragEvents); 1719 } 1720 1721 if (arrowKeys) { 1722 addEvents(doc, docmentKeydownEvent); 1723 } 1724 1725 if (nested === 'inner') { 1726 events.on('outerResized', function () { 1727 resizeTasks(); 1728 events.emit('innerLoaded', info()); 1729 }); 1730 } else if (responsive || fixedWidth || autoWidth || autoHeight || !horizontal) { 1731 addEvents(win, { 1732 'resize': onResize 1733 }); 1734 } 1735 1736 if (autoHeight) { 1737 if (nested === 'outer') { 1738 events.on('innerLoaded', doAutoHeight); 1739 } else if (!disable) { 1740 doAutoHeight(); 1741 } 1742 } 1743 1744 doLazyLoad(); 1745 1746 if (disable) { 1747 disableSlider(); 1748 } else if (freeze) { 1749 freezeSlider(); 1750 } 1751 1752 events.on('indexChanged', additionalUpdates); 1753 1754 if (nested === 'inner') { 1755 events.emit('innerLoaded', info()); 1756 } 1757 1758 if (typeof onInit === 'function') { 1759 onInit(info()); 1760 } 1761 1762 isOn = true; 1763 } 1764 1765 function destroy() { 1766 // sheet 1767 sheet.disabled = true; 1768 1769 if (sheet.ownerNode) { 1770 sheet.ownerNode.remove(); 1771 } // remove win event listeners 1772 1773 1774 removeEvents(win, { 1775 'resize': onResize 1776 }); // arrowKeys, controls, nav 1777 1778 if (arrowKeys) { 1779 removeEvents(doc, docmentKeydownEvent); 1780 } 1781 1782 if (controlsContainer) { 1783 removeEvents(controlsContainer, controlsEvents); 1784 } 1785 1786 if (navContainer) { 1787 removeEvents(navContainer, navEvents); 1788 } // autoplay 1789 1790 1791 removeEvents(container, hoverEvents); 1792 removeEvents(container, visibilityEvent); 1793 1794 if (autoplayButton) { 1795 removeEvents(autoplayButton, { 1796 'click': toggleAutoplay 1797 }); 1798 } 1799 1800 if (autoplay) { 1801 clearInterval(autoplayTimer); 1802 } // container 1803 1804 1805 if (carousel && TRANSITIONEND) { 1806 var eve = {}; 1807 eve[TRANSITIONEND] = onTransitionEnd; 1808 removeEvents(container, eve); 1809 } 1810 1811 if (touch) { 1812 removeEvents(container, touchEvents); 1813 } 1814 1815 if (mouseDrag) { 1816 removeEvents(container, dragEvents); 1817 } // cache Object values in options && reset HTML 1818 1819 1820 var htmlList = [containerHTML, controlsContainerHTML, prevButtonHTML, nextButtonHTML, navContainerHTML, autoplayButtonHTML]; 1821 tnsList.forEach(function (item, i) { 1822 var el = item === 'container' ? outerWrapper : options[item]; 1823 1824 if (typeof el === 'object' && el) { 1825 var prevEl = el.previousElementSibling ? el.previousElementSibling : false, 1826 parentEl = el.parentNode; 1827 el.outerHTML = htmlList[i]; 1828 options[item] = prevEl ? prevEl.nextElementSibling : parentEl.firstElementChild; 1829 } 1830 }); // reset variables 1831 1832 tnsList = animateIn = animateOut = animateDelay = animateNormal = horizontal = outerWrapper = innerWrapper = container = containerParent = containerHTML = slideItems = slideCount = breakpointZone = windowWidth = autoWidth = fixedWidth = edgePadding = gutter = viewport = items = slideBy = viewportMax = arrowKeys = speed = rewind = loop = autoHeight = sheet = lazyload = slidePositions = slideItemsOut = cloneCount = slideCountNew = hasRightDeadZone = rightBoundary = updateIndexBeforeTransform = transformAttr = transformPrefix = transformPostfix = getIndexMax = index = indexCached = indexMin = indexMax = swipeAngle = moveDirectionExpected = running = onInit = events = newContainerClasses = slideId = disable = disabled = freezable = freeze = frozen = controlsEvents = navEvents = hoverEvents = visibilityEvent = docmentKeydownEvent = touchEvents = dragEvents = hasControls = hasNav = navAsThumbnails = hasAutoplay = hasTouch = hasMouseDrag = slideActiveClass = imgCompleteClass = imgEvents = imgsComplete = controls = controlsText = controlsContainer = controlsContainerHTML = prevButton = nextButton = prevIsButton = nextIsButton = nav = navContainer = navContainerHTML = navItems = pages = pagesCached = navClicked = navCurrentIndex = navCurrentIndexCached = navActiveClass = navStr = navStrCurrent = autoplay = autoplayTimeout = autoplayDirection = autoplayText = autoplayHoverPause = autoplayButton = autoplayButtonHTML = autoplayResetOnVisibility = autoplayHtmlStrings = autoplayTimer = animating = autoplayHoverPaused = autoplayUserPaused = autoplayVisibilityPaused = initPosition = lastPosition = translateInit = panStart = rafIndex = getDist = touch = mouseDrag = null; // check variables 1833 // [animateIn, animateOut, animateDelay, animateNormal, horizontal, outerWrapper, innerWrapper, container, containerParent, containerHTML, slideItems, slideCount, breakpointZone, windowWidth, autoWidth, fixedWidth, edgePadding, gutter, viewport, items, slideBy, viewportMax, arrowKeys, speed, rewind, loop, autoHeight, sheet, lazyload, slidePositions, slideItemsOut, cloneCount, slideCountNew, hasRightDeadZone, rightBoundary, updateIndexBeforeTransform, transformAttr, transformPrefix, transformPostfix, getIndexMax, index, indexCached, indexMin, indexMax, resizeTimer, swipeAngle, moveDirectionExpected, running, onInit, events, newContainerClasses, slideId, disable, disabled, freezable, freeze, frozen, controlsEvents, navEvents, hoverEvents, visibilityEvent, docmentKeydownEvent, touchEvents, dragEvents, hasControls, hasNav, navAsThumbnails, hasAutoplay, hasTouch, hasMouseDrag, slideActiveClass, imgCompleteClass, imgEvents, imgsComplete, controls, controlsText, controlsContainer, controlsContainerHTML, prevButton, nextButton, prevIsButton, nextIsButton, nav, navContainer, navContainerHTML, navItems, pages, pagesCached, navClicked, navCurrentIndex, navCurrentIndexCached, navActiveClass, navStr, navStrCurrent, autoplay, autoplayTimeout, autoplayDirection, autoplayText, autoplayHoverPause, autoplayButton, autoplayButtonHTML, autoplayResetOnVisibility, autoplayHtmlStrings, autoplayTimer, animating, autoplayHoverPaused, autoplayUserPaused, autoplayVisibilityPaused, initPosition, lastPosition, translateInit, disX, disY, panStart, rafIndex, getDist, touch, mouseDrag ].forEach(function(item) { if (item !== null) { console.log(item); } }); 1834 1835 for (var a in this) { 1836 if (a !== 'rebuild') { 1837 this[a] = null; 1838 } 1839 } 1840 1841 isOn = false; 1842 } // === ON RESIZE === 1843 // responsive || fixedWidth || autoWidth || !horizontal 1844 1845 1846 function onResize(e) { 1847 raf(function () { 1848 resizeTasks(getEvent(e)); 1849 }); 1850 } 1851 1852 function resizeTasks(e) { 1853 if (!isOn) { 1854 return; 1855 } 1856 1857 if (nested === 'outer') { 1858 events.emit('outerResized', info(e)); 1859 } 1860 1861 windowWidth = getWindowWidth(); 1862 var bpChanged, 1863 breakpointZoneTem = breakpointZone, 1864 needContainerTransform = false; 1865 1866 if (responsive) { 1867 setBreakpointZone(); 1868 bpChanged = breakpointZoneTem !== breakpointZone; // if (hasRightDeadZone) { needContainerTransform = true; } // *? 1869 1870 if (bpChanged) { 1871 events.emit('newBreakpointStart', info(e)); 1872 } 1873 } 1874 1875 var indChanged, 1876 itemsChanged, 1877 itemsTem = items, 1878 disableTem = disable, 1879 freezeTem = freeze, 1880 arrowKeysTem = arrowKeys, 1881 controlsTem = controls, 1882 navTem = nav, 1883 touchTem = touch, 1884 mouseDragTem = mouseDrag, 1885 autoplayTem = autoplay, 1886 autoplayHoverPauseTem = autoplayHoverPause, 1887 autoplayResetOnVisibilityTem = autoplayResetOnVisibility, 1888 indexTem = index; 1889 1890 if (bpChanged) { 1891 var fixedWidthTem = fixedWidth, 1892 autoHeightTem = autoHeight, 1893 controlsTextTem = controlsText, 1894 centerTem = center, 1895 autoplayTextTem = autoplayText; 1896 1897 if (!CSSMQ) { 1898 var gutterTem = gutter, 1899 edgePaddingTem = edgePadding; 1900 } 1901 } // get option: 1902 // fixed width: viewport, fixedWidth, gutter => items 1903 // others: window width => all variables 1904 // all: items => slideBy 1905 1906 1907 arrowKeys = getOption('arrowKeys'); 1908 controls = getOption('controls'); 1909 nav = getOption('nav'); 1910 touch = getOption('touch'); 1911 center = getOption('center'); 1912 mouseDrag = getOption('mouseDrag'); 1913 autoplay = getOption('autoplay'); 1914 autoplayHoverPause = getOption('autoplayHoverPause'); 1915 autoplayResetOnVisibility = getOption('autoplayResetOnVisibility'); 1916 1917 if (bpChanged) { 1918 disable = getOption('disable'); 1919 fixedWidth = getOption('fixedWidth'); 1920 speed = getOption('speed'); 1921 autoHeight = getOption('autoHeight'); 1922 controlsText = getOption('controlsText'); 1923 autoplayText = getOption('autoplayText'); 1924 autoplayTimeout = getOption('autoplayTimeout'); 1925 1926 if (!CSSMQ) { 1927 edgePadding = getOption('edgePadding'); 1928 gutter = getOption('gutter'); 1929 } 1930 } // update options 1931 1932 1933 resetVariblesWhenDisable(disable); 1934 viewport = getViewportWidth(); // <= edgePadding, gutter 1935 1936 if ((!horizontal || autoWidth) && !disable) { 1937 setSlidePositions(); 1938 1939 if (!horizontal) { 1940 updateContentWrapperHeight(); // <= setSlidePositions 1941 1942 needContainerTransform = true; 1943 } 1944 } 1945 1946 if (fixedWidth || autoWidth) { 1947 rightBoundary = getRightBoundary(); // autoWidth: <= viewport, slidePositions, gutter 1948 // fixedWidth: <= viewport, fixedWidth, gutter 1949 1950 indexMax = getIndexMax(); // autoWidth: <= rightBoundary, slidePositions 1951 // fixedWidth: <= rightBoundary, fixedWidth, gutter 1952 } 1953 1954 if (bpChanged || fixedWidth) { 1955 items = getOption('items'); 1956 slideBy = getOption('slideBy'); 1957 itemsChanged = items !== itemsTem; 1958 1959 if (itemsChanged) { 1960 if (!fixedWidth && !autoWidth) { 1961 indexMax = getIndexMax(); 1962 } // <= items 1963 // check index before transform in case 1964 // slider reach the right edge then items become bigger 1965 1966 1967 updateIndex(); 1968 } 1969 } 1970 1971 if (bpChanged) { 1972 if (disable !== disableTem) { 1973 if (disable) { 1974 disableSlider(); 1975 } else { 1976 enableSlider(); // <= slidePositions, rightBoundary, indexMax 1977 } 1978 } 1979 } 1980 1981 if (freezable && (bpChanged || fixedWidth || autoWidth)) { 1982 freeze = getFreeze(); // <= autoWidth: slidePositions, gutter, viewport, rightBoundary 1983 // <= fixedWidth: fixedWidth, gutter, rightBoundary 1984 // <= others: items 1985 1986 if (freeze !== freezeTem) { 1987 if (freeze) { 1988 doContainerTransform(getContainerTransformValue(getStartIndex(0))); 1989 freezeSlider(); 1990 } else { 1991 unfreezeSlider(); 1992 needContainerTransform = true; 1993 } 1994 } 1995 } 1996 1997 resetVariblesWhenDisable(disable || freeze); // controls, nav, touch, mouseDrag, arrowKeys, autoplay, autoplayHoverPause, autoplayResetOnVisibility 1998 1999 if (!autoplay) { 2000 autoplayHoverPause = autoplayResetOnVisibility = false; 2001 } 2002 2003 if (arrowKeys !== arrowKeysTem) { 2004 arrowKeys ? addEvents(doc, docmentKeydownEvent) : removeEvents(doc, docmentKeydownEvent); 2005 } 2006 2007 if (controls !== controlsTem) { 2008 if (controls) { 2009 if (controlsContainer) { 2010 showElement(controlsContainer); 2011 } else { 2012 if (prevButton) { 2013 showElement(prevButton); 2014 } 2015 2016 if (nextButton) { 2017 showElement(nextButton); 2018 } 2019 } 2020 } else { 2021 if (controlsContainer) { 2022 hideElement(controlsContainer); 2023 } else { 2024 if (prevButton) { 2025 hideElement(prevButton); 2026 } 2027 2028 if (nextButton) { 2029 hideElement(nextButton); 2030 } 2031 } 2032 } 2033 } 2034 2035 if (nav !== navTem) { 2036 if (nav) { 2037 showElement(navContainer); 2038 updateNavVisibility(); 2039 } else { 2040 hideElement(navContainer); 2041 } 2042 } 2043 2044 if (touch !== touchTem) { 2045 touch ? addEvents(container, touchEvents, options.preventScrollOnTouch) : removeEvents(container, touchEvents); 2046 } 2047 2048 if (mouseDrag !== mouseDragTem) { 2049 mouseDrag ? addEvents(container, dragEvents) : removeEvents(container, dragEvents); 2050 } 2051 2052 if (autoplay !== autoplayTem) { 2053 if (autoplay) { 2054 if (autoplayButton) { 2055 showElement(autoplayButton); 2056 } 2057 2058 if (!animating && !autoplayUserPaused) { 2059 startAutoplay(); 2060 } 2061 } else { 2062 if (autoplayButton) { 2063 hideElement(autoplayButton); 2064 } 2065 2066 if (animating) { 2067 stopAutoplay(); 2068 } 2069 } 2070 } 2071 2072 if (autoplayHoverPause !== autoplayHoverPauseTem) { 2073 autoplayHoverPause ? addEvents(container, hoverEvents) : removeEvents(container, hoverEvents); 2074 } 2075 2076 if (autoplayResetOnVisibility !== autoplayResetOnVisibilityTem) { 2077 autoplayResetOnVisibility ? addEvents(doc, visibilityEvent) : removeEvents(doc, visibilityEvent); 2078 } 2079 2080 if (bpChanged) { 2081 if (fixedWidth !== fixedWidthTem || center !== centerTem) { 2082 needContainerTransform = true; 2083 } 2084 2085 if (autoHeight !== autoHeightTem) { 2086 if (!autoHeight) { 2087 innerWrapper.style.height = ''; 2088 } 2089 } 2090 2091 if (controls && controlsText !== controlsTextTem) { 2092 prevButton.innerHTML = controlsText[0]; 2093 nextButton.innerHTML = controlsText[1]; 2094 } 2095 2096 if (autoplayButton && autoplayText !== autoplayTextTem) { 2097 var i = autoplay ? 1 : 0, 2098 html = autoplayButton.innerHTML, 2099 len = html.length - autoplayTextTem[i].length; 2100 2101 if (html.substring(len) === autoplayTextTem[i]) { 2102 autoplayButton.innerHTML = html.substring(0, len) + autoplayText[i]; 2103 } 2104 } 2105 } else { 2106 if (center && (fixedWidth || autoWidth)) { 2107 needContainerTransform = true; 2108 } 2109 } 2110 2111 if (itemsChanged || fixedWidth && !autoWidth) { 2112 pages = getPages(); 2113 updateNavVisibility(); 2114 } 2115 2116 indChanged = index !== indexTem; 2117 2118 if (indChanged) { 2119 events.emit('indexChanged', info()); 2120 needContainerTransform = true; 2121 } else if (itemsChanged) { 2122 if (!indChanged) { 2123 additionalUpdates(); 2124 } 2125 } else if (fixedWidth || autoWidth) { 2126 doLazyLoad(); 2127 updateSlideStatus(); 2128 updateLiveRegion(); 2129 } 2130 2131 if (itemsChanged && !carousel) { 2132 updateGallerySlidePositions(); 2133 } 2134 2135 if (!disable && !freeze) { 2136 // non-mediaqueries: IE8 2137 if (bpChanged && !CSSMQ) { 2138 // middle wrapper styles 2139 // inner wrapper styles 2140 if (edgePadding !== edgePaddingTem || gutter !== gutterTem) { 2141 innerWrapper.style.cssText = getInnerWrapperStyles(edgePadding, gutter, fixedWidth, speed, autoHeight); 2142 } 2143 2144 if (horizontal) { 2145 // container styles 2146 if (carousel) { 2147 container.style.width = getContainerWidth(fixedWidth, gutter, items); 2148 } // slide styles 2149 2150 2151 var str = getSlideWidthStyle(fixedWidth, gutter, items) + getSlideGutterStyle(gutter); // remove the last line and 2152 // add new styles 2153 2154 removeCSSRule(sheet, getCssRulesLength(sheet) - 1); 2155 addCSSRule(sheet, '#' + slideId + ' > .tns-item', str, getCssRulesLength(sheet)); 2156 } 2157 } // auto height 2158 2159 2160 if (autoHeight) { 2161 doAutoHeight(); 2162 } 2163 2164 if (needContainerTransform) { 2165 doContainerTransformSilent(); 2166 indexCached = index; 2167 } 2168 } 2169 2170 if (bpChanged) { 2171 events.emit('newBreakpointEnd', info(e)); 2172 } 2173 } // === INITIALIZATION FUNCTIONS === // 2174 2175 2176 function getFreeze() { 2177 if (!fixedWidth && !autoWidth) { 2178 var a = center ? items - (items - 1) / 2 : items; 2179 return slideCount <= a; 2180 } 2181 2182 var width = fixedWidth ? (fixedWidth + gutter) * slideCount : slidePositions[slideCount], 2183 vp = edgePadding ? viewport + edgePadding * 2 : viewport + gutter; 2184 2185 if (center) { 2186 vp -= fixedWidth ? (viewport - fixedWidth) / 2 : (viewport - (slidePositions[index + 1] - slidePositions[index] - gutter)) / 2; 2187 } 2188 2189 return width <= vp; 2190 } 2191 2192 function setBreakpointZone() { 2193 breakpointZone = 0; 2194 2195 for (var bp in responsive) { 2196 bp = parseInt(bp); // convert string to number 2197 2198 if (windowWidth >= bp) { 2199 breakpointZone = bp; 2200 } 2201 } 2202 } // (slideBy, indexMin, indexMax) => index 2203 2204 2205 var updateIndex = function () { 2206 return loop ? carousel ? // loop + carousel 2207
vendor: 1,295 bytes, lines 2207-2244
2207 function () { 2208 var leftEdge = indexMin, 2209 rightEdge = indexMax; 2210 leftEdge += slideBy; 2211 rightEdge -= slideBy; // adjust edges when has edge paddings 2212 // or fixed-width slider with extra space on the right side 2213 2214 if (edgePadding) { 2215 leftEdge += 1; 2216 rightEdge -= 1; 2217 } else if (fixedWidth) { 2218 if ((viewport + gutter) % (fixedWidth + gutter)) { 2219 rightEdge -= 1; 2220 } 2221 } 2222 2223 if (cloneCount) { 2224 if (index > rightEdge) { 2225 index -= slideCount; 2226 } else if (index < leftEdge) { 2227 index += slideCount; 2228 } 2229 } 2230 } : // loop + gallery 2231 function () { 2232 if (index > indexMax) { 2233 while (index >= indexMin + slideCount) { 2234 index -= slideCount; 2235 } 2236 } else if (index < indexMin) { 2237 while (index <= indexMax - slideCount) { 2238 index += slideCount; 2239 } 2240 } 2241 } : // non-loop 2242 function () { 2243 index = Math.max(indexMin, Math.min(indexMax, index)); 2244
vendor: 34,861 bytes, lines 2244-3666
2244 }; 2245 }(); 2246 2247 function disableUI() { 2248 if (!autoplay && autoplayButton) { 2249 hideElement(autoplayButton); 2250 } 2251 2252 if (!nav && navContainer) { 2253 hideElement(navContainer); 2254 } 2255 2256 if (!controls) { 2257 if (controlsContainer) { 2258 hideElement(controlsContainer); 2259 } else { 2260 if (prevButton) { 2261 hideElement(prevButton); 2262 } 2263 2264 if (nextButton) { 2265 hideElement(nextButton); 2266 } 2267 } 2268 } 2269 } 2270 2271 function enableUI() { 2272 if (autoplay && autoplayButton) { 2273 showElement(autoplayButton); 2274 } 2275 2276 if (nav && navContainer) { 2277 showElement(navContainer); 2278 } 2279 2280 if (controls) { 2281 if (controlsContainer) { 2282 showElement(controlsContainer); 2283 } else { 2284 if (prevButton) { 2285 showElement(prevButton); 2286 } 2287 2288 if (nextButton) { 2289 showElement(nextButton); 2290 } 2291 } 2292 } 2293 } 2294 2295 function freezeSlider() { 2296 if (frozen) { 2297 return; 2298 } // remove edge padding from inner wrapper 2299 2300 2301 if (edgePadding) { 2302 innerWrapper.style.margin = '0px'; 2303 } // add class tns-transparent to cloned slides 2304 2305 2306 if (cloneCount) { 2307 var str = 'tns-transparent'; 2308 2309 for (var i = cloneCount; i--;) { 2310 if (carousel) { 2311 addClass(slideItems[i], str); 2312 } 2313 2314 addClass(slideItems[slideCountNew - i - 1], str); 2315 } 2316 } // update tools 2317 2318 2319 disableUI(); 2320 frozen = true; 2321 } 2322 2323 function unfreezeSlider() { 2324 if (!frozen) { 2325 return; 2326 } // restore edge padding for inner wrapper 2327 // for mordern browsers 2328 2329 2330 if (edgePadding && CSSMQ) { 2331 innerWrapper.style.margin = ''; 2332 } // remove class tns-transparent to cloned slides 2333 2334 2335 if (cloneCount) { 2336 var str = 'tns-transparent'; 2337 2338 for (var i = cloneCount; i--;) { 2339 if (carousel) { 2340 removeClass(slideItems[i], str); 2341 } 2342 2343 removeClass(slideItems[slideCountNew - i - 1], str); 2344 } 2345 } // update tools 2346 2347 2348 enableUI(); 2349 frozen = false; 2350 } 2351 2352 function disableSlider() { 2353 if (disabled) { 2354 return; 2355 } 2356 2357 sheet.disabled = true; 2358 container.className = container.className.replace(newContainerClasses.substring(1), ''); 2359 removeAttrs(container, ['style']); 2360 2361 if (loop) { 2362 for (var j = cloneCount; j--;) { 2363 if (carousel) { 2364 hideElement(slideItems[j]); 2365 } 2366 2367 hideElement(slideItems[slideCountNew - j - 1]); 2368 } 2369 } // vertical slider 2370 2371 2372 if (!horizontal || !carousel) { 2373 removeAttrs(innerWrapper, ['style']); 2374 } // gallery 2375 2376 2377 if (!carousel) { 2378 for (var i = index, l = index + slideCount; i < l; i++) { 2379 var item = slideItems[i]; 2380 removeAttrs(item, ['style']); 2381 removeClass(item, animateIn); 2382 removeClass(item, animateNormal); 2383 } 2384 } // update tools 2385 2386 2387 disableUI(); 2388 disabled = true; 2389 } 2390 2391 function enableSlider() { 2392 if (!disabled) { 2393 return; 2394 } 2395 2396 sheet.disabled = false; 2397 container.className += newContainerClasses; 2398 doContainerTransformSilent(); 2399 2400 if (loop) { 2401 for (var j = cloneCount; j--;) { 2402 if (carousel) { 2403 showElement(slideItems[j]); 2404 } 2405 2406 showElement(slideItems[slideCountNew - j - 1]); 2407 } 2408 } // gallery 2409 2410 2411 if (!carousel) { 2412 for (var i = index, l = index + slideCount; i < l; i++) { 2413 var item = slideItems[i], 2414 classN = i < index + items ? animateIn : animateNormal; 2415 item.style.left = (i - index) * 100 / items + '%'; 2416 addClass(item, classN); 2417 } 2418 } // update tools 2419 2420 2421 enableUI(); 2422 disabled = false; 2423 } 2424 2425 function updateLiveRegion() { 2426 var str = getLiveRegionStr(); 2427 2428 if (liveregionCurrent.innerHTML !== str) { 2429 liveregionCurrent.innerHTML = str; 2430 } 2431 } 2432 2433 function getLiveRegionStr() { 2434 var arr = getVisibleSlideRange(), 2435 start = arr[0] + 1, 2436 end = arr[1] + 1; 2437 return start === end ? start + '' : start + ' to ' + end; 2438 } 2439 2440 function getVisibleSlideRange(val) { 2441 if (val == null) { 2442 val = getContainerTransformValue(); 2443 } 2444 2445 var start = index, 2446 end, 2447 rangestart, 2448 rangeend; // get range start, range end for autoWidth and fixedWidth 2449 2450 if (center || edgePadding) { 2451 if (autoWidth || fixedWidth) { 2452 rangestart = -(parseFloat(val) + edgePadding); 2453 rangeend = rangestart + viewport + edgePadding * 2; 2454 } 2455 } else { 2456 if (autoWidth) { 2457 rangestart = slidePositions[index]; 2458 rangeend = rangestart + viewport; 2459 } 2460 } // get start, end 2461 // - check auto width 2462 2463 2464 if (autoWidth) { 2465 slidePositions.forEach(function (point, i) { 2466 if (i < slideCountNew) { 2467 if ((center || edgePadding) && point <= rangestart + 0.5) { 2468 start = i; 2469 } 2470 2471 if (rangeend - point >= 0.5) { 2472 end = i; 2473 } 2474 } 2475 }); // - check percentage width, fixed width 2476 } else { 2477 if (fixedWidth) { 2478 var cell = fixedWidth + gutter; 2479 2480 if (center || edgePadding) { 2481 start = Math.floor(rangestart / cell); 2482 end = Math.ceil(rangeend / cell - 1); 2483 } else { 2484 end = start + Math.ceil(viewport / cell) - 1; 2485 } 2486 } else { 2487 if (center || edgePadding) { 2488 var a = items - 1; 2489 2490 if (center) { 2491 start -= a / 2; 2492 end = index + a / 2; 2493 } else { 2494 end = index + a; 2495 } 2496 2497 if (edgePadding) { 2498 var b = edgePadding * items / viewport; 2499 start -= b; 2500 end += b; 2501 } 2502 2503 start = Math.floor(start); 2504 end = Math.ceil(end); 2505 } else { 2506 end = start + items - 1; 2507 } 2508 } 2509 2510 start = Math.max(start, 0); 2511 end = Math.min(end, slideCountNew - 1); 2512 } 2513 2514 return [start, end]; 2515 } 2516 2517 function doLazyLoad() { 2518 if (lazyload && !disable) { 2519 var arg = getVisibleSlideRange(); 2520 arg.push(lazyloadSelector); 2521 getImageArray.apply(null, arg).forEach(function (img) { 2522 if (!hasClass(img, imgCompleteClass)) { 2523 // stop propagation transitionend event to container 2524 var eve = {}; 2525 2526 eve[TRANSITIONEND] = function (e) { 2527 e.stopPropagation(); 2528 }; 2529 2530 addEvents(img, eve); 2531 addEvents(img, imgEvents); // update src 2532 2533 img.src = getAttr(img, 'data-src'); // update srcset 2534 2535 var srcset = getAttr(img, 'data-srcset'); 2536 2537 if (srcset) { 2538 img.srcset = srcset; 2539 } 2540 2541 addClass(img, 'loading'); 2542 } 2543 }); 2544 } 2545 } 2546 2547 function onImgLoaded(e) { 2548 imgLoaded(getTarget(e)); 2549 } 2550 2551 function onImgFailed(e) { 2552 imgFailed(getTarget(e)); 2553 } 2554 2555 function imgLoaded(img) { 2556 addClass(img, 'loaded'); 2557 imgCompleted(img); 2558 } 2559 2560 function imgFailed(img) { 2561 addClass(img, 'failed'); 2562 imgCompleted(img); 2563 } 2564 2565 function imgCompleted(img) { 2566 addClass(img, imgCompleteClass); 2567 removeClass(img, 'loading'); 2568 removeEvents(img, imgEvents); 2569 } 2570 2571 function getImageArray(start, end, imgSelector) { 2572 var imgs = []; 2573 2574 if (!imgSelector) { 2575 imgSelector = 'img'; 2576 } 2577 2578 while (start <= end) { 2579 forEach(slideItems[start].querySelectorAll(imgSelector), function (img) { 2580 imgs.push(img); 2581 }); 2582 start++; 2583 } 2584 2585 return imgs; 2586 } // check if all visible images are loaded 2587 // and update container height if it's done 2588 2589 2590 function doAutoHeight() { 2591 var imgs = getImageArray.apply(null, getVisibleSlideRange()); 2592 raf(function () { 2593 imgsLoadedCheck(imgs, updateInnerWrapperHeight); 2594 }); 2595 } 2596 2597 function imgsLoadedCheck(imgs, cb) { 2598 // execute callback function if all images are complete 2599 if (imgsComplete) { 2600 return cb(); 2601 } // check image classes 2602 2603 2604 imgs.forEach(function (img, index) { 2605 if (!lazyload && img.complete) { 2606 imgCompleted(img); 2607 } // Check image.complete 2608 2609 2610 if (hasClass(img, imgCompleteClass)) { 2611 imgs.splice(index, 1); 2612 } 2613 }); // execute callback function if selected images are all complete 2614 2615 if (!imgs.length) { 2616 return cb(); 2617 } // otherwise execute this functiona again 2618 2619 2620 raf(function () { 2621 imgsLoadedCheck(imgs, cb); 2622 }); 2623 } 2624 2625 function additionalUpdates() { 2626 doLazyLoad(); 2627 updateSlideStatus(); 2628 updateLiveRegion(); 2629 updateControlsStatus(); 2630 updateNavStatus(); 2631 } 2632 2633 function update_carousel_transition_duration() { 2634 if (carousel && autoHeight) { 2635 middleWrapper.style[TRANSITIONDURATION] = speed / 1000 + 's'; 2636 } 2637 } 2638 2639 function getMaxSlideHeight(slideStart, slideRange) { 2640 var heights = []; 2641 2642 for (var i = slideStart, l = Math.min(slideStart + slideRange, slideCountNew); i < l; i++) { 2643 heights.push(slideItems[i].offsetHeight); 2644 } 2645 2646 return Math.max.apply(null, heights); 2647 } // update inner wrapper height 2648 // 1. get the max-height of the visible slides 2649 // 2. set transitionDuration to speed 2650 // 3. update inner wrapper height to max-height 2651 // 4. set transitionDuration to 0s after transition done 2652 2653 2654 function updateInnerWrapperHeight() { 2655 var maxHeight = autoHeight ? getMaxSlideHeight(index, items) : getMaxSlideHeight(cloneCount, slideCount), 2656 wp = middleWrapper ? middleWrapper : innerWrapper; 2657 2658 if (wp.style.height !== maxHeight) { 2659 wp.style.height = maxHeight + 'px'; 2660 } 2661 } // get the distance from the top edge of the first slide to each slide 2662 // (init) => slidePositions 2663 2664 2665 function setSlidePositions() { 2666 slidePositions = [0]; 2667 var attr = horizontal ? 'left' : 'top', 2668 attr2 = horizontal ? 'right' : 'bottom', 2669 base = slideItems[0].getBoundingClientRect()[attr]; 2670 forEach(slideItems, function (item, i) { 2671 // skip the first slide 2672 if (i) { 2673 slidePositions.push(item.getBoundingClientRect()[attr] - base); 2674 } // add the end edge 2675 2676 2677 if (i === slideCountNew - 1) { 2678 slidePositions.push(item.getBoundingClientRect()[attr2] - base); 2679 } 2680 }); 2681 } // update slide 2682 2683 2684 function updateSlideStatus() { 2685 var range = getVisibleSlideRange(), 2686 start = range[0], 2687 end = range[1]; 2688 forEach(slideItems, function (item, i) { 2689 // show slides 2690 if (i >= start && i <= end) { 2691 if (hasAttr(item, 'aria-hidden')) { 2692 removeAttrs(item, ['aria-hidden', 'tabindex']); 2693 addClass(item, slideActiveClass); 2694 } // hide slides 2695 2696 } else { 2697 if (!hasAttr(item, 'aria-hidden')) { 2698 setAttrs(item, { 2699 'aria-hidden': 'true', 2700 'tabindex': '-1' 2701 }); 2702 removeClass(item, slideActiveClass); 2703 } 2704 } 2705 }); 2706 } // gallery: update slide position 2707 2708 2709 function updateGallerySlidePositions() { 2710 var l = index + Math.min(slideCount, items); 2711 2712 for (var i = slideCountNew; i--;) { 2713 var item = slideItems[i]; 2714 2715 if (i >= index && i < l) { 2716 // add transitions to visible slides when adjusting their positions 2717 addClass(item, 'tns-moving'); 2718 item.style.left = (i - index) * 100 / items + '%'; 2719 addClass(item, animateIn); 2720 removeClass(item, animateNormal); 2721 } else if (item.style.left) { 2722 item.style.left = ''; 2723 addClass(item, animateNormal); 2724 removeClass(item, animateIn); 2725 } // remove outlet animation 2726 2727 2728 removeClass(item, animateOut); 2729 } // removing '.tns-moving' 2730 2731 2732 setTimeout(function () { 2733 forEach(slideItems, function (el) { 2734 removeClass(el, 'tns-moving'); 2735 }); 2736 }, 300); 2737 } // set tabindex on Nav 2738 2739 2740 function updateNavStatus() { 2741 // get current nav 2742 if (nav) { 2743 navCurrentIndex = navClicked >= 0 ? navClicked : getCurrentNavIndex(); 2744 navClicked = -1; 2745 2746 if (navCurrentIndex !== navCurrentIndexCached) { 2747 var navPrev = navItems[navCurrentIndexCached], 2748 navCurrent = navItems[navCurrentIndex]; 2749 setAttrs(navPrev, { 2750 'tabindex': '-1', 2751 'aria-label': navStr + (navCurrentIndexCached + 1) 2752 }); 2753 removeClass(navPrev, navActiveClass); 2754 setAttrs(navCurrent, { 2755 'aria-label': navStr + (navCurrentIndex + 1) + navStrCurrent 2756 }); 2757 removeAttrs(navCurrent, 'tabindex'); 2758 addClass(navCurrent, navActiveClass); 2759 navCurrentIndexCached = navCurrentIndex; 2760 } 2761 } 2762 } 2763 2764 function getLowerCaseNodeName(el) { 2765 return el.nodeName.toLowerCase(); 2766 } 2767 2768 function isButton(el) { 2769 return getLowerCaseNodeName(el) === 'button'; 2770 } 2771 2772 function isAriaDisabled(el) { 2773 return el.getAttribute('aria-disabled') === 'true'; 2774 } 2775 2776 function disEnableElement(isButton, el, val) { 2777 if (isButton) { 2778 el.disabled = val; 2779 } else { 2780 el.setAttribute('aria-disabled', val.toString()); 2781 } 2782 } // set 'disabled' to true on controls when reach the edges 2783 2784 2785 function updateControlsStatus() { 2786 if (!controls || rewind || loop) { 2787 return; 2788 } 2789 2790 var prevDisabled = prevIsButton ? prevButton.disabled : isAriaDisabled(prevButton), 2791 nextDisabled = nextIsButton ? nextButton.disabled : isAriaDisabled(nextButton), 2792 disablePrev = index <= indexMin ? true : false, 2793 disableNext = !rewind && index >= indexMax ? true : false; 2794 2795 if (disablePrev && !prevDisabled) { 2796 disEnableElement(prevIsButton, prevButton, true); 2797 } 2798 2799 if (!disablePrev && prevDisabled) { 2800 disEnableElement(prevIsButton, prevButton, false); 2801 } 2802 2803 if (disableNext && !nextDisabled) { 2804 disEnableElement(nextIsButton, nextButton, true); 2805 } 2806 2807 if (!disableNext && nextDisabled) { 2808 disEnableElement(nextIsButton, nextButton, false); 2809 } 2810 } // set duration 2811 2812 2813 function resetDuration(el, str) { 2814 if (TRANSITIONDURATION) { 2815 el.style[TRANSITIONDURATION] = str; 2816 } 2817 } 2818 2819 function getSliderWidth() { 2820 return fixedWidth ? (fixedWidth + gutter) * slideCountNew : slidePositions[slideCountNew]; 2821 } 2822 2823 function getCenterGap(num) { 2824 if (num == null) { 2825 num = index; 2826 } 2827 2828 var gap = edgePadding ? gutter : 0; 2829 return autoWidth ? (viewport - gap - (slidePositions[num + 1] - slidePositions[num] - gutter)) / 2 : fixedWidth ? (viewport - fixedWidth) / 2 : (items - 1) / 2; 2830 } 2831 2832 function getRightBoundary() { 2833 var gap = edgePadding ? gutter : 0, 2834 result = viewport + gap - getSliderWidth(); 2835 2836 if (center && !loop) { 2837 result = fixedWidth ? -(fixedWidth + gutter) * (slideCountNew - 1) - getCenterGap() : getCenterGap(slideCountNew - 1) - slidePositions[slideCountNew - 1]; 2838 } 2839 2840 if (result > 0) { 2841 result = 0; 2842 } 2843 2844 return result; 2845 } 2846 2847 function getContainerTransformValue(num) { 2848 if (num == null) { 2849 num = index; 2850 } 2851 2852 var val; 2853 2854 if (horizontal && !autoWidth) { 2855 if (fixedWidth) { 2856 val = -(fixedWidth + gutter) * num; 2857 2858 if (center) { 2859 val += getCenterGap(); 2860 } 2861 } else { 2862 var denominator = TRANSFORM ? slideCountNew : items; 2863 2864 if (center) { 2865 num -= getCenterGap(); 2866 } 2867 2868 val = -num * 100 / denominator; 2869 } 2870 } else { 2871 val = -slidePositions[num]; 2872 2873 if (center && autoWidth) { 2874 val += getCenterGap(); 2875 } 2876 } 2877 2878 if (hasRightDeadZone) { 2879 val = Math.max(val, rightBoundary); 2880 } 2881 2882 val += horizontal && !autoWidth && !fixedWidth ? '%' : 'px'; 2883 return val; 2884 } 2885 2886 function doContainerTransformSilent(val) { 2887 resetDuration(container, '0s'); 2888 doContainerTransform(val); 2889 } 2890 2891 function doContainerTransform(val) { 2892 if (val == null) { 2893 val = getContainerTransformValue(); 2894 } 2895 2896 container.style[transformAttr] = transformPrefix + val + transformPostfix; 2897 } 2898 2899 function animateSlide(number, classOut, classIn, isOut) { 2900 var l = number + items; 2901 2902 if (!loop) { 2903 l = Math.min(l, slideCountNew); 2904 } 2905 2906 for (var i = number; i < l; i++) { 2907 var item = slideItems[i]; // set item positions 2908 2909 if (!isOut) { 2910 item.style.left = (i - index) * 100 / items + '%'; 2911 } 2912 2913 if (animateDelay && TRANSITIONDELAY) { 2914 item.style[TRANSITIONDELAY] = item.style[ANIMATIONDELAY] = animateDelay * (i - number) / 1000 + 's'; 2915 } 2916 2917 removeClass(item, classOut); 2918 addClass(item, classIn); 2919 2920 if (isOut) { 2921 slideItemsOut.push(item); 2922 } 2923 } 2924 } // make transfer after click/drag: 2925 // 1. change 'transform' property for mordern browsers 2926 // 2. change 'left' property for legacy browsers 2927 2928 2929 var transformCore = function () { 2930 return carousel ? function () { 2931 resetDuration(container, ''); 2932 2933 if (TRANSITIONDURATION || !speed) { 2934 // for morden browsers with non-zero duration or 2935 // zero duration for all browsers 2936 doContainerTransform(); // run fallback function manually 2937 // when duration is 0 / container is hidden 2938 2939 if (!speed || !isVisible(container)) { 2940 onTransitionEnd(); 2941 } 2942 } else { 2943 // for old browser with non-zero duration 2944 jsTransform(container, transformAttr, transformPrefix, transformPostfix, getContainerTransformValue(), speed, onTransitionEnd); 2945 } 2946 2947 if (!horizontal) { 2948 updateContentWrapperHeight(); 2949 } 2950 } : function () { 2951 slideItemsOut = []; 2952 var eve = {}; 2953 eve[TRANSITIONEND] = eve[ANIMATIONEND] = onTransitionEnd; 2954 removeEvents(slideItems[indexCached], eve); 2955 addEvents(slideItems[index], eve); 2956 animateSlide(indexCached, animateIn, animateOut, true); 2957 animateSlide(index, animateNormal, animateIn); // run fallback function manually 2958 // when transition or animation not supported / duration is 0 2959 2960 if (!TRANSITIONEND || !ANIMATIONEND || !speed || !isVisible(container)) { 2961 onTransitionEnd(); 2962 } 2963 }; 2964 }(); 2965 2966 function render(e, sliderMoved) { 2967 if (updateIndexBeforeTransform) { 2968 updateIndex(); 2969 } // render when slider was moved (touch or drag) even though index may not change 2970 2971 2972 if (index !== indexCached || sliderMoved) { 2973 // events 2974 events.emit('indexChanged', info()); 2975 events.emit('transitionStart', info()); 2976 2977 if (autoHeight) { 2978 doAutoHeight(); 2979 } // pause autoplay when click or keydown from user 2980 2981 2982 if (animating && e && ['click', 'keydown'].indexOf(e.type) >= 0) { 2983 stopAutoplay(); 2984 } 2985 2986 running = true; 2987 transformCore(); 2988 } 2989 } 2990 /* 2991 * Transfer prefixed properties to the same format 2992 * CSS: -Webkit-Transform => webkittransform 2993 * JS: WebkitTransform => webkittransform 2994 * @param {string} str - property 2995 * 2996 */ 2997 2998 2999 function strTrans(str) { 3000 return str.toLowerCase().replace(/-/g, ''); 3001 } // AFTER TRANSFORM 3002 // Things need to be done after a transfer: 3003 // 1. check index 3004 // 2. add classes to visible slide 3005 // 3. disable controls buttons when reach the first/last slide in non-loop slider 3006 // 4. update nav status 3007 // 5. lazyload images 3008 // 6. update container height 3009 3010 3011 function onTransitionEnd(event) { 3012 // check running on gallery mode 3013 // make sure trantionend/animationend events run only once 3014 if (carousel || running) { 3015 events.emit('transitionEnd', info(event)); 3016 3017 if (!carousel && slideItemsOut.length > 0) { 3018 for (var i = 0; i < slideItemsOut.length; i++) { 3019 var item = slideItemsOut[i]; // set item positions 3020 3021 item.style.left = ''; 3022 3023 if (ANIMATIONDELAY && TRANSITIONDELAY) { 3024 item.style[ANIMATIONDELAY] = ''; 3025 item.style[TRANSITIONDELAY] = ''; 3026 } 3027 3028 removeClass(item, animateOut); 3029 addClass(item, animateNormal); 3030 } 3031 } 3032 /* update slides, nav, controls after checking ... 3033 * => legacy browsers who don't support 'event' 3034 * have to check event first, otherwise event.target will cause an error 3035 * => or 'gallery' mode: 3036 * + event target is slide item 3037 * => or 'carousel' mode: 3038 * + event target is container, 3039 * + event.property is the same with transform attribute 3040 */ 3041 3042 3043 if (!event || !carousel && event.target.parentNode === container || event.target === container && strTrans(event.propertyName) === strTrans(transformAttr)) { 3044 if (!updateIndexBeforeTransform) { 3045 var indexTem = index; 3046 updateIndex(); 3047 3048 if (index !== indexTem) { 3049 events.emit('indexChanged', info()); 3050 doContainerTransformSilent(); 3051 } 3052 } 3053 3054 if (nested === 'inner') { 3055 events.emit('innerLoaded', info()); 3056 } 3057 3058 running = false; 3059 indexCached = index; 3060 } 3061 } 3062 } // # ACTIONS 3063 3064 3065 function goTo(targetIndex, e) { 3066 if (freeze) { 3067 return; 3068 } // prev slideBy 3069 3070 3071 if (targetIndex === 'prev') { 3072 onControlsClick(e, -1); // next slideBy 3073 } else if (targetIndex === 'next') { 3074 onControlsClick(e, 1); // go to exact slide 3075 } else { 3076 if (running) { 3077 if (preventActionWhenRunning) { 3078 return; 3079 } else { 3080 onTransitionEnd(); 3081 } 3082 } 3083 3084 var absIndex = getAbsIndex(), 3085 indexGap = 0; 3086 3087 if (targetIndex === 'first') { 3088 indexGap = -absIndex; 3089 } else if (targetIndex === 'last') { 3090 indexGap = carousel ? slideCount - items - absIndex : slideCount - 1 - absIndex; 3091 } else { 3092 if (typeof targetIndex !== 'number') { 3093 targetIndex = parseInt(targetIndex); 3094 } 3095 3096 if (!isNaN(targetIndex)) { 3097 // from directly called goTo function 3098 if (!e) { 3099 targetIndex = Math.max(0, Math.min(slideCount - 1, targetIndex)); 3100 } 3101 3102 indexGap = targetIndex - absIndex; 3103 } 3104 } // gallery: make sure new page won't overlap with current page 3105 3106 3107 if (!carousel && indexGap && Math.abs(indexGap) < items) { 3108 var factor = indexGap > 0 ? 1 : -1; 3109 indexGap += index + indexGap - slideCount >= indexMin ? slideCount * factor : slideCount * 2 * factor * -1; 3110 } 3111 3112 index += indexGap; // make sure index is in range 3113 3114 if (carousel && loop) { 3115 if (index < indexMin) { 3116 index += slideCount; 3117 } 3118 3119 if (index > indexMax) { 3120 index -= slideCount; 3121 } 3122 } // if index is changed, start rendering 3123 3124 3125 if (getAbsIndex(index) !== getAbsIndex(indexCached)) { 3126 render(e); 3127 } 3128 } 3129 } // on controls click 3130 3131 3132 function onControlsClick(e, dir) { 3133 if (running) { 3134 if (preventActionWhenRunning) { 3135 return; 3136 } else { 3137 onTransitionEnd(); 3138 } 3139 } 3140 3141 var passEventObject; 3142 3143 if (!dir) { 3144 e = getEvent(e); 3145 var target = getTarget(e); 3146 3147 while (target !== controlsContainer && [prevButton, nextButton].indexOf(target) < 0) { 3148 target = target.parentNode; 3149 } 3150 3151 var targetIn = [prevButton, nextButton].indexOf(target); 3152 3153 if (targetIn >= 0) { 3154 passEventObject = true; 3155 dir = targetIn === 0 ? -1 : 1; 3156 } 3157 } 3158 3159 if (rewind) { 3160 if (index === indexMin && dir === -1) { 3161 goTo('last', e); 3162 return; 3163 } else if (index === indexMax && dir === 1) { 3164 goTo('first', e); 3165 return; 3166 } 3167 } 3168 3169 if (dir) { 3170 index += slideBy * dir; 3171 3172 if (autoWidth) { 3173 index = Math.floor(index); 3174 } // pass e when click control buttons or keydown 3175 3176 3177 render(passEventObject || e && e.type === 'keydown' ? e : null); 3178 } 3179 } // on nav click 3180 3181 3182 function onNavClick(e) { 3183 if (running) { 3184 if (preventActionWhenRunning) { 3185 return; 3186 } else { 3187 onTransitionEnd(); 3188 } 3189 } 3190 3191 e = getEvent(e); 3192 var target = getTarget(e), 3193 navIndex; // find the clicked nav item 3194 3195 while (target !== navContainer && !hasAttr(target, 'data-nav')) { 3196 target = target.parentNode; 3197 } 3198 3199 if (hasAttr(target, 'data-nav')) { 3200 var navIndex = navClicked = Number(getAttr(target, 'data-nav')), 3201 targetIndexBase = fixedWidth || autoWidth ? navIndex * slideCount / pages : navIndex * items, 3202 targetIndex = navAsThumbnails ? navIndex : Math.min(Math.ceil(targetIndexBase), slideCount - 1); 3203 goTo(targetIndex, e); 3204 3205 if (navCurrentIndex === navIndex) { 3206 if (animating) { 3207 stopAutoplay(); 3208 } 3209 3210 navClicked = -1; // reset navClicked 3211 } 3212 } 3213 } // autoplay functions 3214 3215 3216 function setAutoplayTimer() { 3217 autoplayTimer = setInterval(function () { 3218 onControlsClick(null, autoplayDirection); 3219 }, autoplayTimeout); 3220 animating = true; 3221 } 3222 3223 function stopAutoplayTimer() { 3224 clearInterval(autoplayTimer); 3225 animating = false; 3226 } 3227 3228 function updateAutoplayButton(action, txt) { 3229 setAttrs(autoplayButton, { 3230 'data-action': action 3231 }); 3232 autoplayButton.innerHTML = autoplayHtmlStrings[0] + action + autoplayHtmlStrings[1] + txt; 3233 } 3234 3235 function startAutoplay() { 3236 setAutoplayTimer(); 3237 3238 if (autoplayButton) { 3239 updateAutoplayButton('stop', autoplayText[1]); 3240 } 3241 } 3242 3243 function stopAutoplay() { 3244 stopAutoplayTimer(); 3245 3246 if (autoplayButton) { 3247 updateAutoplayButton('start', autoplayText[0]); 3248 } 3249 } // programaitcally play/pause the slider 3250 3251 3252 function play() { 3253 if (autoplay && !animating) { 3254 startAutoplay(); 3255 autoplayUserPaused = false; 3256 } 3257 } 3258 3259 function pause() { 3260 if (animating) { 3261 stopAutoplay(); 3262 autoplayUserPaused = true; 3263 } 3264 } 3265 3266 function toggleAutoplay() { 3267 if (animating) { 3268 stopAutoplay(); 3269 autoplayUserPaused = true; 3270 } else { 3271 startAutoplay(); 3272 autoplayUserPaused = false; 3273 } 3274 } 3275 3276 function onVisibilityChange() { 3277 if (doc.hidden) { 3278 if (animating) { 3279 stopAutoplayTimer(); 3280 autoplayVisibilityPaused = true; 3281 } 3282 } else if (autoplayVisibilityPaused) { 3283 setAutoplayTimer(); 3284 autoplayVisibilityPaused = false; 3285 } 3286 } 3287 3288 function mouseoverPause() { 3289 if (animating) { 3290 stopAutoplayTimer(); 3291 autoplayHoverPaused = true; 3292 } 3293 } 3294 3295 function mouseoutRestart() { 3296 if (autoplayHoverPaused) { 3297 setAutoplayTimer(); 3298 autoplayHoverPaused = false; 3299 } 3300 } // keydown events on document 3301 3302 3303 function onDocumentKeydown(e) { 3304 e = getEvent(e); 3305 var keyIndex = [KEYS.LEFT, KEYS.RIGHT].indexOf(e.keyCode); 3306 3307 if (keyIndex >= 0) { 3308 onControlsClick(e, keyIndex === 0 ? -1 : 1); 3309 } 3310 } // on key control 3311 3312 3313 function onControlsKeydown(e) { 3314 e = getEvent(e); 3315 var keyIndex = [KEYS.LEFT, KEYS.RIGHT].indexOf(e.keyCode); 3316 3317 if (keyIndex >= 0) { 3318 if (keyIndex === 0) { 3319 if (!prevButton.disabled) { 3320 onControlsClick(e, -1); 3321 } 3322 } else if (!nextButton.disabled) { 3323 onControlsClick(e, 1); 3324 } 3325 } 3326 } // set focus 3327 3328 3329 function setFocus(el) { 3330 el.focus(); 3331 } // on key nav 3332 3333 3334 function onNavKeydown(e) { 3335 e = getEvent(e); 3336 var curElement = doc.activeElement; 3337 3338 if (!hasAttr(curElement, 'data-nav')) { 3339 return; 3340 } // var code = e.keyCode, 3341 3342 3343 var keyIndex = [KEYS.LEFT, KEYS.RIGHT, KEYS.ENTER, KEYS.SPACE].indexOf(e.keyCode), 3344 navIndex = Number(getAttr(curElement, 'data-nav')); 3345 3346 if (keyIndex >= 0) { 3347 if (keyIndex === 0) { 3348 if (navIndex > 0) { 3349 setFocus(navItems[navIndex - 1]); 3350 } 3351 } else if (keyIndex === 1) { 3352 if (navIndex < pages - 1) { 3353 setFocus(navItems[navIndex + 1]); 3354 } 3355 } else { 3356 navClicked = navIndex; 3357 goTo(navIndex, e); 3358 } 3359 } 3360 } 3361 3362 function getEvent(e) { 3363 e = e || win.event; 3364 return isTouchEvent(e) ? e.changedTouches[0] : e; 3365 } 3366 3367 function getTarget(e) { 3368 return e.target || win.event.srcElement; 3369 } 3370 3371 function isTouchEvent(e) { 3372 return e.type.indexOf('touch') >= 0; 3373 } 3374 3375 function preventDefaultBehavior(e) { 3376 e.preventDefault ? e.preventDefault() : e.returnValue = false; 3377 } 3378 3379 function getMoveDirectionExpected() { 3380 return getTouchDirection(toDegree(lastPosition.y - initPosition.y, lastPosition.x - initPosition.x), swipeAngle) === options.axis; 3381 } 3382 3383 function onPanStart(e) { 3384 if (running) { 3385 if (preventActionWhenRunning) { 3386 return; 3387 } else { 3388 onTransitionEnd(); 3389 } 3390 } 3391 3392 if (autoplay && animating) { 3393 stopAutoplayTimer(); 3394 } 3395 3396 panStart = true; 3397 3398 if (rafIndex) { 3399 caf(rafIndex); 3400 rafIndex = null; 3401 } 3402 3403 var $ = getEvent(e); 3404 events.emit(isTouchEvent(e) ? 'touchStart' : 'dragStart', info(e)); 3405 3406 if (!isTouchEvent(e) && ['img', 'a'].indexOf(getLowerCaseNodeName(getTarget(e))) >= 0) { 3407 preventDefaultBehavior(e); 3408 } 3409 3410 lastPosition.x = initPosition.x = $.clientX; 3411 lastPosition.y = initPosition.y = $.clientY; 3412 3413 if (carousel) { 3414 translateInit = parseFloat(container.style[transformAttr].replace(transformPrefix, '')); 3415 resetDuration(container, '0s'); 3416 } 3417 } 3418 3419 function onPanMove(e) { 3420 if (panStart) { 3421 var $ = getEvent(e); 3422 lastPosition.x = $.clientX; 3423 lastPosition.y = $.clientY; 3424 3425 if (carousel) { 3426 if (!rafIndex) { 3427 rafIndex = raf(function () { 3428 panUpdate(e); 3429 }); 3430 } 3431 } else { 3432 if (moveDirectionExpected === '?') { 3433 moveDirectionExpected = getMoveDirectionExpected(); 3434 } 3435 3436 if (moveDirectionExpected) { 3437 preventScroll = true; 3438 } 3439 } 3440 3441 if ((typeof e.cancelable !== 'boolean' || e.cancelable) && preventScroll) { 3442 e.preventDefault(); 3443 } 3444 } 3445 } 3446 3447 function panUpdate(e) { 3448 if (!moveDirectionExpected) { 3449 panStart = false; 3450 return; 3451 } 3452 3453 caf(rafIndex); 3454 3455 if (panStart) { 3456 rafIndex = raf(function () { 3457 panUpdate(e); 3458 }); 3459 } 3460 3461 if (moveDirectionExpected === '?') { 3462 moveDirectionExpected = getMoveDirectionExpected(); 3463 } 3464 3465 if (moveDirectionExpected) { 3466 if (!preventScroll && isTouchEvent(e)) { 3467 preventScroll = true; 3468 } 3469 3470 try { 3471 if (e.type) { 3472 events.emit(isTouchEvent(e) ? 'touchMove' : 'dragMove', info(e)); 3473 } 3474 } catch (err) {} 3475 3476 var x = translateInit, 3477 dist = getDist(lastPosition, initPosition); 3478 3479 if (!horizontal || fixedWidth || autoWidth) { 3480 x += dist; 3481 x += 'px'; 3482 } else { 3483 var percentageX = TRANSFORM ? dist * items * 100 / ((viewport + gutter) * slideCountNew) : dist * 100 / (viewport + gutter); 3484 x += percentageX; 3485 x += '%'; 3486 } 3487 3488 container.style[transformAttr] = transformPrefix + x + transformPostfix; 3489 } 3490 } 3491 3492 function onPanEnd(e) { 3493 if (panStart) { 3494 if (rafIndex) { 3495 caf(rafIndex); 3496 rafIndex = null; 3497 } 3498 3499 if (carousel) { 3500 resetDuration(container, ''); 3501 } 3502 3503 panStart = false; 3504 var $ = getEvent(e); 3505 lastPosition.x = $.clientX; 3506 lastPosition.y = $.clientY; 3507 var dist = getDist(lastPosition, initPosition); 3508 3509 if (Math.abs(dist)) { 3510 // drag vs click 3511 if (!isTouchEvent(e)) { 3512 // prevent "click" 3513 var target = getTarget(e); 3514 addEvents(target, { 3515 'click': function preventClick(e) { 3516 preventDefaultBehavior(e); 3517 removeEvents(target, { 3518 'click': preventClick 3519 }); 3520 } 3521 }); 3522 } 3523 3524 if (carousel) { 3525 rafIndex = raf(function () { 3526 if (horizontal && !autoWidth) { 3527 var indexMoved = -dist * items / (viewport + gutter); 3528 indexMoved = dist > 0 ? Math.floor(indexMoved) : Math.ceil(indexMoved); 3529 index += indexMoved; 3530 } else { 3531 var moved = -(translateInit + dist); 3532 3533 if (moved <= 0) { 3534 index = indexMin; 3535 } else if (moved >= slidePositions[slideCountNew - 1]) { 3536 index = indexMax; 3537 } else { 3538 var i = 0; 3539 3540 while (i < slideCountNew && moved >= slidePositions[i]) { 3541 index = i; 3542 3543 if (moved > slidePositions[i] && dist < 0) { 3544 index += 1; 3545 } 3546 3547 i++; 3548 } 3549 } 3550 } 3551 3552 render(e, dist); 3553 events.emit(isTouchEvent(e) ? 'touchEnd' : 'dragEnd', info(e)); 3554 }); 3555 } else { 3556 if (moveDirectionExpected) { 3557 onControlsClick(e, dist > 0 ? -1 : 1); 3558 } 3559 } 3560 } 3561 } // reset 3562 3563 3564 if (options.preventScrollOnTouch === 'auto') { 3565 preventScroll = false; 3566 } 3567 3568 if (swipeAngle) { 3569 moveDirectionExpected = '?'; 3570 } 3571 3572 if (autoplay && !animating) { 3573 setAutoplayTimer(); 3574 } 3575 } // === RESIZE FUNCTIONS === // 3576 // (slidePositions, index, items) => vertical_conentWrapper.height 3577 3578 3579 function updateContentWrapperHeight() { 3580 var wp = middleWrapper ? middleWrapper : innerWrapper; 3581 wp.style.height = slidePositions[index + items] - slidePositions[index] + 'px'; 3582 } 3583 3584 function getPages() { 3585 var rough = fixedWidth ? (fixedWidth + gutter) * slideCount / viewport : slideCount / items; 3586 return Math.min(Math.ceil(rough), slideCount); 3587 } 3588 /* 3589 * 1. update visible nav items list 3590 * 2. add "hidden" attributes to previous visible nav items 3591 * 3. remove "hidden" attrubutes to new visible nav items 3592 */ 3593 3594 3595 function updateNavVisibility() { 3596 if (!nav || navAsThumbnails) { 3597 return; 3598 } 3599 3600 if (pages !== pagesCached) { 3601 var min = pagesCached, 3602 max = pages, 3603 fn = showElement; 3604 3605 if (pagesCached > pages) { 3606 min = pages; 3607 max = pagesCached; 3608 fn = hideElement; 3609 } 3610 3611 while (min < max) { 3612 fn(navItems[min]); 3613 min++; 3614 } // cache pages 3615 3616 3617 pagesCached = pages; 3618 } 3619 } 3620 3621 function info(e) { 3622 return { 3623 container: container, 3624 slideItems: slideItems, 3625 navContainer: navContainer, 3626 navItems: navItems, 3627 controlsContainer: controlsContainer, 3628 hasControls: hasControls, 3629 prevButton: prevButton, 3630 nextButton: nextButton, 3631 items: items, 3632 slideBy: slideBy, 3633 cloneCount: cloneCount, 3634 slideCount: slideCount, 3635 slideCountNew: slideCountNew, 3636 index: index, 3637 indexCached: indexCached, 3638 displayIndex: getCurrentSlide(), 3639 navCurrentIndex: navCurrentIndex, 3640 navCurrentIndexCached: navCurrentIndexCached, 3641 pages: pages, 3642 pagesCached: pagesCached, 3643 sheet: sheet, 3644 isOn: isOn, 3645 event: e || {} 3646 }; 3647 } 3648 3649 return { 3650 version: '2.9.4', 3651 getInfo: info, 3652 events: events, 3653 goTo: goTo, 3654 play: play, 3655 pause: pause, 3656 isOn: isOn, 3657 updateSliderHeight: updateInnerWrapperHeight, 3658 refresh: initSliderTransform, 3659 destroy: destroy, 3660 rebuild: function () { 3661 return tns(extend(options, optionsElements)); 3662 } 3663 }; 3664}; 3665 3666exports.tns = tns;
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.