'\n );\n $('.number-of-items').empty().append(data.numItems == 1 ? data.resources.numberOfItem : data.resources.numberOfItems);\n $('.minicart-quantity').empty().append(data.numItems);\n $('.minicart-link').attr({\n 'aria-label': data.resources.minicartCountOfItems,\n title: data.resources.minicartCountOfItems\n });\n $('.minicart .popover').empty();\n $('.minicart .popover').removeClass('show');\n }\n\n $('.checkout-btn').addClass('disabled');\n } else {\n $('.checkout-btn').removeClass('disabled');\n }\n}\n\n/**\n * re-renders the order totals and the number of items in the cart\n * @param {Object} data - AJAX response from the server\n */\nfunction updateCartTotals(data) {\n var $cart = $('.cart');\n $cart.find('.number-of-items').empty().append(data.numItems == 1 ? data.resources.numberOfItem : data.resources.numberOfItems);\n $cart.find('.shipping-cost span').empty().append(data.totals.totalShippingCost);\n $cart.find('.tax-total span').empty().append(data.totals.totalTax);\n $cart.find('.grand-total span').empty().append(data.totals.grandTotalLessGiftCertificatePaymentInstrumentsFormatted);\n $cart.find('.sub-total span').empty().append(data.totals.subTotal);\n $cart.closest('.minicart').find('.minicart-quantity').empty().append(data.numItems);\n $cart.closest('.minicart').find('.minicart-link').attr({\n 'aria-label': data.resources.minicartCountOfItems,\n title: data.resources.minicartCountOfItems\n });\n if (data.totals.orderLevelDiscountTotal.value > 0) {\n $cart.find('.order-discount').removeClass('hide-order-discount');\n $cart.find('.order-discount-total').empty()\n .append('- ' + data.totals.orderLevelDiscountTotal.formatted);\n } else {\n $cart.find('.order-discount').addClass('hide-order-discount');\n }\n\n // update accutron menu minicart link\n $('.nav-item-minicart-burger .minicart-quantity').empty().append(data.numItems);\n\n if (data.totals.shippingLevelDiscountTotal.value > 0) {\n $cart.find('.shipping-discount').removeClass('hide-shipping-discount');\n $cart.find('.shipping-discount-total span').empty().append('- ' +\n data.totals.shippingLevelDiscountTotal.formatted);\n } else {\n $cart.find('.shipping-discount').addClass('hide-shipping-discount');\n }\n\n if (data.payment.giftCertificatePaymentInstruments.length) {\n $cart.find('.giftcertificate-discount').removeClass('d-none');\n $cart.find('.giftcertificate-discount-label').text(data.totals.giftCertificatePaymentInstrumentsLabel);\n $cart.find('.giftcertificate-discount-total').text('- ' + data.totals.giftCertificatePaymentInstrumentsTotalFormatted);\n } else {\n $cart.find('.giftcertificate-discount').addClass('d-none');\n }\n\n if (data.totals.grandTotalLessGiftCertificatePaymentInstrumentsValue) {\n $cart.find('.cartAdditionalPaymentButtons').removeClass('d-none');\n } else {\n $cart.find('.cartAdditionalPaymentButtons').addClass('d-none');\n }\n\n data.items.forEach(function (item) {\n var itemPrice;\n var itemTotalPrice;\n\n if (item.productType === 'giftCertificate') {\n itemPrice = item.priceTotal.price;\n itemTotalPrice = item.priceTotal.price;\n } else {\n itemPrice = item.renderedPrice;\n itemTotalPrice = item.priceTotal.renderedPrice;\n }\n\n if (data.totals.orderLevelDiscountTotal.value > 0) {\n $cart.find('.coupons-and-promos').empty().append(data.totals.discountsHtml);\n }\n if (item.renderedPromotions) {\n $cart.find('.item-' + item.UUID).empty().append(item.renderedPromotions);\n } else {\n $cart.find('.item-' + item.UUID).empty();\n }\n $cart.find('.uuid-' + item.UUID + ' .unit-price').empty().append(item.renderedPrice);\n $cart.find('.line-item-price-' + item.UUID + ' .unit-price').empty().append(item.renderedPrice);\n $cart.find('.item-total-' + item.UUID).empty().append(item.priceTotal.renderedPrice);\n });\n\n $cart.find('.ca-tax-title-1 p span').text(data.totals.caTaxTitle1);\n $cart.find('.ca-tax-total-1 p span').text(data.totals.caTaxTotal1);\n $cart.find('.ca-tax-title-2 p span').text(data.totals.caTaxTitle2);\n $cart.find('.ca-tax-total-2 p span').text(data.totals.caTaxTotal2);\n\n if (data.totals.caIsTaxSeparated)\n {\n $cart.find('.ca-tax-title-2').removeClass('d-none');\n $cart.find('.ca-tax-total-2').removeClass('d-none');\n } else {\n $cart.find('.ca-tax-title-2').addClass('d-none');\n $cart.find('.ca-tax-total-2').addClass('d-none');\n }\n\n if (data.totals.klarnaTotal) {\n $cart.find('klarna-placement').attr('data-purchase-amount',\n data.totals.klarnaTotal);\n window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];\n window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });\n }\n}\n\n/**\n * re-renders the order totals and the number of items in the cart\n * @param {Object} message - Error message to display\n */\nfunction createErrorNotification(message) {\n var errorHtml = '
' +\n '' + message + '
';\n\n $('.cart-error').append(errorHtml);\n}\n\n/**\n * re-renders the approaching discount messages\n * @param {Object} approachingDiscounts - updated approaching discounts for the cart\n */\nfunction updateApproachingDiscounts(approachingDiscounts) {\n var html = '';\n $('.approaching-discounts').empty();\n if (approachingDiscounts.length > 0) {\n approachingDiscounts.forEach(function (item) {\n html += '
'\n + item.discountMsg + '
';\n });\n }\n $('.approaching-discounts').append(html);\n}\n\n/**\n * Updates the availability of a product line item\n * @param {Object} data - AJAX response from the server\n * @param {string} uuid - The uuid of the product line item to update\n */\nfunction updateAvailability(data, uuid) {\n var lineItem;\n var messages = '';\n\n for (var i = 0; i < data.items.length; i++) {\n if (data.items[i].UUID === uuid) {\n lineItem = data.items[i];\n break;\n }\n }\n\n if (lineItem != null) {\n $('.availability-' + lineItem.UUID).empty();\n\n if (lineItem.availability) {\n if (lineItem.availability.messages) {\n lineItem.availability.messages.forEach(function (message) {\n messages += '
' + message + '
';\n });\n }\n\n if (lineItem.availability.inStockDate) {\n messages += '
'\n + lineItem.availability.inStockDate\n + '
';\n }\n }\n\n $('.availability-' + lineItem.UUID).html(messages);\n }\n}\n\n/**\n * Finds an element in the array that matches search parameter\n * @param {array} array - array of items to search\n * @param {function} match - function that takes an element and returns a boolean indicating if the match is made\n * @returns {Object|null} - returns an element of the array that matched the query.\n */\nfunction findItem(array, match) {\n for (var i = 0, l = array.length; i < l; i++) {\n if (match.call(this, array[i])) {\n return array[i];\n }\n }\n return null;\n}\n\n/**\n * Updates details of a product line item\n * @param {Object} data - AJAX response from the server\n * @param {string} uuid - The uuid of the product line item to update\n */\nfunction updateProductDetails(data, uuid) {\n $('.card .product-info.uuid-' + uuid).parent().replaceWith(data.renderedTemplate);\n}\n\n/**\n * Parses the html for a modal window\n * @param {string} html - representing the body and footer of the modal window\n *\n * @return {Object} - Object with properties body and footer.\n */\nfunction parseHtml(html) {\n var $html = $('
').append($.parseHTML(html));\n\n var body = $html.find('.product-quickview');\n var footer = $html.find('.modal-footer').children();\n\n return { body: body, footer: footer };\n}\n\n/**\n * replace content of modal\n * @param {string} actionUrl - url to be used to remove product\n * @param {string} productID - pid\n * @param {string} productName - product name\n * @param {string} uuid - uuid\n */\nfunction confirmDelete(actionUrl, productID, productName, uuid) {\n var $deleteConfirmBtn = $('.cart-delete-confirmation-btn');\n var $productToRemoveSpan = $('.product-to-remove');\n\n $deleteConfirmBtn.data('pid', productID);\n $deleteConfirmBtn.data('action', actionUrl);\n $deleteConfirmBtn.data('uuid', uuid);\n\n $productToRemoveSpan.empty().append(productName);\n}\n\nfunction init () {\n $('body').on('click', '.remove-product', function (e) {\n e.preventDefault();\n\n var actionUrl = $(this).data('action');\n var productID = $(this).data('pid');\n var productName = $(this).data('name');\n var uuid = $(this).data('uuid');\n module.exports.confirmDelete(actionUrl, productID, productName, uuid);\n });\n\n $('body').on('afterRemoveFromCart', function (e, data) {\n e.preventDefault();\n module.exports.confirmDelete(data.actionUrl, data.productID, data.productName, data.uuid);\n });\n\n $('body').on('click', '.cart-delete-confirmation-btn', function (e) {\n e.preventDefault();\n\n var isCheckout = document.querySelector('#checkout-main');\n var productID = $(this).data('pid');\n var url = $(this).data('action');\n var uuid = $(this).data('uuid');\n var urlParams = {\n pid: productID,\n uuid: uuid\n };\n\n if (isCheckout) {\n urlParams.isCheckout = isCheckout ? true : false;\n }\n\n url = module.exports.appendToUrl(url, urlParams);\n $('.modal-background').remove();\n $('body > .modal-backdrop').remove();\n\n $.spinner().start();\n $.ajax({\n url: url,\n type: 'get',\n dataType: 'json',\n success: function (data) {\n if (data.basket.items.length === 0) {\n $('.cart').empty().append('
' +\n '
' +\n '
' + data.basket.resources.emptyCartMsg + '
' +\n '
' +\n '
'\n );\n $('.number-of-items').empty().append(data.basket.resources.numberOfItems);\n $('.number-of-items-container').removeClass('text-md-right');\n $('.minicart-quantity').empty().append(data.basket.numItems);\n $('.minicart-link').attr({\n 'aria-label': data.basket.resources.minicartCountOfItems,\n title: data.basket.resources.minicartCountOfItems\n });\n $('.minicart .popover').empty();\n $('.minicart .popover').removeClass('show');\n $('body').removeClass('modal-open minicart-open');\n $('html').removeClass('veiled');\n $('.modal-background').remove();\n } else {\n if (data.toBeDeletedUUIDs && data.toBeDeletedUUIDs.length > 0) {\n for (var i = 0; i < data.toBeDeletedUUIDs.length; i++) {\n $('.uuid-' + data.toBeDeletedUUIDs[i]).closest('.card').remove();\n }\n }\n \n if (!isCheckout) {\n $('.uuid-' + uuid).closest('.card').remove();\n }\n \n if (!data.basket.hasBonusProduct) {\n $('.bonus-product').remove();\n }\n // NOTE: there's an open issue for problems with removing products with bonus items: https://github.com/SalesforceCommerceCloud/storefront-reference-architecture/issues/748\n $('.coupons-and-promos').empty().append(data.basket.totals.discountsHtml);\n module.exports.updateCartTotals(data.basket);\n module.exports.updateApproachingDiscounts(data.basket.approachingDiscounts);\n $('body').trigger('setShippingMethodSelection', data.basket);\n module.exports.validateBasket(data.basket);\n }\n\n $('body').trigger('cart:update', [data, uuid]);\n\n $.spinner().stop();\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $.spinner().stop();\n }\n }\n });\n });\n\n $('body').on('quantityStepper:change', (event, stepper) => {\n var $stepper = $(stepper);\n var $select = $stepper.closest('.quantity-form').find('.quantity');\n var value = parseInt($stepper.find('input').val());\n\n $select.find('option[value=\"' + value + '\"]').prop('selected', true).change();\n });\n\n $('body').on('change', '.quantity-form > .quantity', function() {\n var url = $(this).data('action');\n if (!url) {\n return;\n }\n\n var preSelectQty = $(this).data('pre-select-qty');\n var quantity = $(this).val();\n var productID = $(this).data('pid');\n var uuid = $(this).data('uuid');\n var urlParams = {\n pid: productID,\n quantity: quantity,\n uuid: uuid\n };\n url = module.exports.appendToUrl(url, urlParams);\n\n $(this).parents('.card').spinner().start();\n\n $.ajax({\n url: url,\n type: 'get',\n context: this,\n dataType: 'json',\n success: function (data) {\n $('.quantity[data-uuid=\"' + uuid + '\"]').val(quantity);\n $('.coupons-and-promos').empty().append(data.totals.discountsHtml);\n module.exports.updateCartTotals(data);\n module.exports.updateApproachingDiscounts(data.approachingDiscounts);\n module.exports.updateAvailability(data, uuid);\n module.exports.validateBasket(data);\n\n $(this).data('pre-select-qty', quantity);\n\n $('body').trigger('cart:update', [data, uuid]);\n\n $.spinner().stop();\n if ($(this).parents('.product-info').hasClass('bonus-product-line-item') && $('.cart-page').length) {\n location.reload();\n }\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $(this).val(parseInt(preSelectQty, 10));\n $.spinner().stop();\n }\n }\n });\n });\n\n $('.shippingMethods').change(function () {\n var url = $(this).attr('data-actionUrl');\n var urlParams = {\n methodID: $(this).find(':selected').attr('data-shipping-id')\n };\n // url = module.exports.appendToUrl(url, urlParams);\n\n $('.totals').spinner().start();\n $.ajax({\n url: url,\n type: 'post',\n dataType: 'json',\n data: urlParams,\n success: function (data) {\n if (data.error) {\n window.location.href = data.redirectUrl;\n } else {\n $('.coupons-and-promos').empty().append(data.totals.discountsHtml);\n module.exports.updateCartTotals(data);\n module.exports.updateApproachingDiscounts(data.approachingDiscounts);\n module.exports.validateBasket(data);\n }\n $.spinner().stop();\n },\n error: function (err) {\n if (err.redirectUrl) {\n window.location.href = err.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $.spinner().stop();\n }\n }\n });\n });\n\n $('.promo-code-form').submit(function (e) {\n e.preventDefault();\n $.spinner().start();\n $('.coupon-missing-error').hide();\n $('.coupon-error-message').empty();\n if (!$('.coupon-code-field').val()) {\n $('.promo-code-form .form-control').addClass('is-invalid');\n $('.promo-code-form .form-control').attr('aria-describedby', 'missingCouponCode');\n $('.coupon-missing-error').show();\n $.spinner().stop();\n return false;\n }\n var $form = $('.promo-code-form');\n $('.promo-code-form .form-control').removeClass('is-invalid');\n $('.coupon-error-message').empty();\n\n $.ajax({\n url: $form.attr('action'),\n type: 'GET',\n dataType: 'json',\n data: $form.serialize(),\n success: function (data) {\n if (data.error) {\n $('.promo-code-form .form-control').addClass('is-invalid');\n $('.promo-code-form .form-control').attr('aria-describedby', 'invalidCouponCode');\n $('.coupon-error-message').empty().append(data.errorMessage);\n $('body').trigger('promotion:error', data);\n } else {\n $('.coupons-and-promos').empty().append(data.totals.discountsHtml);\n module.exports.updateCartTotals(data);\n module.exports.updateApproachingDiscounts(data.approachingDiscounts);\n module.exports.validateBasket(data);\n $('body').trigger('promotion:success', data);\n }\n $('.coupon-code-field').val('');\n $.spinner().stop();\n },\n error: function (err) {\n $('body').trigger('promotion:error', err);\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.errorMessage);\n $.spinner().stop();\n }\n }\n });\n return false;\n });\n\n $('body').on('click', '.remove-coupon', function (e) {\n e.preventDefault();\n\n var couponCode = $(this).data('code');\n var uuid = $(this).data('uuid');\n var $deleteConfirmBtn = $('.delete-coupon-confirmation-btn');\n var $productToRemoveSpan = $('.coupon-to-remove');\n\n $deleteConfirmBtn.data('uuid', uuid);\n $deleteConfirmBtn.data('code', couponCode);\n\n $productToRemoveSpan.empty().append(couponCode);\n });\n\n $('body').on('click', '.delete-coupon-confirmation-btn', function (e) {\n e.preventDefault();\n\n var url = $(this).data('action');\n var uuid = $(this).data('uuid');\n var couponCode = $(this).data('code');\n var urlParams = {\n code: couponCode,\n uuid: uuid\n };\n\n url = module.exports.appendToUrl(url, urlParams);\n\n $('body > .modal-backdrop').remove();\n\n $.spinner().start();\n $.ajax({\n url: url,\n type: 'get',\n dataType: 'json',\n success: function (data) {\n $('.coupon-uuid-' + uuid).remove();\n module.exports.updateCartTotals(data);\n module.exports.updateApproachingDiscounts(data.approachingDiscounts);\n module.exports.validateBasket(data);\n $.spinner().stop();\n $('body').trigger('promotion:success', data);\n },\n error: function (err) {\n $('body').trigger('promotion:error', err);\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $.spinner().stop();\n }\n }\n });\n });\n $('body').on('click', '.cart-page .bonus-product-button', function () {\n $.spinner().start();\n $(this).addClass('launched-modal');\n $.ajax({\n url: $(this).data('url'),\n method: 'GET',\n dataType: 'json',\n success: function (data) {\n $('body').trigger('bonusproduct:edit', data);\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n });\n\n $('body').on('hidden.bs.modal', '#chooseBonusProductModal', function () {\n $('#chooseBonusProductModal').remove();\n $('.modal-backdrop').remove();\n $('body').removeClass('modal-open');\n\n if ($('.cart-page').length) {\n $('.launched-modal .btn-outline-primary').trigger('focus');\n $('.launched-modal').removeClass('launched-modal');\n } else {\n $('.product-detail .add-to-cart').focus();\n }\n });\n\n $('body').on('change', '.quantity-select', function () {\n var selectedQuantity = $(this).val();\n $('.modal.show .update-cart-url').data('quantity', selectedQuantity);\n });\n\n $('body').on('change', '.options-select', function () {\n var selectedOptionValueId = $(this).children('option:selected').data('value-id');\n $('.modal.show .update-cart-url').data('selected-option-value-id', selectedOptionValueId);\n });\n\n $('body').on('click', '.update-cart-product-global', function (e) {\n e.preventDefault();\n var updateProductUrl = $(this).closest('.cart-and-ipay').find('.update-cart-url').val();\n var form = $(this).closest('.cart-and-ipay').find('.update-cart-url').data();\n\n form.pid = module.exports.getPidValue($(this))\n\n $(this).parents('.card').spinner().start();\n if (updateProductUrl) {\n $.ajax({\n url: updateProductUrl,\n type: 'post',\n context: this,\n data: form,\n dataType: 'json',\n success: function (data) {\n $('#quickViewModal').modal('hide');\n\n $('.coupons-and-promos').empty().append(data.cartModel.totals.discountsHtml);\n module.exports.updateCartTotals(data.cartModel);\n module.exports.updateApproachingDiscounts(data.cartModel.approachingDiscounts);\n module.exports.updateAvailability(data.cartModel, form.uuid);\n module.exports.updateProductDetails(data, form.uuid);\n\n if (data.uuidToBeDeleted) {\n $('.uuid-' + data.uuidToBeDeleted).remove();\n }\n\n module.exports.validateBasket(data.cartModel);\n\n $('body').trigger('cart:update', [data, form.uuid]);\n\n $.spinner().stop();\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $.spinner().stop();\n }\n }\n });\n }\n });\n\n $('body').on('product:afterAddToCartQuickview', () => {\n var verifyCartPage = $('body').find('.page').data('action');\n if (verifyCartPage == 'Cart-Show') {\n location.reload();\n }\n });\n\n //responsible for filling edit gift cert modal with information from line item on cart page\n $('body').on('click', 'a.edit.editGiftCertificateLineItem', function (e) {\n e.preventDefault();\n\n var anchor = $(this);\n var uuid = anchor.data('uuid');\n var parentContainer = anchor.parents('.product-info.uuid-' + uuid);\n var from = parentContainer.find('.dwfrm_giftCertificate_purchase_from-' + uuid).data('value');\n var recipient = parentContainer.find('.dwfrm_giftCertificate_purchase_recipient-' + uuid).data('value');\n var recipientEmail = parentContainer.find('.dwfrm_giftCertificate_purchase_recipientEmail-' + uuid).data('value');\n var message = parentContainer.find('.dwfrm_giftCertificate_purchase_message-' + uuid).attr('title');\n var amount = parentContainer.find('.pricing.item-total-' + uuid).data('value') || parentContainer.find('.price.item-total-' + uuid).data('value');\n var giftCardAmount = parseInt(amount, 10);\n var giftCardColor = parentContainer.find('.dwfrm_giftCertificate_purchase_color-' + uuid).data('value');\n var modal = $('#editGiftCertificateLineItemModal');\n\n modal.find('#from').attr('value', from);\n modal.find('#recipient').attr('value', recipient);\n modal.find('#recipientEmail').attr('value', recipientEmail);\n modal.find('#confirmRecipientEmail').attr('value', recipientEmail);\n modal.find('#message').html(message || '');\n modal.find('#amount').attr('value', (('' + amount) || '0.0').split('.')[0]);\n\n modal.find('#giftAmount').get(0).value = giftCardAmount;\n modal.find('#color').attr('value', giftCardColor);\n modal.find('[data-gift-card-thumb='+giftCardColor+']').trigger('click');\n\n modal.find('.btn-update-giftcertificate-incart').attr('data-uuid', uuid);\n modal.find('.btn-update-giftcertificate-incart').data('uuid', uuid);\n });\n}\n\nmodule.exports = {\n getPidValue: getPidValue,\n appendToUrl: appendToUrl,\n validateBasket: validateBasket,\n updateCartTotals: updateCartTotals,\n createErrorNotification: createErrorNotification,\n updateApproachingDiscounts: updateApproachingDiscounts,\n updateAvailability: updateAvailability,\n updateProductDetails: updateProductDetails,\n confirmDelete: confirmDelete,\n init: init\n};\n","'use strict';\n\nfunction setCjEvent() {\n if ('cjSetReferrerUrl' in window.CachedData.urls && window.CachedData.urls.cjSetReferrerUrl){\n const url = window.CachedData.urls.cjSetReferrerUrl;\n const urlParams = new URLSearchParams(window.location.search.toLowerCase());\n const cjevent = urlParams.get('cjevent');\n \n $.ajax({\n url,\n data: { cjevent },\n error: () => window.console.error('An error occured while setting the cj event')\n });\n }\n};\n\nmodule.exports = {\n setCjEvent: setCjEvent\n};\n","'use strict';\n\nvar SiteConstants = require('constants/SiteConstants');\nconst debounce = require('lodash/debounce');\nimport * as ScrollMagic from \"scrollmagic\";\nimport { TweenMax, TimelineMax } from \"gsap\";\nimport { ScrollMagicPluginGsap } from \"scrollmagic-plugin-gsap\";\nScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);\n\n\n// PD component animations: horizontal scroll and slide\nvar $elementHorizontalScroll = $('.element-horizontal-scroll');\nvar elementHorizontalScroll = $elementHorizontalScroll.length ? true : false;\n\nvar $elementHorizontalSliderWithScroll = $('.element-horizontal-scroll-with-slider');\nvar elementHorizontalSliderWithScroll = $elementHorizontalSliderWithScroll.length ? true : false;\n\n// PDP Real Time Watch Animation\nvar $elementRealTimeImage = $('.element-real-time-watch');\nvar elementRealTimeImage = $elementRealTimeImage.length ? true : false;\n\nif (elementRealTimeImage) {\n // prevents animation from \"spinning catch-up\" effect on page load/refresh\n window.requestAnimFrame = (function(){\n return window.requestAnimationFrame ||\n window.webkitRequestAnimationFrame ||\n window.mozRequestAnimationFrame ||\n function( callback ){\n window.setTimeout(callback, 1000 / 60);\n };\n })();\n\n function drawDate() {\n var dateElement = document.getElementById(\"dateNumber\");\n var now = new Date();\n dateElement.innerHTML = now.getDate();\n }\n\n function drawHands() {\n var hoursElement = document.getElementById(\"hourHand\");\n var minutesElement = document.getElementById(\"minuteHand\");\n var secondsElement = document.getElementById(\"secondHand\");\n var now = new Date(),\n midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),\n diffInMilliseconds = (now.getTime() - midnight.getTime()),\n hours = (diffInMilliseconds/(1000*60*60)),\n minutes = (hours*60),\n seconds = (minutes*60);\n\n secondsElement.style.transform = \"rotate(\" + (seconds * 6) + \"deg)\";\n hoursElement.style.transform = \"rotate(\" + (hours * 30) + \"deg)\";\n minutesElement.style.transform = \"rotate(\" + (minutes * 6) + \"deg)\";\n }\n\n drawDate();\n (function loop(){\n requestAnimFrame(loop);\n drawHands();\n })();\n}\n\nif (elementHorizontalScroll || elementHorizontalSliderWithScroll) {\n var controller = new ScrollMagic.Controller();\n var scenes = [];\n\n function setAnimationDuration() {\n var duration = {};\n duration.slider = 2000;\n duration.scroll = 2000;\n duration.scene = 2000;\n if ($(window).width() < SiteConstants.BreakpointSizes.md) {\n duration.slider = 1000;\n duration.scroll = 2000;\n duration.scene = 3000;\n }\n return duration;\n };\n\n var animationDuration = setAnimationDuration();\n\n function createHorizontalSliderWithScroll() {\n $elementHorizontalSliderWithScroll.each(function() {\n var $sliderElement = $(this).closest('.experience-component');\n $sliderElement.parent().addClass('element-horizontal-slide-track');\n\n var $sliderContainer = $sliderElement.closest('.experience-commerce_layouts-1column');\n\n var sliderElement = $sliderElement[0];\n var sliderContainer = $sliderContainer[0];\n var scrollElementTrack = $(this).find('.element-horizontal-scroll-track')[0];\n var scrollTransitionalText = $(this).parent().parent().parent().find('.slider-transition-animation').children().find('.hero-text')[0];\n\n var action = new TimelineMax()\n .add(TweenMax.to(scrollTransitionalText, animationDuration.slider, {left:'-90%'}), \"first\")\n .add(TweenMax.fromTo(sliderElement, animationDuration.slider, {left:\"100%\"}, {left:0}), \"first\")\n .add(TweenMax.to(scrollElementTrack,animationDuration.scroll,{right:'0'}), \"second\");\n\n var scene = new ScrollMagic.Scene({\n triggerElement: sliderContainer,\n triggerHook: 0,\n duration: animationDuration.scene\n })\n .setPin(sliderContainer)\n .setTween(action)\n .addTo(controller);\n\n scenes.push(scene);\n });\n }\n\n function createHorizontalScroll() {\n $elementHorizontalScroll.each(function() {\n var scrollElement = $(this)[0];\n var scrollElementTrack = $(this).find('.element-horizontal-scroll-track')[0];\n var action = new TimelineMax();\n action.to(scrollElementTrack,animationDuration.scroll,{right:'0'});\n\n var scene = new ScrollMagic.Scene({\n triggerElement: scrollElement,\n triggerHook: 0,\n duration: animationDuration.scene\n })\n .setPin(scrollElement)\n .setTween(action)\n .addTo(controller);\n\n scenes.push(scene);\n });\n }\n\n if (elementHorizontalSliderWithScroll) {\n createHorizontalSliderWithScroll();\n } else if (elementHorizontalScroll) {\n createHorizontalScroll();\n }\n\n $(window).on('resize', debounce(function () {\n if(!isMobile) {\n for (var i = 0; i < scenes.length; i++) {\n scenes[i].destroy(true);\n // the destroy above doesn't, so have to remove this manually ...\n $('.element-horizontal-scroll-track').removeAttr('style');\n }\n\n animationDuration = setAnimationDuration();\n\n if (elementHorizontalSliderWithScroll) {\n createHorizontalSliderWithScroll();\n } else if (elementHorizontalScroll) {\n createHorizontalScroll();\n }\n }\n }, 500))\n\n window.addEventListener(\"orientationchange\", function() {\n for (var i = 0; i < scenes.length; i++) {\n scenes[i].destroy(true);\n // the destroy above doesn't, so have to remove this manually ...\n $('.element-horizontal-scroll-track').removeAttr('style');\n }\n\n animationDuration = setAnimationDuration();\n\n if (elementHorizontalSliderWithScroll) {\n createHorizontalSliderWithScroll();\n } else if (elementHorizontalScroll) {\n createHorizontalScroll();\n }\n }, 500)\n}\n","'use strict';\n\nvar recaptcha = require('core/components/recaptcha');\nconst formValidation = require('base/components/formValidation');\n\nfunction displayMessage(isSuccess, message, headline, $modal) {\n const status = (isSuccess) ? '' : 'alert-danger',\n image = document.querySelector('.primary-images-desktop .slider .slide > img'),\n $modalContent = $modal.find('.modal-content'),\n closeModal = document.querySelector('[data-dismiss=\"modal\"]');\n\n let imageEl = image ? image.cloneNode(true) : false;\n\n // update modal body with message \n $modal.find('#stockNotificationForm').addClass('d-none');\n closeModal.classList.add('mx-auto', 'px-5');\n \n $modalContent.append(`
${headline}
`);\n $modalContent.append(`
${message}
`);\n\n if (isSuccess) {\n $modalContent.addClass('success');\n }\n\n if (imageEl) {\n imageEl.classList.add('notify-modal-image');\n $modalContent.append(imageEl);\n }\n \n $modalContent.append(closeModal);\n}\n\nfunction handleLoggedInCustomer() {\n const loggedInBtn = document.querySelector('[data-customer-email]');\n \n if (loggedInBtn) {\n const notificationEmail = document.querySelector('#stockNotificationForm #email');\n\n notificationEmail.value = loggedInBtn.dataset.customerEmail;\n\n $('.btn-notify').on('click', function(e) {\n if (!document.querySelector('#stockNotificationModal .success')) {\n $('#stockNotificationForm').trigger('submit');\n }\n });\n }\n}\n\nfunction handleFormSubmit() {\n $('#stockNotificationForm').on('submit', (e) => {\n e.preventDefault();\n \n const $form = $(e.currentTarget);\n const $modal = $form.closest('.modal');\n const $modalContent = $form.closest('.modal-content');\n const data = $form.serialize();\n const url = $form.attr('action');\n\n $modalContent.spinner().start();\n\n recaptcha.check(e, {\n url,\n data,\n type: 'POST',\n success: (data) => {\n if (!data.success) {\n formValidation($form, data);\n\n if (data.message) {\n displayMessage(data.success, data.message, data.headline, $modal);\n }\n\n return;\n } else {\n displayMessage(data.success, data.message, data.headline, $modal);\n }\n },\n error: () => {\n const message = $form.data('general-error-message');\n displayMessage(false, message, false, $modal);\n },\n complete: () => {\n $modalContent.spinner().stop();\n }\n });\n });\n}\n\nmodule.exports = {\n handleFormSubmit: handleFormSubmit,\n handleLoggedInCustomer: handleLoggedInCustomer\n}","'use strict';\nvar core = require('core/components/clientSideValidation');\n\ncore.zipCodeUppercase = function () {\n $('body').on('blur keyup change', \"#zipCode, input.shippingZipCode, input.billingZipCode\", function () {\n $(this).val(function (_, val) {\n return val.toUpperCase();\n });\n });\n}\n\ncore.updateBandSizeValidity = function () {\n $('[data-option-id=bandSize] .options-select').on('change', function(e) {\n var target = e.target;\n console.log('target and target value: ', target.value);\n if (target.value !== '') {\n target.classList.remove('is-invalid');\n }\n });\n}\n\nmodule.exports = core;\n","'use strict';\n\nfunction closableColumnInit() {\n var $columnCloseEls = $('.column-close');\n\n $columnCloseEls.each(function() {\n var $container = $(this).closest('.closable-column-content');\n var $pdWrapper = $(this).closest('.experience-component');\n var $closableContent = $container.find('.column-component-closable');\n var $element = $(this);\n \n // update relative / aboslute classes on element and parent to ensure\n // no layout thrashing when collapsible content initially renders\n $pdWrapper.addClass('position-relative');\n $container.addClass('position-absolute');\n // show container now component elements have been updated\n $container.removeClass('closable-column-content-not-initialized');\n\n $element.on('click', function(event) {\n $closableContent.removeClass('show');\n\n $closableContent.on('transitionend webkitTransitionEnd oTransitionEnd', function () {\n $container.addClass('d-none');\n });\n });\n });\n}\n\nmodule.exports = function () {\n // closable Column Button\n closableColumnInit();\n};","'use strict';\n\n/**\n* Overriding from base SFRA to fix nested collapsibles\n*/\n\n/**\n * toggleDrawer - opens / closes pdpCards drawer with animation to height property via CSS transition\n * function callculates height of cardBody Child Elements (which are hidden via overflow property)\n * then adds height to body, thus animating from CSS transition properties\n * @param {*} direction - string - 'open' or 'close'\n * @param {*} scope - active Card element\n */\nfunction toggleDrawer(direction, scope) {\n var cardTitle = scope.querySelector('.card-title'),\n cardBody = scope.querySelector('.card-body'),\n cardUl = scope.querySelector('.pdp-detail-attribute-list'),\n cardUlStyles,\n totalHeight = 0;\n\n if (direction === 'open') {\n scope.classList.add('active');\n cardTitle.setAttribute('aria-expanded', true);\n\n cardUlStyles = window.getComputedStyle(cardUl);\n totalHeight = cardUl.getBoundingClientRect().height + parseInt(cardUlStyles.marginBottom, 10);\n\n cardBody.style.height = totalHeight + 'px';\n\n } else if(direction === 'close') {\n // save close function as variable so we can remove it after transitionEnd (necessary for smooth animation on close)\n var removeHeightAfterTransition = function(event) {\n if (event.propertyName === 'height') {\n scope.classList.remove('active');\n cardTitle.setAttribute('aria-expanded', false);\n }\n cardBody.removeEventListener('transitionend',removeHeightAfterTransition);\n };\n\n cardBody.style.height = '0px';\n cardBody.addEventListener('transitionend', removeHeightAfterTransition, false);\n }\n}\n\nmodule.exports = function () {\n var sizes = ['xs', 'sm', 'md', 'lg', 'xl'];\n\n sizes.forEach(function (size) {\n var selector = '.collapsible-' + size + ' .title';\n $('body').on('click', selector, function (e) {\n e.preventDefault();\n\n // check if target is part of PDP cards\n var pdpCards = e.target.closest('.pdp-cards');\n // if so, open via ToggleDrawer animation\n if (pdpCards) {\n // PDP Collapsible Events \n var activeCard = this.closest('.card');\n // if target is active, close it and fn comes to end\n if (activeCard.classList.contains('active')) {\n toggleDrawer('close', activeCard);\n } else {\n var oldActiveCard = pdpCards.querySelector('.active');\n // hide any previously active card\n if (oldActiveCard) {\n toggleDrawer('close', oldActiveCard);\n }\n // show active card\n toggleDrawer('open', activeCard);\n }\n } else {\n // Normal Collapsible Events \n $(this).closest('.collapsible-' + size).toggleClass('active');\n\n if ($(this).closest('.collapsible-' + size).hasClass('active')) {\n $(this).attr('aria-expanded', true);\n } else {\n $(this).attr('aria-expanded', false);\n }\n }\n });\n });\n};","'use strict';\n\nvar keyboardAccessibility = require('base/components/keyboardAccessibility');\n\nmodule.exports = function () {\n $('.country-selector .js-locale-switch').click(function (e) {\n e.preventDefault();\n var action = $('.page').data('action');\n var localeCode = $(this).data('locale');\n var localeCurrencyCode = $(this).data('currencycode');\n var queryString = $('.page').data('querystring');\n var url = $('.country-selector').data('url');\n\n $.ajax({\n url: url,\n type: 'get',\n dataType: 'json',\n data: {\n code: localeCode,\n queryString: queryString,\n CurrencyCode: localeCurrencyCode,\n action: action\n },\n success: function (response) {\n $.spinner().stop();\n if (response && response.redirectUrl) {\n window.location.href = response.redirectUrl;\n }\n },\n error: function () {\n $.spinner().stop();\n }\n });\n });\n\n keyboardAccessibility('.navbar-header .country-selector',\n {\n 40: function ($countryOptions) { // down\n if ($(this).is(':focus')) {\n $countryOptions.first().focus();\n } else {\n $(':focus').next().focus();\n }\n },\n 38: function ($countryOptions) { // up\n if ($countryOptions.first().is(':focus') || $(this).is(':focus')) {\n $(this).focus();\n $(this).removeClass('show');\n } else {\n $(':focus').prev().focus();\n }\n },\n 27: function () { // escape\n $(this).focus();\n $(this).removeClass('show').children('.dropdown-menu').removeClass('show');\n },\n 9: function () { // tab\n $(this).removeClass('show').children('.dropdown-menu').removeClass('show');\n }\n },\n function () {\n if (!($(this).hasClass('show'))) {\n $(this).addClass('show');\n }\n return $(this).find('.dropdown-country-selector').children('a');\n }\n );\n\n $('.navbar-header .country-selector').on('focusin', function () {\n $(this).addClass('show').children('.dropdown-menu').addClass('show');\n });\n};\n","'use strict';\n\nvar einsteinUtils = require('core/components/einsteinUtils');\nvar productTile = require('core/components/productTile');\nvar abSlider = require('./slider');\n\nmodule.exports = {};\n\n/**\n * Gets all placeholder elements, which hold einstein recommendations queries the details from the\n * einstein engine and feeds them back to the dom element\n * @param {Object} e jquery event\n * @returns {Object} jquery targets\n */\nmodule.exports.loadRecommendations = function (e) {\n var $context = $(this);\n var $recommendationTargets = $context.hasClass('.einstein-data') ? $context : $context.find('.einstein-data');\n \n return $recommendationTargets.each(function () {\n var $recTrigger = $(this);\n var data = $recTrigger.data() || {};\n var asyncUrl = data.url;\n \n einsteinUtils.getRecommendations(data, function (einsteinResponse) {\n var response = einsteinUtils.interpretResponse(data, einsteinResponse);\n\n // Add replace content URL\n $.each(response, function (i, rec) {\n if (!rec || !rec.id) return null;\n\n var pidURL = asyncUrl;\n pidURL += (pidURL.indexOf('?') === -1 ? '?' : '&') + 'pid=' + rec.id;\n $recTrigger.find('.product[data-pid=\"placeholder\"]:not([data-replace-content])')\n .first()\n .attr('data-replace-content', pidURL); //Must be attr to allow productTile.js async selector rule to catch recommendation\n });\n\n // Remove empty slides\n $recTrigger.find('.slide:has(.product[data-pid=\"placeholder\"]:not([data-replace-content]))').remove();\n\n // Prepare Slider Container\n var $sliderContainer = $recTrigger.closest('.slider-container').removeClass('delay-init');\n\n productTile.init($recTrigger.find('.product'), function (status) {\n // Re Initialize sliders to account for TileInclude Errors\n var tns = status.errors > 0 ? $sliderContainer.data('tns') : null;\n \n if (tns) {\n tns.destroy();\n tns.rebuild();\n }\n });\n \n // flag element with 'eisteinFlag' for processing in slider.js \n $sliderContainer.parent().get(0).einsteinFlag = true;\n // Initialize sliders\n abSlider.initializeSliders($sliderContainer.parent());\n });\n });\n}\n\nmodule.exports.init = function (context) {\n // Re-triggerable dom event\n $(document).off('load.einstein')\n .on('load.einstein', module.exports.loadRecommendations);\n\n context = context && 'trigger' in context ? context : $(document);\n\n return context.triggerHandler('load.einstein');\n};","'use strict';\n\n/**\n * Code that makes input labels float up/down when input is focused / blured\n * ...inspired by shopify checkout UI\n */\n\nfunction toggleHasInput(e) {\n var localFormGroup = e.target.closest('.float-label');\n\n if ( e.target.value.trim().length > 0 && !localFormGroup.classList.contains('float-label-has-input') ) {\n localFormGroup.classList.add('float-label-has-input');\n } else if (e.target.value.trim().length === 0) {\n localFormGroup.classList.remove('float-label-has-input');\n }\n}\n\nfunction updateLabels(floatLabels) {\n if (floatLabels && floatLabels.length > 0) {\n for (var i = 0; i < floatLabels.length; i++) {\n\n var formGroup = floatLabels[i],\n formEl = formGroup.querySelector('.form-control'),\n labelEl = formGroup.querySelector('.form-control-label');\n\n if (formEl) {\n\n if (labelEl) {\n formEl.placeholder = labelEl.textContent.trim();\n }\n\n if (formEl.value && formEl.value.trim().length > 0) {\n var localFormGroup = formEl.closest('.float-label');\n localFormGroup.classList.add('float-label-has-input');\n }\n\n if (formEl.tagName === 'INPUT' || formEl.tagName === 'TEXTAREA') {\n formEl.addEventListener('input', toggleHasInput);\n formEl.addEventListener('blur', toggleHasInput);\n\n } else if (formEl.tagName === 'SELECT') {\n formEl.addEventListener('change', function(e) {\n var localFormGroup = e.target.closest('.float-label');\n if ( e.target.value && e.target.value.length > 0 && !localFormGroup.classList.contains('float-label-has-input') ) {\n localFormGroup.classList.add('float-label-has-input');\n } else if (e.target.value.length === 0) {\n localFormGroup.classList.remove('float-label-has-input');\n }\n });\n }\n }\n }\n } \n}\n\nfunction init() {\n var floatLabels = document.querySelectorAll('.float-label');\n\n updateLabels(floatLabels);\n}\n\nmodule.exports = {\n init: init,\n updateLabels: updateLabels\n}\n\n","'use strict';\n\nvar tinySlider = require('tiny-slider/src/tiny-slider');\n\nvar $giftCertificateForm = $('.GiftCertificateForm');\nvar $giftCardSlider = $('#gift-card-slider');\n\n// populate form helper\nfunction populateGiftCardForm($form, color) {\n var $gcColor = $form.find('#color');\n\n $gcColor.get(0).value = color;\n $gcColor.get(0).textContent = color;\n}\n\n/**\n * init - adds handlers to slider transtionStart event that populate the gc form with \n * card color.\n * Also, adds handlers to thumb/swatch click events to trigger slider change, which in \n * turn triggers the form update\n */\nfunction init() {\n if ($giftCertificateForm.length > 0) {\n var $giftAmount = $giftCertificateForm.find('#giftAmount');\n var $formAmount = $giftCertificateForm.find('#amount');\n\n // on gift amont select change, update the form amount value\n $giftAmount.on('change', function(e) {\n $formAmount.get(0).value = $giftAmount.val();\n $formAmount.get(0).textContent = $giftAmount.val();\n });\n \n if ($giftCardSlider.length > 0 && $giftCardSlider.get(0).children.length > 0) {\n // init gcSlider\n var giftCardSlider = tinySlider.tns({\n container: '#gift-card-slider',\n items: 1,\n slideBy: 'page',\n autoplay: false,\n gutter: 0,\n edgePadding: 0,\n onInit: function(slider) {\n $(slider.container).addClass('gift-card-slider-initialized');\n }\n });\n\n giftCardSlider.events.on('transitionStart', function() {\n // get tiny slider info obj\n var sliderInfo = giftCardSlider.getInfo();\n // get active swatch, thumb items\n var activeSwatch = $('.gift-card-swatch-item').get(sliderInfo.displayIndex - 1);\n var activeThumb = $('.gift-card-thumb-item').get(sliderInfo.displayIndex - 1);\n \n // save color value that we will use to populate gc form\n var cardColor = $(activeThumb).data('giftCardThumb');\n\n // remove previous active class on all thumbs/swatch\n $('.gift-card-swatch-item, .gift-card-thumb-item').removeClass('active');\n // toggle active class on current thumb/swatch\n $(activeThumb).addClass('active');\n $(activeSwatch).addClass('active');\n\n // populate gc form with color\n populateGiftCardForm($giftCertificateForm, cardColor);\n\n });\n\n // on thumb/swatch click, trigger slider that will update form\n $('.gift-card-swatch-item, .gift-card-thumb-item').on('click', function(e) {\n e.preventDefault();\n giftCardSlider.goTo($(this).index());\n });\n }\n }\n}\n\nmodule.exports = {\n init\n}","'use strict';\n\nvar throttle = require('lodash/throttle');\nvar debounce = require('lodash/debounce');\nvar searchUiHelpers = require('../utilities/searchUiHelpers');\n\nfunction maxHeight(max, elem) {\n var h = elem.getBoundingClientRect().height;\n return max > h ? max : h;\n}\n\n/** function to fix viewport height issues with iOS and browser chrome */\nfunction setDocumentHeight() {\n var doc = document.documentElement;\n doc.style.setProperty('--doc-height', `${window.innerHeight}px`)\n}\n\nfunction setBurgerToggleTop() {\n var burgerToggle = document.querySelector('#top-header > .burger-menu-toggler');\n var headerNav = document.querySelector('.header-nav');\n var headerNavRect = headerNav.getBoundingClientRect();\n if (burgerToggle && headerNavRect.top > 0) {\n var tickerHeight = $('#global-ticker .ticker').toArray().reduce(maxHeight, 0);\n var burgerNavOffsetFromHeaderNav = ((headerNavRect.height - burgerToggle.getBoundingClientRect().height) / 2);\n var burgerToggleOffset = burgerNavOffsetFromHeaderNav + tickerHeight;\n var accessibility = document.querySelector('.accessibility');\n\n if (window.innerWidth < 1024 && accessibility) {\n burgerToggleOffset += accessibility.getBoundingClientRect().height;\n }\n\n $(burgerToggle).css('top', parseInt(burgerToggleOffset, 10) + 'px');\n }\n}\n\nvar updateHeader = status => {\n var $headerNav = $('.header-nav');\n var $globalTicker = $('#global-ticker');\n var headerNavHeight = $headerNav.outerHeight();\n var $page = $('.page');\n var $mainMenu = $('.main-menu');\n var $topHeader = $('#top-header');\n var $burgerToggle = $('#top-header .burger-menu-toggler');\n var body = document.querySelector('body');\n\n // if header has transparent-header class and global ticker is activated\n // add height of glbal ticker to headerNavHeight\n if ($globalTicker.length > 0 && $topHeader.hasClass('transparent-header')) {\n headerNavHeight = headerNavHeight + $globalTicker.outerHeight();\n }\n\n if (!$mainMenu.hasClass('in')) {\n if (status === 'fixed') {\n if ($topHeader.hasClass('fixed-header')) {\n $headerNav.addClass('fixed');\n $globalTicker.addClass('fixed');\n if (!($headerNav.closest('.transparent-header').length)) {\n $page.css('margin-top', headerNavHeight + 'px');\n }\n $headerNav.removeClass('transparent-nav');\n }\n\n if ($burgerToggle.length > 0 && !$burgerToggle.hasClass('burger-menu-toggler-fixed')) {\n if ($headerNav.get(0).getBoundingClientRect().top < 0) {\n $burgerToggle.css('top', '');\n $burgerToggle.addClass('burger-menu-toggler-fixed');\n }\n }\n } else {\n var isMobileOpen = body.classList.contains('mobile-menu-in');\n var isRefinementBarOpen = body.classList.contains('js-body-is-locked');\n\n if ($topHeader.hasClass('fixed-header') && !isRefinementBarOpen) {\n $headerNav.removeClass('fixed');\n $globalTicker.removeClass('fixed');\n $page.css('margin-top', '');\n\n if (!isMobileOpen){\n $headerNav.addClass('transparent-nav');\n }\n }\n\n if ($burgerToggle.length > 0 && $burgerToggle.hasClass('burger-menu-toggler-fixed') && !isMobileOpen) {\n $burgerToggle.removeClass('burger-menu-toggler-fixed');\n setBurgerToggleTop();\n }\n }\n }\n}\n\n/**\n * If global-ticker is not preset, add no-global-ticker class\n * to body so full screen hero elements can go all the way\n */\nfunction checkForGlobalTicker() {\n var globalTicker = document.querySelector('#global-ticker');\n\n if (!globalTicker) {\n $('body').addClass('no-global-ticker');\n }\n}\n\n\nmodule.exports = function() {\n // Fix/unfix header to top of screen, dependent on class added by custom preference\n // Note: This is intentionally not using utilities/scroll.js so that it can fix immediately vs. being debounced. Should be replaced with CSS position:sticky once IE11 support is dropped.\n var hasFixedHeader = $('#top-header').hasClass('fixed-header');\n var hasBurger = $('#top-header .burger-menu-toggler').length > 0;\n var backToTop = document.querySelector('.back-to-top');\n var throttleTime = 70;\n\n if (hasBurger) {\n setBurgerToggleTop();\n\n $(window).resize(debounce(function() {\n setBurgerToggleTop()\n }, 200));\n }\n\n $(window).scroll(throttle(function(event) {\n var scrollTop = $(event.target).scrollTop();\n if (hasFixedHeader || hasBurger) {\n var $headerBanner = $('.header-banner');\n var headerBannerHeight = $headerBanner.length ? $headerBanner.outerHeight() : 0;\n var $preNavHeader = $('.pre-nav-header');\n var preNavHeaderHeight = $preNavHeader.length ? $preNavHeader.outerHeight() : 0;\n\n if (scrollTop > headerBannerHeight + preNavHeaderHeight) {\n updateHeader('fixed');\n } else {\n updateHeader('unfixed');\n }\n }\n\n if (backToTop) {\n var threshold = 160;\n if (scrollTop > threshold) {\n backToTop.classList.add('active');\n } else {\n backToTop.classList.remove('active');\n }\n }\n\n }, throttleTime, {'leading': true} ));\n\n var isMobile = window.isMobile();\n if ($('#top-header').hasClass('transparent-header') && !isMobile) {\n $('.header-nav').hover(\n function() {\n $(this).removeClass('transparent-nav');\n }, function() {\n $(this).addClass('transparent-nav');\n }\n );\n }\n\n // Check for presence of content assets in MegaMenu\n var $megamenuDropdown = $('.megamenu > .dropdown-menu');\n\n $megamenuDropdown.each((index, element) => {\n var $megamenu = $(element);\n if ($megamenu.find('.megamenu-asset-1').children().length) {\n $megamenu.addClass('has-asset-1');\n }\n if ($megamenu.find('.megamenu-asset-2').children().length) {\n $megamenu.addClass('has-asset-2');\n }\n });\n\n // Show/hide content assets on mobile based on category level\n if (isMobile) {\n var $thirdMenuBackBtn = $('.megamenu .menu-subcategories > .dropdown-item'),\n $thirdSubLink = $('.megamenu .menu-subcategories > .dropdown-item > .dropdown-link');\n\n $thirdSubLink.on('click', function () {\n $('.megamenu.show .menu-subcategories').parent('li').addClass('thirdCatOpen');\n });\n $thirdMenuBackBtn.on('click', function () {\n $('.megamenu.show .menu-subcategories').parent('li').removeClass('thirdCatOpen');\n });\n }\n\n $('.main-menu .navbar-nav, .navbar-nav-secondary').on('mouseenter mouseleave', function () {\n $(this).toggleClass('nav-item-hover');\n });\n\n $('.reset-button').on('click', event => {\n searchUiHelpers.toggleSiteSearchUi('close', event);\n })\n\n $('header .site-search .fa-search').on('click', event => {\n var siteSearchExpanded = document.querySelector('.site-search.expanded');\n if (siteSearchExpanded) {\n searchUiHelpers.toggleSiteSearchUi('close', event);\n } else {\n searchUiHelpers.toggleSiteSearchUi('open', event);\n }\n });\n\n $('.burger-menu .search-field').on('blur', function() {\n var $siteSearch = $(event.target).closest('.site-search');\n $siteSearch.removeClass('expanded');\n });\n\n $('form[name=simpleSearch]').on('submit', event => {\n var $form = $(event.target);\n var $input = $('input[name=q]',$form);\n //keep search from submitting if query is empty\n if ($input.val() == \"\") {\n $input.focus();\n event.preventDefault();\n }\n });\n\n /** set doc height css var and add resize listener */\n setDocumentHeight();\n /** check for global-ticker, if not there add .no-global-ticker to body */\n checkForGlobalTicker();\n\n $(window).on('resize', debounce(function() {\n setDocumentHeight();\n }, 200));\n\n};\n","/**\n * phoneFormat\n * @param {*} inputValue - Value of html phone input\n * @returns a new string that is formatted for Phones (###) ###-####\n */\nfunction phoneFormat(inputValue) {\n inputValue = inputValue.replace(/\\D/g,'');\n var size = inputValue.length;\n\n if (size>0) {inputValue=\"(\"+inputValue}\n if (size>3) {inputValue=inputValue.slice(0,4)+\") \"+inputValue.slice(4,11)}\n if (size>6) {inputValue=inputValue.slice(0,9)+\"-\" +inputValue.slice(9)}\n\n return inputValue;\n}\n\n/**\n * inputMask.init()\n * Adds input masking to all inputs that are type=tel\n * As the user types, the corresponding values are wrapped like so: (###) ###-####\n */\nfunction init() {\n var phoneInputs = document.querySelectorAll('input[type=tel]'),\n localeEl = document.querySelector('[data-current-locale]');\n \n if (localeEl) {\n var locale = localeEl.getAttribute('data-current-locale');\n\n if ( (locale.includes('US') || locale.includes('CA')) && phoneInputs.length > 0 ) {\n [].forEach.call(phoneInputs, function(phoneInput) {\n // if phoneInput has a value\n if (!(phoneInput.value === '')) {\n var newVal = phoneFormat(phoneInput.value);\n \n phoneInput.value = newVal; \n }\n \n // attach event handler to input, blur events\n ['input', 'blur'].forEach(function(event) {\n phoneInput.addEventListener(event, function(e) {\n var val = e.target.value,\n newVal = phoneFormat(val);\n \n e.target.value = newVal; \n });\n });\n });\n }\n }\n}\n\nmodule.exports = {\n init: init\n}\n","'use strict';\n\nvar keyboardAccessibility = require('base/components/keyboardAccessibility');\nvar SiteConstants = require('constants/SiteConstants');\nvar hoverIntent = require('jquery-hoverintent');\nvar menuHelpers = require('../utilities/menuHelpers');\nvar searchUiHelpers = require('../utilities/searchUiHelpers');\n\nvar openSelection = $dropdownLink => {\n var $dropdown = $dropdownLink.closest('.custom-dropdown');\n clearSiblings($dropdownLink);\n\n $dropdown.children('.dropdown-menu')\n .attr('aria-hidden', 'false')\n .find('a').removeAttr('tabindex', '-1');\n $dropdown.addClass('show');\n $dropdownLink.attr('aria-expanded', 'true');\n};\n\nvar clearSelection = element => {\n var $currentPane = $(element).closest('.custom-dropdown.show');\n $currentPane.removeClass('show');\n\n // Adjust DOM after drawer finishes closing (mobile) or dropdown finishes hiding (desktop)\n setTimeout(() => {\n $currentPane.find('.nav-link').attr('aria-expanded', 'false');\n $currentPane.find('.dropdown-menu').attr('aria-hidden', 'true');\n $currentPane.find('.top-category').detach();\n $currentPane.find('.nav-menu').detach();\n\n if (!$currentPane.closest('.custom-dropdown.show').length) {\n $currentPane.closest('.menu-group').find('.nav.navbar-nav > li.nav-item > a').attr('aria-hidden', 'false');\n }\n }, SiteConstants.TransitionSpeed);\n};\n\n// removes 'show' class from nested dropdowns in main mobile mene when menu is closed\nfunction clearAllSelections($mainMenu) {\n var showEls = $mainMenu.get(0).querySelectorAll('.show');\n [].forEach.call(showEls, function(showEl) {\n var dropdownLink = showEl.querySelector('.dropdown-link');\n if (dropdownLink) {\n clearSelection(dropdownLink);\n }\n });\n}\n\nvar clearSiblings = function clearSiblings($dropdownLink) {\n var $dropdown = $dropdownLink.closest('.custom-dropdown');\n var $siblings = $dropdown.siblings('.custom-dropdown.show');\n if ($siblings.length > 0) {\n $siblings.each(function() {\n var $this = $(this);\n $this.removeClass('show');\n setTimeout(() => {\n $this.find('.nav-link').attr('aria-expanded', 'false');\n $this.find('.dropdown-menu').attr('aria-hidden', 'true');\n }, SiteConstants.TransitionSpeed);\n });\n }\n}\n\nvar menuAnimating = false;\nvar toggleDrawer = status => {\n if (!menuAnimating) {\n var $header = $('#top-header');\n var $headerBanner = $header.find('.header-banner');\n var $headerNav = $header.find('.header-nav');\n var $mainMenu = $('.burger-menu').length > 0 ? $('.burger-menu') : $header.find('.main-menu');\n var $navbar = $mainMenu.find('.navbar-nav');\n var $modalBackground = $('.modal-background');\n var $mainContent = $('#maincontent');\n var headerNavClientRect = $headerNav.get(0).getBoundingClientRect();\n var headerNavOffset = headerNavClientRect.top;\n\n // set menu animating to True\n menuAnimating = true;\n\n if (status === 'open') {\n // save windowY as style property for effectively setting users scroll position later when menu closes\n document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);\n var scrollY = document.documentElement.style.getPropertyValue('--scroll-y');\n // reset headerNavTop\n var headerNavTop = (parseInt(scrollY) < $headerBanner.outerHeight()) ? $headerBanner.outerHeight() - window.scrollY : 0;\n\n // reset headerNavOffset if header has fixed-header-enhanced\n if ($mainMenu.hasClass('burger-menu')) {\n if (!$mainMenu.hasClass('burger-menu-citizen')) {\n headerNavOffset = 0; \n } else if (headerNavClientRect.top < 0) {\n headerNavOffset = 0; \n }\n $mainMenu.css('top', headerNavOffset);\n }\n\n // update classes after transition end on main menu\n setTimeout(function() {\n if ( $header.hasClass('fixed-header')) {\n $headerNav.addClass('fixed-mobile-menu-open').css('top', headerNavTop);\n }\n\n if ($header.hasClass('fixed-header') && !$header.hasClass('transparent-header')) {\n $mainContent.css('margin-top', $headerNav.get(0).getBoundingClientRect().height + 'px');\n }\n\n $('body').addClass('mobile-menu-in');\n // lock scrolling\n $('html, body').addClass('lock-scroll');\n // save ScrollY for scroll reset later when nav closes\n $('body').get(0).style.top = `-${scrollY}`;\n // set menuAnimating to false so menu can be opened again\n menuAnimating = false;\n }, SiteConstants.TransitionSpeed);\n\n $mainMenu\n .addClass('in')\n .attr('aria-hidden', 'false')\n .css('top', headerNavOffset)\n .height(window.innerHeight - headerNavOffset)\n .siblings().attr('aria-hidden', 'true');\n\n $modalBackground\n .fadeIn(SiteConstants.TransitionSpeed)\n .css('top', headerNavOffset);\n $header\n .siblings().attr('aria-hidden', 'true');\n $navbar\n .find('.nav-link').first().focus();\n\n } else {\n // get the scrollY saved to body to use later for updating users scroll position when menu closes\n var scrollY = $('body').get(0).style.top;\n // add class to stop scroll detection while menu animates to close\n $('body').addClass('burger-menu-closing');\n\n // update classes after duration for nice animation\n setTimeout(function() {\n var cssTopVal = headerNavOffset >= 0 ? headerNavOffset : 0,\n cssTop = $mainMenu.hasClass('burger-menu-citizen') ? cssTopVal : '';\n\n $headerNav.removeClass('fixed-mobile-menu-open')\n .css('top', '')\n .addClass('transparent-nav');\n \n $mainMenu.css({\n 'top': cssTop,\n 'height': 'auto'\n }).attr('aria-hidden', 'true')\n .siblings().attr('aria-hidden', 'false');\n\n // if scroll is less than headderHeight, then update MainContent to have marin-top\n if (parseInt(scrollY) < $headerNav.get(0).getBoundingClientRect().height && $header.hasClass('fixed-header')) {\n $mainContent.css('margin-top', '');\n }\n\n // reset modal top\n $modalBackground.css('top', '');\n\n // allow scrolling\n $('html, body').removeClass('lock-scroll');\n \n // reset window to user scrollY before menu open\n window.scrollTo(0, parseInt(scrollY || '0') * -1);\n\n // reset body top\n $('body').removeClass('mobile-menu-in').css('top', '');\n\n // update mobile menu level\n menuHelpers.clearMenuLevelToZero($mainMenu.get(0));\n\n // clearSelections\n clearAllSelections($mainMenu);\n }, SiteConstants.TransitionSpeed);\n\n // add set timeout to remove 'burger-menu-closing' class.\n // 'burger-menu-closing' prevents scroll listeners from firing.\n // this way menu closes without causing a scroll-triggered animation\n setTimeout(function() {\n $('body').removeClass('burger-menu-closing');\n // set menuAnimating to false so menu can be opened again\n menuAnimating = false;\n }, SiteConstants.TransitionSpeed + 10);\n \n $navbar.find('.nav-menu, .top-category').detach();\n $navbar.find('.thirdCatOpen').removeClass('thirdCatOpen');\n $header.siblings().attr('aria-hidden', 'false');\n\n $modalBackground.fadeOut(SiteConstants.TransitionSpeed);\n // trigger mainNav transitions\n $mainMenu.removeClass('in');\n }\n }\n};\n\nmodule.exports = () => {\n var headerBannerStatus = window.sessionStorage.getItem('hide_header_banner');\n $('.header-banner .close').not('.close-ticker').on('click', () => {\n $('.header-banner').addClass('d-none');\n window.sessionStorage.setItem('hide_header_banner', '1');\n });\n\n if (!headerBannerStatus || headerBannerStatus < 0) {\n $('.header-banner').removeClass('d-none');\n }\n\n keyboardAccessibility('.main-menu .nav-link, .main-menu .dropdown-link, .header-account-container .nav-link',\n {\n 40: function(menuItem) { // down\n if (menuItem.hasClass('nav-item')) { // top level\n $('.navbar-nav .show').removeClass('show')\n .children('.dropdown-menu')\n .removeClass('show');\n menuItem.addClass('show').children('.dropdown-menu').addClass('show');\n menuItem.find('ul > li > a').first().focus();\n } else {\n menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');\n if (!(menuItem.next().length > 0)) { // if this is the last menuItem\n menuItem.parent().parent().find('li > a').first().focus(); // set focus to the first menuitem\n } else {\n menuItem.next().children().first().focus();\n }\n }\n },\n 39: function(menuItem) { // right\n if (menuItem.hasClass('nav-item')) { // top level\n menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');\n $(this).attr('aria-expanded', 'false');\n menuItem.next().children().first().focus();\n } else if (menuItem.hasClass('dropdown')) {\n menuItem.addClass('show').children('.dropdown-menu').addClass('show');\n $(this).attr('aria-expanded', 'true');\n menuItem.find('ul > li > a').first().focus();\n }\n },\n 38: function(menuItem) { // up\n if (menuItem.hasClass('nav-item')) { // top level\n menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');\n } else if (menuItem.prev().length === 0) { // first menuItem\n menuItem.parent().parent().removeClass('show')\n .children('.nav-link')\n .attr('aria-expanded', 'false');\n menuItem.parent().children().last().children().first().focus(); // set the focus to the last menuItem\n } else {\n menuItem.prev().children().first().focus();\n }\n },\n 37: function(menuItem) { // left\n if (menuItem.hasClass('nav-item')) { // top level\n menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');\n $(this).attr('aria-expanded', 'false');\n menuItem.prev().children().first().focus();\n } else {\n menuItem.closest('.show').removeClass('show')\n .closest('li.show').removeClass('show')\n .children().first().focus().attr('aria-expanded', 'false');\n }\n },\n 27: function(menuItem) { // escape\n var parentMenu = menuItem.hasClass('show')\n ? menuItem\n : menuItem.closest('li.show');\n parentMenu.children('.show').removeClass('show');\n parentMenu.removeClass('show').children('.nav-link')\n .attr('aria-expanded', 'false');\n parentMenu.children().first().focus();\n }\n },\n function () {\n return $(this).parent();\n }\n );\n\n //if only search icon is visible, show the input on focus\n $( \".search-field\" ).focus(function() {\n $(this).closest('.site-search').addClass('expanded');\n });\n\n // init new menu\n menuHelpers.init();\n // set burger top\n menuHelpers.setBurgerMenuTop();\n\n // Custom dropdown behaviors for top menu\n var $dropdownMenu = $('.custom-dropdown:not(.disabled) [data-toggle=\"dropdown\"]');\n \n $dropdownMenu.on('click', event => {\n event.stopPropagation(); // Prevent Bootstrap dropdown click events\n\n var isInBurger = $(event.target).closest('.burger-menu'),\n trigger = event.target.classList.contains('.custom-dropdown') ? event.target : event.target.closest('.custom-dropdown');\n\n // dispatch new menu update event\n menuHelpers.dispatchCustomMenuUpdateEvent(trigger);\n\n if (window.isMobile() || isInBurger.length > 0) {\n // Drawer behavior on mobile\n event.preventDefault();\n var $dropdownLink = $(event.target);\n var $dropdown = $dropdownLink.closest('.custom-dropdown');\n\n if ($dropdownLink.data('disable-subcategories-display-in-mobile')) {\n location.href = $(event.target).attr('href');\n return;\n }\n if ($dropdown.hasClass('show')) {\n clearSelection($dropdown.get(0));\n } else {\n openSelection($dropdownLink);\n }\n } else {\n // Restore link behavior on desktop\n var link = $(event.target).attr('href');\n\n if (link) {\n location.href = $(event.target).attr('href');\n }\n }\n });\n\n //Megamenu Mega-left menu\n $('.mega-left-menu-link').hoverIntent( function() {\n var menuName = this.id,\n menuRight = $('#' + menuName + '-right'),\n menuLeft = $(this).parent().parent(),\n menuRightParent = menuLeft.next();\n\n if (!window.isMobile()) {\n // clear classes\n menuLeft.find('.active').removeClass('active');\n menuRightParent.removeClass('has-sub-asset');\n menuRightParent.find('.active-list').removeClass('active-list');\n // add classes\n $(this).addClass('active');\n menuRight.parent().addClass('active-list');\n // add a class to the parent Ul if a third level asset is displayed; css-hides the top level asset\n if (menuRight.parent().next().hasClass('sub-asset-1') || menuRight.parent().next().hasClass('sub-asset-2')) {\n menuRightParent.addClass('has-sub-asset');\n }\n }\n },\n 50\n );\n\n // Desktop - open menu using hoverIntent to prevent unintentional opening\n $dropdownMenu.hoverIntent({\n over: event => {\n var isInBurger = $(event.target).closest('.burger-menu');\n // close search if it is open\n searchUiHelpers.closeDesktopSearch();\n \n if (!window.isMobile() && isInBurger.length === 0) {\n var eventElement = event.target;\n // Close all dropdowns\n $('.navbar-nav > li').each((index, element) => {\n if (!$.contains(element, eventElement)) {\n var $navItem = $(element);\n $navItem.find('.show').each(() => {\n clearSelection(element);\n });\n if ($navItem.hasClass('show')) {\n $navItem.removeClass('show');\n $navItem.children('ul.dropdown-menu').removeClass('show');\n $navItem.children('.nav-link').attr('aria-expanded', 'false');\n }\n }\n });\n // Open current dropdown\n $(eventElement).parent().addClass('show');\n $(eventElement).siblings('.dropdown-menu').addClass('show').attr('aria-hidden', 'false');\n $(eventElement).attr('aria-expanded', 'true');\n }\n },\n out: () => {\n // this 'out' handler is left empty, since it's triggered from parent, handled in mouseleave event below\n },\n interval: 50\n });\n\n // Desktop - close menu on mouseleave\n $dropdownMenu.parent().on('mouseleave', event => {\n var isInBurger = $(event.target).closest('.burger-menu');\n\n if (!window.isMobile() && isInBurger.length === 0) {\n var $dropdown = $(event.currentTarget);\n // Close current dropdown\n $dropdown.removeClass('show');\n $dropdown.children('.dropdown-menu').removeClass('show').attr('aria-hidden', 'true');\n $dropdown.children('.nav-link').attr('aria-expanded', 'false');\n }\n });\n\n // add burger toggler to original navbar-toggler click handler\n $('.navbar-toggler, .burger-menu-toggler').click(event => {\n event.preventDefault();\n var menuToggle = $(event.target).hasClass('burger-menu-toggler') || event.target.closest('.burger-menu-toggler') || event.target.closest('.burger-menu') ? '.burger-menu-toggler' : '.navbar-toggler';\n\n if ($('body').hasClass('mobile-menu-in')) {\n toggleDrawer('close');\n $(menuToggle).removeClass('open', menuToggle);\n $('.header-nav').addClass('transparent-nav');\n } else {\n toggleDrawer('open');\n $(menuToggle).addClass('open');\n $('.header-nav').removeClass('transparent-nav');\n }\n });\n\n $('html').on('click', '.mobile-menu-in .modal-background', function() { \n var $menuToggle = $('.navbar-toggler, .burger-menu-toggler');\n toggleDrawer('close');\n $menuToggle.removeClass('open');\n $('.header-nav').addClass('transparent-nav');\n });\n\n // Prevent iOS from scrolling to bad position on search field input focus\n $('.search-mobile .search-field').focus(event => {\n if (window.isMobile()) {\n var currentScrollPosition = $('html').scrollTop();\n setTimeout(() => {\n $('html').scrollTop(currentScrollPosition);\n $('.modal-background').show();\n }, SiteConstants.TransitionSpeed);\n }\n });\n\n // on menuLevelUpdate - see if back btn was clicked, if so , run clear selection code on menu navigation\n document.addEventListener('menuLevelUpdate', function(e) {\n var isBackBtn = e.detail.trigger.classList.contains('active-category-back-btn') || e.detail.trigger.closest('.active-category-back-btn'),\n localNavbar = e.detail.trigger.closest('.navbar');\n\n if (isBackBtn) {\n var localCurrentShowEl = localNavbar.querySelector('[data-menu-level=\"' + e.detail.oldLevel + '\"].show');\n\n if (localCurrentShowEl) {\n var dropdownLink = localCurrentShowEl.querySelector('.dropdown-link');\n if (dropdownLink) {\n clearSelection(dropdownLink);\n } \n }\n } \n });\n};\n","'use strict';\n\nvar abSlider = require('../components/slider');\nvar productBase = require('../product/base');\n// hold state of whether to run ajax and refresh cart.\nvar miniCartState = {\n update: false\n};\n\n/** Checks for the Zendesk widget buttons and updates zIndex to prevent overlay on minicart */\nfunction checkZendeskButtonZindex() {\n var launchers = document.querySelectorAll('#launcher');\n\n if (launchers.length > 0) {\n [].forEach.call(launchers, function(launcher) {\n var sibs = $(launcher).siblings();\n\n launcher.style.zIndex = 100;\n\n sibs.each(function() {\n this.style.zIndex = 100;\n });\n })\n }\n}\n\nfunction calculatePopoverBottomOffsetAndShowMiniCart() {\n var $enhancedHeader = $('.fixed-header-enhanced'),\n $popOverBottom = $('.minicart .popover-bottom');\n\n $('body').addClass('modal-open minicart-open');\n // make popover block display to calculate height before transformation\n if ($enhancedHeader.length > 0) {\n $popOverBottom.css('top', '0');\n }\n\n // add class to start transition\n $('.minicart .popover').addClass('show');\n\n $('
', {\n class: 'modal-background',\n ariaHidden: 'false',\n style: 'display: block; top: 0px;'\n }).appendTo('body');\n}\n\n// hideProductOptionModal (if it exists)\nfunction hideProductOptionModal() {\n var productOptionModal = document.querySelector('#productOptionModal');\n if (productOptionModal) {\n var closeBtn = productOptionModal.querySelector('[data-dismiss=modal]');\n if (closeBtn) {\n closeBtn.click();\n }\n }\n}\n\nfunction updateCheckoutOrderSummary(responseObject) {\n var url = $('.minicart').data('action-url');\n\n $.get(url, data => {\n var productSummary = $(data).find('.product-summary'),\n minicartFooter = $(data).find('.minicart-footer');\n\n if (productSummary) {\n $('#checkout-main .product-summary-block').empty().append(productSummary);\n }\n\n if (minicartFooter) {\n $('#checkout-main .order-total-summary').empty().append(minicartFooter);\n }\n });\n}\n\nfunction miniCartOpen(pliuuid) {\n if ($('.search:visible').length === 0) {\n return;\n }\n var url = $('.minicart').data('action-url');\n var count = parseInt($('.minicart .minicart-quantity').text(), 10);\n\n // append most recently added pliuuid as param on url\n if (pliuuid !== null) {\n if (url.indexOf('?') > -1) {\n url += '&pliuuid=' + pliuuid;\n } else {\n url += '?pliuuid=' + pliuuid;\n }\n }\n\n if (count !== 0) {\n if (!miniCartState.update && !$('.minicart .popover').is(':empty')) {\n $('.minicart').removeClass('show-success-message');\n calculatePopoverBottomOffsetAndShowMiniCart();\n\n return;\n }\n\n $.get(url, data => {\n $('.minicart .popover').empty().append(data);\n // set miniupdate to false as cart has been newly updated\n if (url.indexOf('pliuuid') !== -1) {\n $('.minicart').addClass('show-success-message');\n }\n \n if ($('.minicart-cross-sells').length > 0) {\n abSlider.initializeSliders($('.minicart-cross-sells'));\n }\n \n calculatePopoverBottomOffsetAndShowMiniCart();\n\n checkZendeskButtonZindex();\n \n miniCartState.update = false;\n\n $('body').trigger('minicart:loaded', $('.minicart .popover'));\n });\n }\n}\n\nfunction miniCartClose() {\n if ($('body').hasClass('minicart-open')) {\n var minicartEl = document.querySelector('.minicart .popover');\n var duration = parseFloat(getComputedStyle(minicartEl)['transitionDuration']) * 1000;\n var $popOverBottom = $('.minicart .popover-bottom');\n \n $popOverBottom.removeClass('show');\n\n $('.modal-background').remove();\n \n setTimeout(function() {\n $('body').removeClass('modal-open minicart-open').trigger('minicart:mouseleave_focusout');\n }, duration);\n }\n}\n\n\nfunction init() {\n $('.minicart').on('count:update', (event, count) => {\n if (count && $.isNumeric(count.quantityTotal)) {\n $('.minicart .minicart-quantity').text(count.quantityTotal);\n $('.minicart .minicart-link').attr({\n 'aria-label': count.minicartCountOfItems,\n title: count.minicartCountOfItems\n });\n\n // update accutron menu minicart link\n $('.nav-item-minicart-burger .minicart-quantity').text(count.quantityTotal);\n }\n });\n\n // THIS IS MINICART SHOW CODE ON CLICK\n $('.minicart').on('click', (e) => {\n e.preventDefault();\n var internalMiniCartLink = $(e.target).closest('[href]'),\n isQuickviewLink = e.target.closest('.quickview');\n \n // if an internal minicart link is clicked, forward window location to href\n if (internalMiniCartLink.length > 0 && !internalMiniCartLink.hasClass('minicart-link') && !isQuickviewLink) {\n window.location = internalMiniCartLink.attr('href');\n return;\n }\n\n // otherwise, open minicart\n if ( !$('body').hasClass('minicart-open') ) {\n miniCartOpen(null);\n }\n });\n\n // close minicart if minicart is open and click is not on minicart\n $('body').on('click', event => {\n // if click event target not in minicart or product remove modal, close minicart\n if ($('.minicart').has(event.target).length <= 0 && !$('#removeProductModal').has(event.target).length > 0 && !$('#quickViewModal').has(event.target).length > 0 ) {\n miniCartClose();\n } else {\n // if event target is .minicart-close (inside of minicart), close modal\n if ($(event.target).hasClass('minicart-close')) {\n miniCartClose();\n }\n\n if ($(event.target).hasClass('continue-shopping')) {\n miniCartClose();\n }\n }\n });\n\n $('body').on('change', '.minicart .quantity', event => {\n if ($(event.target).parents('.bonus-product-line-item').length && $('.cart-page').length) {\n location.reload();\n }\n });\n\n $('body').on('product:afterAddToCart cart:update', (e, responseObject) => {\n var pliuuid = 'pliUUID' in responseObject && responseObject.pliUUID !== '' ? responseObject.pliUUID : null;\n // check for an error: \n if (!responseObject.error) {\n miniCartState.update = true;\n\n if ('isCheckout' in responseObject && responseObject.isCheckout) {\n updateCheckoutOrderSummary(responseObject);\n } else {\n // hide product option modal\n hideProductOptionModal();\n // open miniCart\n miniCartOpen(pliuuid);\n } \n }\n });\n\n /**\n * Cross Sell Add to Cart click event handler\n */\n $('body').on('click', '.cross-sells-add-to-cart', function (e) {\n e.preventDefault();\n\n $('body').trigger('product:beforeAddToCart', this);\n\n var quickAddToCartUrl = $(e.target).data('url');\n\n var form = {\n pid: $(e.target).data('pid'),\n quantity: 1,\n options: []\n };\n\n $(this).trigger('updateAddToCartFormData', form);\n\n if (quickAddToCartUrl) {\n $.spinner().start();\n $.ajax({\n url: quickAddToCartUrl,\n method: 'POST',\n data: form,\n success: function(data) {\n productBase.methods.handlePostCartAdd(data);\n $('body').trigger('product:afterAddToCart', data);\n productBase.methods.miniCartReportingUrl(data.reportingURL);\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n }\n }); \n};\n\nmodule.exports = {\n init: init()\n};\n","'use strict';\n\nfunction setModalBodyMaxHeight($modal) {\n var $modalBody = $modal.find('.modal-body');\n var headerHeight = $modal.find('.modal-header').outerHeight();\n var footerHeight = $modal.find('.modal-footer').length ? $modal.find('.modal-footer').outerHeight() : 0;\n var $modalDialog = $modal.find('.modal-dialog');\n var dialogMarginTop = parseInt($modalDialog.css('margin-top').split('px')[0]);\n var dialogMarginBottom = parseInt($modalDialog.css('margin-bottom').split('px')[0]);\n var dialogMarginHeight = dialogMarginTop + dialogMarginBottom;\n var $modalContent = $modal.find('.modal-content');\n var contentBorderTop = parseInt($modalContent.css('border-top-width').split('px')[0]);\n var contentBorderBottom = parseInt($modalContent.css('border-bottom-width').split('px')[0]);\n var subtractHeight = headerHeight + footerHeight + dialogMarginHeight + contentBorderTop + contentBorderBottom;\n\n $modalBody.css('max-height', '400px');\n $modalBody.css('max-height', 'calc(100vh - ' + subtractHeight + 'px)');\n}\n\n/**\n * Generates the modal window on the first call.\n *\n */\nfunction getModalHtmlElement(elementID, dialogClasses) {\n var id = elementID || 'customModal';\n var qvPDPLink = (id == 'quickViewModal') ? ' ' : '';\n dialogClasses = dialogClasses || '';\n\n if ($('#' + id).length !== 0) {\n $('#' + id).remove();\n }\n var htmlString = '
'\n + ''\n + '
'\n + ''\n + '
'\n + '
'\n + qvPDPLink\n + ' '\n + '
'\n + ''\n + ''\n + '
'\n + '
'\n + '
';\n $('body').append(htmlString);\n}\n\nfunction onShownBsModal() {\n $('body').on('shown.bs.modal', '.modal', function() {\n $('body').trigger('modal:loaded', this);\n });\n}\n\nfunction onModalLoaded() {\n $('body').on('modal:loaded', function(event, modal) {\n var $modal = $(modal);\n\n // Check for modal-scrollbody helper class and adjust body max-height if found\n if ($modal.find('.modal-scrollbody').length\n || $modal.find('.quick-view-dialog').length\n || $modal.find('.choose-bonus-product-dialog').length) {\n setModalBodyMaxHeight($modal);\n }\n });\n}\n\n/**\n * Parse HTML code in Ajax response\n *\n * @param {string} html - Rendered HTML from quickview template\n * @return {QuickViewHtml} - QuickView content components\n */\nfunction parseHtml(html) {\n var $html = $('
').append($.parseHTML(html));\n\n var body = $html.find('.product-quickview');\n if(body.length == 0) {\n body = $html.find('.modal-body').children()\n }\n var footer = $html.find('.modal-footer').children();\n\n return { body: body, footer: footer };\n}\n\n/**\n * replaces the content in the modal window on for the selected product variation.\n * @param {string} selectedValueUrl - url to be used to retrieve a new product model\n */\nfunction fillModalElement(selectedValueUrl, data, $modal) {\n $.ajax({\n url: selectedValueUrl,\n method: 'GET',\n data: data,\n dataType: 'json',\n success: function(data) {\n var parsedHtml = parseHtml(data.renderedTemplate);\n\n $modal.find('.modal-body').empty();\n $modal.find('.modal-body').html(parsedHtml.body);\n $modal.find('.modal-footer').html(parsedHtml.footer);\n $modal.find('.modal-header .close .sr-only').text(data.closeButtonText);\n $modal.find('.enter-message').text(data.enterDialogMessage);\n $modal.modal('show');\n\n if (data.dialogTitle) {\n $modal.find('.modal-header').prepend('
' + data.dialogTitle + '
')\n }\n }\n });\n}\n\nfunction initCustomModal() {\n $('body').on('click', '.custom-modal', function (e) {\n e.preventDefault();\n var cid = $(this).attr('data-cid');\n var title = $(this).attr('data-title');\n var dialogClasses = $(this).attr('data-dialog-classes');\n var selectedValueUrl = $(this).attr('href');\n\n getModalHtmlElement('customModal', dialogClasses);\n fillModalElement(selectedValueUrl, {cid: cid, title: title}, $('#customModal'));\n });\n}\n\nmodule.exports = {\n setModalBodyMaxHeight: setModalBodyMaxHeight,\n getModalHtmlElement: getModalHtmlElement,\n onShownBsModal: onShownBsModal,\n onModalLoaded: onModalLoaded,\n parseHtml: parseHtml,\n init: function() {\n onShownBsModal();\n onModalLoaded();\n initCustomModal();\n }\n};\n","'use strict';\n\n/**\n * Client side js that triggers video play on hover if the video has not been previously\n * played or muted. Video.currentTime must be 0 for the hover event to trigger play()\n * This works with the video html set up by the existing video js scripts\n */\nfunction init() {\n var $pdpVideos = $('[data-video-play-on-over]');\n\n $pdpVideos.each(function() {\n var vid = this;\n var vidContainer= vid.closest('.video-container');\n\n if (vidContainer) {\n var vidThumbnail = vidContainer.querySelector('.video-thumbnail');\n\n if (vidThumbnail) {\n $(vidThumbnail).on('mouseover', function(e) {\n if (vid.paused && vid.currentTime === 0 && !vid.ended) {\n // ensure video is muted so it can be played automatically\n // without user interaction\n vid.muted = true;\n // trigger thumbnail to ensure video js triggers properly\n if (vidThumbnail) {\n $(vidThumbnail).trigger('click');\n }\n }\n });\n }\n }\n });\n}\n\nmodule.exports = init();","var $promoFullWidthDesktops = $('.product-grid .promo-full-width-desktop');\nvar $promoFullWidthMobiles = $('.product-grid .promo-full-width-mobile');\n\nfunction resizePromoTile(promoTile, size) {\n var productTileContainer = promoTile.closest('[class*=col-'),\n hero = promoTile.querySelector('.hero');\n \n if (productTileContainer) {\n if (size === 'desktop') {\n productTileContainer.className = 'd-none d-sm-flex flex-sm-column';\n productTileContainer.classList.add('col-sm-12');\n } else if (size === 'mobile') {\n productTileContainer.className = 'd-sm-none';\n productTileContainer.classList.add('col-12');\n }\n\n // if PD component is hero banner, add 'no-min-height' class to fix height layout issues\n if (hero) {\n $(hero).addClass('no-min-height');\n }\n }\n}\n\nfunction init() {\n if ($promoFullWidthDesktops.length > 0) {\n $promoFullWidthDesktops.each(function(index) {\n resizePromoTile(this, 'desktop');\n });\n }\n\n if ($promoFullWidthMobiles.length > 0) {\n $promoFullWidthMobiles.each(function(index) {\n resizePromoTile(this, 'mobile');\n });\n }\n}\n\nmodule.exports = init();","'use strict';\nvar modal = require('core/components/modal');\n\nfunction promoModal() {\n $('body').on('click', '.custom-promo-modal', function (e) {\n e.preventDefault();\n var details = $(this).attr('data-details');\n var title = $(this).attr('data-title');\n var dialogClasses = $(this).attr('data-dialog-classes');\n var closeButtonText = $(this).attr('data-close-button-text');\n\n modal.getModalHtmlElement('customPromoModal', dialogClasses);\n var $modal = $('#customPromoModal');\n $modal.find('.modal-body').empty();\n $modal.find('.modal-body').html(details);\n $modal.find('.modal-header .close .sr-only').text(closeButtonText);\n $modal.modal('show');\n $modal.find('.modal-header').prepend('
' + title + '
');\n });\n}\n\nmodule.exports = {\n promoModal: promoModal\n};","'use strict';\n\nvar debounce = require('lodash/debounce');\nvar searchUiHelpers = require('../utilities/searchUiHelpers');\nvar endpoint = $('.suggestions-wrapper').data('url');\n/*\nRVW-772\nRemoves search suggestions dropdown component by setting `minChars` to the maximum safe integer in JavaScript\nTo enable suggestions, import preferences and change minChars to the following:\n// var sitePreferencesUtils = require('core/preferences/sitePreferencesUtils');\n// var preferences = sitePreferencesUtils.getSitePreferences();\n// var minChars = preferences.headerSearchMinTermLength;\n\n*/\nvar minChars = Number.MAX_SAFE_INTEGER;\nvar UP_KEY = 38;\nvar DOWN_KEY = 40;\nvar DIRECTION_DOWN = 1;\nvar DIRECTION_UP = -1;\n\n/**\n * Retrieves Suggestions element relative to scope\n *\n * @param {Object} scope - Search input field DOM element\n * @return {JQuery} - .suggestions-wrapper element\n */\nfunction getSuggestionsWrapper(scope) {\n var searchContainer = scope.closest('.site-search ');\n return $(searchContainer).find('.suggestions-wrapper');\n}\n\n/**\n * Determines whether DOM element is inside the .search-mobile class\n *\n * @param {Object} scope - DOM element, usually the input.search-field element\n * @return {boolean} - Whether DOM element is inside div.search-mobile\n */\nfunction isMobileSearch(scope) {\n return !!$(scope).closest('.search-mobile').length;\n}\n\n/**\n * Remove modal classes needed for mobile suggestions\n *\n */\nfunction clearModals() {\n $('body').removeClass('modal-open');\n $('header').siblings().attr('aria-hidden', 'false');\n $('.suggestions').removeClass('modal');\n}\n\n/**\n * Apply modal classes needed for mobile suggestions\n *\n * @param {Object} scope - Search input field DOM element\n */\nfunction applyModals(scope) {\n if (isMobileSearch(scope)) {\n $('body').addClass('modal-open');\n $('header').siblings().attr('aria-hidden', 'true');\n getSuggestionsWrapper(scope).find('.suggestions').addClass('modal');\n }\n}\n\n/**\n * Tear down Suggestions panel\n */\nfunction tearDownSuggestions() {\n $('input.search-field').val('');\n clearModals();\n $('.search-mobile .suggestions').unbind('scroll');\n $('.suggestions-wrapper').empty();\n}\n\n/**\n * Toggle search field icon from search to close and vice-versa\n *\n * @param {string} action - Action to toggle to\n */\nfunction toggleSuggestionsIcon(action) {\n var mobileSearchIcon = '.search-mobile button.';\n var iconSearch = 'fa-search';\n var iconSearchClose = 'fa-close';\n\n if (action === 'close') {\n $(mobileSearchIcon + iconSearch).removeClass(iconSearch).addClass(iconSearchClose).attr('type', 'button');\n } else {\n $(mobileSearchIcon + iconSearchClose).removeClass(iconSearchClose).addClass(iconSearch).attr('type', 'submit');\n }\n}\n\n/**\n * Determines whether the \"More Content Below\" icon should be displayed\n *\n * @param {Object} scope - DOM element, usually the input.search-field element\n */\nfunction handleMoreContentBelowIcon(scope) {\n if (($(scope).scrollTop() + $(scope).innerHeight()) >= $(scope)[0].scrollHeight) {\n $('.more-below').fadeOut();\n } else {\n $('.more-below').fadeIn();\n }\n}\n\n/**\n * Positions Suggestions panel on page\n *\n * @param {Object} scope - DOM element, usually the input.search-field element\n */\nfunction positionSuggestions(scope) {\n var outerHeight;\n var $scope;\n var $suggestions;\n var top;\n\n if (isMobileSearch(scope)) {\n $scope = $(scope);\n top = $scope.offset().top;\n outerHeight = $scope.outerHeight();\n $suggestions = getSuggestionsWrapper(scope).find('.suggestions');\n $suggestions.css('top', top + outerHeight);\n\n handleMoreContentBelowIcon(scope);\n\n // Unfortunately, we have to bind this dynamically, as the live scroll event was not\n // properly detecting dynamic suggestions element's scroll event\n $suggestions.scroll(function () {\n handleMoreContentBelowIcon(this);\n });\n }\n}\n\n/**\n * Process Ajax response for SearchServices-GetSuggestions\n *\n * @param {Object|string} response - Empty object literal if null response or string with rendered\n * suggestions template contents\n */\nfunction processResponse(response) {\n var $suggestionsWrapper = getSuggestionsWrapper(this).empty();\n\n $.spinner().stop();\n\n if (typeof (response) !== 'object') {\n $suggestionsWrapper.append(response).show();\n $(this).siblings('.reset-button').addClass('d-sm-block');\n positionSuggestions(this);\n\n if (isMobileSearch(this)) {\n toggleSuggestionsIcon('close');\n applyModals(this);\n }\n\n // Trigger screen reader by setting aria-describedby with the new suggestion message.\n var suggestionsList = $('.suggestions .item');\n if ($(suggestionsList).length) {\n $('input.search-field').attr('aria-describedby', 'search-result-count');\n } else {\n $('input.search-field').removeAttr('aria-describedby');\n }\n } else {\n $suggestionsWrapper.hide();\n }\n}\n\n/**\n * Retrieve suggestions\n *\n * @param {Object} scope - Search field DOM element\n */\nfunction getSuggestions(scope) {\n if ($(scope).val().length >= minChars) {\n $.spinner().start();\n $.ajax({\n context: scope,\n url: endpoint + encodeURIComponent($(scope).val()),\n method: 'GET',\n success: processResponse,\n error: function () {\n $.spinner().stop();\n }\n });\n } else {\n toggleSuggestionsIcon('search');\n $(scope).siblings('.reset-button').removeClass('d-sm-block');\n clearModals();\n getSuggestionsWrapper(scope).empty();\n }\n}\n\n/**\n * Handle Search Suggestion Keyboard Arrow Keys\n *\n * @param {Integer} direction takes positive or negative number constant, DIRECTION_UP (-1) or DIRECTION_DOWN (+1)\n */\nfunction handleArrow(direction) {\n // get all li elements in the suggestions list\n var suggestionsList = $('.suggestions .item');\n if (suggestionsList.filter('.selected').length === 0) {\n suggestionsList.first().addClass('selected');\n $('input.search-field').each(function () {\n $(this).attr('aria-activedescendant', suggestionsList.first()[0].id);\n });\n } else {\n suggestionsList.each(function (index) {\n var idx = index + direction;\n if ($(this).hasClass('selected')) {\n $(this).removeClass('selected');\n $(this).removeAttr('aria-selected');\n if (suggestionsList.eq(idx).length !== 0) {\n suggestionsList.eq(idx).addClass('selected');\n suggestionsList.eq(idx).attr('aria-selected', true);\n $(this).removeProp('aria-selected');\n $('input.search-field').each(function () {\n $(this).attr('aria-activedescendant', suggestionsList.eq(idx)[0].id);\n });\n } else {\n suggestionsList.first().addClass('selected');\n suggestionsList.first().attr('aria-selected', true);\n $('input.search-field').each(function () {\n $(this).attr('aria-activedescendant', suggestionsList.first()[0].id);\n });\n }\n return false;\n }\n return true;\n });\n }\n}\n\nmodule.exports = function () {\n $('form[name=\"simpleSearch\"]').submit(function (e) {\n var suggestionsList = $('.suggestions .item');\n if (suggestionsList.filter('.selected').length !== 0) {\n e.preventDefault();\n suggestionsList.filter('.selected').find('a')[0].click();\n }\n });\n\n $('input.search-field').each(function () {\n /**\n * Use debounce to avoid making an Ajax call on every single key press by waiting a few\n * hundred milliseconds before making the request. Without debounce, the user sees the\n * browser blink with every key press.\n */\n var debounceSuggestions = debounce(getSuggestions, 300);\n $(this).on('keyup focus', function (e) {\n // Capture Down/Up Arrow Key Events\n switch (e.which) {\n case DOWN_KEY:\n handleArrow(DIRECTION_DOWN);\n e.preventDefault(); // prevent moving the cursor\n break;\n case UP_KEY:\n handleArrow(DIRECTION_UP);\n e.preventDefault(); // prevent moving the cursor\n break;\n default:\n debounceSuggestions(this, e);\n }\n });\n });\n\n $('body').on('click', function (e) {\n if (!$('.suggestions').has(e.target).length && !$(e.target).hasClass('search-field')) {\n $('.suggestions').hide();\n }\n\n // if site search is expanded and user click away, close search\n searchUiHelpers.closeMainNavSearchUi(e); \n });\n\n $('body').on('click touchend', '.search-mobile button.fa-close', function (e) {\n e.preventDefault();\n $('.suggestions').hide();\n toggleSuggestionsIcon('search');\n tearDownSuggestions();\n });\n};\n","'use strict';\n\nvar getTotalScroll = require('../product/scrollToElement').getTotalScroll;\n\nvar showDownDownArrows = document.querySelectorAll('[data-show-down-down-arrow]');\n\nfunction scrollToNextSection(showDownDownArrow) {\n // use data component id & jquery visible to see what is the next visible component\n // next visible section could vary depending on screeensize\n var closestMainParent = $(showDownDownArrow).closest('#maincontent > .page-designer > .experience-main > .experience-component'),\n targetEl = closestMainParent[0].nextSibling,\n totalScroll;\n\n if (targetEl) {\n totalScroll = getTotalScroll(targetEl);\n // animate scroll to element\n $(\"html, body\").animate({\n scrollTop: totalScroll,\n duration: 500,\n }, \"easein\");\n }\n}\n\nfunction init() {\n if (showDownDownArrows.length > 0) {\n [].forEach.call(showDownDownArrows, function(showDownDownArrow) {\n\n showDownDownArrow.addEventListener('click', function(e) {\n e.preventDefault();\n \n // get next visible section\n scrollToNextSection(showDownDownArrow);\n });\n });\n }\n}\n\nmodule.exports = {\n init: init\n}\n\n","'use strict';\n\nconst debounce = require('lodash/debounce');\nconst viewportUtils = require('org_citizen/utilities/viewport');\nconst stringUtils = require('org_citizen/utilities/string');\n\nfunction getVisibleText($textContainer, maxHeight) {\n while ($textContainer.height() > maxHeight) {\n $textContainer.html((index, text) => stringUtils.removeLastWord(text));\n }\n\n $textContainer.html(stringUtils.removeLastWord($textContainer.html()));\n\n return $textContainer.html();\n}\n\nfunction createShowMoreTextComponent() {\n const isMobile = !viewportUtils.mediaBreakpointUp('md');\n const maxHeight = (isMobile) ? 60 : 44; // these values are required to match the heights set witin _showMoreText.scss\n const $showMoreText = $('.show-more-text');\n const $textContentContainer = $showMoreText.find('.show-more-text-content');\n const $textActionsContainer = $showMoreText.find('.show-more-text-actions');\n\n if (!$textContentContainer.length) {\n return;\n }\n\n let text = '';\n\n if (!$textContentContainer.data('initial-text')) {\n text = $textContentContainer.html();\n $textContentContainer.data('initial-text', text)\n } else {\n $textContentContainer.empty();\n text = $textContentContainer.data('initial-text')\n $textContentContainer.html(text);\n }\n\n if ($textContentContainer.height() <= maxHeight) {\n $textActionsContainer.addClass('d-none');\n return;\n } else {\n $textActionsContainer.removeClass('d-none');\n }\n\n const visibleText = getVisibleText($textContentContainer, maxHeight);\n const $visibleText = $('');\n $visibleText.html(visibleText);\n\n const $moreText = $('');\n const moreText = text.substring(visibleText.length, text.length);\n $moreText.html(moreText)\n\n $textContentContainer.empty();\n\n $textContentContainer.append($visibleText);\n $textContentContainer.append($('...'));\n $textContentContainer.append($moreText);\n}\n\nfunction init() {\n createShowMoreTextComponent();\n}\n\nfunction eventHandlers() {\n $(window).on('resize', debounce(() => createShowMoreTextComponent(), 50));\n}\n\nmodule.exports = {\n init: init,\n eventHandlers: eventHandlers\n}","'use strict';\n/**\n * This is client side JS to accompany the new 'on hover' option for text placement\n * for the imageAndText PD Component. If 'on hover' is selected in BM, then the text content\n * is shown on hover w/ the corresponding animation selected in the BM PD component UI, as \n * opposed to the default behavior to hide/show component with animation on scroll, which is \n * over ridden by the 'on hover' selection.\n * \n * @param {*} component - imageAndText PD component html\n */\nfunction showComponentOnHover(component) {\n var animationEl = component.querySelector('[data-animation-on-hover]');\n \n if (animationEl) {\n var animation = animationEl.dataset.animationOnHover;\n \n if (animation) {\n component.addEventListener('mouseover', function(e) {\n animationEl.classList.remove('animation-initial-state');\n animationEl.classList.add(animation);\n });\n\n component.addEventListener('mouseout', function(e) {\n animationEl.classList.remove(animation);\n animationEl.classList.add('animation-initial-state');\n });\n }\n }\n}\n\nfunction init() {\n var showOnHovers = document.querySelectorAll('.show-on-hover');\n\n if (showOnHovers.length > 0) {\n [].forEach.call(showOnHovers, showComponentOnHover);\n }\n}\n\nmodule.exports = init();","'use strict';\n\nvar tinySlider = require('tiny-slider/src/tiny-slider');\nvar zoom = require('jquery-zoom');\nvar imagesLoaded = require('imagesloaded');\nvar initProductSlideEqualizeHeights = require('../utilities/sliderHelpers').initProductSlideEqualizeHeights;\nvar moveTickerBannerModals = require('../utilities/sliderHelpers').moveTickerBannerModals;\nrequire('jquery.scrollintoview');\n\nvar SiteConstants = require('constants/SiteConstants');\nvar mediumBreakpoint = SiteConstants.BreakpointSizes.md;\nvar largeBreakpoint = SiteConstants.BreakpointSizes.lg;\n\nvar abSlider = {};\n\n// Check custom attributes on slider element to get settings, falling back to defaults if not populated\nabSlider.getSliderAttributes = function($slider) {\n var attributes = new Object();\n\n // Autoplay (defaults to false)\n attributes.autoplayDelay = parseInt($slider.attr('data-slider-autoplay'));\n attributes.autoplay = isNaN(attributes.autoplayDelay) ? false : true;\n attributes.autoplayTimeout = attributes.autoplay ? attributes.autoplayDelay : 5000;\n\n // Loop (defaults to true)\n attributes.loop = $slider.attr('data-slider-loop') === 'false' ? false : true;\n\n // Number of items to show (defaults to 1 at all breakpoints)\n attributes.itemsNumber = parseInt($slider.attr('data-slider-items'));\n attributes.items = isNaN(attributes.itemsNumber) ? 1 : attributes.itemsNumber;\n attributes.itemsNumberMedium = parseInt($slider.attr('data-slider-items-md'));\n attributes.itemsMedium = isNaN(attributes.itemsNumberMedium) ? 1 : attributes.itemsNumberMedium;\n attributes.itemsNumberLarge = parseInt($slider.attr('data-slider-items-lg'));\n attributes.itemsLarge = isNaN(attributes.itemsNumberLarge) ? 1 : attributes.itemsNumberLarge;\n\n // Gutter space between items (defaults to 0px)\n attributes.gutter = parseInt($slider.attr('data-slider-gutter')) || 0;\n attributes.gutterMedium = parseInt($slider.attr('data-slider-gutter-md')) || 0;\n attributes.gutterLarge = parseInt($slider.attr('data-slider-gutter-lg')) || 0;\n\n // Slide animation speed (defaults to 300ms)\n attributes.speed = parseInt($slider.attr('data-slider-speed')) || 300;\n\n // Slide animation (defaults to standard Carousel behavior)\n attributes.mode = $slider.attr('data-slider-mode') || 'carousel';\n attributes.animateIn = $slider.attr('data-slider-animatein') || 'no-animation';\n attributes.animateOut = $slider.attr('data-slider-animateout') || 'no-animation';\n attributes.lazyload = $slider.attr('data-lazyload') ? true : false;\n\n // Thumbnail settings (defaults to false)\n // If a selector is set for [data-slider-thumbnail container], the rest of the settings populate automatically\n var $thumbnailSlider = $($slider.attr('data-slider-thumbnail-container'));\n attributes.thumbnailContainer = $slider.attr('data-slider-thumbnail-container') || false;\n attributes.navContainer = $thumbnailSlider.length ? $thumbnailSlider.find('.slider')[0] : false;\n\n // double check for navContainer if attributes.thumbnailContainer is true \n // && attributes.navContainer is also false - (non PDP image gallery that can be controlled via custom nav)\n if (!attributes.navContainer && attributes.thumbnailContainer) {\n var navContainer = $slider.find(attributes.thumbnailContainer);\n if (navContainer.length > 0) {\n attributes.navContainer = navContainer[0];\n };\n }\n\n attributes.navAsThumbnails = attributes.navContainer === false ? false : true;\n attributes.controlsContainer = $thumbnailSlider.length ? $thumbnailSlider.find('.slider-thumbnail-controls')[0] : false;\n // update controlsContainer if $slider has a data-slider-controls atttribute\n attributes.controlsContainer = $slider.attr('data-slider-controls') ? document.querySelector($slider.attr('data-slider-controls')) : attributes.controlsContainer;\n // autoHeight param\n attributes.autoHeight = $slider.attr('data-slider-auto-height') ? true : false;\n\n return attributes;\n}\n\n// Build parameter object to create a slider\nabSlider.getSliderParams = function($slider, slideItems) {\n var attributes = abSlider.getSliderAttributes($slider);\n var params = {\n container: $slider.find('.slider')[0],\n loop: attributes.loop,\n items: attributes.items,\n autoplay: attributes.autoplay,\n autoplayTimeout: attributes.autoplayTimeout,\n autoplayHoverPause: true,\n mode: attributes.mode,\n gutter: attributes.gutter,\n speed: attributes.speed,\n navContainer: attributes.navContainer,\n navAsThumbnails: attributes.navAsThumbnails,\n controlsContainer: attributes.controlsContainer,\n lazyload: attributes.lazyload,\n preventScrollOnTouch: 'auto', // prevents mobile errors in chrome\n responsive: {\n [mediumBreakpoint]: {\n items: attributes.itemsMedium,\n gutter: attributes.gutterMedium,\n },\n [largeBreakpoint]: {\n items: attributes.itemsLarge,\n gutter: attributes.gutterLarge,\n }\n }\n }\n\n if (slideItems) {\n params.slideItems = slideItems;\n }\n\n if (params.mode === 'gallery') {\n params.animateIn = attributes.animateIn;\n params.animateOut = attributes.animateOut;\n }\n\n if (attributes.autoHeight) {\n params.autoHeight = true;\n }\n\n return params;\n}\n\n// Uses scrollintoview jQuery plugin (needed for IE11 support) to scroll the active thumbnail into view\n// Note: Thumbnail container needs to be scrollable (overflow: auto) for this to work\nabSlider.slideIntoView = function(slider) {\n if (slider.navContainer !== false && $(slider.navContainer).hasClass('slider')) {\n var $activeThumbnail = $(slider.navContainer).find('.tns-nav-active');\n $activeThumbnail.scrollintoview();\n }\n}\n\n// Build out slide html for replacing images on variant selection\nabSlider.getUpdatedSlideItems = function(images, isThumbnail) {\n var slideItems = [];\n\n images['pdp-carousel-main'].forEach(image => {\n var $slideElement = $('').attr('class', 'slide');\n var $imageElement = $('');\n\n if (!isThumbnail) {\n $slideElement.attr('data-zoom-image', images['hi-res'].length ? images['hi-res'][image.index].url : images['large'][image.index].url);\n }\n\n $imageElement.attr({\n 'src': image.url,\n 'alt': image.alt + ' image number ' + (parseInt(image.index) + 1).toFixed(0),\n 'class': 'd-block img-fluid',\n 'itemprop': 'image'\n });\n\n $slideElement.append($imageElement);\n slideItems.push($slideElement[0]);\n });\n\n return slideItems;\n}\n\n// Listen for the slider:update event and reinitialize slider with new slides\nabSlider.bindSliderUpdateEvent = function($sliderContainer, slider) {\n $sliderContainer.off('slider:update').on('slider:update', '.slider', (event, data) => {\n var $updatedSliderContainer = $(event.target).closest('.slider-container');\n var isThumbnail = $updatedSliderContainer.hasClass('slider-thumbnails');\n var updatedSlideItems = data !== undefined ? abSlider.getUpdatedSlideItems(data.images, isThumbnail) : null;\n var updatedParams = abSlider.getSliderParams($updatedSliderContainer, updatedSlideItems);\n\n // Remove and re-add slider markup if there are new slides to show\n if (updatedParams.slideItems) {\n var $newSliderElement = $('').attr({\n 'class': 'slider',\n 'id': updatedParams.container.id\n });\n var $newSliderControls = $updatedSliderContainer.find('.slider-thumbnail-controls').addClass('d-none');\n $newSliderElement.html(updatedParams.slideItems);\n $updatedSliderContainer.html($newSliderElement);\n updatedParams.container = $newSliderElement[0];\n\n // If this is a thumbnails slider, also add the arrow controls and update the item count\n if (isThumbnail) {\n $updatedSliderContainer.append($newSliderControls);\n updatedParams.items = updatedParams.slideItems.length;\n updatedParams.responsive[mediumBreakpoint].items = updatedParams.slideItems.length;\n updatedParams.responsive[largeBreakpoint].items = updatedParams.slideItems.length;\n }\n }\n\n // Reinitialize slider using new params\n slider = tinySlider.tns(updatedParams);\n slider.events.on('transitionEnd', abSlider.slideIntoView);\n abSlider.enableImageZoom($updatedSliderContainer);\n\n if (isThumbnail) {\n abSlider.handleThumbnailArrows($updatedSliderContainer, slider);\n }\n });\n}\n\n// Listen for the slider:destroy event\nabSlider.bindSliderDestroyEvent = function($sliderContainer, slider) {\n $sliderContainer.off('slider:destroy').on('slider:destroy', '.slider', () => {\n slider.destroy();\n });\n}\n\n// Enables zoomed images using jquery-zoom\nabSlider.enableImageZoom = function($sliderContainer) {\n if ($sliderContainer.closest('.primary-images').length\n && !$sliderContainer.hasClass('slider-thumbnails')\n && !window.isMobile()) {\n var $slides = $sliderContainer.find('.slide');\n $slides.each((index, slide) => {\n var $slide = $(slide);\n\n if (!$slide.hasClass('no-zoom')) {\n var zoomImageUrl = $slide.data('zoom-image') || $slide.find('img').attr('src');\n\n $slide.zoom({\n url: zoomImageUrl,\n magnify: 1,\n touch: false,\n onZoomIn: function() {\n var mainImage = this.parentElement.querySelector('img:not(.zoomImg)');\n $(mainImage).addClass('zoom-is-open');\n },\n onZoomOut: function() {\n var mainImage = this.parentElement.querySelector('img:not(.zoomImg)');\n $(mainImage).removeClass('zoom-is-open');\n }\n });\n }\n });\n }\n}\n\n// Determine whether to show thumbnail arrows based on overflow state\nabSlider.handleThumbnailArrows = function($sliderContainer, slider) {\n if ($sliderContainer.hasClass('slider-thumbnails')) {\n var $slider = $sliderContainer.find('.slider');\n var $arrows = $sliderContainer.find('.slider-thumbnail-controls');\n var buffer = 5; // adding a buffer to prevent arrows from showing if the last slide is mostly visible\n var containerSize;\n var sliderSize;\n\n $slider.imagesLoaded().done(() => {\n if (window.isMobile()) {\n containerSize = $sliderContainer.outerWidth();\n sliderSize = $slider[0].scrollWidth;\n } else {\n containerSize = $sliderContainer.outerHeight();\n sliderSize = $slider[0].scrollHeight;\n }\n\n if (sliderSize - buffer >= containerSize) {\n $arrows.removeClass('d-none');\n }\n });\n }\n}\n\nabSlider.handleSliderLoaded = function($container) {\n $container.addClass('slider-loaded');\n}\n\n// Check for videos and pause them when they're not in the active slide\nabSlider.handleSliderVideos = function($sliderContainer, slider) {\n var $videos = $sliderContainer.find('.hero-media.video-container, .experience-commerce_assets-video>.video-container');\n\n if ($videos.length) {\n slider.events.on('indexChanged', activeSlider => {\n $videos.each((_i, element) => {\n var $videoContainer = $(element);\n var videoID = $videoContainer.find('.video-player').attr('id');\n var player = window.Players[videoID];\n\n if (player) {\n if (!$videoContainer.closest('.tns-slide-active').length) {\n player.pause();\n } else if (player.config.autoplay) {\n player.play();\n }\n }\n });\n });\n }\n}\n\n// Handle Pause/Play Button\nabSlider.bindPauseButton = function($sliderContainer, slider) {\n var sliderButtonPlacement = $sliderContainer.attr('data-slider-pause-button-placement');\n\n if ($sliderContainer[0].hasAttribute('data-slider-autoplay') && $sliderContainer.attr('data-slider-autoplay') != 'false' && $sliderContainer[0].hasAttribute('data-slider-pause-button-placement') && $sliderContainer.attr('data-slider-pause-button-placement') != \"none\") {\n if (sliderButtonPlacement == 'with-pagination') {\n $sliderContainer.find('.tns-nav').addClass('with-pagination-btn').append('stop and start slider');\n } else {\n $sliderContainer.prepend('stop and start slider');\n };\n\n $('.tns-nav-controller').addClass(sliderButtonPlacement);\n\n $sliderContainer.on('click', '.tns-nav-controller', function() {\n event.preventDefault();\n $(this).toggleClass('pause');\n $sliderContainer.toggleClass('slider-pause');\n\n if ($sliderContainer.hasClass('slider-pause')) {\n slider.pause();\n } else {\n slider.play();\n }\n });\n }\n};\n\nabSlider.buildEnsteinSliderLongLinesPagination = function($sliderContainer, isEinstein) {\n if (isEinstein) {\n var slides = $sliderContainer.get(0).querySelectorAll('.slide'),\n paginationContainer = $sliderContainer.get(0).querySelector('[data-pagination-longlines]'),\n paginationButton;\n\n if (paginationContainer) {\n // save pagination button for cloning\n paginationButton = paginationContainer.firstElementChild;\n // clear out existing paging\n paginationContainer.innerHTML = '';\n // Add the specified number of cloned element\n for (var i = 0; i < slides.length; i++) {\n var clone = paginationButton.cloneNode(true); // Clone the first element\n clone.setAttribute('data-line-index', i + 1);\n paginationContainer.appendChild(clone);\n }\n }\n }\n}\n\nabSlider.initializeSliders = function($context = $('body')) {\n var scope = this;\n // delay-init is different from replace-content\n var $sliderContainers = $context.find('.slider-container:not(.delay-init)');\n\n $sliderContainers.each((i, slider) => {\n var $sliderContainer = $(slider);\n\n var params = scope.getSliderParams($sliderContainer);\n var promisegroup = [];\n var $replace = $sliderContainer.find('[data-replace-content]');\n // check for einsteinFlag added if call comes from einsteinRecs.js\n var isEinstein = 'einsteinFlag' in $context.get(0) && $context.get(0).einsteinFlag;\n\n // if slider is ticker banner, then move modals to body\n var isTickerBanner = $(slider).data('sliderTickerBanner') && $(slider).data('sliderTickerBanner') !== undefined ? true : false;\n if (isTickerBanner) {\n moveTickerBannerModals(slider);\n }\n\n $replace.each(function (i, replace) {\n var $target = $(replace);\n var deferment = $target.data('deferment');\n \n if (deferment && !deferment.isResolved && deferment.state() === 'pending') {\n promisegroup.push(deferment);\n }\n });\n \n // Done will also execute if promisegroup is empty []\n $.when.apply($, promisegroup).done(function () {\n // test for/build long lines pagination\n abSlider.buildEnsteinSliderLongLinesPagination($sliderContainer, isEinstein);\n\n scope.applyTinySlider($sliderContainer, params);\n $sliderContainer.addClass('slider-loaded');\n });\n });\n}\n\nabSlider.applyTinySlider = function ($container, params) {\n if (!$container) return;\n\n var tslider = tinySlider.tns(params);\n\n if (!!tslider) {\n tslider.events.on('transitionStart', this.slideIntoView);\n\n this.bindPauseButton($container, tslider);\n this.bindSliderUpdateEvent($container, tslider);\n this.bindSliderDestroyEvent($container, tslider);\n this.enableImageZoom($container);\n this.handleThumbnailArrows($container, tslider);\n this.handleSliderVideos($container, tslider);\n this.handleSliderLoaded($container);\n\n $('body').trigger('slider:init.sliderEvents', [$container]);\n }\n\n $container.data('tns', tslider);\n $container.trigger('tooltip:init');\n}\n\nabSlider.initializeQuickviewModalSliders = function() {\n $('body').off('quickview:ready').on('quickview:ready', (event, modal) => {\n abSlider.initializeSliders($(modal));\n });\n}\n\nabSlider.initializeWishlistModalSliders = function() {\n $('body').off('editwishlistproduct:ready').on('editwishlistproduct:ready', (event, modal) => {\n abSlider.initializeSliders($(modal));\n });\n}\n\nabSlider.initializeTargetSliders = function() {\n $('body').off('targetslider:ready').on('targetslider:ready', (event, target) => {\n abSlider.initializeSliders($(target));\n });\n}\n\nabSlider.initProductSlideEqualizeHeights = initProductSlideEqualizeHeights;\n\nabSlider.init = function() {\n abSlider.initializeSliders();\n abSlider.initializeQuickviewModalSliders();\n abSlider.initializeWishlistModalSliders();\n abSlider.initializeTargetSliders();\n abSlider.initProductSlideEqualizeHeights();\n}\n\nmodule.exports = abSlider;","'use strict';\n\nvar tabs = require('core/components/tabs');\n\ntabs.checkLinkedProductTabs = function () {\n var tabLinks = document.querySelectorAll('[data-toggle=tab]');\n\n [].forEach.call(tabLinks, function(tabLink) {\n var tabContent = document.querySelector(tabLink.getAttribute('href')),\n tabProducts = tabContent.querySelector('[class*=productLinked]');\n \n if (tabProducts) {\n var products = tabProducts.querySelector('.product-tile');\n \n if (!products) {\n tabLink.parentElement.classList.add('d-none');\n }\n }\n });\n}\n\nmodule.exports = tabs;\n","/**\n * toggleElementHeight\n * @param {*} el - element height that will animate\n */\nfunction toggleElementHeight(el) {\n var container = el.closest('[data-toggle-height-block]'),\n toggleBody;\n\n if (container) {\n toggleBody = container.querySelector('[data-toggle-height-body]');\n\n if (toggleBody) {\n if (container.classList.contains('toggle-height-active')) { \n container.classList.remove('toggle-height-active');\n } else {\n container.classList.add('toggle-height-active');\n }\n }\n }\n}\n\n/**\n * toggleElementHeight.init()\n * hide/show order summary on checkout in mobile\n */\nfunction init() {\n var toggles = document.querySelectorAll('[data-toggle-height]');\n\n if (toggles.length > 0) {\n [].forEach.call(toggles, function(toggle) {\n toggle.addEventListener('click', function(e) {\n var target = e.target;\n toggleElementHeight(target);\n })\n });\n }\n}\n\nmodule.exports = {\n init: init\n}\n","'use strict';\n\nconst debounce = require('lodash/debounce');\nconst VideoHelper = require('core/components/video/videoHelper');\n\nconst PlayerDefaults = {\n autoplay: false,\n controls: true,\n muted: false,\n loop: false,\n modal: false,\n hasThumb: false,\n};\n\nfunction hideExistingModal() {\n const $modal = $('.modal.show');\n\n return new Promise((resolve, reject) => {\n if (!$modal.length) {\n resolve();\n }\n\n $modal.on('hidden.bs.modal', () => {\n resolve();\n return;\n });\n });\n}\n\n/**\n * initDomElements()\n *\n * Saves generalized references to DOM elements needed by the player to operate.\n *\n * player.domElements.$player - div used to init the player API, also holds the configuration data\n * player.domElements.$thumb - thumbnail/preview image that masks the player on screen while not playing\n * player.domElements.$cntr - outer div container used to attach dimensions when needed\n */\nfunction initDomElements() {\n let player = this;\n let $elem = $('#' + player.id);\n\n let $thumb = $elem.siblings('.video-thumbnail');\n if (!$thumb.length) {\n $thumb = $('body').find(`#${player.id}-link`);\n }\n\n player.domElements = {\n $player: $elem,\n $thumb: $thumb,\n $cntr: $elem.closest('.video-container')\n };\n}\n\n/**\n * initConfig()\n *\n * Parses and stores the configuration data attributes set by the content asset.\n * In case of parse error, fallback to this module's PlayerDefaults.\n */\nfunction initConfig() {\n let player = this;\n\n let playerAttrData = {};\n try {\n playerAttrData = JSON.parse(player.domElements.$player.attr('data-player-attr'));\n } catch (ex) {\n playerAttrData = PlayerDefaults;\n }\n\n player.config = {\n autoplay: !!playerAttrData.autoplay,\n controls: !!playerAttrData.controls,\n muted: !!playerAttrData.mute,\n loop: !!playerAttrData.loop,\n hasThumb: playerAttrData.hasThumb,\n modal: !!playerAttrData.modal,\n videoId: player.domElements.$player.attr('data-video-id'),\n hasLinkThumb: playerAttrData.hasLinkThumb || false,\n inline: ('inline' in playerAttrData) ? !!playerAttrData.inline : !!playerAttrData.autoplay\n };\n}\n\n/**\n * createApiPlayer()\n *\n * Create and store the vendor specific API Player.\n * The configurations set in the content asset can be overridden for specific use cases, like turning off autoplay when closing the modal.\n *\n * Also attaches any needed playback events to the player.\n *\n * @param {object} overrides - attributes that can override the defined player.config attributes\n * @returns {Promise} - Vimeo player ready() Promise is returned so we don't make any calls too early\n */\nfunction createApiPlayer(overrides) {\n let player = this;\n let config = player.config;\n let isMp4 = player.config.videoId.includes('mp4');\n\n let onReadyCallback = (e) => {\n if (overrides.onReady) {\n overrides.onReady(e);\n delete overrides['onReady'];\n }\n };\n\n // apply overrides attributes\n if (overrides) {\n config = $.extend({}, player.config, overrides);\n }\n\n if (isMp4) {\n player.apiObj = new videojs(player.id, {\n autoplay: config.autoplay,\n playsinline: config.inline,\n controls: config.controls,\n loop: config.loop,\n muted: config.muted\n }, onReadyCallback);\n\n player.apiObj.on('pause', () => {\n // save the current location\n player.cache.time = player.apiObj.currentTime();\n });\n\n player.apiObj.on('ended', () => {\n $('body').trigger('video:ended', player);\n });\n }\n}\n\n/**\n * initPageEvents()\n *\n * Initializes any page load event logic for the player.\n */\nfunction initPageEvents() {\n let player = this;\n let $playerContainer = player.domElements.$cntr;\n let isMp4 = player.config.videoId.includes('mp4');\n\n // pause all players at init, before deciding if they should play\n if (isMp4) {\n player.pause();\n }\n\n if (player.config.hasThumb) {\n //handle thumbnail click\n player.domElements.$thumb.on('click', event => {\n // Hide any existing modals\n var $modal = $('.modal.show');\n $modal.modal('hide');\n \n event.preventDefault();\n\n if (player.domElements.$thumb[0].id === 'pdp-setting-instructions-video-link' && window.isMobile()) {\n window.location = player.config.videoId;\n } else {\n const existingModalIsHidden = hideExistingModal()\n existingModalIsHidden.then(() => {\n if (player.config.modal) {\n player.launchModal();\n } else {\n let paused = player.apiObj.paused();\n\n if (!paused) {\n player.pause();\n } else {\n var playPromise = player.apiObj.play();\n\n if (playPromise !== undefined) {\n playPromise.then(() => {\n player.domElements.$thumb.addClass('faded');\n }).catch(error => {\n console.error('play error:', error);\n });\n }\n }\n }\n });\n }\n });\n }\n\n if (player.domElements.$cntr.closest('.modal').length) {\n $(window).on('resize', debounce(() => player.removeSize(), 100));\n }\n\n if (VideoHelper.shouldPlay($playerContainer) && player.config.autoplay && !player.config.modal) {\n let autoplayPromise = player.domElements.$player[0].play();\n\n if (autoplayPromise !== undefined) {\n autoplayPromise.then(() => {\n // Autoplay started successfully\n player.play();\n }).catch(error => {\n console.error('autoplay prevented:', error);\n player.apiObj.play(); // iOS doesn't always return the promise, so retry\n });\n }\n }\n\n $(window).on('scrollUpdate', () => {\n if (VideoHelper.shouldPlay($playerContainer)) {\n if (player.config.autoplay && !player.config.modal) {\n let autoplayPromise = player.domElements.$player[0].play();\n\n if (autoplayPromise !== undefined) {\n autoplayPromise.then(() => {\n // Autoplay started successfully\n player.play();\n }).catch(error => {\n console.error('autoplay prevented:', error);\n player.apiObj.play(); // iOS doesn't always return the promise, so retry\n });\n }\n }\n } else {\n if (!player.apiObj.paused()) {\n player.pause();\n }\n }\n });\n}\n\nmodule.exports = function(playerId) {\n var player = this;\n this.id = playerId;\n this.type = 'hosted';\n this.cache = {};\n\n /**********************************************************\n ** Calls to initialize the player and event listeners **\n **********************************************************/\n\n initDomElements.call(player);\n\n initConfig.call(player);\n\n createApiPlayer.call(player, {onReady: () => initPageEvents.call(player)});\n\n\n /**************************************\n ** Generalized playback functions **\n **************************************/\n\n this.play = () => {\n player.apiObj.play();\n if (player.domElements.$thumb.length && !player.config.modal) {\n player.domElements.$thumb.addClass('faded');\n }\n }\n\n this.pause = () => {\n player.apiObj.pause();\n if (player.domElements.$thumb.length) {\n player.domElements.$thumb.removeClass('faded');\n }\n }\n\n this.mute = () => {\n player.apiObj.getVolume().then((volume) => {\n player.cache.volume = volume;\n });\n\n player.apiObj.setVolume(0);\n };\n\n this.unmute = () => {\n let volume = 1;\n if (player.cachedVolume) {\n volume = player.cache.volume;\n }\n\n player.apiObj.setVolume(volume);\n };\n\n\n /*********************************************************\n ** Functions to support playing the video in a modal **\n *********************************************************/\n\n this.setSize = () => {\n player.domElements.$cntr.css({\n height: player.domElements.$cntr.outerHeight(),\n width: player.domElements.$cntr.outerWidth()\n });\n };\n\n this.removeSize = () => {\n player.domElements.$cntr.css({\n height: 'auto',\n width: 'auto'\n });\n };\n\n this.setModal = (VideoModal) => {\n player.modal = VideoModal;\n };\n\n this.launchModal = () => {\n player.setSize();\n player.modal.launch(player);\n };\n\n\n /*****************************************************\n ** Event Handlers for the modal events **\n *****************************************************/\n\n this.getShowEventHandler = () => {\n let $modal = player.modal.getModalObj();\n let $body = $('.modal-body', $modal).empty().removeClass();\n $body.addClass('modal-body ' + player.domElements.$cntr.attr('class'));\n $body.removeClass('d-none');\n\n if (player.apiObj && player.apiObj.dispose) {\n var $player = player.domElements.$player;\n\n // create new, uninitialized video element for use in modal\n var $newPlayer = $('', {\n 'data-asset-id': $player.data('asset-id'),\n 'data-video': $player.data('video'),\n 'data-player-attr': JSON.stringify($player.data('player-attr')),\n 'data-video-id': $player.data('video-id'),\n 'class': 'video-player video-js',\n 'id': $player.attr('id') + Math.floor(Math.random() * 10000)\n });\n var $newPlayerSource = $('', {\n 'src': $player.find('source').attr('src'),\n 'type': $player.find('source').attr('type')\n });\n\n // remove old player\n delete player.apiObj;\n videojs($player[0]).dispose();\n\n // add new player and update player properties\n $newPlayer.append($newPlayerSource);\n $body.append($newPlayer);\n player.domElements.$player = $newPlayer;\n player.id = $newPlayer.attr('id');\n }\n\n createApiPlayer.call(player, {\n onReady: (e) => {\n // set the current location if one is saved\n if (player.cache.time) {\n player.apiObj.currentTime(player.cache.time);\n }\n player.play();\n }\n });\n };\n\n this.getHideEventHandler = () => {\n // save the current location\n player.cache.time = player.apiObj.currentTime();\n\n if (player.config.hasLinkThumb) {\n player.domElements.$player.addClass('d-none');\n }\n\n player.domElements.$player.prependTo(player.domElements.$cntr);\n player.pause();\n player.apiObj.currentTime(0);\n };\n\n return this;\n}\n","'use strict';\n\nconst YouTube = require('./youtube');\nconst Vimeo = require('core/components/video/vimeo');\nconst Hosted = require('org_citizen/components/video/hosted');\nconst VideoModal = require('core/components/video/videoModal');\nconst videojs = require('video.js/dist/video.min.js');\nconst videoHelpers = require('./videoHelpers');\n\nif (!'_babelPolyfill' in window) {\n require('@babel/polyfill'); // adds support for ES6 Promises to IE11\n}\n\nwindow.Players = {};\n\nvar initPlayers = ($context = $('body'), isAjaxEvent = false) => {\n let $ytElements = $context.find('.video-player[data-video=youtube]');\n let $vimeoElements = $context.find('.video-player[data-video=vimeo]');\n let $hostedElements = $context.find('video[data-video=hosted]');\n\n // prevent default as .video-thumbnails href are blank and will cause page to\n // refresh if videos aren't ready to be played and video-thumbnail play button is clicked\n $('.experience-commerce_assets-video .video-thumbnail').on('click', function(e) {\n if (!e.target.closest('.pdp-carousel-video-container')) {\n e.preventDefault();\n } \n });\n\n if ($vimeoElements.length) {\n loadVimeoAPI().then(() => {\n $vimeoElements.each((index, element) => {\n // don't create player for videos in sliders until slider has been initialized\n if (!$(element).closest('.slider-container').length\n || $context.is('.slider-container') && $(element).closest($context).length) {\n let playerId = getUniquePlayerId(index, element, isAjaxEvent);\n\n if (!window.Players.hasOwnProperty(playerId) || isAjaxEvent) {\n window.Players[playerId] = new Vimeo(playerId);\n window.Players[playerId].setModal(VideoModal);\n }\n }\n });\n }).catch((err) => {\n if (console && console.error) {\n console.error(err);\n }\n });\n }\n\n if ($ytElements.length) {\n loadYouTubeAPI().then(() => {\n $ytElements.each((index, element) => {\n // don't create player for videos in sliders until slider has been initialized\n if (!$(element).closest('.slider-container').length\n || $context.is('.slider-container') && $(element).closest($context).length) {\n let playerId = getUniquePlayerId(index, element, isAjaxEvent);\n\n if (!window.Players.hasOwnProperty(playerId) || isAjaxEvent) {\n window.Players[playerId] = new YouTube(playerId);\n window.Players[playerId].setModal(VideoModal);\n }\n }\n });\n }).catch((err) => {\n if (console && console.error) {\n console.error(err);\n }\n });\n }\n\n if ($hostedElements.length) {\n window.videojs = videojs;\n\n $hostedElements.each((index, element) => {\n // don't create player for videos in sliders until slider has been initialized\n if (!$(element).closest('.slider-container').length\n || $context.is('.slider-container') && $(element).closest($context).length) {\n let playerId = getUniquePlayerId(index, element, isAjaxEvent);\n\n if (!window.Players.hasOwnProperty(playerId) || isAjaxEvent) {\n window.Players[playerId] = new Hosted(playerId);\n window.Players[playerId].setModal(VideoModal);\n }\n }\n });\n }\n\n if ($vimeoElements.length || $ytElements.length || $hostedElements.length) {\n $('body').on('video:ended', (event, player) => {\n if (player.domElements.$thumb.length) {\n player.domElements.$thumb.removeClass('faded');\n }\n\n // prevent videos from replaying on scroll if they've already finished\n player.config.autoplay = false;\n });\n\n // Reinitialze videos if slider loads, to allow creation of unique IDs\n $('body').off('.sliderEvents').on('slider:init.sliderEvents', (event, $sliderContainer) => {\n initPlayers($sliderContainer);\n });\n\n // Reinitialize videos in case of ajax partial page load\n $('body').off('.ajaxEvents').on('ajax:load.ajaxEvents', (event, $container) => {\n initPlayers($container, true);\n });\n }\n\n // check for auto aspect ratios\n videoHelpers.initAutoAspectRatios();\n}\n\nlet ytPromise = null;\n\nvar loadYouTubeAPI = () => {\n if (ytPromise) {\n return ytPromise;\n }\n\n return ytPromise = new Promise((resolve) => {\n let tag = document.createElement('script');\n tag.src = \"https://www.youtube.com/iframe_api\";\n tag.onerror = () => {\n throw new Error('YouTube iframe API load error');\n };\n\n let firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n window.onYouTubeIframeAPIReady = () => resolve();\n });\n}\n\nvar loadVimeoAPI = () => {\n return new Promise(function(resolve) {\n let tag = document.createElement('script');\n tag.src = \"https://player.vimeo.com/api/player.js\";\n tag.onload = resolve;\n tag.onerror = () => {\n throw new Error('Vimeo player SDK load error');\n };\n\n let firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n });\n}\n\n// handle cases where multiple videos with the same ID exist, like looping sliders\nvar getUniquePlayerId = (index, element, isAjaxEvent) => {\n let playerId = $(element).attr('id');\n\n if (window.Players.hasOwnProperty(playerId) && !isAjaxEvent) {\n playerId = playerId + '-' + index;\n $(element).attr('id', playerId);\n }\n\n return playerId;\n}\n\n/**\n * TODO:\n * - document everything\n * - Youtube API pageload errors\n */\nmodule.exports = () => initPlayers();\n","'use strict';\n\nvar debounce = require('lodash/debounce');\n\nvar initialized = false;\n\nfunction buildAutoAspectRatio(videoContainer) {\n var region = $(videoContainer).closest('.experience-region');\n var video = videoContainer.querySelector('video');\n var videoOrientation = video.videoHeight > video.videoWidth ? 'portrait' : 'landscape';\n var videoAspectRatio = videoOrientation === 'portrait' ? (video.videoHeight / video.videoWidth) : (video.videoWidth / video.videoHeight);\n var regionOrientation = region[0].clientHeight > region[0].clientWidth ? 'portrait' : 'landscape';\n var regionAspectRatio = regionOrientation === 'portrait' ? (region[0].clientHeight / region[0].clientWidth) : (region[0].clientWidth / region[0].clientHeight);\n\n // reset css vars for recalc\n videoContainer.style.setProperty('--aspectRatioWidth', '');\n videoContainer.style.setProperty('--aspectRatioHeight', '');\n videoContainer.style.setProperty('--aspectRatioCover', '');\n \n if (videoContainer.classList.contains('aspect-ratio-prioritize-width')) {\n // prioritize width\n video.style.height = 'auto';\n // transpose video dimensions to region\n var rHeight = region[0].getBoundingClientRect().height;\n var vHeight = region[0].getBoundingClientRect().width * videoAspectRatio;\n // adjust video if dimensions are bigger than regions dimensions\n if (vHeight > rHeight) {\n video.style.top = '50%';\n video.style.transform = 'translate(0, -50%)';\n }\n // set dom css property\n videoContainer.style.setProperty('--aspectRatioWidth', (regionAspectRatio * 100) + '%' );\n \n } else if (videoContainer.classList.contains('aspect-ratio-prioritize-height')) {\n // prioritize height\n video.style.width = 'auto';\n // transpose video dimensions to region\n var rWidth = region[0].getBoundingClientRect().width;\n var vWidth = region[0].getBoundingClientRect().width * regionAspectRatio;\n // adjust video if dimensions are bigger than regions dimensions\n if (vWidth > rWidth) {\n video.style.left = '50%';\n video.style.transform = 'translate(-50%, 0)';\n }\n // set dom css property\n videoContainer.style.setProperty('--aspectRatioHeight', (regionAspectRatio * 100) + '%' );\n \n } else if (videoContainer.classList.contains('aspect-ratio-cover')) {\n // in cover mode we are only concenerd with videoSpecs\n if (videoOrientation === 'portrait') {\n video.style.height = 'auto'; \n video.style.top = '50%';\n video.style.transform = 'translate(0, -50%)';\n } else {\n video.style.width = 'auto';\n video.style.left = '50%';\n video.style.transform = 'translate(-50%, 0)';\n }\n\n // set dom css property\n videoContainer.style.setProperty('--aspectRatioCover', (regionAspectRatio * 100) + '%' );\n }\n} \n\nfunction buildAllVideosOnResize(videoContainers) {\n [].forEach.call(videoContainers, function(videoContainer) {\n var video = videoContainer.querySelector('video');\n \n if ( video && video.readyState === 4 ) {\n buildAutoAspectRatio(videoContainer)\n }\n });\n}\n\nfunction initAutoAspectRatios() {\n if (!initialized) {\n var videoContainers = document.querySelectorAll('.aspect-ratio-prioritize-width, .aspect-ratio-prioritize-height, .aspect-ratio-cover');\n\n [].forEach.call(videoContainers, function(videoContainer) {\n var video = videoContainer.querySelector('video');\n if (video) {\n if ( video.readyState === 4 ) {\n buildAutoAspectRatio(videoContainer)\n } else {\n video.addEventListener( \"loadedmetadata\", function (e) {\n buildAutoAspectRatio(videoContainer); \n }, false );\n }\n } else {\n // if there is no video, that means iframe is rendering. We must remove the prioritize and cover\n // classes as they will have no effect. \n videoContainer.classList.remove('aspect-ratio-prioritize-width', 'aspect-ratio-prioritize-height', 'aspect-ratio-cover');\n // add default class to ensure proper padding\n videoContainer.classList.add('aspect-ratio-16-9');\n }\n });\n\n window.addEventListener('resize', debounce(function() {\n buildAllVideosOnResize(videoContainers);\n }, 250));\n\n initialized = true;\n }\n}\n\nfunction setupPdpCarouselVideoModal(selector) { \n var $pdpCarouselVideoModal = $(selector),\n modalVideo = $pdpCarouselVideoModal.find('video'),\n modalTrigger = document.querySelector('[data-target=\"' + selector + '\"]'),\n triggerVideoContainer = modalTrigger ? modalTrigger.closest('.video-container') : null,\n triggerVideo = triggerVideoContainer ? triggerVideoContainer.querySelector('[data-video]') : null,\n triggerVideoPlayer = triggerVideo ? window.Players[triggerVideo.id] : null;\n\n if ($pdpCarouselVideoModal && modalVideo.length > 0) {\n $pdpCarouselVideoModal.on('shown.bs.modal', (e) => { \n if (triggerVideoPlayer) {\n modalVideo[0].currentTime = triggerVideoPlayer.cache.time;\n }\n modalVideo[0].play();\n });\n\n $pdpCarouselVideoModal.on('hidden.bs.modal', (e) => { \n if (triggerVideoPlayer) {\n triggerVideoPlayer.domElements.$player[0].currentTime = modalVideo[0].currentTime;\n }\n modalVideo[0].pause();\n });\n }\n}\n\nfunction setupProductMarketingVideoModals() {\n var pdpCarouselModals = ['#productMarketingVideoModal'];\n\n pdpCarouselModals.forEach(function(modalId) { \n setupPdpCarouselVideoModal(modalId);\n });\n}\n\nmodule.exports = {\n initAutoAspectRatios: initAutoAspectRatios,\n setupProductMarketingVideoModals: setupProductMarketingVideoModals\n};","'use strict';\n\nconst debounce = require('lodash/debounce');\nconst VideoHelper = require('core/components/video/videoHelper');\n\nconst PlayerDefaults = {\n autoplay: 0,\n playsinline: 0,\n controls: 1,\n mute: 0,\n loop: 0,\n modal: false,\n hasThumb: false,\n playlist: ''\n};\n\nconst origin = window.location.protocol + '//' + window.location.host;\n\n/**\n * initDomElements()\n * \n * Saves generalized references to DOM elements needed by the player to operate. \n * \n * player.domElements.$player - div used to init the player API, also holds the configuration data\n * player.domElements.$thumb - thumbnail/preview image that masks the player on screen while not playing\n * player.domElements.$cntr - outer div container used to attach dimensions when needed\n */\nfunction initDomElements() {\n let player = this;\n let $elem = $('#' + player.id);\n \n player.domElements = {\n $player: $elem,\n $thumb: $elem.siblings('.video-thumbnail'),\n $cntr: $elem.closest('.video-container'),\n };\n}\n\n/**\n * initConfig()\n * \n * Parses and stores the configuration data attributes set by the content asset.\n * In case of parse error, fallback to this module's PlayerDefaults.\n */\nfunction initConfig() {\n let player = this;\n \n let playerAttrData = {};\n try {\n playerAttrData = JSON.parse(player.domElements.$player.attr('data-player-attr'));\n } catch (ex) {\n playerAttrData = PlayerDefaults;\n }\n \n let videoId = player.domElements.$player.attr('data-video-id');\n let playlist = playerAttrData.loop === 1 ? videoId : '';\n \n player.config = {\n autoplay: playerAttrData.autoplay,\n playsinline: playerAttrData.autoplay === 1 ? 1 : 0,\n controls: playerAttrData.controls,\n mute: playerAttrData.mute,\n loop: playerAttrData.loop,\n hasThumb: playerAttrData.hasThumb,\n modal: playerAttrData.modal,\n videoId: videoId,\n modestbranding: 1\n };\n if (playlist != '') {\n player.config.playlist = playlist\n } \n}\n\n/**\n * createApiPlayer()\n * \n * Create and store the vendor specific API Player.\n * The configurations set in the content asset can be overridden for specific use cases, like turning off autoplay when closing the modal.\n * \n * Also attaches any needed playback events to the player. \n * \n * @param {object} overrides - attributes that can override the defined player.config attributes\n */\nfunction createApiPlayer(overrides) {\n let player = this;\n let config = player.config;\n\n let onReadyCallback = (e) => {\n commonOnReady.call(player, e);\n\n if (overrides.onReady) {\n overrides.onReady(e);\n delete overrides['onReady'];\n }\n };\n\n // apply overrides attributes\n if (overrides) {\n config = $.extend({}, player.config, overrides);\n }\n\n player.apiObj = new YT.Player(player.id, {\n videoId: config.videoId,\n playerVars: {\n autoplay: config.autoplay,\n playsinline: config.playsinline,\n controls: config.controls,\n mute: config.mute,\n loop: config.loop,\n playlist: config.playlist,\n enablejsapi: 1,\n origin: origin,\n widget_referrer: origin\n },\n host: 'https://www.youtube.com', // prevents 'postMessage' origin mismatch error\n events: {\n onReady: onReadyCallback,\n onStateChange: (e) => {\n if (e.data === YT.PlayerState.PAUSED) {\n // save the current location\n player.cache.time = e.target.getCurrentTime();\n } else if (e.data === YT.PlayerState.PLAYING) {\n // not currently using the on play event, but it's here for future use\n }\n\n if (e.data === 0) {\n $('body').trigger('video:ended', player);\n }\n },\n onError: (e) => {\n if (console && console.error) {\n console.error('onError: ' + e.data);\n }\n }\n }\n });\n}\n\n/**\n * initPageEvents()\n * \n * Initializes any page event logic for the player. \n */\nfunction initPageEvents() {\n let player = this;\n let $playerContainer = player.domElements.$player.closest('.video-container');\n\n // pause all players at init, before deciding if they should play\n player.pause();\n \n // honor the auto mute settings when launching modal\n if (player.config.mute === 1) {\n player.mute();\n } else {\n player.unmute();\n }\n \n if (player.config.hasThumb) {\n //handle thumbnail click\n player.domElements.$thumb.on('click', event => {\n event.preventDefault();\n\n if (player.config.modal) {\n player.launchModal();\n } else {\n let playerState = player.apiObj.getPlayerState();\n let playing = playerState === 1;\n\n if (playing) {\n player.pause();\n } else {\n player.play();\n }\n }\n });\n }\n\n if (player.domElements.$cntr.closest('.modal').length) {\n $(window).on('resize', debounce(() => player.removeSize(), 100));\n }\n\n if (VideoHelper.shouldPlay($playerContainer) && player.config.autoplay && !player.config.modal) {\n player.play();\n }\n\n $(window).on('scrollUpdate', () => {\n let playerState = player.apiObj.getPlayerState();\n let playing = playerState === 1;\n\n if (VideoHelper.shouldPlay($playerContainer)) {\n if (player.config.autoplay && !playing && !player.config.modal) {\n player.play();\n }\n } else if (playing) {\n player.pause();\n }\n });\n}\n\nfunction commonOnReady(e) {\n let player = this;\n\n // update player dom reference\n player.domElements.$player = $('#' + player.id);\n \n // if we have an auto play, auto mute, modal, then honor the config,\n // else let the app maintain the volume state\n if (typeof player.cache.mute !== 'undefined') {\n if (player.cache.mute === 1) {\n e.target.mute();\n } else {\n e.target.unMute();\n }\n\n delete player.cache.mute;\n }\n}\n\n\nmodule.exports = function(playerId) {\n var player = this;\n this.id = playerId;\n this.type = 'youtube';\n this.cache = {};\n \n /**********************************************************\n ** Calls to initialize the player and event listeners **\n **********************************************************/\n \n initDomElements.call(player);\n \n initConfig.call(player);\n \n createApiPlayer.call(player, {onReady: () => initPageEvents.call(player)});\n \n \n /***************************************\n ** Generalized playback functions **\n ***************************************/\n \n this.play = () => {\n player.apiObj.playVideo();\n if (player.domElements.$thumb.length && !player.config.modal) {\n player.domElements.$thumb.addClass('faded');\n }\n }\n \n this.pause = () => {\n player.apiObj.pauseVideo();\n if (player.domElements.$thumb.length) {\n player.domElements.$thumb.removeClass('faded');\n }\n }\n \n this.mute = () => {\n player.apiObj.mute();\n player.cache.mute = 1;\n };\n \n this.unmute = () => {\n player.apiObj.unMute();\n player.cache.mute = 0;\n };\n \n \n /*********************************************************\n ** Functions to support playing the video in a modal **\n *********************************************************/\n \n this.setSize = () => player.domElements.$cntr.css({\n height: player.domElements.$cntr.outerHeight(),\n width: player.domElements.$cntr.outerWidth()\n });\n \n this.removeSize = () => player.domElements.$cntr.css({\n height: 'auto',\n width: 'auto'\n });\n \n this.setModal = (VideoModal) => {\n player.modal = VideoModal;\n };\n \n this.launchModal = () => {\n player.setSize();\n player.modal.launch(player);\n };\n \n \n /*****************************************************\n ** Event Handlers for the Bootstrap modal events **\n *****************************************************/\n \n this.getShowEventHandler = () => {\n // move the video player to the modal body\n let $modal = player.modal.getModalObj();\n let $body = $('.modal-body', $modal).empty().removeClass();\n $body.addClass('modal-body ' + player.domElements.$cntr.attr('class'));\n player.domElements.$player.appendTo($body);\n \n // rebuild the API player to maintain event handlers\n if (player.apiObj && player.apiObj.destroy) {\n player.apiObj.destroy();\n }\n createApiPlayer.call(player, {\n onReady: (e) => {\n // set the current location if one is saved\n if (player.cache.time) {\n player.apiObj.seekTo(player.cache.time, true);\n }\n player.play();\n }\n });\n };\n \n this.getHideEventHandler = () => {\n // save current location\n player.cache.time = player.apiObj.getCurrentTime();\n\n // commented out the prepend to prevent additional videos from being added\n // move the video player from the modal back to its page container\n // player.domElements.$player.prependTo(player.domElements.$cntr);\n\n // rebuild the API player to maintain event handlers\n if (player.apiObj && player.apiObj.destroy) {\n player.apiObj.destroy();\n }\n // comment out to prevent playing a video after modal has been closed.\n // createApiPlayer.call(player, {autoplay: 0});\n };\n \n return this;\n}","'use strict';\n\nconst formValidation = require('base/components/formValidation');\nconst Hosted = require('org_citizen/components/video/hosted');\nconst VideoModal = require('core/components/video/videoModal');\nconst videojs = require('video.js/dist/video.min.js');\n\nfunction displayMessage(isSuccess, message) {\n const status = (isSuccess) ? 'alert-success' : 'alert-danger';\n\n if ($('.stock-notification-message').length === 0) {\n $('body').append('');\n }\n\n $('.stock-notification-message').append(`
');\n\n setTimeout(function () {\n $('.add-giftcertificate-messages').remove();\n if (button) {\n button.removeAttr('disabled');\n }\n }, 5000);\n}\n\nfunction giftCertificateFormSubmission() {\n $('body').on('submit', 'form.GiftCertificateForm', function (e) {\n e.preventDefault();\n\n var form = $(this);\n var isEdit = false;\n var button = form.find('.btn-add-giftcertificate-tocart');\n if (!button || !button.length) {\n button = form.find('.btn-update-giftcertificate-incart');\n isEdit = true;\n } else {\n $('body').trigger('product:beforeAddToCart', this);\n }\n form.parents('.card').spinner().start();\n\n var url = form.attr('action');\n var queryString = form.serialize() + '&format=ajax';\n if (isEdit) {\n queryString += '&uuid=' + button.data('uuid');\n }\n button.attr('disabled', true);\n recaptcha.check(e, {\n url: url,\n method: 'POST',\n dataType: 'json',\n data: queryString,\n success: function (data) {\n if (data.success) {\n if (isEdit) {\n $('#editGiftCertificateLineItemModal').modal('hide');\n cart.updateCartTotals(data.cartModel);\n updateGiftCertificateLineItem(data.cartModel, button.data('uuid'));\n $('body').trigger('cart:update', [data, button.data('uuid')]);\n } else {\n $('body').trigger('product:afterAddToCart', data);\n }\n form.trigger('reset');\n formErrors.clearPreviousErrors(form);\n } else {\n if (data.redirectUrl) {\n window.location.href = data.redirectUrl;\n } else {\n formValidation(form, data);\n }\n }\n\n displayMessage(data, button);\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n }\n console.log(err);\n displayMessage(err, button);\n }\n });\n })\n};\n\nfunction updateGiftCertificateLineItem(data, uuid) {\n var lineItem;\n for (var i = 0; i < data.items.length; i++) {\n if (data.items[i].UUID === uuid) {\n lineItem = data.items[i];\n break;\n }\n }\n\n if (lineItem) {\n $('.dwfrm_giftCertificate_purchase_from-' + uuid + ' span').html(lineItem.senderName);\n $('.dwfrm_giftCertificate_purchase_from-' + uuid).data('value', lineItem.senderName);\n $('.dwfrm_giftCertificate_purchase_recipient-' + uuid + ' span').html(lineItem.recipientName);\n $('.dwfrm_giftCertificate_purchase_recipient-' + uuid).data('value', lineItem.recipientName);\n $('.dwfrm_giftCertificate_purchase_recipientEmail-' + uuid + ' span').html(lineItem.recipientEmail);\n $('.dwfrm_giftCertificate_purchase_recipientEmail-' + uuid).data('value', lineItem.recipientEmail);\n $('.dwfrm_giftCertificate_purchase_message-' + uuid + ' span').html(lineItem.message || '');\n $('.dwfrm_giftCertificate_purchase_message-' + uuid).attr('title', lineItem.message || '');\n $('.dwfrm_giftCertificate_purchase_color-' + uuid + ' span').html(lineItem.giftCard.color || '');\n $('.dwfrm_giftCertificate_purchase_color-' + uuid).data('value', lineItem.giftCard.color || '');\n $('.pricing.item-total-' + uuid).html(lineItem.priceTotal.price);\n $('.pricing.item-total-' + uuid).data('value', lineItem.priceTotal.priceValue + '');\n $('.price.item-total-' + uuid).html(lineItem.priceTotal.price);\n $('.price.item-total-' + uuid).data('value', lineItem.priceTotal.priceValue + '');\n $('.gift-card-image-' + uuid).attr('src', lineItem.giftCard.image);\n $('.gift-card-image-' + uuid).attr('alt', lineItem.giftCard.id + ' ' + lineItem.productName).attr('title', lineItem.giftCard.id + ' ' + lineItem.productName);\n }\n}\n\nfunction checkBalanceFormSubmission() {\n $('body').on('submit', 'form.check-balance', function (e) {\n e.preventDefault();\n\n var form = $(this);\n form.spinner().start();\n\n var button = form.find('.js-checkbalancebutton');\n var url = form.attr('action');\n var queryString = form.serialize() + '&format=ajax';\n button.attr('disabled', true);\n\n //because the error is not an html5 error typically (balance is 0 or does not exist)\n //we must clear the previous error + message manually\n formErrors.clearPreviousErrors(form);\n recaptcha.check(e, {\n url: url,\n method: 'POST',\n dataType: 'json',\n data: queryString,\n success: function (data) {\n if (data.success) {\n form.find('.balancemsg').html(data.balance);\n form.find('.gift-card-balance-image').attr('src', data.image).attr('alt', data.styleId);\n $('#giftCardBalanceModal').modal('show');\n } else {\n form.find('.balancemsg').html('');\n formValidation(form, data);\n if (data.msg) {\n displayMessage(data, button);\n }\n }\n\n $.spinner().stop();\n button.removeAttr('disabled');\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n }\n displayMessage(err, button);\n }\n });\n });\n}\n\nfunction applyGiftCertificateToBasket () {\n $('body').on('click', '.giftcertificate-information .js-applybalancebutton', function (e) {\n e.preventDefault();\n\n var button = $(this);\n button.attr('disabled', true);\n var container = button.parents('.giftcertificate-information');\n var checkoutForm = button.parents('form');\n\n container.spinner().start();\n\n var url = button.data('action');\n\n //because the error is not an html5 error typically (balance is 0 or does not exist)\n //we must clear the previous error + message manually\n formErrors.clearPreviousErrors(container);\n recaptcha.check(e, {\n url: url,\n method: 'POST',\n data: checkoutForm.serialize() + '&format=ajax',\n success: function (data) {\n if (data.success) {\n displayMessage(data, button);\n $('.giftcertificate-information input').val('');\n $('.js-giftcertificatepaymentinstruments').html(data.template);\n\n $('.payment-options-block .applepay-tab-wrapper').addClass('d-none');\n $('.payment-options-block .applepay-content').addClass('d-none');\n\n $('body').trigger('checkout:updateCheckoutViewPaymentInformation', { order: data.order });\n } else {\n if (data.redirectUrl) {\n window.location.href = data.redirectUrl;\n } else {\n container.find('.js-balancemsg').html('');\n formValidation(container, data);\n if (data.msg) {\n displayMessage(data, button);\n }\n }\n }\n\n $.spinner().stop();\n button.removeAttr('disabled');\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n }\n displayMessage(err, button);\n }\n });\n\n })\n}\n\nfunction removeGiftCertificatePaymentInstrument() {\n $('body').on('click', '.js-remove-giftcertificate-pi', function (e) {\n e.preventDefault();\n\n var button = $(this);\n button.attr('disabled', true);\n\n var container = button.parents('.giftcertificate-information');\n container.spinner().start();\n\n var url = button.data('action');\n var giftCertificateCode = button.data('giftcertificatecode');\n $.ajax({\n url: url,\n method: 'POST',\n dataType: 'json',\n data: '&giftCertificateCode=' + giftCertificateCode,\n success: function (data) {\n if (data.success) {\n $('.js-giftcertificatepaymentinstruments').html(data.template);\n\n $('body').trigger('checkout:updateCheckoutViewPaymentInformation', { order: data.order });\n\n var paymentModel = data.order && data.order.billing && data.order.billing.payment;\n var hasGiftCertificates = paymentModel && paymentModel.giftCertificatePaymentInstruments && paymentModel.giftCertificatePaymentInstruments.length > 0\n if (!hasGiftCertificates) {\n $('.payment-options-block .applepay-tab-wrapper').removeClass('d-none');\n $('.payment-options-block .applepay-content').removeClass('d-none');\n }\n }\n\n $.spinner().stop();\n displayMessage(data, button);\n },\n error: function (err) {\n displayMessage(err, button);\n }\n });\n });\n}\n\nmodule.exports = {\n displayMessage: displayMessage,\n giftCertificateFormSubmission: giftCertificateFormSubmission,\n updateGiftCertificateLineItem: updateGiftCertificateLineItem,\n checkBalanceFormSubmission: checkBalanceFormSubmission,\n applyGiftCertificateToBasket: applyGiftCertificateToBasket,\n removeGiftCertificatePaymentInstrument: removeGiftCertificatePaymentInstrument,\n init: function () {\n module.exports.giftCertificateFormSubmission();\n module.exports.checkBalanceFormSubmission();\n module.exports.applyGiftCertificateToBasket();\n module.exports.removeGiftCertificatePaymentInstrument();\n }\n};\n","var main = require('integrations/main');\n\nObject.assign(main.baseFiles, {\n countrySelector: require('org_citizen/components/countrySelector'),\n giftCertificate: require('org_citizen/giftCertificate/giftCertificate').init,\n slider: require('./components/slider').init,\n modal: require('org_citizen/components/modal').init,\n quickView: require('org_citizen/product/quickView'),\n cart: require('org_citizen/cart/cart').init,\n video: require('org_citizen/components/video'),\n backInStockNotification: require('org_citizen/components/backInStockNotification'),\n promoModal: require('org_citizen/components/promoModal'),\n showMoreText: require('org_citizen/components/showMoreText'),\n showOnHover: require('org_citizen/components/showOnHover'),\n menu: require('org_citizen/components/menu'),\n clientSideValidation: require('org_citizen/components/clientSideValidation'),\n base: require('org_citizen/product/base'),\n animations: require('org_citizen/components/animations'),\n referrer: require('org_citizen/cj/referrer'),\n watchCalibers: require('org_citizen/components/watchCalibers'),\n search: require('org_citizen/components/search'),\n header: require('org_citizen/components/header'),\n miniCart: require('org_citizen/components/miniCart').init,\n scroll: require('./utilities/scroll'),\n tabs: require('org_citizen/components/tabs'),\n promoFullWidth: require('org_citizen/components/promoFullWidth'),\n playVideoOnHover: require('org_citizen/components/playVideoOnHover'),\n closableColumn: require('org_citizen/components/closableColumn'),\n giftCard: require('org_citizen/components/giftCard'),\n showDownDownLink: require('org_citizen/components/showDownDownLink'),\n collapsibleItem: require('org_citizen/components/collapsibleItem'),\n floatLabels: require('org_citizen/components/floatLabels'),\n inputMask: require('org_citizen/components/inputMask'),\n toggleElementHeight: require('org_citizen/components/toggleElementHeight'),\n setupProductMarketingVideoModals: require('org_citizen/components/video/videoHelpers').setupProductMarketingVideoModals,\n einsteinRecs: require('./components/einsteinRecs').init\n});\n\nmodule.exports = main;\n","'use strict';\n\nvar base = require('integrations/product/base');\nvar scrollToElement = require('./scrollToElement');\nvar flagshipModal = require('./flagshipModal');\n\nmodule.exports = Object.assign(base, {\n optionSelect: () => {\n $('body').on('change', '.product-options .options-select', (e) => {\n e.preventDefault();\n const $currentOptionsSelect = $(e.currentTarget);\n const $selectedOption = $currentOptionsSelect.find(':selected');\n const $optionSelects = $('.product-options .options-select').not($currentOptionsSelect);\n const $optionsToSelect = $optionSelects.find(`option[data-value-id=\"${$selectedOption.data('value-id')}\"`);\n\n $optionsToSelect.prop('selected', true);\n });\n },\n selectAttribute: () => {\n $(document).on('change', 'select[class*=\"select-\"]', function (e) {\n e.preventDefault();\n\n var $productContainer = $(this).closest('.set-item');\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.product-detail');\n }\n base.methods.attributeSelect(e.currentTarget.value, $productContainer);\n });\n },\n handleApplePayPrepareBasketEvent: () => {\n $('body').on('applePayPrepareBasket', () => {\n const $bandSizeOptionContainer = $('[data-option-id=\"bandSize\"]');\n const $applePayBtn = $('.dw-apple-pay-button');\n\n if ($bandSizeOptionContainer.length && $applePayBtn.length) {\n const productId = $applePayBtn.attr('sku');\n const optionId = $bandSizeOptionContainer.find('option:selected').data('value-id');\n\n $.ajax({\n url: window.CachedData.urls.applePayUpdateBasketUrl,\n type: 'POST',\n dataType: 'json',\n data: {\n productId: productId,\n optionId: optionId\n }\n });\n }\n });\n },\n addToCart: function () {\n var scope = this;\n\n // if qty stepper input has focus, we need to blur it so product data can update before button click\n $(document).on('mouseenter', 'button.add-to-cart, button.add-to-cart-global', function (event) {\n var $button = $(event.target);\n var $container = $button.closest('.product-detail');\n if (!$container.length) {\n $container = $button.closest('.quick-view-dialog');\n }\n var $qtyStepperInput = $container.find('.quantity-stepper input');\n\n if ($qtyStepperInput.length && $qtyStepperInput.is(':focus')) {\n $qtyStepperInput.blur();\n }\n });\n\n $(document).on('click', 'button.add-to-cart, button.add-to-cart-global', function (event) {\n var addToCartUrl;\n var pid;\n var pidsObj;\n var setPids;\n var quantity;\n\n // validate bandSize\n var ctaContainer = event.target.closest('.add-to-cart-container');\n\n if (ctaContainer) {\n var bandSize = ctaContainer.querySelector('[data-option-id=bandSize]');\n if (bandSize) {\n var option = bandSize.querySelector('.options-select');\n if (option.value === '') {\n option.classList.add('is-invalid');\n $.spinner().stop();\n return false;\n }\n }\n }\n // end validate bandSize\n\n $('body').trigger('product:beforeAddToCart', this);\n\n if ($('.set-items').length && $(this).hasClass('add-to-cart-global')) {\n setPids = [];\n\n var $products = $(this).closest('.product-detail').find('.product-set-item-detail');\n if (!$products.length) {\n if ($(this).closest('.quick-view-dialog').length) {\n $products = $(this).closest('.quick-view-dialog').find('.product-set-item-detail');\n } else {\n $products = $('.product-detail'); // pagedesigner component 'Add all to cart btn' won't have .product-set-item-detail classes\n }\n }\n\n $products.each(function () {\n if (!$(this).hasClass('product-set-detail')) {\n setPids.push({\n pid: $(this).find('.product-id').text(),\n qty: $(this).find('.quantity-select').val(),\n options: scope.methods.getOptions($(this))\n });\n }\n });\n pidsObj = JSON.stringify(setPids); \n }\n\n pid = scope.methods.getPidValue($(this));\n\n quantity = $(this).hasClass('single-variant-quick-add-to-cart') ? 1 : scope.methods.getQuantitySelected($(this));\n\n var $productContainer = $(this).closest('.product-detail');\n if (!$productContainer.length) {\n if ($(this).hasClass('single-variant-quick-add-to-cart')) {\n addToCartUrl = $(this).data('url');\n } else {\n $productContainer = $(this).closest('.quick-view-dialog').find('.product-detail');\n var $productModalbody = $(this).closest('.modal-content');\n addToCartUrl = scope.methods.getAddToCartUrl($productModalbody);\n }\n } else {\n addToCartUrl = scope.methods.getAddToCartUrl($productContainer);\n }\n\n var form = {\n pid: pid,\n pidsObj: pidsObj,\n childProducts: scope.methods.getChildProducts(),\n quantity: quantity,\n options: scope.methods.getOptions($productContainer)\n };\n\n $(this).trigger('updateAddToCartFormData', form);\n if (addToCartUrl) {\n $.ajax({\n url: addToCartUrl,\n method: 'POST',\n data: form,\n success: function (data) {\n scope.methods.handlePostCartAdd(data);\n $('body').trigger('product:afterAddToCart', data);\n $('body').trigger('product:afterAddToCartQuickview', data); //cart page quickview only\n $.spinner().stop();\n scope.methods.miniCartReportingUrl(data.reportingURL);\n },\n error: function () {\n $.spinner().stop();\n }\n });\n }\n });\n },\n scrollToElement: scrollToElement.init(),\n flagshipModalInit: flagshipModal.init()\n});\n","'use strict';\n\nvar recaptcha = require('core/components/recaptcha');\n\nfunction init() {\n const form = document.querySelector('.flagship-form');\n\n if (form) {\n const formInputs = form.querySelectorAll('.form-control');\n const flagshipError = form.querySelector('.flagship-error');\n\n $(form).on('submit', function(e) {\n e.preventDefault();\n\n const form = e.target;\n const $modalContent = $(form).closest('.modal-content');\n \n recaptcha.check(e, {\n url: form.action,\n data : $(form).serialize(),\n beforeSend: () => $modalContent.spinner().start(),\n success: function(data) {\n if (data.success) {\n const flagshipSuccess = document.querySelector('.flagship-success');\n\n form.classList.add('d-none');\n\n flagshipSuccess.classList.remove('d-none');\n flagshipSuccess.classList.add('show-flagship-success');\n } else {\n if ('error' in data) {\n flagshipError.innerHTML = data.error;\n flagshipError.classList.remove('d-none');\n }\n }\n },\n error: function(e) {\n console.log('error:', e);\n },\n complete: function(e) {\n $modalContent.spinner().stop();\n }\n }); \n });\n \n [].forEach.call(formInputs, function(formInput) {\n // if element is valid after updates, and input was previously invalid, remove 'is-invalid' test\n formInput.addEventListener('blur', function(e) {\n const target = e.target;\n\n if (target.classList.contains('is-invalid') && target.checkValidity()) {\n target.classList.remove('is-invalid'); \n } \n });\n });\n }\n}\n\nmodule.exports.init = init;","'use strict';\n\nvar focusHelper = require('base/components/focus');\nvar modal = require('org_citizen/components/modal');\nconst { updateAddAllToCart } = require('core/product/detail');\n\n/**\n * @typedef {Object} QuickViewHtml\n * @property {string} body - Main Quick View body\n * @property {string} footer - Quick View footer content\n */\n\n/**\n * replaces the content in the modal window on for the selected product variation.\n * @param {string} selectedValueUrl - url to be used to retrieve a new product model\n */\nfunction fillModalElement(selectedValueUrl) {\n var $modal = $('#quickViewModal');\n $modal.find('.modal-body').spinner().start();\n $.ajax({\n url: selectedValueUrl,\n method: 'GET',\n dataType: 'json',\n success: function(data) {\n var parsedHtml = modal.parseHtml(data.renderedTemplate);\n\n $modal.find('.modal-body').empty();\n $modal.find('.modal-body').html(parsedHtml.body);\n $modal.find('.modal-footer').html(parsedHtml.footer);\n $modal.find('.full-pdp-link').text(data.quickViewFullDetailMsg);\n $modal.find('.full-pdp-link').attr('href', data.productUrl);\n $modal.find('.modal-header .close .sr-only').text(data.closeButtonText);\n $modal.find('.enter-message').text(data.enterDialogMessage);\n $modal.find('#quickViewModal').modal('show');\n\n if (data.dialogTitle) {\n $modal.find('.modal-header').prepend('
' + data.dialogTitle + '
')\n }\n\n if (data.product.productType === 'set') {\n updateAddAllToCart();\n }\n\n $('body').trigger('modal:loaded', $('#quickViewModal')); // sending custom event for scroll body sizing\n $('body').trigger('quickview:ready', $('#quickViewModal')); // sending custom event for slider init\n $('body').trigger('tooltip:init');\n\n $.spinner().stop();\n },\n error: function() {\n $.spinner().stop();\n }\n });\n}\n\nmodule.exports = {\n showQuickview: function() {\n $('body').on('click', '.quickview', function (e) {\n e.preventDefault();\n var selectedValueUrl = $(this).closest('a.quickview').attr('href');\n $(e.target).trigger('quickview:show');\n modal.getModalHtmlElement('quickViewModal', 'quick-view-dialog');\n fillModalElement(selectedValueUrl);\n });\n },\n focusQuickview: function() {\n $('body').on('shown.bs.modal', '#quickViewModal', function() {\n $('#quickViewModal').siblings().attr('aria-hidden', 'false');\n $('#quickViewModal .close').focus();\n });\n },\n trapQuickviewFocus: function() {\n $('body').on('keydown', '#quickViewModal', function (e) {\n var focusParams = {\n event: e,\n containerSelector: '#quickViewModal',\n firstElementSelector: '.full-pdp-link',\n lastElementSelector: '.qv-product-edit-add',\n nextToLastElementSelector: '.modal-footer .quantity-select'\n };\n focusHelper.setTabNextFocus(focusParams);\n });\n },\n showSpinner: function() {\n $('body').on('product:beforeAddToCart', function (e, data) {\n $(data).closest('.modal-content').spinner().start();\n });\n },\n hideDialog: function() {\n $('body').on('product:afterAddToCart', function () {\n $('#quickViewModal').modal('hide');\n $('#quickViewModal').siblings().attr('aria-hidden', 'true');\n });\n },\n beforeUpdateAttribute: function() {\n $('body').on('product:beforeAttributeSelect', function () {\n $('.modal.show .modal-content').spinner().start();\n });\n }\n};\n","'use strict';\n\nvar SiteConstants = require('constants/SiteConstants');\n\n/**\n * \n * @param {*} targetEl - Element to calculate window scroll distance \n * @returns \n */\nfunction getTotalScroll(targetEl) {\n// calculate scrolls\n var targetElY = targetEl.getBoundingClientRect().y,\n isHeaderFixed = $('.fixed-header').length > 0,\n fixedHeaderHeight = isHeaderFixed ? $('.fixed-header').get(0).getBoundingClientRect().height : 0,\n isEnhancedHeaderScrolledUp = $('.scroll-direction-up .fixed-header-enhanced').length > 0,\n $stickyBar = $('.addtocart-sticky-bar'),\n stickyBarHeight = isHeaderFixed ? document.querySelector('#header-nav').getBoundingClientRect().height : 0,\n fixedAddToCartHeight = $stickyBar.length > 0 ? $stickyBar.get(0).getBoundingClientRect().height : 0,\n offset = ($stickyBar.length > 0 && $stickyBar.get(0).getBoundingClientRect().y <= stickyBarHeight) ? fixedHeaderHeight + fixedAddToCartHeight : fixedHeaderHeight,\n totalScroll;\n \n offset += isEnhancedHeaderScrolledUp && window.innerWidth > SiteConstants.BreakpointSizes.md ? fixedAddToCartHeight : 0;\n totalScroll = targetElY + window.scrollY - offset;\n\n return totalScroll;\n}\n\n// helperfunction for calculating Header height\nfunction getScrollToOffset(reviewsContainer, closestCollapsed) {\n var headerOffset = $('header.fixed-header').length > 0 ? $('#header-nav').outerHeight() : 0,\n miniCartOffset = $('#addtocart-sticky-bar').length > 0 ? $('#addtocart-sticky-bar').outerHeight() : 0,\n scrollToContainer = closestCollapsed ? closestCollapsed : reviewsContainer,\n scrollOffset = parseInt($(scrollToContainer).offset().top - headerOffset - miniCartOffset, 10);\n\n return scrollOffset;\n}\n\nvar scrollToLink = function scrollToLink(e) {\n e.preventDefault();\n // calculate scrolls\n var targetEl = document.querySelector($(this).attr('data-scroll-to')),\n totalScroll = getTotalScroll(targetEl);\n\n // active class toggles\n $('.internal-links-nav-link.active').removeClass('active');\n $(this).closest('.internal-links-nav-link').addClass('active');\n \n // animate scroll to element\n $(\"html, body\").animate({\n scrollTop: totalScroll,\n duration: 500\n });\n\n // test if target is a 'PDP accordion', if so, open it\n var pdpCollapsibleContent = targetEl.querySelector('.pdp-collapsible-content:not(.active)');\n if (pdpCollapsibleContent) {\n var pdpCardTitle = targetEl.querySelector('.card-title');\n if (pdpCardTitle !== null) {\n $(pdpCardTitle).trigger('click');\n }\n } \n}\n\nfunction executeReviewScroll() {\n var reviewsContainer = document.querySelector('[data-reviews-container]'),\n closestCollapsed,\n scrollOffset;\n\n if (reviewsContainer) {\n closestCollapsed = reviewsContainer.closest('.collapsible-content-group');\n scrollOffset = getScrollToOffset(reviewsContainer, closestCollapsed); \n\n // if collapsed is not visible, manually expand it\n if (closestCollapsed) {\n if (!$(closestCollapsed.querySelector('.content')).is(':visible')) {\n $(closestCollapsed).addClass('active').find('.card-title[aria-expanded=\"false\"]').attr('aria-expanded', 'true');\n }\n }\n\n // active class toggles\n $('.internal-links-nav-link.active').removeClass('active');\n // only add active to pdp-product-reviews\n $('.internal-links-nav-link[data-scroll-to=\"#pdp-product-reviews\"]').addClass('active');\n\n $('html,body').animate({\n scrollTop: scrollOffset\n });\n }\n}\n\nfunction init() {\n var $scrollToElements = $('[data-scroll-to]');\n\n $.each($scrollToElements, function() {\n $(this).on('click', scrollToLink);\n });\n\n $('body').on('click', '.reviews-star-average-rating .rating-star, .scroll-to-review', executeReviewScroll);\n\n document.addEventListener('reviewSortUpdate', executeReviewScroll);\n}\n\nmodule.exports.init = init;\nmodule.exports.getTotalScroll = getTotalScroll;","'use strict';\n\nconst header = require(\"../components/header\");\n\n// Check if target is back btn, or if target is child of back btn\nfunction isTargetBackBtn(target) {\n return target.classList.contains('active-category-back-btn') || target.closest('.active-category-back-btn');\n}\n \n// Function to get the depth of a
list and add data-menu-level to each
with nested
\nfunction getListDepthAndSetMenuLevel(ul, level = 1) {\n // Start with the current level as the initial max depth\n var maxDepth = level;\n\n // Loop through each
in the
\n ul.querySelectorAll(':scope > li').forEach((li) => {\n // Check if
has a nested
\n var nestedUl = li.querySelector(':scope > ul');\n \n if (nestedUl) {\n // Set the data attribute for the current level on this
\n li.setAttribute('data-menu-level', level);\n // Recursively get the depth of the nested
and add 1 for the next level\n var depth = getListDepthAndSetMenuLevel(nestedUl, level + 1);\n // Update maxDepth if the nested depth is greater\n maxDepth = Math.max(maxDepth, depth);\n }\n });\n\n return maxDepth;\n}\n\nfunction updateLinkHref(activeCategoryLabel, navLink) {\n if (navLink && !navLink.hasAttribute('data-disable-view-all')) {\n activeCategoryLabel.href = navLink.href;\n activeCategoryLabel.classList.add('active-category-href');\n } else {\n activeCategoryLabel.href = '#';\n activeCategoryLabel.classList.remove('active-category-href');\n }\n}\n\n// dispatches custom menu even, adds 'menuLevel', 'oldLevel', and trigger to event.datail data\nfunction dispatchCustomMenuUpdateEvent(trigger) { \n var localNavbar = trigger.closest('.navbar'),\n localMobileNav = localNavbar ? localNavbar.querySelector('[data-current-active-level]') : null;\n\n if (localMobileNav) {\n var oldLevel = parseInt(localMobileNav.getAttribute('data-current-active-level'), 10),\n menuLevel = trigger.hasAttribute('data-menu-level') ? trigger.getAttribute('data-menu-level') : oldLevel - 1,\n menuUpdateEvent = new CustomEvent('menuLevelUpdate', {\n detail: {\n menuLevel: menuLevel,\n oldLevel: oldLevel,\n trigger: trigger\n }\n });\n // menuLevel should never be less than zero\n if (menuLevel >= 0) {\n document.dispatchEvent(menuUpdateEvent);\n }\n }\n}\n\n// resets menu to '0', on main menu close, menu needs to be a root\nfunction clearMenuLevelToZero(mobileMenuContainer) {\n if (mobileMenuContainer) {\n var localActiveCategoryContainer = mobileMenuContainer.querySelector('[data-current-active-category]'),\n localMobileNav = mobileMenuContainer.querySelector('[data-current-active-level]');\n\n // when mobileMenuContainer ends transition, reset menu level to 0\n mobileMenuContainer.addEventListener('transitionend', (event) => {\n if (event.propertyName === 'transform' || event.propertyName === 'opacity') {\n if (localActiveCategoryContainer) {\n localActiveCategoryContainer.setAttribute('data-current-active-category', 0)\n }\n if (localMobileNav) {\n localMobileNav.setAttribute('data-current-active-level', 0)\n localMobileNav.style.transform = 'translateX(0%)';\n }\n }\n }, { once: true });\n }\n}\n\n// Listens for the custom event and updates main menu per users interaction\nvar menuLevelUpdateListener = function menuLevelUpdateListener(event) {\n var menuLevel = 'menuLevel' in event.detail ? event.detail.menuLevel : null,\n isBackBtn = isTargetBackBtn(event.detail.trigger),\n localNavbar = event.detail.trigger.closest('.navbar'),\n localMobileNav = localNavbar.querySelector('[data-current-active-level]'),\n localActiveCategoryContainer = localNavbar.querySelector('[data-current-active-category]'),\n localActiveCategoryLabel = localActiveCategoryContainer ? localActiveCategoryContainer.querySelector('.active-category') : null,\n isBurger = event.detail.trigger.closest('.burger-menu') ? true : false;\n \n // set current active nav level on mobile menu and activeCategoryLabel\n if (localMobileNav) {\n localMobileNav.setAttribute('data-current-active-level', menuLevel);\n }\n\n if (localActiveCategoryContainer) {\n localActiveCategoryContainer.setAttribute('data-current-active-category', menuLevel);\n }\n \n if (window.isMobile() || isBurger) {\n if (menuLevel !== null) {\n\n // animate mobile nav\n localMobileNav.style.transform = 'translateX(' + -100 * menuLevel + '%)';\n \n // menu was clicked\n if (event.detail.trigger.hasAttribute('data-menu-level')) {\n var triggerLink = event.detail.trigger.querySelector('[data-toggle=\"dropdown\"]'),\n navLink = event.detail.trigger.querySelector('.nav-link') || event.detail.trigger.querySelector('.dropdown-link'),\n siblings = Array.from(event.detail.trigger.parentNode.children).filter(element => element.classList.contains('active') && element !== event.detail.trigger);\n // Get all siblings of the active element and remove active class\n [].forEach.call(siblings, function(sib) {\n sib.classList.remove('active');\n });\n \n // add active class\n event.detail.trigger.classList.add('active');\n // if navLink, get text content to update current-active-categroy-label\n if (navLink && localActiveCategoryLabel) {\n // update active category label\n localActiveCategoryLabel.textContent = navLink.textContent;\n }\n\n if (localActiveCategoryLabel) {\n // check for disableViewAll on trigger link, if not there, add href to active category label\n updateLinkHref(localActiveCategoryLabel, triggerLink);\n }\n } else if (event.detail.trigger.classList.contains('active-category') || isBackBtn) {\n // active category (back button clicked) // get active parent li\n var activeEl = localMobileNav.querySelector(`[data-menu-level=\"${event.detail.oldLevel}\"].active`),\n newActiveEl = localMobileNav.querySelector(`[data-menu-level=\"${event.detail.menuLevel}\"].active`);\n\n if (activeEl) {\n // update active category label\n if (menuLevel === 0) {\n if (localActiveCategoryLabel) {\n localActiveCategoryLabel.textContent = '';\n }\n } else {\n if (newActiveEl) {\n var navLink = newActiveEl.querySelector('.nav-link');\n if (navLink) {\n if (localActiveCategoryLabel) {\n localActiveCategoryLabel.textContent = navLink.textContent;\n updateLinkHref(localActiveCategoryLabel, navLink);\n }\n }\n }\n }\n \n // dont remove active class on parent element until transition end is complete, only fires once per {once: true} param\n localMobileNav.addEventListener('transitionend', (event) => {\n if (event.propertyName === 'transform') {\n activeEl.classList.remove('active');\n }\n }, { once: true });\n }\n }\n }\n }\n}\n\n// set menu levels on any uls deeply nested inside .menu-categories ul, \nfunction setupMenuLevels() {\n var lev1 = document.querySelectorAll('[data-menu-level=\"1\"] > ul'),\n // lev2 are nested inside megamenu templates\n lev2 = document.querySelectorAll('[data-menu-level=\"2\"] > ul');\n\n [].forEach.call(lev1, function(ul) {\n getListDepthAndSetMenuLevel(ul, 2);\n });\n\n [].forEach.call(lev2, function(ul) {\n getListDepthAndSetMenuLevel(ul, 3);\n });\n}\n\n// gets logo styles from .logo-home in the header, then updates [data-mobile-nav-logo] with appropriate styles\n// will work across all sites applied to\nfunction addLogoToMenu() {\n var logoContainers = document.querySelectorAll('[data-mobile-nav-logo]'),\n logoHome = document.querySelector('.logo-home');\n\n [].forEach.call(logoContainers, function(logoContainer) {\n var logoHomeStyles = window.getComputedStyle(logoHome),\n logoBackground = logoHomeStyles.getPropertyValue('background'),\n logoWidth = parseInt(logoHomeStyles.getPropertyValue('width'), 10),\n logoHeight = parseInt(logoHomeStyles.getPropertyValue('height'), 10),\n aspRatio = logoWidth / logoHeight,\n newLogoWidth = parseInt(aspRatio * 46, 10) + 'px';\n\n logoContainer.style.background = logoBackground;\n logoContainer.style.width = newLogoWidth;\n // todo - where does this height style come from?\n logoContainer.style.height = '46px';\n });\n \n}\n\n// set BurgerMenuTop Style Value to enure it matches with any\n// header scenario (fixed, fixed-enhanced, static)\nfunction setBurgerMenuTop() {\n var burgerMenu = document.querySelector('.burger-menu-citizen'),\n headerNav = document.querySelector('#header-nav');\n\n if (burgerMenu && headerNav) {\n if (headerNav.getBoundingClientRect().top >= 0) {\n burgerMenu.style.top = headerNav.getBoundingClientRect().top + 'px';\n }\n }\n}\n\nfunction init() {\n var mobileNavs = document.querySelectorAll('[data-current-active-level]');\n\n if (mobileNavs.length > 0) {\n // set up data-menu-level atts\n setupMenuLevels();\n\n // add logo to mobile menu\n addLogoToMenu();\n\n // menuLevelUpdate is custom event emited when mobile nav is interacted with\n document.addEventListener('menuLevelUpdate', menuLevelUpdateListener);\n\n [].forEach.call(mobileNavs, function(mobileNav) {\n var localNavbar = mobileNav.closest('.navbar');\n\n if (localNavbar) {\n var localActiveCategoryContainer = localNavbar.querySelector('[data-current-active-category]'),\n localActiveCategoryLabel = localNavbar.querySelector('.active-category');\n\n if (localNavbar) {\n // active category label event listener\n localActiveCategoryContainer.addEventListener('click', function(e) {\n var target = e.target,\n isBackBtn = isTargetBackBtn(e.target);\n\n // only dispatch event if active cat does not have an href, or if the back btn was clicked\n if (!localActiveCategoryLabel.classList.contains('active-category-href') || isBackBtn) {\n if (isBackBtn) {\n dispatchCustomMenuUpdateEvent(target);\n } else {\n dispatchCustomMenuUpdateEvent(localActiveCategoryLabel);\n }\n e.preventDefault();\n }\n });\n }\n }\n });\n }\n}\n\nmodule.exports = {\n init: init,\n dispatchCustomMenuUpdateEvent: dispatchCustomMenuUpdateEvent,\n clearMenuLevelToZero: clearMenuLevelToZero,\n setBurgerMenuTop: setBurgerMenuTop\n}\n","'use strict';\n\nvar debounce = require('lodash/debounce');\n\n// Polyfill for creating CustomEvents on IE11\n\n// code pulled from:\n// https://github.com/d4tocchini/customevent-polyfill\n// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#Polyfill\n\n(function () {\n if (typeof window === 'undefined') {\n return;\n }\n\n try {\n var ce = new window.CustomEvent('test', { cancelable: true });\n ce.preventDefault();\n if (ce.defaultPrevented !== true) {\n // IE has problems with .preventDefault() on custom events\n // http://stackoverflow.com/questions/23349191\n throw new Error('Could not prevent default');\n }\n } catch (e) {\n var CustomEvent = function (event, params) {\n var evt, origPrevent;\n params = params || {};\n params.bubbles = !!params.bubbles;\n params.cancelable = !!params.cancelable;\n\n evt = document.createEvent('CustomEvent');\n evt.initCustomEvent(\n event,\n params.bubbles,\n params.cancelable,\n params.detail\n );\n origPrevent = evt.preventDefault;\n evt.preventDefault = function () {\n origPrevent.call(this);\n try {\n Object.defineProperty(this, 'defaultPrevented', {\n get: function () {\n return true;\n }\n });\n } catch (e) {\n this.defaultPrevented = true;\n }\n };\n return evt;\n };\n\n CustomEvent.prototype = window.Event.prototype;\n window.CustomEvent = CustomEvent; // expose definition to window\n }\n})();\n\nclass ScrollDirection {\n constructor() {\n this.$html = $('html'); // Element to add CSS classnames\n this.window = window; // Element to listen to scroll events\n this.direction = null; // Current scroll direction\n this.headerHeight = null; // Track header's height\n this.headerNavHeight = null; // Track sticky portion of header's height\n this.headerNavOffsetTop = 0; // Track header's distance from top of page\n this.isScrolling = false; // Page is scrolling\n this.last = 0; // Last scroll position\n this.stickyHeader = false; // Show CSS header\n this.timeout = null; // Timeout event for scroll handler\n this.threshold = 10; // How far to allow scroll before triggering scroll events\n\n this.init(); // Initialize scroll handlers\n }\n\n init() {\n // Check if we can use Passive Event Listening\n let passiveIfSupported = false;\n try {\n window.addEventListener('test', null,\n Object.defineProperty({}, 'passive', {\n get: function () {\n passiveIfSupported = {\n passive: true\n };\n }\n })\n );\n } catch (err) { }\n\n // Add Event Listeners\n this.listener = this.detectDirection.bind(this);\n this.resize = this.detectResize.bind(this);\n\n this.window.addEventListener('scroll', this.listener, passiveIfSupported);\n this.window.addEventListener('resize', debounce(this.resize, 200), passiveIfSupported);\n // Do initial Size Detection\n this.detectResize();\n }\n\n detectDirection() {\n // Get Scroll Position\n const scrolled = this.window.scrollY || this.window.scrollTop || this.window.pageYOffset;\n\n // Check if New Scroll Position Breaks Threshold\n if (Math.abs(scrolled - this.last) >= this.threshold) {\n const currentDirection = (scrolled > this.last) ? 'down' : 'up';\n\n // Check if Scrolling\n if (scrolled !== this.last && !this.isScrolling) {\n this.onScrollStart();\n }\n\n // Check if Header exists and if we should trigger Sticky Header\n if (this.headerHeight) {\n if (scrolled > this.headerHeight && !this.stickyHeader && this.direction === 'up') {\n \n this.stickyHeader = true;\n this.$html.addClass('sticky-header');\n // Fire Custom Event `stickyHeaderChange`\n this.window.dispatchEvent(new CustomEvent('stickyHeaderChange', {\n detail: {\n direction: this.direction,\n last: this.last,\n stickyHeader: this.stickyHeader\n }\n }));\n // add conditional to check if html has 'lock-scroll' if so, dont fire a sticyChangeEvent as a modal, menu, or fixed popup is displayed\n } else if (scrolled <= 10 && this.stickyHeader && !$('html').hasClass('lock-scroll')) {\n \n this.stickyHeader = false;\n this.$html.removeClass('sticky-header');\n // Fire Custom Event `stickyHeaderChange`\n this.window.dispatchEvent(new CustomEvent('stickyHeaderChange', {\n detail: {\n direction: this.direction,\n last: this.last,\n stickyHeader: this.stickyHeader\n }\n }));\n }\n }\n\n // Detect Direction Change\n if (this.direction !== currentDirection) {\n // add conditional to check if html has 'burger-menu-closing' if so, dont fire a sticyChangeEvent as a menu is animating out\n if (!$('html').hasClass('lock-scroll') && !$('body').hasClass('burger-menu-closing')) {\n this.onDirectionChange(currentDirection);\n }\n }\n\n // Update Last Scroll Position\n this.last = scrolled;\n\n // Fire Custom Event `scrollUpdate`\n this.window.dispatchEvent(new CustomEvent('scrollUpdate', {\n detail: {\n direction: this.direction,\n last: this.last,\n stickyHeader: this.stickyHeader\n }\n }));\n }\n\n // Clear Last Timeout before Recreating it\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n\n // Fire Stop Scroll Event shortly after Scrolling Stops\n this.timeout = setTimeout(this.onScrollStop.bind(this), 500);\n }\n\n detectResize () {\n // Get Header Height - will only exist if headerFixed preference is set to 'Enhanced'\n var $header = $('#top-header'),\n $promoBar = $header.find('#global-ticker'),\n $headerNav = $header.find('.header-nav');\n\n this.headerHeight = $header.outerHeight();\n this.headerNavHeight = $headerNav.outerHeight();\n this.promoBarHeight = $promoBar.length > 0 ? $promoBar.outerHeight() : 0;\n this.headerHeight = this.headerNavHeight + this.headerHeight;\n this.$html.css('--header-height', this.headerNavHeight + 'px');\n this.$html.css('--promo-bar-height', this.promoBarHeight + 'px');\n \n if ($header.hasClass('fixed-header-enhanced')) {\n // change to position static before getting offset\n $headerNav.css('position', 'static');\n this.headerNavOffsetTop = $headerNav.offset().top;\n $headerNav.css('position', '');\n }\n }\n\n onDirectionChange(direction) {\n this.direction = direction;\n\n // Update Scroll Classes\n this.$html.addClass('scroll-direction-' + this.direction);\n this.$html.removeClass('scroll-direction-' + (\n this.direction == 'down' ? 'up' : 'down'\n ));\n\n // Fire Custom Event `scrollDirectionChange`\n this.window.dispatchEvent(new CustomEvent('scrollDirectionChange', {\n detail: {\n direction: this.direction,\n last: this.last,\n stickyHeader: this.stickyHeader\n }\n }));\n }\n\n onScrollStart() {\n this.$html.addClass('is-scrolling');\n this.isScrolling = true;\n\n // Fire Custom Event `scrollStart`\n this.window.dispatchEvent(new CustomEvent('scrollStart', {\n detail: {\n direction: this.direction,\n last: this.last,\n stickyHeader: this.stickyHeader\n }\n }));\n }\n\n onScrollStop() {\n this.$html.removeClass('is-scrolling');\n this.isScrolling = false;\n this.timeout = null;\n\n // Fire Custom Event `scrollStop`\n this.window.dispatchEvent(new CustomEvent('scrollStop', {\n detail: {\n direction: this.direction,\n last: this.last,\n stickyHeader: this.stickyHeader\n }\n }));\n }\n}\n\nmodule.exports = () => {\n $(document).ready(() => {\n new ScrollDirection();\n });\n};\n","'use strict';\n\n// helper functions for main nav search Ui component\nfunction toggleAriaAtts(siteSearch, status) {\n var ariaHiddens = siteSearch.querySelectorAll('[aria-hidden]');\n\n [].forEach.call(ariaHiddens, function(ariaEl) {\n if (ariaEl.closest('.site-search-trigger-buttons')) {\n // top level search btn is always visible\n ariaEl.setAttribute('aria-hidden', 'false');\n } else {\n ariaEl.setAttribute('aria-hidden', status);\n }\n });\n}\n\nfunction closeSearch(siteSearch) {\n var searchField = siteSearch.querySelector('.search-field'),\n siteSearchContent = siteSearch.querySelector('.site-search-content');\n\n // unfocus search-field before closing\n searchField.blur();\n toggleAriaAtts(siteSearch, 'true');\n siteSearch.classList.remove('expanded');\n\n if (siteSearchContent) {\n siteSearch.addEventListener('transitionend', (event) => {\n if (event.propertyName === 'opacity') {\n siteSearchContent.style.display = 'none';\n }\n }, { once: true });\n }\n}\n\nfunction openSearch(siteSearch) {\n var searchField = siteSearch.querySelector('.search-field'),\n siteSearchContent = siteSearch.querySelector('.site-search-content');\n\n if (siteSearchContent) {\n siteSearchContent.style.display = 'block';\n }\n \n siteSearch.classList.add('expanded');\n toggleAriaAtts(siteSearch, 'false');\n searchField.focus();\n}\n\n// if site search is expanded and user click away, close search\n// status is either 'open' or 'close'\nfunction toggleSiteSearchUi(status, event) {\n var siteSearch;\n if (status === 'open') {\n if (event) {\n siteSearch = event.target.classList.contains('.site-search') ? event.target : event.target.closest('.site-search');\n if (siteSearch) {\n openSearch(siteSearch);\n }\n }\n } else if (status === 'close') {\n siteSearch = document.querySelector('.site-search.expanded');\n if (siteSearch) {\n closeSearch(siteSearch);\n }\n }\n}\n\nfunction closeDesktopSearch() {\n var siteSearchExpanded = document.querySelector('.header-column-3 .site-search.expanded');\n\n if (siteSearchExpanded) {\n closeSearch(siteSearchExpanded);\n }\n}\n\nfunction closeMainNavSearchUi(e) {\n var siteSearchExpanded = document.querySelector('.site-search.expanded');\n \n if (siteSearchExpanded) {\n var targetInSearch = e.target.classList.contains('.expanded') || e.target.closest('.expanded');\n if (!targetInSearch) {\n closeSearch(siteSearchExpanded);\n }\n }\n}\n\nmodule.exports = {\n closeMainNavSearchUi: closeMainNavSearchUi,\n toggleSiteSearchUi: toggleSiteSearchUi,\n closeDesktopSearch: closeDesktopSearch\n}","/**\n * sliderHelpers\n * This code ensures that if a product tile is present in a slider,\n * then all of the slides height are re-adjusted to that of the talles product tile\n */\n\nvar debounce = require('lodash/debounce');\n\nfunction getMaxSlideHeight($productTiles) {\n var maxHeight = 0;\n\n $productTiles.each(function() {\n var thisH = $(this).height();\n\n if (thisH > maxHeight) {\n maxHeight = thisH;\n }\n });\n\n return maxHeight;\n}\n\nfunction setSliderHeight($slides, action, maxHeight) {\n if (action === 'reset') {\n $($slides.parent()).removeClass('product-tile-slider').height('auto');\n } else if (action === 'set') {\n $($slides.parent()).addClass('product-tile-slider').height(maxHeight);\n }\n}\n\nfunction equalizeSlideHeights(slider) {\n var $productTiles = $(slider).find('.product');\n var $slides = $(slider).find('.slide');\n var maxHeight = 0;\n\n setSliderHeight($slides, 'reset', null);\n maxHeight = getMaxSlideHeight($productTiles);\n \n if (maxHeight !== 0) {\n setSliderHeight($slides, 'set', maxHeight);\n }\n}\n\nfunction initProductSlideEqualizeHeights() {\n $('body').on('slider:init.sliderEvents', function (e, sliderContainer) {\n var productTileSlider = $(sliderContainer).find('.slider');\n\n if ($(productTileSlider).find('.product').length > 0) {\n productTileSlider.imagesLoaded().done(() => {\n equalizeSlideHeights(productTileSlider);\n\n window.addEventListener('resize', debounce(function () {\n equalizeSlideHeights(productTileSlider);\n }, 500));\n });\n }\n });\n}\n\n/**\n * moveTickerBannerModals\n * @param {*} slider - jQuery Obj to search for modal elements\n * \n * Modals opened from the header are clipped due to z-index and overflow styles of header\n * they must be moved outside the header in order to render unclipped\n */\nfunction moveTickerBannerModals(slider) {\n var $modals = $(slider).find('.modal');\n var $body = $('body');\n $modals.each(function() {\n $(this).appendTo($body);\n });\n}\n\nmodule.exports = {\n initProductSlideEqualizeHeights: initProductSlideEqualizeHeights,\n moveTickerBannerModals: moveTickerBannerModals \n}\n","'use strict';\n\nfunction removeLastWord(str) {\n const trimmedString = str.trimRight();\n const indexOfLastWord = trimmedString.lastIndexOf(' ');\n return str.substring(0, indexOfLastWord);\n}\n\nmodule.exports = {\n removeLastWord: removeLastWord\n}\n","'use strict';\n\nconst SiteConstants = require('constants/SiteConstants');\n\nfunction mediaBreakpointUp(size) {\n const width = SiteConstants.BreakpointSizes[size];\n const mediaQuery = window.matchMedia(`(min-width: ${width}px)`);\n\n return mediaQuery.matches;\n}\n\nmodule.exports = {\n mediaBreakpointUp: mediaBreakpointUp\n};\n","'use strict';\n\n// These values should always match the variables set in _variables.scss\n\nmodule.exports.BreakpointSizes = {\n sm: 544,\n md: 769,\n lg: 1024,\n xl: 1340\n};\n\nmodule.exports.TransitionSpeed = 200;\n\nmodule.exports.HeroAnimationDelay = 0;\n\nmodule.exports.Spacer = 20;\n\nmodule.exports.placeholderImagePaths = {\n thumbnail: '/images/gray.png',\n imageMissing: '/images/placeholder 410x410.png'\n};\n\nmodule.exports.defaultMapMarker = {\n color: 'white',\n backgroundImage: '/images/icons/map-marker-default.svg'\n};\n\nmodule.exports.defaultStoreType = {\n id: 0,\n displayValue: 'Retail',\n value: 'retail'\n};\n\n// These are used in cartridge/client/default/js/components/search.js\nmodule.exports.UP_KEY = 38;\nmodule.exports.DOWN_KEY = 40;\nmodule.exports.DIRECTION_DOWN = 1;\nmodule.exports.DIRECTION_UP = -1;\n","var main = require('org_citizen/main');\n\nmodule.exports = main;\n","/*!\n * CSSPlugin 3.7.1\n * https://greensock.com\n *\n * Copyright 2008-2021, GreenSock. All rights reserved.\n * Subject to the terms at https://greensock.com/standard-license or for\n * Club GreenSock members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n\n/* eslint-disable */\nimport { gsap, _getProperty, _numExp, _numWithUnitExp, getUnit, _isString, _isUndefined, _renderComplexString, _relExp, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _checkPlugin, _replaceRandom, _plugins, GSCache, PropTween, _config, _ticker, _round, _missingPlugin, _getSetter, _getCache, _colorExp, _setDefaults, _removeLinkedListItem //for the commented-out className feature.\n} from \"./gsap-core.js\";\n\nvar _win,\n _doc,\n _docElement,\n _pluginInitted,\n _tempDiv,\n _tempDivStyler,\n _recentSetterPlugin,\n _windowExists = function _windowExists() {\n return typeof window !== \"undefined\";\n},\n _transformProps = {},\n _RAD2DEG = 180 / Math.PI,\n _DEG2RAD = Math.PI / 180,\n _atan2 = Math.atan2,\n _bigNum = 1e8,\n _capsExp = /([A-Z])/g,\n _horizontalExp = /(?:left|right|width|margin|padding|x)/i,\n _complexExp = /[\\s,\\(]\\S/,\n _propertyAliases = {\n autoAlpha: \"opacity,visibility\",\n scale: \"scaleX,scaleY\",\n alpha: \"opacity\"\n},\n _renderCSSProp = function _renderCSSProp(ratio, data) {\n return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);\n},\n _renderPropWithEnd = function _renderPropWithEnd(ratio, data) {\n return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);\n},\n _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning(ratio, data) {\n return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data);\n},\n //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0)\n_renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) {\n var value = data.s + data.c * ratio;\n data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data);\n},\n _renderNonTweeningValue = function _renderNonTweeningValue(ratio, data) {\n return data.set(data.t, data.p, ratio ? data.e : data.b, data);\n},\n _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd(ratio, data) {\n return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data);\n},\n _setterCSSStyle = function _setterCSSStyle(target, property, value) {\n return target.style[property] = value;\n},\n _setterCSSProp = function _setterCSSProp(target, property, value) {\n return target.style.setProperty(property, value);\n},\n _setterTransform = function _setterTransform(target, property, value) {\n return target._gsap[property] = value;\n},\n _setterScale = function _setterScale(target, property, value) {\n return target._gsap.scaleX = target._gsap.scaleY = value;\n},\n _setterScaleWithRender = function _setterScaleWithRender(target, property, value, data, ratio) {\n var cache = target._gsap;\n cache.scaleX = cache.scaleY = value;\n cache.renderTransform(ratio, cache);\n},\n _setterTransformWithRender = function _setterTransformWithRender(target, property, value, data, ratio) {\n var cache = target._gsap;\n cache[property] = value;\n cache.renderTransform(ratio, cache);\n},\n _transformProp = \"transform\",\n _transformOriginProp = _transformProp + \"Origin\",\n _supports3D,\n _createElement = function _createElement(type, ns) {\n var e = _doc.createElementNS ? _doc.createElementNS((ns || \"http://www.w3.org/1999/xhtml\").replace(/^https/, \"http\"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making \"style\" inaccessible.\n\n return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).\n},\n _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) {\n var cs = getComputedStyle(target);\n return cs[property] || cs.getPropertyValue(property.replace(_capsExp, \"-$1\").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1) || \"\"; //css variables may not need caps swapped out for dashes and lowercase.\n},\n _prefixes = \"O,Moz,ms,Ms,Webkit\".split(\",\"),\n _checkPropPrefix = function _checkPropPrefix(property, element, preferPrefix) {\n var e = element || _tempDiv,\n s = e.style,\n i = 5;\n\n if (property in s && !preferPrefix) {\n return property;\n }\n\n property = property.charAt(0).toUpperCase() + property.substr(1);\n\n while (i-- && !(_prefixes[i] + property in s)) {}\n\n return i < 0 ? null : (i === 3 ? \"ms\" : i >= 0 ? _prefixes[i] : \"\") + property;\n},\n _initCore = function _initCore() {\n if (_windowExists() && window.document) {\n _win = window;\n _doc = _win.document;\n _docElement = _doc.documentElement;\n _tempDiv = _createElement(\"div\") || {\n style: {}\n };\n _tempDivStyler = _createElement(\"div\");\n _transformProp = _checkPropPrefix(_transformProp);\n _transformOriginProp = _transformProp + \"Origin\";\n _tempDiv.style.cssText = \"border-width:0;line-height:0;position:absolute;padding:0\"; //make sure to override certain properties that may contaminate measurements, in case the user has overreaching style sheets.\n\n _supports3D = !!_checkPropPrefix(\"perspective\");\n _pluginInitted = 1;\n }\n},\n _getBBoxHack = function _getBBoxHack(swapIfPossible) {\n //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a element and/or . We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it).\n var svg = _createElement(\"svg\", this.ownerSVGElement && this.ownerSVGElement.getAttribute(\"xmlns\") || \"http://www.w3.org/2000/svg\"),\n oldParent = this.parentNode,\n oldSibling = this.nextSibling,\n oldCSS = this.style.cssText,\n bbox;\n\n _docElement.appendChild(svg);\n\n svg.appendChild(this);\n this.style.display = \"block\";\n\n if (swapIfPossible) {\n try {\n bbox = this.getBBox();\n this._gsapBBox = this.getBBox; //store the original\n\n this.getBBox = _getBBoxHack;\n } catch (e) {}\n } else if (this._gsapBBox) {\n bbox = this._gsapBBox();\n }\n\n if (oldParent) {\n if (oldSibling) {\n oldParent.insertBefore(this, oldSibling);\n } else {\n oldParent.appendChild(this);\n }\n }\n\n _docElement.removeChild(svg);\n\n this.style.cssText = oldCSS;\n return bbox;\n},\n _getAttributeFallbacks = function _getAttributeFallbacks(target, attributesArray) {\n var i = attributesArray.length;\n\n while (i--) {\n if (target.hasAttribute(attributesArray[i])) {\n return target.getAttribute(attributesArray[i]);\n }\n }\n},\n _getBBox = function _getBBox(target) {\n var bounds;\n\n try {\n bounds = target.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a or ). https://bugzilla.mozilla.org/show_bug.cgi?id=612118\n } catch (error) {\n bounds = _getBBoxHack.call(target, true);\n }\n\n bounds && (bounds.width || bounds.height) || target.getBBox === _getBBoxHack || (bounds = _getBBoxHack.call(target, true)); //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case.\n\n return bounds && !bounds.width && !bounds.x && !bounds.y ? {\n x: +_getAttributeFallbacks(target, [\"x\", \"cx\", \"x1\"]) || 0,\n y: +_getAttributeFallbacks(target, [\"y\", \"cy\", \"y1\"]) || 0,\n width: 0,\n height: 0\n } : bounds;\n},\n _isSVG = function _isSVG(e) {\n return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e));\n},\n //reports if the element is an SVG on which getBBox() actually works\n_removeProperty = function _removeProperty(target, property) {\n if (property) {\n var style = target.style;\n\n if (property in _transformProps && property !== _transformOriginProp) {\n property = _transformProp;\n }\n\n if (style.removeProperty) {\n if (property.substr(0, 2) === \"ms\" || property.substr(0, 6) === \"webkit\") {\n //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be \"ms-transform\" instead of \"-ms-transform\" for IE9, for example)\n property = \"-\" + property;\n }\n\n style.removeProperty(property.replace(_capsExp, \"-$1\").toLowerCase());\n } else {\n //note: old versions of IE use \"removeAttribute()\" instead of \"removeProperty()\"\n style.removeAttribute(property);\n }\n }\n},\n _addNonTweeningPT = function _addNonTweeningPT(plugin, target, property, beginning, end, onlySetAtEnd) {\n var pt = new PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue);\n plugin._pt = pt;\n pt.b = beginning;\n pt.e = end;\n\n plugin._props.push(property);\n\n return pt;\n},\n _nonConvertibleUnits = {\n deg: 1,\n rad: 1,\n turn: 1\n},\n //takes a single value like 20px and converts it to the unit specified, like \"%\", returning only the numeric amount.\n_convertToUnit = function _convertToUnit(target, property, value, unit) {\n var curValue = parseFloat(value) || 0,\n curUnit = (value + \"\").trim().substr((curValue + \"\").length) || \"px\",\n // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim()\n style = _tempDiv.style,\n horizontal = _horizontalExp.test(property),\n isRootSVG = target.tagName.toLowerCase() === \"svg\",\n measureProperty = (isRootSVG ? \"client\" : \"offset\") + (horizontal ? \"Width\" : \"Height\"),\n amount = 100,\n toPixels = unit === \"px\",\n toPercent = unit === \"%\",\n px,\n parent,\n cache,\n isSVG;\n\n if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) {\n return curValue;\n }\n\n curUnit !== \"px\" && !toPixels && (curValue = _convertToUnit(target, property, value, \"px\"));\n isSVG = target.getCTM && _isSVG(target);\n\n if ((toPercent || curUnit === \"%\") && (_transformProps[property] || ~property.indexOf(\"adius\"))) {\n px = isSVG ? target.getBBox()[horizontal ? \"width\" : \"height\"] : target[measureProperty];\n return _round(toPercent ? curValue / px * amount : curValue / 100 * px);\n }\n\n style[horizontal ? \"width\" : \"height\"] = amount + (toPixels ? curUnit : unit);\n parent = ~property.indexOf(\"adius\") || unit === \"em\" && target.appendChild && !isRootSVG ? target : target.parentNode;\n\n if (isSVG) {\n parent = (target.ownerSVGElement || {}).parentNode;\n }\n\n if (!parent || parent === _doc || !parent.appendChild) {\n parent = _doc.body;\n }\n\n cache = parent._gsap;\n\n if (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time) {\n return _round(curValue / cache.width * amount);\n } else {\n (toPercent || curUnit === \"%\") && (style.position = _getComputedProperty(target, \"position\"));\n parent === target && (style.position = \"static\"); // like for borderRadius, if it's a % we must have it relative to the target itself but that may not have position: relative or position: absolute in which case it'd go up the chain until it finds its offsetParent (bad). position: static protects against that.\n\n parent.appendChild(_tempDiv);\n px = _tempDiv[measureProperty];\n parent.removeChild(_tempDiv);\n style.position = \"absolute\";\n\n if (horizontal && toPercent) {\n cache = _getCache(parent);\n cache.time = _ticker.time;\n cache.width = parent[measureProperty];\n }\n }\n\n return _round(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0);\n},\n _get = function _get(target, property, unit, uncache) {\n var value;\n _pluginInitted || _initCore();\n\n if (property in _propertyAliases && property !== \"transform\") {\n property = _propertyAliases[property];\n\n if (~property.indexOf(\",\")) {\n property = property.split(\",\")[0];\n }\n }\n\n if (_transformProps[property] && property !== \"transform\") {\n value = _parseTransform(target, uncache);\n value = property !== \"transformOrigin\" ? value[property] : value.svg ? value.origin : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + \" \" + value.zOrigin + \"px\";\n } else {\n value = target.style[property];\n\n if (!value || value === \"auto\" || uncache || ~(value + \"\").indexOf(\"calc(\")) {\n value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || _getProperty(target, property) || (property === \"opacity\" ? 1 : 0); // note: some browsers, like Firefox, don't report borderRadius correctly! Instead, it only reports every corner like borderTopLeftRadius\n }\n }\n\n return unit && !~(value + \"\").trim().indexOf(\" \") ? _convertToUnit(target, property, value, unit) + unit : value;\n},\n _tweenComplexCSSString = function _tweenComplexCSSString(target, prop, start, end) {\n //note: we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n if (!start || start === \"none\") {\n // some browsers like Safari actually PREFER the prefixed property and mis-report the unprefixed value like clipPath (BUG). In other words, even though clipPath exists in the style (\"clipPath\" in target.style) and it's set in the CSS properly (along with -webkit-clip-path), Safari reports clipPath as \"none\" whereas WebkitClipPath reports accurately like \"ellipse(100% 0% at 50% 0%)\", so in this case we must SWITCH to using the prefixed property instead. See https://greensock.com/forums/topic/18310-clippath-doesnt-work-on-ios/\n var p = _checkPropPrefix(prop, target, 1),\n s = p && _getComputedProperty(target, p, 1);\n\n if (s && s !== start) {\n prop = p;\n start = s;\n } else if (prop === \"borderColor\") {\n start = _getComputedProperty(target, \"borderTopColor\"); // Firefox bug: always reports \"borderColor\" as \"\", so we must fall back to borderTopColor. See https://greensock.com/forums/topic/24583-how-to-return-colors-that-i-had-after-reverse/\n }\n }\n\n var pt = new PropTween(this._pt, target.style, prop, 0, 1, _renderComplexString),\n index = 0,\n matchIndex = 0,\n a,\n result,\n startValues,\n startNum,\n color,\n startValue,\n endValue,\n endNum,\n chunk,\n endUnit,\n startUnit,\n relative,\n endValues;\n pt.b = start;\n pt.e = end;\n start += \"\"; //ensure values are strings\n\n end += \"\";\n\n if (end === \"auto\") {\n target.style[prop] = end;\n end = _getComputedProperty(target, prop) || end;\n target.style[prop] = start;\n }\n\n a = [start, end];\n\n _colorStringFilter(a); //pass an array with the starting and ending values and let the filter do whatever it needs to the values. If colors are found, it returns true and then we must match where the color shows up order-wise because for things like boxShadow, sometimes the browser provides the computed values with the color FIRST, but the user provides it with the color LAST, so flip them if necessary. Same for drop-shadow().\n\n\n start = a[0];\n end = a[1];\n startValues = start.match(_numWithUnitExp) || [];\n endValues = end.match(_numWithUnitExp) || [];\n\n if (endValues.length) {\n while (result = _numWithUnitExp.exec(end)) {\n endValue = result[0];\n chunk = end.substring(index, result.index);\n\n if (color) {\n color = (color + 1) % 5;\n } else if (chunk.substr(-5) === \"rgba(\" || chunk.substr(-5) === \"hsla(\") {\n color = 1;\n }\n\n if (endValue !== (startValue = startValues[matchIndex++] || \"\")) {\n startNum = parseFloat(startValue) || 0;\n startUnit = startValue.substr((startNum + \"\").length);\n relative = endValue.charAt(1) === \"=\" ? +(endValue.charAt(0) + \"1\") : 0;\n\n if (relative) {\n endValue = endValue.substr(2);\n }\n\n endNum = parseFloat(endValue);\n endUnit = endValue.substr((endNum + \"\").length);\n index = _numWithUnitExp.lastIndex - endUnit.length;\n\n if (!endUnit) {\n //if something like \"perspective:300\" is passed in and we must add a unit to the end\n endUnit = endUnit || _config.units[prop] || startUnit;\n\n if (index === end.length) {\n end += endUnit;\n pt.e += endUnit;\n }\n }\n\n if (startUnit !== endUnit) {\n startNum = _convertToUnit(target, prop, startValue, endUnit) || 0;\n } //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.\n\n\n pt._pt = {\n _next: pt._pt,\n p: chunk || matchIndex === 1 ? chunk : \",\",\n //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.\n s: startNum,\n c: relative ? relative * endNum : endNum - startNum,\n m: color && color < 4 || prop === \"zIndex\" ? Math.round : 0\n };\n }\n }\n\n pt.c = index < end.length ? end.substring(index, end.length) : \"\"; //we use the \"c\" of the PropTween to store the final part of the string (after the last number)\n } else {\n pt.r = prop === \"display\" && end === \"none\" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue;\n }\n\n _relExp.test(end) && (pt.e = 0); //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).\n\n this._pt = pt; //start the linked list with this new PropTween. Remember, we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within another plugin too, thus \"this\" would refer to the plugin.\n\n return pt;\n},\n _keywordToPercent = {\n top: \"0%\",\n bottom: \"100%\",\n left: \"0%\",\n right: \"100%\",\n center: \"50%\"\n},\n _convertKeywordsToPercentages = function _convertKeywordsToPercentages(value) {\n var split = value.split(\" \"),\n x = split[0],\n y = split[1] || \"50%\";\n\n if (x === \"top\" || x === \"bottom\" || y === \"left\" || y === \"right\") {\n //the user provided them in the wrong order, so flip them\n value = x;\n x = y;\n y = value;\n }\n\n split[0] = _keywordToPercent[x] || x;\n split[1] = _keywordToPercent[y] || y;\n return split.join(\" \");\n},\n _renderClearProps = function _renderClearProps(ratio, data) {\n if (data.tween && data.tween._time === data.tween._dur) {\n var target = data.t,\n style = target.style,\n props = data.u,\n cache = target._gsap,\n prop,\n clearTransforms,\n i;\n\n if (props === \"all\" || props === true) {\n style.cssText = \"\";\n clearTransforms = 1;\n } else {\n props = props.split(\",\");\n i = props.length;\n\n while (--i > -1) {\n prop = props[i];\n\n if (_transformProps[prop]) {\n clearTransforms = 1;\n prop = prop === \"transformOrigin\" ? _transformOriginProp : _transformProp;\n }\n\n _removeProperty(target, prop);\n }\n }\n\n if (clearTransforms) {\n _removeProperty(target, _transformProp);\n\n if (cache) {\n cache.svg && target.removeAttribute(\"transform\");\n\n _parseTransform(target, 1); // force all the cached values back to \"normal\"/identity, otherwise if there's another tween that's already set to render transforms on this element, it could display the wrong values.\n\n\n cache.uncache = 1;\n }\n }\n }\n},\n // note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list.\n_specialProps = {\n clearProps: function clearProps(plugin, target, property, endValue, tween) {\n if (tween.data !== \"isFromStart\") {\n var pt = plugin._pt = new PropTween(plugin._pt, target, property, 0, 0, _renderClearProps);\n pt.u = endValue;\n pt.pr = -10;\n pt.tween = tween;\n\n plugin._props.push(property);\n\n return 1;\n }\n }\n /* className feature (about 0.4kb gzipped).\n , className(plugin, target, property, endValue, tween) {\n \tlet _renderClassName = (ratio, data) => {\n \t\t\tdata.css.render(ratio, data.css);\n \t\t\tif (!ratio || ratio === 1) {\n \t\t\t\tlet inline = data.rmv,\n \t\t\t\t\ttarget = data.t,\n \t\t\t\t\tp;\n \t\t\t\ttarget.setAttribute(\"class\", ratio ? data.e : data.b);\n \t\t\t\tfor (p in inline) {\n \t\t\t\t\t_removeProperty(target, p);\n \t\t\t\t}\n \t\t\t}\n \t\t},\n \t\t_getAllStyles = (target) => {\n \t\t\tlet styles = {},\n \t\t\t\tcomputed = getComputedStyle(target),\n \t\t\t\tp;\n \t\t\tfor (p in computed) {\n \t\t\t\tif (isNaN(p) && p !== \"cssText\" && p !== \"length\") {\n \t\t\t\t\tstyles[p] = computed[p];\n \t\t\t\t}\n \t\t\t}\n \t\t\t_setDefaults(styles, _parseTransform(target, 1));\n \t\t\treturn styles;\n \t\t},\n \t\tstartClassList = target.getAttribute(\"class\"),\n \t\tstyle = target.style,\n \t\tcssText = style.cssText,\n \t\tcache = target._gsap,\n \t\tclassPT = cache.classPT,\n \t\tinlineToRemoveAtEnd = {},\n \t\tdata = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== \"=\") ? endValue : startClassList.replace(new RegExp(\"(?:\\\\s|^)\" + endValue.substr(2) + \"(?![\\\\w-])\"), \"\") + ((endValue.charAt(0) === \"+\") ? \" \" + endValue.substr(2) : \"\")},\n \t\tchangingVars = {},\n \t\tstartVars = _getAllStyles(target),\n \t\ttransformRelated = /(transform|perspective)/i,\n \t\tendVars, p;\n \tif (classPT) {\n \t\tclassPT.r(1, classPT.d);\n \t\t_removeLinkedListItem(classPT.d.plugin, classPT, \"_pt\");\n \t}\n \ttarget.setAttribute(\"class\", data.e);\n \tendVars = _getAllStyles(target, true);\n \ttarget.setAttribute(\"class\", startClassList);\n \tfor (p in endVars) {\n \t\tif (endVars[p] !== startVars[p] && !transformRelated.test(p)) {\n \t\t\tchangingVars[p] = endVars[p];\n \t\t\tif (!style[p] && style[p] !== \"0\") {\n \t\t\t\tinlineToRemoveAtEnd[p] = 1;\n \t\t\t}\n \t\t}\n \t}\n \tcache.classPT = plugin._pt = new PropTween(plugin._pt, target, \"className\", 0, 0, _renderClassName, data, 0, -11);\n \tif (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.\n \t\tstyle.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).\n \t}\n \t_parseTransform(target, true); //to clear the caching of transforms\n \tdata.css = new gsap.plugins.css();\n \tdata.css.init(target, changingVars, tween);\n \tplugin._props.push(...data.css._props);\n \treturn 1;\n }\n */\n\n},\n\n/*\n * --------------------------------------------------------------------------------------\n * TRANSFORMS\n * --------------------------------------------------------------------------------------\n */\n_identity2DMatrix = [1, 0, 0, 1, 0, 0],\n _rotationalProperties = {},\n _isNullTransform = function _isNullTransform(value) {\n return value === \"matrix(1, 0, 0, 1, 0, 0)\" || value === \"none\" || !value;\n},\n _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray(target) {\n var matrixString = _getComputedProperty(target, _transformProp);\n\n return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_numExp).map(_round);\n},\n _getMatrix = function _getMatrix(target, force2D) {\n var cache = target._gsap || _getCache(target),\n style = target.style,\n matrix = _getComputedTransformMatrixAsArray(target),\n parent,\n nextSibling,\n temp,\n addedToDOM;\n\n if (cache.svg && target.getAttribute(\"transform\")) {\n temp = target.transform.baseVal.consolidate().matrix; //ensures that even complex values like \"translate(50,60) rotate(135,0,0)\" are parsed because it mashes it into a matrix.\n\n matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f];\n return matrix.join(\",\") === \"1,0,0,1,0,0\" ? _identity2DMatrix : matrix;\n } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) {\n //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397\n //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not \"none\". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).\n temp = style.display;\n style.display = \"block\";\n parent = target.parentNode;\n\n if (!parent || !target.offsetParent) {\n // note: in 3.3.0 we switched target.offsetParent to _doc.body.contains(target) to avoid [sometimes unnecessary] MutationObserver calls but that wasn't adequate because there are edge cases where nested position: fixed elements need to get reparented to accurately sense transforms. See https://github.com/greensock/GSAP/issues/388 and https://github.com/greensock/GSAP/issues/375\n addedToDOM = 1; //flag\n\n nextSibling = target.nextSibling;\n\n _docElement.appendChild(target); //we must add it to the DOM in order to get values properly\n\n }\n\n matrix = _getComputedTransformMatrixAsArray(target);\n temp ? style.display = temp : _removeProperty(target, \"display\");\n\n if (addedToDOM) {\n nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target);\n }\n }\n\n return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix;\n},\n _applySVGOrigin = function _applySVGOrigin(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) {\n var cache = target._gsap,\n matrix = matrixArray || _getMatrix(target, true),\n xOriginOld = cache.xOrigin || 0,\n yOriginOld = cache.yOrigin || 0,\n xOffsetOld = cache.xOffset || 0,\n yOffsetOld = cache.yOffset || 0,\n a = matrix[0],\n b = matrix[1],\n c = matrix[2],\n d = matrix[3],\n tx = matrix[4],\n ty = matrix[5],\n originSplit = origin.split(\" \"),\n xOrigin = parseFloat(originSplit[0]) || 0,\n yOrigin = parseFloat(originSplit[1]) || 0,\n bounds,\n determinant,\n x,\n y;\n\n if (!originIsAbsolute) {\n bounds = _getBBox(target);\n xOrigin = bounds.x + (~originSplit[0].indexOf(\"%\") ? xOrigin / 100 * bounds.width : xOrigin);\n yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf(\"%\") ? yOrigin / 100 * bounds.height : yOrigin);\n } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) {\n //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero.\n x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant;\n y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant;\n xOrigin = x;\n yOrigin = y;\n }\n\n if (smooth || smooth !== false && cache.smooth) {\n tx = xOrigin - xOriginOld;\n ty = yOrigin - yOriginOld;\n cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx;\n cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty;\n } else {\n cache.xOffset = cache.yOffset = 0;\n }\n\n cache.xOrigin = xOrigin;\n cache.yOrigin = yOrigin;\n cache.smooth = !!smooth;\n cache.origin = origin;\n cache.originIsAbsolute = !!originIsAbsolute;\n target.style[_transformOriginProp] = \"0px 0px\"; //otherwise, if someone sets an origin via CSS, it will likely interfere with the SVG transform attribute ones (because remember, we're baking the origin into the matrix() value).\n\n if (pluginToAddPropTweensTo) {\n _addNonTweeningPT(pluginToAddPropTweensTo, cache, \"xOrigin\", xOriginOld, xOrigin);\n\n _addNonTweeningPT(pluginToAddPropTweensTo, cache, \"yOrigin\", yOriginOld, yOrigin);\n\n _addNonTweeningPT(pluginToAddPropTweensTo, cache, \"xOffset\", xOffsetOld, cache.xOffset);\n\n _addNonTweeningPT(pluginToAddPropTweensTo, cache, \"yOffset\", yOffsetOld, cache.yOffset);\n }\n\n target.setAttribute(\"data-svg-origin\", xOrigin + \" \" + yOrigin);\n},\n _parseTransform = function _parseTransform(target, uncache) {\n var cache = target._gsap || new GSCache(target);\n\n if (\"x\" in cache && !uncache && !cache.uncache) {\n return cache;\n }\n\n var style = target.style,\n invertedScaleX = cache.scaleX < 0,\n px = \"px\",\n deg = \"deg\",\n origin = _getComputedProperty(target, _transformOriginProp) || \"0\",\n x,\n y,\n z,\n scaleX,\n scaleY,\n rotation,\n rotationX,\n rotationY,\n skewX,\n skewY,\n perspective,\n xOrigin,\n yOrigin,\n matrix,\n angle,\n cos,\n sin,\n a,\n b,\n c,\n d,\n a12,\n a22,\n t1,\n t2,\n t3,\n a13,\n a23,\n a33,\n a42,\n a43,\n a32;\n x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0;\n scaleX = scaleY = 1;\n cache.svg = !!(target.getCTM && _isSVG(target));\n matrix = _getMatrix(target, cache.svg);\n\n if (cache.svg) {\n t1 = (!cache.uncache || origin === \"0px 0px\") && !uncache && target.getAttribute(\"data-svg-origin\"); // if origin is 0,0 and cache.uncache is true, let the recorded data-svg-origin stay. Otherwise, whenever we set cache.uncache to true, we'd need to set element.style.transformOrigin = (cache.xOrigin - bbox.x) + \"px \" + (cache.yOrigin - bbox.y) + \"px\". Remember, to work around browser inconsistencies we always force SVG elements' transformOrigin to 0,0 and offset the translation accordingly.\n\n _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix);\n }\n\n xOrigin = cache.xOrigin || 0;\n yOrigin = cache.yOrigin || 0;\n\n if (matrix !== _identity2DMatrix) {\n a = matrix[0]; //a11\n\n b = matrix[1]; //a21\n\n c = matrix[2]; //a31\n\n d = matrix[3]; //a41\n\n x = a12 = matrix[4];\n y = a22 = matrix[5]; //2D matrix\n\n if (matrix.length === 6) {\n scaleX = Math.sqrt(a * a + b * b);\n scaleY = Math.sqrt(d * d + c * c);\n rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist).\n\n skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0;\n skewX && (scaleY *= Math.abs(Math.cos(skewX * _DEG2RAD)));\n\n if (cache.svg) {\n x -= xOrigin - (xOrigin * a + yOrigin * c);\n y -= yOrigin - (xOrigin * b + yOrigin * d);\n } //3D matrix\n\n } else {\n a32 = matrix[6];\n a42 = matrix[7];\n a13 = matrix[8];\n a23 = matrix[9];\n a33 = matrix[10];\n a43 = matrix[11];\n x = matrix[12];\n y = matrix[13];\n z = matrix[14];\n angle = _atan2(a32, a33);\n rotationX = angle * _RAD2DEG; //rotationX\n\n if (angle) {\n cos = Math.cos(-angle);\n sin = Math.sin(-angle);\n t1 = a12 * cos + a13 * sin;\n t2 = a22 * cos + a23 * sin;\n t3 = a32 * cos + a33 * sin;\n a13 = a12 * -sin + a13 * cos;\n a23 = a22 * -sin + a23 * cos;\n a33 = a32 * -sin + a33 * cos;\n a43 = a42 * -sin + a43 * cos;\n a12 = t1;\n a22 = t2;\n a32 = t3;\n } //rotationY\n\n\n angle = _atan2(-c, a33);\n rotationY = angle * _RAD2DEG;\n\n if (angle) {\n cos = Math.cos(-angle);\n sin = Math.sin(-angle);\n t1 = a * cos - a13 * sin;\n t2 = b * cos - a23 * sin;\n t3 = c * cos - a33 * sin;\n a43 = d * sin + a43 * cos;\n a = t1;\n b = t2;\n c = t3;\n } //rotationZ\n\n\n angle = _atan2(b, a);\n rotation = angle * _RAD2DEG;\n\n if (angle) {\n cos = Math.cos(angle);\n sin = Math.sin(angle);\n t1 = a * cos + b * sin;\n t2 = a12 * cos + a22 * sin;\n b = b * cos - a * sin;\n a22 = a22 * cos - a12 * sin;\n a = t1;\n a12 = t2;\n }\n\n if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) {\n //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here.\n rotationX = rotation = 0;\n rotationY = 180 - rotationY;\n }\n\n scaleX = _round(Math.sqrt(a * a + b * b + c * c));\n scaleY = _round(Math.sqrt(a22 * a22 + a32 * a32));\n angle = _atan2(a12, a22);\n skewX = Math.abs(angle) > 0.0002 ? angle * _RAD2DEG : 0;\n perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0;\n }\n\n if (cache.svg) {\n //sense if there are CSS transforms applied on an SVG element in which case we must overwrite them when rendering. The transform attribute is more reliable cross-browser, but we can't just remove the CSS ones because they may be applied in a CSS rule somewhere (not just inline).\n t1 = target.getAttribute(\"transform\");\n cache.forceCSS = target.setAttribute(\"transform\", \"\") || !_isNullTransform(_getComputedProperty(target, _transformProp));\n t1 && target.setAttribute(\"transform\", t1);\n }\n }\n\n if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {\n if (invertedScaleX) {\n scaleX *= -1;\n skewX += rotation <= 0 ? 180 : -180;\n rotation += rotation <= 0 ? 180 : -180;\n } else {\n scaleY *= -1;\n skewX += skewX <= 0 ? 180 : -180;\n }\n }\n\n cache.x = x - ((cache.xPercent = x && (cache.xPercent || (Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0))) ? target.offsetWidth * cache.xPercent / 100 : 0) + px;\n cache.y = y - ((cache.yPercent = y && (cache.yPercent || (Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0))) ? target.offsetHeight * cache.yPercent / 100 : 0) + px;\n cache.z = z + px;\n cache.scaleX = _round(scaleX);\n cache.scaleY = _round(scaleY);\n cache.rotation = _round(rotation) + deg;\n cache.rotationX = _round(rotationX) + deg;\n cache.rotationY = _round(rotationY) + deg;\n cache.skewX = skewX + deg;\n cache.skewY = skewY + deg;\n cache.transformPerspective = perspective + px;\n\n if (cache.zOrigin = parseFloat(origin.split(\" \")[2]) || 0) {\n style[_transformOriginProp] = _firstTwoOnly(origin);\n }\n\n cache.xOffset = cache.yOffset = 0;\n cache.force3D = _config.force3D;\n cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms;\n cache.uncache = 0;\n return cache;\n},\n _firstTwoOnly = function _firstTwoOnly(value) {\n return (value = value.split(\" \"))[0] + \" \" + value[1];\n},\n //for handling transformOrigin values, stripping out the 3rd dimension\n_addPxTranslate = function _addPxTranslate(target, start, value) {\n var unit = getUnit(start);\n return _round(parseFloat(start) + parseFloat(_convertToUnit(target, \"x\", value + \"px\", unit))) + unit;\n},\n _renderNon3DTransforms = function _renderNon3DTransforms(ratio, cache) {\n cache.z = \"0px\";\n cache.rotationY = cache.rotationX = \"0deg\";\n cache.force3D = 0;\n\n _renderCSSTransforms(ratio, cache);\n},\n _zeroDeg = \"0deg\",\n _zeroPx = \"0px\",\n _endParenthesis = \") \",\n _renderCSSTransforms = function _renderCSSTransforms(ratio, cache) {\n var _ref = cache || this,\n xPercent = _ref.xPercent,\n yPercent = _ref.yPercent,\n x = _ref.x,\n y = _ref.y,\n z = _ref.z,\n rotation = _ref.rotation,\n rotationY = _ref.rotationY,\n rotationX = _ref.rotationX,\n skewX = _ref.skewX,\n skewY = _ref.skewY,\n scaleX = _ref.scaleX,\n scaleY = _ref.scaleY,\n transformPerspective = _ref.transformPerspective,\n force3D = _ref.force3D,\n target = _ref.target,\n zOrigin = _ref.zOrigin,\n transforms = \"\",\n use3D = force3D === \"auto\" && ratio && ratio !== 1 || force3D === true; // Safari has a bug that causes it not to render 3D transform-origin values properly, so we force the z origin to 0, record it in the cache, and then do the math here to offset the translate values accordingly (basically do the 3D transform-origin part manually)\n\n\n if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) {\n var angle = parseFloat(rotationY) * _DEG2RAD,\n a13 = Math.sin(angle),\n a33 = Math.cos(angle),\n cos;\n\n angle = parseFloat(rotationX) * _DEG2RAD;\n cos = Math.cos(angle);\n x = _addPxTranslate(target, x, a13 * cos * -zOrigin);\n y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin);\n z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin);\n }\n\n if (transformPerspective !== _zeroPx) {\n transforms += \"perspective(\" + transformPerspective + _endParenthesis;\n }\n\n if (xPercent || yPercent) {\n transforms += \"translate(\" + xPercent + \"%, \" + yPercent + \"%) \";\n }\n\n if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) {\n transforms += z !== _zeroPx || use3D ? \"translate3d(\" + x + \", \" + y + \", \" + z + \") \" : \"translate(\" + x + \", \" + y + _endParenthesis;\n }\n\n if (rotation !== _zeroDeg) {\n transforms += \"rotate(\" + rotation + _endParenthesis;\n }\n\n if (rotationY !== _zeroDeg) {\n transforms += \"rotateY(\" + rotationY + _endParenthesis;\n }\n\n if (rotationX !== _zeroDeg) {\n transforms += \"rotateX(\" + rotationX + _endParenthesis;\n }\n\n if (skewX !== _zeroDeg || skewY !== _zeroDeg) {\n transforms += \"skew(\" + skewX + \", \" + skewY + _endParenthesis;\n }\n\n if (scaleX !== 1 || scaleY !== 1) {\n transforms += \"scale(\" + scaleX + \", \" + scaleY + _endParenthesis;\n }\n\n target.style[_transformProp] = transforms || \"translate(0, 0)\";\n},\n _renderSVGTransforms = function _renderSVGTransforms(ratio, cache) {\n var _ref2 = cache || this,\n xPercent = _ref2.xPercent,\n yPercent = _ref2.yPercent,\n x = _ref2.x,\n y = _ref2.y,\n rotation = _ref2.rotation,\n skewX = _ref2.skewX,\n skewY = _ref2.skewY,\n scaleX = _ref2.scaleX,\n scaleY = _ref2.scaleY,\n target = _ref2.target,\n xOrigin = _ref2.xOrigin,\n yOrigin = _ref2.yOrigin,\n xOffset = _ref2.xOffset,\n yOffset = _ref2.yOffset,\n forceCSS = _ref2.forceCSS,\n tx = parseFloat(x),\n ty = parseFloat(y),\n a11,\n a21,\n a12,\n a22,\n temp;\n\n rotation = parseFloat(rotation);\n skewX = parseFloat(skewX);\n skewY = parseFloat(skewY);\n\n if (skewY) {\n //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees.\n skewY = parseFloat(skewY);\n skewX += skewY;\n rotation += skewY;\n }\n\n if (rotation || skewX) {\n rotation *= _DEG2RAD;\n skewX *= _DEG2RAD;\n a11 = Math.cos(rotation) * scaleX;\n a21 = Math.sin(rotation) * scaleX;\n a12 = Math.sin(rotation - skewX) * -scaleY;\n a22 = Math.cos(rotation - skewX) * scaleY;\n\n if (skewX) {\n skewY *= _DEG2RAD;\n temp = Math.tan(skewX - skewY);\n temp = Math.sqrt(1 + temp * temp);\n a12 *= temp;\n a22 *= temp;\n\n if (skewY) {\n temp = Math.tan(skewY);\n temp = Math.sqrt(1 + temp * temp);\n a11 *= temp;\n a21 *= temp;\n }\n }\n\n a11 = _round(a11);\n a21 = _round(a21);\n a12 = _round(a12);\n a22 = _round(a22);\n } else {\n a11 = scaleX;\n a22 = scaleY;\n a21 = a12 = 0;\n }\n\n if (tx && !~(x + \"\").indexOf(\"px\") || ty && !~(y + \"\").indexOf(\"px\")) {\n tx = _convertToUnit(target, \"x\", x, \"px\");\n ty = _convertToUnit(target, \"y\", y, \"px\");\n }\n\n if (xOrigin || yOrigin || xOffset || yOffset) {\n tx = _round(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset);\n ty = _round(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset);\n }\n\n if (xPercent || yPercent) {\n //The SVG spec doesn't support percentage-based translation in the \"transform\" attribute, so we merge it into the translation to simulate it.\n temp = target.getBBox();\n tx = _round(tx + xPercent / 100 * temp.width);\n ty = _round(ty + yPercent / 100 * temp.height);\n }\n\n temp = \"matrix(\" + a11 + \",\" + a21 + \",\" + a12 + \",\" + a22 + \",\" + tx + \",\" + ty + \")\";\n target.setAttribute(\"transform\", temp);\n forceCSS && (target.style[_transformProp] = temp); //some browsers prioritize CSS transforms over the transform attribute. When we sense that the user has CSS transforms applied, we must overwrite them this way (otherwise some browser simply won't render the transform attribute changes!)\n},\n _addRotationalPropTween = function _addRotationalPropTween(plugin, target, property, startNum, endValue, relative) {\n var cap = 360,\n isString = _isString(endValue),\n endNum = parseFloat(endValue) * (isString && ~endValue.indexOf(\"rad\") ? _RAD2DEG : 1),\n change = relative ? endNum * relative : endNum - startNum,\n finalValue = startNum + change + \"deg\",\n direction,\n pt;\n\n if (isString) {\n direction = endValue.split(\"_\")[1];\n\n if (direction === \"short\") {\n change %= cap;\n\n if (change !== change % (cap / 2)) {\n change += change < 0 ? cap : -cap;\n }\n }\n\n if (direction === \"cw\" && change < 0) {\n change = (change + cap * _bigNum) % cap - ~~(change / cap) * cap;\n } else if (direction === \"ccw\" && change > 0) {\n change = (change - cap * _bigNum) % cap - ~~(change / cap) * cap;\n }\n }\n\n plugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd);\n pt.e = finalValue;\n pt.u = \"deg\";\n\n plugin._props.push(property);\n\n return pt;\n},\n _assign = function _assign(target, source) {\n // Internet Explorer doesn't have Object.assign(), so we recreate it here.\n for (var p in source) {\n target[p] = source[p];\n }\n\n return target;\n},\n _addRawTransformPTs = function _addRawTransformPTs(plugin, transforms, target) {\n //for handling cases where someone passes in a whole transform string, like transform: \"scale(2, 3) rotate(20deg) translateY(30em)\"\n var startCache = _assign({}, target._gsap),\n exclude = \"perspective,force3D,transformOrigin,svgOrigin\",\n style = target.style,\n endCache,\n p,\n startValue,\n endValue,\n startNum,\n endNum,\n startUnit,\n endUnit;\n\n if (startCache.svg) {\n startValue = target.getAttribute(\"transform\");\n target.setAttribute(\"transform\", \"\");\n style[_transformProp] = transforms;\n endCache = _parseTransform(target, 1);\n\n _removeProperty(target, _transformProp);\n\n target.setAttribute(\"transform\", startValue);\n } else {\n startValue = getComputedStyle(target)[_transformProp];\n style[_transformProp] = transforms;\n endCache = _parseTransform(target, 1);\n style[_transformProp] = startValue;\n }\n\n for (p in _transformProps) {\n startValue = startCache[p];\n endValue = endCache[p];\n\n if (startValue !== endValue && exclude.indexOf(p) < 0) {\n //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case.\n startUnit = getUnit(startValue);\n endUnit = getUnit(endValue);\n startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue);\n endNum = parseFloat(endValue);\n plugin._pt = new PropTween(plugin._pt, endCache, p, startNum, endNum - startNum, _renderCSSProp);\n plugin._pt.u = endUnit || 0;\n\n plugin._props.push(p);\n }\n }\n\n _assign(endCache, startCache);\n}; // handle splitting apart padding, margin, borderWidth, and borderRadius into their 4 components. Firefox, for example, won't report borderRadius correctly - it will only do borderTopLeftRadius and the other corners. We also want to handle paddingTop, marginLeft, borderRightWidth, etc.\n\n\n_forEachName(\"padding,margin,Width,Radius\", function (name, index) {\n var t = \"Top\",\n r = \"Right\",\n b = \"Bottom\",\n l = \"Left\",\n props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function (side) {\n return index < 2 ? name + side : \"border\" + side + name;\n });\n\n _specialProps[index > 1 ? \"border\" + name : name] = function (plugin, target, property, endValue, tween) {\n var a, vars;\n\n if (arguments.length < 4) {\n // getter, passed target, property, and unit (from _get())\n a = props.map(function (prop) {\n return _get(plugin, prop, property);\n });\n vars = a.join(\" \");\n return vars.split(a[0]).length === 5 ? a[0] : vars;\n }\n\n a = (endValue + \"\").split(\" \");\n vars = {};\n props.forEach(function (prop, i) {\n return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0];\n });\n plugin.init(target, vars, tween);\n };\n});\n\nexport var CSSPlugin = {\n name: \"css\",\n register: _initCore,\n targetTest: function targetTest(target) {\n return target.style && target.nodeType;\n },\n init: function init(target, vars, tween, index, targets) {\n var props = this._props,\n style = target.style,\n startAt = tween.vars.startAt,\n startValue,\n endValue,\n endNum,\n startNum,\n type,\n specialProp,\n p,\n startUnit,\n endUnit,\n relative,\n isTransformRelated,\n transformPropTween,\n cache,\n smooth,\n hasPriority;\n _pluginInitted || _initCore();\n\n for (p in vars) {\n if (p === \"autoRound\") {\n continue;\n }\n\n endValue = vars[p];\n\n if (_plugins[p] && _checkPlugin(p, vars, tween, index, target, targets)) {\n // plugins\n continue;\n }\n\n type = typeof endValue;\n specialProp = _specialProps[p];\n\n if (type === \"function\") {\n endValue = endValue.call(tween, index, target, targets);\n type = typeof endValue;\n }\n\n if (type === \"string\" && ~endValue.indexOf(\"random(\")) {\n endValue = _replaceRandom(endValue);\n }\n\n if (specialProp) {\n specialProp(this, target, p, endValue, tween) && (hasPriority = 1);\n } else if (p.substr(0, 2) === \"--\") {\n //CSS variable\n startValue = (getComputedStyle(target).getPropertyValue(p) + \"\").trim();\n endValue += \"\";\n _colorExp.lastIndex = 0;\n\n if (!_colorExp.test(startValue)) {\n // colors don't have units\n startUnit = getUnit(startValue);\n endUnit = getUnit(endValue);\n }\n\n endUnit ? startUnit !== endUnit && (startValue = _convertToUnit(target, p, startValue, endUnit) + endUnit) : startUnit && (endValue += startUnit);\n this.add(style, \"setProperty\", startValue, endValue, index, targets, 0, 0, p);\n props.push(p);\n } else if (type !== \"undefined\") {\n if (startAt && p in startAt) {\n // in case someone hard-codes a complex value as the start, like top: \"calc(2vh / 2)\". Without this, it'd use the computed value (always in px)\n startValue = typeof startAt[p] === \"function\" ? startAt[p].call(tween, index, target, targets) : startAt[p];\n p in _config.units && !getUnit(startValue) && (startValue += _config.units[p]); // for cases when someone passes in a unitless value like {x: 100}; if we try setting translate(100, 0px) it won't work.\n\n (startValue + \"\").charAt(1) === \"=\" && (startValue = _get(target, p)); // can't work with relative values\n } else {\n startValue = _get(target, p);\n }\n\n startNum = parseFloat(startValue);\n relative = type === \"string\" && endValue.charAt(1) === \"=\" ? +(endValue.charAt(0) + \"1\") : 0;\n relative && (endValue = endValue.substr(2));\n endNum = parseFloat(endValue);\n\n if (p in _propertyAliases) {\n if (p === \"autoAlpha\") {\n //special case where we control the visibility along with opacity. We still allow the opacity value to pass through and get tweened.\n if (startNum === 1 && _get(target, \"visibility\") === \"hidden\" && endNum) {\n //if visibility is initially set to \"hidden\", we should interpret that as intent to make opacity 0 (a convenience)\n startNum = 0;\n }\n\n _addNonTweeningPT(this, style, \"visibility\", startNum ? \"inherit\" : \"hidden\", endNum ? \"inherit\" : \"hidden\", !endNum);\n }\n\n if (p !== \"scale\" && p !== \"transform\") {\n p = _propertyAliases[p];\n ~p.indexOf(\",\") && (p = p.split(\",\")[0]);\n }\n }\n\n isTransformRelated = p in _transformProps; //--- TRANSFORM-RELATED ---\n\n if (isTransformRelated) {\n if (!transformPropTween) {\n cache = target._gsap;\n cache.renderTransform && !vars.parseTransform || _parseTransform(target, vars.parseTransform); // if, for example, gsap.set(... {transform:\"translateX(50vw)\"}), the _get() call doesn't parse the transform, thus cache.renderTransform won't be set yet so force the parsing of the transform here.\n\n smooth = vars.smoothOrigin !== false && cache.smooth;\n transformPropTween = this._pt = new PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1); //the first time through, create the rendering PropTween so that it runs LAST (in the linked list, we keep adding to the beginning)\n\n transformPropTween.dep = 1; //flag it as dependent so that if things get killed/overwritten and this is the only PropTween left, we can safely kill the whole tween.\n }\n\n if (p === \"scale\") {\n this._pt = new PropTween(this._pt, cache, \"scaleY\", cache.scaleY, (relative ? relative * endNum : endNum - cache.scaleY) || 0);\n props.push(\"scaleY\", p);\n p += \"X\";\n } else if (p === \"transformOrigin\") {\n endValue = _convertKeywordsToPercentages(endValue); //in case something like \"left top\" or \"bottom right\" is passed in. Convert to percentages.\n\n if (cache.svg) {\n _applySVGOrigin(target, endValue, 0, smooth, 0, this);\n } else {\n endUnit = parseFloat(endValue.split(\" \")[2]) || 0; //handle the zOrigin separately!\n\n endUnit !== cache.zOrigin && _addNonTweeningPT(this, cache, \"zOrigin\", cache.zOrigin, endUnit);\n\n _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue));\n }\n\n continue;\n } else if (p === \"svgOrigin\") {\n _applySVGOrigin(target, endValue, 1, smooth, 0, this);\n\n continue;\n } else if (p in _rotationalProperties) {\n _addRotationalPropTween(this, cache, p, startNum, endValue, relative);\n\n continue;\n } else if (p === \"smoothOrigin\") {\n _addNonTweeningPT(this, cache, \"smooth\", cache.smooth, endValue);\n\n continue;\n } else if (p === \"force3D\") {\n cache[p] = endValue;\n continue;\n } else if (p === \"transform\") {\n _addRawTransformPTs(this, endValue, target);\n\n continue;\n }\n } else if (!(p in style)) {\n p = _checkPropPrefix(p) || p;\n }\n\n if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) {\n startUnit = (startValue + \"\").substr((startNum + \"\").length);\n endNum || (endNum = 0); // protect against NaN\n\n endUnit = getUnit(endValue) || (p in _config.units ? _config.units[p] : startUnit);\n startUnit !== endUnit && (startNum = _convertToUnit(target, p, startValue, endUnit));\n this._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, relative ? relative * endNum : endNum - startNum, !isTransformRelated && (endUnit === \"px\" || p === \"zIndex\") && vars.autoRound !== false ? _renderRoundedCSSProp : _renderCSSProp);\n this._pt.u = endUnit || 0;\n\n if (startUnit !== endUnit) {\n //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a \"b\" (beginning) property and point to a render method that handles that. (performance optimization)\n this._pt.b = startValue;\n this._pt.r = _renderCSSPropWithBeginning;\n }\n } else if (!(p in style)) {\n if (p in target) {\n //maybe it's not a style - it could be a property added directly to an element in which case we'll try to animate that.\n this.add(target, p, startValue || target[p], endValue, index, targets);\n } else {\n _missingPlugin(p, endValue);\n\n continue;\n }\n } else {\n _tweenComplexCSSString.call(this, target, p, startValue, endValue);\n }\n\n props.push(p);\n }\n }\n\n hasPriority && _sortPropTweensByPriority(this);\n },\n get: _get,\n aliases: _propertyAliases,\n getSetter: function getSetter(target, property, plugin) {\n //returns a setter function that accepts target, property, value and applies it accordingly. Remember, properties like \"x\" aren't as simple as target.style.property = value because they've got to be applied to a proxy object and then merged into a transform string in a renderer.\n var p = _propertyAliases[property];\n p && p.indexOf(\",\") < 0 && (property = p);\n return property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, \"x\")) ? plugin && _recentSetterPlugin === plugin ? property === \"scale\" ? _setterScale : _setterTransform : (_recentSetterPlugin = plugin || {}) && (property === \"scale\" ? _setterScaleWithRender : _setterTransformWithRender) : target.style && !_isUndefined(target.style[property]) ? _setterCSSStyle : ~property.indexOf(\"-\") ? _setterCSSProp : _getSetter(target, property);\n },\n core: {\n _removeProperty: _removeProperty,\n _getMatrix: _getMatrix\n }\n};\ngsap.utils.checkPrefix = _checkPropPrefix;\n\n(function (positionAndScale, rotation, others, aliases) {\n var all = _forEachName(positionAndScale + \",\" + rotation + \",\" + others, function (name) {\n _transformProps[name] = 1;\n });\n\n _forEachName(rotation, function (name) {\n _config.units[name] = \"deg\";\n _rotationalProperties[name] = 1;\n });\n\n _propertyAliases[all[13]] = positionAndScale + \",\" + rotation;\n\n _forEachName(aliases, function (name) {\n var split = name.split(\":\");\n _propertyAliases[split[1]] = all[split[0]];\n });\n})(\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\", \"rotation,rotationX,rotationY,skewX,skewY\", \"transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\", \"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\");\n\n_forEachName(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\", function (name) {\n _config.units[name] = \"px\";\n});\n\ngsap.registerPlugin(CSSPlugin);\nexport { CSSPlugin as default, _getBBox, _createElement, _checkPropPrefix as checkPrefix };","function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }\n\n/*!\n * GSAP 3.7.1\n * https://greensock.com\n *\n * @license Copyright 2008-2021, GreenSock. All rights reserved.\n * Subject to the terms at https://greensock.com/standard-license or for\n * Club GreenSock members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n\n/* eslint-disable */\nvar _config = {\n autoSleep: 120,\n force3D: \"auto\",\n nullTargetWarn: 1,\n units: {\n lineHeight: \"\"\n }\n},\n _defaults = {\n duration: .5,\n overwrite: false,\n delay: 0\n},\n _suppressOverwrites,\n _bigNum = 1e8,\n _tinyNum = 1 / _bigNum,\n _2PI = Math.PI * 2,\n _HALF_PI = _2PI / 4,\n _gsID = 0,\n _sqrt = Math.sqrt,\n _cos = Math.cos,\n _sin = Math.sin,\n _isString = function _isString(value) {\n return typeof value === \"string\";\n},\n _isFunction = function _isFunction(value) {\n return typeof value === \"function\";\n},\n _isNumber = function _isNumber(value) {\n return typeof value === \"number\";\n},\n _isUndefined = function _isUndefined(value) {\n return typeof value === \"undefined\";\n},\n _isObject = function _isObject(value) {\n return typeof value === \"object\";\n},\n _isNotFalse = function _isNotFalse(value) {\n return value !== false;\n},\n _windowExists = function _windowExists() {\n return typeof window !== \"undefined\";\n},\n _isFuncOrString = function _isFuncOrString(value) {\n return _isFunction(value) || _isString(value);\n},\n _isTypedArray = typeof ArrayBuffer === \"function\" && ArrayBuffer.isView || function () {},\n // note: IE10 has ArrayBuffer, but NOT ArrayBuffer.isView().\n_isArray = Array.isArray,\n _strictNumExp = /(?:-?\\.?\\d|\\.)+/gi,\n //only numbers (including negatives and decimals) but NOT relative values.\n_numExp = /[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,\n //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8.\n_numWithUnitExp = /[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,\n _complexStringNumExp = /[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,\n //duplicate so that while we're looping through matches from exec(), it doesn't contaminate the lastIndex of _numExp which we use to search for colors too.\n_relExp = /[+-]=-?[.\\d]+/,\n _delimitedValueExp = /[^,'\"\\[\\]\\s]+/gi,\n // previously /[#\\-+.]*\\b[a-z\\d\\-=+%.]+/gi but didn't catch special characters.\n_unitExp = /[\\d.+\\-=]+(?:e[-+]\\d*)*/i,\n _globalTimeline,\n _win,\n _coreInitted,\n _doc,\n _globals = {},\n _installScope = {},\n _coreReady,\n _install = function _install(scope) {\n return (_installScope = _merge(scope, _globals)) && gsap;\n},\n _missingPlugin = function _missingPlugin(property, value) {\n return console.warn(\"Invalid property\", property, \"set to\", value, \"Missing plugin? gsap.registerPlugin()\");\n},\n _warn = function _warn(message, suppress) {\n return !suppress && console.warn(message);\n},\n _addGlobal = function _addGlobal(name, obj) {\n return name && (_globals[name] = obj) && _installScope && (_installScope[name] = obj) || _globals;\n},\n _emptyFunc = function _emptyFunc() {\n return 0;\n},\n _reservedProps = {},\n _lazyTweens = [],\n _lazyLookup = {},\n _lastRenderedFrame,\n _plugins = {},\n _effects = {},\n _nextGCFrame = 30,\n _harnessPlugins = [],\n _callbackNames = \"\",\n _harness = function _harness(targets) {\n var target = targets[0],\n harnessPlugin,\n i;\n _isObject(target) || _isFunction(target) || (targets = [targets]);\n\n if (!(harnessPlugin = (target._gsap || {}).harness)) {\n // find the first target with a harness. We assume targets passed into an animation will be of similar type, meaning the same kind of harness can be used for them all (performance optimization)\n i = _harnessPlugins.length;\n\n while (i-- && !_harnessPlugins[i].targetTest(target)) {}\n\n harnessPlugin = _harnessPlugins[i];\n }\n\n i = targets.length;\n\n while (i--) {\n targets[i] && (targets[i]._gsap || (targets[i]._gsap = new GSCache(targets[i], harnessPlugin))) || targets.splice(i, 1);\n }\n\n return targets;\n},\n _getCache = function _getCache(target) {\n return target._gsap || _harness(toArray(target))[0]._gsap;\n},\n _getProperty = function _getProperty(target, property, v) {\n return (v = target[property]) && _isFunction(v) ? target[property]() : _isUndefined(v) && target.getAttribute && target.getAttribute(property) || v;\n},\n _forEachName = function _forEachName(names, func) {\n return (names = names.split(\",\")).forEach(func) || names;\n},\n //split a comma-delimited list of names into an array, then run a forEach() function and return the split array (this is just a way to consolidate/shorten some code).\n_round = function _round(value) {\n return Math.round(value * 100000) / 100000 || 0;\n},\n _arrayContainsAny = function _arrayContainsAny(toSearch, toFind) {\n //searches one array to find matches for any of the items in the toFind array. As soon as one is found, it returns true. It does NOT return all the matches; it's simply a boolean search.\n var l = toFind.length,\n i = 0;\n\n for (; toSearch.indexOf(toFind[i]) < 0 && ++i < l;) {}\n\n return i < l;\n},\n _lazyRender = function _lazyRender() {\n var l = _lazyTweens.length,\n a = _lazyTweens.slice(0),\n i,\n tween;\n\n _lazyLookup = {};\n _lazyTweens.length = 0;\n\n for (i = 0; i < l; i++) {\n tween = a[i];\n tween && tween._lazy && (tween.render(tween._lazy[0], tween._lazy[1], true)._lazy = 0);\n }\n},\n _lazySafeRender = function _lazySafeRender(animation, time, suppressEvents, force) {\n _lazyTweens.length && _lazyRender();\n animation.render(time, suppressEvents, force);\n _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.\n},\n _numericIfPossible = function _numericIfPossible(value) {\n var n = parseFloat(value);\n return (n || n === 0) && (value + \"\").match(_delimitedValueExp).length < 2 ? n : _isString(value) ? value.trim() : value;\n},\n _passThrough = function _passThrough(p) {\n return p;\n},\n _setDefaults = function _setDefaults(obj, defaults) {\n for (var p in defaults) {\n p in obj || (obj[p] = defaults[p]);\n }\n\n return obj;\n},\n _setKeyframeDefaults = function _setKeyframeDefaults(obj, defaults) {\n for (var p in defaults) {\n p in obj || p === \"duration\" || p === \"ease\" || (obj[p] = defaults[p]);\n }\n},\n _merge = function _merge(base, toMerge) {\n for (var p in toMerge) {\n base[p] = toMerge[p];\n }\n\n return base;\n},\n _mergeDeep = function _mergeDeep(base, toMerge) {\n for (var p in toMerge) {\n p !== \"__proto__\" && p !== \"constructor\" && p !== \"prototype\" && (base[p] = _isObject(toMerge[p]) ? _mergeDeep(base[p] || (base[p] = {}), toMerge[p]) : toMerge[p]);\n }\n\n return base;\n},\n _copyExcluding = function _copyExcluding(obj, excluding) {\n var copy = {},\n p;\n\n for (p in obj) {\n p in excluding || (copy[p] = obj[p]);\n }\n\n return copy;\n},\n _inheritDefaults = function _inheritDefaults(vars) {\n var parent = vars.parent || _globalTimeline,\n func = vars.keyframes ? _setKeyframeDefaults : _setDefaults;\n\n if (_isNotFalse(vars.inherit)) {\n while (parent) {\n func(vars, parent.vars.defaults);\n parent = parent.parent || parent._dp;\n }\n }\n\n return vars;\n},\n _arraysMatch = function _arraysMatch(a1, a2) {\n var i = a1.length,\n match = i === a2.length;\n\n while (match && i-- && a1[i] === a2[i]) {}\n\n return i < 0;\n},\n _addLinkedListItem = function _addLinkedListItem(parent, child, firstProp, lastProp, sortBy) {\n if (firstProp === void 0) {\n firstProp = \"_first\";\n }\n\n if (lastProp === void 0) {\n lastProp = \"_last\";\n }\n\n var prev = parent[lastProp],\n t;\n\n if (sortBy) {\n t = child[sortBy];\n\n while (prev && prev[sortBy] > t) {\n prev = prev._prev;\n }\n }\n\n if (prev) {\n child._next = prev._next;\n prev._next = child;\n } else {\n child._next = parent[firstProp];\n parent[firstProp] = child;\n }\n\n if (child._next) {\n child._next._prev = child;\n } else {\n parent[lastProp] = child;\n }\n\n child._prev = prev;\n child.parent = child._dp = parent;\n return child;\n},\n _removeLinkedListItem = function _removeLinkedListItem(parent, child, firstProp, lastProp) {\n if (firstProp === void 0) {\n firstProp = \"_first\";\n }\n\n if (lastProp === void 0) {\n lastProp = \"_last\";\n }\n\n var prev = child._prev,\n next = child._next;\n\n if (prev) {\n prev._next = next;\n } else if (parent[firstProp] === child) {\n parent[firstProp] = next;\n }\n\n if (next) {\n next._prev = prev;\n } else if (parent[lastProp] === child) {\n parent[lastProp] = prev;\n }\n\n child._next = child._prev = child.parent = null; // don't delete the _dp just so we can revert if necessary. But parent should be null to indicate the item isn't in a linked list.\n},\n _removeFromParent = function _removeFromParent(child, onlyIfParentHasAutoRemove) {\n child.parent && (!onlyIfParentHasAutoRemove || child.parent.autoRemoveChildren) && child.parent.remove(child);\n child._act = 0;\n},\n _uncache = function _uncache(animation, child) {\n if (animation && (!child || child._end > animation._dur || child._start < 0)) {\n // performance optimization: if a child animation is passed in we should only uncache if that child EXTENDS the animation (its end time is beyond the end)\n var a = animation;\n\n while (a) {\n a._dirty = 1;\n a = a.parent;\n }\n }\n\n return animation;\n},\n _recacheAncestors = function _recacheAncestors(animation) {\n var parent = animation.parent;\n\n while (parent && parent.parent) {\n //sometimes we must force a re-sort of all children and update the duration/totalDuration of all ancestor timelines immediately in case, for example, in the middle of a render loop, one tween alters another tween's timeScale which shoves its startTime before 0, forcing the parent timeline to shift around and shiftChildren() which could affect that next tween's render (startTime). Doesn't matter for the root timeline though.\n parent._dirty = 1;\n parent.totalDuration();\n parent = parent.parent;\n }\n\n return animation;\n},\n _hasNoPausedAncestors = function _hasNoPausedAncestors(animation) {\n return !animation || animation._ts && _hasNoPausedAncestors(animation.parent);\n},\n _elapsedCycleDuration = function _elapsedCycleDuration(animation) {\n return animation._repeat ? _animationCycle(animation._tTime, animation = animation.duration() + animation._rDelay) * animation : 0;\n},\n // feed in the totalTime and cycleDuration and it'll return the cycle (iteration minus 1) and if the playhead is exactly at the very END, it will NOT bump up to the next cycle.\n_animationCycle = function _animationCycle(tTime, cycleDuration) {\n var whole = Math.floor(tTime /= cycleDuration);\n return tTime && whole === tTime ? whole - 1 : whole;\n},\n _parentToChildTotalTime = function _parentToChildTotalTime(parentTime, child) {\n return (parentTime - child._start) * child._ts + (child._ts >= 0 ? 0 : child._dirty ? child.totalDuration() : child._tDur);\n},\n _setEnd = function _setEnd(animation) {\n return animation._end = _round(animation._start + (animation._tDur / Math.abs(animation._ts || animation._rts || _tinyNum) || 0));\n},\n _alignPlayhead = function _alignPlayhead(animation, totalTime) {\n // adjusts the animation's _start and _end according to the provided totalTime (only if the parent's smoothChildTiming is true and the animation isn't paused). It doesn't do any rendering or forcing things back into parent timelines, etc. - that's what totalTime() is for.\n var parent = animation._dp;\n\n if (parent && parent.smoothChildTiming && animation._ts) {\n animation._start = _round(parent._time - (animation._ts > 0 ? totalTime / animation._ts : ((animation._dirty ? animation.totalDuration() : animation._tDur) - totalTime) / -animation._ts));\n\n _setEnd(animation);\n\n parent._dirty || _uncache(parent, animation); //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.\n }\n\n return animation;\n},\n\n/*\n_totalTimeToTime = (clampedTotalTime, duration, repeat, repeatDelay, yoyo) => {\n\tlet cycleDuration = duration + repeatDelay,\n\t\ttime = _round(clampedTotalTime % cycleDuration);\n\tif (time > duration) {\n\t\ttime = duration;\n\t}\n\treturn (yoyo && (~~(clampedTotalTime / cycleDuration) & 1)) ? duration - time : time;\n},\n*/\n_postAddChecks = function _postAddChecks(timeline, child) {\n var t;\n\n if (child._time || child._initted && !child._dur) {\n //in case, for example, the _start is moved on a tween that has already rendered. Imagine it's at its end state, then the startTime is moved WAY later (after the end of this timeline), it should render at its beginning.\n t = _parentToChildTotalTime(timeline.rawTime(), child);\n\n if (!child._dur || _clamp(0, child.totalDuration(), t) - child._tTime > _tinyNum) {\n child.render(t, true);\n }\n } //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.\n\n\n if (_uncache(timeline, child)._dp && timeline._initted && timeline._time >= timeline._dur && timeline._ts) {\n //in case any of the ancestors had completed but should now be enabled...\n if (timeline._dur < timeline.duration()) {\n t = timeline;\n\n while (t._dp) {\n t.rawTime() >= 0 && t.totalTime(t._tTime); //moves the timeline (shifts its startTime) if necessary, and also enables it. If it's currently zero, though, it may not be scheduled to render until later so there's no need to force it to align with the current playhead position. Only move to catch up with the playhead.\n\n t = t._dp;\n }\n }\n\n timeline._zTime = -_tinyNum; // helps ensure that the next render() will be forced (crossingStart = true in render()), even if the duration hasn't changed (we're adding a child which would need to get rendered). Definitely an edge case. Note: we MUST do this AFTER the loop above where the totalTime() might trigger a render() because this _addToTimeline() method gets called from the Animation constructor, BEFORE tweens even record their targets, etc. so we wouldn't want things to get triggered in the wrong order.\n }\n},\n _addToTimeline = function _addToTimeline(timeline, child, position, skipChecks) {\n child.parent && _removeFromParent(child);\n child._start = _round((_isNumber(position) ? position : position || timeline !== _globalTimeline ? _parsePosition(timeline, position, child) : timeline._time) + child._delay);\n child._end = _round(child._start + (child.totalDuration() / Math.abs(child.timeScale()) || 0));\n\n _addLinkedListItem(timeline, child, \"_first\", \"_last\", timeline._sort ? \"_start\" : 0);\n\n _isFromOrFromStart(child) || (timeline._recent = child);\n skipChecks || _postAddChecks(timeline, child);\n return timeline;\n},\n _scrollTrigger = function _scrollTrigger(animation, trigger) {\n return (_globals.ScrollTrigger || _missingPlugin(\"scrollTrigger\", trigger)) && _globals.ScrollTrigger.create(trigger, animation);\n},\n _attemptInitTween = function _attemptInitTween(tween, totalTime, force, suppressEvents) {\n _initTween(tween, totalTime);\n\n if (!tween._initted) {\n return 1;\n }\n\n if (!force && tween._pt && (tween._dur && tween.vars.lazy !== false || !tween._dur && tween.vars.lazy) && _lastRenderedFrame !== _ticker.frame) {\n _lazyTweens.push(tween);\n\n tween._lazy = [totalTime, suppressEvents];\n return 1;\n }\n},\n _parentPlayheadIsBeforeStart = function _parentPlayheadIsBeforeStart(_ref) {\n var parent = _ref.parent;\n return parent && parent._ts && parent._initted && !parent._lock && (parent.rawTime() < 0 || _parentPlayheadIsBeforeStart(parent));\n},\n // check parent's _lock because when a timeline repeats/yoyos and does its artificial wrapping, we shouldn't force the ratio back to 0\n_isFromOrFromStart = function _isFromOrFromStart(_ref2) {\n var data = _ref2.data;\n return data === \"isFromStart\" || data === \"isStart\";\n},\n _renderZeroDurationTween = function _renderZeroDurationTween(tween, totalTime, suppressEvents, force) {\n var prevRatio = tween.ratio,\n ratio = totalTime < 0 || !totalTime && (!tween._start && _parentPlayheadIsBeforeStart(tween) && !(!tween._initted && _isFromOrFromStart(tween)) || (tween._ts < 0 || tween._dp._ts < 0) && !_isFromOrFromStart(tween)) ? 0 : 1,\n // if the tween or its parent is reversed and the totalTime is 0, we should go to a ratio of 0. Edge case: if a from() or fromTo() stagger tween is placed later in a timeline, the \"startAt\" zero-duration tween could initially render at a time when the parent timeline's playhead is technically BEFORE where this tween is, so make sure that any \"from\" and \"fromTo\" startAt tweens are rendered the first time at a ratio of 1.\n repeatDelay = tween._rDelay,\n tTime = 0,\n pt,\n iteration,\n prevIteration;\n\n if (repeatDelay && tween._repeat) {\n // in case there's a zero-duration tween that has a repeat with a repeatDelay\n tTime = _clamp(0, tween._tDur, totalTime);\n iteration = _animationCycle(tTime, repeatDelay);\n prevIteration = _animationCycle(tween._tTime, repeatDelay);\n tween._yoyo && iteration & 1 && (ratio = 1 - ratio);\n\n if (iteration !== prevIteration) {\n prevRatio = 1 - ratio;\n tween.vars.repeatRefresh && tween._initted && tween.invalidate();\n }\n }\n\n if (ratio !== prevRatio || force || tween._zTime === _tinyNum || !totalTime && tween._zTime) {\n if (!tween._initted && _attemptInitTween(tween, totalTime, force, suppressEvents)) {\n // if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.\n return;\n }\n\n prevIteration = tween._zTime;\n tween._zTime = totalTime || (suppressEvents ? _tinyNum : 0); // when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.\n\n suppressEvents || (suppressEvents = totalTime && !prevIteration); // if it was rendered previously at exactly 0 (_zTime) and now the playhead is moving away, DON'T fire callbacks otherwise they'll seem like duplicates.\n\n tween.ratio = ratio;\n tween._from && (ratio = 1 - ratio);\n tween._time = 0;\n tween._tTime = tTime;\n pt = tween._pt;\n\n while (pt) {\n pt.r(ratio, pt.d);\n pt = pt._next;\n }\n\n tween._startAt && totalTime < 0 && tween._startAt.render(totalTime, true, true);\n tween._onUpdate && !suppressEvents && _callback(tween, \"onUpdate\");\n tTime && tween._repeat && !suppressEvents && tween.parent && _callback(tween, \"onRepeat\");\n\n if ((totalTime >= tween._tDur || totalTime < 0) && tween.ratio === ratio) {\n ratio && _removeFromParent(tween, 1);\n\n if (!suppressEvents) {\n _callback(tween, ratio ? \"onComplete\" : \"onReverseComplete\", true);\n\n tween._prom && tween._prom();\n }\n }\n } else if (!tween._zTime) {\n tween._zTime = totalTime;\n }\n},\n _findNextPauseTween = function _findNextPauseTween(animation, prevTime, time) {\n var child;\n\n if (time > prevTime) {\n child = animation._first;\n\n while (child && child._start <= time) {\n if (!child._dur && child.data === \"isPause\" && child._start > prevTime) {\n return child;\n }\n\n child = child._next;\n }\n } else {\n child = animation._last;\n\n while (child && child._start >= time) {\n if (!child._dur && child.data === \"isPause\" && child._start < prevTime) {\n return child;\n }\n\n child = child._prev;\n }\n }\n},\n _setDuration = function _setDuration(animation, duration, skipUncache, leavePlayhead) {\n var repeat = animation._repeat,\n dur = _round(duration) || 0,\n totalProgress = animation._tTime / animation._tDur;\n totalProgress && !leavePlayhead && (animation._time *= dur / animation._dur);\n animation._dur = dur;\n animation._tDur = !repeat ? dur : repeat < 0 ? 1e10 : _round(dur * (repeat + 1) + animation._rDelay * repeat);\n totalProgress && !leavePlayhead ? _alignPlayhead(animation, animation._tTime = animation._tDur * totalProgress) : animation.parent && _setEnd(animation);\n skipUncache || _uncache(animation.parent, animation);\n return animation;\n},\n _onUpdateTotalDuration = function _onUpdateTotalDuration(animation) {\n return animation instanceof Timeline ? _uncache(animation) : _setDuration(animation, animation._dur);\n},\n _zeroPosition = {\n _start: 0,\n endTime: _emptyFunc,\n totalDuration: _emptyFunc\n},\n _parsePosition = function _parsePosition(animation, position, percentAnimation) {\n var labels = animation.labels,\n recent = animation._recent || _zeroPosition,\n clippedDuration = animation.duration() >= _bigNum ? recent.endTime(false) : animation._dur,\n //in case there's a child that infinitely repeats, users almost never intend for the insertion point of a new child to be based on a SUPER long value like that so we clip it and assume the most recently-added child's endTime should be used instead.\n i,\n offset,\n isPercent;\n\n if (_isString(position) && (isNaN(position) || position in labels)) {\n //if the string is a number like \"1\", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).\n offset = position.charAt(0);\n isPercent = position.substr(-1) === \"%\";\n i = position.indexOf(\"=\");\n\n if (offset === \"<\" || offset === \">\") {\n i >= 0 && (position = position.replace(/=/, \"\"));\n return (offset === \"<\" ? recent._start : recent.endTime(recent._repeat >= 0)) + (parseFloat(position.substr(1)) || 0) * (isPercent ? (i < 0 ? recent : percentAnimation).totalDuration() / 100 : 1);\n }\n\n if (i < 0) {\n position in labels || (labels[position] = clippedDuration);\n return labels[position];\n }\n\n offset = parseFloat(position.charAt(i - 1) + position.substr(i + 1));\n\n if (isPercent && percentAnimation) {\n offset = offset / 100 * (_isArray(percentAnimation) ? percentAnimation[0] : percentAnimation).totalDuration();\n }\n\n return i > 1 ? _parsePosition(animation, position.substr(0, i - 1), percentAnimation) + offset : clippedDuration + offset;\n }\n\n return position == null ? clippedDuration : +position;\n},\n _createTweenType = function _createTweenType(type, params, timeline) {\n var isLegacy = _isNumber(params[1]),\n varsIndex = (isLegacy ? 2 : 1) + (type < 2 ? 0 : 1),\n vars = params[varsIndex],\n irVars,\n parent;\n\n isLegacy && (vars.duration = params[1]);\n vars.parent = timeline;\n\n if (type) {\n irVars = vars;\n parent = timeline;\n\n while (parent && !(\"immediateRender\" in irVars)) {\n // inheritance hasn't happened yet, but someone may have set a default in an ancestor timeline. We could do vars.immediateRender = _isNotFalse(_inheritDefaults(vars).immediateRender) but that'd exact a slight performance penalty because _inheritDefaults() also runs in the Tween constructor. We're paying a small kb price here to gain speed.\n irVars = parent.vars.defaults || {};\n parent = _isNotFalse(parent.vars.inherit) && parent.parent;\n }\n\n vars.immediateRender = _isNotFalse(irVars.immediateRender);\n type < 2 ? vars.runBackwards = 1 : vars.startAt = params[varsIndex - 1]; // \"from\" vars\n }\n\n return new Tween(params[0], vars, params[varsIndex + 1]);\n},\n _conditionalReturn = function _conditionalReturn(value, func) {\n return value || value === 0 ? func(value) : func;\n},\n _clamp = function _clamp(min, max, value) {\n return value < min ? min : value > max ? max : value;\n},\n getUnit = function getUnit(value) {\n if (typeof value !== \"string\") {\n return \"\";\n }\n\n var v = _unitExp.exec(value);\n\n return v ? value.substr(v.index + v[0].length) : \"\";\n},\n // note: protect against padded numbers as strings, like \"100.100\". That shouldn't return \"00\" as the unit. If it's numeric, return no unit.\nclamp = function clamp(min, max, value) {\n return _conditionalReturn(value, function (v) {\n return _clamp(min, max, v);\n });\n},\n _slice = [].slice,\n _isArrayLike = function _isArrayLike(value, nonEmpty) {\n return value && _isObject(value) && \"length\" in value && (!nonEmpty && !value.length || value.length - 1 in value && _isObject(value[0])) && !value.nodeType && value !== _win;\n},\n _flatten = function _flatten(ar, leaveStrings, accumulator) {\n if (accumulator === void 0) {\n accumulator = [];\n }\n\n return ar.forEach(function (value) {\n var _accumulator;\n\n return _isString(value) && !leaveStrings || _isArrayLike(value, 1) ? (_accumulator = accumulator).push.apply(_accumulator, toArray(value)) : accumulator.push(value);\n }) || accumulator;\n},\n //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.\ntoArray = function toArray(value, scope, leaveStrings) {\n return _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call((scope || _doc).querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];\n},\n selector = function selector(value) {\n value = toArray(value)[0] || _warn(\"Invalid scope\") || {};\n return function (v) {\n var el = value.current || value.nativeElement || value;\n return toArray(v, el.querySelectorAll ? el : el === value ? _warn(\"Invalid scope\") || _doc.createElement(\"div\") : value);\n };\n},\n shuffle = function shuffle(a) {\n return a.sort(function () {\n return .5 - Math.random();\n });\n},\n // alternative that's a bit faster and more reliably diverse but bigger: for (let j, v, i = a.length; i; j = Math.floor(Math.random() * i), v = a[--i], a[i] = a[j], a[j] = v); return a;\n//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following\ndistribute = function distribute(v) {\n if (_isFunction(v)) {\n return v;\n }\n\n var vars = _isObject(v) ? v : {\n each: v\n },\n //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total \"amount\" that's chunked out among them all.\n ease = _parseEase(vars.ease),\n from = vars.from || 0,\n base = parseFloat(vars.base) || 0,\n cache = {},\n isDecimal = from > 0 && from < 1,\n ratios = isNaN(from) || isDecimal,\n axis = vars.axis,\n ratioX = from,\n ratioY = from;\n\n if (_isString(from)) {\n ratioX = ratioY = {\n center: .5,\n edges: .5,\n end: 1\n }[from] || 0;\n } else if (!isDecimal && ratios) {\n ratioX = from[0];\n ratioY = from[1];\n }\n\n return function (i, target, a) {\n var l = (a || vars).length,\n distances = cache[l],\n originX,\n originY,\n x,\n y,\n d,\n j,\n max,\n min,\n wrapAt;\n\n if (!distances) {\n wrapAt = vars.grid === \"auto\" ? 0 : (vars.grid || [1, _bigNum])[1];\n\n if (!wrapAt) {\n max = -_bigNum;\n\n while (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) {}\n\n wrapAt--;\n }\n\n distances = cache[l] = [];\n originX = ratios ? Math.min(wrapAt, l) * ratioX - .5 : from % wrapAt;\n originY = ratios ? l * ratioY / wrapAt - .5 : from / wrapAt | 0;\n max = 0;\n min = _bigNum;\n\n for (j = 0; j < l; j++) {\n x = j % wrapAt - originX;\n y = originY - (j / wrapAt | 0);\n distances[j] = d = !axis ? _sqrt(x * x + y * y) : Math.abs(axis === \"y\" ? y : x);\n d > max && (max = d);\n d < min && (min = d);\n }\n\n from === \"random\" && shuffle(distances);\n distances.max = max - min;\n distances.min = min;\n distances.v = l = (parseFloat(vars.amount) || parseFloat(vars.each) * (wrapAt > l ? l - 1 : !axis ? Math.max(wrapAt, l / wrapAt) : axis === \"y\" ? l / wrapAt : wrapAt) || 0) * (from === \"edges\" ? -1 : 1);\n distances.b = l < 0 ? base - l : base;\n distances.u = getUnit(vars.amount || vars.each) || 0; //unit\n\n ease = ease && l < 0 ? _invertEase(ease) : ease;\n }\n\n l = (distances[i] - distances.min) / distances.max || 0;\n return _round(distances.b + (ease ? ease(l) : l) * distances.v) + distances.u; //round in order to work around floating point errors\n };\n},\n _roundModifier = function _roundModifier(v) {\n //pass in 0.1 get a function that'll round to the nearest tenth, or 5 to round to the closest 5, or 0.001 to the closest 1000th, etc.\n var p = v < 1 ? Math.pow(10, (v + \"\").length - 2) : 1; //to avoid floating point math errors (like 24 * 0.1 == 2.4000000000000004), we chop off at a specific number of decimal places (much faster than toFixed()\n\n return function (raw) {\n var n = Math.round(parseFloat(raw) / v) * v * p;\n return (n - n % 1) / p + (_isNumber(raw) ? 0 : getUnit(raw)); // n - n % 1 replaces Math.floor() in order to handle negative values properly. For example, Math.floor(-150.00000000000003) is 151!\n };\n},\n snap = function snap(snapTo, value) {\n var isArray = _isArray(snapTo),\n radius,\n is2D;\n\n if (!isArray && _isObject(snapTo)) {\n radius = isArray = snapTo.radius || _bigNum;\n\n if (snapTo.values) {\n snapTo = toArray(snapTo.values);\n\n if (is2D = !_isNumber(snapTo[0])) {\n radius *= radius; //performance optimization so we don't have to Math.sqrt() in the loop.\n }\n } else {\n snapTo = _roundModifier(snapTo.increment);\n }\n }\n\n return _conditionalReturn(value, !isArray ? _roundModifier(snapTo) : _isFunction(snapTo) ? function (raw) {\n is2D = snapTo(raw);\n return Math.abs(is2D - raw) <= radius ? is2D : raw;\n } : function (raw) {\n var x = parseFloat(is2D ? raw.x : raw),\n y = parseFloat(is2D ? raw.y : 0),\n min = _bigNum,\n closest = 0,\n i = snapTo.length,\n dx,\n dy;\n\n while (i--) {\n if (is2D) {\n dx = snapTo[i].x - x;\n dy = snapTo[i].y - y;\n dx = dx * dx + dy * dy;\n } else {\n dx = Math.abs(snapTo[i] - x);\n }\n\n if (dx < min) {\n min = dx;\n closest = i;\n }\n }\n\n closest = !radius || min <= radius ? snapTo[closest] : raw;\n return is2D || closest === raw || _isNumber(raw) ? closest : closest + getUnit(raw);\n });\n},\n random = function random(min, max, roundingIncrement, returnFunction) {\n return _conditionalReturn(_isArray(min) ? !max : roundingIncrement === true ? !!(roundingIncrement = 0) : !returnFunction, function () {\n return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + \"\").length - 2) : 1) && Math.floor(Math.round((min - roundingIncrement / 2 + Math.random() * (max - min + roundingIncrement * .99)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;\n });\n},\n pipe = function pipe() {\n for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {\n functions[_key] = arguments[_key];\n }\n\n return function (value) {\n return functions.reduce(function (v, f) {\n return f(v);\n }, value);\n };\n},\n unitize = function unitize(func, unit) {\n return function (value) {\n return func(parseFloat(value)) + (unit || getUnit(value));\n };\n},\n normalize = function normalize(min, max, value) {\n return mapRange(min, max, 0, 1, value);\n},\n _wrapArray = function _wrapArray(a, wrapper, value) {\n return _conditionalReturn(value, function (index) {\n return a[~~wrapper(index)];\n });\n},\n wrap = function wrap(min, max, value) {\n // NOTE: wrap() CANNOT be an arrow function! A very odd compiling bug causes problems (unrelated to GSAP).\n var range = max - min;\n return _isArray(min) ? _wrapArray(min, wrap(0, min.length), max) : _conditionalReturn(value, function (value) {\n return (range + (value - min) % range) % range + min;\n });\n},\n wrapYoyo = function wrapYoyo(min, max, value) {\n var range = max - min,\n total = range * 2;\n return _isArray(min) ? _wrapArray(min, wrapYoyo(0, min.length - 1), max) : _conditionalReturn(value, function (value) {\n value = (total + (value - min) % total) % total || 0;\n return min + (value > range ? total - value : value);\n });\n},\n _replaceRandom = function _replaceRandom(value) {\n //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])\n var prev = 0,\n s = \"\",\n i,\n nums,\n end,\n isArray;\n\n while (~(i = value.indexOf(\"random(\", prev))) {\n end = value.indexOf(\")\", i);\n isArray = value.charAt(i + 7) === \"[\";\n nums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);\n s += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], isArray ? 0 : +nums[1], +nums[2] || 1e-5);\n prev = end + 1;\n }\n\n return s + value.substr(prev, value.length - prev);\n},\n mapRange = function mapRange(inMin, inMax, outMin, outMax, value) {\n var inRange = inMax - inMin,\n outRange = outMax - outMin;\n return _conditionalReturn(value, function (value) {\n return outMin + ((value - inMin) / inRange * outRange || 0);\n });\n},\n interpolate = function interpolate(start, end, progress, mutate) {\n var func = isNaN(start + end) ? 0 : function (p) {\n return (1 - p) * start + p * end;\n };\n\n if (!func) {\n var isString = _isString(start),\n master = {},\n p,\n i,\n interpolators,\n l,\n il;\n\n progress === true && (mutate = 1) && (progress = null);\n\n if (isString) {\n start = {\n p: start\n };\n end = {\n p: end\n };\n } else if (_isArray(start) && !_isArray(end)) {\n interpolators = [];\n l = start.length;\n il = l - 2;\n\n for (i = 1; i < l; i++) {\n interpolators.push(interpolate(start[i - 1], start[i])); //build the interpolators up front as a performance optimization so that when the function is called many times, it can just reuse them.\n }\n\n l--;\n\n func = function func(p) {\n p *= l;\n var i = Math.min(il, ~~p);\n return interpolators[i](p - i);\n };\n\n progress = end;\n } else if (!mutate) {\n start = _merge(_isArray(start) ? [] : {}, start);\n }\n\n if (!interpolators) {\n for (p in end) {\n _addPropTween.call(master, start, p, \"get\", end[p]);\n }\n\n func = function func(p) {\n return _renderPropTweens(p, master) || (isString ? start.p : start);\n };\n }\n }\n\n return _conditionalReturn(progress, func);\n},\n _getLabelInDirection = function _getLabelInDirection(timeline, fromTime, backward) {\n //used for nextLabel() and previousLabel()\n var labels = timeline.labels,\n min = _bigNum,\n p,\n distance,\n label;\n\n for (p in labels) {\n distance = labels[p] - fromTime;\n\n if (distance < 0 === !!backward && distance && min > (distance = Math.abs(distance))) {\n label = p;\n min = distance;\n }\n }\n\n return label;\n},\n _callback = function _callback(animation, type, executeLazyFirst) {\n var v = animation.vars,\n callback = v[type],\n params,\n scope;\n\n if (!callback) {\n return;\n }\n\n params = v[type + \"Params\"];\n scope = v.callbackScope || animation;\n executeLazyFirst && _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values.\n\n return params ? callback.apply(scope, params) : callback.call(scope);\n},\n _interrupt = function _interrupt(animation) {\n _removeFromParent(animation);\n\n animation.scrollTrigger && animation.scrollTrigger.kill(false);\n animation.progress() < 1 && _callback(animation, \"onInterrupt\");\n return animation;\n},\n _quickTween,\n _createPlugin = function _createPlugin(config) {\n config = !config.name && config[\"default\"] || config; //UMD packaging wraps things oddly, so for example MotionPathHelper becomes {MotionPathHelper:MotionPathHelper, default:MotionPathHelper}.\n\n var name = config.name,\n isFunc = _isFunction(config),\n Plugin = name && !isFunc && config.init ? function () {\n this._props = [];\n } : config,\n //in case someone passes in an object that's not a plugin, like CustomEase\n instanceDefaults = {\n init: _emptyFunc,\n render: _renderPropTweens,\n add: _addPropTween,\n kill: _killPropTweensOf,\n modifier: _addPluginModifier,\n rawVars: 0\n },\n statics = {\n targetTest: 0,\n get: 0,\n getSetter: _getSetter,\n aliases: {},\n register: 0\n };\n\n _wake();\n\n if (config !== Plugin) {\n if (_plugins[name]) {\n return;\n }\n\n _setDefaults(Plugin, _setDefaults(_copyExcluding(config, instanceDefaults), statics)); //static methods\n\n\n _merge(Plugin.prototype, _merge(instanceDefaults, _copyExcluding(config, statics))); //instance methods\n\n\n _plugins[Plugin.prop = name] = Plugin;\n\n if (config.targetTest) {\n _harnessPlugins.push(Plugin);\n\n _reservedProps[name] = 1;\n }\n\n name = (name === \"css\" ? \"CSS\" : name.charAt(0).toUpperCase() + name.substr(1)) + \"Plugin\"; //for the global name. \"motionPath\" should become MotionPathPlugin\n }\n\n _addGlobal(name, Plugin);\n\n config.register && config.register(gsap, Plugin, PropTween);\n},\n\n/*\n * --------------------------------------------------------------------------------------\n * COLORS\n * --------------------------------------------------------------------------------------\n */\n_255 = 255,\n _colorLookup = {\n aqua: [0, _255, _255],\n lime: [0, _255, 0],\n silver: [192, 192, 192],\n black: [0, 0, 0],\n maroon: [128, 0, 0],\n teal: [0, 128, 128],\n blue: [0, 0, _255],\n navy: [0, 0, 128],\n white: [_255, _255, _255],\n olive: [128, 128, 0],\n yellow: [_255, _255, 0],\n orange: [_255, 165, 0],\n gray: [128, 128, 128],\n purple: [128, 0, 128],\n green: [0, 128, 0],\n red: [_255, 0, 0],\n pink: [_255, 192, 203],\n cyan: [0, _255, _255],\n transparent: [_255, _255, _255, 0]\n},\n _hue = function _hue(h, m1, m2) {\n h = h < 0 ? h + 1 : h > 1 ? h - 1 : h;\n return (h * 6 < 1 ? m1 + (m2 - m1) * h * 6 : h < .5 ? m2 : h * 3 < 2 ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * _255 + .5 | 0;\n},\n splitColor = function splitColor(v, toHSL, forceAlpha) {\n var a = !v ? _colorLookup.black : _isNumber(v) ? [v >> 16, v >> 8 & _255, v & _255] : 0,\n r,\n g,\n b,\n h,\n s,\n l,\n max,\n min,\n d,\n wasHSL;\n\n if (!a) {\n if (v.substr(-1) === \",\") {\n //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:\"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)\" - in this example \"blue,\" has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.\n v = v.substr(0, v.length - 1);\n }\n\n if (_colorLookup[v]) {\n a = _colorLookup[v];\n } else if (v.charAt(0) === \"#\") {\n if (v.length < 6) {\n //for shorthand like #9F0 or #9F0F (could have alpha)\n r = v.charAt(1);\n g = v.charAt(2);\n b = v.charAt(3);\n v = \"#\" + r + r + g + g + b + b + (v.length === 5 ? v.charAt(4) + v.charAt(4) : \"\");\n }\n\n if (v.length === 9) {\n // hex with alpha, like #fd5e53ff\n a = parseInt(v.substr(1, 6), 16);\n return [a >> 16, a >> 8 & _255, a & _255, parseInt(v.substr(7), 16) / 255];\n }\n\n v = parseInt(v.substr(1), 16);\n a = [v >> 16, v >> 8 & _255, v & _255];\n } else if (v.substr(0, 3) === \"hsl\") {\n a = wasHSL = v.match(_strictNumExp);\n\n if (!toHSL) {\n h = +a[0] % 360 / 360;\n s = +a[1] / 100;\n l = +a[2] / 100;\n g = l <= .5 ? l * (s + 1) : l + s - l * s;\n r = l * 2 - g;\n a.length > 3 && (a[3] *= 1); //cast as number\n\n a[0] = _hue(h + 1 / 3, r, g);\n a[1] = _hue(h, r, g);\n a[2] = _hue(h - 1 / 3, r, g);\n } else if (~v.indexOf(\"=\")) {\n //if relative values are found, just return the raw strings with the relative prefixes in place.\n a = v.match(_numExp);\n forceAlpha && a.length < 4 && (a[3] = 1);\n return a;\n }\n } else {\n a = v.match(_strictNumExp) || _colorLookup.transparent;\n }\n\n a = a.map(Number);\n }\n\n if (toHSL && !wasHSL) {\n r = a[0] / _255;\n g = a[1] / _255;\n b = a[2] / _255;\n max = Math.max(r, g, b);\n min = Math.min(r, g, b);\n l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0;\n } else {\n d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;\n h *= 60;\n }\n\n a[0] = ~~(h + .5);\n a[1] = ~~(s * 100 + .5);\n a[2] = ~~(l * 100 + .5);\n }\n\n forceAlpha && a.length < 4 && (a[3] = 1);\n return a;\n},\n _colorOrderData = function _colorOrderData(v) {\n // strips out the colors from the string, finds all the numeric slots (with units) and returns an array of those. The Array also has a \"c\" property which is an Array of the index values where the colors belong. This is to help work around issues where there's a mis-matched order of color/numeric data like drop-shadow(#f00 0px 1px 2px) and drop-shadow(0x 1px 2px #f00). This is basically a helper function used in _formatColors()\n var values = [],\n c = [],\n i = -1;\n v.split(_colorExp).forEach(function (v) {\n var a = v.match(_numWithUnitExp) || [];\n values.push.apply(values, a);\n c.push(i += a.length + 1);\n });\n values.c = c;\n return values;\n},\n _formatColors = function _formatColors(s, toHSL, orderMatchData) {\n var result = \"\",\n colors = (s + result).match(_colorExp),\n type = toHSL ? \"hsla(\" : \"rgba(\",\n i = 0,\n c,\n shell,\n d,\n l;\n\n if (!colors) {\n return s;\n }\n\n colors = colors.map(function (color) {\n return (color = splitColor(color, toHSL, 1)) && type + (toHSL ? color[0] + \",\" + color[1] + \"%,\" + color[2] + \"%,\" + color[3] : color.join(\",\")) + \")\";\n });\n\n if (orderMatchData) {\n d = _colorOrderData(s);\n c = orderMatchData.c;\n\n if (c.join(result) !== d.c.join(result)) {\n shell = s.replace(_colorExp, \"1\").split(_numWithUnitExp);\n l = shell.length - 1;\n\n for (; i < l; i++) {\n result += shell[i] + (~c.indexOf(i) ? colors.shift() || type + \"0,0,0,0)\" : (d.length ? d : colors.length ? colors : orderMatchData).shift());\n }\n }\n }\n\n if (!shell) {\n shell = s.split(_colorExp);\n l = shell.length - 1;\n\n for (; i < l; i++) {\n result += shell[i] + colors[i];\n }\n }\n\n return result + shell[l];\n},\n _colorExp = function () {\n var s = \"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\",\n //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.,\n p;\n\n for (p in _colorLookup) {\n s += \"|\" + p + \"\\\\b\";\n }\n\n return new RegExp(s + \")\", \"gi\");\n}(),\n _hslExp = /hsl[a]?\\(/,\n _colorStringFilter = function _colorStringFilter(a) {\n var combined = a.join(\" \"),\n toHSL;\n _colorExp.lastIndex = 0;\n\n if (_colorExp.test(combined)) {\n toHSL = _hslExp.test(combined);\n a[1] = _formatColors(a[1], toHSL);\n a[0] = _formatColors(a[0], toHSL, _colorOrderData(a[1])); // make sure the order of numbers/colors match with the END value.\n\n return true;\n }\n},\n\n/*\n * --------------------------------------------------------------------------------------\n * TICKER\n * --------------------------------------------------------------------------------------\n */\n_tickerActive,\n _ticker = function () {\n var _getTime = Date.now,\n _lagThreshold = 500,\n _adjustedLag = 33,\n _startTime = _getTime(),\n _lastUpdate = _startTime,\n _gap = 1000 / 240,\n _nextTime = _gap,\n _listeners = [],\n _id,\n _req,\n _raf,\n _self,\n _delta,\n _i,\n _tick = function _tick(v) {\n var elapsed = _getTime() - _lastUpdate,\n manual = v === true,\n overlap,\n dispatch,\n time,\n frame;\n\n elapsed > _lagThreshold && (_startTime += elapsed - _adjustedLag);\n _lastUpdate += elapsed;\n time = _lastUpdate - _startTime;\n overlap = time - _nextTime;\n\n if (overlap > 0 || manual) {\n frame = ++_self.frame;\n _delta = time - _self.time * 1000;\n _self.time = time = time / 1000;\n _nextTime += overlap + (overlap >= _gap ? 4 : _gap - overlap);\n dispatch = 1;\n }\n\n manual || (_id = _req(_tick)); //make sure the request is made before we dispatch the \"tick\" event so that timing is maintained. Otherwise, if processing the \"tick\" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.\n\n if (dispatch) {\n for (_i = 0; _i < _listeners.length; _i++) {\n // use _i and check _listeners.length instead of a variable because a listener could get removed during the loop, and if that happens to an element less than the current index, it'd throw things off in the loop.\n _listeners[_i](time, _delta, frame, v);\n }\n }\n };\n\n _self = {\n time: 0,\n frame: 0,\n tick: function tick() {\n _tick(true);\n },\n deltaRatio: function deltaRatio(fps) {\n return _delta / (1000 / (fps || 60));\n },\n wake: function wake() {\n if (_coreReady) {\n if (!_coreInitted && _windowExists()) {\n _win = _coreInitted = window;\n _doc = _win.document || {};\n _globals.gsap = gsap;\n (_win.gsapVersions || (_win.gsapVersions = [])).push(gsap.version);\n\n _install(_installScope || _win.GreenSockGlobals || !_win.gsap && _win || {});\n\n _raf = _win.requestAnimationFrame;\n }\n\n _id && _self.sleep();\n\n _req = _raf || function (f) {\n return setTimeout(f, _nextTime - _self.time * 1000 + 1 | 0);\n };\n\n _tickerActive = 1;\n\n _tick(2);\n }\n },\n sleep: function sleep() {\n (_raf ? _win.cancelAnimationFrame : clearTimeout)(_id);\n _tickerActive = 0;\n _req = _emptyFunc;\n },\n lagSmoothing: function lagSmoothing(threshold, adjustedLag) {\n _lagThreshold = threshold || 1 / _tinyNum; //zero should be interpreted as basically unlimited\n\n _adjustedLag = Math.min(adjustedLag, _lagThreshold, 0);\n },\n fps: function fps(_fps) {\n _gap = 1000 / (_fps || 240);\n _nextTime = _self.time * 1000 + _gap;\n },\n add: function add(callback) {\n _listeners.indexOf(callback) < 0 && _listeners.push(callback);\n\n _wake();\n },\n remove: function remove(callback) {\n var i;\n ~(i = _listeners.indexOf(callback)) && _listeners.splice(i, 1) && _i >= i && _i--;\n },\n _listeners: _listeners\n };\n return _self;\n}(),\n _wake = function _wake() {\n return !_tickerActive && _ticker.wake();\n},\n //also ensures the core classes are initialized.\n\n/*\n* -------------------------------------------------\n* EASING\n* -------------------------------------------------\n*/\n_easeMap = {},\n _customEaseExp = /^[\\d.\\-M][\\d.\\-,\\s]/,\n _quotesExp = /[\"']/g,\n _parseObjectInString = function _parseObjectInString(value) {\n //takes a string like \"{wiggles:10, type:anticipate})\" and turns it into a real object. Notice it ends in \")\" and includes the {} wrappers. This is because we only use this function for parsing ease configs and prioritized optimization rather than reusability.\n var obj = {},\n split = value.substr(1, value.length - 3).split(\":\"),\n key = split[0],\n i = 1,\n l = split.length,\n index,\n val,\n parsedVal;\n\n for (; i < l; i++) {\n val = split[i];\n index = i !== l - 1 ? val.lastIndexOf(\",\") : val.length;\n parsedVal = val.substr(0, index);\n obj[key] = isNaN(parsedVal) ? parsedVal.replace(_quotesExp, \"\").trim() : +parsedVal;\n key = val.substr(index + 1).trim();\n }\n\n return obj;\n},\n _valueInParentheses = function _valueInParentheses(value) {\n var open = value.indexOf(\"(\") + 1,\n close = value.indexOf(\")\"),\n nested = value.indexOf(\"(\", open);\n return value.substring(open, ~nested && nested < close ? value.indexOf(\")\", close + 1) : close);\n},\n _configEaseFromString = function _configEaseFromString(name) {\n //name can be a string like \"elastic.out(1,0.5)\", and pass in _easeMap as obj and it'll parse it out and call the actual function like _easeMap.Elastic.easeOut.config(1,0.5). It will also parse custom ease strings as long as CustomEase is loaded and registered (internally as _easeMap._CE).\n var split = (name + \"\").split(\"(\"),\n ease = _easeMap[split[0]];\n return ease && split.length > 1 && ease.config ? ease.config.apply(null, ~name.indexOf(\"{\") ? [_parseObjectInString(split[1])] : _valueInParentheses(name).split(\",\").map(_numericIfPossible)) : _easeMap._CE && _customEaseExp.test(name) ? _easeMap._CE(\"\", name) : ease;\n},\n _invertEase = function _invertEase(ease) {\n return function (p) {\n return 1 - ease(1 - p);\n };\n},\n // allow yoyoEase to be set in children and have those affected when the parent/ancestor timeline yoyos.\n_propagateYoyoEase = function _propagateYoyoEase(timeline, isYoyo) {\n var child = timeline._first,\n ease;\n\n while (child) {\n if (child instanceof Timeline) {\n _propagateYoyoEase(child, isYoyo);\n } else if (child.vars.yoyoEase && (!child._yoyo || !child._repeat) && child._yoyo !== isYoyo) {\n if (child.timeline) {\n _propagateYoyoEase(child.timeline, isYoyo);\n } else {\n ease = child._ease;\n child._ease = child._yEase;\n child._yEase = ease;\n child._yoyo = isYoyo;\n }\n }\n\n child = child._next;\n }\n},\n _parseEase = function _parseEase(ease, defaultEase) {\n return !ease ? defaultEase : (_isFunction(ease) ? ease : _easeMap[ease] || _configEaseFromString(ease)) || defaultEase;\n},\n _insertEase = function _insertEase(names, easeIn, easeOut, easeInOut) {\n if (easeOut === void 0) {\n easeOut = function easeOut(p) {\n return 1 - easeIn(1 - p);\n };\n }\n\n if (easeInOut === void 0) {\n easeInOut = function easeInOut(p) {\n return p < .5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2;\n };\n }\n\n var ease = {\n easeIn: easeIn,\n easeOut: easeOut,\n easeInOut: easeInOut\n },\n lowercaseName;\n\n _forEachName(names, function (name) {\n _easeMap[name] = _globals[name] = ease;\n _easeMap[lowercaseName = name.toLowerCase()] = easeOut;\n\n for (var p in ease) {\n _easeMap[lowercaseName + (p === \"easeIn\" ? \".in\" : p === \"easeOut\" ? \".out\" : \".inOut\")] = _easeMap[name + \".\" + p] = ease[p];\n }\n });\n\n return ease;\n},\n _easeInOutFromOut = function _easeInOutFromOut(easeOut) {\n return function (p) {\n return p < .5 ? (1 - easeOut(1 - p * 2)) / 2 : .5 + easeOut((p - .5) * 2) / 2;\n };\n},\n _configElastic = function _configElastic(type, amplitude, period) {\n var p1 = amplitude >= 1 ? amplitude : 1,\n //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1.\n p2 = (period || (type ? .3 : .45)) / (amplitude < 1 ? amplitude : 1),\n p3 = p2 / _2PI * (Math.asin(1 / p1) || 0),\n easeOut = function easeOut(p) {\n return p === 1 ? 1 : p1 * Math.pow(2, -10 * p) * _sin((p - p3) * p2) + 1;\n },\n ease = type === \"out\" ? easeOut : type === \"in\" ? function (p) {\n return 1 - easeOut(1 - p);\n } : _easeInOutFromOut(easeOut);\n\n p2 = _2PI / p2; //precalculate to optimize\n\n ease.config = function (amplitude, period) {\n return _configElastic(type, amplitude, period);\n };\n\n return ease;\n},\n _configBack = function _configBack(type, overshoot) {\n if (overshoot === void 0) {\n overshoot = 1.70158;\n }\n\n var easeOut = function easeOut(p) {\n return p ? --p * p * ((overshoot + 1) * p + overshoot) + 1 : 0;\n },\n ease = type === \"out\" ? easeOut : type === \"in\" ? function (p) {\n return 1 - easeOut(1 - p);\n } : _easeInOutFromOut(easeOut);\n\n ease.config = function (overshoot) {\n return _configBack(type, overshoot);\n };\n\n return ease;\n}; // a cheaper (kb and cpu) but more mild way to get a parameterized weighted ease by feeding in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.\n// _weightedEase = ratio => {\n// \tlet y = 0.5 + ratio / 2;\n// \treturn p => (2 * (1 - p) * p * y + p * p);\n// },\n// a stronger (but more expensive kb/cpu) parameterized weighted ease that lets you feed in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.\n// _weightedEaseStrong = ratio => {\n// \tratio = .5 + ratio / 2;\n// \tlet o = 1 / 3 * (ratio < .5 ? ratio : 1 - ratio),\n// \t\tb = ratio - o,\n// \t\tc = ratio + o;\n// \treturn p => p === 1 ? p : 3 * b * (1 - p) * (1 - p) * p + 3 * c * (1 - p) * p * p + p * p * p;\n// };\n\n\n_forEachName(\"Linear,Quad,Cubic,Quart,Quint,Strong\", function (name, i) {\n var power = i < 5 ? i + 1 : i;\n\n _insertEase(name + \",Power\" + (power - 1), i ? function (p) {\n return Math.pow(p, power);\n } : function (p) {\n return p;\n }, function (p) {\n return 1 - Math.pow(1 - p, power);\n }, function (p) {\n return p < .5 ? Math.pow(p * 2, power) / 2 : 1 - Math.pow((1 - p) * 2, power) / 2;\n });\n});\n\n_easeMap.Linear.easeNone = _easeMap.none = _easeMap.Linear.easeIn;\n\n_insertEase(\"Elastic\", _configElastic(\"in\"), _configElastic(\"out\"), _configElastic());\n\n(function (n, c) {\n var n1 = 1 / c,\n n2 = 2 * n1,\n n3 = 2.5 * n1,\n easeOut = function easeOut(p) {\n return p < n1 ? n * p * p : p < n2 ? n * Math.pow(p - 1.5 / c, 2) + .75 : p < n3 ? n * (p -= 2.25 / c) * p + .9375 : n * Math.pow(p - 2.625 / c, 2) + .984375;\n };\n\n _insertEase(\"Bounce\", function (p) {\n return 1 - easeOut(1 - p);\n }, easeOut);\n})(7.5625, 2.75);\n\n_insertEase(\"Expo\", function (p) {\n return p ? Math.pow(2, 10 * (p - 1)) : 0;\n});\n\n_insertEase(\"Circ\", function (p) {\n return -(_sqrt(1 - p * p) - 1);\n});\n\n_insertEase(\"Sine\", function (p) {\n return p === 1 ? 1 : -_cos(p * _HALF_PI) + 1;\n});\n\n_insertEase(\"Back\", _configBack(\"in\"), _configBack(\"out\"), _configBack());\n\n_easeMap.SteppedEase = _easeMap.steps = _globals.SteppedEase = {\n config: function config(steps, immediateStart) {\n if (steps === void 0) {\n steps = 1;\n }\n\n var p1 = 1 / steps,\n p2 = steps + (immediateStart ? 0 : 1),\n p3 = immediateStart ? 1 : 0,\n max = 1 - _tinyNum;\n return function (p) {\n return ((p2 * _clamp(0, max, p) | 0) + p3) * p1;\n };\n }\n};\n_defaults.ease = _easeMap[\"quad.out\"];\n\n_forEachName(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\", function (name) {\n return _callbackNames += name + \",\" + name + \"Params,\";\n});\n/*\n * --------------------------------------------------------------------------------------\n * CACHE\n * --------------------------------------------------------------------------------------\n */\n\n\nexport var GSCache = function GSCache(target, harness) {\n this.id = _gsID++;\n target._gsap = this;\n this.target = target;\n this.harness = harness;\n this.get = harness ? harness.get : _getProperty;\n this.set = harness ? harness.getSetter : _getSetter;\n};\n/*\n * --------------------------------------------------------------------------------------\n * ANIMATION\n * --------------------------------------------------------------------------------------\n */\n\nexport var Animation = /*#__PURE__*/function () {\n function Animation(vars) {\n this.vars = vars;\n this._delay = +vars.delay || 0;\n\n if (this._repeat = vars.repeat === Infinity ? -2 : vars.repeat || 0) {\n // TODO: repeat: Infinity on a timeline's children must flag that timeline internally and affect its totalDuration, otherwise it'll stop in the negative direction when reaching the start.\n this._rDelay = vars.repeatDelay || 0;\n this._yoyo = !!vars.yoyo || !!vars.yoyoEase;\n }\n\n this._ts = 1;\n\n _setDuration(this, +vars.duration, 1, 1);\n\n this.data = vars.data;\n _tickerActive || _ticker.wake();\n }\n\n var _proto = Animation.prototype;\n\n _proto.delay = function delay(value) {\n if (value || value === 0) {\n this.parent && this.parent.smoothChildTiming && this.startTime(this._start + value - this._delay);\n this._delay = value;\n return this;\n }\n\n return this._delay;\n };\n\n _proto.duration = function duration(value) {\n return arguments.length ? this.totalDuration(this._repeat > 0 ? value + (value + this._rDelay) * this._repeat : value) : this.totalDuration() && this._dur;\n };\n\n _proto.totalDuration = function totalDuration(value) {\n if (!arguments.length) {\n return this._tDur;\n }\n\n this._dirty = 0;\n return _setDuration(this, this._repeat < 0 ? value : (value - this._repeat * this._rDelay) / (this._repeat + 1));\n };\n\n _proto.totalTime = function totalTime(_totalTime, suppressEvents) {\n _wake();\n\n if (!arguments.length) {\n return this._tTime;\n }\n\n var parent = this._dp;\n\n if (parent && parent.smoothChildTiming && this._ts) {\n _alignPlayhead(this, _totalTime);\n\n !parent._dp || parent.parent || _postAddChecks(parent, this); // edge case: if this is a child of a timeline that already completed, for example, we must re-activate the parent.\n //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The start of that child would get pushed out, but one of the ancestors may have completed.\n\n while (parent.parent) {\n if (parent.parent._time !== parent._start + (parent._ts >= 0 ? parent._tTime / parent._ts : (parent.totalDuration() - parent._tTime) / -parent._ts)) {\n parent.totalTime(parent._tTime, true);\n }\n\n parent = parent.parent;\n }\n\n if (!this.parent && this._dp.autoRemoveChildren && (this._ts > 0 && _totalTime < this._tDur || this._ts < 0 && _totalTime > 0 || !this._tDur && !_totalTime)) {\n //if the animation doesn't have a parent, put it back into its last parent (recorded as _dp for exactly cases like this). Limit to parents with autoRemoveChildren (like globalTimeline) so that if the user manually removes an animation from a timeline and then alters its playhead, it doesn't get added back in.\n _addToTimeline(this._dp, this, this._start - this._delay);\n }\n }\n\n if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum || !_totalTime && !this._initted && (this.add || this._ptLookup)) {\n // check for _ptLookup on a Tween instance to ensure it has actually finished being instantiated, otherwise if this.reverse() gets called in the Animation constructor, it could trigger a render() here even though the _targets weren't populated, thus when _init() is called there won't be any PropTweens (it'll act like the tween is non-functional)\n this._ts || (this._pTime = _totalTime); // otherwise, if an animation is paused, then the playhead is moved back to zero, then resumed, it'd revert back to the original time at the pause\n //if (!this._lock) { // avoid endless recursion (not sure we need this yet or if it's worth the performance hit)\n // this._lock = 1;\n\n _lazySafeRender(this, _totalTime, suppressEvents); // this._lock = 0;\n //}\n\n }\n\n return this;\n };\n\n _proto.time = function time(value, suppressEvents) {\n return arguments.length ? this.totalTime(Math.min(this.totalDuration(), value + _elapsedCycleDuration(this)) % (this._dur + this._rDelay) || (value ? this._dur : 0), suppressEvents) : this._time; // note: if the modulus results in 0, the playhead could be exactly at the end or the beginning, and we always defer to the END with a non-zero value, otherwise if you set the time() to the very end (duration()), it would render at the START!\n };\n\n _proto.totalProgress = function totalProgress(value, suppressEvents) {\n return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.ratio;\n };\n\n _proto.progress = function progress(value, suppressEvents) {\n return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.ratio;\n };\n\n _proto.iteration = function iteration(value, suppressEvents) {\n var cycleDuration = this.duration() + this._rDelay;\n\n return arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1;\n } // potential future addition:\n // isPlayingBackwards() {\n // \tlet animation = this,\n // \t\torientation = 1; // 1 = forward, -1 = backward\n // \twhile (animation) {\n // \t\torientation *= animation.reversed() || (animation.repeat() && !(animation.iteration() & 1)) ? -1 : 1;\n // \t\tanimation = animation.parent;\n // \t}\n // \treturn orientation < 0;\n // }\n ;\n\n _proto.timeScale = function timeScale(value) {\n if (!arguments.length) {\n return this._rts === -_tinyNum ? 0 : this._rts; // recorded timeScale. Special case: if someone calls reverse() on an animation with timeScale of 0, we assign it -_tinyNum to remember it's reversed.\n }\n\n if (this._rts === value) {\n return this;\n }\n\n var tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime; // make sure to do the parentToChildTotalTime() BEFORE setting the new _ts because the old one must be used in that calculation.\n // future addition? Up side: fast and minimal file size. Down side: only works on this animation; if a timeline is reversed, for example, its childrens' onReverse wouldn't get called.\n //(+value < 0 && this._rts >= 0) && _callback(this, \"onReverse\", true);\n // prioritize rendering where the parent's playhead lines up instead of this._tTime because there could be a tween that's animating another tween's timeScale in the same rendering loop (same parent), thus if the timeScale tween renders first, it would alter _start BEFORE _tTime was set on that tick (in the rendering loop), effectively freezing it until the timeScale tween finishes.\n\n this._rts = +value || 0;\n this._ts = this._ps || value === -_tinyNum ? 0 : this._rts; // _ts is the functional timeScale which would be 0 if the animation is paused.\n\n return _recacheAncestors(this.totalTime(_clamp(-this._delay, this._tDur, tTime), true));\n };\n\n _proto.paused = function paused(value) {\n if (!arguments.length) {\n return this._ps;\n }\n\n if (this._ps !== value) {\n this._ps = value;\n\n if (value) {\n this._pTime = this._tTime || Math.max(-this._delay, this.rawTime()); // if the pause occurs during the delay phase, make sure that's factored in when resuming.\n\n this._ts = this._act = 0; // _ts is the functional timeScale, so a paused tween would effectively have a timeScale of 0. We record the \"real\" timeScale as _rts (recorded time scale)\n } else {\n _wake();\n\n this._ts = this._rts; //only defer to _pTime (pauseTime) if tTime is zero. Remember, someone could pause() an animation, then scrub the playhead and resume(). If the parent doesn't have smoothChildTiming, we render at the rawTime() because the startTime won't get updated.\n\n this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && Math.abs(this._zTime) !== _tinyNum && (this._tTime -= _tinyNum)); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise.\n }\n }\n\n return this;\n };\n\n _proto.startTime = function startTime(value) {\n if (arguments.length) {\n this._start = value;\n var parent = this.parent || this._dp;\n parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);\n return this;\n }\n\n return this._start;\n };\n\n _proto.endTime = function endTime(includeRepeats) {\n return this._start + (_isNotFalse(includeRepeats) ? this.totalDuration() : this.duration()) / Math.abs(this._ts);\n };\n\n _proto.rawTime = function rawTime(wrapRepeats) {\n var parent = this.parent || this._dp; // _dp = detached parent\n\n return !parent ? this._tTime : wrapRepeats && (!this._ts || this._repeat && this._time && this.totalProgress() < 1) ? this._tTime % (this._dur + this._rDelay) : !this._ts ? this._tTime : _parentToChildTotalTime(parent.rawTime(wrapRepeats), this);\n };\n\n _proto.globalTime = function globalTime(rawTime) {\n var animation = this,\n time = arguments.length ? rawTime : animation.rawTime();\n\n while (animation) {\n time = animation._start + time / (animation._ts || 1);\n animation = animation._dp;\n }\n\n return time;\n };\n\n _proto.repeat = function repeat(value) {\n if (arguments.length) {\n this._repeat = value === Infinity ? -2 : value;\n return _onUpdateTotalDuration(this);\n }\n\n return this._repeat === -2 ? Infinity : this._repeat;\n };\n\n _proto.repeatDelay = function repeatDelay(value) {\n if (arguments.length) {\n var time = this._time;\n this._rDelay = value;\n\n _onUpdateTotalDuration(this);\n\n return time ? this.time(time) : this;\n }\n\n return this._rDelay;\n };\n\n _proto.yoyo = function yoyo(value) {\n if (arguments.length) {\n this._yoyo = value;\n return this;\n }\n\n return this._yoyo;\n };\n\n _proto.seek = function seek(position, suppressEvents) {\n return this.totalTime(_parsePosition(this, position), _isNotFalse(suppressEvents));\n };\n\n _proto.restart = function restart(includeDelay, suppressEvents) {\n return this.play().totalTime(includeDelay ? -this._delay : 0, _isNotFalse(suppressEvents));\n };\n\n _proto.play = function play(from, suppressEvents) {\n from != null && this.seek(from, suppressEvents);\n return this.reversed(false).paused(false);\n };\n\n _proto.reverse = function reverse(from, suppressEvents) {\n from != null && this.seek(from || this.totalDuration(), suppressEvents);\n return this.reversed(true).paused(false);\n };\n\n _proto.pause = function pause(atTime, suppressEvents) {\n atTime != null && this.seek(atTime, suppressEvents);\n return this.paused(true);\n };\n\n _proto.resume = function resume() {\n return this.paused(false);\n };\n\n _proto.reversed = function reversed(value) {\n if (arguments.length) {\n !!value !== this.reversed() && this.timeScale(-this._rts || (value ? -_tinyNum : 0)); // in case timeScale is zero, reversing would have no effect so we use _tinyNum.\n\n return this;\n }\n\n return this._rts < 0;\n };\n\n _proto.invalidate = function invalidate() {\n this._initted = this._act = 0;\n this._zTime = -_tinyNum;\n return this;\n };\n\n _proto.isActive = function isActive() {\n var parent = this.parent || this._dp,\n start = this._start,\n rawTime;\n return !!(!parent || this._ts && this._initted && parent.isActive() && (rawTime = parent.rawTime(true)) >= start && rawTime < this.endTime(true) - _tinyNum);\n };\n\n _proto.eventCallback = function eventCallback(type, callback, params) {\n var vars = this.vars;\n\n if (arguments.length > 1) {\n if (!callback) {\n delete vars[type];\n } else {\n vars[type] = callback;\n params && (vars[type + \"Params\"] = params);\n type === \"onUpdate\" && (this._onUpdate = callback);\n }\n\n return this;\n }\n\n return vars[type];\n };\n\n _proto.then = function then(onFulfilled) {\n var self = this;\n return new Promise(function (resolve) {\n var f = _isFunction(onFulfilled) ? onFulfilled : _passThrough,\n _resolve = function _resolve() {\n var _then = self.then;\n self.then = null; // temporarily null the then() method to avoid an infinite loop (see https://github.com/greensock/GSAP/issues/322)\n\n _isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);\n resolve(f);\n self.then = _then;\n };\n\n if (self._initted && self.totalProgress() === 1 && self._ts >= 0 || !self._tTime && self._ts < 0) {\n _resolve();\n } else {\n self._prom = _resolve;\n }\n });\n };\n\n _proto.kill = function kill() {\n _interrupt(this);\n };\n\n return Animation;\n}();\n\n_setDefaults(Animation.prototype, {\n _time: 0,\n _start: 0,\n _end: 0,\n _tTime: 0,\n _tDur: 0,\n _dirty: 0,\n _repeat: 0,\n _yoyo: false,\n parent: null,\n _initted: false,\n _rDelay: 0,\n _ts: 1,\n _dp: 0,\n ratio: 0,\n _zTime: -_tinyNum,\n _prom: 0,\n _ps: false,\n _rts: 1\n});\n/*\n * -------------------------------------------------\n * TIMELINE\n * -------------------------------------------------\n */\n\n\nexport var Timeline = /*#__PURE__*/function (_Animation) {\n _inheritsLoose(Timeline, _Animation);\n\n function Timeline(vars, position) {\n var _this;\n\n if (vars === void 0) {\n vars = {};\n }\n\n _this = _Animation.call(this, vars) || this;\n _this.labels = {};\n _this.smoothChildTiming = !!vars.smoothChildTiming;\n _this.autoRemoveChildren = !!vars.autoRemoveChildren;\n _this._sort = _isNotFalse(vars.sortChildren);\n _globalTimeline && _addToTimeline(vars.parent || _globalTimeline, _assertThisInitialized(_this), position);\n vars.reversed && _this.reverse();\n vars.paused && _this.paused(true);\n vars.scrollTrigger && _scrollTrigger(_assertThisInitialized(_this), vars.scrollTrigger);\n return _this;\n }\n\n var _proto2 = Timeline.prototype;\n\n _proto2.to = function to(targets, vars, position) {\n _createTweenType(0, arguments, this);\n\n return this;\n };\n\n _proto2.from = function from(targets, vars, position) {\n _createTweenType(1, arguments, this);\n\n return this;\n };\n\n _proto2.fromTo = function fromTo(targets, fromVars, toVars, position) {\n _createTweenType(2, arguments, this);\n\n return this;\n };\n\n _proto2.set = function set(targets, vars, position) {\n vars.duration = 0;\n vars.parent = this;\n _inheritDefaults(vars).repeatDelay || (vars.repeat = 0);\n vars.immediateRender = !!vars.immediateRender;\n new Tween(targets, vars, _parsePosition(this, position), 1);\n return this;\n };\n\n _proto2.call = function call(callback, params, position) {\n return _addToTimeline(this, Tween.delayedCall(0, callback, params), position);\n } //ONLY for backward compatibility! Maybe delete?\n ;\n\n _proto2.staggerTo = function staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {\n vars.duration = duration;\n vars.stagger = vars.stagger || stagger;\n vars.onComplete = onCompleteAll;\n vars.onCompleteParams = onCompleteAllParams;\n vars.parent = this;\n new Tween(targets, vars, _parsePosition(this, position));\n return this;\n };\n\n _proto2.staggerFrom = function staggerFrom(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {\n vars.runBackwards = 1;\n _inheritDefaults(vars).immediateRender = _isNotFalse(vars.immediateRender);\n return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams);\n };\n\n _proto2.staggerFromTo = function staggerFromTo(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams) {\n toVars.startAt = fromVars;\n _inheritDefaults(toVars).immediateRender = _isNotFalse(toVars.immediateRender);\n return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams);\n };\n\n _proto2.render = function render(totalTime, suppressEvents, force) {\n var prevTime = this._time,\n tDur = this._dirty ? this.totalDuration() : this._tDur,\n dur = this._dur,\n tTime = this !== _globalTimeline && totalTime > tDur - _tinyNum && totalTime >= 0 ? tDur : totalTime < _tinyNum ? 0 : totalTime,\n crossingStart = this._zTime < 0 !== totalTime < 0 && (this._initted || !dur),\n time,\n child,\n next,\n iteration,\n cycleDuration,\n prevPaused,\n pauseTween,\n timeScale,\n prevStart,\n prevIteration,\n yoyo,\n isYoyo;\n\n if (tTime !== this._tTime || force || crossingStart) {\n if (prevTime !== this._time && dur) {\n //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).\n tTime += this._time - prevTime;\n totalTime += this._time - prevTime;\n }\n\n time = tTime;\n prevStart = this._start;\n timeScale = this._ts;\n prevPaused = !timeScale;\n\n if (crossingStart) {\n dur || (prevTime = this._zTime); //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.\n\n (totalTime || !suppressEvents) && (this._zTime = totalTime);\n }\n\n if (this._repeat) {\n //adjust the time for repeats and yoyos\n yoyo = this._yoyo;\n cycleDuration = dur + this._rDelay;\n\n if (this._repeat < -1 && totalTime < 0) {\n return this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);\n }\n\n time = _round(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)\n\n if (tTime === tDur) {\n // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)\n iteration = this._repeat;\n time = dur;\n } else {\n iteration = ~~(tTime / cycleDuration);\n\n if (iteration && iteration === tTime / cycleDuration) {\n time = dur;\n iteration--;\n }\n\n time > dur && (time = dur);\n }\n\n prevIteration = _animationCycle(this._tTime, cycleDuration);\n !prevTime && this._tTime && prevIteration !== iteration && (prevIteration = iteration); // edge case - if someone does addPause() at the very beginning of a repeating timeline, that pause is technically at the same spot as the end which causes this._time to get set to 0 when the totalTime would normally place the playhead at the end. See https://greensock.com/forums/topic/23823-closing-nav-animation-not-working-on-ie-and-iphone-6-maybe-other-older-browser/?tab=comments#comment-113005\n\n if (yoyo && iteration & 1) {\n time = dur - time;\n isYoyo = 1;\n }\n /*\n make sure children at the end/beginning of the timeline are rendered properly. If, for example,\n a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which\n would get translated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there\n could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So\n we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must\n ensure that zero-duration tweens at the very beginning or end of the Timeline work.\n */\n\n\n if (iteration !== prevIteration && !this._lock) {\n var rewinding = yoyo && prevIteration & 1,\n doesWrap = rewinding === (yoyo && iteration & 1);\n iteration < prevIteration && (rewinding = !rewinding);\n prevTime = rewinding ? 0 : dur;\n this._lock = 1;\n this.render(prevTime || (isYoyo ? 0 : _round(iteration * cycleDuration)), suppressEvents, !dur)._lock = 0;\n this._tTime = tTime; // if a user gets the iteration() inside the onRepeat, for example, it should be accurate.\n\n !suppressEvents && this.parent && _callback(this, \"onRepeat\");\n this.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);\n\n if (prevTime && prevTime !== this._time || prevPaused !== !this._ts || this.vars.onRepeat && !this.parent && !this._act) {\n // if prevTime is 0 and we render at the very end, _time will be the end, thus won't match. So in this edge case, prevTime won't match _time but that's okay. If it gets killed in the onRepeat, eject as well.\n return this;\n }\n\n dur = this._dur; // in case the duration changed in the onRepeat\n\n tDur = this._tDur;\n\n if (doesWrap) {\n this._lock = 2;\n prevTime = rewinding ? dur : -0.0001;\n this.render(prevTime, true);\n this.vars.repeatRefresh && !isYoyo && this.invalidate();\n }\n\n this._lock = 0;\n\n if (!this._ts && !prevPaused) {\n return this;\n } //in order for yoyoEase to work properly when there's a stagger, we must swap out the ease in each sub-tween.\n\n\n _propagateYoyoEase(this, isYoyo);\n }\n }\n\n if (this._hasPause && !this._forcing && this._lock < 2) {\n pauseTween = _findNextPauseTween(this, _round(prevTime), _round(time));\n\n if (pauseTween) {\n tTime -= time - (time = pauseTween._start);\n }\n }\n\n this._tTime = tTime;\n this._time = time;\n this._act = !timeScale; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.\n\n if (!this._initted) {\n this._onUpdate = this.vars.onUpdate;\n this._initted = 1;\n this._zTime = totalTime;\n prevTime = 0; // upon init, the playhead should always go forward; someone could invalidate() a completed timeline and then if they restart(), that would make child tweens render in reverse order which could lock in the wrong starting values if they build on each other, like tl.to(obj, {x: 100}).to(obj, {x: 0}).\n }\n\n if (!prevTime && time && !suppressEvents) {\n _callback(this, \"onStart\");\n\n if (this._tTime !== tTime) {\n // in case the onStart triggered a render at a different spot, eject. Like if someone did animation.pause(0.5) or something inside the onStart.\n return this;\n }\n }\n\n if (time >= prevTime && totalTime >= 0) {\n child = this._first;\n\n while (child) {\n next = child._next;\n\n if ((child._act || time >= child._start) && child._ts && pauseTween !== child) {\n if (child.parent !== this) {\n // an extreme edge case - the child's render could do something like kill() the \"next\" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.\n return this.render(totalTime, suppressEvents, force);\n }\n\n child.render(child._ts > 0 ? (time - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (time - child._start) * child._ts, suppressEvents, force);\n\n if (time !== this._time || !this._ts && !prevPaused) {\n //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete\n pauseTween = 0;\n next && (tTime += this._zTime = -_tinyNum); // it didn't finish rendering, so flag zTime as negative so that so that the next time render() is called it'll be forced (to render any remaining children)\n\n break;\n }\n }\n\n child = next;\n }\n } else {\n child = this._last;\n var adjustedTime = totalTime < 0 ? totalTime : time; //when the playhead goes backward beyond the start of this timeline, we must pass that information down to the child animations so that zero-duration tweens know whether to render their starting or ending values.\n\n while (child) {\n next = child._prev;\n\n if ((child._act || adjustedTime <= child._end) && child._ts && pauseTween !== child) {\n if (child.parent !== this) {\n // an extreme edge case - the child's render could do something like kill() the \"next\" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.\n return this.render(totalTime, suppressEvents, force);\n }\n\n child.render(child._ts > 0 ? (adjustedTime - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (adjustedTime - child._start) * child._ts, suppressEvents, force);\n\n if (time !== this._time || !this._ts && !prevPaused) {\n //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete\n pauseTween = 0;\n next && (tTime += this._zTime = adjustedTime ? -_tinyNum : _tinyNum); // it didn't finish rendering, so adjust zTime so that so that the next time render() is called it'll be forced (to render any remaining children)\n\n break;\n }\n }\n\n child = next;\n }\n }\n\n if (pauseTween && !suppressEvents) {\n this.pause();\n pauseTween.render(time >= prevTime ? 0 : -_tinyNum)._zTime = time >= prevTime ? 1 : -1;\n\n if (this._ts) {\n //the callback resumed playback! So since we may have held back the playhead due to where the pause is positioned, go ahead and jump to where it's SUPPOSED to be (if no pause happened).\n this._start = prevStart; //if the pause was at an earlier time and the user resumed in the callback, it could reposition the timeline (changing its startTime), throwing things off slightly, so we make sure the _start doesn't shift.\n\n _setEnd(this);\n\n return this.render(totalTime, suppressEvents, force);\n }\n }\n\n this._onUpdate && !suppressEvents && _callback(this, \"onUpdate\", true);\n if (tTime === tDur && tDur >= this.totalDuration() || !tTime && prevTime) if (prevStart === this._start || Math.abs(timeScale) !== Math.abs(this._ts)) if (!this._lock) {\n (totalTime || !dur) && (tTime === tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.\n\n if (!suppressEvents && !(totalTime < 0 && !prevTime) && (tTime || prevTime || !tDur)) {\n _callback(this, tTime === tDur && totalTime >= 0 ? \"onComplete\" : \"onReverseComplete\", true);\n\n this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();\n }\n }\n }\n\n return this;\n };\n\n _proto2.add = function add(child, position) {\n var _this2 = this;\n\n _isNumber(position) || (position = _parsePosition(this, position, child));\n\n if (!(child instanceof Animation)) {\n if (_isArray(child)) {\n child.forEach(function (obj) {\n return _this2.add(obj, position);\n });\n return this;\n }\n\n if (_isString(child)) {\n return this.addLabel(child, position);\n }\n\n if (_isFunction(child)) {\n child = Tween.delayedCall(0, child);\n } else {\n return this;\n }\n }\n\n return this !== child ? _addToTimeline(this, child, position) : this; //don't allow a timeline to be added to itself as a child!\n };\n\n _proto2.getChildren = function getChildren(nested, tweens, timelines, ignoreBeforeTime) {\n if (nested === void 0) {\n nested = true;\n }\n\n if (tweens === void 0) {\n tweens = true;\n }\n\n if (timelines === void 0) {\n timelines = true;\n }\n\n if (ignoreBeforeTime === void 0) {\n ignoreBeforeTime = -_bigNum;\n }\n\n var a = [],\n child = this._first;\n\n while (child) {\n if (child._start >= ignoreBeforeTime) {\n if (child instanceof Tween) {\n tweens && a.push(child);\n } else {\n timelines && a.push(child);\n nested && a.push.apply(a, child.getChildren(true, tweens, timelines));\n }\n }\n\n child = child._next;\n }\n\n return a;\n };\n\n _proto2.getById = function getById(id) {\n var animations = this.getChildren(1, 1, 1),\n i = animations.length;\n\n while (i--) {\n if (animations[i].vars.id === id) {\n return animations[i];\n }\n }\n };\n\n _proto2.remove = function remove(child) {\n if (_isString(child)) {\n return this.removeLabel(child);\n }\n\n if (_isFunction(child)) {\n return this.killTweensOf(child);\n }\n\n _removeLinkedListItem(this, child);\n\n if (child === this._recent) {\n this._recent = this._last;\n }\n\n return _uncache(this);\n };\n\n _proto2.totalTime = function totalTime(_totalTime2, suppressEvents) {\n if (!arguments.length) {\n return this._tTime;\n }\n\n this._forcing = 1;\n\n if (!this._dp && this._ts) {\n //special case for the global timeline (or any other that has no parent or detached parent).\n this._start = _round(_ticker.time - (this._ts > 0 ? _totalTime2 / this._ts : (this.totalDuration() - _totalTime2) / -this._ts));\n }\n\n _Animation.prototype.totalTime.call(this, _totalTime2, suppressEvents);\n\n this._forcing = 0;\n return this;\n };\n\n _proto2.addLabel = function addLabel(label, position) {\n this.labels[label] = _parsePosition(this, position);\n return this;\n };\n\n _proto2.removeLabel = function removeLabel(label) {\n delete this.labels[label];\n return this;\n };\n\n _proto2.addPause = function addPause(position, callback, params) {\n var t = Tween.delayedCall(0, callback || _emptyFunc, params);\n t.data = \"isPause\";\n this._hasPause = 1;\n return _addToTimeline(this, t, _parsePosition(this, position));\n };\n\n _proto2.removePause = function removePause(position) {\n var child = this._first;\n position = _parsePosition(this, position);\n\n while (child) {\n if (child._start === position && child.data === \"isPause\") {\n _removeFromParent(child);\n }\n\n child = child._next;\n }\n };\n\n _proto2.killTweensOf = function killTweensOf(targets, props, onlyActive) {\n var tweens = this.getTweensOf(targets, onlyActive),\n i = tweens.length;\n\n while (i--) {\n _overwritingTween !== tweens[i] && tweens[i].kill(targets, props);\n }\n\n return this;\n };\n\n _proto2.getTweensOf = function getTweensOf(targets, onlyActive) {\n var a = [],\n parsedTargets = toArray(targets),\n child = this._first,\n isGlobalTime = _isNumber(onlyActive),\n // a number is interpreted as a global time. If the animation spans\n children;\n\n while (child) {\n if (child instanceof Tween) {\n if (_arrayContainsAny(child._targets, parsedTargets) && (isGlobalTime ? (!_overwritingTween || child._initted && child._ts) && child.globalTime(0) <= onlyActive && child.globalTime(child.totalDuration()) > onlyActive : !onlyActive || child.isActive())) {\n // note: if this is for overwriting, it should only be for tweens that aren't paused and are initted.\n a.push(child);\n }\n } else if ((children = child.getTweensOf(parsedTargets, onlyActive)).length) {\n a.push.apply(a, children);\n }\n\n child = child._next;\n }\n\n return a;\n } // potential future feature - targets() on timelines\n // targets() {\n // \tlet result = [];\n // \tthis.getChildren(true, true, false).forEach(t => result.push(...t.targets()));\n // \treturn result.filter((v, i) => result.indexOf(v) === i);\n // }\n ;\n\n _proto2.tweenTo = function tweenTo(position, vars) {\n vars = vars || {};\n\n var tl = this,\n endTime = _parsePosition(tl, position),\n _vars = vars,\n startAt = _vars.startAt,\n _onStart = _vars.onStart,\n onStartParams = _vars.onStartParams,\n immediateRender = _vars.immediateRender,\n initted,\n tween = Tween.to(tl, _setDefaults({\n ease: vars.ease || \"none\",\n lazy: false,\n immediateRender: false,\n time: endTime,\n overwrite: \"auto\",\n duration: vars.duration || Math.abs((endTime - (startAt && \"time\" in startAt ? startAt.time : tl._time)) / tl.timeScale()) || _tinyNum,\n onStart: function onStart() {\n tl.pause();\n\n if (!initted) {\n var duration = vars.duration || Math.abs((endTime - (startAt && \"time\" in startAt ? startAt.time : tl._time)) / tl.timeScale());\n tween._dur !== duration && _setDuration(tween, duration, 0, 1).render(tween._time, true, true);\n initted = 1;\n }\n\n _onStart && _onStart.apply(tween, onStartParams || []); //in case the user had an onStart in the vars - we don't want to overwrite it.\n }\n }, vars));\n\n return immediateRender ? tween.render(0) : tween;\n };\n\n _proto2.tweenFromTo = function tweenFromTo(fromPosition, toPosition, vars) {\n return this.tweenTo(toPosition, _setDefaults({\n startAt: {\n time: _parsePosition(this, fromPosition)\n }\n }, vars));\n };\n\n _proto2.recent = function recent() {\n return this._recent;\n };\n\n _proto2.nextLabel = function nextLabel(afterTime) {\n if (afterTime === void 0) {\n afterTime = this._time;\n }\n\n return _getLabelInDirection(this, _parsePosition(this, afterTime));\n };\n\n _proto2.previousLabel = function previousLabel(beforeTime) {\n if (beforeTime === void 0) {\n beforeTime = this._time;\n }\n\n return _getLabelInDirection(this, _parsePosition(this, beforeTime), 1);\n };\n\n _proto2.currentLabel = function currentLabel(value) {\n return arguments.length ? this.seek(value, true) : this.previousLabel(this._time + _tinyNum);\n };\n\n _proto2.shiftChildren = function shiftChildren(amount, adjustLabels, ignoreBeforeTime) {\n if (ignoreBeforeTime === void 0) {\n ignoreBeforeTime = 0;\n }\n\n var child = this._first,\n labels = this.labels,\n p;\n\n while (child) {\n if (child._start >= ignoreBeforeTime) {\n child._start += amount;\n child._end += amount;\n }\n\n child = child._next;\n }\n\n if (adjustLabels) {\n for (p in labels) {\n if (labels[p] >= ignoreBeforeTime) {\n labels[p] += amount;\n }\n }\n }\n\n return _uncache(this);\n };\n\n _proto2.invalidate = function invalidate() {\n var child = this._first;\n this._lock = 0;\n\n while (child) {\n child.invalidate();\n child = child._next;\n }\n\n return _Animation.prototype.invalidate.call(this);\n };\n\n _proto2.clear = function clear(includeLabels) {\n if (includeLabels === void 0) {\n includeLabels = true;\n }\n\n var child = this._first,\n next;\n\n while (child) {\n next = child._next;\n this.remove(child);\n child = next;\n }\n\n this._dp && (this._time = this._tTime = this._pTime = 0);\n includeLabels && (this.labels = {});\n return _uncache(this);\n };\n\n _proto2.totalDuration = function totalDuration(value) {\n var max = 0,\n self = this,\n child = self._last,\n prevStart = _bigNum,\n prev,\n start,\n parent;\n\n if (arguments.length) {\n return self.timeScale((self._repeat < 0 ? self.duration() : self.totalDuration()) / (self.reversed() ? -value : value));\n }\n\n if (self._dirty) {\n parent = self.parent;\n\n while (child) {\n prev = child._prev; //record it here in case the tween changes position in the sequence...\n\n child._dirty && child.totalDuration(); //could change the tween._startTime, so make sure the animation's cache is clean before analyzing it.\n\n start = child._start;\n\n if (start > prevStart && self._sort && child._ts && !self._lock) {\n //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence\n self._lock = 1; //prevent endless recursive calls - there are methods that get triggered that check duration/totalDuration when we add().\n\n _addToTimeline(self, child, start - child._delay, 1)._lock = 0;\n } else {\n prevStart = start;\n }\n\n if (start < 0 && child._ts) {\n //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.\n max -= start;\n\n if (!parent && !self._dp || parent && parent.smoothChildTiming) {\n self._start += start / self._ts;\n self._time -= start;\n self._tTime -= start;\n }\n\n self.shiftChildren(-start, false, -1e999);\n prevStart = 0;\n }\n\n child._end > max && child._ts && (max = child._end);\n child = prev;\n }\n\n _setDuration(self, self === _globalTimeline && self._time > max ? self._time : max, 1, 1);\n\n self._dirty = 0;\n }\n\n return self._tDur;\n };\n\n Timeline.updateRoot = function updateRoot(time) {\n if (_globalTimeline._ts) {\n _lazySafeRender(_globalTimeline, _parentToChildTotalTime(time, _globalTimeline));\n\n _lastRenderedFrame = _ticker.frame;\n }\n\n if (_ticker.frame >= _nextGCFrame) {\n _nextGCFrame += _config.autoSleep || 120;\n var child = _globalTimeline._first;\n if (!child || !child._ts) if (_config.autoSleep && _ticker._listeners.length < 2) {\n while (child && !child._ts) {\n child = child._next;\n }\n\n child || _ticker.sleep();\n }\n }\n };\n\n return Timeline;\n}(Animation);\n\n_setDefaults(Timeline.prototype, {\n _lock: 0,\n _hasPause: 0,\n _forcing: 0\n});\n\nvar _addComplexStringPropTween = function _addComplexStringPropTween(target, prop, start, end, setter, stringFilter, funcParam) {\n //note: we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n var pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter),\n index = 0,\n matchIndex = 0,\n result,\n startNums,\n color,\n endNum,\n chunk,\n startNum,\n hasRandom,\n a;\n pt.b = start;\n pt.e = end;\n start += \"\"; //ensure values are strings\n\n end += \"\";\n\n if (hasRandom = ~end.indexOf(\"random(\")) {\n end = _replaceRandom(end);\n }\n\n if (stringFilter) {\n a = [start, end];\n stringFilter(a, target, prop); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.\n\n start = a[0];\n end = a[1];\n }\n\n startNums = start.match(_complexStringNumExp) || [];\n\n while (result = _complexStringNumExp.exec(end)) {\n endNum = result[0];\n chunk = end.substring(index, result.index);\n\n if (color) {\n color = (color + 1) % 5;\n } else if (chunk.substr(-5) === \"rgba(\") {\n color = 1;\n }\n\n if (endNum !== startNums[matchIndex++]) {\n startNum = parseFloat(startNums[matchIndex - 1]) || 0; //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.\n\n pt._pt = {\n _next: pt._pt,\n p: chunk || matchIndex === 1 ? chunk : \",\",\n //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.\n s: startNum,\n c: endNum.charAt(1) === \"=\" ? parseFloat(endNum.substr(2)) * (endNum.charAt(0) === \"-\" ? -1 : 1) : parseFloat(endNum) - startNum,\n m: color && color < 4 ? Math.round : 0\n };\n index = _complexStringNumExp.lastIndex;\n }\n }\n\n pt.c = index < end.length ? end.substring(index, end.length) : \"\"; //we use the \"c\" of the PropTween to store the final part of the string (after the last number)\n\n pt.fp = funcParam;\n\n if (_relExp.test(end) || hasRandom) {\n pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).\n }\n\n this._pt = pt; //start the linked list with this new PropTween. Remember, we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n\n return pt;\n},\n _addPropTween = function _addPropTween(target, prop, start, end, index, targets, modifier, stringFilter, funcParam) {\n _isFunction(end) && (end = end(index || 0, target, targets));\n var currentValue = target[prop],\n parsedStart = start !== \"get\" ? start : !_isFunction(currentValue) ? currentValue : funcParam ? target[prop.indexOf(\"set\") || !_isFunction(target[\"get\" + prop.substr(3)]) ? prop : \"get\" + prop.substr(3)](funcParam) : target[prop](),\n setter = !_isFunction(currentValue) ? _setterPlain : funcParam ? _setterFuncWithParam : _setterFunc,\n pt;\n\n if (_isString(end)) {\n if (~end.indexOf(\"random(\")) {\n end = _replaceRandom(end);\n }\n\n if (end.charAt(1) === \"=\") {\n pt = parseFloat(parsedStart) + parseFloat(end.substr(2)) * (end.charAt(0) === \"-\" ? -1 : 1) + (getUnit(parsedStart) || 0);\n\n if (pt || pt === 0) {\n // to avoid isNaN, like if someone passes in a value like \"!= whatever\"\n end = pt;\n }\n }\n }\n\n if (parsedStart !== end) {\n if (!isNaN(parsedStart * end) && end !== \"\") {\n // fun fact: any number multiplied by \"\" is evaluated as the number 0!\n pt = new PropTween(this._pt, target, prop, +parsedStart || 0, end - (parsedStart || 0), typeof currentValue === \"boolean\" ? _renderBoolean : _renderPlain, 0, setter);\n funcParam && (pt.fp = funcParam);\n modifier && pt.modifier(modifier, this, target);\n return this._pt = pt;\n }\n\n !currentValue && !(prop in target) && _missingPlugin(prop, end);\n return _addComplexStringPropTween.call(this, target, prop, parsedStart, end, setter, stringFilter || _config.stringFilter, funcParam);\n }\n},\n //creates a copy of the vars object and processes any function-based values (putting the resulting values directly into the copy) as well as strings with \"random()\" in them. It does NOT process relative values.\n_processVars = function _processVars(vars, index, target, targets, tween) {\n _isFunction(vars) && (vars = _parseFuncOrString(vars, tween, index, target, targets));\n\n if (!_isObject(vars) || vars.style && vars.nodeType || _isArray(vars) || _isTypedArray(vars)) {\n return _isString(vars) ? _parseFuncOrString(vars, tween, index, target, targets) : vars;\n }\n\n var copy = {},\n p;\n\n for (p in vars) {\n copy[p] = _parseFuncOrString(vars[p], tween, index, target, targets);\n }\n\n return copy;\n},\n _checkPlugin = function _checkPlugin(property, vars, tween, index, target, targets) {\n var plugin, pt, ptLookup, i;\n\n if (_plugins[property] && (plugin = new _plugins[property]()).init(target, plugin.rawVars ? vars[property] : _processVars(vars[property], index, target, targets, tween), tween, index, targets) !== false) {\n tween._pt = pt = new PropTween(tween._pt, target, property, 0, 1, plugin.render, plugin, 0, plugin.priority);\n\n if (tween !== _quickTween) {\n ptLookup = tween._ptLookup[tween._targets.indexOf(target)]; //note: we can't use tween._ptLookup[index] because for staggered tweens, the index from the fullTargets array won't match what it is in each individual tween that spawns from the stagger.\n\n i = plugin._props.length;\n\n while (i--) {\n ptLookup[plugin._props[i]] = pt;\n }\n }\n }\n\n return plugin;\n},\n _overwritingTween,\n //store a reference temporarily so we can avoid overwriting itself.\n_initTween = function _initTween(tween, time) {\n var vars = tween.vars,\n ease = vars.ease,\n startAt = vars.startAt,\n immediateRender = vars.immediateRender,\n lazy = vars.lazy,\n onUpdate = vars.onUpdate,\n onUpdateParams = vars.onUpdateParams,\n callbackScope = vars.callbackScope,\n runBackwards = vars.runBackwards,\n yoyoEase = vars.yoyoEase,\n keyframes = vars.keyframes,\n autoRevert = vars.autoRevert,\n dur = tween._dur,\n prevStartAt = tween._startAt,\n targets = tween._targets,\n parent = tween.parent,\n fullTargets = parent && parent.data === \"nested\" ? parent.parent._targets : targets,\n autoOverwrite = tween._overwrite === \"auto\" && !_suppressOverwrites,\n tl = tween.timeline,\n cleanVars,\n i,\n p,\n pt,\n target,\n hasPriority,\n gsData,\n harness,\n plugin,\n ptLookup,\n index,\n harnessVars,\n overwritten;\n tl && (!keyframes || !ease) && (ease = \"none\");\n tween._ease = _parseEase(ease, _defaults.ease);\n tween._yEase = yoyoEase ? _invertEase(_parseEase(yoyoEase === true ? ease : yoyoEase, _defaults.ease)) : 0;\n\n if (yoyoEase && tween._yoyo && !tween._repeat) {\n //there must have been a parent timeline with yoyo:true that is currently in its yoyo phase, so flip the eases.\n yoyoEase = tween._yEase;\n tween._yEase = tween._ease;\n tween._ease = yoyoEase;\n }\n\n tween._from = !tl && !!vars.runBackwards; //nested timelines should never run backwards - the backwards-ness is in the child tweens.\n\n if (!tl) {\n //if there's an internal timeline, skip all the parsing because we passed that task down the chain.\n harness = targets[0] ? _getCache(targets[0]).harness : 0;\n harnessVars = harness && vars[harness.prop]; //someone may need to specify CSS-specific values AND non-CSS values, like if the element has an \"x\" property plus it's a standard DOM element. We allow people to distinguish by wrapping plugin-specific stuff in a css:{} object for example.\n\n cleanVars = _copyExcluding(vars, _reservedProps);\n prevStartAt && prevStartAt.render(-1, true).kill();\n\n if (startAt) {\n _removeFromParent(tween._startAt = Tween.set(targets, _setDefaults({\n data: \"isStart\",\n overwrite: false,\n parent: parent,\n immediateRender: true,\n lazy: _isNotFalse(lazy),\n startAt: null,\n delay: 0,\n onUpdate: onUpdate,\n onUpdateParams: onUpdateParams,\n callbackScope: callbackScope,\n stagger: 0\n }, startAt))); //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, from, to).fromTo(e, to, from);\n\n\n time < 0 && !immediateRender && !autoRevert && tween._startAt.render(-1, true); // rare edge case, like if a render is forced in the negative direction of a non-initted tween.\n\n if (immediateRender) {\n time > 0 && !autoRevert && (tween._startAt = 0); //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in Timeline instances where immediateRender was false or when autoRevert is explicitly set to true.\n\n if (dur && time <= 0) {\n time && (tween._zTime = time);\n return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a Timeline, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.\n } // if (time > 0) {\n // \tautoRevert || (tween._startAt = 0); //tweens that render immediately (like most from() and fromTo() tweens) shouldn't revert when their parent timeline's playhead goes backward past the startTime because the initial render could have happened anytime and it shouldn't be directly correlated to this tween's startTime. Imagine setting up a complex animation where the beginning states of various objects are rendered immediately but the tween doesn't happen for quite some time - if we revert to the starting values as soon as the playhead goes backward past the tween's startTime, it will throw things off visually. Reversion should only happen in Timeline instances where immediateRender was false or when autoRevert is explicitly set to true.\n // } else if (dur && !(time < 0 && prevStartAt)) {\n // \ttime && (tween._zTime = time);\n // \treturn; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a Timeline, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.\n // }\n\n } else if (autoRevert === false) {\n tween._startAt = 0;\n }\n } else if (runBackwards && dur) {\n //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)\n if (prevStartAt) {\n !autoRevert && (tween._startAt = 0);\n } else {\n time && (immediateRender = false); //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0\n\n p = _setDefaults({\n overwrite: false,\n data: \"isFromStart\",\n //we tag the tween with as \"isFromStart\" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a \"from()\" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:\"height\", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.\n lazy: immediateRender && _isNotFalse(lazy),\n immediateRender: immediateRender,\n //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)\n stagger: 0,\n parent: parent //ensures that nested tweens that had a stagger are handled properly, like gsap.from(\".class\", {y:gsap.utils.wrap([-100,100])})\n\n }, cleanVars);\n harnessVars && (p[harness.prop] = harnessVars); // in case someone does something like .from(..., {css:{}})\n\n _removeFromParent(tween._startAt = Tween.set(targets, p));\n\n time < 0 && tween._startAt.render(-1, true); // rare edge case, like if a render is forced in the negative direction of a non-initted from() tween.\n\n if (!immediateRender) {\n _initTween(tween._startAt, _tinyNum); //ensures that the initial values are recorded\n\n } else if (!time) {\n return;\n }\n }\n }\n\n tween._pt = 0;\n lazy = dur && _isNotFalse(lazy) || lazy && !dur;\n\n for (i = 0; i < targets.length; i++) {\n target = targets[i];\n gsData = target._gsap || _harness(targets)[i]._gsap;\n tween._ptLookup[i] = ptLookup = {};\n _lazyLookup[gsData.id] && _lazyTweens.length && _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)\n\n index = fullTargets === targets ? i : fullTargets.indexOf(target);\n\n if (harness && (plugin = new harness()).init(target, harnessVars || cleanVars, tween, index, fullTargets) !== false) {\n tween._pt = pt = new PropTween(tween._pt, target, plugin.name, 0, 1, plugin.render, plugin, 0, plugin.priority);\n\n plugin._props.forEach(function (name) {\n ptLookup[name] = pt;\n });\n\n plugin.priority && (hasPriority = 1);\n }\n\n if (!harness || harnessVars) {\n for (p in cleanVars) {\n if (_plugins[p] && (plugin = _checkPlugin(p, cleanVars, tween, index, target, fullTargets))) {\n plugin.priority && (hasPriority = 1);\n } else {\n ptLookup[p] = pt = _addPropTween.call(tween, target, p, \"get\", cleanVars[p], index, fullTargets, 0, vars.stringFilter);\n }\n }\n }\n\n tween._op && tween._op[i] && tween.kill(target, tween._op[i]);\n\n if (autoOverwrite && tween._pt) {\n _overwritingTween = tween;\n\n _globalTimeline.killTweensOf(target, ptLookup, tween.globalTime(0)); //Also make sure the overwriting doesn't overwrite THIS tween!!!\n\n\n overwritten = !tween.parent;\n _overwritingTween = 0;\n }\n\n tween._pt && lazy && (_lazyLookup[gsData.id] = 1);\n }\n\n hasPriority && _sortPropTweensByPriority(tween);\n tween._onInit && tween._onInit(tween); //plugins like RoundProps must wait until ALL of the PropTweens are instantiated. In the plugin's init() function, it sets the _onInit on the tween instance. May not be pretty/intuitive, but it's fast and keeps file size down.\n }\n\n tween._onUpdate = onUpdate;\n tween._initted = (!tween._op || tween._pt) && !overwritten; // if overwrittenProps resulted in the entire tween being killed, do NOT flag it as initted or else it may render for one tick.\n},\n _addAliasesToVars = function _addAliasesToVars(targets, vars) {\n var harness = targets[0] ? _getCache(targets[0]).harness : 0,\n propertyAliases = harness && harness.aliases,\n copy,\n p,\n i,\n aliases;\n\n if (!propertyAliases) {\n return vars;\n }\n\n copy = _merge({}, vars);\n\n for (p in propertyAliases) {\n if (p in copy) {\n aliases = propertyAliases[p].split(\",\");\n i = aliases.length;\n\n while (i--) {\n copy[aliases[i]] = copy[p];\n }\n }\n }\n\n return copy;\n},\n _parseFuncOrString = function _parseFuncOrString(value, tween, i, target, targets) {\n return _isFunction(value) ? value.call(tween, i, target, targets) : _isString(value) && ~value.indexOf(\"random(\") ? _replaceRandom(value) : value;\n},\n _staggerTweenProps = _callbackNames + \"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase\",\n _staggerPropsToSkip = (_staggerTweenProps + \",id,stagger,delay,duration,paused,scrollTrigger\").split(\",\");\n/*\n * --------------------------------------------------------------------------------------\n * TWEEN\n * --------------------------------------------------------------------------------------\n */\n\n\nexport var Tween = /*#__PURE__*/function (_Animation2) {\n _inheritsLoose(Tween, _Animation2);\n\n function Tween(targets, vars, position, skipInherit) {\n var _this3;\n\n if (typeof vars === \"number\") {\n position.duration = vars;\n vars = position;\n position = null;\n }\n\n _this3 = _Animation2.call(this, skipInherit ? vars : _inheritDefaults(vars)) || this;\n var _this3$vars = _this3.vars,\n duration = _this3$vars.duration,\n delay = _this3$vars.delay,\n immediateRender = _this3$vars.immediateRender,\n stagger = _this3$vars.stagger,\n overwrite = _this3$vars.overwrite,\n keyframes = _this3$vars.keyframes,\n defaults = _this3$vars.defaults,\n scrollTrigger = _this3$vars.scrollTrigger,\n yoyoEase = _this3$vars.yoyoEase,\n parent = vars.parent || _globalTimeline,\n parsedTargets = (_isArray(targets) || _isTypedArray(targets) ? _isNumber(targets[0]) : \"length\" in vars) ? [targets] : toArray(targets),\n tl,\n i,\n copy,\n l,\n p,\n curTarget,\n staggerFunc,\n staggerVarsToMerge;\n _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn(\"GSAP target \" + targets + \" not found. https://greensock.com\", !_config.nullTargetWarn) || [];\n _this3._ptLookup = []; //PropTween lookup. An array containing an object for each target, having keys for each tweening property\n\n _this3._overwrite = overwrite;\n\n if (keyframes || stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {\n vars = _this3.vars;\n tl = _this3.timeline = new Timeline({\n data: \"nested\",\n defaults: defaults || {}\n });\n tl.kill();\n tl.parent = tl._dp = _assertThisInitialized(_this3);\n tl._start = 0;\n\n if (keyframes) {\n _setDefaults(tl.vars.defaults, {\n ease: \"none\"\n });\n\n stagger ? parsedTargets.forEach(function (t, i) {\n return keyframes.forEach(function (frame, j) {\n return tl.to(t, frame, j ? \">\" : i * stagger);\n });\n }) : keyframes.forEach(function (frame) {\n return tl.to(parsedTargets, frame, \">\");\n });\n } else {\n l = parsedTargets.length;\n staggerFunc = stagger ? distribute(stagger) : _emptyFunc;\n\n if (_isObject(stagger)) {\n //users can pass in callbacks like onStart/onComplete in the stagger object. These should fire with each individual tween.\n for (p in stagger) {\n if (~_staggerTweenProps.indexOf(p)) {\n staggerVarsToMerge || (staggerVarsToMerge = {});\n staggerVarsToMerge[p] = stagger[p];\n }\n }\n }\n\n for (i = 0; i < l; i++) {\n copy = {};\n\n for (p in vars) {\n if (_staggerPropsToSkip.indexOf(p) < 0) {\n copy[p] = vars[p];\n }\n }\n\n copy.stagger = 0;\n yoyoEase && (copy.yoyoEase = yoyoEase);\n staggerVarsToMerge && _merge(copy, staggerVarsToMerge);\n curTarget = parsedTargets[i]; //don't just copy duration or delay because if they're a string or function, we'd end up in an infinite loop because _isFuncOrString() would evaluate as true in the child tweens, entering this loop, etc. So we parse the value straight from vars and default to 0.\n\n copy.duration = +_parseFuncOrString(duration, _assertThisInitialized(_this3), i, curTarget, parsedTargets);\n copy.delay = (+_parseFuncOrString(delay, _assertThisInitialized(_this3), i, curTarget, parsedTargets) || 0) - _this3._delay;\n\n if (!stagger && l === 1 && copy.delay) {\n // if someone does delay:\"random(1, 5)\", repeat:-1, for example, the delay shouldn't be inside the repeat.\n _this3._delay = delay = copy.delay;\n _this3._start += delay;\n copy.delay = 0;\n }\n\n tl.to(curTarget, copy, staggerFunc(i, curTarget, parsedTargets));\n }\n\n tl.duration() ? duration = delay = 0 : _this3.timeline = 0; // if the timeline's duration is 0, we don't need a timeline internally!\n }\n\n duration || _this3.duration(duration = tl.duration());\n } else {\n _this3.timeline = 0; //speed optimization, faster lookups (no going up the prototype chain)\n }\n\n if (overwrite === true && !_suppressOverwrites) {\n _overwritingTween = _assertThisInitialized(_this3);\n\n _globalTimeline.killTweensOf(parsedTargets);\n\n _overwritingTween = 0;\n }\n\n _addToTimeline(parent, _assertThisInitialized(_this3), position);\n\n vars.reversed && _this3.reverse();\n vars.paused && _this3.paused(true);\n\n if (immediateRender || !duration && !keyframes && _this3._start === _round(parent._time) && _isNotFalse(immediateRender) && _hasNoPausedAncestors(_assertThisInitialized(_this3)) && parent.data !== \"nested\") {\n _this3._tTime = -_tinyNum; //forces a render without having to set the render() \"force\" parameter to true because we want to allow lazying by default (using the \"force\" parameter always forces an immediate full render)\n\n _this3.render(Math.max(0, -delay)); //in case delay is negative\n\n }\n\n scrollTrigger && _scrollTrigger(_assertThisInitialized(_this3), scrollTrigger);\n return _this3;\n }\n\n var _proto3 = Tween.prototype;\n\n _proto3.render = function render(totalTime, suppressEvents, force) {\n var prevTime = this._time,\n tDur = this._tDur,\n dur = this._dur,\n tTime = totalTime > tDur - _tinyNum && totalTime >= 0 ? tDur : totalTime < _tinyNum ? 0 : totalTime,\n time,\n pt,\n iteration,\n cycleDuration,\n prevIteration,\n isYoyo,\n ratio,\n timeline,\n yoyoEase;\n\n if (!dur) {\n _renderZeroDurationTween(this, totalTime, suppressEvents, force);\n } else if (tTime !== this._tTime || !totalTime || force || !this._initted && this._tTime || this._startAt && this._zTime < 0 !== totalTime < 0) {\n //this senses if we're crossing over the start time, in which case we must record _zTime and force the render, but we do it in this lengthy conditional way for performance reasons (usually we can skip the calculations): this._initted && (this._zTime < 0) !== (totalTime < 0)\n time = tTime;\n timeline = this.timeline;\n\n if (this._repeat) {\n //adjust the time for repeats and yoyos\n cycleDuration = dur + this._rDelay;\n\n if (this._repeat < -1 && totalTime < 0) {\n return this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);\n }\n\n time = _round(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)\n\n if (tTime === tDur) {\n // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)\n iteration = this._repeat;\n time = dur;\n } else {\n iteration = ~~(tTime / cycleDuration);\n\n if (iteration && iteration === tTime / cycleDuration) {\n time = dur;\n iteration--;\n }\n\n time > dur && (time = dur);\n }\n\n isYoyo = this._yoyo && iteration & 1;\n\n if (isYoyo) {\n yoyoEase = this._yEase;\n time = dur - time;\n }\n\n prevIteration = _animationCycle(this._tTime, cycleDuration);\n\n if (time === prevTime && !force && this._initted) {\n //could be during the repeatDelay part. No need to render and fire callbacks.\n return this;\n }\n\n if (iteration !== prevIteration) {\n timeline && this._yEase && _propagateYoyoEase(timeline, isYoyo); //repeatRefresh functionality\n\n if (this.vars.repeatRefresh && !isYoyo && !this._lock) {\n this._lock = force = 1; //force, otherwise if lazy is true, the _attemptInitTween() will return and we'll jump out and get caught bouncing on each tick.\n\n this.render(_round(cycleDuration * iteration), true).invalidate()._lock = 0;\n }\n }\n }\n\n if (!this._initted) {\n if (_attemptInitTween(this, totalTime < 0 ? totalTime : time, force, suppressEvents)) {\n this._tTime = 0; // in constructor if immediateRender is true, we set _tTime to -_tinyNum to have the playhead cross the starting point but we can't leave _tTime as a negative number.\n\n return this;\n }\n\n if (dur !== this._dur) {\n // while initting, a plugin like InertiaPlugin might alter the duration, so rerun from the start to ensure everything renders as it should.\n return this.render(totalTime, suppressEvents, force);\n }\n }\n\n this._tTime = tTime;\n this._time = time;\n\n if (!this._act && this._ts) {\n this._act = 1; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.\n\n this._lazy = 0;\n }\n\n this.ratio = ratio = (yoyoEase || this._ease)(time / dur);\n\n if (this._from) {\n this.ratio = ratio = 1 - ratio;\n }\n\n if (time && !prevTime && !suppressEvents) {\n _callback(this, \"onStart\");\n\n if (this._tTime !== tTime) {\n // in case the onStart triggered a render at a different spot, eject. Like if someone did animation.pause(0.5) or something inside the onStart.\n return this;\n }\n }\n\n pt = this._pt;\n\n while (pt) {\n pt.r(ratio, pt.d);\n pt = pt._next;\n }\n\n timeline && timeline.render(totalTime < 0 ? totalTime : !time && isYoyo ? -_tinyNum : timeline._dur * ratio, suppressEvents, force) || this._startAt && (this._zTime = totalTime);\n\n if (this._onUpdate && !suppressEvents) {\n totalTime < 0 && this._startAt && this._startAt.render(totalTime, true, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.\n\n _callback(this, \"onUpdate\");\n }\n\n this._repeat && iteration !== prevIteration && this.vars.onRepeat && !suppressEvents && this.parent && _callback(this, \"onRepeat\");\n\n if ((tTime === this._tDur || !tTime) && this._tTime === tTime) {\n totalTime < 0 && this._startAt && !this._onUpdate && this._startAt.render(totalTime, true, true);\n (totalTime || !dur) && (tTime === this._tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if we're rendering at exactly a time of 0, as there could be autoRevert values that should get set on the next tick (if the playhead goes backward beyond the startTime, negative totalTime). Don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.\n\n if (!suppressEvents && !(totalTime < 0 && !prevTime) && (tTime || prevTime)) {\n // if prevTime and tTime are zero, we shouldn't fire the onReverseComplete. This could happen if you gsap.to(... {paused:true}).play();\n _callback(this, tTime === tDur ? \"onComplete\" : \"onReverseComplete\", true);\n\n this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();\n }\n }\n }\n\n return this;\n };\n\n _proto3.targets = function targets() {\n return this._targets;\n };\n\n _proto3.invalidate = function invalidate() {\n this._pt = this._op = this._startAt = this._onUpdate = this._lazy = this.ratio = 0;\n this._ptLookup = [];\n this.timeline && this.timeline.invalidate();\n return _Animation2.prototype.invalidate.call(this);\n };\n\n _proto3.kill = function kill(targets, vars) {\n if (vars === void 0) {\n vars = \"all\";\n }\n\n if (!targets && (!vars || vars === \"all\")) {\n this._lazy = this._pt = 0;\n return this.parent ? _interrupt(this) : this;\n }\n\n if (this.timeline) {\n var tDur = this.timeline.totalDuration();\n this.timeline.killTweensOf(targets, vars, _overwritingTween && _overwritingTween.vars.overwrite !== true)._first || _interrupt(this); // if nothing is left tweening, interrupt.\n\n this.parent && tDur !== this.timeline.totalDuration() && _setDuration(this, this._dur * this.timeline._tDur / tDur, 0, 1); // if a nested tween is killed that changes the duration, it should affect this tween's duration. We must use the ratio, though, because sometimes the internal timeline is stretched like for keyframes where they don't all add up to whatever the parent tween's duration was set to.\n\n return this;\n }\n\n var parsedTargets = this._targets,\n killingTargets = targets ? toArray(targets) : parsedTargets,\n propTweenLookup = this._ptLookup,\n firstPT = this._pt,\n overwrittenProps,\n curLookup,\n curOverwriteProps,\n props,\n p,\n pt,\n i;\n\n if ((!vars || vars === \"all\") && _arraysMatch(parsedTargets, killingTargets)) {\n vars === \"all\" && (this._pt = 0);\n return _interrupt(this);\n }\n\n overwrittenProps = this._op = this._op || [];\n\n if (vars !== \"all\") {\n //so people can pass in a comma-delimited list of property names\n if (_isString(vars)) {\n p = {};\n\n _forEachName(vars, function (name) {\n return p[name] = 1;\n });\n\n vars = p;\n }\n\n vars = _addAliasesToVars(parsedTargets, vars);\n }\n\n i = parsedTargets.length;\n\n while (i--) {\n if (~killingTargets.indexOf(parsedTargets[i])) {\n curLookup = propTweenLookup[i];\n\n if (vars === \"all\") {\n overwrittenProps[i] = vars;\n props = curLookup;\n curOverwriteProps = {};\n } else {\n curOverwriteProps = overwrittenProps[i] = overwrittenProps[i] || {};\n props = vars;\n }\n\n for (p in props) {\n pt = curLookup && curLookup[p];\n\n if (pt) {\n if (!(\"kill\" in pt.d) || pt.d.kill(p) === true) {\n _removeLinkedListItem(this, pt, \"_pt\");\n }\n\n delete curLookup[p];\n }\n\n if (curOverwriteProps !== \"all\") {\n curOverwriteProps[p] = 1;\n }\n }\n }\n }\n\n this._initted && !this._pt && firstPT && _interrupt(this); //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.\n\n return this;\n };\n\n Tween.to = function to(targets, vars) {\n return new Tween(targets, vars, arguments[2]);\n };\n\n Tween.from = function from(targets, vars) {\n return _createTweenType(1, arguments);\n };\n\n Tween.delayedCall = function delayedCall(delay, callback, params, scope) {\n return new Tween(callback, 0, {\n immediateRender: false,\n lazy: false,\n overwrite: false,\n delay: delay,\n onComplete: callback,\n onReverseComplete: callback,\n onCompleteParams: params,\n onReverseCompleteParams: params,\n callbackScope: scope\n });\n };\n\n Tween.fromTo = function fromTo(targets, fromVars, toVars) {\n return _createTweenType(2, arguments);\n };\n\n Tween.set = function set(targets, vars) {\n vars.duration = 0;\n vars.repeatDelay || (vars.repeat = 0);\n return new Tween(targets, vars);\n };\n\n Tween.killTweensOf = function killTweensOf(targets, props, onlyActive) {\n return _globalTimeline.killTweensOf(targets, props, onlyActive);\n };\n\n return Tween;\n}(Animation);\n\n_setDefaults(Tween.prototype, {\n _targets: [],\n _lazy: 0,\n _startAt: 0,\n _op: 0,\n _onInit: 0\n}); //add the pertinent timeline methods to Tween instances so that users can chain conveniently and create a timeline automatically. (removed due to concerns that it'd ultimately add to more confusion especially for beginners)\n// _forEachName(\"to,from,fromTo,set,call,add,addLabel,addPause\", name => {\n// \tTween.prototype[name] = function() {\n// \t\tlet tl = new Timeline();\n// \t\treturn _addToTimeline(tl, this)[name].apply(tl, toArray(arguments));\n// \t}\n// });\n//for backward compatibility. Leverage the timeline calls.\n\n\n_forEachName(\"staggerTo,staggerFrom,staggerFromTo\", function (name) {\n Tween[name] = function () {\n var tl = new Timeline(),\n params = _slice.call(arguments, 0);\n\n params.splice(name === \"staggerFromTo\" ? 5 : 4, 0, 0);\n return tl[name].apply(tl, params);\n };\n});\n/*\n * --------------------------------------------------------------------------------------\n * PROPTWEEN\n * --------------------------------------------------------------------------------------\n */\n\n\nvar _setterPlain = function _setterPlain(target, property, value) {\n return target[property] = value;\n},\n _setterFunc = function _setterFunc(target, property, value) {\n return target[property](value);\n},\n _setterFuncWithParam = function _setterFuncWithParam(target, property, value, data) {\n return target[property](data.fp, value);\n},\n _setterAttribute = function _setterAttribute(target, property, value) {\n return target.setAttribute(property, value);\n},\n _getSetter = function _getSetter(target, property) {\n return _isFunction(target[property]) ? _setterFunc : _isUndefined(target[property]) && target.setAttribute ? _setterAttribute : _setterPlain;\n},\n _renderPlain = function _renderPlain(ratio, data) {\n return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 1000000) / 1000000, data);\n},\n _renderBoolean = function _renderBoolean(ratio, data) {\n return data.set(data.t, data.p, !!(data.s + data.c * ratio), data);\n},\n _renderComplexString = function _renderComplexString(ratio, data) {\n var pt = data._pt,\n s = \"\";\n\n if (!ratio && data.b) {\n //b = beginning string\n s = data.b;\n } else if (ratio === 1 && data.e) {\n //e = ending string\n s = data.e;\n } else {\n while (pt) {\n s = pt.p + (pt.m ? pt.m(pt.s + pt.c * ratio) : Math.round((pt.s + pt.c * ratio) * 10000) / 10000) + s; //we use the \"p\" property for the text inbetween (like a suffix). And in the context of a complex string, the modifier (m) is typically just Math.round(), like for RGB colors.\n\n pt = pt._next;\n }\n\n s += data.c; //we use the \"c\" of the PropTween to store the final chunk of non-numeric text.\n }\n\n data.set(data.t, data.p, s, data);\n},\n _renderPropTweens = function _renderPropTweens(ratio, data) {\n var pt = data._pt;\n\n while (pt) {\n pt.r(ratio, pt.d);\n pt = pt._next;\n }\n},\n _addPluginModifier = function _addPluginModifier(modifier, tween, target, property) {\n var pt = this._pt,\n next;\n\n while (pt) {\n next = pt._next;\n pt.p === property && pt.modifier(modifier, tween, target);\n pt = next;\n }\n},\n _killPropTweensOf = function _killPropTweensOf(property) {\n var pt = this._pt,\n hasNonDependentRemaining,\n next;\n\n while (pt) {\n next = pt._next;\n\n if (pt.p === property && !pt.op || pt.op === property) {\n _removeLinkedListItem(this, pt, \"_pt\");\n } else if (!pt.dep) {\n hasNonDependentRemaining = 1;\n }\n\n pt = next;\n }\n\n return !hasNonDependentRemaining;\n},\n _setterWithModifier = function _setterWithModifier(target, property, value, data) {\n data.mSet(target, property, data.m.call(data.tween, value, data.mt), data);\n},\n _sortPropTweensByPriority = function _sortPropTweensByPriority(parent) {\n var pt = parent._pt,\n next,\n pt2,\n first,\n last; //sorts the PropTween linked list in order of priority because some plugins need to do their work after ALL of the PropTweens were created (like RoundPropsPlugin and ModifiersPlugin)\n\n while (pt) {\n next = pt._next;\n pt2 = first;\n\n while (pt2 && pt2.pr > pt.pr) {\n pt2 = pt2._next;\n }\n\n if (pt._prev = pt2 ? pt2._prev : last) {\n pt._prev._next = pt;\n } else {\n first = pt;\n }\n\n if (pt._next = pt2) {\n pt2._prev = pt;\n } else {\n last = pt;\n }\n\n pt = next;\n }\n\n parent._pt = first;\n}; //PropTween key: t = target, p = prop, r = renderer, d = data, s = start, c = change, op = overwriteProperty (ONLY populated when it's different than p), pr = priority, _next/_prev for the linked list siblings, set = setter, m = modifier, mSet = modifierSetter (the original setter, before a modifier was added)\n\n\nexport var PropTween = /*#__PURE__*/function () {\n function PropTween(next, target, prop, start, change, renderer, data, setter, priority) {\n this.t = target;\n this.s = start;\n this.c = change;\n this.p = prop;\n this.r = renderer || _renderPlain;\n this.d = data || this;\n this.set = setter || _setterPlain;\n this.pr = priority || 0;\n this._next = next;\n\n if (next) {\n next._prev = this;\n }\n }\n\n var _proto4 = PropTween.prototype;\n\n _proto4.modifier = function modifier(func, tween, target) {\n this.mSet = this.mSet || this.set; //in case it was already set (a PropTween can only have one modifier)\n\n this.set = _setterWithModifier;\n this.m = func;\n this.mt = target; //modifier target\n\n this.tween = tween;\n };\n\n return PropTween;\n}(); //Initialization tasks\n\n_forEachName(_callbackNames + \"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\", function (name) {\n return _reservedProps[name] = 1;\n});\n\n_globals.TweenMax = _globals.TweenLite = Tween;\n_globals.TimelineLite = _globals.TimelineMax = Timeline;\n_globalTimeline = new Timeline({\n sortChildren: false,\n defaults: _defaults,\n autoRemoveChildren: true,\n id: \"root\",\n smoothChildTiming: true\n});\n_config.stringFilter = _colorStringFilter;\n/*\n * --------------------------------------------------------------------------------------\n * GSAP\n * --------------------------------------------------------------------------------------\n */\n\nvar _gsap = {\n registerPlugin: function registerPlugin() {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n args.forEach(function (config) {\n return _createPlugin(config);\n });\n },\n timeline: function timeline(vars) {\n return new Timeline(vars);\n },\n getTweensOf: function getTweensOf(targets, onlyActive) {\n return _globalTimeline.getTweensOf(targets, onlyActive);\n },\n getProperty: function getProperty(target, property, unit, uncache) {\n _isString(target) && (target = toArray(target)[0]); //in case selector text or an array is passed in\n\n var getter = _getCache(target || {}).get,\n format = unit ? _passThrough : _numericIfPossible;\n\n unit === \"native\" && (unit = \"\");\n return !target ? target : !property ? function (property, unit, uncache) {\n return format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));\n } : format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));\n },\n quickSetter: function quickSetter(target, property, unit) {\n target = toArray(target);\n\n if (target.length > 1) {\n var setters = target.map(function (t) {\n return gsap.quickSetter(t, property, unit);\n }),\n l = setters.length;\n return function (value) {\n var i = l;\n\n while (i--) {\n setters[i](value);\n }\n };\n }\n\n target = target[0] || {};\n\n var Plugin = _plugins[property],\n cache = _getCache(target),\n p = cache.harness && (cache.harness.aliases || {})[property] || property,\n // in case it's an alias, like \"rotate\" for \"rotation\".\n setter = Plugin ? function (value) {\n var p = new Plugin();\n _quickTween._pt = 0;\n p.init(target, unit ? value + unit : value, _quickTween, 0, [target]);\n p.render(1, p);\n _quickTween._pt && _renderPropTweens(1, _quickTween);\n } : cache.set(target, p);\n\n return Plugin ? setter : function (value) {\n return setter(target, p, unit ? value + unit : value, cache, 1);\n };\n },\n isTweening: function isTweening(targets) {\n return _globalTimeline.getTweensOf(targets, true).length > 0;\n },\n defaults: function defaults(value) {\n value && value.ease && (value.ease = _parseEase(value.ease, _defaults.ease));\n return _mergeDeep(_defaults, value || {});\n },\n config: function config(value) {\n return _mergeDeep(_config, value || {});\n },\n registerEffect: function registerEffect(_ref3) {\n var name = _ref3.name,\n effect = _ref3.effect,\n plugins = _ref3.plugins,\n defaults = _ref3.defaults,\n extendTimeline = _ref3.extendTimeline;\n (plugins || \"\").split(\",\").forEach(function (pluginName) {\n return pluginName && !_plugins[pluginName] && !_globals[pluginName] && _warn(name + \" effect requires \" + pluginName + \" plugin.\");\n });\n\n _effects[name] = function (targets, vars, tl) {\n return effect(toArray(targets), _setDefaults(vars || {}, defaults), tl);\n };\n\n if (extendTimeline) {\n Timeline.prototype[name] = function (targets, vars, position) {\n return this.add(_effects[name](targets, _isObject(vars) ? vars : (position = vars) && {}, this), position);\n };\n }\n },\n registerEase: function registerEase(name, ease) {\n _easeMap[name] = _parseEase(ease);\n },\n parseEase: function parseEase(ease, defaultEase) {\n return arguments.length ? _parseEase(ease, defaultEase) : _easeMap;\n },\n getById: function getById(id) {\n return _globalTimeline.getById(id);\n },\n exportRoot: function exportRoot(vars, includeDelayedCalls) {\n if (vars === void 0) {\n vars = {};\n }\n\n var tl = new Timeline(vars),\n child,\n next;\n tl.smoothChildTiming = _isNotFalse(vars.smoothChildTiming);\n\n _globalTimeline.remove(tl);\n\n tl._dp = 0; //otherwise it'll get re-activated when adding children and be re-introduced into _globalTimeline's linked list (then added to itself).\n\n tl._time = tl._tTime = _globalTimeline._time;\n child = _globalTimeline._first;\n\n while (child) {\n next = child._next;\n\n if (includeDelayedCalls || !(!child._dur && child instanceof Tween && child.vars.onComplete === child._targets[0])) {\n _addToTimeline(tl, child, child._start - child._delay);\n }\n\n child = next;\n }\n\n _addToTimeline(_globalTimeline, tl, 0);\n\n return tl;\n },\n utils: {\n wrap: wrap,\n wrapYoyo: wrapYoyo,\n distribute: distribute,\n random: random,\n snap: snap,\n normalize: normalize,\n getUnit: getUnit,\n clamp: clamp,\n splitColor: splitColor,\n toArray: toArray,\n selector: selector,\n mapRange: mapRange,\n pipe: pipe,\n unitize: unitize,\n interpolate: interpolate,\n shuffle: shuffle\n },\n install: _install,\n effects: _effects,\n ticker: _ticker,\n updateRoot: Timeline.updateRoot,\n plugins: _plugins,\n globalTimeline: _globalTimeline,\n core: {\n PropTween: PropTween,\n globals: _addGlobal,\n Tween: Tween,\n Timeline: Timeline,\n Animation: Animation,\n getCache: _getCache,\n _removeLinkedListItem: _removeLinkedListItem,\n suppressOverwrites: function suppressOverwrites(value) {\n return _suppressOverwrites = value;\n }\n }\n};\n\n_forEachName(\"to,from,fromTo,delayedCall,set,killTweensOf\", function (name) {\n return _gsap[name] = Tween[name];\n});\n\n_ticker.add(Timeline.updateRoot);\n\n_quickTween = _gsap.to({}, {\n duration: 0\n}); // ---- EXTRA PLUGINS --------------------------------------------------------\n\nvar _getPluginPropTween = function _getPluginPropTween(plugin, prop) {\n var pt = plugin._pt;\n\n while (pt && pt.p !== prop && pt.op !== prop && pt.fp !== prop) {\n pt = pt._next;\n }\n\n return pt;\n},\n _addModifiers = function _addModifiers(tween, modifiers) {\n var targets = tween._targets,\n p,\n i,\n pt;\n\n for (p in modifiers) {\n i = targets.length;\n\n while (i--) {\n pt = tween._ptLookup[i][p];\n\n if (pt && (pt = pt.d)) {\n if (pt._pt) {\n // is a plugin\n pt = _getPluginPropTween(pt, p);\n }\n\n pt && pt.modifier && pt.modifier(modifiers[p], tween, targets[i], p);\n }\n }\n }\n},\n _buildModifierPlugin = function _buildModifierPlugin(name, modifier) {\n return {\n name: name,\n rawVars: 1,\n //don't pre-process function-based values or \"random()\" strings.\n init: function init(target, vars, tween) {\n tween._onInit = function (tween) {\n var temp, p;\n\n if (_isString(vars)) {\n temp = {};\n\n _forEachName(vars, function (name) {\n return temp[name] = 1;\n }); //if the user passes in a comma-delimited list of property names to roundProps, like \"x,y\", we round to whole numbers.\n\n\n vars = temp;\n }\n\n if (modifier) {\n temp = {};\n\n for (p in vars) {\n temp[p] = modifier(vars[p]);\n }\n\n vars = temp;\n }\n\n _addModifiers(tween, vars);\n };\n }\n };\n}; //register core plugins\n\n\nexport var gsap = _gsap.registerPlugin({\n name: \"attr\",\n init: function init(target, vars, tween, index, targets) {\n var p, pt;\n\n for (p in vars) {\n pt = this.add(target, \"setAttribute\", (target.getAttribute(p) || 0) + \"\", vars[p], index, targets, 0, 0, p);\n pt && (pt.op = p);\n\n this._props.push(p);\n }\n }\n}, {\n name: \"endArray\",\n init: function init(target, value) {\n var i = value.length;\n\n while (i--) {\n this.add(target, i, target[i] || 0, value[i]);\n }\n }\n}, _buildModifierPlugin(\"roundProps\", _roundModifier), _buildModifierPlugin(\"modifiers\"), _buildModifierPlugin(\"snap\", snap)) || _gsap; //to prevent the core plugins from being dropped via aggressive tree shaking, we must include them in the variable declaration in this way.\n\nTween.version = Timeline.version = gsap.version = \"3.7.1\";\n_coreReady = 1;\n_windowExists() && _wake();\nvar Power0 = _easeMap.Power0,\n Power1 = _easeMap.Power1,\n Power2 = _easeMap.Power2,\n Power3 = _easeMap.Power3,\n Power4 = _easeMap.Power4,\n Linear = _easeMap.Linear,\n Quad = _easeMap.Quad,\n Cubic = _easeMap.Cubic,\n Quart = _easeMap.Quart,\n Quint = _easeMap.Quint,\n Strong = _easeMap.Strong,\n Elastic = _easeMap.Elastic,\n Back = _easeMap.Back,\n SteppedEase = _easeMap.SteppedEase,\n Bounce = _easeMap.Bounce,\n Sine = _easeMap.Sine,\n Expo = _easeMap.Expo,\n Circ = _easeMap.Circ;\nexport { Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ };\nexport { Tween as TweenMax, Tween as TweenLite, Timeline as TimelineMax, Timeline as TimelineLite, gsap as default, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, selector, mapRange, pipe, unitize, interpolate, shuffle }; //export some internal methods/orojects for use in CSSPlugin so that we can externalize that file and allow custom builds that exclude it.\n\nexport { _getProperty, _numExp, _numWithUnitExp, _isString, _isUndefined, _renderComplexString, _relExp, _setDefaults, _removeLinkedListItem, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _replaceRandom, _checkPlugin, _plugins, _ticker, _config, _roundModifier, _round, _missingPlugin, _getSetter, _getCache, _colorExp };","import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from \"./gsap-core.js\";\nimport { CSSPlugin } from \"./CSSPlugin.js\";\nvar gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap,\n // to protect from tree shaking\nTweenMaxWithCSS = gsapWithCSS.core.Tween;\nexport { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax, TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ };","/*!\n * @file ScrollMagic GSAP Animation Plugin.\n *\n * requires: GSAP ~1.14\n * Powered by the Greensock Animation Platform (GSAP): http://www.greensock.com/js\n * Greensock License info at http://www.greensock.com/licensing/\n */\n/**\n * This plugin is meant to be used in conjunction with the Greensock Animation Plattform.\n * It offers an easy API to trigger Tweens or synchronize them to the scrollbar movement.\n *\n * Both the `lite` and the `max` versions of the GSAP library are supported.\n * The most basic requirement is `TweenLite`.\n *\n * To have access to this extension, please include `plugins/animation.gsap.js`.\n * @requires {@link http://greensock.com/gsap|GSAP ~1.14.x}\n * @mixin animation.GSAP\n */\nvar ScrollMagicPluginGsap = function(ScrollMagic, TweenMax, Timeline) {\n var Tween = TweenMax;\n var NAMESPACE = \"animation.gsap\";\n\n // (BUILD) - REMOVE IN MINIFY - START\n var console = window.console || {},\n err = Function.prototype.bind.call(\n console.error || console.log || function() {},\n console\n );\n if (!ScrollMagic) {\n err(\n \"(\" +\n NAMESPACE +\n \") -> ERROR: The ScrollMagic main module could not be found. Please make sure it's loaded before this plugin or use an asynchronous loader like requirejs.\"\n );\n }\n if (!Tween) {\n err(\n \"(\" +\n NAMESPACE +\n \") -> ERROR: TweenLite or TweenMax could not be found. Please make sure GSAP is loaded before ScrollMagic or use an asynchronous loader like requirejs.\"\n );\n }\n // (BUILD) - REMOVE IN MINIFY - END\n\n /*\n * ----------------------------------------------------------------\n * Extensions for Scene\n * ----------------------------------------------------------------\n */\n /**\n * Every instance of ScrollMagic.Scene now accepts an additional option. \n * See {@link ScrollMagic.Scene} for a complete list of the standard options.\n * @memberof! animation.GSAP#\n * @method new ScrollMagic.Scene(options)\n * @example\n * var scene = new ScrollMagic.Scene({tweenChanges: true});\n *\n * @param {object} [options] - Options for the Scene. The options can be updated at any time.\n * @param {boolean} [options.tweenChanges=false] - Tweens Animation to the progress target instead of setting it. \n Does not affect animations where duration is `0`.\n */\n /**\n * **Get** or **Set** the tweenChanges option value.\n * This only affects scenes with a duration. If `tweenChanges` is `true`, the progress update when scrolling will not be immediate, but instead the animation will smoothly animate to the target state.\n * For a better understanding, try enabling and disabling this option in the [Scene Manipulation Example](../examples/basic/scene_manipulation.html).\n * @memberof! animation.GSAP#\n * @method Scene.tweenChanges\n *\n * @example\n * // get the current tweenChanges option\n * var tweenChanges = scene.tweenChanges();\n *\n * // set new tweenChanges option\n * scene.tweenChanges(true);\n *\n * @fires {@link Scene.change}, when used as setter\n * @param {boolean} [newTweenChanges] - The new tweenChanges setting of the scene.\n * @returns {boolean} `get` - Current tweenChanges option value.\n * @returns {Scene} `set` - Parent object for chaining.\n */\n // add option (TODO: DOC (private for dev))\n ScrollMagic.Scene.addOption(\n \"tweenChanges\", // name\n false, // default\n function(val) {\n // validation callback\n return !!val;\n }\n );\n // extend scene\n ScrollMagic.Scene.extend(function() {\n var Scene = this,\n _tween;\n\n // (BUILD) - REMOVE IN MINIFY - START\n var log = function() {\n if (Scene._log) {\n // not available, when main source minified\n Array.prototype.splice.call(\n arguments,\n 1,\n 0,\n \"(\" + NAMESPACE + \")\",\n \"->\"\n );\n Scene._log.apply(this, arguments);\n }\n };\n // (BUILD) - REMOVE IN MINIFY - END\n\n // set listeners\n Scene.on(\"progress.plugin_gsap\", function() {\n updateTweenProgress();\n });\n Scene.on(\"destroy.plugin_gsap\", function(e) {\n Scene.removeTween(e.reset);\n });\n\n /**\n * Update the tween progress to current position.\n * @private\n */\n var updateTweenProgress = function() {\n if (_tween) {\n var progress = Scene.progress(),\n state = Scene.state();\n if (_tween.repeat && _tween.repeat() === -1) {\n // infinite loop, so not in relation to progress\n if (state === \"DURING\" && _tween.paused()) {\n _tween.play();\n } else if (state !== \"DURING\" && !_tween.paused()) {\n _tween.pause();\n }\n } else if (progress != _tween.progress()) {\n // do we even need to update the progress?\n // no infinite loop - so should we just play or go to a specific point in time?\n if (Scene.duration() === 0) {\n // play the animation\n if (progress > 0) {\n // play from 0 to 1\n _tween.play();\n } else {\n // play from 1 to 0\n _tween.reverse();\n }\n } else {\n // go to a specific point in time\n if (Scene.tweenChanges() && _tween.tweenTo) {\n // go smooth\n _tween.tweenTo(progress * _tween.duration());\n } else {\n // just hard set it\n _tween.progress(progress).pause();\n }\n }\n }\n }\n };\n\n /**\n * Add a tween to the scene.\n * If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below).\n *\n * If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.\n * For a scene with a duration of `0`, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back.\n * To gain better understanding, check out the [Simple Tweening example](../examples/basic/simple_tweening.html).\n *\n * Instead of supplying a tween this method can also be used as a shorthand for `TweenMax.to()` (see example below).\n * @memberof! animation.GSAP#\n *\n * @example\n * // add a single tween directly\n * scene.setTween(TweenMax.to(\"obj\"), 1, {x: 100});\n *\n * // add a single tween via variable\n * var tween = TweenMax.to(\"obj\"), 1, {x: 100};\n * scene.setTween(tween);\n *\n * // add multiple tweens, wrapped in a timeline.\n * var timeline = new TimelineMax();\n * var tween1 = TweenMax.from(\"obj1\", 1, {x: 100});\n * var tween2 = TweenMax.to(\"obj2\", 1, {y: 100});\n * timeline\n * .add(tween1)\n * .add(tween2);\n * scene.addTween(timeline);\n *\n * // short hand to add a TweenMax.to() tween\n * scene.setTween(\"obj3\", 0.5, {y: 100});\n *\n * // short hand to add a TweenMax.to() tween for 1 second\n * // this is useful, when the scene has a duration and the tween duration isn't important anyway\n * scene.setTween(\"obj3\", {y: 100});\n *\n * @param {(object|string)} TweenObject - A TweenMax, TweenLite, TimelineMax or TimelineLite object that should be animated in the scene. Can also be a Dom Element or Selector, when using direct tween definition (see examples).\n * @param {(number|object)} duration - A duration for the tween, or tween parameters. If an object containing parameters are supplied, a default duration of 1 will be used.\n * @param {object} params - The parameters for the tween\n * @returns {Scene} Parent object for chaining.\n */\n Scene.setTween = function(TweenObject, duration, params) {\n var newTween;\n if (arguments.length > 1) {\n if (arguments.length < 3) {\n params = duration;\n duration = 1;\n }\n TweenObject = Tween.to(TweenObject, duration, params);\n }\n try {\n // wrap Tween into a Timeline Object if available to include delay and repeats in the duration and standardize methods.\n if (Timeline) {\n newTween = new Timeline({ smoothChildTiming: true }).add(\n TweenObject\n );\n } else {\n newTween = TweenObject;\n }\n newTween.pause();\n } catch (e) {\n log(\n 1,\n \"ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject\"\n );\n return Scene;\n }\n if (_tween) {\n // kill old tween?\n Scene.removeTween();\n }\n _tween = newTween;\n\n // some properties need to be transferred it to the wrapper, otherwise they would get lost.\n if (TweenObject.repeat && TweenObject.repeat() === -1) {\n // TweenMax or TimelineMax Object?\n _tween.repeat(-1);\n _tween.yoyo(TweenObject.yoyo());\n }\n // (BUILD) - REMOVE IN MINIFY - START\n // Some tween validations and debugging helpers\n\n if (Scene.tweenChanges() && !_tween.tweenTo) {\n log(\n 2,\n \"WARNING: tweenChanges will only work if the TimelineMax object is available for ScrollMagic.\"\n );\n }\n\n // check if there are position tweens defined for the trigger and warn about it :)\n if (\n _tween &&\n Scene.controller() &&\n Scene.triggerElement() &&\n Scene.loglevel() >= 2\n ) {\n // controller is needed to know scroll direction.\n var triggerTweens = Tween.getTweensOf(Scene.triggerElement()),\n vertical = Scene.controller().info(\"vertical\");\n triggerTweens.forEach(function(value, index) {\n var tweenvars = value.vars.css || value.vars,\n condition = vertical\n ? tweenvars.top !== undefined ||\n tweenvars.bottom !== undefined\n : tweenvars.left !== undefined ||\n tweenvars.right !== undefined;\n if (condition) {\n log(\n 2,\n \"WARNING: Tweening the position of the trigger element affects the scene timing and should be avoided!\"\n );\n return false;\n }\n });\n }\n\n // warn about tween overwrites, when an element is tweened multiple times\n if (parseFloat(Tween.version) >= 1.14) {\n // onOverwrite only present since GSAP v1.14.0\n var list = _tween.getChildren\n ? _tween.getChildren(true, true, false)\n : [_tween], // get all nested tween objects\n newCallback = function() {\n log(\n 2,\n \"WARNING: tween was overwritten by another. To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another\"\n );\n };\n for (var i = 0, thisTween, oldCallback; i < list.length; i++) {\n /*jshint loopfunc: true */\n thisTween = list[i];\n if (oldCallback !== newCallback) {\n // if tweens is added more than once\n oldCallback = thisTween.vars.onOverwrite;\n thisTween.vars.onOverwrite = function() {\n if (oldCallback) {\n oldCallback.apply(this, arguments);\n }\n newCallback.apply(this, arguments);\n };\n }\n }\n }\n // (BUILD) - REMOVE IN MINIFY - END\n log(3, \"added tween\");\n\n updateTweenProgress();\n return Scene;\n };\n\n /**\n * Remove the tween from the scene.\n * This will terminate the control of the Scene over the tween.\n *\n * Using the reset option you can decide if the tween should remain in the current state or be rewound to set the target elements back to the state they were in before the tween was added to the scene.\n * @memberof! animation.GSAP#\n *\n * @example\n * // remove the tween from the scene without resetting it\n * scene.removeTween();\n *\n * // remove the tween from the scene and reset it to initial position\n * scene.removeTween(true);\n *\n * @param {boolean} [reset=false] - If `true` the tween will be reset to its initial values.\n * @returns {Scene} Parent object for chaining.\n */\n Scene.removeTween = function(reset) {\n if (_tween) {\n if (reset) {\n _tween.progress(0).pause();\n }\n _tween.kill();\n _tween = undefined;\n log(\n 3,\n \"removed tween (reset: \" + (reset ? \"true\" : \"false\") + \")\"\n );\n }\n return Scene;\n };\n });\n};\n\nmodule.exports = { ScrollMagicPluginGsap : ScrollMagicPluginGsap };\n","/*!\r\n * ScrollMagic v2.0.8 (2020-08-14)\r\n * The javascript library for magical scroll interactions.\r\n * (c) 2020 Jan Paepke (@janpaepke)\r\n * Project Website: http://scrollmagic.io\r\n * \r\n * @version 2.0.8\r\n * @license Dual licensed under MIT license and GPL.\r\n * @author Jan Paepke - e-mail@janpaepke.de\r\n *\r\n * @file ScrollMagic main library.\r\n */\r\n/**\r\n * @namespace ScrollMagic\r\n */\r\n(function (root, factory) {\r\n\tif (typeof define === 'function' && define.amd) {\r\n\t\t// AMD. Register as an anonymous module.\r\n\t\tdefine(factory);\r\n\t} else if (typeof exports === 'object') {\r\n\t\t// CommonJS\r\n\t\tmodule.exports = factory();\r\n\t} else {\r\n\t\t// Browser global\r\n\t\troot.ScrollMagic = factory();\r\n\t}\r\n}(this, function () {\r\n\t\"use strict\";\r\n\r\n\tvar ScrollMagic = function () {\r\n\t\t_util.log(2, '(COMPATIBILITY NOTICE) -> As of ScrollMagic 2.0.0 you need to use \\'new ScrollMagic.Controller()\\' to create a new controller instance. Use \\'new ScrollMagic.Scene()\\' to instance a scene.');\r\n\t};\r\n\r\n\tScrollMagic.version = \"2.0.8\";\r\n\r\n\t// TODO: temporary workaround for chrome's scroll jitter bug\r\n\tif (typeof (window) !== 'undefined') {\r\n\t\twindow.addEventListener(\"mousewheel\", void(0));\r\n\t}\r\n\r\n\t// global const\r\n\tvar PIN_SPACER_ATTRIBUTE = \"data-scrollmagic-pin-spacer\";\r\n\r\n\t/**\r\n\t * The main class that is needed once per scroll container.\r\n\t *\r\n\t * @class\r\n\t *\r\n\t * @example\r\n\t * // basic initialization\r\n\t * var controller = new ScrollMagic.Controller();\r\n\t *\r\n\t * // passing options\r\n\t * var controller = new ScrollMagic.Controller({container: \"#myContainer\", loglevel: 3});\r\n\t *\r\n\t * @param {object} [options] - An object containing one or more options for the controller.\r\n\t * @param {(string|object)} [options.container=window] - A selector, DOM object that references the main container for scrolling.\r\n\t * @param {boolean} [options.vertical=true] - Sets the scroll mode to vertical (`true`) or horizontal (`false`) scrolling.\r\n\t * @param {object} [options.globalSceneOptions={}] - These options will be passed to every Scene that is added to the controller using the addScene method. For more information on Scene options see {@link ScrollMagic.Scene}.\r\n\t * @param {number} [options.loglevel=2] Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.\r\n\t\t\t\t\t\t\t\t\t\t\t ** `0` => silent\r\n\t\t\t\t\t\t\t\t\t\t\t ** `1` => errors\r\n\t\t\t\t\t\t\t\t\t\t\t ** `2` => errors, warnings\r\n\t\t\t\t\t\t\t\t\t\t\t ** `3` => errors, warnings, debuginfo\r\n\t * @param {boolean} [options.refreshInterval=100] - Some changes don't call events by default, like changing the container size or moving a scene trigger element. \r\n\t \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t This interval polls these parameters to fire the necessary events. \r\n\t \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t If you don't use custom containers, trigger elements or have static layouts, where the positions of the trigger elements don't change, you can set this to 0 disable interval checking and improve performance.\r\n\t *\r\n\t */\r\n\tScrollMagic.Controller = function (options) {\r\n\t\t/*\r\n\t\t * ----------------------------------------------------------------\r\n\t\t * settings\r\n\t\t * ----------------------------------------------------------------\r\n\t\t */\r\n\t\tvar\r\n\t\t\tNAMESPACE = 'ScrollMagic.Controller',\r\n\t\t\tSCROLL_DIRECTION_FORWARD = 'FORWARD',\r\n\t\t\tSCROLL_DIRECTION_REVERSE = 'REVERSE',\r\n\t\t\tSCROLL_DIRECTION_PAUSED = 'PAUSED',\r\n\t\t\tDEFAULT_OPTIONS = CONTROLLER_OPTIONS.defaults;\r\n\r\n\t\t/*\r\n\t\t * ----------------------------------------------------------------\r\n\t\t * private vars\r\n\t\t * ----------------------------------------------------------------\r\n\t\t */\r\n\t\tvar\r\n\t\t\tController = this,\r\n\t\t\t_options = _util.extend({}, DEFAULT_OPTIONS, options),\r\n\t\t\t_sceneObjects = [],\r\n\t\t\t_updateScenesOnNextCycle = false, // can be boolean (true => all scenes) or an array of scenes to be updated\r\n\t\t\t_scrollPos = 0,\r\n\t\t\t_scrollDirection = SCROLL_DIRECTION_PAUSED,\r\n\t\t\t_isDocument = true,\r\n\t\t\t_viewPortSize = 0,\r\n\t\t\t_enabled = true,\r\n\t\t\t_updateTimeout,\r\n\t\t\t_refreshTimeout;\r\n\r\n\t\t/*\r\n\t\t * ----------------------------------------------------------------\r\n\t\t * private functions\r\n\t\t * ----------------------------------------------------------------\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * Internal constructor function of the ScrollMagic Controller\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar construct = function () {\r\n\t\t\tfor (var key in _options) {\r\n\t\t\t\tif (!DEFAULT_OPTIONS.hasOwnProperty(key)) {\r\n\t\t\t\t\tlog(2, \"WARNING: Unknown option \\\"\" + key + \"\\\"\");\r\n\t\t\t\t\tdelete _options[key];\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t_options.container = _util.get.elements(_options.container)[0];\r\n\t\t\t// check ScrollContainer\r\n\t\t\tif (!_options.container) {\r\n\t\t\t\tlog(1, \"ERROR creating object \" + NAMESPACE + \": No valid scroll container supplied\");\r\n\t\t\t\tthrow NAMESPACE + \" init failed.\"; // cancel\r\n\t\t\t}\r\n\t\t\t_isDocument = _options.container === window || _options.container === document.body || !document.body.contains(_options.container);\r\n\t\t\t// normalize to window\r\n\t\t\tif (_isDocument) {\r\n\t\t\t\t_options.container = window;\r\n\t\t\t}\r\n\t\t\t// update container size immediately\r\n\t\t\t_viewPortSize = getViewportSize();\r\n\t\t\t// set event handlers\r\n\t\t\t_options.container.addEventListener(\"resize\", onChange);\r\n\t\t\t_options.container.addEventListener(\"scroll\", onChange);\r\n\r\n\t\t\tvar ri = parseInt(_options.refreshInterval, 10);\r\n\t\t\t_options.refreshInterval = _util.type.Number(ri) ? ri : DEFAULT_OPTIONS.refreshInterval;\r\n\t\t\tscheduleRefresh();\r\n\r\n\t\t\tlog(3, \"added new \" + NAMESPACE + \" controller (v\" + ScrollMagic.version + \")\");\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Schedule the next execution of the refresh function\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar scheduleRefresh = function () {\r\n\t\t\tif (_options.refreshInterval > 0) {\r\n\t\t\t\t_refreshTimeout = window.setTimeout(refresh, _options.refreshInterval);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Default function to get scroll pos - overwriteable using `Controller.scrollPos(newFunction)`\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar getScrollPos = function () {\r\n\t\t\treturn _options.vertical ? _util.get.scrollTop(_options.container) : _util.get.scrollLeft(_options.container);\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Returns the current viewport Size (width vor horizontal, height for vertical)\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar getViewportSize = function () {\r\n\t\t\treturn _options.vertical ? _util.get.height(_options.container) : _util.get.width(_options.container);\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Default function to set scroll pos - overwriteable using `Controller.scrollTo(newFunction)`\r\n\t\t * Make available publicly for pinned mousewheel workaround.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar setScrollPos = this._setScrollPos = function (pos) {\r\n\t\t\tif (_options.vertical) {\r\n\t\t\t\tif (_isDocument) {\r\n\t\t\t\t\twindow.scrollTo(_util.get.scrollLeft(), pos);\r\n\t\t\t\t} else {\r\n\t\t\t\t\t_options.container.scrollTop = pos;\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tif (_isDocument) {\r\n\t\t\t\t\twindow.scrollTo(pos, _util.get.scrollTop());\r\n\t\t\t\t} else {\r\n\t\t\t\t\t_options.container.scrollLeft = pos;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Handle updates in cycles instead of on scroll (performance)\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar updateScenes = function () {\r\n\t\t\tif (_enabled && _updateScenesOnNextCycle) {\r\n\t\t\t\t// determine scenes to update\r\n\t\t\t\tvar scenesToUpdate = _util.type.Array(_updateScenesOnNextCycle) ? _updateScenesOnNextCycle : _sceneObjects.slice(0);\r\n\t\t\t\t// reset scenes\r\n\t\t\t\t_updateScenesOnNextCycle = false;\r\n\t\t\t\tvar oldScrollPos = _scrollPos;\r\n\t\t\t\t// update scroll pos now instead of onChange, as it might have changed since scheduling (i.e. in-browser smooth scroll)\r\n\t\t\t\t_scrollPos = Controller.scrollPos();\r\n\t\t\t\tvar deltaScroll = _scrollPos - oldScrollPos;\r\n\t\t\t\tif (deltaScroll !== 0) { // scroll position changed?\r\n\t\t\t\t\t_scrollDirection = (deltaScroll > 0) ? SCROLL_DIRECTION_FORWARD : SCROLL_DIRECTION_REVERSE;\r\n\t\t\t\t}\r\n\t\t\t\t// reverse order of scenes if scrolling reverse\r\n\t\t\t\tif (_scrollDirection === SCROLL_DIRECTION_REVERSE) {\r\n\t\t\t\t\tscenesToUpdate.reverse();\r\n\t\t\t\t}\r\n\t\t\t\t// update scenes\r\n\t\t\t\tscenesToUpdate.forEach(function (scene, index) {\r\n\t\t\t\t\tlog(3, \"updating Scene \" + (index + 1) + \"/\" + scenesToUpdate.length + \" (\" + _sceneObjects.length + \" total)\");\r\n\t\t\t\t\tscene.update(true);\r\n\t\t\t\t});\r\n\t\t\t\tif (scenesToUpdate.length === 0 && _options.loglevel >= 3) {\r\n\t\t\t\t\tlog(3, \"updating 0 Scenes (nothing added to controller)\");\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Initializes rAF callback\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar debounceUpdate = function () {\r\n\t\t\t_updateTimeout = _util.rAF(updateScenes);\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Handles Container changes\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar onChange = function (e) {\r\n\t\t\tlog(3, \"event fired causing an update:\", e.type);\r\n\t\t\tif (e.type == \"resize\") {\r\n\t\t\t\t// resize\r\n\t\t\t\t_viewPortSize = getViewportSize();\r\n\t\t\t\t_scrollDirection = SCROLL_DIRECTION_PAUSED;\r\n\t\t\t}\r\n\t\t\t// schedule update\r\n\t\t\tif (_updateScenesOnNextCycle !== true) {\r\n\t\t\t\t_updateScenesOnNextCycle = true;\r\n\t\t\t\tdebounceUpdate();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tvar refresh = function () {\r\n\t\t\tif (!_isDocument) {\r\n\t\t\t\t// simulate resize event. Only works for viewport relevant param (performance)\r\n\t\t\t\tif (_viewPortSize != getViewportSize()) {\r\n\t\t\t\t\tvar resizeEvent;\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tresizeEvent = new Event('resize', {\r\n\t\t\t\t\t\t\tbubbles: false,\r\n\t\t\t\t\t\t\tcancelable: false\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t} catch (e) { // stupid IE\r\n\t\t\t\t\t\tresizeEvent = document.createEvent(\"Event\");\r\n\t\t\t\t\t\tresizeEvent.initEvent(\"resize\", false, false);\r\n\t\t\t\t\t}\r\n\t\t\t\t\t_options.container.dispatchEvent(resizeEvent);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t_sceneObjects.forEach(function (scene, index) { // refresh all scenes\r\n\t\t\t\tscene.refresh();\r\n\t\t\t});\r\n\t\t\tscheduleRefresh();\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Send a debug message to the console.\r\n\t\t * provided publicly with _log for plugins\r\n\t\t * @private\r\n\t\t *\r\n\t\t * @param {number} loglevel - The loglevel required to initiate output for the message.\r\n\t\t * @param {...mixed} output - One or more variables that should be passed to the console.\r\n\t\t */\r\n\t\tvar log = this._log = function (loglevel, output) {\r\n\t\t\tif (_options.loglevel >= loglevel) {\r\n\t\t\t\tArray.prototype.splice.call(arguments, 1, 0, \"(\" + NAMESPACE + \") ->\");\r\n\t\t\t\t_util.log.apply(window, arguments);\r\n\t\t\t}\r\n\t\t};\r\n\t\t// for scenes we have getters for each option, but for the controller we don't, so we need to make it available externally for plugins\r\n\t\tthis._options = _options;\r\n\r\n\t\t/**\r\n\t\t * Sort scenes in ascending order of their start offset.\r\n\t\t * @private\r\n\t\t *\r\n\t\t * @param {array} ScenesArray - an array of ScrollMagic Scenes that should be sorted\r\n\t\t * @return {array} The sorted array of Scenes.\r\n\t\t */\r\n\t\tvar sortScenes = function (ScenesArray) {\r\n\t\t\tif (ScenesArray.length <= 1) {\r\n\t\t\t\treturn ScenesArray;\r\n\t\t\t} else {\r\n\t\t\t\tvar scenes = ScenesArray.slice(0);\r\n\t\t\t\tscenes.sort(function (a, b) {\r\n\t\t\t\t\treturn a.scrollOffset() > b.scrollOffset() ? 1 : -1;\r\n\t\t\t\t});\r\n\t\t\t\treturn scenes;\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * ----------------------------------------------------------------\r\n\t\t * public functions\r\n\t\t * ----------------------------------------------------------------\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * Add one ore more scene(s) to the controller. \r\n\t\t * This is the equivalent to `Scene.addTo(controller)`.\r\n\t\t * @public\r\n\t\t * @example\r\n\t\t * // with a previously defined scene\r\n\t\t * controller.addScene(scene);\r\n\t\t *\r\n\t\t * // with a newly created scene.\r\n\t\t * controller.addScene(new ScrollMagic.Scene({duration : 0}));\r\n\t\t *\r\n\t\t * // adding multiple scenes\r\n\t\t * controller.addScene([scene, scene2, new ScrollMagic.Scene({duration : 0})]);\r\n\t\t *\r\n\t\t * @param {(ScrollMagic.Scene|array)} newScene - ScrollMagic Scene or Array of Scenes to be added to the controller.\r\n\t\t * @return {Controller} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.addScene = function (newScene) {\r\n\t\t\tif (_util.type.Array(newScene)) {\r\n\t\t\t\tnewScene.forEach(function (scene, index) {\r\n\t\t\t\t\tController.addScene(scene);\r\n\t\t\t\t});\r\n\t\t\t} else if (newScene instanceof ScrollMagic.Scene) {\r\n\t\t\t\tif (newScene.controller() !== Controller) {\r\n\t\t\t\t\tnewScene.addTo(Controller);\r\n\t\t\t\t} else if (_sceneObjects.indexOf(newScene) < 0) {\r\n\t\t\t\t\t// new scene\r\n\t\t\t\t\t_sceneObjects.push(newScene); // add to array\r\n\t\t\t\t\t_sceneObjects = sortScenes(_sceneObjects); // sort\r\n\t\t\t\t\tnewScene.on(\"shift.controller_sort\", function () { // resort whenever scene moves\r\n\t\t\t\t\t\t_sceneObjects = sortScenes(_sceneObjects);\r\n\t\t\t\t\t});\r\n\t\t\t\t\t// insert Global defaults.\r\n\t\t\t\t\tfor (var key in _options.globalSceneOptions) {\r\n\t\t\t\t\t\tif (newScene[key]) {\r\n\t\t\t\t\t\t\tnewScene[key].call(newScene, _options.globalSceneOptions[key]);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\tlog(3, \"adding Scene (now \" + _sceneObjects.length + \" total)\");\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tlog(1, \"ERROR: invalid argument supplied for '.addScene()'\");\r\n\t\t\t}\r\n\t\t\treturn Controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Remove one ore more scene(s) from the controller. \r\n\t\t * This is the equivalent to `Scene.remove()`.\r\n\t\t * @public\r\n\t\t * @example\r\n\t\t * // remove a scene from the controller\r\n\t\t * controller.removeScene(scene);\r\n\t\t *\r\n\t\t * // remove multiple scenes from the controller\r\n\t\t * controller.removeScene([scene, scene2, scene3]);\r\n\t\t *\r\n\t\t * @param {(ScrollMagic.Scene|array)} Scene - ScrollMagic Scene or Array of Scenes to be removed from the controller.\r\n\t\t * @returns {Controller} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.removeScene = function (Scene) {\r\n\t\t\tif (_util.type.Array(Scene)) {\r\n\t\t\t\tScene.forEach(function (scene, index) {\r\n\t\t\t\t\tController.removeScene(scene);\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\tvar index = _sceneObjects.indexOf(Scene);\r\n\t\t\t\tif (index > -1) {\r\n\t\t\t\t\tScene.off(\"shift.controller_sort\");\r\n\t\t\t\t\t_sceneObjects.splice(index, 1);\r\n\t\t\t\t\tlog(3, \"removing Scene (now \" + _sceneObjects.length + \" left)\");\r\n\t\t\t\t\tScene.remove();\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn Controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t * Update one ore more scene(s) according to the scroll position of the container. \r\n\t * This is the equivalent to `Scene.update()`. \r\n\t * The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container. \r\n\t * It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress. \r\n\t * _**Note:** This method gets called constantly whenever Controller detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters._\r\n\t * @public\r\n\t * @example\r\n\t * // update a specific scene on next cycle\r\n \t * controller.updateScene(scene);\r\n \t *\r\n\t * // update a specific scene immediately\r\n\t * controller.updateScene(scene, true);\r\n \t *\r\n\t * // update multiple scenes scene on next cycle\r\n\t * controller.updateScene([scene1, scene2, scene3]);\r\n\t *\r\n\t * @param {ScrollMagic.Scene} Scene - ScrollMagic Scene or Array of Scenes that is/are supposed to be updated.\r\n\t * @param {boolean} [immediately=false] - If `true` the update will be instant, if `false` it will wait until next update cycle. \r\n\t \t\t\t\t\t\t\t\t\t\t This is useful when changing multiple properties of the scene - this way it will only be updated once all new properties are set (updateScenes).\r\n\t * @return {Controller} Parent object for chaining.\r\n\t */\r\n\t\tthis.updateScene = function (Scene, immediately) {\r\n\t\t\tif (_util.type.Array(Scene)) {\r\n\t\t\t\tScene.forEach(function (scene, index) {\r\n\t\t\t\t\tController.updateScene(scene, immediately);\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\tif (immediately) {\r\n\t\t\t\t\tScene.update(true);\r\n\t\t\t\t} else if (_updateScenesOnNextCycle !== true && Scene instanceof ScrollMagic.Scene) { // if _updateScenesOnNextCycle is true, all connected scenes are already scheduled for update\r\n\t\t\t\t\t// prep array for next update cycle\r\n\t\t\t\t\t_updateScenesOnNextCycle = _updateScenesOnNextCycle || [];\r\n\t\t\t\t\tif (_updateScenesOnNextCycle.indexOf(Scene) == -1) {\r\n\t\t\t\t\t\t_updateScenesOnNextCycle.push(Scene);\r\n\t\t\t\t\t}\r\n\t\t\t\t\t_updateScenesOnNextCycle = sortScenes(_updateScenesOnNextCycle); // sort\r\n\t\t\t\t\tdebounceUpdate();\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn Controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Updates the controller params and calls updateScene on every scene, that is attached to the controller. \r\n\t\t * See `Controller.updateScene()` for more information about what this means. \r\n\t\t * In most cases you will not need this function, as it is called constantly, whenever ScrollMagic detects a state change event, like resize or scroll. \r\n\t\t * The only application for this method is when ScrollMagic fails to detect these events. \r\n\t\t * One application is with some external scroll libraries (like iScroll) that move an internal container to a negative offset instead of actually scrolling. In this case the update on the controller needs to be called whenever the child container's position changes.\r\n\t\t * For this case there will also be the need to provide a custom function to calculate the correct scroll position. See `Controller.scrollPos()` for details.\r\n\t\t * @public\r\n\t\t * @example\r\n\t\t * // update the controller on next cycle (saves performance due to elimination of redundant updates)\r\n\t\t * controller.update();\r\n\t\t *\r\n\t\t * // update the controller immediately\r\n\t\t * controller.update(true);\r\n\t\t *\r\n\t\t * @param {boolean} [immediately=false] - If `true` the update will be instant, if `false` it will wait until next update cycle (better performance)\r\n\t\t * @return {Controller} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.update = function (immediately) {\r\n\t\t\tonChange({\r\n\t\t\t\ttype: \"resize\"\r\n\t\t\t}); // will update size and set _updateScenesOnNextCycle to true\r\n\t\t\tif (immediately) {\r\n\t\t\t\tupdateScenes();\r\n\t\t\t}\r\n\t\t\treturn Controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Scroll to a numeric scroll offset, a DOM element, the start of a scene or provide an alternate method for scrolling. \r\n\t\t * For vertical controllers it will change the top scroll offset and for horizontal applications it will change the left offset.\r\n\t\t * @public\r\n\t\t *\r\n\t\t * @since 1.1.0\r\n\t\t * @example\r\n\t\t * // scroll to an offset of 100\r\n\t\t * controller.scrollTo(100);\r\n\t\t *\r\n\t\t * // scroll to a DOM element\r\n\t\t * controller.scrollTo(\"#anchor\");\r\n\t\t *\r\n\t\t * // scroll to the beginning of a scene\r\n\t\t * var scene = new ScrollMagic.Scene({offset: 200});\r\n\t\t * controller.scrollTo(scene);\r\n\t\t *\r\n\t\t * // define a new scroll position modification function (jQuery animate instead of jump)\r\n\t\t * controller.scrollTo(function (newScrollPos) {\r\n\t\t *\t$(\"html, body\").animate({scrollTop: newScrollPos});\r\n\t\t * });\r\n\t\t * controller.scrollTo(100); // call as usual, but the new function will be used instead\r\n\t\t *\r\n\t\t * // define a new scroll function with an additional parameter\r\n\t\t * controller.scrollTo(function (newScrollPos, message) {\r\n\t\t * console.log(message);\r\n\t\t *\t$(this).animate({scrollTop: newScrollPos});\r\n\t\t * });\r\n\t\t * // call as usual, but supply an extra parameter to the defined custom function\r\n\t\t * controller.scrollTo(100, \"my message\");\r\n\t\t *\r\n\t\t * // define a new scroll function with an additional parameter containing multiple variables\r\n\t\t * controller.scrollTo(function (newScrollPos, options) {\r\n\t\t * someGlobalVar = options.a + options.b;\r\n\t\t *\t$(this).animate({scrollTop: newScrollPos});\r\n\t\t * });\r\n\t\t * // call as usual, but supply an extra parameter containing multiple options\r\n\t\t * controller.scrollTo(100, {a: 1, b: 2});\r\n\t\t *\r\n\t\t * // define a new scroll function with a callback supplied as an additional parameter\r\n\t\t * controller.scrollTo(function (newScrollPos, callback) {\r\n\t\t *\t$(this).animate({scrollTop: newScrollPos}, 400, \"swing\", callback);\r\n\t\t * });\r\n\t\t * // call as usual, but supply an extra parameter, which is used as a callback in the previously defined custom scroll function\r\n\t\t * controller.scrollTo(100, function() {\r\n\t\t *\tconsole.log(\"scroll has finished.\");\r\n\t\t * });\r\n\t\t *\r\n\t\t * @param {mixed} scrollTarget - The supplied argument can be one of these types:\r\n\t\t * 1. `number` -> The container will scroll to this new scroll offset.\r\n\t\t * 2. `string` or `object` -> Can be a selector or a DOM object. \r\n\t\t * The container will scroll to the position of this element.\r\n\t\t * 3. `ScrollMagic Scene` -> The container will scroll to the start of this scene.\r\n\t\t * 4. `function` -> This function will be used for future scroll position modifications. \r\n\t\t * This provides a way for you to change the behaviour of scrolling and adding new behaviour like animation. The function receives the new scroll position as a parameter and a reference to the container element using `this`. \r\n\t\t * It may also optionally receive an optional additional parameter (see below) \r\n\t\t * _**NOTE:** \r\n\t\t * All other options will still work as expected, using the new function to scroll._\r\n\t\t * @param {mixed} [additionalParameter] - If a custom scroll function was defined (see above 4.), you may want to supply additional parameters to it, when calling it. You can do this using this parameter – see examples for details. Please note, that this parameter will have no effect, if you use the default scrolling function.\r\n\t\t * @returns {Controller} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.scrollTo = function (scrollTarget, additionalParameter) {\r\n\t\t\tif (_util.type.Number(scrollTarget)) { // excecute\r\n\t\t\t\tsetScrollPos.call(_options.container, scrollTarget, additionalParameter);\r\n\t\t\t} else if (scrollTarget instanceof ScrollMagic.Scene) { // scroll to scene\r\n\t\t\t\tif (scrollTarget.controller() === Controller) { // check if the controller is associated with this scene\r\n\t\t\t\t\tController.scrollTo(scrollTarget.scrollOffset(), additionalParameter);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tlog(2, \"scrollTo(): The supplied scene does not belong to this controller. Scroll cancelled.\", scrollTarget);\r\n\t\t\t\t}\r\n\t\t\t} else if (_util.type.Function(scrollTarget)) { // assign new scroll function\r\n\t\t\t\tsetScrollPos = scrollTarget;\r\n\t\t\t} else { // scroll to element\r\n\t\t\t\tvar elem = _util.get.elements(scrollTarget)[0];\r\n\t\t\t\tif (elem) {\r\n\t\t\t\t\t// if parent is pin spacer, use spacer position instead so correct start position is returned for pinned elements.\r\n\t\t\t\t\twhile (elem.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) {\r\n\t\t\t\t\t\telem = elem.parentNode;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tvar\r\n\t\t\t\t\t\tparam = _options.vertical ? \"top\" : \"left\", // which param is of interest ?\r\n\t\t\t\t\t\tcontainerOffset = _util.get.offset(_options.container), // container position is needed because element offset is returned in relation to document, not in relation to container.\r\n\t\t\t\t\t\telementOffset = _util.get.offset(elem);\r\n\r\n\t\t\t\t\tif (!_isDocument) { // container is not the document root, so substract scroll Position to get correct trigger element position relative to scrollcontent\r\n\t\t\t\t\t\tcontainerOffset[param] -= Controller.scrollPos();\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tController.scrollTo(elementOffset[param] - containerOffset[param], additionalParameter);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tlog(2, \"scrollTo(): The supplied argument is invalid. Scroll cancelled.\", scrollTarget);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn Controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** the current scrollPosition or **Set** a new method to calculate it. \r\n\t\t * -> **GET**:\r\n\t\t * When used as a getter this function will return the current scroll position. \r\n\t\t * To get a cached value use Controller.info(\"scrollPos\"), which will be updated in the update cycle. \r\n\t\t * For vertical controllers it will return the top scroll offset and for horizontal applications it will return the left offset.\r\n\t\t *\r\n\t\t * -> **SET**:\r\n\t\t * When used as a setter this method prodes a way to permanently overwrite the controller's scroll position calculation. \r\n\t\t * A typical usecase is when the scroll position is not reflected by the containers scrollTop or scrollLeft values, but for example by the inner offset of a child container. \r\n\t\t * Moving a child container inside a parent is a commonly used method for several scrolling frameworks, including iScroll. \r\n\t\t * By providing an alternate calculation function you can make sure ScrollMagic receives the correct scroll position. \r\n\t\t * Please also bear in mind that your function should return y values for vertical scrolls an x for horizontals.\r\n\t\t *\r\n\t\t * To change the current scroll position please use `Controller.scrollTo()`.\r\n\t\t * @public\r\n\t\t *\r\n\t\t * @example\r\n\t\t * // get the current scroll Position\r\n\t\t * var scrollPos = controller.scrollPos();\r\n\t\t *\r\n\t\t * // set a new scroll position calculation method\r\n\t\t * controller.scrollPos(function () {\r\n\t\t *\treturn this.info(\"vertical\") ? -mychildcontainer.y : -mychildcontainer.x\r\n\t\t * });\r\n\t\t *\r\n\t\t * @param {function} [scrollPosMethod] - The function to be used for the scroll position calculation of the container.\r\n\t\t * @returns {(number|Controller)} Current scroll position or parent object for chaining.\r\n\t\t */\r\n\t\tthis.scrollPos = function (scrollPosMethod) {\r\n\t\t\tif (!arguments.length) { // get\r\n\t\t\t\treturn getScrollPos.call(Controller);\r\n\t\t\t} else { // set\r\n\t\t\t\tif (_util.type.Function(scrollPosMethod)) {\r\n\t\t\t\t\tgetScrollPos = scrollPosMethod;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tlog(2, \"Provided value for method 'scrollPos' is not a function. To change the current scroll position use 'scrollTo()'.\");\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn Controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** all infos or one in particular about the controller.\r\n\t\t * @public\r\n\t\t * @example\r\n\t\t * // returns the current scroll position (number)\r\n\t\t * var scrollPos = controller.info(\"scrollPos\");\r\n\t\t *\r\n\t\t * // returns all infos as an object\r\n\t\t * var infos = controller.info();\r\n\t\t *\r\n\t\t * @param {string} [about] - If passed only this info will be returned instead of an object containing all. \r\n\t\t \t\t\t\t\t\t\t Valid options are:\r\n\t\t \t\t\t\t\t\t\t ** `\"size\"` => the current viewport size of the container\r\n\t\t \t\t\t\t\t\t\t ** `\"vertical\"` => true if vertical scrolling, otherwise false\r\n\t\t \t\t\t\t\t\t\t ** `\"scrollPos\"` => the current scroll position\r\n\t\t \t\t\t\t\t\t\t ** `\"scrollDirection\"` => the last known direction of the scroll\r\n\t\t \t\t\t\t\t\t\t ** `\"container\"` => the container element\r\n\t\t \t\t\t\t\t\t\t ** `\"isDocument\"` => true if container element is the document.\r\n\t\t * @returns {(mixed|object)} The requested info(s).\r\n\t\t */\r\n\t\tthis.info = function (about) {\r\n\t\t\tvar values = {\r\n\t\t\t\tsize: _viewPortSize, // contains height or width (in regard to orientation);\r\n\t\t\t\tvertical: _options.vertical,\r\n\t\t\t\tscrollPos: _scrollPos,\r\n\t\t\t\tscrollDirection: _scrollDirection,\r\n\t\t\t\tcontainer: _options.container,\r\n\t\t\t\tisDocument: _isDocument\r\n\t\t\t};\r\n\t\t\tif (!arguments.length) { // get all as an object\r\n\t\t\t\treturn values;\r\n\t\t\t} else if (values[about] !== undefined) {\r\n\t\t\t\treturn values[about];\r\n\t\t\t} else {\r\n\t\t\t\tlog(1, \"ERROR: option \\\"\" + about + \"\\\" is not available\");\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the current loglevel option value.\r\n\t\t * @public\r\n\t\t *\r\n\t\t * @example\r\n\t\t * // get the current value\r\n\t\t * var loglevel = controller.loglevel();\r\n\t\t *\r\n\t\t * // set a new value\r\n\t\t * controller.loglevel(3);\r\n\t\t *\r\n\t\t * @param {number} [newLoglevel] - The new loglevel setting of the Controller. `[0-3]`\r\n\t\t * @returns {(number|Controller)} Current loglevel or parent object for chaining.\r\n\t\t */\r\n\t\tthis.loglevel = function (newLoglevel) {\r\n\t\t\tif (!arguments.length) { // get\r\n\t\t\t\treturn _options.loglevel;\r\n\t\t\t} else if (_options.loglevel != newLoglevel) { // set\r\n\t\t\t\t_options.loglevel = newLoglevel;\r\n\t\t\t}\r\n\t\t\treturn Controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the current enabled state of the controller. \r\n\t\t * This can be used to disable all Scenes connected to the controller without destroying or removing them.\r\n\t\t * @public\r\n\t\t *\r\n\t\t * @example\r\n\t\t * // get the current value\r\n\t\t * var enabled = controller.enabled();\r\n\t\t *\r\n\t\t * // disable the controller\r\n\t\t * controller.enabled(false);\r\n\t\t *\r\n\t\t * @param {boolean} [newState] - The new enabled state of the controller `true` or `false`.\r\n\t\t * @returns {(boolean|Controller)} Current enabled state or parent object for chaining.\r\n\t\t */\r\n\t\tthis.enabled = function (newState) {\r\n\t\t\tif (!arguments.length) { // get\r\n\t\t\t\treturn _enabled;\r\n\t\t\t} else if (_enabled != newState) { // set\r\n\t\t\t\t_enabled = !!newState;\r\n\t\t\t\tController.updateScene(_sceneObjects, true);\r\n\t\t\t}\r\n\t\t\treturn Controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Destroy the Controller, all Scenes and everything.\r\n\t\t * @public\r\n\t\t *\r\n\t\t * @example\r\n\t\t * // without resetting the scenes\r\n\t\t * controller = controller.destroy();\r\n\t\t *\r\n\t\t * // with scene reset\r\n\t\t * controller = controller.destroy(true);\r\n\t\t *\r\n\t\t * @param {boolean} [resetScenes=false] - If `true` the pins and tweens (if existent) of all scenes will be reset.\r\n\t\t * @returns {null} Null to unset handler variables.\r\n\t\t */\r\n\t\tthis.destroy = function (resetScenes) {\r\n\t\t\twindow.clearTimeout(_refreshTimeout);\r\n\t\t\tvar i = _sceneObjects.length;\r\n\t\t\twhile (i--) {\r\n\t\t\t\t_sceneObjects[i].destroy(resetScenes);\r\n\t\t\t}\r\n\t\t\t_options.container.removeEventListener(\"resize\", onChange);\r\n\t\t\t_options.container.removeEventListener(\"scroll\", onChange);\r\n\t\t\t_util.cAF(_updateTimeout);\r\n\t\t\tlog(3, \"destroyed \" + NAMESPACE + \" (reset: \" + (resetScenes ? \"true\" : \"false\") + \")\");\r\n\t\t\treturn null;\r\n\t\t};\r\n\r\n\t\t// INIT\r\n\t\tconstruct();\r\n\t\treturn Controller;\r\n\t};\r\n\r\n\t// store pagewide controller options\r\n\tvar CONTROLLER_OPTIONS = {\r\n\t\tdefaults: {\r\n\t\t\tcontainer: window,\r\n\t\t\tvertical: true,\r\n\t\t\tglobalSceneOptions: {},\r\n\t\t\tloglevel: 2,\r\n\t\t\trefreshInterval: 100\r\n\t\t}\r\n\t};\r\n\t/*\r\n\t * method used to add an option to ScrollMagic Scenes.\r\n\t */\r\n\tScrollMagic.Controller.addOption = function (name, defaultValue) {\r\n\t\tCONTROLLER_OPTIONS.defaults[name] = defaultValue;\r\n\t};\r\n\t// instance extension function for plugins\r\n\tScrollMagic.Controller.extend = function (extension) {\r\n\t\tvar oldClass = this;\r\n\t\tScrollMagic.Controller = function () {\r\n\t\t\toldClass.apply(this, arguments);\r\n\t\t\tthis.$super = _util.extend({}, this); // copy parent state\r\n\t\t\treturn extension.apply(this, arguments) || this;\r\n\t\t};\r\n\t\t_util.extend(ScrollMagic.Controller, oldClass); // copy properties\r\n\t\tScrollMagic.Controller.prototype = oldClass.prototype; // copy prototype\r\n\t\tScrollMagic.Controller.prototype.constructor = ScrollMagic.Controller; // restore constructor\r\n\t};\r\n\r\n\r\n\t/**\r\n\t * A Scene defines where the controller should react and how.\r\n\t *\r\n\t * @class\r\n\t *\r\n\t * @example\r\n\t * // create a standard scene and add it to a controller\r\n\t * new ScrollMagic.Scene()\r\n\t *\t\t.addTo(controller);\r\n\t *\r\n\t * // create a scene with custom options and assign a handler to it.\r\n\t * var scene = new ScrollMagic.Scene({\r\n\t * \t\tduration: 100,\r\n\t *\t\toffset: 200,\r\n\t *\t\ttriggerHook: \"onEnter\",\r\n\t *\t\treverse: false\r\n\t * });\r\n\t *\r\n\t * @param {object} [options] - Options for the Scene. The options can be updated at any time. \r\n\t \t\t\t\t\t\t\t Instead of setting the options for each scene individually you can also set them globally in the controller as the controllers `globalSceneOptions` option. The object accepts the same properties as the ones below. \r\n\t \t\t\t\t\t\t\t When a scene is added to the controller the options defined using the Scene constructor will be overwritten by those set in `globalSceneOptions`.\r\n\t * @param {(number|string|function)} [options.duration=0] - The duration of the scene. \r\n\t \t\t\t\t\tPlease see `Scene.duration()` for details.\r\n\t * @param {number} [options.offset=0] - Offset Value for the Trigger Position. If no triggerElement is defined this will be the scroll distance from the start of the page, after which the scene will start.\r\n\t * @param {(string|object)} [options.triggerElement=null] - Selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).\r\n\t * @param {(number|string)} [options.triggerHook=\"onCenter\"] - Can be a number between 0 and 1 defining the position of the trigger Hook in relation to the viewport. \r\n\t \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t Can also be defined using a string:\r\n\t \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t ** `\"onEnter\"` => `1`\r\n\t \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t ** `\"onCenter\"` => `0.5`\r\n\t \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t ** `\"onLeave\"` => `0`\r\n\t * @param {boolean} [options.reverse=true] - Should the scene reverse, when scrolling up?\r\n\t * @param {number} [options.loglevel=2] - Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.\r\n\t \t\t\t\t\t\t\t\t\t\t ** `0` => silent\r\n\t \t\t\t\t\t\t\t\t\t\t ** `1` => errors\r\n\t \t\t\t\t\t\t\t\t\t\t ** `2` => errors, warnings\r\n\t \t\t\t\t\t\t\t\t\t\t ** `3` => errors, warnings, debuginfo\r\n\t * \r\n\t */\r\n\tScrollMagic.Scene = function (options) {\r\n\r\n\t\t/*\r\n\t\t * ----------------------------------------------------------------\r\n\t\t * settings\r\n\t\t * ----------------------------------------------------------------\r\n\t\t */\r\n\r\n\t\tvar\r\n\t\t\tNAMESPACE = 'ScrollMagic.Scene',\r\n\t\t\tSCENE_STATE_BEFORE = 'BEFORE',\r\n\t\t\tSCENE_STATE_DURING = 'DURING',\r\n\t\t\tSCENE_STATE_AFTER = 'AFTER',\r\n\t\t\tDEFAULT_OPTIONS = SCENE_OPTIONS.defaults;\r\n\r\n\t\t/*\r\n\t\t * ----------------------------------------------------------------\r\n\t\t * private vars\r\n\t\t * ----------------------------------------------------------------\r\n\t\t */\r\n\r\n\t\tvar\r\n\t\t\tScene = this,\r\n\t\t\t_options = _util.extend({}, DEFAULT_OPTIONS, options),\r\n\t\t\t_state = SCENE_STATE_BEFORE,\r\n\t\t\t_progress = 0,\r\n\t\t\t_scrollOffset = {\r\n\t\t\t\tstart: 0,\r\n\t\t\t\tend: 0\r\n\t\t\t}, // reflects the controllers's scroll position for the start and end of the scene respectively\r\n\t\t\t_triggerPos = 0,\r\n\t\t\t_enabled = true,\r\n\t\t\t_durationUpdateMethod,\r\n\t\t\t_controller;\r\n\r\n\t\t/**\r\n\t\t * Internal constructor function of the ScrollMagic Scene\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar construct = function () {\r\n\t\t\tfor (var key in _options) { // check supplied options\r\n\t\t\t\tif (!DEFAULT_OPTIONS.hasOwnProperty(key)) {\r\n\t\t\t\t\tlog(2, \"WARNING: Unknown option \\\"\" + key + \"\\\"\");\r\n\t\t\t\t\tdelete _options[key];\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t// add getters/setters for all possible options\r\n\t\t\tfor (var optionName in DEFAULT_OPTIONS) {\r\n\t\t\t\taddSceneOption(optionName);\r\n\t\t\t}\r\n\t\t\t// validate all options\r\n\t\t\tvalidateOption();\r\n\t\t};\r\n\r\n\t\t/*\r\n\t\t * ----------------------------------------------------------------\r\n\t\t * Event Management\r\n\t\t * ----------------------------------------------------------------\r\n\t\t */\r\n\r\n\t\tvar _listeners = {};\r\n\t\t/**\r\n\t\t * Scene start event. \r\n\t\t * Fires whenever the scroll position its the starting point of the scene. \r\n\t\t * It will also fire when scrolling back up going over the start position of the scene. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.\r\n\t\t *\r\n\t\t * For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#start\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"start\", function (event) {\r\n\t\t * \tconsole.log(\"Hit start point of scene.\");\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {number} event.progress - Reflects the current progress of the scene\r\n\t\t * @property {string} event.state - The current state of the scene `\"BEFORE\"` or `\"DURING\"`\r\n\t\t * @property {string} event.scrollDirection - Indicates which way we are scrolling `\"PAUSED\"`, `\"FORWARD\"` or `\"REVERSE\"`\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene end event. \r\n\t\t * Fires whenever the scroll position its the ending point of the scene. \r\n\t\t * It will also fire when scrolling back up from after the scene and going over its end position. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.\r\n\t\t *\r\n\t\t * For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#end\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"end\", function (event) {\r\n\t\t * \tconsole.log(\"Hit end point of scene.\");\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {number} event.progress - Reflects the current progress of the scene\r\n\t\t * @property {string} event.state - The current state of the scene `\"DURING\"` or `\"AFTER\"`\r\n\t\t * @property {string} event.scrollDirection - Indicates which way we are scrolling `\"PAUSED\"`, `\"FORWARD\"` or `\"REVERSE\"`\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene enter event. \r\n\t\t * Fires whenever the scene enters the \"DURING\" state. \r\n\t\t * Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene enters its active scroll timeframe, regardless of the scroll-direction.\r\n\t\t *\r\n\t\t * For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#enter\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"enter\", function (event) {\r\n\t\t * \tconsole.log(\"Scene entered.\");\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {number} event.progress - Reflects the current progress of the scene\r\n\t\t * @property {string} event.state - The current state of the scene - always `\"DURING\"`\r\n\t\t * @property {string} event.scrollDirection - Indicates which way we are scrolling `\"PAUSED\"`, `\"FORWARD\"` or `\"REVERSE\"`\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene leave event. \r\n\t\t * Fires whenever the scene's state goes from \"DURING\" to either \"BEFORE\" or \"AFTER\". \r\n\t\t * Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene leaves its active scroll timeframe, regardless of the scroll-direction.\r\n\t\t *\r\n\t\t * For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#leave\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"leave\", function (event) {\r\n\t\t * \tconsole.log(\"Scene left.\");\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {number} event.progress - Reflects the current progress of the scene\r\n\t\t * @property {string} event.state - The current state of the scene `\"BEFORE\"` or `\"AFTER\"`\r\n\t\t * @property {string} event.scrollDirection - Indicates which way we are scrolling `\"PAUSED\"`, `\"FORWARD\"` or `\"REVERSE\"`\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene update event. \r\n\t\t * Fires whenever the scene is updated (but not necessarily changes the progress).\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#update\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"update\", function (event) {\r\n\t\t * \tconsole.log(\"Scene updated.\");\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {number} event.startPos - The starting position of the scene (in relation to the conainer)\r\n\t\t * @property {number} event.endPos - The ending position of the scene (in relation to the conainer)\r\n\t\t * @property {number} event.scrollPos - The current scroll position of the container\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene progress event. \r\n\t\t * Fires whenever the progress of the scene changes.\r\n\t\t *\r\n\t\t * For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#progress\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"progress\", function (event) {\r\n\t\t * \tconsole.log(\"Scene progress changed to \" + event.progress);\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {number} event.progress - Reflects the current progress of the scene\r\n\t\t * @property {string} event.state - The current state of the scene `\"BEFORE\"`, `\"DURING\"` or `\"AFTER\"`\r\n\t\t * @property {string} event.scrollDirection - Indicates which way we are scrolling `\"PAUSED\"`, `\"FORWARD\"` or `\"REVERSE\"`\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene change event. \r\n\t\t * Fires whenvever a property of the scene is changed.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#change\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"change\", function (event) {\r\n\t\t * \tconsole.log(\"Scene Property \\\"\" + event.what + \"\\\" changed to \" + event.newval);\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {string} event.what - Indicates what value has been changed\r\n\t\t * @property {mixed} event.newval - The new value of the changed property\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene shift event. \r\n\t\t * Fires whenvever the start or end **scroll offset** of the scene change.\r\n\t\t * This happens explicitely, when one of these values change: `offset`, `duration` or `triggerHook`.\r\n\t\t * It will fire implicitly when the `triggerElement` changes, if the new element has a different position (most cases).\r\n\t\t * It will also fire implicitly when the size of the container changes and the triggerHook is anything other than `onLeave`.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#shift\r\n\t\t * @since 1.1.0\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"shift\", function (event) {\r\n\t\t * \tconsole.log(\"Scene moved, because the \" + event.reason + \" has changed.)\");\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {string} event.reason - Indicates why the scene has shifted\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene destroy event. \r\n\t\t * Fires whenvever the scene is destroyed.\r\n\t\t * This can be used to tidy up custom behaviour used in events.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#destroy\r\n\t\t * @since 1.1.0\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"enter\", function (event) {\r\n\t\t * // add custom action\r\n\t\t * $(\"#my-elem\").left(\"200\");\r\n\t\t * })\r\n\t\t * .on(\"destroy\", function (event) {\r\n\t\t * // reset my element to start position\r\n\t\t * if (event.reset) {\r\n\t\t * $(\"#my-elem\").left(\"0\");\r\n\t\t * }\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {boolean} event.reset - Indicates if the destroy method was called with reset `true` or `false`.\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene add event. \r\n\t\t * Fires when the scene is added to a controller.\r\n\t\t * This is mostly used by plugins to know that change might be due.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#add\r\n\t\t * @since 2.0.0\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"add\", function (event) {\r\n\t\t * \tconsole.log('Scene was added to a new controller.');\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t * @property {boolean} event.controller - The controller object the scene was added to.\r\n\t\t */\r\n\t\t/**\r\n\t\t * Scene remove event. \r\n\t\t * Fires when the scene is removed from a controller.\r\n\t\t * This is mostly used by plugins to know that change might be due.\r\n\t\t *\r\n\t\t * @event ScrollMagic.Scene#remove\r\n\t\t * @since 2.0.0\r\n\t\t *\r\n\t\t * @example\r\n\t\t * scene.on(\"remove\", function (event) {\r\n\t\t * \tconsole.log('Scene was removed from its controller.');\r\n\t\t * });\r\n\t\t *\r\n\t\t * @property {object} event - The event Object passed to each callback\r\n\t\t * @property {string} event.type - The name of the event\r\n\t\t * @property {Scene} event.target - The Scene object that triggered this event\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * Add one ore more event listener. \r\n\t\t * The callback function will be fired at the respective event, and an object containing relevant data will be passed to the callback.\r\n\t\t * @method ScrollMagic.Scene#on\r\n\t\t *\r\n\t\t * @example\r\n\t\t * function callback (event) {\r\n\t\t * \t\tconsole.log(\"Event fired! (\" + event.type + \")\");\r\n\t\t * }\r\n\t\t * // add listeners\r\n\t\t * scene.on(\"change update progress start end enter leave\", callback);\r\n\t\t *\r\n\t\t * @param {string} names - The name or names of the event the callback should be attached to.\r\n\t\t * @param {function} callback - A function that should be executed, when the event is dispatched. An event object will be passed to the callback.\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.on = function (names, callback) {\r\n\t\t\tif (_util.type.Function(callback)) {\r\n\t\t\t\tnames = names.trim().split(' ');\r\n\t\t\t\tnames.forEach(function (fullname) {\r\n\t\t\t\t\tvar\r\n\t\t\t\t\t\tnameparts = fullname.split('.'),\r\n\t\t\t\t\t\teventname = nameparts[0],\r\n\t\t\t\t\t\tnamespace = nameparts[1];\r\n\t\t\t\t\tif (eventname != \"*\") { // disallow wildcards\r\n\t\t\t\t\t\tif (!_listeners[eventname]) {\r\n\t\t\t\t\t\t\t_listeners[eventname] = [];\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t_listeners[eventname].push({\r\n\t\t\t\t\t\t\tnamespace: namespace || '',\r\n\t\t\t\t\t\t\tcallback: callback\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t} else {\r\n\t\t\t\tlog(1, \"ERROR when calling '.on()': Supplied callback for '\" + names + \"' is not a valid function!\");\r\n\t\t\t}\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Remove one or more event listener.\r\n\t\t * @method ScrollMagic.Scene#off\r\n\t\t *\r\n\t\t * @example\r\n\t\t * function callback (event) {\r\n\t\t * \t\tconsole.log(\"Event fired! (\" + event.type + \")\");\r\n\t\t * }\r\n\t\t * // add listeners\r\n\t\t * scene.on(\"change update\", callback);\r\n\t\t * // remove listeners\r\n\t\t * scene.off(\"change update\", callback);\r\n\t\t *\r\n\t\t * @param {string} names - The name or names of the event that should be removed.\r\n\t\t * @param {function} [callback] - A specific callback function that should be removed. If none is passed all callbacks to the event listener will be removed.\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.off = function (names, callback) {\r\n\t\t\tif (!names) {\r\n\t\t\t\tlog(1, \"ERROR: Invalid event name supplied.\");\r\n\t\t\t\treturn Scene;\r\n\t\t\t}\r\n\t\t\tnames = names.trim().split(' ');\r\n\t\t\tnames.forEach(function (fullname, key) {\r\n\t\t\t\tvar\r\n\t\t\t\t\tnameparts = fullname.split('.'),\r\n\t\t\t\t\teventname = nameparts[0],\r\n\t\t\t\t\tnamespace = nameparts[1] || '',\r\n\t\t\t\t\tremoveList = eventname === '*' ? Object.keys(_listeners) : [eventname];\r\n\t\t\t\tremoveList.forEach(function (remove) {\r\n\t\t\t\t\tvar\r\n\t\t\t\t\t\tlist = _listeners[remove] || [],\r\n\t\t\t\t\t\ti = list.length;\r\n\t\t\t\t\twhile (i--) {\r\n\t\t\t\t\t\tvar listener = list[i];\r\n\t\t\t\t\t\tif (listener && (namespace === listener.namespace || namespace === '*') && (!callback || callback == listener.callback)) {\r\n\t\t\t\t\t\t\tlist.splice(i, 1);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif (!list.length) {\r\n\t\t\t\t\t\tdelete _listeners[remove];\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Trigger an event.\r\n\t\t * @method ScrollMagic.Scene#trigger\r\n\t\t *\r\n\t\t * @example\r\n\t\t * this.trigger(\"change\");\r\n\t\t *\r\n\t\t * @param {string} name - The name of the event that should be triggered.\r\n\t\t * @param {object} [vars] - An object containing info that should be passed to the callback.\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.trigger = function (name, vars) {\r\n\t\t\tif (name) {\r\n\t\t\t\tvar\r\n\t\t\t\t\tnameparts = name.trim().split('.'),\r\n\t\t\t\t\teventname = nameparts[0],\r\n\t\t\t\t\tnamespace = nameparts[1],\r\n\t\t\t\t\tlisteners = _listeners[eventname];\r\n\t\t\t\tlog(3, 'event fired:', eventname, vars ? \"->\" : '', vars || '');\r\n\t\t\t\tif (listeners) {\r\n\t\t\t\t\tlisteners.forEach(function (listener, key) {\r\n\t\t\t\t\t\tif (!namespace || namespace === listener.namespace) {\r\n\t\t\t\t\t\t\tlistener.callback.call(Scene, new ScrollMagic.Event(eventname, listener.namespace, Scene, vars));\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tlog(1, \"ERROR: Invalid event name supplied.\");\r\n\t\t\t}\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t// set event listeners\r\n\t\tScene\r\n\t\t\t.on(\"change.internal\", function (e) {\r\n\t\t\t\tif (e.what !== \"loglevel\" && e.what !== \"tweenChanges\") { // no need for a scene update scene with these options...\r\n\t\t\t\t\tif (e.what === \"triggerElement\") {\r\n\t\t\t\t\t\tupdateTriggerElementPosition();\r\n\t\t\t\t\t} else if (e.what === \"reverse\") { // the only property left that may have an impact on the current scene state. Everything else is handled by the shift event.\r\n\t\t\t\t\t\tScene.update();\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\t.on(\"shift.internal\", function (e) {\r\n\t\t\t\tupdateScrollOffset();\r\n\t\t\t\tScene.update(); // update scene to reflect new position\r\n\t\t\t});\r\n\r\n\t\t/**\r\n\t\t * Send a debug message to the console.\r\n\t\t * @private\r\n\t\t * but provided publicly with _log for plugins\r\n\t\t *\r\n\t\t * @param {number} loglevel - The loglevel required to initiate output for the message.\r\n\t\t * @param {...mixed} output - One or more variables that should be passed to the console.\r\n\t\t */\r\n\t\tvar log = this._log = function (loglevel, output) {\r\n\t\t\tif (_options.loglevel >= loglevel) {\r\n\t\t\t\tArray.prototype.splice.call(arguments, 1, 0, \"(\" + NAMESPACE + \") ->\");\r\n\t\t\t\t_util.log.apply(window, arguments);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Add the scene to a controller. \r\n\t\t * This is the equivalent to `Controller.addScene(scene)`.\r\n\t\t * @method ScrollMagic.Scene#addTo\r\n\t\t *\r\n\t\t * @example\r\n\t\t * // add a scene to a ScrollMagic Controller\r\n\t\t * scene.addTo(controller);\r\n\t\t *\r\n\t\t * @param {ScrollMagic.Controller} controller - The controller to which the scene should be added.\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.addTo = function (controller) {\r\n\t\t\tif (!(controller instanceof ScrollMagic.Controller)) {\r\n\t\t\t\tlog(1, \"ERROR: supplied argument of 'addTo()' is not a valid ScrollMagic Controller\");\r\n\t\t\t} else if (_controller != controller) {\r\n\t\t\t\t// new controller\r\n\t\t\t\tif (_controller) { // was associated to a different controller before, so remove it...\r\n\t\t\t\t\t_controller.removeScene(Scene);\r\n\t\t\t\t}\r\n\t\t\t\t_controller = controller;\r\n\t\t\t\tvalidateOption();\r\n\t\t\t\tupdateDuration(true);\r\n\t\t\t\tupdateTriggerElementPosition(true);\r\n\t\t\t\tupdateScrollOffset();\r\n\t\t\t\t_controller.info(\"container\").addEventListener('resize', onContainerResize);\r\n\t\t\t\tcontroller.addScene(Scene);\r\n\t\t\t\tScene.trigger(\"add\", {\r\n\t\t\t\t\tcontroller: _controller\r\n\t\t\t\t});\r\n\t\t\t\tlog(3, \"added \" + NAMESPACE + \" to controller\");\r\n\t\t\t\tScene.update();\r\n\t\t\t}\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the current enabled state of the scene. \r\n\t\t * This can be used to disable this scene without removing or destroying it.\r\n\t\t * @method ScrollMagic.Scene#enabled\r\n\t\t *\r\n\t\t * @example\r\n\t\t * // get the current value\r\n\t\t * var enabled = scene.enabled();\r\n\t\t *\r\n\t\t * // disable the scene\r\n\t\t * scene.enabled(false);\r\n\t\t *\r\n\t\t * @param {boolean} [newState] - The new enabled state of the scene `true` or `false`.\r\n\t\t * @returns {(boolean|Scene)} Current enabled state or parent object for chaining.\r\n\t\t */\r\n\t\tthis.enabled = function (newState) {\r\n\t\t\tif (!arguments.length) { // get\r\n\t\t\t\treturn _enabled;\r\n\t\t\t} else if (_enabled != newState) { // set\r\n\t\t\t\t_enabled = !!newState;\r\n\t\t\t\tScene.update(true);\r\n\t\t\t}\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Remove the scene from the controller. \r\n\t\t * This is the equivalent to `Controller.removeScene(scene)`.\r\n\t\t * The scene will not be updated anymore until you readd it to a controller.\r\n\t\t * To remove the pin or the tween you need to call removeTween() or removePin() respectively.\r\n\t\t * @method ScrollMagic.Scene#remove\r\n\t\t * @example\r\n\t\t * // remove the scene from its controller\r\n\t\t * scene.remove();\r\n\t\t *\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.remove = function () {\r\n\t\t\tif (_controller) {\r\n\t\t\t\t_controller.info(\"container\").removeEventListener('resize', onContainerResize);\r\n\t\t\t\tvar tmpParent = _controller;\r\n\t\t\t\t_controller = undefined;\r\n\t\t\t\ttmpParent.removeScene(Scene);\r\n\t\t\t\tScene.trigger(\"remove\");\r\n\t\t\t\tlog(3, \"removed \" + NAMESPACE + \" from controller\");\r\n\t\t\t}\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Destroy the scene and everything.\r\n\t\t * @method ScrollMagic.Scene#destroy\r\n\t\t * @example\r\n\t\t * // destroy the scene without resetting the pin and tween to their initial positions\r\n\t\t * scene = scene.destroy();\r\n\t\t *\r\n\t\t * // destroy the scene and reset the pin and tween\r\n\t\t * scene = scene.destroy(true);\r\n\t\t *\r\n\t\t * @param {boolean} [reset=false] - If `true` the pin and tween (if existent) will be reset.\r\n\t\t * @returns {null} Null to unset handler variables.\r\n\t\t */\r\n\t\tthis.destroy = function (reset) {\r\n\t\t\tScene.trigger(\"destroy\", {\r\n\t\t\t\treset: reset\r\n\t\t\t});\r\n\t\t\tScene.remove();\r\n\t\t\tScene.off(\"*.*\");\r\n\t\t\tlog(3, \"destroyed \" + NAMESPACE + \" (reset: \" + (reset ? \"true\" : \"false\") + \")\");\r\n\t\t\treturn null;\r\n\t\t};\r\n\r\n\r\n\t\t/**\r\n\t\t * Updates the Scene to reflect the current state. \r\n\t\t * This is the equivalent to `Controller.updateScene(scene, immediately)`. \r\n\t\t * The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container. \r\n\t\t * It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress.\r\n\t\t * This means an update doesn't necessarily result in a progress change. The `progress` event will be fired if the progress has indeed changed between this update and the last. \r\n\t\t * _**NOTE:** This method gets called constantly whenever ScrollMagic detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters._\r\n\t\t * @method ScrollMagic.Scene#update\r\n\t\t * @example\r\n\t\t * // update the scene on next tick\r\n\t\t * scene.update();\r\n\t\t *\r\n\t\t * // update the scene immediately\r\n\t\t * scene.update(true);\r\n\t\t *\r\n\t\t * @fires Scene.update\r\n\t\t *\r\n\t\t * @param {boolean} [immediately=false] - If `true` the update will be instant, if `false` it will wait until next update cycle (better performance).\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.update = function (immediately) {\r\n\t\t\tif (_controller) {\r\n\t\t\t\tif (immediately) {\r\n\t\t\t\t\tif (_controller.enabled() && _enabled) {\r\n\t\t\t\t\t\tvar\r\n\t\t\t\t\t\t\tscrollPos = _controller.info(\"scrollPos\"),\r\n\t\t\t\t\t\t\tnewProgress;\r\n\r\n\t\t\t\t\t\tif (_options.duration > 0) {\r\n\t\t\t\t\t\t\tnewProgress = (scrollPos - _scrollOffset.start) / (_scrollOffset.end - _scrollOffset.start);\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tnewProgress = scrollPos >= _scrollOffset.start ? 1 : 0;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tScene.trigger(\"update\", {\r\n\t\t\t\t\t\t\tstartPos: _scrollOffset.start,\r\n\t\t\t\t\t\t\tendPos: _scrollOffset.end,\r\n\t\t\t\t\t\t\tscrollPos: scrollPos\r\n\t\t\t\t\t\t});\r\n\r\n\t\t\t\t\t\tScene.progress(newProgress);\r\n\t\t\t\t\t} else if (_pin && _state === SCENE_STATE_DURING) {\r\n\t\t\t\t\t\tupdatePinState(true); // unpin in position\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\t_controller.updateScene(Scene, false);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Updates dynamic scene variables like the trigger element position or the duration.\r\n\t\t * This method is automatically called in regular intervals from the controller. See {@link ScrollMagic.Controller} option `refreshInterval`.\r\n\t\t * \r\n\t\t * You can call it to minimize lag, for example when you intentionally change the position of the triggerElement.\r\n\t\t * If you don't it will simply be updated in the next refresh interval of the container, which is usually sufficient.\r\n\t\t *\r\n\t\t * @method ScrollMagic.Scene#refresh\r\n\t\t * @since 1.1.0\r\n\t\t * @example\r\n\t\t * scene = new ScrollMagic.Scene({triggerElement: \"#trigger\"});\r\n\t\t * \r\n\t\t * // change the position of the trigger\r\n\t\t * $(\"#trigger\").css(\"top\", 500);\r\n\t\t * // immediately let the scene know of this change\r\n\t\t * scene.refresh();\r\n\t\t *\r\n\t\t * @fires {@link Scene.shift}, if the trigger element position or the duration changed\r\n\t\t * @fires {@link Scene.change}, if the duration changed\r\n\t\t *\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.refresh = function () {\r\n\t\t\tupdateDuration();\r\n\t\t\tupdateTriggerElementPosition();\r\n\t\t\t// update trigger element position\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the scene's progress. \r\n\t\t * Usually it shouldn't be necessary to use this as a setter, as it is set automatically by scene.update(). \r\n\t\t * The order in which the events are fired depends on the duration of the scene:\r\n\t\t * 1. Scenes with `duration == 0`: \r\n\t\t * Scenes that have no duration by definition have no ending. Thus the `end` event will never be fired. \r\n\t\t * When the trigger position of the scene is passed the events are always fired in this order: \r\n\t\t * `enter`, `start`, `progress` when scrolling forward \r\n\t\t * and \r\n\t\t * `progress`, `start`, `leave` when scrolling in reverse\r\n\t\t * 2. Scenes with `duration > 0`: \r\n\t\t * Scenes with a set duration have a defined start and end point. \r\n\t\t * When scrolling past the start position of the scene it will fire these events in this order: \r\n\t\t * `enter`, `start`, `progress` \r\n\t\t * When continuing to scroll and passing the end point it will fire these events: \r\n\t\t * `progress`, `end`, `leave` \r\n\t\t * When reversing through the end point these events are fired: \r\n\t\t * `enter`, `end`, `progress` \r\n\t\t * And when continuing to scroll past the start position in reverse it will fire: \r\n\t\t * `progress`, `start`, `leave` \r\n\t\t * In between start and end the `progress` event will be called constantly, whenever the progress changes.\r\n\t\t * \r\n\t\t * In short: \r\n\t\t * `enter` events will always trigger **before** the progress update and `leave` envents will trigger **after** the progress update. \r\n\t\t * `start` and `end` will always trigger at their respective position.\r\n\t\t * \r\n\t\t * Please review the event descriptions for details on the events and the event object that is passed to the callback.\r\n\t\t * \r\n\t\t * @method ScrollMagic.Scene#progress\r\n\t\t * @example\r\n\t\t * // get the current scene progress\r\n\t\t * var progress = scene.progress();\r\n\t\t *\r\n\t\t * // set new scene progress\r\n\t\t * scene.progress(0.3);\r\n\t\t *\r\n\t\t * @fires {@link Scene.enter}, when used as setter\r\n\t\t * @fires {@link Scene.start}, when used as setter\r\n\t\t * @fires {@link Scene.progress}, when used as setter\r\n\t\t * @fires {@link Scene.end}, when used as setter\r\n\t\t * @fires {@link Scene.leave}, when used as setter\r\n\t\t *\r\n\t\t * @param {number} [progress] - The new progress value of the scene `[0-1]`.\r\n\t\t * @returns {number} `get` - Current scene progress.\r\n\t\t * @returns {Scene} `set` - Parent object for chaining.\r\n\t\t */\r\n\t\tthis.progress = function (progress) {\r\n\t\t\tif (!arguments.length) { // get\r\n\t\t\t\treturn _progress;\r\n\t\t\t} else { // set\r\n\t\t\t\tvar\r\n\t\t\t\t\tdoUpdate = false,\r\n\t\t\t\t\toldState = _state,\r\n\t\t\t\t\tscrollDirection = _controller ? _controller.info(\"scrollDirection\") : 'PAUSED',\r\n\t\t\t\t\treverseOrForward = _options.reverse || progress >= _progress;\r\n\t\t\t\tif (_options.duration === 0) {\r\n\t\t\t\t\t// zero duration scenes\r\n\t\t\t\t\tdoUpdate = _progress != progress;\r\n\t\t\t\t\t_progress = progress < 1 && reverseOrForward ? 0 : 1;\r\n\t\t\t\t\t_state = _progress === 0 ? SCENE_STATE_BEFORE : SCENE_STATE_DURING;\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// scenes with start and end\r\n\t\t\t\t\tif (progress < 0 && _state !== SCENE_STATE_BEFORE && reverseOrForward) {\r\n\t\t\t\t\t\t// go back to initial state\r\n\t\t\t\t\t\t_progress = 0;\r\n\t\t\t\t\t\t_state = SCENE_STATE_BEFORE;\r\n\t\t\t\t\t\tdoUpdate = true;\r\n\t\t\t\t\t} else if (progress >= 0 && progress < 1 && reverseOrForward) {\r\n\t\t\t\t\t\t_progress = progress;\r\n\t\t\t\t\t\t_state = SCENE_STATE_DURING;\r\n\t\t\t\t\t\tdoUpdate = true;\r\n\t\t\t\t\t} else if (progress >= 1 && _state !== SCENE_STATE_AFTER) {\r\n\t\t\t\t\t\t_progress = 1;\r\n\t\t\t\t\t\t_state = SCENE_STATE_AFTER;\r\n\t\t\t\t\t\tdoUpdate = true;\r\n\t\t\t\t\t} else if (_state === SCENE_STATE_DURING && !reverseOrForward) {\r\n\t\t\t\t\t\tupdatePinState(); // in case we scrolled backwards mid-scene and reverse is disabled => update the pin position, so it doesn't move back as well.\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tif (doUpdate) {\r\n\t\t\t\t\t// fire events\r\n\t\t\t\t\tvar\r\n\t\t\t\t\t\teventVars = {\r\n\t\t\t\t\t\t\tprogress: _progress,\r\n\t\t\t\t\t\t\tstate: _state,\r\n\t\t\t\t\t\t\tscrollDirection: scrollDirection\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tstateChanged = _state != oldState;\r\n\r\n\t\t\t\t\tvar trigger = function (eventName) { // tmp helper to simplify code\r\n\t\t\t\t\t\tScene.trigger(eventName, eventVars);\r\n\t\t\t\t\t};\r\n\r\n\t\t\t\t\tif (stateChanged) { // enter events\r\n\t\t\t\t\t\tif (oldState !== SCENE_STATE_DURING) {\r\n\t\t\t\t\t\t\ttrigger(\"enter\");\r\n\t\t\t\t\t\t\ttrigger(oldState === SCENE_STATE_BEFORE ? \"start\" : \"end\");\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttrigger(\"progress\");\r\n\t\t\t\t\tif (stateChanged) { // leave events\r\n\t\t\t\t\t\tif (_state !== SCENE_STATE_DURING) {\r\n\t\t\t\t\t\t\ttrigger(_state === SCENE_STATE_BEFORE ? \"start\" : \"end\");\r\n\t\t\t\t\t\t\ttrigger(\"leave\");\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn Scene;\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\t/**\r\n\t\t * Update the start and end scrollOffset of the container.\r\n\t\t * The positions reflect what the controller's scroll position will be at the start and end respectively.\r\n\t\t * Is called, when:\r\n\t\t * - Scene event \"change\" is called with: offset, triggerHook, duration \r\n\t\t * - scroll container event \"resize\" is called\r\n\t\t * - the position of the triggerElement changes\r\n\t\t * - the controller changes -> addTo()\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar updateScrollOffset = function () {\r\n\t\t\t_scrollOffset = {\r\n\t\t\t\tstart: _triggerPos + _options.offset\r\n\t\t\t};\r\n\t\t\tif (_controller && _options.triggerElement) {\r\n\t\t\t\t// take away triggerHook portion to get relative to top\r\n\t\t\t\t_scrollOffset.start -= _controller.info(\"size\") * _options.triggerHook;\r\n\t\t\t}\r\n\t\t\t_scrollOffset.end = _scrollOffset.start + _options.duration;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Updates the duration if set to a dynamic function.\r\n\t\t * This method is called when the scene is added to a controller and in regular intervals from the controller through scene.refresh().\r\n\t\t * \r\n\t\t * @fires {@link Scene.change}, if the duration changed\r\n\t\t * @fires {@link Scene.shift}, if the duration changed\r\n\t\t *\r\n\t\t * @param {boolean} [suppressEvents=false] - If true the shift event will be suppressed.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar updateDuration = function (suppressEvents) {\r\n\t\t\t// update duration\r\n\t\t\tif (_durationUpdateMethod) {\r\n\t\t\t\tvar varname = \"duration\";\r\n\t\t\t\tif (changeOption(varname, _durationUpdateMethod.call(Scene)) && !suppressEvents) { // set\r\n\t\t\t\t\tScene.trigger(\"change\", {\r\n\t\t\t\t\t\twhat: varname,\r\n\t\t\t\t\t\tnewval: _options[varname]\r\n\t\t\t\t\t});\r\n\t\t\t\t\tScene.trigger(\"shift\", {\r\n\t\t\t\t\t\treason: varname\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Updates the position of the triggerElement, if present.\r\n\t\t * This method is called ...\r\n\t\t * - ... when the triggerElement is changed\r\n\t\t * - ... when the scene is added to a (new) controller\r\n\t\t * - ... in regular intervals from the controller through scene.refresh().\r\n\t\t * \r\n\t\t * @fires {@link Scene.shift}, if the position changed\r\n\t\t *\r\n\t\t * @param {boolean} [suppressEvents=false] - If true the shift event will be suppressed.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar updateTriggerElementPosition = function (suppressEvents) {\r\n\t\t\tvar\r\n\t\t\t\telementPos = 0,\r\n\t\t\t\ttelem = _options.triggerElement;\r\n\t\t\tif (_controller && (telem || _triggerPos > 0)) { // either an element exists or was removed and the triggerPos is still > 0\r\n\t\t\t\tif (telem) { // there currently a triggerElement set\r\n\t\t\t\t\tif (telem.parentNode) { // check if element is still attached to DOM\r\n\t\t\t\t\t\tvar\r\n\t\t\t\t\t\t\tcontrollerInfo = _controller.info(),\r\n\t\t\t\t\t\t\tcontainerOffset = _util.get.offset(controllerInfo.container), // container position is needed because element offset is returned in relation to document, not in relation to container.\r\n\t\t\t\t\t\t\tparam = controllerInfo.vertical ? \"top\" : \"left\"; // which param is of interest ?\r\n\r\n\t\t\t\t\t\t// if parent is spacer, use spacer position instead so correct start position is returned for pinned elements.\r\n\t\t\t\t\t\twhile (telem.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) {\r\n\t\t\t\t\t\t\ttelem = telem.parentNode;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tvar elementOffset = _util.get.offset(telem);\r\n\r\n\t\t\t\t\t\tif (!controllerInfo.isDocument) { // container is not the document root, so substract scroll Position to get correct trigger element position relative to scrollcontent\r\n\t\t\t\t\t\t\tcontainerOffset[param] -= _controller.scrollPos();\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\telementPos = elementOffset[param] - containerOffset[param];\r\n\r\n\t\t\t\t\t} else { // there was an element, but it was removed from DOM\r\n\t\t\t\t\t\tlog(2, \"WARNING: triggerElement was removed from DOM and will be reset to\", undefined);\r\n\t\t\t\t\t\tScene.triggerElement(undefined); // unset, so a change event is triggered\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\tvar changed = elementPos != _triggerPos;\r\n\t\t\t\t_triggerPos = elementPos;\r\n\t\t\t\tif (changed && !suppressEvents) {\r\n\t\t\t\t\tScene.trigger(\"shift\", {\r\n\t\t\t\t\t\treason: \"triggerElementPosition\"\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Trigger a shift event, when the container is resized and the triggerHook is > 1.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar onContainerResize = function (e) {\r\n\t\t\tif (_options.triggerHook > 0) {\r\n\t\t\t\tScene.trigger(\"shift\", {\r\n\t\t\t\t\treason: \"containerResize\"\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t};\r\n\r\n\r\n\t\tvar _validate = _util.extend(SCENE_OPTIONS.validate, {\r\n\t\t\t// validation for duration handled internally for reference to private var _durationMethod\r\n\t\t\tduration: function (val) {\r\n\t\t\t\tif (_util.type.String(val) && val.match(/^(\\.|\\d)*\\d+%$/)) {\r\n\t\t\t\t\t// percentage value\r\n\t\t\t\t\tvar perc = parseFloat(val) / 100;\r\n\t\t\t\t\tval = function () {\r\n\t\t\t\t\t\treturn _controller ? _controller.info(\"size\") * perc : 0;\r\n\t\t\t\t\t};\r\n\t\t\t\t}\r\n\t\t\t\tif (_util.type.Function(val)) {\r\n\t\t\t\t\t// function\r\n\t\t\t\t\t_durationUpdateMethod = val;\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tval = parseFloat(_durationUpdateMethod.call(Scene));\r\n\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\tval = -1; // will cause error below\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t// val has to be float\r\n\t\t\t\tval = parseFloat(val);\r\n\t\t\t\tif (!_util.type.Number(val) || val < 0) {\r\n\t\t\t\t\tif (_durationUpdateMethod) {\r\n\t\t\t\t\t\t_durationUpdateMethod = undefined;\r\n\t\t\t\t\t\tthrow [\"Invalid return value of supplied function for option \\\"duration\\\":\", val];\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tthrow [\"Invalid value for option \\\"duration\\\":\", val];\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\treturn val;\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t/**\r\n\t\t * Checks the validity of a specific or all options and reset to default if neccessary.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar validateOption = function (check) {\r\n\t\t\tcheck = arguments.length ? [check] : Object.keys(_validate);\r\n\t\t\tcheck.forEach(function (optionName, key) {\r\n\t\t\t\tvar value;\r\n\t\t\t\tif (_validate[optionName]) { // there is a validation method for this option\r\n\t\t\t\t\ttry { // validate value\r\n\t\t\t\t\t\tvalue = _validate[optionName](_options[optionName]);\r\n\t\t\t\t\t} catch (e) { // validation failed -> reset to default\r\n\t\t\t\t\t\tvalue = DEFAULT_OPTIONS[optionName];\r\n\t\t\t\t\t\tvar logMSG = _util.type.String(e) ? [e] : e;\r\n\t\t\t\t\t\tif (_util.type.Array(logMSG)) {\r\n\t\t\t\t\t\t\tlogMSG[0] = \"ERROR: \" + logMSG[0];\r\n\t\t\t\t\t\t\tlogMSG.unshift(1); // loglevel 1 for error msg\r\n\t\t\t\t\t\t\tlog.apply(this, logMSG);\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tlog(1, \"ERROR: Problem executing validation callback for option '\" + optionName + \"':\", e.message);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} finally {\r\n\t\t\t\t\t\t_options[optionName] = value;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Helper used by the setter/getters for scene options\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar changeOption = function (varname, newval) {\r\n\t\t\tvar\r\n\t\t\t\tchanged = false,\r\n\t\t\t\toldval = _options[varname];\r\n\t\t\tif (_options[varname] != newval) {\r\n\t\t\t\t_options[varname] = newval;\r\n\t\t\t\tvalidateOption(varname); // resets to default if necessary\r\n\t\t\t\tchanged = oldval != _options[varname];\r\n\t\t\t}\r\n\t\t\treturn changed;\r\n\t\t};\r\n\r\n\t\t// generate getters/setters for all options\r\n\t\tvar addSceneOption = function (optionName) {\r\n\t\t\tif (!Scene[optionName]) {\r\n\t\t\t\tScene[optionName] = function (newVal) {\r\n\t\t\t\t\tif (!arguments.length) { // get\r\n\t\t\t\t\t\treturn _options[optionName];\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tif (optionName === \"duration\") { // new duration is set, so any previously set function must be unset\r\n\t\t\t\t\t\t\t_durationUpdateMethod = undefined;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tif (changeOption(optionName, newVal)) { // set\r\n\t\t\t\t\t\t\tScene.trigger(\"change\", {\r\n\t\t\t\t\t\t\t\twhat: optionName,\r\n\t\t\t\t\t\t\t\tnewval: _options[optionName]\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\tif (SCENE_OPTIONS.shifts.indexOf(optionName) > -1) {\r\n\t\t\t\t\t\t\t\tScene.trigger(\"shift\", {\r\n\t\t\t\t\t\t\t\t\treason: optionName\r\n\t\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn Scene;\r\n\t\t\t\t};\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the duration option value.\r\n\t\t *\r\n\t\t * As a **setter** it accepts three types of parameters:\r\n\t\t * 1. `number`: Sets the duration of the scene to exactly this amount of pixels. \r\n\t\t * This means the scene will last for exactly this amount of pixels scrolled. Sub-Pixels are also valid.\r\n\t\t * A value of `0` means that the scene is 'open end' and no end will be triggered. Pins will never unpin and animations will play independently of scroll progress.\r\n\t\t * 2. `string`: Always updates the duration relative to parent scroll container. \r\n\t\t * For example `\"100%\"` will keep the duration always exactly at the inner height of the scroll container.\r\n\t\t * When scrolling vertically the width is used for reference respectively.\r\n\t\t * 3. `function`: The supplied function will be called to return the scene duration.\r\n\t\t * This is useful in setups where the duration depends on other elements who might change size. By supplying a function you can return a value instead of updating potentially multiple scene durations. \r\n\t\t * The scene can be referenced inside the callback using `this`.\r\n\t\t * _**WARNING:** This is an easy way to kill performance, as the callback will be executed every time `Scene.refresh()` is called, which happens a lot. The interval is defined by the controller (see ScrollMagic.Controller option `refreshInterval`). \r\n\t\t * It's recomended to avoid calculations within the function and use cached variables as return values. \r\n\t\t * This counts double if you use the same function for multiple scenes._\r\n\t\t *\r\n\t\t * @method ScrollMagic.Scene#duration\r\n\t\t * @example\r\n\t\t * // get the current duration value\r\n\t\t * var duration = scene.duration();\r\n\t\t *\r\n\t\t * // set a new duration\r\n\t\t * scene.duration(300);\r\n\t\t *\r\n\t\t * // set duration responsively to container size\r\n\t\t * scene.duration(\"100%\");\r\n\t\t *\r\n\t\t * // use a function to randomize the duration for some reason.\r\n\t\t * var durationValueCache;\r\n\t\t * function durationCallback () {\r\n\t\t * return durationValueCache;\r\n\t\t * }\r\n\t\t * function updateDuration () {\r\n\t\t * durationValueCache = Math.random() * 100;\r\n\t\t * }\r\n\t\t * updateDuration(); // set to initial value\r\n\t\t * scene.duration(durationCallback); // set duration callback\r\n\t\t *\r\n\t\t * @fires {@link Scene.change}, when used as setter\r\n\t\t * @fires {@link Scene.shift}, when used as setter\r\n\t\t * @param {(number|string|function)} [newDuration] - The new duration setting for the scene.\r\n\t\t * @returns {number} `get` - Current scene duration.\r\n\t\t * @returns {Scene} `set` - Parent object for chaining.\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the offset option value.\r\n\t\t * @method ScrollMagic.Scene#offset\r\n\t\t * @example\r\n\t\t * // get the current offset\r\n\t\t * var offset = scene.offset();\r\n\t\t *\r\n\t\t * // set a new offset\r\n\t\t * scene.offset(100);\r\n\t\t *\r\n\t\t * @fires {@link Scene.change}, when used as setter\r\n\t\t * @fires {@link Scene.shift}, when used as setter\r\n\t\t * @param {number} [newOffset] - The new offset of the scene.\r\n\t\t * @returns {number} `get` - Current scene offset.\r\n\t\t * @returns {Scene} `set` - Parent object for chaining.\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the triggerElement option value.\r\n\t\t * Does **not** fire `Scene.shift`, because changing the trigger Element doesn't necessarily mean the start position changes. This will be determined in `Scene.refresh()`, which is automatically triggered.\r\n\t\t * @method ScrollMagic.Scene#triggerElement\r\n\t\t * @example\r\n\t\t * // get the current triggerElement\r\n\t\t * var triggerElement = scene.triggerElement();\r\n\t\t *\r\n\t\t * // set a new triggerElement using a selector\r\n\t\t * scene.triggerElement(\"#trigger\");\r\n\t\t * // set a new triggerElement using a DOM object\r\n\t\t * scene.triggerElement(document.getElementById(\"trigger\"));\r\n\t\t *\r\n\t\t * @fires {@link Scene.change}, when used as setter\r\n\t\t * @param {(string|object)} [newTriggerElement] - The new trigger element for the scene.\r\n\t\t * @returns {(string|object)} `get` - Current triggerElement.\r\n\t\t * @returns {Scene} `set` - Parent object for chaining.\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the triggerHook option value.\r\n\t\t * @method ScrollMagic.Scene#triggerHook\r\n\t\t * @example\r\n\t\t * // get the current triggerHook value\r\n\t\t * var triggerHook = scene.triggerHook();\r\n\t\t *\r\n\t\t * // set a new triggerHook using a string\r\n\t\t * scene.triggerHook(\"onLeave\");\r\n\t\t * // set a new triggerHook using a number\r\n\t\t * scene.triggerHook(0.7);\r\n\t\t *\r\n\t\t * @fires {@link Scene.change}, when used as setter\r\n\t\t * @fires {@link Scene.shift}, when used as setter\r\n\t\t * @param {(number|string)} [newTriggerHook] - The new triggerHook of the scene. See {@link Scene} parameter description for value options.\r\n\t\t * @returns {number} `get` - Current triggerHook (ALWAYS numerical).\r\n\t\t * @returns {Scene} `set` - Parent object for chaining.\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the reverse option value.\r\n\t\t * @method ScrollMagic.Scene#reverse\r\n\t\t * @example\r\n\t\t * // get the current reverse option\r\n\t\t * var reverse = scene.reverse();\r\n\t\t *\r\n\t\t * // set new reverse option\r\n\t\t * scene.reverse(false);\r\n\t\t *\r\n\t\t * @fires {@link Scene.change}, when used as setter\r\n\t\t * @param {boolean} [newReverse] - The new reverse setting of the scene.\r\n\t\t * @returns {boolean} `get` - Current reverse option value.\r\n\t\t * @returns {Scene} `set` - Parent object for chaining.\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * **Get** or **Set** the loglevel option value.\r\n\t\t * @method ScrollMagic.Scene#loglevel\r\n\t\t * @example\r\n\t\t * // get the current loglevel\r\n\t\t * var loglevel = scene.loglevel();\r\n\t\t *\r\n\t\t * // set new loglevel\r\n\t\t * scene.loglevel(3);\r\n\t\t *\r\n\t\t * @fires {@link Scene.change}, when used as setter\r\n\t\t * @param {number} [newLoglevel] - The new loglevel setting of the scene. `[0-3]`\r\n\t\t * @returns {number} `get` - Current loglevel.\r\n\t\t * @returns {Scene} `set` - Parent object for chaining.\r\n\t\t */\r\n\r\n\t\t/**\r\n\t\t * **Get** the associated controller.\r\n\t\t * @method ScrollMagic.Scene#controller\r\n\t\t * @example\r\n\t\t * // get the controller of a scene\r\n\t\t * var controller = scene.controller();\r\n\t\t *\r\n\t\t * @returns {ScrollMagic.Controller} Parent controller or `undefined`\r\n\t\t */\r\n\t\tthis.controller = function () {\r\n\t\t\treturn _controller;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** the current state.\r\n\t\t * @method ScrollMagic.Scene#state\r\n\t\t * @example\r\n\t\t * // get the current state\r\n\t\t * var state = scene.state();\r\n\t\t *\r\n\t\t * @returns {string} `\"BEFORE\"`, `\"DURING\"` or `\"AFTER\"`\r\n\t\t */\r\n\t\tthis.state = function () {\r\n\t\t\treturn _state;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** the current scroll offset for the start of the scene. \r\n\t\t * Mind, that the scrollOffset is related to the size of the container, if `triggerHook` is bigger than `0` (or `\"onLeave\"`). \r\n\t\t * This means, that resizing the container or changing the `triggerHook` will influence the scene's start offset.\r\n\t\t * @method ScrollMagic.Scene#scrollOffset\r\n\t\t * @example\r\n\t\t * // get the current scroll offset for the start and end of the scene.\r\n\t\t * var start = scene.scrollOffset();\r\n\t\t * var end = scene.scrollOffset() + scene.duration();\r\n\t\t * console.log(\"the scene starts at\", start, \"and ends at\", end);\r\n\t\t *\r\n\t\t * @returns {number} The scroll offset (of the container) at which the scene will trigger. Y value for vertical and X value for horizontal scrolls.\r\n\t\t */\r\n\t\tthis.scrollOffset = function () {\r\n\t\t\treturn _scrollOffset.start;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * **Get** the trigger position of the scene (including the value of the `offset` option). \r\n\t\t * @method ScrollMagic.Scene#triggerPosition\r\n\t\t * @example\r\n\t\t * // get the scene's trigger position\r\n\t\t * var triggerPosition = scene.triggerPosition();\r\n\t\t *\r\n\t\t * @returns {number} Start position of the scene. Top position value for vertical and left position value for horizontal scrolls.\r\n\t\t */\r\n\t\tthis.triggerPosition = function () {\r\n\t\t\tvar pos = _options.offset; // the offset is the basis\r\n\t\t\tif (_controller) {\r\n\t\t\t\t// get the trigger position\r\n\t\t\t\tif (_options.triggerElement) {\r\n\t\t\t\t\t// Element as trigger\r\n\t\t\t\t\tpos += _triggerPos;\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// return the height of the triggerHook to start at the beginning\r\n\t\t\t\t\tpos += _controller.info(\"size\") * Scene.triggerHook();\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn pos;\r\n\t\t};\r\n\r\n\r\n\t\tvar\r\n\t\t\t_pin,\r\n\t\t\t_pinOptions;\r\n\r\n\t\tScene\r\n\t\t\t.on(\"shift.internal\", function (e) {\r\n\t\t\t\tvar durationChanged = e.reason === \"duration\";\r\n\t\t\t\tif ((_state === SCENE_STATE_AFTER && durationChanged) || (_state === SCENE_STATE_DURING && _options.duration === 0)) {\r\n\t\t\t\t\t// if [duration changed after a scene (inside scene progress updates pin position)] or [duration is 0, we are in pin phase and some other value changed].\r\n\t\t\t\t\tupdatePinState();\r\n\t\t\t\t}\r\n\t\t\t\tif (durationChanged) {\r\n\t\t\t\t\tupdatePinDimensions();\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t\t.on(\"progress.internal\", function (e) {\r\n\t\t\t\tupdatePinState();\r\n\t\t\t})\r\n\t\t\t.on(\"add.internal\", function (e) {\r\n\t\t\t\tupdatePinDimensions();\r\n\t\t\t})\r\n\t\t\t.on(\"destroy.internal\", function (e) {\r\n\t\t\t\tScene.removePin(e.reset);\r\n\t\t\t});\r\n\t\t/**\r\n\t\t * Update the pin state.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar updatePinState = function (forceUnpin) {\r\n\t\t\tif (_pin && _controller) {\r\n\t\t\t\tvar\r\n\t\t\t\t\tcontainerInfo = _controller.info(),\r\n\t\t\t\t\tpinTarget = _pinOptions.spacer.firstChild; // may be pin element or another spacer, if cascading pins\r\n\r\n\t\t\t\tif (!forceUnpin && _state === SCENE_STATE_DURING) { // during scene or if duration is 0 and we are past the trigger\r\n\t\t\t\t\t// pinned state\r\n\t\t\t\t\tif (_util.css(pinTarget, \"position\") != \"fixed\") {\r\n\t\t\t\t\t\t// change state before updating pin spacer (position changes due to fixed collapsing might occur.)\r\n\t\t\t\t\t\t_util.css(pinTarget, {\r\n\t\t\t\t\t\t\t\"position\": \"fixed\"\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t// update pin spacer\r\n\t\t\t\t\t\tupdatePinDimensions();\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tvar\r\n\t\t\t\t\t\tfixedPos = _util.get.offset(_pinOptions.spacer, true), // get viewport position of spacer\r\n\t\t\t\t\t\tscrollDistance = _options.reverse || _options.duration === 0 ?\r\n\t\t\t\t\t\tcontainerInfo.scrollPos - _scrollOffset.start // quicker\r\n\t\t\t\t\t\t:\r\n\t\t\t\t\t\tMath.round(_progress * _options.duration * 10) / 10; // if no reverse and during pin the position needs to be recalculated using the progress\r\n\r\n\t\t\t\t\t// add scrollDistance\r\n\t\t\t\t\tfixedPos[containerInfo.vertical ? \"top\" : \"left\"] += scrollDistance;\r\n\r\n\t\t\t\t\t// set new values\r\n\t\t\t\t\t_util.css(_pinOptions.spacer.firstChild, {\r\n\t\t\t\t\t\ttop: fixedPos.top,\r\n\t\t\t\t\t\tleft: fixedPos.left\r\n\t\t\t\t\t});\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// unpinned state\r\n\t\t\t\t\tvar\r\n\t\t\t\t\t\tnewCSS = {\r\n\t\t\t\t\t\t\tposition: _pinOptions.inFlow ? \"relative\" : \"absolute\",\r\n\t\t\t\t\t\t\ttop: 0,\r\n\t\t\t\t\t\t\tleft: 0\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tchange = _util.css(pinTarget, \"position\") != newCSS.position;\r\n\r\n\t\t\t\t\tif (!_pinOptions.pushFollowers) {\r\n\t\t\t\t\t\tnewCSS[containerInfo.vertical ? \"top\" : \"left\"] = _options.duration * _progress;\r\n\t\t\t\t\t} else if (_options.duration > 0) { // only concerns scenes with duration\r\n\t\t\t\t\t\tif (_state === SCENE_STATE_AFTER && parseFloat(_util.css(_pinOptions.spacer, \"padding-top\")) === 0) {\r\n\t\t\t\t\t\t\tchange = true; // if in after state but havent updated spacer yet (jumped past pin)\r\n\t\t\t\t\t\t} else if (_state === SCENE_STATE_BEFORE && parseFloat(_util.css(_pinOptions.spacer, \"padding-bottom\")) === 0) { // before\r\n\t\t\t\t\t\t\tchange = true; // jumped past fixed state upward direction\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\t// set new values\r\n\t\t\t\t\t_util.css(pinTarget, newCSS);\r\n\t\t\t\t\tif (change) {\r\n\t\t\t\t\t\t// update pin spacer if state changed\r\n\t\t\t\t\t\tupdatePinDimensions();\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Update the pin spacer and/or element size.\r\n\t\t * The size of the spacer needs to be updated whenever the duration of the scene changes, if it is to push down following elements.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar updatePinDimensions = function () {\r\n\t\t\tif (_pin && _controller && _pinOptions.inFlow) { // no spacerresize, if original position is absolute\r\n\t\t\t\tvar\r\n\t\t\t\t\tafter = (_state === SCENE_STATE_AFTER),\r\n\t\t\t\t\tbefore = (_state === SCENE_STATE_BEFORE),\r\n\t\t\t\t\tduring = (_state === SCENE_STATE_DURING),\r\n\t\t\t\t\tvertical = _controller.info(\"vertical\"),\r\n\t\t\t\t\tpinTarget = _pinOptions.spacer.firstChild, // usually the pined element but can also be another spacer (cascaded pins)\r\n\t\t\t\t\tmarginCollapse = _util.isMarginCollapseType(_util.css(_pinOptions.spacer, \"display\")),\r\n\t\t\t\t\tcss = {};\r\n\r\n\t\t\t\t// set new size\r\n\t\t\t\t// if relsize: spacer -> pin | else: pin -> spacer\r\n\t\t\t\tif (_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) {\r\n\t\t\t\t\tif (during) {\r\n\t\t\t\t\t\t_util.css(_pin, {\r\n\t\t\t\t\t\t\t\"width\": _util.get.width(_pinOptions.spacer)\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\t_util.css(_pin, {\r\n\t\t\t\t\t\t\t\"width\": \"100%\"\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// minwidth is needed for cascaded pins.\r\n\t\t\t\t\tcss[\"min-width\"] = _util.get.width(vertical ? _pin : pinTarget, true, true);\r\n\t\t\t\t\tcss.width = during ? css[\"min-width\"] : \"auto\";\r\n\t\t\t\t}\r\n\t\t\t\tif (_pinOptions.relSize.height) {\r\n\t\t\t\t\tif (during) {\r\n\t\t\t\t\t\t// the only padding the spacer should ever include is the duration (if pushFollowers = true), so we need to substract that.\r\n\t\t\t\t\t\t_util.css(_pin, {\r\n\t\t\t\t\t\t\t\"height\": _util.get.height(_pinOptions.spacer) - (_pinOptions.pushFollowers ? _options.duration : 0)\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\t_util.css(_pin, {\r\n\t\t\t\t\t\t\t\"height\": \"100%\"\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// margin is only included if it's a cascaded pin to resolve an IE9 bug\r\n\t\t\t\t\tcss[\"min-height\"] = _util.get.height(vertical ? pinTarget : _pin, true, !marginCollapse); // needed for cascading pins\r\n\t\t\t\t\tcss.height = during ? css[\"min-height\"] : \"auto\";\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// add space for duration if pushFollowers is true\r\n\t\t\t\tif (_pinOptions.pushFollowers) {\r\n\t\t\t\t\tcss[\"padding\" + (vertical ? \"Top\" : \"Left\")] = _options.duration * _progress;\r\n\t\t\t\t\tcss[\"padding\" + (vertical ? \"Bottom\" : \"Right\")] = _options.duration * (1 - _progress);\r\n\t\t\t\t}\r\n\t\t\t\t_util.css(_pinOptions.spacer, css);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Updates the Pin state (in certain scenarios)\r\n\t\t * If the controller container is not the document and we are mid-pin-phase scrolling or resizing the main document can result to wrong pin positions.\r\n\t\t * So this function is called on resize and scroll of the document.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar updatePinInContainer = function () {\r\n\t\t\tif (_controller && _pin && _state === SCENE_STATE_DURING && !_controller.info(\"isDocument\")) {\r\n\t\t\t\tupdatePinState();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Updates the Pin spacer size state (in certain scenarios)\r\n\t\t * If container is resized during pin and relatively sized the size of the pin might need to be updated...\r\n\t\t * So this function is called on resize of the container.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar updateRelativePinSpacer = function () {\r\n\t\t\tif (_controller && _pin && // well, duh\r\n\t\t\t\t_state === SCENE_STATE_DURING && // element in pinned state?\r\n\t\t\t\t( // is width or height relatively sized, but not in relation to body? then we need to recalc.\r\n\t\t\t\t\t((_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) && _util.get.width(window) != _util.get.width(_pinOptions.spacer.parentNode)) ||\r\n\t\t\t\t\t(_pinOptions.relSize.height && _util.get.height(window) != _util.get.height(_pinOptions.spacer.parentNode))\r\n\t\t\t\t)\r\n\t\t\t) {\r\n\t\t\t\tupdatePinDimensions();\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Is called, when the mousewhel is used while over a pinned element inside a div container.\r\n\t\t * If the scene is in fixed state scroll events would be counted towards the body. This forwards the event to the scroll container.\r\n\t\t * @private\r\n\t\t */\r\n\t\tvar onMousewheelOverPin = function (e) {\r\n\t\t\tif (_controller && _pin && _state === SCENE_STATE_DURING && !_controller.info(\"isDocument\")) { // in pin state\r\n\t\t\t\te.preventDefault();\r\n\t\t\t\t_controller._setScrollPos(_controller.info(\"scrollPos\") - ((e.wheelDelta || e[_controller.info(\"vertical\") ? \"wheelDeltaY\" : \"wheelDeltaX\"]) / 3 || -e.detail * 30));\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Pin an element for the duration of the scene.\r\n\t\t * If the scene duration is 0 the element will only be unpinned, if the user scrolls back past the start position. \r\n\t\t * Make sure only one pin is applied to an element at the same time.\r\n\t\t * An element can be pinned multiple times, but only successively.\r\n\t\t * _**NOTE:** The option `pushFollowers` has no effect, when the scene duration is 0._\r\n\t\t * @method ScrollMagic.Scene#setPin\r\n\t\t * @example\r\n\t\t * // pin element and push all following elements down by the amount of the pin duration.\r\n\t\t * scene.setPin(\"#pin\");\r\n\t\t *\r\n\t\t * // pin element and keeping all following elements in their place. The pinned element will move past them.\r\n\t\t * scene.setPin(\"#pin\", {pushFollowers: false});\r\n\t\t *\r\n\t\t * @param {(string|object)} element - A Selector targeting an element or a DOM object that is supposed to be pinned.\r\n\t\t * @param {object} [settings] - settings for the pin\r\n\t\t * @param {boolean} [settings.pushFollowers=true] - If `true` following elements will be \"pushed\" down for the duration of the pin, if `false` the pinned element will just scroll past them. \r\n\t\t \t\t\t\t\t\t\t\t\t\t\t\t Ignored, when duration is `0`.\r\n\t\t * @param {string} [settings.spacerClass=\"scrollmagic-pin-spacer\"] - Classname of the pin spacer element, which is used to replace the element.\r\n\t\t *\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.setPin = function (element, settings) {\r\n\t\t\tvar\r\n\t\t\t\tdefaultSettings = {\r\n\t\t\t\t\tpushFollowers: true,\r\n\t\t\t\t\tspacerClass: \"scrollmagic-pin-spacer\"\r\n\t\t\t\t};\r\n\t\t\tvar pushFollowersActivelySet = settings && settings.hasOwnProperty('pushFollowers');\r\n\t\t\tsettings = _util.extend({}, defaultSettings, settings);\r\n\r\n\t\t\t// validate Element\r\n\t\t\telement = _util.get.elements(element)[0];\r\n\t\t\tif (!element) {\r\n\t\t\t\tlog(1, \"ERROR calling method 'setPin()': Invalid pin element supplied.\");\r\n\t\t\t\treturn Scene; // cancel\r\n\t\t\t} else if (_util.css(element, \"position\") === \"fixed\") {\r\n\t\t\t\tlog(1, \"ERROR calling method 'setPin()': Pin does not work with elements that are positioned 'fixed'.\");\r\n\t\t\t\treturn Scene; // cancel\r\n\t\t\t}\r\n\r\n\t\t\tif (_pin) { // preexisting pin?\r\n\t\t\t\tif (_pin === element) {\r\n\t\t\t\t\t// same pin we already have -> do nothing\r\n\t\t\t\t\treturn Scene; // cancel\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// kill old pin\r\n\t\t\t\t\tScene.removePin();\r\n\t\t\t\t}\r\n\r\n\t\t\t}\r\n\t\t\t_pin = element;\r\n\r\n\t\t\tvar\r\n\t\t\t\tparentDisplay = _pin.parentNode.style.display,\r\n\t\t\t\tboundsParams = [\"top\", \"left\", \"bottom\", \"right\", \"margin\", \"marginLeft\", \"marginRight\", \"marginTop\", \"marginBottom\"];\r\n\r\n\t\t\t_pin.parentNode.style.display = 'none'; // hack start to force css to return stylesheet values instead of calculated px values.\r\n\t\t\tvar\r\n\t\t\t\tinFlow = _util.css(_pin, \"position\") != \"absolute\",\r\n\t\t\t\tpinCSS = _util.css(_pin, boundsParams.concat([\"display\"])),\r\n\t\t\t\tsizeCSS = _util.css(_pin, [\"width\", \"height\"]);\r\n\t\t\t_pin.parentNode.style.display = parentDisplay; // hack end.\r\n\r\n\t\t\tif (!inFlow && settings.pushFollowers) {\r\n\t\t\t\tlog(2, \"WARNING: If the pinned element is positioned absolutely pushFollowers will be disabled.\");\r\n\t\t\t\tsettings.pushFollowers = false;\r\n\t\t\t}\r\n\t\t\twindow.setTimeout(function () { // wait until all finished, because with responsive duration it will only be set after scene is added to controller\r\n\t\t\t\tif (_pin && _options.duration === 0 && pushFollowersActivelySet && settings.pushFollowers) {\r\n\t\t\t\t\tlog(2, \"WARNING: pushFollowers =\", true, \"has no effect, when scene duration is 0.\");\r\n\t\t\t\t}\r\n\t\t\t}, 0);\r\n\r\n\t\t\t// create spacer and insert\r\n\t\t\tvar\r\n\t\t\t\tspacer = _pin.parentNode.insertBefore(document.createElement('div'), _pin),\r\n\t\t\t\tspacerCSS = _util.extend(pinCSS, {\r\n\t\t\t\t\tposition: inFlow ? \"relative\" : \"absolute\",\r\n\t\t\t\t\tboxSizing: \"content-box\",\r\n\t\t\t\t\tmozBoxSizing: \"content-box\",\r\n\t\t\t\t\twebkitBoxSizing: \"content-box\"\r\n\t\t\t\t});\r\n\r\n\t\t\tif (!inFlow) { // copy size if positioned absolutely, to work for bottom/right positioned elements.\r\n\t\t\t\t_util.extend(spacerCSS, _util.css(_pin, [\"width\", \"height\"]));\r\n\t\t\t}\r\n\r\n\t\t\t_util.css(spacer, spacerCSS);\r\n\t\t\tspacer.setAttribute(PIN_SPACER_ATTRIBUTE, \"\");\r\n\t\t\t_util.addClass(spacer, settings.spacerClass);\r\n\r\n\t\t\t// set the pin Options\r\n\t\t\t_pinOptions = {\r\n\t\t\t\tspacer: spacer,\r\n\t\t\t\trelSize: { // save if size is defined using % values. if so, handle spacer resize differently...\r\n\t\t\t\t\twidth: sizeCSS.width.slice(-1) === \"%\",\r\n\t\t\t\t\theight: sizeCSS.height.slice(-1) === \"%\",\r\n\t\t\t\t\tautoFullWidth: sizeCSS.width === \"auto\" && inFlow && _util.isMarginCollapseType(pinCSS.display)\r\n\t\t\t\t},\r\n\t\t\t\tpushFollowers: settings.pushFollowers,\r\n\t\t\t\tinFlow: inFlow, // stores if the element takes up space in the document flow\r\n\t\t\t};\r\n\r\n\t\t\tif (!_pin.___origStyle) {\r\n\t\t\t\t_pin.___origStyle = {};\r\n\t\t\t\tvar\r\n\t\t\t\t\tpinInlineCSS = _pin.style,\r\n\t\t\t\t\tcopyStyles = boundsParams.concat([\"width\", \"height\", \"position\", \"boxSizing\", \"mozBoxSizing\", \"webkitBoxSizing\"]);\r\n\t\t\t\tcopyStyles.forEach(function (val) {\r\n\t\t\t\t\t_pin.___origStyle[val] = pinInlineCSS[val] || \"\";\r\n\t\t\t\t});\r\n\t\t\t}\r\n\r\n\t\t\t// if relative size, transfer it to spacer and make pin calculate it...\r\n\t\t\tif (_pinOptions.relSize.width) {\r\n\t\t\t\t_util.css(spacer, {\r\n\t\t\t\t\twidth: sizeCSS.width\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t\tif (_pinOptions.relSize.height) {\r\n\t\t\t\t_util.css(spacer, {\r\n\t\t\t\t\theight: sizeCSS.height\r\n\t\t\t\t});\r\n\t\t\t}\r\n\r\n\t\t\t// now place the pin element inside the spacer\t\r\n\t\t\tspacer.appendChild(_pin);\r\n\t\t\t// and set new css\r\n\t\t\t_util.css(_pin, {\r\n\t\t\t\tposition: inFlow ? \"relative\" : \"absolute\",\r\n\t\t\t\tmargin: \"auto\",\r\n\t\t\t\ttop: \"auto\",\r\n\t\t\t\tleft: \"auto\",\r\n\t\t\t\tbottom: \"auto\",\r\n\t\t\t\tright: \"auto\"\r\n\t\t\t});\r\n\r\n\t\t\tif (_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) {\r\n\t\t\t\t_util.css(_pin, {\r\n\t\t\t\t\tboxSizing: \"border-box\",\r\n\t\t\t\t\tmozBoxSizing: \"border-box\",\r\n\t\t\t\t\twebkitBoxSizing: \"border-box\"\r\n\t\t\t\t});\r\n\t\t\t}\r\n\r\n\t\t\t// add listener to document to update pin position in case controller is not the document.\r\n\t\t\twindow.addEventListener('scroll', updatePinInContainer);\r\n\t\t\twindow.addEventListener('resize', updatePinInContainer);\r\n\t\t\twindow.addEventListener('resize', updateRelativePinSpacer);\r\n\t\t\t// add mousewheel listener to catch scrolls over fixed elements\r\n\t\t\t_pin.addEventListener(\"mousewheel\", onMousewheelOverPin);\r\n\t\t\t_pin.addEventListener(\"DOMMouseScroll\", onMousewheelOverPin);\r\n\r\n\t\t\tlog(3, \"added pin\");\r\n\r\n\t\t\t// finally update the pin to init\r\n\t\t\tupdatePinState();\r\n\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Remove the pin from the scene.\r\n\t\t * @method ScrollMagic.Scene#removePin\r\n\t\t * @example\r\n\t\t * // remove the pin from the scene without resetting it (the spacer is not removed)\r\n\t\t * scene.removePin();\r\n\t\t *\r\n\t\t * // remove the pin from the scene and reset the pin element to its initial position (spacer is removed)\r\n\t\t * scene.removePin(true);\r\n\t\t *\r\n\t\t * @param {boolean} [reset=false] - If `false` the spacer will not be removed and the element's position will not be reset.\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.removePin = function (reset) {\r\n\t\t\tif (_pin) {\r\n\t\t\t\tif (_state === SCENE_STATE_DURING) {\r\n\t\t\t\t\tupdatePinState(true); // force unpin at position\r\n\t\t\t\t}\r\n\t\t\t\tif (reset || !_controller) { // if there's no controller no progress was made anyway...\r\n\t\t\t\t\tvar pinTarget = _pinOptions.spacer.firstChild; // usually the pin element, but may be another spacer (cascaded pins)...\r\n\t\t\t\t\tif (pinTarget.hasAttribute(PIN_SPACER_ATTRIBUTE)) { // copy margins to child spacer\r\n\t\t\t\t\t\tvar\r\n\t\t\t\t\t\t\tstyle = _pinOptions.spacer.style,\r\n\t\t\t\t\t\t\tvalues = [\"margin\", \"marginLeft\", \"marginRight\", \"marginTop\", \"marginBottom\"],\r\n\t\t\t\t\t\t\tmargins = {};\r\n\t\t\t\t\t\tvalues.forEach(function (val) {\r\n\t\t\t\t\t\t\tmargins[val] = style[val] || \"\";\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t_util.css(pinTarget, margins);\r\n\t\t\t\t\t}\r\n\t\t\t\t\t_pinOptions.spacer.parentNode.insertBefore(pinTarget, _pinOptions.spacer);\r\n\t\t\t\t\t_pinOptions.spacer.parentNode.removeChild(_pinOptions.spacer);\r\n\t\t\t\t\tif (!_pin.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) { // if it's the last pin for this element -> restore inline styles\r\n\t\t\t\t\t\t// TODO: only correctly set for first pin (when cascading) - how to fix?\r\n\t\t\t\t\t\t_util.css(_pin, _pin.___origStyle);\r\n\t\t\t\t\t\tdelete _pin.___origStyle;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\twindow.removeEventListener('scroll', updatePinInContainer);\r\n\t\t\t\twindow.removeEventListener('resize', updatePinInContainer);\r\n\t\t\t\twindow.removeEventListener('resize', updateRelativePinSpacer);\r\n\t\t\t\t_pin.removeEventListener(\"mousewheel\", onMousewheelOverPin);\r\n\t\t\t\t_pin.removeEventListener(\"DOMMouseScroll\", onMousewheelOverPin);\r\n\t\t\t\t_pin = undefined;\r\n\t\t\t\tlog(3, \"removed pin (reset: \" + (reset ? \"true\" : \"false\") + \")\");\r\n\t\t\t}\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\r\n\t\tvar\r\n\t\t\t_cssClasses,\r\n\t\t\t_cssClassElems = [];\r\n\r\n\t\tScene\r\n\t\t\t.on(\"destroy.internal\", function (e) {\r\n\t\t\t\tScene.removeClassToggle(e.reset);\r\n\t\t\t});\r\n\t\t/**\r\n\t\t * Define a css class modification while the scene is active. \r\n\t\t * When the scene triggers the classes will be added to the supplied element and removed, when the scene is over.\r\n\t\t * If the scene duration is 0 the classes will only be removed if the user scrolls back past the start position.\r\n\t\t * @method ScrollMagic.Scene#setClassToggle\r\n\t\t * @example\r\n\t\t * // add the class 'myclass' to the element with the id 'my-elem' for the duration of the scene\r\n\t\t * scene.setClassToggle(\"#my-elem\", \"myclass\");\r\n\t\t *\r\n\t\t * // add multiple classes to multiple elements defined by the selector '.classChange'\r\n\t\t * scene.setClassToggle(\".classChange\", \"class1 class2 class3\");\r\n\t\t *\r\n\t\t * @param {(string|object)} element - A Selector targeting one or more elements or a DOM object that is supposed to be modified.\r\n\t\t * @param {string} classes - One or more Classnames (separated by space) that should be added to the element during the scene.\r\n\t\t *\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.setClassToggle = function (element, classes) {\r\n\t\t\tvar elems = _util.get.elements(element);\r\n\t\t\tif (elems.length === 0 || !_util.type.String(classes)) {\r\n\t\t\t\tlog(1, \"ERROR calling method 'setClassToggle()': Invalid \" + (elems.length === 0 ? \"element\" : \"classes\") + \" supplied.\");\r\n\t\t\t\treturn Scene;\r\n\t\t\t}\r\n\t\t\tif (_cssClassElems.length > 0) {\r\n\t\t\t\t// remove old ones\r\n\t\t\t\tScene.removeClassToggle();\r\n\t\t\t}\r\n\t\t\t_cssClasses = classes;\r\n\t\t\t_cssClassElems = elems;\r\n\t\t\tScene.on(\"enter.internal_class leave.internal_class\", function (e) {\r\n\t\t\t\tvar toggle = e.type === \"enter\" ? _util.addClass : _util.removeClass;\r\n\t\t\t\t_cssClassElems.forEach(function (elem, key) {\r\n\t\t\t\t\ttoggle(elem, _cssClasses);\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * Remove the class binding from the scene.\r\n\t\t * @method ScrollMagic.Scene#removeClassToggle\r\n\t\t * @example\r\n\t\t * // remove class binding from the scene without reset\r\n\t\t * scene.removeClassToggle();\r\n\t\t *\r\n\t\t * // remove class binding and remove the changes it caused\r\n\t\t * scene.removeClassToggle(true);\r\n\t\t *\r\n\t\t * @param {boolean} [reset=false] - If `false` and the classes are currently active, they will remain on the element. If `true` they will be removed.\r\n\t\t * @returns {Scene} Parent object for chaining.\r\n\t\t */\r\n\t\tthis.removeClassToggle = function (reset) {\r\n\t\t\tif (reset) {\r\n\t\t\t\t_cssClassElems.forEach(function (elem, key) {\r\n\t\t\t\t\t_util.removeClass(elem, _cssClasses);\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t\tScene.off(\"start.internal_class end.internal_class\");\r\n\t\t\t_cssClasses = undefined;\r\n\t\t\t_cssClassElems = [];\r\n\t\t\treturn Scene;\r\n\t\t};\r\n\r\n\t\t// INIT\r\n\t\tconstruct();\r\n\t\treturn Scene;\r\n\t};\r\n\r\n\t// store pagewide scene options\r\n\tvar SCENE_OPTIONS = {\r\n\t\tdefaults: {\r\n\t\t\tduration: 0,\r\n\t\t\toffset: 0,\r\n\t\t\ttriggerElement: undefined,\r\n\t\t\ttriggerHook: 0.5,\r\n\t\t\treverse: true,\r\n\t\t\tloglevel: 2\r\n\t\t},\r\n\t\tvalidate: {\r\n\t\t\toffset: function (val) {\r\n\t\t\t\tval = parseFloat(val);\r\n\t\t\t\tif (!_util.type.Number(val)) {\r\n\t\t\t\t\tthrow [\"Invalid value for option \\\"offset\\\":\", val];\r\n\t\t\t\t}\r\n\t\t\t\treturn val;\r\n\t\t\t},\r\n\t\t\ttriggerElement: function (val) {\r\n\t\t\t\tval = val || undefined;\r\n\t\t\t\tif (val) {\r\n\t\t\t\t\tvar elem = _util.get.elements(val)[0];\r\n\t\t\t\t\tif (elem && elem.parentNode) {\r\n\t\t\t\t\t\tval = elem;\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tthrow [\"Element defined in option \\\"triggerElement\\\" was not found:\", val];\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\treturn val;\r\n\t\t\t},\r\n\t\t\ttriggerHook: function (val) {\r\n\t\t\t\tvar translate = {\r\n\t\t\t\t\t\"onCenter\": 0.5,\r\n\t\t\t\t\t\"onEnter\": 1,\r\n\t\t\t\t\t\"onLeave\": 0\r\n\t\t\t\t};\r\n\t\t\t\tif (_util.type.Number(val)) {\r\n\t\t\t\t\tval = Math.max(0, Math.min(parseFloat(val), 1)); // make sure its betweeen 0 and 1\r\n\t\t\t\t} else if (val in translate) {\r\n\t\t\t\t\tval = translate[val];\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthrow [\"Invalid value for option \\\"triggerHook\\\": \", val];\r\n\t\t\t\t}\r\n\t\t\t\treturn val;\r\n\t\t\t},\r\n\t\t\treverse: function (val) {\r\n\t\t\t\treturn !!val; // force boolean\r\n\t\t\t},\r\n\t\t\tloglevel: function (val) {\r\n\t\t\t\tval = parseInt(val);\r\n\t\t\t\tif (!_util.type.Number(val) || val < 0 || val > 3) {\r\n\t\t\t\t\tthrow [\"Invalid value for option \\\"loglevel\\\":\", val];\r\n\t\t\t\t}\r\n\t\t\t\treturn val;\r\n\t\t\t}\r\n\t\t}, // holder for validation methods. duration validation is handled in 'getters-setters.js'\r\n\t\tshifts: [\"duration\", \"offset\", \"triggerHook\"], // list of options that trigger a `shift` event\r\n\t};\r\n\t/*\r\n\t * method used to add an option to ScrollMagic Scenes.\r\n\t * TODO: DOC (private for dev)\r\n\t */\r\n\tScrollMagic.Scene.addOption = function (name, defaultValue, validationCallback, shifts) {\r\n\t\tif (!(name in SCENE_OPTIONS.defaults)) {\r\n\t\t\tSCENE_OPTIONS.defaults[name] = defaultValue;\r\n\t\t\tSCENE_OPTIONS.validate[name] = validationCallback;\r\n\t\t\tif (shifts) {\r\n\t\t\t\tSCENE_OPTIONS.shifts.push(name);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tScrollMagic._util.log(1, \"[static] ScrollMagic.Scene -> Cannot add Scene option '\" + name + \"', because it already exists.\");\r\n\t\t}\r\n\t};\r\n\t// instance extension function for plugins\r\n\t// TODO: DOC (private for dev)\r\n\tScrollMagic.Scene.extend = function (extension) {\r\n\t\tvar oldClass = this;\r\n\t\tScrollMagic.Scene = function () {\r\n\t\t\toldClass.apply(this, arguments);\r\n\t\t\tthis.$super = _util.extend({}, this); // copy parent state\r\n\t\t\treturn extension.apply(this, arguments) || this;\r\n\t\t};\r\n\t\t_util.extend(ScrollMagic.Scene, oldClass); // copy properties\r\n\t\tScrollMagic.Scene.prototype = oldClass.prototype; // copy prototype\r\n\t\tScrollMagic.Scene.prototype.constructor = ScrollMagic.Scene; // restore constructor\r\n\t};\r\n\r\n\r\n\r\n\t/**\r\n\t * TODO: DOCS (private for dev)\r\n\t * @class\r\n\t * @private\r\n\t */\r\n\r\n\tScrollMagic.Event = function (type, namespace, target, vars) {\r\n\t\tvars = vars || {};\r\n\t\tfor (var key in vars) {\r\n\t\t\tthis[key] = vars[key];\r\n\t\t}\r\n\t\tthis.type = type;\r\n\t\tthis.target = this.currentTarget = target;\r\n\t\tthis.namespace = namespace || '';\r\n\t\tthis.timeStamp = this.timestamp = Date.now();\r\n\t\treturn this;\r\n\t};\r\n\r\n\t/*\r\n\t * TODO: DOCS (private for dev)\r\n\t */\r\n\r\n\tvar _util = ScrollMagic._util = (function (window) {\r\n\t\tvar U = {},\r\n\t\t\ti;\r\n\r\n\t\t/**\r\n\t\t * ------------------------------\r\n\t\t * internal helpers\r\n\t\t * ------------------------------\r\n\t\t */\r\n\r\n\t\t// parse float and fall back to 0.\r\n\t\tvar floatval = function (number) {\r\n\t\t\treturn parseFloat(number) || 0;\r\n\t\t};\r\n\t\t// get current style IE safe (otherwise IE would return calculated values for 'auto')\r\n\t\tvar _getComputedStyle = function (elem) {\r\n\t\t\treturn elem.currentStyle ? elem.currentStyle : window.getComputedStyle(elem);\r\n\t\t};\r\n\r\n\t\t// get element dimension (width or height)\r\n\t\tvar _dimension = function (which, elem, outer, includeMargin) {\r\n\t\t\telem = (elem === document) ? window : elem;\r\n\t\t\tif (elem === window) {\r\n\t\t\t\tincludeMargin = false;\r\n\t\t\t} else if (!_type.DomElement(elem)) {\r\n\t\t\t\treturn 0;\r\n\t\t\t}\r\n\t\t\twhich = which.charAt(0).toUpperCase() + which.substr(1).toLowerCase();\r\n\t\t\tvar dimension = (outer ? elem['offset' + which] || elem['outer' + which] : elem['client' + which] || elem['inner' + which]) || 0;\r\n\t\t\tif (outer && includeMargin) {\r\n\t\t\t\tvar style = _getComputedStyle(elem);\r\n\t\t\t\tdimension += which === 'Height' ? floatval(style.marginTop) + floatval(style.marginBottom) : floatval(style.marginLeft) + floatval(style.marginRight);\r\n\t\t\t}\r\n\t\t\treturn dimension;\r\n\t\t};\r\n\t\t// converts 'margin-top' into 'marginTop'\r\n\t\tvar _camelCase = function (str) {\r\n\t\t\treturn str.replace(/^[^a-z]+([a-z])/g, '$1').replace(/-([a-z])/g, function (g) {\r\n\t\t\t\treturn g[1].toUpperCase();\r\n\t\t\t});\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * ------------------------------\r\n\t\t * external helpers\r\n\t\t * ------------------------------\r\n\t\t */\r\n\r\n\t\t// extend obj – same as jQuery.extend({}, objA, objB)\r\n\t\tU.extend = function (obj) {\r\n\t\t\tobj = obj || {};\r\n\t\t\tfor (i = 1; i < arguments.length; i++) {\r\n\t\t\t\tif (!arguments[i]) {\r\n\t\t\t\t\tcontinue;\r\n\t\t\t\t}\r\n\t\t\t\tfor (var key in arguments[i]) {\r\n\t\t\t\t\tif (arguments[i].hasOwnProperty(key)) {\r\n\t\t\t\t\t\tobj[key] = arguments[i][key];\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn obj;\r\n\t\t};\r\n\r\n\t\t// check if a css display type results in margin-collapse or not\r\n\t\tU.isMarginCollapseType = function (str) {\r\n\t\t\treturn [\"block\", \"flex\", \"list-item\", \"table\", \"-webkit-box\"].indexOf(str) > -1;\r\n\t\t};\r\n\r\n\t\t// implementation of requestAnimationFrame\r\n\t\t// based on https://gist.github.com/paulirish/1579671\r\n\t\tvar\r\n\t\t\tlastTime = 0,\r\n\t\t\tvendors = ['ms', 'moz', 'webkit', 'o'];\r\n\t\tvar _requestAnimationFrame = window.requestAnimationFrame;\r\n\t\tvar _cancelAnimationFrame = window.cancelAnimationFrame;\r\n\t\t// try vendor prefixes if the above doesn't work\r\n\t\tfor (i = 0; !_requestAnimationFrame && i < vendors.length; ++i) {\r\n\t\t\t_requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];\r\n\t\t\t_cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'] || window[vendors[i] + 'CancelRequestAnimationFrame'];\r\n\t\t}\r\n\r\n\t\t// fallbacks\r\n\t\tif (!_requestAnimationFrame) {\r\n\t\t\t_requestAnimationFrame = function (callback) {\r\n\t\t\t\tvar\r\n\t\t\t\t\tcurrTime = new Date().getTime(),\r\n\t\t\t\t\ttimeToCall = Math.max(0, 16 - (currTime - lastTime)),\r\n\t\t\t\t\tid = window.setTimeout(function () {\r\n\t\t\t\t\t\tcallback(currTime + timeToCall);\r\n\t\t\t\t\t}, timeToCall);\r\n\t\t\t\tlastTime = currTime + timeToCall;\r\n\t\t\t\treturn id;\r\n\t\t\t};\r\n\t\t}\r\n\t\tif (!_cancelAnimationFrame) {\r\n\t\t\t_cancelAnimationFrame = function (id) {\r\n\t\t\t\twindow.clearTimeout(id);\r\n\t\t\t};\r\n\t\t}\r\n\t\tU.rAF = _requestAnimationFrame.bind(window);\r\n\t\tU.cAF = _cancelAnimationFrame.bind(window);\r\n\r\n\t\tvar\r\n\t\t\tloglevels = [\"error\", \"warn\", \"log\"],\r\n\t\t\tconsole = window.console || {};\r\n\r\n\t\tconsole.log = console.log || function () {}; // no console log, well - do nothing then...\r\n\t\t// make sure methods for all levels exist.\r\n\t\tfor (i = 0; i < loglevels.length; i++) {\r\n\t\t\tvar method = loglevels[i];\r\n\t\t\tif (!console[method]) {\r\n\t\t\t\tconsole[method] = console.log; // prefer .log over nothing\r\n\t\t\t}\r\n\t\t}\r\n\t\tU.log = function (loglevel) {\r\n\t\t\tif (loglevel > loglevels.length || loglevel <= 0) loglevel = loglevels.length;\r\n\t\t\tvar now = new Date(),\r\n\t\t\t\ttime = (\"0\" + now.getHours()).slice(-2) + \":\" + (\"0\" + now.getMinutes()).slice(-2) + \":\" + (\"0\" + now.getSeconds()).slice(-2) + \":\" + (\"00\" + now.getMilliseconds()).slice(-3),\r\n\t\t\t\tmethod = loglevels[loglevel - 1],\r\n\t\t\t\targs = Array.prototype.splice.call(arguments, 1),\r\n\t\t\t\tfunc = Function.prototype.bind.call(console[method], console);\r\n\t\t\targs.unshift(time);\r\n\t\t\tfunc.apply(console, args);\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * ------------------------------\r\n\t\t * type testing\r\n\t\t * ------------------------------\r\n\t\t */\r\n\r\n\t\tvar _type = U.type = function (v) {\r\n\t\t\treturn Object.prototype.toString.call(v).replace(/^\\[object (.+)\\]$/, \"$1\").toLowerCase();\r\n\t\t};\r\n\t\t_type.String = function (v) {\r\n\t\t\treturn _type(v) === 'string';\r\n\t\t};\r\n\t\t_type.Function = function (v) {\r\n\t\t\treturn _type(v) === 'function';\r\n\t\t};\r\n\t\t_type.Array = function (v) {\r\n\t\t\treturn Array.isArray(v);\r\n\t\t};\r\n\t\t_type.Number = function (v) {\r\n\t\t\treturn !_type.Array(v) && (v - parseFloat(v) + 1) >= 0;\r\n\t\t};\r\n\t\t_type.DomElement = function (o) {\r\n\t\t\treturn (\r\n\t\t\t\ttypeof HTMLElement === \"object\" || typeof HTMLElement === \"function\" ? o instanceof HTMLElement || o instanceof SVGElement : //DOM2\r\n\t\t\t\to && typeof o === \"object\" && o !== null && o.nodeType === 1 && typeof o.nodeName === \"string\"\r\n\t\t\t);\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * ------------------------------\r\n\t\t * DOM Element info\r\n\t\t * ------------------------------\r\n\t\t */\r\n\t\t// always returns a list of matching DOM elements, from a selector, a DOM element or an list of elements or even an array of selectors\r\n\t\tvar _get = U.get = {};\r\n\t\t_get.elements = function (selector) {\r\n\t\t\tvar arr = [];\r\n\t\t\tif (_type.String(selector)) {\r\n\t\t\t\ttry {\r\n\t\t\t\t\tselector = document.querySelectorAll(selector);\r\n\t\t\t\t} catch (e) { // invalid selector\r\n\t\t\t\t\treturn arr;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tif (_type(selector) === 'nodelist' || _type.Array(selector) || selector instanceof NodeList) {\r\n\t\t\t\tfor (var i = 0, ref = arr.length = selector.length; i < ref; i++) { // list of elements\r\n\t\t\t\t\tvar elem = selector[i];\r\n\t\t\t\t\tarr[i] = _type.DomElement(elem) ? elem : _get.elements(elem); // if not an element, try to resolve recursively\r\n\t\t\t\t}\r\n\t\t\t} else if (_type.DomElement(selector) || selector === document || selector === window) {\r\n\t\t\t\tarr = [selector]; // only the element\r\n\t\t\t}\r\n\t\t\treturn arr;\r\n\t\t};\r\n\t\t// get scroll top value\r\n\t\t_get.scrollTop = function (elem) {\r\n\t\t\treturn (elem && typeof elem.scrollTop === 'number') ? elem.scrollTop : window.pageYOffset || 0;\r\n\t\t};\r\n\t\t// get scroll left value\r\n\t\t_get.scrollLeft = function (elem) {\r\n\t\t\treturn (elem && typeof elem.scrollLeft === 'number') ? elem.scrollLeft : window.pageXOffset || 0;\r\n\t\t};\r\n\t\t// get element height\r\n\t\t_get.width = function (elem, outer, includeMargin) {\r\n\t\t\treturn _dimension('width', elem, outer, includeMargin);\r\n\t\t};\r\n\t\t// get element width\r\n\t\t_get.height = function (elem, outer, includeMargin) {\r\n\t\t\treturn _dimension('height', elem, outer, includeMargin);\r\n\t\t};\r\n\r\n\t\t// get element position (optionally relative to viewport)\r\n\t\t_get.offset = function (elem, relativeToViewport) {\r\n\t\t\tvar offset = {\r\n\t\t\t\ttop: 0,\r\n\t\t\t\tleft: 0\r\n\t\t\t};\r\n\t\t\tif (elem && elem.getBoundingClientRect) { // check if available\r\n\t\t\t\tvar rect = elem.getBoundingClientRect();\r\n\t\t\t\toffset.top = rect.top;\r\n\t\t\t\toffset.left = rect.left;\r\n\t\t\t\tif (!relativeToViewport) { // clientRect is by default relative to viewport...\r\n\t\t\t\t\toffset.top += _get.scrollTop();\r\n\t\t\t\t\toffset.left += _get.scrollLeft();\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn offset;\r\n\t\t};\r\n\r\n\t\t/**\r\n\t\t * ------------------------------\r\n\t\t * DOM Element manipulation\r\n\t\t * ------------------------------\r\n\t\t */\r\n\r\n\t\tU.addClass = function (elem, classname) {\r\n\t\t\tif (classname) {\r\n\t\t\t\tif (elem.classList)\r\n\t\t\t\t\telem.classList.add(classname);\r\n\t\t\t\telse\r\n\t\t\t\t\telem.className += ' ' + classname;\r\n\t\t\t}\r\n\t\t};\r\n\t\tU.removeClass = function (elem, classname) {\r\n\t\t\tif (classname) {\r\n\t\t\t\tif (elem.classList)\r\n\t\t\t\t\telem.classList.remove(classname);\r\n\t\t\t\telse\r\n\t\t\t\t\telem.className = elem.className.replace(new RegExp('(^|\\\\b)' + classname.split(' ').join('|') + '(\\\\b|$)', 'gi'), ' ');\r\n\t\t\t}\r\n\t\t};\r\n\t\t// if options is string -> returns css value\r\n\t\t// if options is array -> returns object with css value pairs\r\n\t\t// if options is object -> set new css values\r\n\t\tU.css = function (elem, options) {\r\n\t\t\tif (_type.String(options)) {\r\n\t\t\t\treturn _getComputedStyle(elem)[_camelCase(options)];\r\n\t\t\t} else if (_type.Array(options)) {\r\n\t\t\t\tvar\r\n\t\t\t\t\tobj = {},\r\n\t\t\t\t\tstyle = _getComputedStyle(elem);\r\n\t\t\t\toptions.forEach(function (option, key) {\r\n\t\t\t\t\tobj[option] = style[_camelCase(option)];\r\n\t\t\t\t});\r\n\t\t\t\treturn obj;\r\n\t\t\t} else {\r\n\t\t\t\tfor (var option in options) {\r\n\t\t\t\t\tvar val = options[option];\r\n\t\t\t\t\tif (val == parseFloat(val)) { // assume pixel for seemingly numerical values\r\n\t\t\t\t\t\tval += 'px';\r\n\t\t\t\t\t}\r\n\t\t\t\t\telem.style[_camelCase(option)] = val;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\treturn U;\r\n\t}(window || {}));\r\n\r\n\r\n\tScrollMagic.Scene.prototype.addIndicators = function () {\r\n\t\tScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin \\'debug.addIndicators\\'. Please make sure to include plugins/debug.addIndicators.js');\r\n\t\treturn this;\r\n\t}\r\n\tScrollMagic.Scene.prototype.removeIndicators = function () {\r\n\t\tScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling removeIndicators() due to missing Plugin \\'debug.addIndicators\\'. Please make sure to include plugins/debug.addIndicators.js');\r\n\t\treturn this;\r\n\t}\r\n\tScrollMagic.Scene.prototype.setTween = function () {\r\n\t\tScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin \\'animation.gsap\\'. Please make sure to include plugins/animation.gsap.js');\r\n\t\treturn this;\r\n\t}\r\n\tScrollMagic.Scene.prototype.removeTween = function () {\r\n\t\tScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling removeTween() due to missing Plugin \\'animation.gsap\\'. Please make sure to include plugins/animation.gsap.js');\r\n\t\treturn this;\r\n\t}\r\n\tScrollMagic.Scene.prototype.setVelocity = function () {\r\n\t\tScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling setVelocity() due to missing Plugin \\'animation.velocity\\'. Please make sure to include plugins/animation.velocity.js');\r\n\t\treturn this;\r\n\t}\r\n\tScrollMagic.Scene.prototype.removeVelocity = function () {\r\n\t\tScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling removeVelocity() due to missing Plugin \\'animation.velocity\\'. Please make sure to include plugins/animation.velocity.js');\r\n\t\treturn this;\r\n\t}\r\n\r\n\treturn ScrollMagic;\r\n}));","'use strict'\n\nexports.byteLength = byteLength\nexports.toByteArray = toByteArray\nexports.fromByteArray = fromByteArray\n\nvar lookup = []\nvar revLookup = []\nvar Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array\n\nvar code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'\nfor (var i = 0, len = code.length; i < len; ++i) {\n lookup[i] = code[i]\n revLookup[code.charCodeAt(i)] = i\n}\n\n// Support decoding URL-safe base64 strings, as Node.js does.\n// See: https://en.wikipedia.org/wiki/Base64#URL_applications\nrevLookup['-'.charCodeAt(0)] = 62\nrevLookup['_'.charCodeAt(0)] = 63\n\nfunction getLens (b64) {\n var len = b64.length\n\n if (len % 4 > 0) {\n throw new Error('Invalid string. Length must be a multiple of 4')\n }\n\n // Trim off extra bytes after placeholder bytes are found\n // See: https://github.com/beatgammit/base64-js/issues/42\n var validLen = b64.indexOf('=')\n if (validLen === -1) validLen = len\n\n var placeHoldersLen = validLen === len\n ? 0\n : 4 - (validLen % 4)\n\n return [validLen, placeHoldersLen]\n}\n\n// base64 is 4/3 + up to two characters of the original data\nfunction byteLength (b64) {\n var lens = getLens(b64)\n var validLen = lens[0]\n var placeHoldersLen = lens[1]\n return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen\n}\n\nfunction _byteLength (b64, validLen, placeHoldersLen) {\n return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen\n}\n\nfunction toByteArray (b64) {\n var tmp\n var lens = getLens(b64)\n var validLen = lens[0]\n var placeHoldersLen = lens[1]\n\n var arr = new Arr(_byteLength(b64, validLen, placeHoldersLen))\n\n var curByte = 0\n\n // if there are placeholders, only get up to the last complete 4 chars\n var len = placeHoldersLen > 0\n ? validLen - 4\n : validLen\n\n var i\n for (i = 0; i < len; i += 4) {\n tmp =\n (revLookup[b64.charCodeAt(i)] << 18) |\n (revLookup[b64.charCodeAt(i + 1)] << 12) |\n (revLookup[b64.charCodeAt(i + 2)] << 6) |\n revLookup[b64.charCodeAt(i + 3)]\n arr[curByte++] = (tmp >> 16) & 0xFF\n arr[curByte++] = (tmp >> 8) & 0xFF\n arr[curByte++] = tmp & 0xFF\n }\n\n if (placeHoldersLen === 2) {\n tmp =\n (revLookup[b64.charCodeAt(i)] << 2) |\n (revLookup[b64.charCodeAt(i + 1)] >> 4)\n arr[curByte++] = tmp & 0xFF\n }\n\n if (placeHoldersLen === 1) {\n tmp =\n (revLookup[b64.charCodeAt(i)] << 10) |\n (revLookup[b64.charCodeAt(i + 1)] << 4) |\n (revLookup[b64.charCodeAt(i + 2)] >> 2)\n arr[curByte++] = (tmp >> 8) & 0xFF\n arr[curByte++] = tmp & 0xFF\n }\n\n return arr\n}\n\nfunction tripletToBase64 (num) {\n return lookup[num >> 18 & 0x3F] +\n lookup[num >> 12 & 0x3F] +\n lookup[num >> 6 & 0x3F] +\n lookup[num & 0x3F]\n}\n\nfunction encodeChunk (uint8, start, end) {\n var tmp\n var output = []\n for (var i = start; i < end; i += 3) {\n tmp =\n ((uint8[i] << 16) & 0xFF0000) +\n ((uint8[i + 1] << 8) & 0xFF00) +\n (uint8[i + 2] & 0xFF)\n output.push(tripletToBase64(tmp))\n }\n return output.join('')\n}\n\nfunction fromByteArray (uint8) {\n var tmp\n var len = uint8.length\n var extraBytes = len % 3 // if we have 1 byte left, pad 2 bytes\n var parts = []\n var maxChunkLength = 16383 // must be multiple of 3\n\n // go through the array every three bytes, we'll deal with trailing stuff later\n for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) {\n parts.push(encodeChunk(uint8, i, (i + maxChunkLength) > len2 ? len2 : (i + maxChunkLength)))\n }\n\n // pad the end with zeros, but make sure to not forget the extra bytes\n if (extraBytes === 1) {\n tmp = uint8[len - 1]\n parts.push(\n lookup[tmp >> 2] +\n lookup[(tmp << 4) & 0x3F] +\n '=='\n )\n } else if (extraBytes === 2) {\n tmp = (uint8[len - 2] << 8) + uint8[len - 1]\n parts.push(\n lookup[tmp >> 10] +\n lookup[(tmp >> 4) & 0x3F] +\n lookup[(tmp << 2) & 0x3F] +\n '='\n )\n }\n\n return parts.join('')\n}\n","/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh */\nexports.read = function (buffer, offset, isLE, mLen, nBytes) {\n var e, m\n var eLen = (nBytes * 8) - mLen - 1\n var eMax = (1 << eLen) - 1\n var eBias = eMax >> 1\n var nBits = -7\n var i = isLE ? (nBytes - 1) : 0\n var d = isLE ? -1 : 1\n var s = buffer[offset + i]\n\n i += d\n\n e = s & ((1 << (-nBits)) - 1)\n s >>= (-nBits)\n nBits += eLen\n for (; nBits > 0; e = (e * 256) + buffer[offset + i], i += d, nBits -= 8) {}\n\n m = e & ((1 << (-nBits)) - 1)\n e >>= (-nBits)\n nBits += mLen\n for (; nBits > 0; m = (m * 256) + buffer[offset + i], i += d, nBits -= 8) {}\n\n if (e === 0) {\n e = 1 - eBias\n } else if (e === eMax) {\n return m ? NaN : ((s ? -1 : 1) * Infinity)\n } else {\n m = m + Math.pow(2, mLen)\n e = e - eBias\n }\n return (s ? -1 : 1) * m * Math.pow(2, e - mLen)\n}\n\nexports.write = function (buffer, value, offset, isLE, mLen, nBytes) {\n var e, m, c\n var eLen = (nBytes * 8) - mLen - 1\n var eMax = (1 << eLen) - 1\n var eBias = eMax >> 1\n var rt = (mLen === 23 ? Math.pow(2, -24) - Math.pow(2, -77) : 0)\n var i = isLE ? 0 : (nBytes - 1)\n var d = isLE ? 1 : -1\n var s = value < 0 || (value === 0 && 1 / value < 0) ? 1 : 0\n\n value = Math.abs(value)\n\n if (isNaN(value) || value === Infinity) {\n m = isNaN(value) ? 1 : 0\n e = eMax\n } else {\n e = Math.floor(Math.log(value) / Math.LN2)\n if (value * (c = Math.pow(2, -e)) < 1) {\n e--\n c *= 2\n }\n if (e + eBias >= 1) {\n value += rt / c\n } else {\n value += rt * Math.pow(2, 1 - eBias)\n }\n if (value * c >= 2) {\n e++\n c /= 2\n }\n\n if (e + eBias >= eMax) {\n m = 0\n e = eMax\n } else if (e + eBias >= 1) {\n m = ((value * c) - 1) * Math.pow(2, mLen)\n e = e + eBias\n } else {\n m = value * Math.pow(2, eBias - 1) * Math.pow(2, mLen)\n e = 0\n }\n }\n\n for (; mLen >= 8; buffer[offset + i] = m & 0xff, i += d, m /= 256, mLen -= 8) {}\n\n e = (e << mLen) | m\n eLen += mLen\n for (; eLen > 0; buffer[offset + i] = e & 0xff, i += d, e /= 256, eLen -= 8) {}\n\n buffer[offset + i - d] |= s * 128\n}\n","var toString = {}.toString;\n\nmodule.exports = Array.isArray || function (arr) {\n return toString.call(arr) == '[object Array]';\n};\n","var root = require('./_root');\n\n/** Built-in value references. */\nvar Symbol = root.Symbol;\n\nmodule.exports = Symbol;\n","var Symbol = require('./_Symbol'),\n getRawTag = require('./_getRawTag'),\n objectToString = require('./_objectToString');\n\n/** `Object#toString` result references. */\nvar nullTag = '[object Null]',\n undefinedTag = '[object Undefined]';\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * The base implementation of `getTag` without fallbacks for buggy environments.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the `toStringTag`.\n */\nfunction baseGetTag(value) {\n if (value == null) {\n return value === undefined ? undefinedTag : nullTag;\n }\n return (symToStringTag && symToStringTag in Object(value))\n ? getRawTag(value)\n : objectToString(value);\n}\n\nmodule.exports = baseGetTag;\n","var trimmedEndIndex = require('./_trimmedEndIndex');\n\n/** Used to match leading whitespace. */\nvar reTrimStart = /^\\s+/;\n\n/**\n * The base implementation of `_.trim`.\n *\n * @private\n * @param {string} string The string to trim.\n * @returns {string} Returns the trimmed string.\n */\nfunction baseTrim(string) {\n return string\n ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')\n : string;\n}\n\nmodule.exports = baseTrim;\n","/** Detect free variable `global` from Node.js. */\nvar freeGlobal = typeof global == 'object' && global && global.Object === Object && global;\n\nmodule.exports = freeGlobal;\n","var Symbol = require('./_Symbol');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the raw `toStringTag`.\n */\nfunction getRawTag(value) {\n var isOwn = hasOwnProperty.call(value, symToStringTag),\n tag = value[symToStringTag];\n\n try {\n value[symToStringTag] = undefined;\n var unmasked = true;\n } catch (e) {}\n\n var result = nativeObjectToString.call(value);\n if (unmasked) {\n if (isOwn) {\n value[symToStringTag] = tag;\n } else {\n delete value[symToStringTag];\n }\n }\n return result;\n}\n\nmodule.exports = getRawTag;\n","/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/**\n * Converts `value` to a string using `Object.prototype.toString`.\n *\n * @private\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n */\nfunction objectToString(value) {\n return nativeObjectToString.call(value);\n}\n\nmodule.exports = objectToString;\n","var freeGlobal = require('./_freeGlobal');\n\n/** Detect free variable `self`. */\nvar freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n/** Used as a reference to the global object. */\nvar root = freeGlobal || freeSelf || Function('return this')();\n\nmodule.exports = root;\n","/** Used to match a single whitespace character. */\nvar reWhitespace = /\\s/;\n\n/**\n * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace\n * character of `string`.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {number} Returns the index of the last non-whitespace character.\n */\nfunction trimmedEndIndex(string) {\n var index = string.length;\n\n while (index-- && reWhitespace.test(string.charAt(index))) {}\n return index;\n}\n\nmodule.exports = trimmedEndIndex;\n","var isObject = require('./isObject'),\n now = require('./now'),\n toNumber = require('./toNumber');\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeMax = Math.max,\n nativeMin = Math.min;\n\n/**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel\n * delayed `func` invocations and a `flush` method to immediately invoke them.\n * Provide `options` to indicate whether `func` should be invoked on the\n * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n * with the last arguments provided to the debounced function. Subsequent\n * calls to the debounced function return the result of the last `func`\n * invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.debounce` and `_.throttle`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to debounce.\n * @param {number} [wait=0] The number of milliseconds to delay.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=false]\n * Specify invoking on the leading edge of the timeout.\n * @param {number} [options.maxWait]\n * The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new debounced function.\n * @example\n *\n * // Avoid costly calculations while the window size is in flux.\n * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n *\n * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n * jQuery(element).on('click', _.debounce(sendMail, 300, {\n * 'leading': true,\n * 'trailing': false\n * }));\n *\n * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n * var source = new EventSource('/stream');\n * jQuery(source).on('message', debounced);\n *\n * // Cancel the trailing debounced invocation.\n * jQuery(window).on('popstate', debounced.cancel);\n */\nfunction debounce(func, wait, options) {\n var lastArgs,\n lastThis,\n maxWait,\n result,\n timerId,\n lastCallTime,\n lastInvokeTime = 0,\n leading = false,\n maxing = false,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n wait = toNumber(wait) || 0;\n if (isObject(options)) {\n leading = !!options.leading;\n maxing = 'maxWait' in options;\n maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n\n function invokeFunc(time) {\n var args = lastArgs,\n thisArg = lastThis;\n\n lastArgs = lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n\n function leadingEdge(time) {\n // Reset any `maxWait` timer.\n lastInvokeTime = time;\n // Start the timer for the trailing edge.\n timerId = setTimeout(timerExpired, wait);\n // Invoke the leading edge.\n return leading ? invokeFunc(time) : result;\n }\n\n function remainingWait(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime,\n timeWaiting = wait - timeSinceLastCall;\n\n return maxing\n ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)\n : timeWaiting;\n }\n\n function shouldInvoke(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime;\n\n // Either this is the first call, activity has stopped and we're at the\n // trailing edge, the system time has gone backwards and we're treating\n // it as the trailing edge, or we've hit the `maxWait` limit.\n return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||\n (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));\n }\n\n function timerExpired() {\n var time = now();\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n }\n // Restart the timer.\n timerId = setTimeout(timerExpired, remainingWait(time));\n }\n\n function trailingEdge(time) {\n timerId = undefined;\n\n // Only invoke if we have `lastArgs` which means `func` has been\n // debounced at least once.\n if (trailing && lastArgs) {\n return invokeFunc(time);\n }\n lastArgs = lastThis = undefined;\n return result;\n }\n\n function cancel() {\n if (timerId !== undefined) {\n clearTimeout(timerId);\n }\n lastInvokeTime = 0;\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n\n function flush() {\n return timerId === undefined ? result : trailingEdge(now());\n }\n\n function debounced() {\n var time = now(),\n isInvoking = shouldInvoke(time);\n\n lastArgs = arguments;\n lastThis = this;\n lastCallTime = time;\n\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n if (maxing) {\n // Handle invocations in a tight loop.\n clearTimeout(timerId);\n timerId = setTimeout(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n if (timerId === undefined) {\n timerId = setTimeout(timerExpired, wait);\n }\n return result;\n }\n debounced.cancel = cancel;\n debounced.flush = flush;\n return debounced;\n}\n\nmodule.exports = debounce;\n","/**\n * Checks if `value` is the\n * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n * @example\n *\n * _.isObject({});\n * // => true\n *\n * _.isObject([1, 2, 3]);\n * // => true\n *\n * _.isObject(_.noop);\n * // => true\n *\n * _.isObject(null);\n * // => false\n */\nfunction isObject(value) {\n var type = typeof value;\n return value != null && (type == 'object' || type == 'function');\n}\n\nmodule.exports = isObject;\n","/**\n * Checks if `value` is object-like. A value is object-like if it's not `null`\n * and has a `typeof` result of \"object\".\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is object-like, else `false`.\n * @example\n *\n * _.isObjectLike({});\n * // => true\n *\n * _.isObjectLike([1, 2, 3]);\n * // => true\n *\n * _.isObjectLike(_.noop);\n * // => false\n *\n * _.isObjectLike(null);\n * // => false\n */\nfunction isObjectLike(value) {\n return value != null && typeof value == 'object';\n}\n\nmodule.exports = isObjectLike;\n","var baseGetTag = require('./_baseGetTag'),\n isObjectLike = require('./isObjectLike');\n\n/** `Object#toString` result references. */\nvar symbolTag = '[object Symbol]';\n\n/**\n * Checks if `value` is classified as a `Symbol` primitive or object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.\n * @example\n *\n * _.isSymbol(Symbol.iterator);\n * // => true\n *\n * _.isSymbol('abc');\n * // => false\n */\nfunction isSymbol(value) {\n return typeof value == 'symbol' ||\n (isObjectLike(value) && baseGetTag(value) == symbolTag);\n}\n\nmodule.exports = isSymbol;\n","var root = require('./_root');\n\n/**\n * Gets the timestamp of the number of milliseconds that have elapsed since\n * the Unix epoch (1 January 1970 00:00:00 UTC).\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Date\n * @returns {number} Returns the timestamp.\n * @example\n *\n * _.defer(function(stamp) {\n * console.log(_.now() - stamp);\n * }, _.now());\n * // => Logs the number of milliseconds it took for the deferred invocation.\n */\nvar now = function() {\n return root.Date.now();\n};\n\nmodule.exports = now;\n","var debounce = require('./debounce'),\n isObject = require('./isObject');\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/**\n * Creates a throttled function that only invokes `func` at most once per\n * every `wait` milliseconds. The throttled function comes with a `cancel`\n * method to cancel delayed `func` invocations and a `flush` method to\n * immediately invoke them. Provide `options` to indicate whether `func`\n * should be invoked on the leading and/or trailing edge of the `wait`\n * timeout. The `func` is invoked with the last arguments provided to the\n * throttled function. Subsequent calls to the throttled function return the\n * result of the last `func` invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the throttled function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.throttle` and `_.debounce`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to throttle.\n * @param {number} [wait=0] The number of milliseconds to throttle invocations to.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=true]\n * Specify invoking on the leading edge of the timeout.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new throttled function.\n * @example\n *\n * // Avoid excessively updating the position while scrolling.\n * jQuery(window).on('scroll', _.throttle(updatePosition, 100));\n *\n * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.\n * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });\n * jQuery(element).on('click', throttled);\n *\n * // Cancel the trailing throttled invocation.\n * jQuery(window).on('popstate', throttled.cancel);\n */\nfunction throttle(func, wait, options) {\n var leading = true,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n if (isObject(options)) {\n leading = 'leading' in options ? !!options.leading : leading;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n return debounce(func, wait, {\n 'leading': leading,\n 'maxWait': wait,\n 'trailing': trailing\n });\n}\n\nmodule.exports = throttle;\n","var baseTrim = require('./_baseTrim'),\n isObject = require('./isObject'),\n isSymbol = require('./isSymbol');\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n if (typeof value == 'number') {\n return value;\n }\n if (isSymbol(value)) {\n return NAN;\n }\n if (isObject(value)) {\n var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n value = isObject(other) ? (other + '') : other;\n }\n if (typeof value != 'string') {\n return value === 0 ? value : +value;\n }\n value = baseTrim(value);\n var isBinary = reIsBinary.test(value);\n return (isBinary || reIsOctal.test(value))\n ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n","'use strict';\n\nvar cart = require('./cart/cart');\nvar processInclude = require('base/util');\n\nvar baseFiles = {\n cart: function () {\n return cart.init.call(cart);\n }\n};\n\nmodule.exports = {\n baseFiles: baseFiles,\n loadFunctions: function () {\n Object.keys(baseFiles).forEach(function (key) {\n processInclude(baseFiles[key]);\n });\n }\n};\n","'use strict';\nvar focusHelper = require('base/components/focus');\nvar formValidation = require('base/components/formValidation');\nvar base = require('core/product/base');\n\n/**\n * Retrieves the relevant pid value (copied from base so we dont load the entire file 2x for this)\n * @param {jquery} $el - DOM container for a given add to cart button\n * @return {string} - value to be used when adding product to cart\n */\nfunction getPidValue($el) {\n var pid;\n\n if ($('#quickViewModal').hasClass('show') && !$('.product-set').length) {\n pid = $($el).closest('.modal-content').find('.product-quickview').data('pid');\n } else if ($('.product-set-detail').length || $('.product-set').length) {\n pid = $($el).closest('.product-detail').find('.product-id').text();\n } else {\n pid = $('.product-detail:not(\".bundle-item\")').data('pid');\n }\n\n return pid;\n}\n\n/**\n * appends params to a url\n * @param {string} url - Original url\n * @param {Object} params - Parameters to append\n * @returns {string} result url with appended parameters\n */\nfunction appendToUrl(url, params) {\n var newUrl = url;\n newUrl += (newUrl.indexOf('?') !== -1 ? '&' : '?') + Object.keys(params).map(function (key) {\n return key + '=' + encodeURIComponent(params[key]);\n }).join('&');\n\n return newUrl;\n}\n\n/**\n * Checks whether the basket is valid. if invalid displays error message and disables\n * checkout button\n * @param {Object} data - AJAX response from the server\n */\nfunction validateBasket(data) {\n if (data.valid.error) {\n if (data.valid.message) {\n var errorHtml = '
'\n );\n $('.number-of-items').empty().append(data.numItems == 1 ? data.resources.numberOfItem : data.resources.numberOfItems);\n $('.minicart-quantity').empty().append(data.numItems);\n $('.minicart-link').attr({\n 'aria-label': data.resources.minicartCountOfItems,\n title: data.resources.minicartCountOfItems\n });\n $('.minicart .popover').empty();\n $('.minicart .popover').removeClass('show');\n }\n\n $('.checkout-btn').addClass('disabled');\n } else {\n $('.checkout-btn').removeClass('disabled');\n }\n}\n\n/**\n * re-renders the order totals and the number of items in the cart\n * @param {Object} data - AJAX response from the server\n */\nfunction updateCartTotals(data) {\n var $cart = $('.cart');\n $cart.find('.number-of-items').empty().append(data.numItems == 1 ? data.resources.numberOfItem : data.resources.numberOfItems);\n $cart.find('.shipping-cost span').empty().append(data.totals.totalShippingCost);\n $cart.find('.tax-total span').empty().append(data.totals.totalTax);\n $cart.find('.grand-total span, .checkout-continue .checkout-btn-grand-total').empty().append(data.totals.grandTotalLessGiftCertificatePaymentInstrumentsFormatted);\n $cart.find('.checkout-continue .checkout-btn').attr('data-price', data.totals.grandTotalLessGiftCertificatePaymentInstrumentsFormatted);\n $cart.find('.sub-total span').empty().append(data.totals.subTotal);\n $('.minicart-quantity').empty().append(data.numItems);\n $('.minicart-link').attr({\n 'aria-label': data.resources.minicartCountOfItems,\n title: data.resources.minicartCountOfItems\n });\n if (data.totals.orderLevelDiscountTotal.value > 0) {\n $cart.find('.order-discount').removeClass('hide-order-discount');\n $cart.find('.order-discount-total').empty()\n .append('- ' + data.totals.orderLevelDiscountTotal.formatted);\n } else {\n $cart.find('.order-discount').addClass('hide-order-discount');\n }\n\n if (data.totals.shippingLevelDiscountTotal.value > 0) {\n $cart.find('.shipping-discount').removeClass('hide-shipping-discount');\n $cart.find('.shipping-discount-total span').empty().append('- ' +\n data.totals.shippingLevelDiscountTotal.formatted);\n } else {\n $cart.find('.shipping-discount').addClass('hide-shipping-discount');\n }\n\n if (data.payment.giftCertificatePaymentInstruments.length) {\n $cart.find('.giftcertificate-discount').removeClass('d-none');\n $cart.find('.giftcertificate-discount-label').text(data.totals.giftCertificatePaymentInstrumentsLabel);\n $cart.find('.giftcertificate-discount-total').text('- ' + data.totals.giftCertificatePaymentInstrumentsTotalFormatted);\n } else {\n $cart.find('.giftcertificate-discount').addClass('d-none');\n }\n\n if (data.totals.grandTotalLessGiftCertificatePaymentInstrumentsValue) {\n $cart.find('.cartAdditionalPaymentButtons').removeClass('d-none');\n } else {\n $cart.find('.cartAdditionalPaymentButtons').addClass('d-none');\n }\n\n data.items.forEach(function (item) {\n var itemPrice;\n var itemTotalPrice;\n\n if (item.productType === 'giftCertificate') {\n itemPrice = item.priceTotal.price;\n itemTotalPrice = item.priceTotal.price;\n } else {\n itemPrice = item.renderedPrice;\n itemTotalPrice = item.priceTotal.renderedPrice;\n }\n\n if (data.totals.orderLevelDiscountTotal.value > 0) {\n $cart.find('.coupons-and-promos').empty().append(data.totals.discountsHtml);\n }\n if (item.renderedPromotions) {\n $cart.find('.item-' + item.UUID).empty().append(item.renderedPromotions);\n } else {\n $cart.find('.item-' + item.UUID).empty();\n }\n $cart.find('.uuid-' + item.UUID + ' .unit-price').empty().append(itemPrice);\n $cart.find('.line-item-price-' + item.UUID + ' .unit-price').empty().append(itemPrice);\n $cart.find('.item-total-' + item.UUID).empty().append(itemTotalPrice);\n });\n}\n\n/**\n * re-renders the order totals and the number of items in the cart\n * @param {Object} message - Error message to display\n */\nfunction createErrorNotification(message) {\n var errorHtml = '
' +\n '' + message + '
';\n\n $('.cart-error').append(errorHtml);\n}\n\n/**\n * re-renders the approaching discount messages\n * @param {Object} approachingDiscounts - updated approaching discounts for the cart\n */\nfunction updateApproachingDiscounts(approachingDiscounts) {\n var html = '';\n $('.approaching-discounts').empty();\n if (approachingDiscounts.length > 0) {\n approachingDiscounts.forEach(function (item) {\n html += '
'\n + item.discountMsg + '
';\n });\n }\n $('.approaching-discounts').append(html);\n}\n\n/**\n * Updates the availability of a product line item\n * @param {Object} data - AJAX response from the server\n * @param {string} uuid - The uuid of the product line item to update\n */\nfunction updateAvailability(data, uuid) {\n var lineItem;\n var messages = '';\n\n for (var i = 0; i < data.items.length; i++) {\n if (data.items[i].UUID === uuid) {\n lineItem = data.items[i];\n break;\n }\n }\n\n if (lineItem != null) {\n $('.availability-' + lineItem.UUID).empty();\n\n if (lineItem.availability) {\n if (lineItem.availability.messages) {\n lineItem.availability.messages.forEach(function (message) {\n messages += '
' + message + '
';\n });\n }\n\n if (lineItem.availability.inStockDate) {\n messages += '
'\n + lineItem.availability.inStockDate\n + '
';\n }\n }\n\n $('.availability-' + lineItem.UUID).html(messages);\n }\n}\n\n/**\n * Finds an element in the array that matches search parameter\n * @param {array} array - array of items to search\n * @param {function} match - function that takes an element and returns a boolean indicating if the match is made\n * @returns {Object|null} - returns an element of the array that matched the query.\n */\nfunction findItem(array, match) {\n for (var i = 0, l = array.length; i < l; i++) {\n if (match.call(this, array[i])) {\n return array[i];\n }\n }\n return null;\n}\n\n/**\n * Updates details of a product line item\n * @param {Object} data - AJAX response from the server\n * @param {string} uuid - The uuid of the product line item to update\n */\nfunction updateProductDetails(data, uuid) {\n $('.card .product-info.uuid-' + uuid).parent().replaceWith(data.renderedTemplate);\n base.enableQuantitySteppers();\n}\n\n/**\n * Parses the html for a modal window\n * @param {string} html - representing the body and footer of the modal window\n *\n * @return {Object} - Object with properties body and footer.\n */\nfunction parseHtml(html) {\n var $html = $('
').append($.parseHTML(html));\n\n var body = $html.find('.product-quickview');\n var footer = $html.find('.modal-footer').children();\n\n return { body: body, footer: footer };\n}\n\n/**\n * replace content of modal\n * @param {string} actionUrl - url to be used to remove product\n * @param {string} productID - pid\n * @param {string} productName - product name\n * @param {string} uuid - uuid\n */\nfunction confirmDelete(actionUrl, productID, productName, uuid) {\n var $deleteConfirmBtn = $('.cart-delete-confirmation-btn');\n var $productToRemoveSpan = $('.product-to-remove');\n\n $deleteConfirmBtn.data('pid', productID);\n $deleteConfirmBtn.data('action', actionUrl);\n $deleteConfirmBtn.data('uuid', uuid);\n\n $productToRemoveSpan.empty().append(productName);\n}\n\nfunction init () {\n $('body').on('click', '.remove-product', function (e) {\n e.preventDefault();\n\n var actionUrl = $(this).data('action');\n var productID = $(this).data('pid');\n var productName = $(this).data('name');\n var uuid = $(this).data('uuid');\n module.exports.confirmDelete(actionUrl, productID, productName, uuid);\n });\n\n $('body').on('afterRemoveFromCart', function (e, data) {\n e.preventDefault();\n module.exports.confirmDelete(data.actionUrl, data.productID, data.productName, data.uuid);\n });\n\n $('body').on('click', '.cart-delete-confirmation-btn', function (e) {\n e.preventDefault();\n\n var productID = $(this).data('pid');\n var url = $(this).data('action');\n var uuid = $(this).data('uuid');\n var urlParams = {\n pid: productID,\n uuid: uuid\n };\n\n url = module.exports.appendToUrl(url, urlParams);\n\n $('body > .modal-backdrop').remove();\n\n $('body').trigger('cart:beforeUpdate');\n\n $.spinner().start();\n $.ajax({\n url: url,\n type: 'get',\n dataType: 'json',\n success: function (data) {\n if (data.basket.items.length === 0) {\n $('.cart').empty().append('
' +\n '
' +\n '
' + data.basket.resources.emptyCartMsg + '
' +\n '
' +\n '
'\n );\n $('.number-of-items').empty().append(data.basket.resources.numberOfItems);\n $('.number-of-items-container').removeClass('text-md-right');\n $('.minicart-quantity').empty().append(data.basket.numItems);\n $('.minicart-link').attr({\n 'aria-label': data.basket.resources.minicartCountOfItems,\n title: data.basket.resources.minicartCountOfItems\n });\n $('.minicart .popover').empty();\n $('.minicart .popover').removeClass('show');\n $('body').removeClass('modal-open');\n $('html').removeClass('veiled');\n } else {\n if (data.toBeDeletedUUIDs && data.toBeDeletedUUIDs.length > 0) {\n for (var i = 0; i < data.toBeDeletedUUIDs.length; i++) {\n $('.uuid-' + data.toBeDeletedUUIDs[i]).closest('.card').remove();\n }\n }\n $('.uuid-' + uuid).closest('.card').remove();\n if (!data.basket.hasBonusProduct) {\n $('.bonus-product').remove();\n }\n // NOTE: there's an open issue for problems with removing products with bonus items: https://github.com/SalesforceCommerceCloud/storefront-reference-architecture/issues/748\n $('.coupons-and-promos').empty().append(data.basket.totals.discountsHtml);\n module.exports.updateCartTotals(data.basket);\n module.exports.updateApproachingDiscounts(data.basket.approachingDiscounts);\n $('body').trigger('setShippingMethodSelection', data.basket);\n module.exports.validateBasket(data.basket);\n }\n\n $('body').trigger('cart:update', [data, uuid]);\n\n $.spinner().stop();\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $.spinner().stop();\n }\n }\n });\n });\n\n $('body').on('quantityStepper:change', (event, stepper) => {\n var $stepper = $(stepper);\n var isMiniCart = $stepper.closest('.minicart').length > 0;\n var selectId = $stepper.closest('.quantity-form').find('select').attr('id');\n var $select = $('.cart-page select#' + selectId);\n var value = parseInt($stepper.find('input').val());\n\n // if the qty change was triggered from the minicart, manually update cart qty input values\n if (isMiniCart) {\n var $cartStepper = $select.next('.quantity-stepper');\n $cartStepper.find('input').prop('value', value).prop('data-qty', value);\n }\n });\n\n $('body').on('change', '.quantity-form > .quantity', function() {\n var url = $(this).data('action');\n if (!url) {\n return;\n }\n\n var preSelectQty = $(this).data('pre-select-qty');\n var quantity = $(this).val();\n var productID = $(this).data('pid');\n var uuid = $(this).data('uuid');\n var urlParams = {\n pid: productID,\n quantity: quantity,\n uuid: uuid\n };\n url = module.exports.appendToUrl(url, urlParams);\n\n $(this).parents('.card').spinner().start();\n\n $('body').trigger('cart:beforeUpdate');\n\n $.ajax({\n url: url,\n type: 'get',\n context: this,\n dataType: 'json',\n success: function (data) {\n $('.quantity[data-uuid=\"' + uuid + '\"]').val(quantity);\n $('.coupons-and-promos').empty().append(data.totals.discountsHtml);\n module.exports.updateCartTotals(data);\n module.exports.updateApproachingDiscounts(data.approachingDiscounts);\n module.exports.updateAvailability(data, uuid);\n module.exports.validateBasket(data);\n $(this).data('pre-select-qty', quantity);\n\n $('body').trigger('cart:update', [data, uuid]);\n\n $.spinner().stop();\n if ($(this).parents('.product-info').hasClass('bonus-product-line-item') && $('.cart-page').length) {\n location.reload();\n }\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $(this).val(parseInt(preSelectQty, 10));\n $.spinner().stop();\n }\n }\n });\n });\n\n $('.shippingMethods').change(function () {\n var url = $(this).attr('data-actionUrl');\n var urlParams = {\n methodID: $(this).find(':selected').attr('data-shipping-id')\n };\n // url = module.exports.appendToUrl(url, urlParams);\n\n $('.totals').spinner().start();\n $('body').trigger('cart:beforeShippingMethodSelected');\n $.ajax({\n url: url,\n type: 'post',\n dataType: 'json',\n data: urlParams,\n success: function (data) {\n if (data.error) {\n window.location.href = data.redirectUrl;\n } else {\n $('.coupons-and-promos').empty().append(data.totals.discountsHtml);\n module.exports.updateCartTotals(data);\n module.exports.updateApproachingDiscounts(data.approachingDiscounts);\n module.exports.validateBasket(data);\n }\n $('body').trigger('cart:shippingMethodSelected', data);\n $.spinner().stop();\n },\n error: function (err) {\n if (err.redirectUrl) {\n window.location.href = err.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $.spinner().stop();\n }\n }\n });\n });\n\n $('.promo-code-form').submit(function (e) {\n e.preventDefault();\n\n var currentItemCount = parseInt($('.minicart-quantity').text(), 10) || 0;\n\n $.spinner().start();\n $('.coupon-missing-error').hide();\n $('.coupon-error-message').empty();\n if (!$('.coupon-code-field').val()) {\n $('.promo-code-form .form-control').addClass('is-invalid');\n $('.promo-code-form .form-control').attr('aria-describedby', 'missingCouponCode');\n $('.coupon-missing-error').show();\n $.spinner().stop();\n return false;\n }\n var $form = $('.promo-code-form');\n $('.promo-code-form .form-control').removeClass('is-invalid');\n $('.coupon-error-message').empty();\n $('body').trigger('promotion:beforeUpdate');\n\n $.ajax({\n url: $form.attr('action'),\n type: 'GET',\n dataType: 'json',\n data: $form.serialize(),\n success: function (data) {\n if (data.error) {\n $('.promo-code-form .form-control').addClass('is-invalid');\n $('.promo-code-form .form-control').attr('aria-describedby', 'invalidCouponCode');\n $('.coupon-error-message').empty().append(data.errorMessage);\n $('body').trigger('promotion:error', data);\n $('.coupon-code-field').trigger('focus');\n $.spinner().stop();\n } else {\n // If cart item was added/removed via promo code submit\n if (['', null, undefined].indexOf(data.numItems) && currentItemCount !== data.numItems) {\n\n // Clean Url Structure of any erroneous parameters\n if (window.history && ['', null, undefined].indexOf(data.actionUrls.showUrl) === -1) {\n history.replaceState({}, null, data.actionUrls.showUrl);\n }\n // Force uncached reload\n window.location.reload(true);\n } else {\n $('.coupons-and-promos').empty().append(data.totals.discountsHtml);\n module.exports.updateCartTotals(data);\n module.exports.updateApproachingDiscounts(data.approachingDiscounts);\n module.exports.validateBasket(data);\n $('body').trigger('promotion:success', data);\n $('.coupon-code-field').val('');\n $.spinner().stop();\n }\n }\n },\n error: function (err) {\n $('body').trigger('promotion:error', err);\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.errorMessage);\n $.spinner().stop();\n }\n }\n });\n return false;\n });\n\n $('body').on('click', '.remove-coupon', function (e) {\n e.preventDefault();\n\n var couponCode = $(this).data('code');\n var uuid = $(this).data('uuid');\n var $deleteConfirmBtn = $('.delete-coupon-confirmation-btn');\n var $productToRemoveSpan = $('.coupon-to-remove');\n\n $deleteConfirmBtn.data('uuid', uuid);\n $deleteConfirmBtn.data('code', couponCode);\n\n $productToRemoveSpan.empty().append(couponCode);\n });\n\n $('body').on('click', '.delete-coupon-confirmation-btn', function (e) {\n e.preventDefault();\n\n var currentItemCount = parseInt($('.minicart-quantity').text(), 10) || 0;\n var url = $(this).data('action');\n var uuid = $(this).data('uuid');\n var couponCode = $(this).data('code');\n var urlParams = {\n code: couponCode,\n uuid: uuid\n };\n\n url = module.exports.appendToUrl(url, urlParams);\n\n $('body > .modal-backdrop').remove();\n\n $.spinner().start();\n $('body').trigger('promotion:beforeUpdate');\n $.ajax({\n url: url,\n type: 'get',\n dataType: 'json',\n success: function (data) {\n $('.coupon-uuid-' + uuid).remove();\n\n // If cart item was added/removed via promo code removal\n if (['', null, undefined].indexOf(data.numItems) && currentItemCount !== data.numItems) {\n // Clean Url Structure of any erroneous parameters\n if (window.history && ['', null, undefined].indexOf(data.actionUrls.showUrl) === -1) {\n history.replaceState({}, null, data.actionUrls.showUrl);\n }\n // Force uncached reload\n window.location.reload(true);\n } else {\n module.exports.updateCartTotals(data);\n module.exports.updateApproachingDiscounts(data.approachingDiscounts);\n module.exports.validateBasket(data);\n $.spinner().stop();\n $('body').trigger('promotion:success', data);\n }\n },\n error: function (err) {\n $('body').trigger('promotion:error', err);\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $.spinner().stop();\n }\n }\n });\n });\n $('body').on('click', '.cart-page .bonus-product-button', function () {\n $.spinner().start();\n $(this).addClass('launched-modal');\n $.ajax({\n url: $(this).data('url'),\n method: 'GET',\n dataType: 'json',\n success: function (data) {\n $('body').trigger('bonusproduct:edit', data);\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n });\n\n $('body').on('hidden.bs.modal', '#chooseBonusProductModal', function () {\n $('#chooseBonusProductModal').remove();\n $('.modal-backdrop').remove();\n $('body').removeClass('modal-open');\n\n if ($('.cart-page').length) {\n $('.launched-modal .btn-outline-primary').trigger('focus');\n $('.launched-modal').removeClass('launched-modal');\n } else {\n $('.product-detail .add-to-cart').focus();\n }\n });\n\n $('body').on('change', '.quantity-select', function () {\n var selectedQuantity = $(this).val();\n $('.modal.show .update-cart-url').data('quantity', selectedQuantity);\n });\n\n $('body').on('click', '.update-cart-product-global', function (e) {\n e.preventDefault();\n var updateProductUrl = $(this).closest('.cart-and-ipay').find('.update-cart-url').val();\n var form = $(this).closest('.cart-and-ipay').find('.update-cart-url').data();\n\n if (form) {\n form.selectedOptionValueIds = base.methods.getOptions($('#quickViewModal'));\n form.pid = module.exports.getPidValue($(this))\n $(this).parents('.card').spinner().start();\n $('body').trigger('cart:beforeUpdate');\n\n if (updateProductUrl) {\n $.ajax({\n url: updateProductUrl,\n type: 'post',\n context: this,\n data: form,\n dataType: 'json',\n success: function (data) {\n $('#quickViewModal').modal('hide');\n\n $('.coupons-and-promos').empty().append(data.cartModel.totals.discountsHtml);\n module.exports.updateCartTotals(data.cartModel);\n module.exports.updateApproachingDiscounts(data.cartModel.approachingDiscounts);\n module.exports.updateAvailability(data.cartModel, form.uuid);\n module.exports.updateProductDetails(data, form.uuid);\n\n if (data.uuidToBeDeleted) {\n $('.uuid-' + data.uuidToBeDeleted).remove();\n }\n\n module.exports.validateBasket(data.cartModel);\n\n $('body').trigger('cart:update', [data, form.uuid]);\n\n $.spinner().stop();\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n } else {\n module.exports.createErrorNotification(err.responseJSON.errorMessage);\n $.spinner().stop();\n }\n }\n });\n }\n }\n });\n\n $('body').on('product:afterAddToCartQuickview', () => {\n var verifyCartPage = $('body').find('.page').data('action');\n if (verifyCartPage == 'Cart-Show') {\n location.reload();\n }\n });\n\n //responsible for filling edit gift cert modal with information from line item on cart page\n $('body').on('click', 'a.edit.editGiftCertificateLineItem', function (e) {\n e.preventDefault();\n\n var anchor = $(this);\n var uuid = anchor.data('uuid');\n var parentContainer = anchor.parents('.product-info.uuid-' + uuid);\n var from = parentContainer.find('.dwfrm_giftCertificate_purchase_from-' + uuid).data('value');\n var recipient = parentContainer.find('.dwfrm_giftCertificate_purchase_recipient-' + uuid).data('value');\n var recipientEmail = parentContainer.find('.dwfrm_giftCertificate_purchase_recipientEmail-' + uuid).data('value');\n var message = parentContainer.find('.dwfrm_giftCertificate_purchase_message-' + uuid).attr('title');\n var amount = parentContainer.find('.pricing.item-total-' + uuid).data('value');\n\n var modal = $('#editGiftCertificateLineItemModal');\n modal.find('#from').attr('value', from);\n modal.find('#recipient').attr('value', recipient);\n modal.find('#recipientEmail').attr('value', recipientEmail);\n modal.find('#confirmRecipientEmail').attr('value', recipientEmail);\n modal.find('#message').html(message || '');\n modal.find('#amount').attr('value', (('' + amount) || '0.0').split('.')[0]);\n modal.find('.btn-update-giftcertificate-incart').attr('data-uuid', uuid);\n modal.find('.btn-update-giftcertificate-incart').data('uuid', uuid);\n });\n}\n\nmodule.exports = {\n getPidValue: getPidValue,\n appendToUrl: appendToUrl,\n validateBasket: validateBasket,\n updateCartTotals: updateCartTotals,\n createErrorNotification: createErrorNotification,\n updateApproachingDiscounts: updateApproachingDiscounts,\n updateAvailability: updateAvailability,\n updateProductDetails: updateProductDetails,\n confirmDelete: confirmDelete,\n init: init\n};\n","'use strict';\n\nvar scrollAnimate = require('core/components/scrollAnimate');\n\n/**\n * Display error messages and highlight form fields with errors.\n * @param {string} parentSelector - the form which contains the fields\n * @param {Object} fieldErrors - the fields with errors\n */\nfunction loadFormErrors(parentSelector, fieldErrors) { // eslint-disable-line\n // Display error messages and highlight form fields with errors.\n $.each(fieldErrors, function (attr) {\n $('*[name=' + attr + ']', parentSelector)\n .addClass('is-invalid')\n .siblings('.invalid-feedback')\n .html(fieldErrors[attr]);\n });\n // Animate to top of form that has errors\n scrollAnimate($(parentSelector));\n}\n\n/**\n * Clear the form errors.\n * @param {string} parentSelector - the parent form selector.\n */\nfunction clearPreviousErrors(parentSelector) {\n //default clientSideValidation.js will remove .is-invalid only for html5 errors\n //let our manual call here clear all messaging on .invalid-feedback always\n $(parentSelector).find('.form-control.is-invalid').removeClass('is-invalid');\n $(parentSelector).find('.invalid-feedback').html('');\n $('.error-message').hide();\n}\n\nmodule.exports = {\n loadFormErrors: loadFormErrors,\n clearPreviousErrors: clearPreviousErrors\n};\n","'use strict';\nvar base = require('base/components/clientSideValidation');\n\n/**\n * Validate whole form. Requires `this` to be set to form object\n * @param {jQuery.event} event - Event to be canceled if form is invalid.\n * @returns {boolean} - Flag to indicate if form is valid\n */\nbase.validateForm = function(event) {\n var valid = true,\n $this = $(this);\n\n if (this.checkValidity && !this.checkValidity()) {\n valid = false;\n\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n\n if (!this.validity.valid) {\n if ($this.is('input, select')) {\n // handle where 'this' is a form field\n $this.trigger('invalid', this.validity);\n } else {\n $this.find('input, select').each(function () {\n // handle where 'this' is a form\n $this.trigger('invalid', this.validity);\n });\n }\n }\n }\n\n return valid;\n}\n/**\n * Password Messaging Helper Functions\n */\n$('form:has(input[type^=password])').each(function (i, form) {\n var $form = $(form),\n $passwordFields = $form.find('input:password'),\n $passwordInput = $form.find('.password-validate'),\n $passwordHelper = $form.find('.password-validation-helper li'), //multiple\n $showPassword = $form.find(\"#show-password\");\n\n // change the border of the input field to alert the user of acceptance|error\n $passwordInput.on('validatepassword', function (e) {\n if ($passwordHelper.hasClass(\"error\") || $passwordHelper.hasClass(\"empty\")) {\n $passwordInput\n .removeClass(\"is-valid\")\n .addClass(\"is-invalid\");\n $passwordHelper\n .not(\".valid\")\n .addClass(\"error\")\n .removeClass(\"empty\");\n } else {\n $passwordInput\n .addClass(\"is-valid\")\n .removeClass(\"is-invalid\");\n }\n });\n\n $passwordInput.on(\"keyup\", function (e) {\n var $this = $(this);\n var value = $this.val();\n\n // first check if the form is in error state, then re-eval\n if ($this.hasClass(\"is-invalid\")) {\n // leave the \"error\" states until valid\n $passwordHelper.trigger('checkrequirement', [value, 'valid empty']);\n\n $this.trigger('validatepassword');\n } else{\n $passwordHelper.trigger('checkrequirement', [value, 'error valid empty']);\n };\n });\n\n // change input decoration when user leaves, attach event only once\n $passwordInput.one(\"change\", function (e) {\n var $this = $(this);\n\n $this.on(\"blur\", function (e) {\n $this.trigger('validatepassword');\n });\n });\n\n /**\n * Display validation messages and highlight\n * each one of the requirements for the password\n * @param {string} clearClasses - which classes to clear\n */\n $passwordHelper.on('checkrequirement', function (e, value, clearClasses) {\n var $this = $(this).removeClass(clearClasses).removeClass('valid error empty');\n var regex = new RegExp($this.data('val-regex'));\n\n if (regex.test(value)) {\n $this.addClass(\"valid\");\n } else if (!regex.test(value) && $passwordInput.focus) {\n $this.addClass(\"empty error\");\n } else {\n $this.addClass(\"error\");\n }\n });\n\n\n //show password checkbox\n $showPassword.on('click', event => {\n var $checkbox = $(event.target);\n\n $passwordFields.each((index, element) => {\n $(element).attr('type', $checkbox.prop('checked') ? 'text' : 'password');\n });\n });\n});\n\nfunction validateFormFix(form, event) {\n base.validateForm.call(form, event || null);\n}\n\nbase.functions.validateForm = validateFormFix;\nmodule.exports = base;\n","'use strict';\n\n/**\n* Overriding from base SFRA to fix nested collapsibles\n*/\n\nmodule.exports = function () {\n var sizes = ['xs', 'sm', 'md', 'lg', 'xl'];\n\n sizes.forEach(function (size) {\n var selector = '.collapsible-' + size + ' .title';\n $('body').on('click', selector, function (e) {\n e.preventDefault();\n $(this).closest('.collapsible-' + size).toggleClass('active');\n\n if ($(this).closest('.collapsible-' + size).hasClass('active')) {\n $(this).attr('aria-expanded', true);\n } else {\n $(this).attr('aria-expanded', false);\n }\n });\n });\n};\n","'use strict';\n\n/**\n * Renders a modal window that will track the users consenting to accepting site tracking policy\n */\nvar consent = {\n getString: (urlAccept, textAccept, urlReject, textReject) => {\n //immediately return a calculate string value\n return `
\n \n
\n \n
\n
\n \n
\n
`;\n },\n showConsentDrawer: ($trackingElement) => {\n if ([undefined, null].indexOf($trackingElement) !== -1 || !$trackingElement.data('caonline') || $('#consent-tracking').length) {\n return;\n }\n\n var namespace = '.consenttrackingdrawer ',\n urlContent = $trackingElement.data('url'),\n urlAccept = $trackingElement.data('accept'),\n textAccept = $trackingElement.data('accepttext'),\n urlReject = $trackingElement.data('reject'),\n textReject = $trackingElement.data('rejecttext');\n\n var htmlString = consent.getString(urlAccept, textAccept, urlReject, textReject);\n\n $('body').append(htmlString);\n\n var $consentTracking = $('#consent-tracking');\n\n $.ajax({\n url: urlContent,\n type: 'get',\n dataType: 'html',\n context: $consentTracking,\n success: function (response) {\n this.find('.consent-text-wrapper').html(response);\n },\n error: function () {\n this.remove();\n }\n });\n\n $consentTracking.find('.consent-button-wrapper button').on('click' + namespace, (event) => {\n event.preventDefault();\n var url = $(event.target).data('url');\n var queryString = {\n csrf_token: $('.tracking-consent').data('token')\n };\n\n $.ajax({\n url: url,\n type: 'post',\n dataType: 'json',\n data: queryString,\n context: $consentTracking,\n complete: function () {\n this.remove();\n },\n error: function () {\n this.remove();\n }\n });\n });\n },\n init: () => {\n var namespace = '.consenttracking ',\n $body = $('body'),\n $trackingConsent = $('.tracking-consent');\n\n if ($('.consented').length === 0 && $trackingConsent.hasClass('api-true')) {\n consent.showConsentDrawer($trackingConsent);\n }\n\n $trackingConsent.each((index, element) => {\n var $this = $(this);\n\n if ($this.hasClass('api-true')) {\n $this.on('click' + namespace, () => {\n consent.showConsentDrawer($this);\n });\n }\n });\n\n $('.js-tracking-consent-show').on('click' + namespace, (e) => {\n e.preventDefault();\n consent.showConsentDrawer($trackingConsent);\n });\n }\n};\n\nmodule.exports = consent;\n","'use strict';\n\nvar base = require('base/components/countrySelector');\n\nmodule.exports = function () {\n // initialize action to allow default behavior\n var $page = $('.page');\n\n if (['', null, undefined].indexOf($page.data('action')) !== -1) $page.data('action','Home-Show');\n\n return base.apply(this, arguments);\n};\n","'use strict';\n\nvar einsteinUtils = require('./einsteinUtils');\nvar productTile = require('./productTile');\nvar abSlider = require('./slider');\n\nmodule.exports = {};\n\n/**\n * Gets all placeholder elements, which hold einstein recommendations queries the details from the\n * einstein engine and feeds them back to the dom element\n * @param {Object} e jquery event\n * @returns {Object} jquery targets\n */\nmodule.exports.loadRecommendations = function (e) {\n var $context = $(this);\n var $recommendationTargets = $context.hasClass('.einstein-data') ? $context : $context.find('.einstein-data');\n\n return $recommendationTargets.each(function () {\n var $recTrigger = $(this);\n var data = $recTrigger.data() || {};\n var asyncUrl = data.url;\n\n einsteinUtils.getRecommendations(data, function (einsteinResponse) {\n var response = einsteinUtils.interpretResponse(data, einsteinResponse);\n\n // Add replace content URL\n $.each(response, function (i, rec) {\n if (!rec || !rec.id) return null;\n\n var pidURL = asyncUrl;\n pidURL += (pidURL.indexOf('?') === -1 ? '?' : '&') + 'pid=' + rec.id;\n $recTrigger.find('.product[data-pid=\"placeholder\"]:not([data-replace-content])')\n .first()\n .attr('data-replace-content', pidURL); //Must be attr to allow productTile.js async selector rule to catch recommendation\n });\n\n // Remove empty slides\n $recTrigger.find('.slide:has(.product[data-pid=\"placeholder\"]:not([data-replace-content]))').remove();\n\n // Prepare Slider Container\n var $sliderContainer = $recTrigger.closest('.slider-container').removeClass('delay-init');\n\n productTile.init($recTrigger.find('.product'), function (status) {\n // Re Initialize sliders to account for TileInclude Errors\n var tns = status.errors > 0 ? $sliderContainer.data('tns') : null;\n\n if (tns) {\n tns.destroy();\n tns.rebuild();\n }\n });\n\n // Initialize sliders\n abSlider.initializeSliders($sliderContainer.parent());\n });\n });\n}\n\nmodule.exports.init = function (context) {\n // Re-triggerable dom event\n $(document).off('load.einstein')\n .on('load.einstein', module.exports.loadRecommendations);\n\n context = context && 'trigger' in context ? context : $(document);\n\n return context.triggerHandler('load.einstein');\n};\n","'use strict';\n\nmodule.exports = {};\n\n/**\n * Validates and Return the cquotient namespace provided by the commerce cloud platform\n * @returns {Object} - einsteinUtils or null\n */\nmodule.exports.getEinsteinUtils = function () {\n var einsteinUtils = window.CQuotient;\n if (einsteinUtils && (typeof einsteinUtils.getCQUserId === 'function') && (typeof einsteinUtils.getCQCookieId === 'function')) {\n return einsteinUtils;\n }\n return null;\n}\n\n /**\n * Processes a recommendation tile, with an already initialized category specific anchors array\n * @param {Object} data object to carry info to CQuotient calls\n * @param {Function} callback handler function\n */\nmodule.exports.getRecommendations = function(data, callback) {\n var einsteinUtils = module.exports.getEinsteinUtils();\n\n var params = {\n userId: einsteinUtils.getCQUserId(),\n cookieId: einsteinUtils.getCQCookieId(),\n ccver: '1.01'\n };\n\n if (data.anchors && data.anchors.length > 0) {\n params.anchors = data.anchors;\n }\n\n if (einsteinUtils.getRecs) {\n einsteinUtils.getRecs(einsteinUtils.clientId, data.recommender, params, callback);\n } else {\n einsteinUtils.widgets = einsteinUtils.widgets || []; // eslint-disable-line no-param-reassign\n einsteinUtils.widgets.push({\n recommenderName: data.recommender,\n parameters: params,\n callback: callback\n });\n }\n}\n\n/**\n * Processes a response and format data structure\n * @param {Object} request object to carry info to CQuotient calls\n * @param {Object} response data returned from CQuotient calls\n * @returns {Object}\n */\nmodule.exports.interpretResponse = function (request, response) {\n return response[request.recommender].recs;\n}\n","'use strict';\n\nvar scrollAnimate = require('core/components/scrollAnimate');\n\n/**\n * appends params to a url\n * @param {string} data - data returned from the server's ajax call\n * @param {Object} button - button that was clicked for email sign-up\n */\nfunction displayMessage(success, msg) {\n var status = success ? 'alert-success' : 'alert-danger';\n\n if ($('.email-signup-message').length === 0) {\n $('body').append('');\n }\n\n $('.email-signup-message').append('
' + msg + '
');\n\n setTimeout(function () {\n $('.email-signup-message').remove();\n }, 3000);\n}\n\nvar footer = {\n 'elementNameMap': {\n 'hpEmailSignUp': 'emailId'\n },\n 'backToTop': function () {\n $('.back-to-top').click(function () {\n scrollAnimate();\n });\n },\n 'forms': 'footer .email-signup-form form',\n 'init': function () {\n var nameMap = this.elementNameMap;\n\n // Prevent Multi Form event collision\n var $forms = $(this.forms);\n $forms.each(function () {\n var $form = $(this);\n var $inputs = $form.find(':input:not(:disabled)');\n\n //TODO: Security Update with CSRF\n\n // Update Form Name for SFRA compatibility\n if (nameMap) {\n $inputs.each(function () {\n var $input = $(this);\n var oldName = $input.attr('name');\n var newName = oldName && nameMap[oldName];\n\n if (newName) {\n $input.attr('name', newName);\n }\n });\n }\n\n $form.on('submit', function (e, urlOverride) {\n e.preventDefault();\n\n var $btn = $(this);\n var xhr = $form.data('xhr');\n\n $form.data('xhr', $.ajax({\n url: urlOverride || $form.attr('action'),\n type: $form.attr('method') || 'post',\n data: $inputs.serialize(),\n dataType: 'json',\n beforeSend: function () {\n // Drop duplicate requests\n xhr && xhr.abort && xhr.abort();\n\n $.spinner().start();\n\n $btn.attr('disabled', true);\n },\n success: function (data) {\n displayMessage(data.success, data.msg);\n $form.trigger('footer:signup:success', data);\n },\n error: function ($xhr, err, other) {\n var msg = $xhr.responseJSON && $xhr.responseJSON.message;\n displayMessage(false, msg);\n },\n complete: function () {\n $.spinner().stop();\n $btn.removeAttr('disabled');\n $form[0].reset();\n }\n }));\n })\n\n // For SFRA compatibility\n $form.find('.subscribe-email').on('click', function (e) {\n e.preventDefault();\n $form.trigger('submit', $(this).data('href'));\n });\n });\n }\n};\n\nmodule.exports = footer;\n","'use strict';\n\nvar updateHeader = status => {\n var $headerNav = $('.header-nav');\n var headerNavHeight = $headerNav.outerHeight();\n var $page = $('.page');\n\n if (status === 'fixed') {\n $headerNav.addClass('fixed');\n if (!($headerNav.closest('.transparent-header').length)) {\n $page.css('margin-top', headerNavHeight + 'px');\n }\n $headerNav.removeClass('transparent-nav');\n } else {\n $headerNav.removeClass('fixed');\n $page.css('margin-top', '');\n var isMobileOpen = $('body').hasClass('mobile-menu-in');\n if (!isMobileOpen){\n $headerNav.addClass('transparent-nav');\n }\n }\n}\n\nmodule.exports = function() {\n\n // Fix/unfix header to top of screen, dependent on class added by custom preference\n // Note: This is intentionally not using utilities/scroll.js so that it can fix immediately vs. being debounced. Should be replaced with CSS position:sticky once IE11 support is dropped.\n var hasFixedHeader = $('header').hasClass('fixed-header');\n $(window).scroll(event => {\n if (hasFixedHeader) {\n var $headerBanner = $('.header-banner');\n var headerBannerHeight = $headerBanner.length ? $headerBanner.outerHeight() : 0;\n var $preNavHeader = $('.pre-nav-header');\n var preNavHeaderHeight = $preNavHeader.length ? $preNavHeader.outerHeight() : 0;\n var scrollTop = $(event.target).scrollTop();\n\n if (scrollTop > headerBannerHeight + preNavHeaderHeight) {\n updateHeader('fixed');\n } else {\n updateHeader('unfixed');\n }\n }\n });\n\n var isMobile = window.isMobile();\n if ($('header').hasClass('transparent-header') && !isMobile) {\n $('.header-nav').hover(\n function() {\n $(this).removeClass('transparent-nav');\n }, function() {\n $(this).addClass('transparent-nav');\n }\n );\n }\n\n // Check for presence of content assets in MegaMenu\n var $megamenuDropdown = $('.megamenu > .dropdown-menu');\n\n $megamenuDropdown.each((index, element) => {\n var $megamenu = $(element);\n if ($megamenu.find('.megamenu-asset-1').children().length) {\n $megamenu.addClass('has-asset-1');\n }\n if ($megamenu.find('.megamenu-asset-2').children().length) {\n $megamenu.addClass('has-asset-2');\n }\n });\n\n // Show/hide content assets on mobile based on category level\n if (isMobile) {\n var $thirdMenuBackBtn = $('.megamenu .menu-subcategories > .dropdown-item'),\n $thirdSubLink = $('.megamenu .menu-subcategories > .dropdown-item > .dropdown-link');\n\n $thirdSubLink.on('click', function () {\n $('.megamenu.show .menu-subcategories').parent('li').addClass('thirdCatOpen');\n });\n $thirdMenuBackBtn.on('click', function () {\n $('.megamenu.show .menu-subcategories').parent('li').removeClass('thirdCatOpen');\n });\n }\n\n $('.main-menu .navbar-nav').on('mouseenter mouseleave', function () {\n $(this).toggleClass('nav-item-hover');\n });\n\n $('header .site-search').on('mouseenter', event => {\n var $siteSearch = $(event.target).closest('.site-search');\n $siteSearch.addClass('expanded');\n });\n\n $('header .site-search').on('mouseleave', event => {\n var $siteSearch = $(event.target).closest('.site-search');\n var $input = $siteSearch.find('input');\n // Only collapse if the user isn't typing and hasn't entered text\n if (!$input.is(':focus') && !$input.val()) {\n $siteSearch.removeClass('expanded');\n }\n });\n\n $('form[name=simpleSearch]').on('submit', event => {\n var $form = $(event.target);\n var $input = $('input[name=q]',$form);\n //keep search from submitting if query is empty\n if ($input.val() == \"\") {\n $input.focus();\n event.preventDefault();\n }\n });\n\n};\n","'use strict';\n\nvar keyboardAccessibility = require('base/components/keyboardAccessibility');\nvar SiteConstants = require('constants/SiteConstants');\nvar hoverIntent = require('jquery-hoverintent');\nvar headerUtils = require('../utilities/headerUtils');\n\nfunction clearSelection(element) {\n var $currentPane = $(element).closest('.custom-dropdown.show');\n\n $currentPane.removeClass('show');\n\n // Adjust DOM after drawer finishes closing (mobile) or dropdown finishes hiding (desktop)\n setTimeout(() => {\n $currentPane.find('.nav-link').attr('aria-expanded', 'false');\n $currentPane.find('.dropdown-menu').attr('aria-hidden', 'true');\n $currentPane.find('.top-category').detach();\n $currentPane.find('.nav-menu').detach();\n\n if (!$currentPane.closest('.custom-dropdown.show').length) {\n $currentPane.closest('.menu-group').find('.nav.navbar-nav > li.nav-item > a').attr('aria-hidden', 'false');\n }\n }, SiteConstants.TransitionSpeed);\n};\n\nfunction toggleDrawer(status) {\n var $header = $('header');\n var $headerNav = $header.find('.header-nav');\n var headerNavHeight = headerUtils.getHeaderHeight();\n var $mainMenu = $header.find('.main-menu');\n var $navbar = $mainMenu.find('.navbar-nav');\n var $modalBackground = $('.modal-background');\n\n if (status === 'open') {\n $('html').scrollTop($headerNav.offset().top);\n $('html').addClass('lock-scroll');\n $('body').addClass('mobile-menu-in');\n $mainMenu\n .addClass('in')\n .attr('aria-hidden', 'false')\n .css('top', headerNavHeight)\n .siblings().attr('aria-hidden', 'true');\n $modalBackground\n .fadeIn(SiteConstants.TransitionSpeed)\n .css('top', headerNavHeight);\n $header\n .siblings().attr('aria-hidden', 'true');\n $navbar\n .find('.nav-link').first().focus();\n\n } else {\n $('body').removeClass('mobile-menu-in');\n $navbar\n .find('.nav-menu, .top-category').detach();\n $navbar\n .find('.thirdCatOpen').removeClass('thirdCatOpen');\n $navbar\n .find('.show').removeClass('show');\n $mainMenu\n .removeClass('in')\n .attr('aria-hidden', 'true')\n .siblings().attr('aria-hidden', 'false');\n $header\n .siblings().attr('aria-hidden', 'false');\n $modalBackground\n .fadeOut(SiteConstants.TransitionSpeed);\n\n setTimeout(() => {\n $modalBackground.css('top', '');\n $('html').removeClass('lock-scroll');\n $headerNav.addClass('transparent-nav');\n }, SiteConstants.TransitionSpeed);\n }\n};\n\nfunction headerBanner() {\n var headerBannerStatus = window.sessionStorage.getItem('hide_header_banner');\n $('.header-banner .close').on('click', () => {\n $('.header-banner').addClass('d-none');\n window.sessionStorage.setItem('hide_header_banner', '1');\n });\n\n if (!headerBannerStatus || headerBannerStatus < 0) {\n $('.header-banner').removeClass('d-none');\n }\n};\n\nfunction kbAccessibility() {\n keyboardAccessibility('.main-menu .nav-link, .main-menu .dropdown-link, .header-account-container > div, .header-support-container > div, .minicart > div',\n {\n 40: function(menuItem) { // down\n if (menuItem.hasClass('nav-item')) { // top level\n $('.navbar-nav .show').removeClass('show')\n .children('.dropdown-menu')\n .removeClass('show');\n menuItem.addClass('show').children('.dropdown-menu').addClass('show');\n menuItem.find('ul > li > a').first().focus();\n $(this).attr('aria-expanded', 'true');\n } else if (menuItem.is('.header-account-container, .header-support-container')) { // account/support\n menuItem.find('.custom-dropdown').addClass('show').children('.dropdown-menu').addClass('show');\n menuItem.find('ul > li > a').first().focus();\n menuItem.find('.dropdown-toggle').attr('aria-expanded', 'true');\n } else {\n menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');\n if (!(menuItem.next().length > 0)) { // if this is the last menuItem\n menuItem.parent().parent().find('li > a').first().focus(); // set focus to the first menuitem\n } else {\n menuItem.next().children().first().focus();\n }\n }\n },\n 39: function(menuItem) { // right\n if (menuItem.hasClass('nav-item')) { // top level\n menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');\n $(this).attr('aria-expanded', 'false');\n menuItem.next().children().first().focus();\n } else if (menuItem.is('.header-account-container, .header-support-container')) { // account/support\n menuItem.find('.custom-dropdown').addClass('show').children('.dropdown-menu').addClass('show');\n menuItem.find('ul > li > a').first().focus();\n menuItem.find('.dropdown-toggle').attr('aria-expanded', 'true');\n } else if (menuItem.hasClass('dropdown')) {\n menuItem.addClass('show').children('.dropdown-menu').addClass('show');\n $(this).attr('aria-expanded', 'true');\n menuItem.find('ul > li > a').first().focus();\n }\n },\n 38: function(menuItem) { // up\n if (menuItem.hasClass('nav-item')) { // top level\n menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');\n $(this).attr('aria-expanded', 'false');\n } else if (menuItem.is('.minicart')) { // minicart\n menuItem.find('.popover').removeClass('show');\n } else if (menuItem.is('.header-account-container, .header-support-container')) { // account/support\n menuItem.find('.custom-dropdown').removeClass('show').children('.dropdown-menu').removeClass('show');\n menuItem.find('.dropdown-toggle').attr('aria-expanded', 'false');\n } else if (menuItem.prev().length === 0) { // first menuItem\n menuItem.parent().parent().removeClass('show')\n .children('.nav-link')\n .attr('aria-expanded', 'false');\n menuItem.parent().children().last().children().first().focus(); // set the focus to the last menuItem\n } else {\n menuItem.prev().children().first().focus();\n }\n },\n 37: function(menuItem) { // left\n if (menuItem.hasClass('nav-item')) { // top level\n menuItem.removeClass('show').children('.dropdown-menu').removeClass('show');\n $(this).attr('aria-expanded', 'false');\n menuItem.prev().children().first().focus();\n } else if (menuItem.is('.minicart')) { // minicart\n menuItem.find('.popover').removeClass('show');\n } else if (menuItem.is('.header-account-container, .header-support-container')) { // account/support\n menuItem.find('.custom-dropdown').removeClass('show').children('.dropdown-menu').removeClass('show');\n menuItem.find('.dropdown-toggle').attr('aria-expanded', 'false');\n } else {\n menuItem.closest('.show').removeClass('show')\n .closest('li.show').removeClass('show')\n .children().first().focus().attr('aria-expanded', 'false');\n }\n },\n 27: function(menuItem) { // escape\n if (menuItem.is('.minicart')) { // minicart\n menuItem.find('.popover').removeClass('show');\n } else if (menuItem.is('.header-account-container, .header-support-container')) { // account/support\n menuItem.find('.custom-dropdown').removeClass('show').children('.dropdown-menu').removeClass('show');\n menuItem.find('.dropdown-toggle').attr('aria-expanded', 'false');\n } else {\n var parentMenu = menuItem.hasClass('show')\n ? menuItem\n : menuItem.closest('.show');\n parentMenu.children('.show').removeClass('show');\n parentMenu.removeClass('show').children('.nav-link')\n .attr('aria-expanded', 'false');\n parentMenu.children().first().focus();\n }\n }\n },\n function () {\n return $(this).parent();\n }\n );\n}\n\nfunction searchExpand() {\n //if only search icon is visible, show the input on focus\n $( \".search-field\" ).focus(function() {\n $(this).closest('.site-search').addClass('expanded');\n });\n};\n\nfunction dropdownMenu() {\n // Custom dropdown behaviors for top menu\n var $dropdownMenu = $('.custom-dropdown:not(.disabled) [data-toggle=\"dropdown\"]');\n $dropdownMenu.on('click', event => {\n event.stopPropagation(); // Prevent Bootstrap dropdown click events\n if (window.isMobile()) {\n // Drawer behavior on mobile\n event.preventDefault();\n var $dropdownLink = $(event.target);\n var $dropdown = $dropdownLink.closest('.custom-dropdown');\n var $li = $('');\n var $closeMenu = $('');\n var link = $dropdownLink.clone().removeClass('dropdown-toggle')\n .removeAttr('data-toggle')\n .removeAttr('aria-expanded')\n .attr('aria-haspopup', 'false');\n $li.append(link);\n $closeMenu.append($('.close-menu').first().clone());\n $dropdown.children('.dropdown-menu')\n .prepend($li)\n .prepend($closeMenu)\n .attr('aria-hidden', 'false')\n .find('a').removeAttr('tabindex', '-1');\n $dropdown.addClass('show');\n $dropdownLink.attr('aria-expanded', 'true');\n $dropdown.closest('.menu-group').find('.nav.navbar-nav > li.nav-item > a').attr('aria-hidden', 'true');\n $(link).focus();\n $('.dropdown-menu').scrollTop(0);\n }\n });\n\n // Desktop - open menu using hoverIntent to prevent unintentional opening\n $dropdownMenu.hoverIntent({\n over: event => {\n if (!window.isMobile()) {\n var eventElement = event.target;\n // Close all dropdowns\n $('.navbar-nav > li').each((index, element) => {\n if (!$.contains(element, eventElement)) {\n var $navItem = $(element);\n $navItem.find('.show').each(() => {\n clearSelection(element);\n });\n if ($navItem.hasClass('show')) {\n $navItem.removeClass('show');\n $navItem.children('ul.dropdown-menu').removeClass('show');\n $navItem.children('.nav-link').attr('aria-expanded', 'false');\n }\n }\n });\n // Open current dropdown\n $(eventElement).parent().addClass('show');\n $(eventElement).siblings('.dropdown-menu').addClass('show').attr('aria-hidden', 'false');\n $(eventElement).attr('aria-expanded', 'true');\n }\n },\n out: () => {\n // this 'out' handler is left empty, since it's triggered from parent, handled in mouseleave event below\n },\n interval: 50\n });\n // Desktop - close menu on mouseleave\n $dropdownMenu.parent().on('mouseleave', event => {\n if (!window.isMobile()) {\n var $dropdown = $(event.currentTarget);\n // Close current dropdown\n $dropdown.removeClass('show');\n $dropdown.children('.dropdown-menu').removeClass('show').attr('aria-hidden', 'true');\n $dropdown.children('.nav-link').attr('aria-expanded', 'false');\n }\n });\n};\n\nfunction megaLeftHover() {\n //Megamenu Mega-left menu\n $('.mega-left-menu-link').hoverIntent( function() {\n var menuName = this.id,\n menuRight = $('#' + menuName + '-right'),\n menuLeft = $(this).parent().parent(),\n menuRightParent = menuRight.closest('.mega-left');\n\n if (!window.isMobile()) {\n // clear classes\n menuLeft.find('.active').removeClass('active');\n menuRightParent.removeClass('has-sub-asset');\n menuRightParent.find('.active-list').removeClass('active-list');\n // add classes\n $(this).addClass('active');\n menuRight.parent().addClass('active-list');\n // add a class to the parent Ul if a third level asset is displayed; css-hides the top level asset\n if (menuRight.parent().next().hasClass('sub-asset-1') || menuRight.parent().next().hasClass('sub-asset-2')) {\n menuRightParent.addClass('has-sub-asset');\n }\n }\n },\n 50\n );\n};\n\nfunction navbarBackBtn() {\n $('.navbar-nav').on('click', '.back', event => {\n event.preventDefault();\n clearSelection(event.target);\n });\n};\n\nfunction navbarToggler() {\n $('.navbar-toggler').click(event => {\n event.preventDefault();\n if ($('body').hasClass('mobile-menu-in')) {\n toggleDrawer('close');\n $('.header-nav').addClass('transparent-nav');\n } else {\n toggleDrawer('open');\n $('.header-nav').removeClass('transparent-nav');\n }\n });\n\n $('html').on('click', '.mobile-menu-in .modal-background', () => toggleDrawer('close'));\n};\n\nfunction mobileSearchFix() {\n // Prevent iOS from scrolling to bad position on search field input focus\n $('.search-mobile .search-field').focus(event => {\n if (window.isMobile()) {\n var currentScrollPosition = $('html').scrollTop();\n setTimeout(() => {\n $('html').scrollTop(currentScrollPosition);\n $('.modal-background').show();\n }, SiteConstants.TransitionSpeed);\n }\n });\n};\n\nmodule.exports = {\n clearSelection: clearSelection,\n toggleDrawer: toggleDrawer,\n headerBanner: headerBanner,\n kbAccessibility: kbAccessibility,\n searchExpand: searchExpand,\n dropdownMenu: dropdownMenu,\n megaLeftHover: megaLeftHover,\n navbarBackBtn: navbarBackBtn,\n navbarToggler: navbarToggler,\n mobileSearchFix: mobileSearchFix\n}\n","'use strict';\n\nvar SiteConstants = require('constants/SiteConstants');\nvar updateMiniCart = true;\n\nfunction setMiniCartBodyMaxHeight(minicart) {\n var $minicart = $(minicart);\n var $minicartScrollable = $minicart.find('.product-summary');\n var minicartHeight = $minicart.outerHeight();\n var minicartScrollableHeight = $minicartScrollable.outerHeight();\n var minicartNonScrollableHeight = minicartHeight - minicartScrollableHeight;\n var minicartOffset = $minicart.offset().top - $(window).scrollTop();\n var subtractHeight = minicartOffset + minicartNonScrollableHeight + SiteConstants.Spacer;\n\n $minicartScrollable.css('max-height', 'calc(100vh - ' + subtractHeight + 'px)');\n}\n\nmodule.exports = function () {\n $('.minicart').on('count:update', (event, count) => {\n if (count && $.isNumeric(count.quantityTotal)) {\n $('.minicart .minicart-quantity').text(count.quantityTotal);\n $('.minicart .minicart-link').attr({\n 'aria-label': count.minicartCountOfItems,\n title: count.minicartCountOfItems\n });\n }\n });\n\n $('.minicart').on('mouseenter focusin touchstart', () => {\n if ($('.search:visible').length === 0) {\n return;\n }\n var url = $('.minicart').data('action-url');\n var count = parseInt($('.minicart .minicart-quantity').text(), 10);\n\n if (count !== 0 && $('.minicart .popover.show').length === 0) {\n if (!updateMiniCart && !$('.minicart .popover').is(':empty')) {\n $('.minicart .popover').addClass('show');\n return;\n }\n\n $('.minicart .popover').addClass('show');\n $('.minicart .popover').spinner().start();\n $.get(url, data => {\n $('.minicart .popover').empty();\n $('.minicart .popover').append(data);\n updateMiniCart = false;\n $.spinner().stop();\n $('body').trigger('minicart:loaded', $('.minicart .popover'));\n });\n }\n });\n\n $('body').on('touchstart click', event => {\n if ($('.minicart').has(event.target).length <= 0) {\n $('.minicart .popover').removeClass('show');\n }\n });\n\n $('.minicart').on('mouseleave focusout', event => {\n if ((event.type === 'focusout' && $('.minicart').has(event.target).length > 0)\n || (event.type === 'mouseleave' && $(event.target).is('.minicart .quantity'))\n || $('body').hasClass('modal-open')) {\n event.stopPropagation();\n return;\n }\n $('.minicart .popover').removeClass('show');\n $('body').trigger('minicart:mouseleave_focusout');\n });\n\n $('body').on('change', '.minicart .quantity', event => {\n if ($(event.target).parents('.bonus-product-line-item').length && $('.cart-page').length) {\n location.reload();\n }\n });\n\n $('body').on('product:afterAddToCart cart:update', () => {\n updateMiniCart = true;\n });\n\n $('body').on('minicart:loaded', (event, minicart) => {\n setMiniCartBodyMaxHeight(minicart);\n });\n};\n","'use strict';\n\nfunction setModalBodyMaxHeight($modal) {\n var $modalBody = $modal.find('.modal-body');\n var headerHeight = $modal.find('.modal-header').outerHeight();\n var footerHeight = $modal.find('.modal-footer').length ? $modal.find('.modal-footer').outerHeight() : 0;\n var $modalDialog = $modal.find('.modal-dialog');\n var dialogMarginTop = parseInt($modalDialog.css('margin-top').split('px')[0]);\n var dialogMarginBottom = parseInt($modalDialog.css('margin-bottom').split('px')[0]);\n var dialogMarginHeight = dialogMarginTop + dialogMarginBottom;\n var $modalContent = $modal.find('.modal-content');\n var contentBorderTop = parseInt($modalContent.css('border-top-width').split('px')[0]);\n var contentBorderBottom = parseInt($modalContent.css('border-bottom-width').split('px')[0]);\n var subtractHeight = headerHeight + footerHeight + dialogMarginHeight + contentBorderTop + contentBorderBottom;\n\n $modalBody.css('max-height', '400px');\n $modalBody.css('max-height', 'calc(100vh - ' + subtractHeight + 'px)');\n}\n\n/**\n * Generates the modal window on the first call.\n *\n */\nfunction getModalHtmlElement(elementID, dialogClasses) {\n var id = elementID || 'customModal';\n var qvPDPLink = (id == 'quickViewModal') ? ' ' : '';\n dialogClasses = dialogClasses || '';\n\n if ($('#' + id).length !== 0) {\n $('#' + id).remove();\n }\n var htmlString = '
'\n + ''\n + '
'\n + ''\n + '
'\n + '
'\n + qvPDPLink\n + ' '\n + '
'\n + ''\n + ''\n + '
'\n + '
'\n + '
';\n $('body').append(htmlString);\n}\n\nfunction onShownBsModal() {\n $('body').on('shown.bs.modal', '.modal', function() {\n $('body').trigger('modal:loaded', this);\n });\n}\n\nfunction onModalLoaded() {\n $('body').on('modal:loaded', function(event, modal) {\n var $modal = $(modal);\n\n // Check for modal-scrollbody helper class and adjust body max-height if found\n if ($modal.find('.modal-scrollbody').length\n || $modal.find('.quick-view-dialog').length\n || $modal.find('.choose-bonus-product-dialog').length) {\n setModalBodyMaxHeight($modal);\n }\n });\n}\n\n/**\n * Parse HTML code in Ajax response\n *\n * @param {string} html - Rendered HTML from quickview template\n * @return {QuickViewHtml} - QuickView content components\n */\nfunction parseHtml(html) {\n var $html = $('
').append($.parseHTML(html));\n\n var body = $html.find('.product-quickview');\n if(body.length == 0) {\n body = $html.find('.modal-body').children()\n }\n var footer = $html.find('.modal-footer').children();\n\n return { body: body, footer: footer };\n}\n\n/**\n * replaces the content in the modal window on for the selected product variation.\n * @param {string} selectedValueUrl - url to be used to retrieve a new product model\n */\nfunction fillModalElement(selectedValueUrl, data, $modal) {\n $.ajax({\n url: selectedValueUrl,\n method: 'GET',\n data: data,\n dataType: 'json',\n success: function(data) {\n var parsedHtml = parseHtml(data.renderedTemplate);\n\n $modal.find('.modal-body').empty();\n $modal.find('.modal-body').html(parsedHtml.body);\n $modal.find('.modal-footer').html(parsedHtml.footer);\n $modal.find('.modal-header .close .sr-only').text(data.closeButtonText);\n $modal.find('.enter-message').text(data.enterDialogMessage);\n $modal.modal('show');\n\n if (data.dialogTitle) {\n $modal.find('.modal-header').prepend('
' + data.dialogTitle + '
')\n }\n }\n });\n}\n\nfunction initCustomModal() {\n $('body').on('click', '.custom-modal', function (e) {\n e.preventDefault();\n var cid = $(this).attr('data-cid');\n var title = $(this).attr('data-title');\n var dialogClasses = $(this).attr('data-dialog-classes');\n var selectedValueUrl = $(this).attr('href');\n\n getModalHtmlElement('customModal', dialogClasses);\n fillModalElement(selectedValueUrl, {cid: cid, title: title}, $('#customModal'));\n });\n}\n\nmodule.exports = {\n setModalBodyMaxHeight: setModalBodyMaxHeight,\n getModalHtmlElement: getModalHtmlElement,\n onShownBsModal: onShownBsModal,\n onModalLoaded: onModalLoaded,\n parseHtml: parseHtml,\n init: function() {\n onShownBsModal();\n onModalLoaded();\n initCustomModal();\n }\n};\n","'use strict';\n\nvar promiseChains = [null, null, null, null, null, null, null],\n promiseIndex = 0;\n\nmodule.exports = {\n selectors: {\n processing: '.processing',\n sending: '.sending'\n },\n init: function ($context = $('.product[data-replace-content], .product [data-replace-content]'), callbackfn) {\n var scope = this,\n initErrors = 0;\n\n $context\n .filter(':not(' + scope.selectors.processing + ')')\n .each(function (i, replace) {\n var $target = $(replace);\n var asyncUrl = $target.data('replace-content') || $target.attr('data-replace-content');\n var deferment = $.Deferred();\n\n if (['', null, undefined].indexOf(asyncUrl) === -1) {\n // Only track deferment if url is requestable\n $target.data('deferment', deferment);\n\n promiseChains[promiseIndex] = (promiseChains[promiseIndex] || $.when()).then(function () {\n // Seperate deferment-ness of ajax request from actual deferment to allow failures to progress current promise group\n $target.data('$xhr', $.ajax({\n url: asyncUrl,\n dataType: 'html',\n timeout: 60000,\n context: $target,\n beforeSend: function () {\n this.addClass(scope.selectors.sending.replace(/\\./gi,' '));\n },\n error: function () {\n var $slide = this.parent('.slide').add(this);\n\n $slide.eq(0).remove();\n\n initErrors++;\n },\n success: function (data) {\n // Per AJAX response populate the product tile placeholder\n this.replaceWith(data);\n //reinit tooltips for quick add to cart popover\n $('body').trigger('tooltip:init');\n },\n complete: function () {\n deferment.resolve();\n }\n }));\n\n return deferment;\n });\n\n promiseIndex = (promiseIndex + 1) % promiseChains.length;\n }\n });\n\n if (callbackfn) {\n $.when.apply($, promiseChains).then(function () {\n return callbackfn.call(null, {errors: initErrors});\n });\n }\n }\n}\n","\n'use strict';\n\nfunction check(e, next) {\n if (typeof grecaptcha !== 'undefined' && grecaptcha) {\n grecaptcha.ready(function() {\n var actionName = 'submit' + (e && e.target ? (e.target.id + e.target.className).replace(/[^a-zA-Z0-9]+/g, '') : '');\n grecaptcha.execute(window.CachedData.recaptchaSiteKey, {action: actionName}).then(function(token) {\n\n var recaptchaTokenInput = $(\"\");\n var recaptchaActionInput = $(\"\");\n\n if (typeof next.data == 'string') {\n next.data += next.data.length === 0 ? '' : '&';\n next.data += $.param(recaptchaTokenInput) + '&' + $.param(recaptchaActionInput);\n } else {\n next.data = next.data || {};\n next.data['dwfrm_recaptcha_recaptchaToken'] = token;\n next.data['dwfrm_recaptcha_recaptchaAction'] = actionName;\n }\n\n $.ajax(next);\n });\n });\n } else {\n $.ajax(next);\n }\n}\n\nmodule.exports = {\n check: check\n}\n","'use strict';\n\nmodule.exports = function (element) {\n var hasFixedHeader = $('header').hasClass('fixed-header');\n var hasFixedHeaderEnhanced = $('header').hasClass('fixed-header-enhanced');\n var position = 0;\n\n if (element && element.length) {\n if (hasFixedHeader || hasFixedHeaderEnhanced) {\n var headerNavHeight = $('.header-nav').length ? $('.header-nav').height() : 0;\n var headerBannerHeight = $('.header-banner').length ? $('.header-banner').height() : 0;\n var utilityBannerHeight = $('.utility-header').length ? $('.utility-header').height() : 0;\n var fullHeaderHeight = (headerNavHeight + headerBannerHeight + utilityBannerHeight) * 2;\n\n if (element.offset().top > fullHeaderHeight) {\n position = element.length ? element.offset().top - headerNavHeight : 0;\n }\n } else {\n position = element.offset().top;\n }\n }\n\n $('html, body').animate({\n scrollTop: position\n }, 500);\n\n if (!element) {\n $('.logo-home').focus();\n }\n};\n","'use strict';\n\nvar debounce = require('lodash/debounce');\nvar endpoint = $('.suggestions-wrapper').data('url');\n\nvar sitePreferencesUtils = require('../preferences/sitePreferencesUtils');\nvar preferences = sitePreferencesUtils.getSitePreferences();\nvar SiteConstants = require('constants/SiteConstants');\n// Original vars from search.js\nvar minChars = preferences.headerSearchMinTermLength;\nvar UP_KEY = SiteConstants.UP_KEY;\nvar DOWN_KEY = SiteConstants.DOWN_KEY;\nvar DIRECTION_DOWN = SiteConstants.DIRECTION_DOWN;\nvar DIRECTION_UP = SiteConstants.DIRECTION_UP;\n\n/**\n * Retrieves Suggestions element relative to scope\n *\n * @param {Object} scope - Search input field DOM element\n * @return {JQuery} - .suggestions-wrapper element\n */\n function getSuggestionsWrapper(scope) {\n return $(scope).siblings('.suggestions-wrapper');\n}\n\n/**\n * Determines whether DOM element is inside the .search-mobile class\n *\n * @param {Object} scope - DOM element, usually the input.search-field element\n * @return {boolean} - Whether DOM element is inside div.search-mobile\n */\nfunction isMobileSearch(scope) {\n return !!$(scope).closest('.search-mobile').length;\n}\n\n/**\n * Remove modal classes needed for mobile suggestions\n *\n */\nfunction clearModals() {\n $('body').removeClass('modal-open');\n $('header').siblings().attr('aria-hidden', 'false');\n $('.suggestions').removeClass('modal');\n}\n\n/**\n * Apply modal classes needed for mobile suggestions\n *\n * @param {Object} scope - Search input field DOM element\n */\nfunction applyModals(scope) {\n if (module.exports.isMobileSearch(scope)) {\n $('body').addClass('modal-open');\n $('header').siblings().attr('aria-hidden', 'true');\n module.exports.getSuggestionsWrapper(scope).find('.suggestions').addClass('modal');\n }\n}\n\n/**\n * Tear down Suggestions panel\n */\nfunction tearDownSuggestions() {\n $('input.search-field').val('');\n module.exports.clearModals();\n $('.search-mobile .suggestions').unbind('scroll');\n $('.suggestions-wrapper').empty();\n}\n\n/**\n * Toggle search field icon from search to close and vice-versa\n *\n * @param {string} action - Action to toggle to\n */\nfunction toggleSuggestionsIcon(action) {\n var mobileSearchIcon = '.search-mobile button.';\n var iconSearch = 'fa-search';\n var iconSearchClose = 'fa-close';\n\n if (action === 'close') {\n $(mobileSearchIcon + iconSearch).removeClass(iconSearch).addClass(iconSearchClose).attr('type', 'button');\n } else {\n $(mobileSearchIcon + iconSearchClose).removeClass(iconSearchClose).addClass(iconSearch).attr('type', 'submit');\n }\n}\n\n/**\n * Determines whether the \"More Content Below\" icon should be displayed\n *\n * @param {Object} scope - DOM element, usually the input.search-field element\n */\nfunction handleMoreContentBelowIcon(scope) {\n if (($(scope).scrollTop() + $(scope).innerHeight()) >= $(scope)[0].scrollHeight) {\n $('.more-below').fadeOut();\n } else {\n $('.more-below').fadeIn();\n }\n}\n\n/**\n * Positions Suggestions panel on page\n *\n * @param {Object} scope - DOM element, usually the input.search-field element\n */\nfunction positionSuggestions(scope) {\n var outerHeight;\n var $scope;\n var $suggestions;\n var top;\n\n if (module.exports.isMobileSearch(scope)) {\n $scope = $(scope);\n top = $scope.offset().top;\n outerHeight = $scope.outerHeight();\n $suggestions = module.exports.getSuggestionsWrapper(scope).find('.suggestions');\n $suggestions.css('top', top + outerHeight);\n\n module.exports.handleMoreContentBelowIcon(scope);\n\n // Unfortunately, we have to bind this dynamically, as the live scroll event was not\n // properly detecting dynamic suggestions element's scroll event\n $suggestions.scroll(function () {\n module.exports.handleMoreContentBelowIcon(this);\n });\n }\n}\n\n/**\n * Process Ajax response for SearchServices-GetSuggestions\n *\n * @param {Object|string} response - Empty object literal if null response or string with rendered\n * suggestions template contents\n */\nfunction processResponse(response) {\n var $suggestionsWrapper = module.exports.getSuggestionsWrapper(this).empty();\n\n $.spinner().stop();\n\n if (typeof (response) !== 'object') {\n $suggestionsWrapper.append(response).show();\n $(this).siblings('.reset-button').addClass('d-sm-block');\n module.exports.positionSuggestions(this);\n\n if (isMobileSearch(this)) {\n module.exports.toggleSuggestionsIcon('close');\n module.exports.applyModals(this);\n }\n\n // Trigger screen reader by setting aria-describedby with the new suggestion message.\n var suggestionsList = $('.suggestions .item');\n if ($(suggestionsList).length) {\n $('input.search-field').attr('aria-describedby', 'search-result-count');\n } else {\n $('input.search-field').removeAttr('aria-describedby');\n }\n } else {\n $suggestionsWrapper.hide();\n }\n}\n\n/**\n * Retrieve suggestions\n *\n * @param {Object} scope - Search field DOM element\n */\nfunction getSuggestions(scope) {\n if ($(scope).val().length >= minChars) {\n $.spinner().start();\n $.ajax({\n context: scope,\n url: endpoint + encodeURIComponent($(scope).val()),\n method: 'GET',\n success: processResponse,\n error: function () {\n $.spinner().stop();\n }\n });\n } else {\n module.exports.toggleSuggestionsIcon('search');\n $(scope).siblings('.reset-button').removeClass('d-sm-block');\n module.exports.clearModals();\n module.exports.getSuggestionsWrapper(scope).empty();\n }\n}\n\n/**\n * Handle Search Suggestion Keyboard Arrow Keys\n *\n * @param {Integer} direction takes positive or negative number constant, DIRECTION_UP (-1) or DIRECTION_DOWN (+1)\n */\nfunction handleArrow(direction) {\n // get all li elements in the suggestions list\n var suggestionsList = $('.suggestions .item');\n if (suggestionsList.filter('.selected').length === 0) {\n suggestionsList.first().addClass('selected');\n $('input.search-field').each(function () {\n $(this).attr('aria-activedescendant', suggestionsList.first()[0].id);\n });\n } else {\n suggestionsList.each(function (index) {\n var idx = index + direction;\n if ($(this).hasClass('selected')) {\n $(this).removeClass('selected');\n $(this).removeAttr('aria-selected');\n if (suggestionsList.eq(idx).length !== 0) {\n suggestionsList.eq(idx).addClass('selected');\n suggestionsList.eq(idx).attr('aria-selected', true);\n $(this).removeProp('aria-selected');\n $('input.search-field').each(function () {\n $(this).attr('aria-activedescendant', suggestionsList.eq(idx)[0].id);\n });\n } else {\n suggestionsList.first().addClass('selected');\n suggestionsList.first().attr('aria-selected', true);\n $('input.search-field').each(function () {\n $(this).attr('aria-activedescendant', suggestionsList.first()[0].id);\n });\n }\n return false;\n }\n return true;\n });\n }\n}\n\n//Init functions below\n\nfunction simpleSearch () {\n $('form[name=\"simpleSearch\"]').submit(function (e) {\n var suggestionsList = $('.suggestions .item');\n if (suggestionsList.filter('.selected').length !== 0) {\n e.preventDefault();\n suggestionsList.filter('.selected').find('a')[0].click();\n }\n });\n}\n\nfunction searchKeyListener () {\n $('input.search-field').each(function () {\n /**\n * Use debounce to avoid making an Ajax call on every single key press by waiting a few\n * hundred milliseconds before making the request. Without debounce, the user sees the\n * browser blink with every key press.\n */\n var debounceSuggestions = debounce(getSuggestions, 300);\n $(this).on('keyup focus', function (e) {\n // Capture Down/Up Arrow Key Events\n switch (e.which) {\n case DOWN_KEY:\n module.exports.handleArrow(DIRECTION_DOWN);\n e.preventDefault(); // prevent moving the cursor\n break;\n case UP_KEY:\n module.exports.handleArrow(DIRECTION_UP);\n e.preventDefault(); // prevent moving the cursor\n break;\n default:\n debounceSuggestions(this, e);\n }\n });\n });\n}\n\nfunction hideSuggestions () {\n $('body').on('click', function (e) {\n if (!$('.suggestions').has(e.target).length && !$(e.target).hasClass('search-field')) {\n $('.suggestions').hide();\n }\n });\n}\n\nfunction closeOnMobile () {\n $('body').on('click touchend', '.search-mobile button.fa-close', function (e) {\n e.preventDefault();\n $('.suggestions').hide();\n module.exports.toggleSuggestionsIcon('search');\n module.exports.tearDownSuggestions();\n });\n}\n\nfunction resetSearch () {\n $('.site-search .reset-button').on('click', function () {\n $(this).removeClass('d-sm-block');\n });\n}\n\nmodule.exports = {\n getSuggestionsWrapper: getSuggestionsWrapper,\n isMobileSearch: isMobileSearch,\n clearModals: clearModals,\n applyModals: applyModals,\n tearDownSuggestions: tearDownSuggestions,\n toggleSuggestionsIcon: toggleSuggestionsIcon,\n handleMoreContentBelowIcon: handleMoreContentBelowIcon,\n positionSuggestions: positionSuggestions,\n processResponse: processResponse,\n getSuggestions: getSuggestions,\n handleArrow: handleArrow,\n simpleSearch: simpleSearch,\n searchKeyListener: searchKeyListener,\n hideSuggestions: hideSuggestions,\n closeOnMobile: closeOnMobile,\n resetSearch: resetSearch,\n init: function () {\n module.exports.simpleSearch();\n module.exports.searchKeyListener();\n module.exports.hideSuggestions();\n module.exports.closeOnMobile();\n module.exports.resetSearch();\n }\n};\n","'use strict';\n\nvar tinySlider = require('tiny-slider/src/tiny-slider');\nvar zoom = require('jquery-zoom');\nvar imagesLoaded = require('imagesloaded');\nrequire('jquery.scrollintoview');\n\nvar SiteConstants = require('constants/SiteConstants');\nvar mediumBreakpoint = SiteConstants.BreakpointSizes.md;\nvar largeBreakpoint = SiteConstants.BreakpointSizes.lg;\n\nvar abSlider = {};\n\n// Check custom attributes on slider element to get settings, falling back to defaults if not populated\nabSlider.getSliderAttributes = function($slider) {\n var attributes = new Object();\n\n // Autoplay (defaults to false)\n attributes.autoplayDelay = parseInt($slider.attr('data-slider-autoplay'));\n attributes.autoplay = isNaN(attributes.autoplayDelay) ? false : true;\n attributes.autoplayTimeout = attributes.autoplay ? attributes.autoplayDelay : 5000;\n\n // Loop (defaults to true)\n attributes.loop = $slider.attr('data-slider-loop') === 'false' ? false : true;\n\n // Number of items to show (defaults to 1 at all breakpoints)\n attributes.itemsNumber = parseInt($slider.attr('data-slider-items'));\n attributes.items = isNaN(attributes.itemsNumber) ? 1 : attributes.itemsNumber;\n attributes.itemsNumberMedium = parseInt($slider.attr('data-slider-items-md'));\n attributes.itemsMedium = isNaN(attributes.itemsNumberMedium) ? 1 : attributes.itemsNumberMedium;\n attributes.itemsNumberLarge = parseInt($slider.attr('data-slider-items-lg'));\n attributes.itemsLarge = isNaN(attributes.itemsNumberLarge) ? 1 : attributes.itemsNumberLarge;\n\n // Gutter space between items (defaults to 0px)\n attributes.gutter = parseInt($slider.attr('data-slider-gutter')) || 0;\n attributes.gutterMedium = parseInt($slider.attr('data-slider-gutter-md')) || 0;\n attributes.gutterLarge = parseInt($slider.attr('data-slider-gutter-lg')) || 0;\n\n // Slide animation speed (defaults to 300ms)\n attributes.speed = parseInt($slider.attr('data-slider-speed')) || 300;\n\n // Slide animation (defaults to standard Carousel behavior)\n attributes.mode = $slider.attr('data-slider-mode') || 'carousel';\n attributes.animateIn = $slider.attr('data-slider-animatein') || 'no-animation';\n attributes.animateOut = $slider.attr('data-slider-animateout') || 'no-animation';\n\n // Thumbnail settings (defaults to false)\n // If a selector is set for [data-slider-thumbnail container], the rest of the settings populate automatically\n var $thumbnailSlider = $($slider.attr('data-slider-thumbnail-container'));\n attributes.thumbnailContainer = $slider.attr('data-slider-thumbnail-container') || false;\n attributes.navContainer = $thumbnailSlider.length ? $thumbnailSlider.find('.slider')[0] : false;\n attributes.navAsThumbnails = attributes.navContainer === false ? false : true;\n attributes.controlsContainer = $thumbnailSlider.length ? $thumbnailSlider.find('.slider-thumbnail-controls')[0] : false;\n\n return attributes;\n}\n\n// Build parameter object to create a slider\nabSlider.getSliderParams = function($slider, slideItems) {\n var attributes = abSlider.getSliderAttributes($slider);\n var params = {\n container: $slider.find('.slider')[0],\n loop: attributes.loop,\n items: attributes.items,\n autoplay: attributes.autoplay,\n autoplayTimeout: attributes.autoplayTimeout,\n autoplayHoverPause: true,\n mode: attributes.mode,\n gutter: attributes.gutter,\n speed: attributes.speed,\n navContainer: attributes.navContainer,\n navAsThumbnails: attributes.navAsThumbnails,\n controlsContainer: attributes.controlsContainer,\n preventScrollOnTouch: 'auto', // prevents mobile errors in chrome\n responsive: {\n [mediumBreakpoint]: {\n items: attributes.itemsMedium,\n gutter: attributes.gutterMedium,\n },\n [largeBreakpoint]: {\n items: attributes.itemsLarge,\n gutter: attributes.gutterLarge,\n }\n }\n }\n\n if (slideItems) {\n params.slideItems = slideItems;\n }\n\n if (params.mode === 'gallery') {\n params.animateIn = attributes.animateIn;\n params.animateOut = attributes.animateOut;\n }\n\n return params;\n}\n\n// Uses scrollintoview jQuery plugin (needed for IE11 support) to scroll the active thumbnail into view\n// Note: Thumbnail container needs to be scrollable (overflow: auto) for this to work\nabSlider.slideIntoView = function(slider) {\n if (slider.navContainer !== false && $(slider.navContainer).hasClass('slider')) {\n var $activeThumbnail = $(slider.navContainer).find('.tns-nav-active');\n $activeThumbnail.scrollintoview();\n }\n}\n\n// Build out slide html for replacing images on variant selection\nabSlider.getUpdatedSlideItems = function(images, assets, isThumbnail) {\n var slideItems = [];\n\n images['large'].forEach(image => {\n var $slideElement = $('').attr('class', 'slide');\n var $imageElement = $('');\n\n if (!isThumbnail) {\n $slideElement.attr('data-zoom-image', images['hi-res'].length ? images['hi-res'][image.index].url : images['large'][image.index].url);\n }\n\n $imageElement.attr({\n 'src': image.url,\n 'alt': image.alt + ' image number ' + (parseInt(image.index) + 1).toFixed(0),\n 'class': 'd-block img-fluid',\n 'itemprop': 'image'\n });\n\n $slideElement.append($imageElement);\n slideItems.push($slideElement[0]);\n });\n\n abSlider.getPDPGalleryAssetSlides(slideItems, assets, isThumbnail);\n\n return slideItems;\n}\n\n// Fetch any additional slides needed from PDP Gallery Asset IDs attribute\nabSlider.getPDPGalleryAssetSlides = function(slideItems, assets, isThumbnail) {\n let slideCount = slideItems.length;\n let hasVideo = false;\n\n assets.forEach((asset, index) => {\n var $slideElement = $('');\n var $imageElement = $('');\n var $videoButton = $('');\n\n if (asset.isVideo) {\n hasVideo = true;\n }\n\n if (!isThumbnail) {\n $slideElement.attr('class', 'slide no-zoom');\n // ajax call to get html for asset\n $.ajax({\n url: asset.assetRenderUrl,\n method: 'GET',\n success: data => {\n var $sliderContainer = $slideElement.closest('.slider-container');\n $slideElement.html(data);\n\n // after all assets are added, reinit any necessary javascript\n if (index + 1 >= assets.length) {\n $slideElement.trigger('tooltip:init'); // reinit tooltips in case of hotspot asset\n\n if (hasVideo) {\n $('body').trigger('ajax:load.ajaxEvents', [$sliderContainer]); // reinit videos in video/index.js\n $('body').trigger('slider:videosLoaded'); // trigger custom event set up in bindSliderUpdateEvent\n }\n }\n },\n error: err => {\n console.error('There was an issue retrieving this asset: ', err);\n }\n });\n } else {\n $slideElement.attr('class', 'slide video-container');\n $imageElement.attr({\n 'src': asset.thumbnail,\n 'alt': 'image number ' + (slideCount + 1).toFixed(0),\n 'class': 'd-block img-fluid',\n 'itemprop': 'image'\n });\n }\n\n slideCount++;\n $slideElement.append($imageElement);\n\n if (asset.isVideo) {\n $slideElement.append($videoButton);\n }\n\n slideItems.push($slideElement[0]);\n });\n}\n\n// Listen for the slider:update event and reinitialize slider with new slides\nabSlider.bindSliderUpdateEvent = function($sliderContainer, slider) {\n $sliderContainer.off('slider:update').on('slider:update', '.slider', (event, data) => {\n var $updatedSliderContainer = $(event.target).closest('.slider-container');\n var isThumbnail = $updatedSliderContainer.hasClass('slider-thumbnails');\n var updatedSlideItems = data !== undefined ? abSlider.getUpdatedSlideItems(data.images, data.assets, isThumbnail) : null;\n var updatedParams = abSlider.getSliderParams($updatedSliderContainer, updatedSlideItems);\n\n // Update carousel classes to handle number of images changing\n if (isThumbnail) {\n var $thumbnailContainer = $updatedSliderContainer.closest('.primary-images-thumbnails');\n var $mainImageContainer = $thumbnailContainer.prev('.primary-images-main');\n\n if (data.images.small && data.images.small.length > 1) {\n $thumbnailContainer.removeClass('d-none');\n $mainImageContainer.addClass('product-has-thumbnails col-lg-9');\n } else {\n $thumbnailContainer.addClass('d-none');\n $mainImageContainer.removeClass('product-has-thumbnails col-lg-9');\n }\n }\n\n // Remove and re-add slider markup if there are new slides to show\n if (updatedParams.slideItems) {\n var $newSliderElement = $('').attr({\n 'class': 'slider',\n 'id': updatedParams.container.id\n });\n var $newSliderControls = $updatedSliderContainer.find('.slider-thumbnail-controls').addClass('d-none');\n $newSliderElement.html(updatedParams.slideItems);\n $updatedSliderContainer.html($newSliderElement);\n updatedParams.container = $newSliderElement[0];\n\n // If this is a thumbnails slider, also add the arrow controls and update the item count\n if (isThumbnail) {\n $updatedSliderContainer.append($newSliderControls);\n updatedParams.items = updatedParams.slideItems.length;\n updatedParams.responsive[mediumBreakpoint].items = updatedParams.slideItems.length;\n updatedParams.responsive[largeBreakpoint].items = updatedParams.slideItems.length;\n }\n }\n\n // Reinitialize slider using new params\n slider = tinySlider.tns(updatedParams);\n slider.events.on('transitionEnd', abSlider.slideIntoView);\n abSlider.enableImageZoom($updatedSliderContainer);\n\n if (isThumbnail) {\n abSlider.handleThumbnailArrows($updatedSliderContainer, slider);\n } else {\n // listen for videos getting updated from getUpdatedSlideItems function\n $('body').on('slider:videosLoaded', () => {\n abSlider.handleSliderVideos($updatedSliderContainer, slider);\n });\n }\n });\n}\n\n// Listen for the slider:destroy event\nabSlider.bindSliderDestroyEvent = function($sliderContainer, slider) {\n $sliderContainer.off('slider:destroy').on('slider:destroy', '.slider', () => {\n slider.destroy();\n });\n}\n\n// Enables zoomed images using jquery-zoom\nabSlider.enableImageZoom = function($sliderContainer) {\n if ($sliderContainer.closest('.primary-images').length\n && !$sliderContainer.hasClass('slider-thumbnails')\n && !window.isMobile()) {\n var $slides = $sliderContainer.find('.slide');\n $slides.each((index, slide) => {\n var $slide = $(slide);\n\n if (!$slide.hasClass('no-zoom')) {\n var zoomImageUrl = $slide.data('zoom-image') || $slide.find('img').attr('src');\n $slide.zoom({\n url: zoomImageUrl,\n magnify: 1,\n touch: false\n });\n }\n });\n }\n}\n\n// Determine whether to show thumbnail arrows based on overflow state\nabSlider.handleThumbnailArrows = function($sliderContainer, slider) {\n if ($sliderContainer.hasClass('slider-thumbnails')) {\n var $slider = $sliderContainer.find('.slider');\n var $arrows = $sliderContainer.find('.slider-thumbnail-controls');\n var buffer = 5; // adding a buffer to prevent arrows from showing if the last slide is mostly visible\n var containerSize;\n var sliderSize;\n\n $slider.imagesLoaded().done(() => {\n if (window.isMobile()) {\n containerSize = $sliderContainer.outerWidth();\n sliderSize = $slider[0].scrollWidth;\n } else {\n containerSize = $sliderContainer.outerHeight();\n sliderSize = $slider[0].scrollHeight;\n }\n\n if (sliderSize - buffer >= containerSize) {\n $arrows.removeClass('d-none');\n }\n });\n }\n}\n\n// Check for videos and pause them when they're not in the active slide\nabSlider.handleSliderVideos = function($sliderContainer, slider) {\n var $videos = $sliderContainer.find('.hero-media.video-container, .experience-commerce_assets-video>.video-container');\n\n if ($videos.length) {\n slider.events.on('indexChanged', () => {\n $videos.each((_i, element) => {\n var $videoContainer = $(element);\n var videoID = $videoContainer.find('.video-player').attr('id');\n var player = window.Players[videoID];\n\n if (player) {\n if (!$videoContainer.closest('.tns-slide-active').length) {\n player.pause();\n } else if (player.config.autoplay) {\n player.play();\n }\n }\n });\n });\n }\n}\n\n// Handle Pause/Play Button\nabSlider.bindPauseButton = function($sliderContainer, slider) {\n var sliderButtonPlacement = $sliderContainer.attr('data-slider-pause-button-placement');\n\n if ($sliderContainer[0].hasAttribute('data-slider-autoplay') && $sliderContainer.attr('data-slider-autoplay') != 'false' && $sliderContainer[0].hasAttribute('data-slider-pause-button-placement') && $sliderContainer.attr('data-slider-pause-button-placement') != \"none\") {\n if (sliderButtonPlacement == 'with-pagination') {\n $sliderContainer.find('.tns-nav').addClass('with-pagination-btn').append('stop and start slider');\n } else {\n $sliderContainer.prepend('stop and start slider');\n };\n\n $('.tns-nav-controller').addClass(sliderButtonPlacement);\n\n $sliderContainer.on('click', '.tns-nav-controller', function() {\n event.preventDefault();\n $(this).toggleClass('pause');\n $sliderContainer.toggleClass('slider-pause');\n\n if ($sliderContainer.hasClass('slider-pause')) {\n slider.pause();\n } else {\n slider.play();\n }\n });\n }\n};\n\nabSlider.initializeSliders = function($context = $('body')) {\n var scope = this;\n // delay-init is different from replace-content\n var $sliderContainers = $context.find('.slider-container:not(.delay-init)');\n\n $sliderContainers.each((i, slider) => {\n var $sliderContainer = $(slider);\n var params = scope.getSliderParams($sliderContainer);\n var promisegroup = [];\n var $replace = $sliderContainer.find('[data-replace-content]');\n\n $replace.each(function (i, replace) {\n var $target = $(replace);\n var deferment = $target.data('deferment');\n\n if (deferment && !deferment.isResolved && deferment.state() === 'pending') {\n promisegroup.push(deferment);\n }\n });\n\n // Done will also execute if promisegroup is empty []\n $.when.apply($, promisegroup).done(function () {\n scope.applyTinySlider($sliderContainer, params);\n });\n });\n}\n\nabSlider.applyTinySlider = function ($container, params) {\n if (!$container) return;\n\n var tslider = tinySlider.tns(params);\n\n if (!!tslider) {\n tslider.events.on('transitionStart', this.slideIntoView);\n\n this.bindPauseButton($container, tslider);\n this.bindSliderUpdateEvent($container, tslider);\n this.bindSliderDestroyEvent($container, tslider);\n this.enableImageZoom($container);\n this.handleThumbnailArrows($container, tslider);\n this.handleSliderVideos($container, tslider);\n\n $('body').trigger('slider:init.sliderEvents', [$container]);\n }\n\n $container.data('tns', tslider);\n $container.trigger('tooltip:init');\n}\n\nabSlider.initializeQuickviewModalSliders = function() {\n $('body').off('quickview:ready').on('quickview:ready', (event, modal) => {\n abSlider.initializeSliders($(modal));\n });\n}\n\nabSlider.initializeWishlistModalSliders = function() {\n $('body').off('editwishlistproduct:ready').on('editwishlistproduct:ready', (event, modal) => {\n abSlider.initializeSliders($(modal));\n });\n}\n\nabSlider.initializeTargetSliders = function() {\n $('body').off('targetslider:ready').on('targetslider:ready', (event, target) => {\n abSlider.initializeSliders($(target));\n });\n}\n\nabSlider.init = function() {\n abSlider.initializeSliders();\n abSlider.initializeQuickviewModalSliders();\n abSlider.initializeWishlistModalSliders();\n abSlider.initializeTargetSliders();\n}\n\nmodule.exports = abSlider;\n","'use strict';\n\nvar abSlider = require('./slider');\n\nfunction handleTabSliders() {\n var $tabPane = $('.tab-pane');\n var $sliders = $tabPane.find('.slider-container');\n\n $sliders.each((_i, slider) => {\n var $tab = $(slider).closest('.nav-tabs-container').find('a[data-toggle=\"tab\"]');\n $tab.on('shown.bs.tab', event => {\n var scrollTop = $(document).scrollTop();\n var $newTab = $(event.target.hash);\n var $newTabSlider = $newTab.find('.slider-container .slider');\n $newTabSlider.trigger('slider:destroy');\n abSlider.initializeSliders($newTab);\n $(document).scrollTop(scrollTop); // reset to original scroll position\n });\n });\n};\n\nfunction handleTabVideos() {\n var $tabPane = $('.tab-pane');\n var $videos = $tabPane.find('.hero-media.video-container, .background-image.video-container, .experience-commerce_assets-video>.video-container');\n\n if ($videos.length) {\n $('a[data-toggle=\"tab\"]').on('show.bs.tab', event => {\n var $newTab = $(event.target.hash);\n var newTabVideoId = $newTab.find('.video-player').attr('id');\n var videoToPlay = window.Players[newTabVideoId];\n var $oldTab = $(event.relatedTarget.hash);\n var oldTabVideoId = $oldTab.find('.video-player').attr('id');\n var videoToPause = window.Players[oldTabVideoId];\n\n if (videoToPause) {\n videoToPause.pause();\n }\n\n if (videoToPlay) {\n videoToPlay.play();\n }\n });\n }\n};\n\nfunction updateTabOverflowClass($tabsContainer) {\n $tabsContainer.each((_index, tabContainer) => {\n var $navContainer = $(tabContainer).find('.nav');\n var $containerWidth = Math.floor($navContainer.outerWidth());\n var $tabsWidth = 0;\n var $tabs = $navContainer.children();\n\n $(tabContainer).css('--nav-tabs-height', $navContainer.height() + 'px');\n\n $tabs.each((_index, tab) => {\n $tabsWidth += Math.floor($(tab).outerWidth());\n });\n\n if ($tabsWidth > $containerWidth) {\n $(tabContainer).addClass('has-overflow');\n } else {\n $(tabContainer).removeClass('has-overflow');\n }\n });\n}\n\nfunction handleTabOverflow() {\n var $tabsContainer = $('.nav-tabs-container');\n\n if ($tabsContainer.length && $tabsContainer.find('.nav').length) {\n module.exports.methods.updateTabOverflowClass($tabsContainer);\n\n $(window).resize(() => {\n module.exports.methods.updateTabOverflowClass($tabsContainer);\n });\n }\n};\n\nmodule.exports = {\n methods: {\n updateTabOverflowClass: updateTabOverflowClass\n },\n handleTabSliders: handleTabSliders,\n handleTabVideos: handleTabVideos,\n handleTabOverflow: handleTabOverflow\n};\n","'use strict';\n\nfunction show(type, message, dismissible) {\n var dismissibleClass = dismissible ? 'alert-dismissible' : '';\n var indexClass = 'alert-' + $('.toast-messages .alert').length || 0;\n var closeButton = dismissible ? '' : '';\n\n if (!$('.toast-messages').length) {\n $('body').append('');\n }\n\n $('.toast-messages').append(\n '
' + message + closeButton + '
'\n );\n\n // Remove non-dismissible alerts from the DOM after 5 seconds\n setTimeout(function() {\n $('.toast-messages').find('.' + indexClass + ':not(.alert-dismissible)').remove();\n }, 5000);\n \n}\n\nmodule.exports = {\n methods: {\n show: show\n },\n bindToastButtonClicks: function() {\n $('body').on('click', '[data-toast]', function(event) {\n event.preventDefault();\n var $button = $(event.target);\n var type = $button.data('toast');\n var message = $button.data('content');\n var dismissible = $button.data('dismissible') || false;\n\n show(type, message, dismissible);\n });\n }\n};\n","'use strict';\n\nfunction getTooltipTitle() {\n return $(this).find('.tooltip');\n}\n\nfunction enableTooltipsAndPopovers() {\n // Initialize tooltips. This also replaces the SFRA custom tooltip with the Bootstrap one\n // \"trigger\" is set to manual in order to add functionality to allow for tooltip to stay open on hover\n $('[data-toggle=\"tooltip\"], .info-icon').tooltip({\n title: getTooltipTitle,\n trigger: 'manual',\n sanitize: false // prevents removal of inline styles in tooltip content markup\n }).on('mouseenter', buttonEnterEvent => {\n var $button = $(buttonEnterEvent.target).closest('[data-toggle=\"tooltip\"]');\n var showDelay = $button.data('delay') && $button.data('delay').show || 0;\n var hideDelay = $button.data('delay') && $button.data('delay').hide || 0;\n\n setTimeout(() => {\n $button.tooltip('show');\n }, showDelay);\n\n $('body').on('mouseleave', '.tooltip', tooltipLeaveEvent => {\n setTimeout(() => {\n $(tooltipLeaveEvent.target).closest('.tooltip').tooltip('hide');\n }, hideDelay);\n });\n }).on('mouseleave', buttonLeaveEvent => {\n var $button = $(buttonLeaveEvent.target).closest('[data-toggle=\"tooltip\"]');\n var hideDelay = $button.data('delay') && $button.data('delay').hide || 0;\n\n setTimeout(() => {\n if (!$('.tooltip:hover').length) {\n $(buttonLeaveEvent.target).tooltip('hide');\n }\n }, hideDelay);\n });\n\n // Enables Bootstrap Popovers, which rely on the Tooltip library and provide extra functionality\n $('[data-toggle=\"popover\"]:not(.interactive)').popover({\n html: true,\n trigger: 'focus',\n sanitize: false // prevents removal of inline styles in tooltip content markup\n });\n $('[data-toggle=\"popover\"].interactive').popover({\n html: true,\n sanitize: false // prevents removal of inline styles in tooltip content markup\n });\n if ($('[data-toggle=\"popover\"].interactive').length) {\n $(document).mouseup(function(e) {\n if ($('.popover.show').length) {\n var container = $('.popover.show');\n\n // if the target of the click isn't the container nor a descendant of the container\n if (!container.is(e.target) && container.has(e.target).length === 0) {\n $('[data-toggle=\"popover\"].interactive').popover('hide');\n }\n }\n });\n }\n}\n\nmodule.exports = function() {\n enableTooltipsAndPopovers();\n\n $('body').on('tooltip:init', enableTooltipsAndPopovers);\n};\n","'use strict';\n\nconst debounce = require('lodash/debounce');\nconst VideoHelper = require('./videoHelper');\n\nconst PlayerDefaults = {\n autoplay: false,\n controls: true,\n muted: false,\n loop: false,\n modal: false,\n hasThumb: false\n};\n\n/**\n * initDomElements()\n * \n * Saves generalized references to DOM elements needed by the player to operate. \n * \n * player.domElements.$player - div used to init the player API, also holds the configuration data\n * player.domElements.$thumb - thumbnail/preview image that masks the player on screen while not playing\n * player.domElements.$cntr - outer div container used to attach dimensions when needed\n */\nfunction initDomElements() {\n let player = this;\n let $elem = $('#' + player.id);\n \n player.domElements = {\n $player: $elem,\n $thumb: $elem.siblings('.video-thumbnail'),\n $cntr: $elem.closest('.video-container')\n };\n}\n\n/**\n * initConfig()\n * \n * Parses and stores the configuration data attributes set by the content asset.\n * In case of parse error, fallback to this module's PlayerDefaults.\n */\nfunction initConfig() {\n let player = this;\n \n let playerAttrData = {};\n try {\n playerAttrData = JSON.parse(player.domElements.$player.attr('data-player-attr'));\n } catch (ex) {\n playerAttrData = PlayerDefaults;\n }\n\n player.config = {\n autoplay: !!playerAttrData.autoplay,\n controls: !!playerAttrData.controls,\n muted: !!playerAttrData.mute,\n loop: !!playerAttrData.loop,\n hasThumb: playerAttrData.hasThumb,\n modal: !!playerAttrData.modal,\n videoId: player.domElements.$player.attr('data-video-id')\n };\n}\n\n/**\n * createApiPlayer()\n * \n * Create and store the vendor specific API Player.\n * The configurations set in the content asset can be overridden for specific use cases, like turning off autoplay when closing the modal.\n * \n * Also attaches any needed playback events to the player. \n * \n * @param {object} overrides - attributes that can override the defined player.config attributes\n * @returns {Promise} - Vimeo player ready() Promise is returned so we don't make any calls too early\n */\nfunction createApiPlayer(overrides) {\n let player = this;\n let config = player.config;\n\n let onReadyCallback = (e) => {\n if (overrides.onReady) {\n overrides.onReady(e);\n delete overrides['onReady'];\n }\n };\n \n // apply overrides attributes\n if (overrides) {\n config = $.extend({}, player.config, overrides);\n }\n\n player.apiObj = new videojs(player.id, {\n autoplay: config.autoplay,\n playsinline: config.autoplay,\n controls: config.controls,\n loop: config.loop,\n muted: config.muted\n }, onReadyCallback);\n\n player.apiObj.on('pause', () => {\n // save the current location\n player.cache.time = player.apiObj.currentTime();\n });\n\n player.apiObj.on('ended', () => {\n $('body').trigger('video:ended', player);\n });\n}\n\n/**\n * initPageEvents()\n * \n * Initializes any page load event logic for the player. \n */\nfunction initPageEvents() {\n let player = this;\n let $playerContainer = player.domElements.$cntr;\n\n // pause all players at init, before deciding if they should play\n player.pause();\n\n if (player.config.hasThumb) {\n //handle thumbnail click\n player.domElements.$thumb.on('click', event => {\n event.preventDefault();\n\n if (player.config.modal) {\n player.launchModal();\n } else {\n let paused = player.apiObj.paused();\n\n if (!paused) {\n player.pause();\n } else {\n var playPromise = player.domElements.$player[0].play();\n\n if (playPromise !== undefined) {\n playPromise.then(() => {\n player.domElements.$thumb.addClass('faded');\n }).catch(error => {\n console.error('play error:', error);\n });\n }\n }\n }\n });\n }\n\n if (player.domElements.$cntr.closest('.modal').length) {\n $(window).on('resize', debounce(() => player.removeSize(), 100));\n }\n\n if (VideoHelper.shouldPlay($playerContainer) && player.config.autoplay && !player.config.modal) {\n let autoplayPromise = player.domElements.$player[0].play();\n\n if (autoplayPromise !== undefined) {\n player.play();\n }\n }\n\n $(window).on('scrollUpdate', () => {\n if (VideoHelper.shouldPlay($playerContainer)) {\n if (player.config.autoplay && !player.config.modal) {\n let autoplayPromise = player.domElements.$player[0].play();\n\n if (autoplayPromise !== undefined) {\n player.play();\n }\n }\n } else {\n if (!player.apiObj.paused()) {\n player.pause();\n }\n }\n });\n}\n\nmodule.exports = function(playerId) {\n var player = this;\n this.id = playerId;\n this.type = 'hosted';\n this.cache = {};\n \n /**********************************************************\n ** Calls to initialize the player and event listeners **\n **********************************************************/\n \n initDomElements.call(player);\n \n initConfig.call(player);\n\n createApiPlayer.call(player, {onReady: () => initPageEvents.call(player)});\n\n\n /**************************************\n ** Generalized playback functions **\n **************************************/\n \n this.play = () => {\n player.apiObj.play();\n if (player.domElements.$thumb.length && !player.config.modal) {\n player.domElements.$thumb.addClass('faded');\n }\n }\n \n this.pause = () => {\n player.apiObj.pause();\n if (player.domElements.$thumb.length) {\n player.domElements.$thumb.removeClass('faded');\n }\n }\n \n this.mute = () => {\n player.apiObj.getVolume().then((volume) => {\n player.cache.volume = volume;\n });\n \n player.apiObj.setVolume(0);\n };\n \n this.unmute = () => {\n let volume = 1;\n if (player.cachedVolume) {\n volume = player.cache.volume;\n }\n \n player.apiObj.setVolume(volume);\n };\n \n \n /*********************************************************\n ** Functions to support playing the video in a modal **\n *********************************************************/\n \n this.setSize = () => {\n player.domElements.$cntr.css({\n height: player.domElements.$cntr.outerHeight(),\n width: player.domElements.$cntr.outerWidth()\n });\n };\n \n this.removeSize = () => {\n player.domElements.$cntr.css({\n height: 'auto',\n width: 'auto'\n });\n };\n \n this.setModal = (VideoModal) => {\n player.modal = VideoModal;\n };\n \n this.launchModal = () => {\n player.setSize();\n player.modal.launch(player);\n };\n \n \n /*****************************************************\n ** Event Handlers for the modal events **\n *****************************************************/\n \n this.getShowEventHandler = () => {\n let $modal = player.modal.getModalObj();\n let $body = $('.modal-body', $modal).empty().removeClass();\n $body.addClass('modal-body ' + player.domElements.$cntr.attr('class'));\n\n if (player.apiObj && player.apiObj.dispose) {\n var $player = player.domElements.$player;\n\n // create new, uninitialized video element for use in modal\n var $newPlayer = $('', {\n 'data-asset-id': $player.data('asset-id'),\n 'data-video': $player.data('video'),\n 'data-player-attr': JSON.stringify($player.data('player-attr')),\n 'data-video-id': $player.data('video-id'),\n 'class': 'video-player video-js',\n 'id': $player.attr('id')\n });\n\n var $newPlayerSource = $('', {\n 'src': $player.attr('data-video-id'),\n 'type': $player.attr('data-filetype')\n });\n\n // remove old player\n delete player.apiObj;\n videojs($player[0]).dispose();\n\n // add new player and update player properties\n $newPlayer.append($newPlayerSource);\n $body.append($newPlayer);\n player.domElements.$player = $newPlayer;\n player.id = $newPlayer.attr('id');\n }\n\n createApiPlayer.call(player, {\n onReady: (e) => {\n // set the current location if one is saved\n if (player.cache.time) {\n player.apiObj.currentTime(player.cache.time);\n }\n player.play();\n }\n });\n };\n \n this.getHideEventHandler = () => {\n // save the current location\n player.cache.time = player.apiObj.currentTime();\n\n if (videojs.getPlayers()[player.id]) {\n delete videojs.getPlayers()[player.id];\n }\n\n createApiPlayer.call(player, {autoplay: false});\n };\n \n return this;\n}\n","'use strict';\n\nconst YouTube = require('./youtube');\nconst Vimeo = require('./vimeo');\nconst Hosted = require('./hosted');\nconst VideoModal = require('./videoModal');\nconst videojs = require('video.js/dist/video.min.js');\n\nwindow.Players = {};\n\nvar initPlayers = ($context = $('body'), isAjaxEvent = false) => {\n let $ytElements = $context.find('.video-player[data-video=youtube]');\n let $vimeoElements = $context.find('.video-player[data-video=vimeo]');\n let $hostedElements = $context.find('video[data-video=hosted]');\n\n if ($vimeoElements.length) {\n loadVimeoAPI().then(() => {\n $vimeoElements.each((index, element) => {\n // don't create player for videos in sliders until slider has been initialized\n if (!$(element).closest('.slider-container').length\n || $context.is('.slider-container') && $(element).closest($context).length) {\n let playerId = getUniquePlayerId(index, element, isAjaxEvent);\n\n if (!window.Players.hasOwnProperty(playerId) || isAjaxEvent) {\n window.Players[playerId] = new Vimeo(playerId);\n window.Players[playerId].setModal(VideoModal);\n }\n }\n });\n }).catch((err) => {\n if (console && console.error) {\n console.error(err);\n }\n });\n }\n\n if ($ytElements.length) {\n loadYouTubeAPI().then(() => {\n $ytElements.each((index, element) => {\n // don't create player for videos in sliders until slider has been initialized\n if (!$(element).closest('.slider-container').length\n || $context.is('.slider-container') && $(element).closest($context).length) {\n let playerId = getUniquePlayerId(index, element, isAjaxEvent);\n\n if (!window.Players.hasOwnProperty(playerId) || isAjaxEvent) {\n window.Players[playerId] = new YouTube(playerId);\n window.Players[playerId].setModal(VideoModal);\n }\n }\n });\n }).catch((err) => {\n if (console && console.error) {\n console.error(err);\n }\n });\n }\n\n if ($hostedElements.length) {\n window.videojs = videojs;\n\n $hostedElements.each((index, element) => {\n // don't create player for videos in sliders until slider has been initialized\n if (!$(element).closest('.slider-container').length\n || $context.is('.slider-container') && $(element).closest($context).length) {\n let playerId = getUniquePlayerId(index, element, isAjaxEvent);\n\n if (!window.Players.hasOwnProperty(playerId) || isAjaxEvent) {\n window.Players[playerId] = new Hosted(playerId);\n window.Players[playerId].setModal(VideoModal);\n }\n }\n });\n }\n\n if ($vimeoElements.length || $ytElements.length || $hostedElements.length) {\n $('body').on('video:ended', (event, player) => {\n if (player.domElements.$thumb.length) {\n player.domElements.$thumb.removeClass('faded');\n }\n\n // prevent videos from replaying on scroll if they've already finished\n player.config.autoplay = false;\n });\n\n // Reinitialze videos if slider loads, to allow creation of unique IDs\n $('body').off('.sliderEvents').on('slider:init.sliderEvents', (event, $sliderContainer) => {\n initPlayers($sliderContainer);\n });\n\n // Reinitialize videos in case of ajax partial page load\n $('body').off('.ajaxEvents').on('ajax:load.ajaxEvents', (event, $container) => {\n initPlayers($container, true);\n });\n }\n\n // Initialize/reinitialize videos in case of ajax partial page load \n $('body').off('.ajaxEvents').on('ajax:load.ajaxEvents', (event, $container) => {\n initPlayers($container, true);\n });\n}\n\nlet ytPromise = null;\n\nvar loadYouTubeAPI = () => {\n if (ytPromise) {\n return ytPromise;\n }\n\n return ytPromise = new Promise((resolve) => {\n let tag = document.createElement('script');\n tag.src = \"https://www.youtube.com/iframe_api\";\n tag.onerror = () => {\n throw new Error('YouTube iframe API load error');\n };\n\n let firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n window.onYouTubeIframeAPIReady = () => resolve();\n });\n}\n\nvar loadVimeoAPI = () => {\n return new Promise(function(resolve) {\n let tag = document.createElement('script');\n tag.src = \"https://player.vimeo.com/api/player.js\";\n tag.onload = resolve;\n tag.onerror = () => {\n throw new Error('Vimeo player SDK load error');\n };\n\n let firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n });\n}\n\n// handle cases where multiple videos with the same ID exist, like looping sliders\nvar getUniquePlayerId = (index, element, isAjaxEvent) => {\n let playerId = $(element).attr('id');\n\n if (window.Players.hasOwnProperty(playerId) && !isAjaxEvent) {\n playerId = playerId + '-' + index;\n $(element).attr('id', playerId);\n }\n\n return playerId;\n}\n\n/**\n * TODO:\n * - document everything\n * - Youtube API pageload errors\n */\nmodule.exports = () => initPlayers();\n","'use strict';\n\n// Checks if a video player is visible in the viewport\nfunction isPlayerVisible($playerContainer, onlyPlayWhenFullyInView) {\n let fitsInViewport = ($playerContainer.height() - 10) <= $(window).height();\n let pageTop = $(window).scrollTop();\n let pageBottom = pageTop + $(window).height();\n let elementTop = $playerContainer.offset().top;\n let elementBottom = elementTop + $playerContainer.height();\n\n if (onlyPlayWhenFullyInView && fitsInViewport) {\n return ((pageTop <= elementTop) && (pageBottom >= elementBottom));\n } else {\n return ((elementTop <= pageBottom) && (elementBottom >= pageTop));\n }\n}\n\n// Checks if a video player is inside an inactive slide within a slider\nfunction isPlayerInInactiveSlide($playerContainer) {\n return !!$playerContainer.closest('.slider').length\n && !$playerContainer.closest('.tns-slide-active').length\n && !$playerContainer.closest('.hero-button').length;\n}\n\n// Checks if a video player is inside an inactive tab within a tab component\nfunction isPlayerInInactiveTab($playerContainer) {\n return !!$playerContainer.closest('.tab-pane').length\n && !$playerContainer.closest('.tab-pane.active').length;\n}\n\n// Check if a video should be played\nfunction shouldPlay($playerContainer) {\n let onlyPlayWhenFullyInView = $playerContainer.data('play-when-fully-in-view');\n\n return isPlayerVisible($playerContainer, onlyPlayWhenFullyInView) \n && !isPlayerInInactiveSlide($playerContainer)\n && !isPlayerInInactiveTab($playerContainer);\n}\n\n\nmodule.exports = {\n shouldPlay: shouldPlay\n}\n","'use strict';\n\nconst ModalTemplate = `
\n
\n
\n
\n \n \n
\n \n
\n
\n
`;\n\nconst ModalStates = {\n NOT_READY: 0,\n READY: 1,\n OPEN: 2,\n CLOSED: 3\n};\n\nmodule.exports = (() => {\n var myState = ModalStates.NOT_READY;\n var currentVideo = '';\n \n if (!$('#videoModal').length) {\n $(ModalTemplate).appendTo('body');\n myState = ModalStates.READY;\n }\n\n const $modal = $('#videoModal');\n\n return {\n States: ModalStates,\n\n launch: (player) => {\n $modal.detach().appendTo('body'); // keep video modal on top of any other open modals\n\n //test if modal is already in use\n if (myState === ModalStates.OPEN) {\n console.error('Cannot launch' + player.id + ', Modal is already in use for: ' + currentVideo);\n } else {\n $modal.on('show.bs.modal', () => {\n if(typeof player.getShowEventHandler === 'function') {\n player.getShowEventHandler();\n }\n myState = ModalStates.OPEN;\n currentVideo = player.id;\n\n }).on('shown.bs.modal', () => {\n if(typeof player.getShownEventHandler === 'function') {\n player.getShownEventHandler();\n }\n \n }).on('hide.bs.modal', () => {\n if(typeof player.getHideEventHandler === 'function') {\n player.getHideEventHandler();\n }\n myState = ModalStates.CLOSED;\n \n }).on('hidden.bs.modal', () => {\n if(typeof player.getHiddenEventHandler === 'function') {\n player.getHiddenEventHandler();\n }\n \n $modal.modal('dispose');\n }).modal();\n }\n },\n \n setState: (state) => {\n if (ModalStates[state]) {\n myState = state;\n }\n },\n \n getState: () => myState,\n \n is: (state) => (myState === state),\n \n getModalObj: () => $modal\n };\n})();","'use strict';\n\nconst debounce = require('lodash/debounce');\nconst VideoHelper = require('./videoHelper');\n\nconst PlayerDefaults = {\n autoplay: false,\n controls: true,\n muted: false,\n loop: false,\n modal: false,\n hasThumb: false\n};\n\n/**\n * initDomElements()\n *\n * Saves generalized references to DOM elements needed by the player to operate.\n *\n * player.domElements.$player - div used to init the player API, also holds the configuration data\n * player.domElements.$thumb - thumbnail/preview image that masks the player on screen while not playing\n * player.domElements.$cntr - outer div container used to attach dimensions when needed\n */\nfunction initDomElements() {\n let player = this;\n let $elem = $('#' + player.id);\n\n player.domElements = {\n $player: $elem,\n $thumb: $elem.siblings('.video-thumbnail'),\n $cntr: $elem.closest('.video-container')\n };\n}\n\n/**\n * initConfig()\n *\n * Parses and stores the configuration data attributes set by the content asset.\n * In case of parse error, fallback to this module's PlayerDefaults.\n */\nfunction initConfig() {\n let player = this;\n\n let playerAttrData = {};\n try {\n playerAttrData = JSON.parse(player.domElements.$player.attr('data-player-attr'));\n } catch (ex) {\n playerAttrData = PlayerDefaults;\n }\n\n player.config = {\n autoplay: !!playerAttrData.autoplay,\n controls: !!playerAttrData.controls,\n muted: !!playerAttrData.mute,\n loop: !!playerAttrData.loop,\n background: !!playerAttrData.autoplay && !playerAttrData.controls && !!playerAttrData.mute && !!playerAttrData.loop,\n autopause: !(!!playerAttrData.autoplay && !playerAttrData.controls && !!playerAttrData.mute),\n hasThumb: playerAttrData.hasThumb,\n modal: !!playerAttrData.modal,\n videoId: player.domElements.$player.attr('data-video-id')\n };\n}\n\n/**\n * createApiPlayer()\n *\n * Create and store the vendor specific API Player.\n * The configurations set in the content asset can be overridden for specific use cases, like turning off autoplay when closing the modal.\n *\n * Also attaches any needed playback events to the player.\n *\n * @param {object} overrides - attributes that can override the defined player.config attributes\n * @returns {Promise} - Vimeo player ready() Promise is returned so we don't make any calls too early\n */\nfunction createApiPlayer(overrides) {\n let player = this;\n let config = player.config;\n\n // apply overrides attributes\n if (overrides) {\n config = $.extend({}, player.config, overrides);\n }\n\n player.apiObj = new Vimeo.Player(player.id, {\n id: config.videoId,\n autoplay: config.autoplay,\n controls: config.controls,\n loop: config.loop,\n muted: config.muted,\n background: config.background,\n autopause: config.autopause\n });\n\n player.apiObj.on('pause', () => {\n // save the current location\n player.apiObj.getCurrentTime().then((seconds) => {\n player.cache.time = seconds;\n });\n });\n\n player.apiObj.on('ended', () => {\n $('body').trigger('video:ended', player);\n });\n\n return player.apiObj.ready();\n}\n\n/**\n * initPageEvents()\n *\n * Initializes any page load event logic for the player.\n */\nfunction initPageEvents() {\n let player = this;\n let $playerContainer = player.domElements.$player.closest('.video-container');\n\n // pause all players at init, before deciding if they should play\n player.pause();\n\n if (player.config.hasThumb) {\n //handle thumbnail click\n player.domElements.$thumb.on('click', event => {\n event.preventDefault();\n\n if (player.config.modal) {\n player.launchModal();\n } else {\n player.apiObj.getPaused().then(paused => {\n if (!paused) {\n player.pause();\n } else {\n player.play();\n }\n }).catch(error => console.error('error getting paused status:', error));\n }\n });\n }\n\n if (player.domElements.$cntr.closest('.modal').length) {\n $(window).on('resize', debounce(() => player.removeSize(), 100));\n }\n\n if (VideoHelper.shouldPlay($playerContainer) && player.config.autoplay && !player.config.modal) {\n player.play();\n\n // retrigger play method to ensure iOS autoplays\n if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {\n setTimeout(() => {\n player.play();\n }, 500);\n }\n }\n\n $(window).on('scrollUpdate', () => {\n if (VideoHelper.shouldPlay($playerContainer)) {\n if (player.config.autoplay && !player.config.modal) {\n player.apiObj.getPaused().then(paused => {\n if (paused) {\n player.play();\n }\n }).catch(error => console.error('error getting paused status:', error));\n }\n } else {\n player.apiObj.getPaused().then(paused => {\n if (!paused) {\n player.pause();\n }\n }).catch(error => console.error('error getting paused status:', error));\n }\n });\n}\n\nmodule.exports = function(playerId) {\n var player = this;\n this.id = playerId;\n this.type = 'vimeo';\n this.cache = {};\n\n /**********************************************************\n ** Calls to initialize the player and event listeners **\n **********************************************************/\n\n initDomElements.call(player);\n\n initConfig.call(player);\n\n createApiPlayer.call(player).then(() => initPageEvents.call(player));\n\n\n /**************************************\n ** Generalized playback functions **\n **************************************/\n\n this.play = () => {\n player.apiObj.play()\n if (player.domElements.$thumb.length && !player.config.modal) {\n player.domElements.$thumb.addClass('faded');\n }\n };\n\n this.pause = () => {\n player.apiObj.pause();\n if (player.domElements.$thumb.length) {\n player.domElements.$thumb.removeClass('faded');\n }\n }\n\n this.mute = () => {\n player.apiObj.getVolume().then((volume) => {\n player.cache.volume = volume;\n });\n\n player.apiObj.setVolume(0);\n };\n\n this.unmute = () => {\n let volume = 1;\n if (player.cachedVolume) {\n volume = player.cache.volume;\n }\n\n player.apiObj.setVolume(volume);\n };\n\n\n /*********************************************************\n ** Functions to support playing the video in a modal **\n *********************************************************/\n\n this.setSize = () => {\n player.domElements.$cntr.css({\n height: player.domElements.$cntr.outerHeight(),\n width: player.domElements.$cntr.outerWidth()\n });\n };\n\n this.removeSize = () => {\n player.domElements.$cntr.css({\n height: 'auto',\n width: 'auto'\n });\n };\n\n this.setModal = (VideoModal) => {\n player.modal = VideoModal;\n };\n\n this.launchModal = () => {\n player.setSize();\n player.modal.launch(player);\n };\n\n\n /*****************************************************\n ** Event Handlers for the Bootstrap modal events **\n *****************************************************/\n\n this.getShowEventHandler = () => {\n let $modal = player.modal.getModalObj();\n let $body = $('.modal-body', $modal).empty().removeClass();\n $body.addClass('modal-body ' + player.domElements.$cntr.attr('class'));\n player.domElements.$player.appendTo($body);\n\n player.apiObj.destroy().then(() => createApiPlayer.call(player)).then(() => {\n // set the current location if one is saved\n if (player.cache.time) {\n player.apiObj.setCurrentTime(player.cache.time);\n }\n player.play();\n });\n };\n\n this.getHideEventHandler = () => {\n // save the current location\n player.apiObj.getCurrentTime().then((seconds) => {\n player.cache.time = seconds;\n }).then(() => {\n // vimeo doesnt like to be moved around the DOM, and loses all its event listeners\n // so lets destroy and re-init whenever we move it to and from a modal\n player.domElements.$player.prependTo(player.domElements.$cntr);\n\n player.apiObj.destroy().then(() => {\n //create a new api player but dont let it autoplay\n createApiPlayer.call(player, {autoplay: false});\n });\n });\n };\n\n return this;\n}\n","'use strict';\n\nconst debounce = require('lodash/debounce');\nconst VideoHelper = require('./videoHelper');\n\nconst PlayerDefaults = {\n autoplay: 0,\n playsinline: 0,\n controls: 1,\n mute: 0,\n loop: 0,\n modal: false,\n hasThumb: false,\n playlist: ''\n};\n\nconst origin = window.location.protocol + '//' + window.location.host;\n\n/**\n * initDomElements()\n * \n * Saves generalized references to DOM elements needed by the player to operate. \n * \n * player.domElements.$player - div used to init the player API, also holds the configuration data\n * player.domElements.$thumb - thumbnail/preview image that masks the player on screen while not playing\n * player.domElements.$cntr - outer div container used to attach dimensions when needed\n */\nfunction initDomElements() {\n let player = this;\n let $elem = $('#' + player.id);\n \n player.domElements = {\n $player: $elem,\n $thumb: $elem.siblings('.video-thumbnail'),\n $cntr: $elem.closest('.video-container'),\n };\n}\n\n/**\n * initConfig()\n * \n * Parses and stores the configuration data attributes set by the content asset.\n * In case of parse error, fallback to this module's PlayerDefaults.\n */\nfunction initConfig() {\n let player = this;\n \n let playerAttrData = {};\n try {\n playerAttrData = JSON.parse(player.domElements.$player.attr('data-player-attr'));\n } catch (ex) {\n playerAttrData = PlayerDefaults;\n }\n \n let videoId = player.domElements.$player.attr('data-video-id');\n let playlist = playerAttrData.loop === 1 ? videoId : '';\n \n player.config = {\n autoplay: playerAttrData.autoplay,\n playsinline: playerAttrData.autoplay === 1 ? 1 : 0,\n controls: playerAttrData.controls,\n mute: playerAttrData.mute,\n loop: playerAttrData.loop,\n hasThumb: playerAttrData.hasThumb,\n modal: playerAttrData.modal,\n videoId: videoId,\n modestbranding: 1\n };\n if (playlist != '') {\n player.config.playlist = playlist\n } \n}\n\n/**\n * createApiPlayer()\n * \n * Create and store the vendor specific API Player.\n * The configurations set in the content asset can be overridden for specific use cases, like turning off autoplay when closing the modal.\n * \n * Also attaches any needed playback events to the player. \n * \n * @param {object} overrides - attributes that can override the defined player.config attributes\n */\nfunction createApiPlayer(overrides) {\n let player = this;\n let config = player.config;\n\n let onReadyCallback = (e) => {\n commonOnReady.call(player, e);\n\n if (overrides.onReady) {\n overrides.onReady(e);\n delete overrides['onReady'];\n }\n };\n\n // apply overrides attributes\n if (overrides) {\n config = $.extend({}, player.config, overrides);\n }\n\n player.apiObj = new YT.Player(player.id, {\n videoId: config.videoId,\n playerVars: {\n autoplay: config.autoplay,\n playsinline: config.playsinline,\n controls: config.controls,\n mute: config.mute,\n loop: config.loop,\n playlist: config.playlist,\n enablejsapi: 1,\n origin: origin,\n widget_referrer: origin\n },\n host: 'https://www.youtube.com', // prevents 'postMessage' origin mismatch error\n events: {\n onReady: onReadyCallback,\n onStateChange: (e) => {\n if (e.data === YT.PlayerState.PAUSED) {\n // save the current location\n player.cache.time = e.target.getCurrentTime();\n } else if (e.data === YT.PlayerState.PLAYING) {\n // not currently using the on play event, but it's here for future use\n }\n\n if (e.data === 0) {\n $('body').trigger('video:ended', player);\n }\n },\n onError: (e) => {\n if (console && console.error) {\n console.error('onError: ' + e.data);\n }\n }\n }\n });\n}\n\n/**\n * initPageEvents()\n * \n * Initializes any page event logic for the player. \n */\nfunction initPageEvents() {\n let player = this;\n let $playerContainer = player.domElements.$player.closest('.video-container');\n\n // pause all players at init, before deciding if they should play\n player.pause();\n \n // honor the auto mute settings when launching modal\n if (player.config.mute === 1) {\n player.mute();\n } else {\n player.unmute();\n }\n \n if (player.config.hasThumb) {\n //handle thumbnail click\n player.domElements.$thumb.on('click', event => {\n event.preventDefault();\n\n if (player.config.modal) {\n player.launchModal();\n } else {\n let playerState = player.apiObj.getPlayerState();\n let playing = playerState === 1;\n\n if (playing) {\n player.pause();\n } else {\n player.play();\n }\n }\n });\n }\n\n if (player.domElements.$cntr.closest('.modal').length) {\n $(window).on('resize', debounce(() => player.removeSize(), 100));\n }\n\n if (VideoHelper.shouldPlay($playerContainer) && player.config.autoplay && !player.config.modal) {\n player.play();\n }\n\n $(window).on('scrollUpdate', () => {\n let playerState = player.apiObj.getPlayerState();\n let playing = playerState === 1;\n\n if (VideoHelper.shouldPlay($playerContainer)) {\n if (player.config.autoplay && !playing && !player.config.modal) {\n player.play();\n }\n } else if (playing) {\n player.pause();\n }\n });\n}\n\nfunction commonOnReady(e) {\n let player = this;\n\n // update player dom reference\n player.domElements.$player = $('#' + player.id);\n \n // if we have an auto play, auto mute, modal, then honor the config,\n // else let the app maintain the volume state\n if (typeof player.cache.mute !== 'undefined') {\n if (player.cache.mute === 1) {\n e.target.mute();\n } else {\n e.target.unMute();\n }\n\n delete player.cache.mute;\n }\n}\n\n\nmodule.exports = function(playerId) {\n var player = this;\n this.id = playerId;\n this.type = 'youtube';\n this.cache = {};\n \n /**********************************************************\n ** Calls to initialize the player and event listeners **\n **********************************************************/\n \n initDomElements.call(player);\n \n initConfig.call(player);\n \n createApiPlayer.call(player, {onReady: () => initPageEvents.call(player)});\n \n \n /***************************************\n ** Generalized playback functions **\n ***************************************/\n \n this.play = () => {\n player.apiObj.playVideo();\n if (player.domElements.$thumb.length && !player.config.modal) {\n player.domElements.$thumb.addClass('faded');\n }\n }\n \n this.pause = () => {\n player.apiObj.pauseVideo();\n if (player.domElements.$thumb.length) {\n player.domElements.$thumb.removeClass('faded');\n }\n }\n \n this.mute = () => {\n player.apiObj.mute();\n player.cache.mute = 1;\n };\n \n this.unmute = () => {\n player.apiObj.unMute();\n player.cache.mute = 0;\n };\n \n \n /*********************************************************\n ** Functions to support playing the video in a modal **\n *********************************************************/\n \n this.setSize = () => player.domElements.$cntr.css({\n height: player.domElements.$cntr.outerHeight(),\n width: player.domElements.$cntr.outerWidth()\n });\n \n this.removeSize = () => player.domElements.$cntr.css({\n height: 'auto',\n width: 'auto'\n });\n \n this.setModal = (VideoModal) => {\n player.modal = VideoModal;\n };\n \n this.launchModal = () => {\n player.setSize();\n player.modal.launch(player);\n };\n \n \n /*****************************************************\n ** Event Handlers for the Bootstrap modal events **\n *****************************************************/\n \n this.getShowEventHandler = () => {\n // move the video player to the modal body\n let $modal = player.modal.getModalObj();\n let $body = $('.modal-body', $modal).empty().removeClass();\n $body.addClass('modal-body ' + player.domElements.$cntr.attr('class'));\n player.domElements.$player.appendTo($body);\n \n // rebuild the API player to maintain event handlers\n if (player.apiObj && player.apiObj.destroy) {\n player.apiObj.destroy();\n }\n createApiPlayer.call(player, {\n onReady: (e) => {\n // set the current location if one is saved\n if (player.cache.time) {\n player.apiObj.seekTo(player.cache.time, true);\n }\n player.play();\n }\n });\n };\n \n this.getHideEventHandler = () => {\n // save current location\n player.cache.time = player.apiObj.getCurrentTime();\n \n // move the video player from the modal back to its page container\n player.domElements.$player.prependTo(player.domElements.$cntr);\n \n // rebuild the API player to maintain event handlers\n if (player.apiObj && player.apiObj.destroy) {\n player.apiObj.destroy();\n }\n createApiPlayer.call(player, {autoplay: 0});\n };\n \n return this;\n}","\n'use strict';\n\nvar formErrors = require('../checkout/formErrors');\nvar formValidation = require('base/components/formValidation');\nvar cart = require('../cart/cart');\nvar recaptcha = require('../components/recaptcha');\n\n/**\n * shows giftcert toast message\n * @param {string} data - data returned from the server's ajax call\n */\nfunction displayMessage(data, button) {\n $.spinner().stop();\n\n $('.minicart').trigger('count:update', data);\n var status = data.success ? 'alert-success' : 'alert-danger';\n\n if ($('.add-giftcertificate-messages').length === 0) {\n $('body').append('');\n }\n\n $('.add-giftcertificate-messages').append('
' + (data.msg || 'There was an error') + '
');\n\n setTimeout(function () {\n $('.add-giftcertificate-messages').remove();\n if (button) {\n button.removeAttr('disabled');\n }\n }, 5000);\n}\n\nfunction giftCertificateFormSubmission() {\n $('body').on('submit', 'form.GiftCertificateForm', function (e) {\n e.preventDefault();\n\n var form = $(this);\n var isEdit = false;\n var button = form.find('.btn-add-giftcertificate-tocart');\n if (!button || !button.length) {\n button = form.find('.btn-update-giftcertificate-incart');\n isEdit = true;\n } else {\n $('body').trigger('product:beforeAddToCart', this);\n }\n form.parents('.card').spinner().start();\n\n var url = form.attr('action');\n var queryString = form.serialize() + '&format=ajax';\n if (isEdit) {\n queryString += '&uuid=' + button.data('uuid');\n }\n button.attr('disabled', true);\n recaptcha.check(e, {\n url: url,\n method: 'POST',\n dataType: 'json',\n data: queryString,\n success: function (data) {\n if (data.success) {\n if (isEdit) {\n $('#editGiftCertificateLineItemModal').modal('hide');\n cart.updateCartTotals(data.cartModel);\n updateGiftCertificateLineItem(data.cartModel, button.data('uuid'));\n $('body').trigger('cart:update', [data, button.data('uuid')]);\n } else {\n $('body').trigger('product:afterAddToCart', data);\n }\n form.trigger('reset');\n formErrors.clearPreviousErrors(form);\n } else {\n if (data.redirectUrl) {\n window.location.href = data.redirectUrl;\n } else {\n formValidation(form, data);\n }\n }\n\n displayMessage(data, button);\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n }\n displayMessage(err, button);\n }\n });\n })\n};\n\nfunction updateGiftCertificateLineItem(data, uuid) {\n var lineItem;\n for (var i = 0; i < data.items.length; i++) {\n if (data.items[i].UUID === uuid) {\n lineItem = data.items[i];\n break;\n }\n }\n\n if (lineItem) {\n $('.dwfrm_giftCertificate_purchase_from-' + uuid + ' span').html(lineItem.senderName);\n $('.dwfrm_giftCertificate_purchase_from-' + uuid).data('value', lineItem.senderName);\n $('.dwfrm_giftCertificate_purchase_recipient-' + uuid + ' span').html(lineItem.recipientName);\n $('.dwfrm_giftCertificate_purchase_recipient-' + uuid).data('value', lineItem.recipientName);\n $('.dwfrm_giftCertificate_purchase_recipientEmail-' + uuid + ' span').html(lineItem.recipientEmail);\n $('.dwfrm_giftCertificate_purchase_recipientEmail-' + uuid).data('value', lineItem.recipientEmail);\n $('.dwfrm_giftCertificate_purchase_message-' + uuid + ' span').html(lineItem.message || '');\n $('.dwfrm_giftCertificate_purchase_message-' + uuid).attr('title', lineItem.message || '');\n $('.pricing.item-total-' + uuid).html(lineItem.priceTotal.price);\n $('.pricing.item-total-' + uuid).data('value', lineItem.priceTotal.priceValue + '');\n }\n}\n\nfunction checkBalanceFormSubmission() {\n $('body').on('submit', 'form.check-balance', function (e) {\n e.preventDefault();\n\n var form = $(this);\n form.spinner().start();\n\n var button = form.find('.js-checkbalancebutton');\n var url = form.attr('action');\n var queryString = form.serialize() + '&format=ajax';\n button.attr('disabled', true);\n\n //because the error is not an html5 error typically (balance is 0 or does not exist)\n //we must clear the previous error + message manually\n formErrors.clearPreviousErrors(form);\n recaptcha.check(e, {\n url: url,\n method: 'POST',\n dataType: 'json',\n data: queryString,\n success: function (data) {\n if (data.success) {\n form.find('.balancemsg').html(data.balance);\n } else {\n form.find('.balancemsg').html('');\n formValidation(form, data);\n if (data.msg) {\n displayMessage(data, button);\n }\n }\n\n $.spinner().stop();\n button.removeAttr('disabled');\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n }\n displayMessage(err, button);\n }\n });\n });\n}\n\nfunction applyGiftCertificateToBasket () {\n $('body').on('click', '.giftcertificate-information .js-applybalancebutton', function (e) {\n e.preventDefault();\n\n var button = $(this);\n button.attr('disabled', true);\n var container = button.parents('.giftcertificate-information');\n var checkoutForm = button.parents('form');\n\n container.spinner().start();\n\n var url = button.data('action');\n\n //because the error is not an html5 error typically (balance is 0 or does not exist)\n //we must clear the previous error + message manually\n formErrors.clearPreviousErrors(container);\n recaptcha.check(e, {\n url: url,\n method: 'POST',\n data: checkoutForm.serialize() + '&format=ajax',\n success: function (data) {\n if (data.success) {\n displayMessage(data, button);\n $('.js-giftcertificatepaymentinstruments').html(data.template);\n\n $('body').trigger('checkout:updateCheckoutViewPaymentInformation', { order: data.order });\n } else {\n if (data.redirectUrl) {\n window.location.href = data.redirectUrl;\n } else {\n container.find('.js-balancemsg').html('');\n formValidation(container, data);\n if (data.msg) {\n displayMessage(data, button);\n }\n }\n }\n\n $.spinner().stop();\n button.removeAttr('disabled');\n },\n error: function (err) {\n if (err.responseJSON.redirectUrl) {\n window.location.href = err.responseJSON.redirectUrl;\n }\n displayMessage(err, button);\n }\n });\n\n })\n}\n\nfunction removeGiftCertificatePaymentInstrument() {\n $('body').on('click', '.js-remove-giftcertificate-pi', function (e) {\n e.preventDefault();\n\n var button = $(this);\n button.attr('disabled', true);\n\n var container = button.parents('.giftcertificate-information');\n container.spinner().start();\n\n var url = button.data('action');\n var giftCertificateCode = button.data('giftcertificatecode');\n $.ajax({\n url: url,\n method: 'POST',\n dataType: 'json',\n data: '&giftCertificateCode=' + giftCertificateCode,\n success: function (data) {\n if (data.success) {\n $('.js-giftcertificatepaymentinstruments').html(data.template);\n\n $('body').trigger('checkout:updateCheckoutViewPaymentInformation', { order: data.order });\n }\n\n $.spinner().stop();\n displayMessage(data, button);\n },\n error: function (err) {\n displayMessage(err, button);\n }\n });\n });\n}\n\nmodule.exports = {\n displayMessage: displayMessage,\n giftCertificateFormSubmission: giftCertificateFormSubmission,\n updateGiftCertificateLineItem: updateGiftCertificateLineItem,\n checkBalanceFormSubmission: checkBalanceFormSubmission,\n applyGiftCertificateToBasket: applyGiftCertificateToBasket,\n removeGiftCertificatePaymentInstrument: removeGiftCertificatePaymentInstrument,\n init: function () {\n module.exports.giftCertificateFormSubmission();\n module.exports.checkBalanceFormSubmission();\n module.exports.applyGiftCertificateToBasket();\n module.exports.removeGiftCertificatePaymentInstrument();\n }\n};\n","'use strict';\n\n/**\n * This client-side js file just acts as a wrapper for the site preference config toggles\n * that are outputted by Controller: Integrations-OutputIntegrationsConfig\n */\n\nfunction getIntegrationSettings() {\n if (window && window.CachedData && window.CachedData.siteIntegrations) {\n return window.CachedData.siteIntegrations;\n }\n return {};\n}\n\nmodule.exports = {\n getIntegrationSettings : getIntegrationSettings\n};\n","var SiteConstants = require('constants/SiteConstants');\n\nwindow.jQuery = window.$ = require('jquery');\nwindow.isMobile = () => $(window).outerWidth() < SiteConstants.BreakpointSizes.lg;\n\nvar processInclude = require('base/util');\n\n/**\n * A list of base Files, leave these in order they are listed\n */\nvar baseFiles = {\n menu: require('./components/menu'),\n cookie: require('base/components/cookie'),\n consentTracking: require('./components/consentTracking'),\n footer: require('./components/footer'),\n miniCart: require('./components/miniCart'),\n collapsibleItem: require('./components/collapsibleItem'),\n search: require('./components/search').init,\n clientSideValidation: require('./components/clientSideValidation'),\n countrySelector: require('./components/countrySelector'),\n header: require('./components/header'),\n tabs: require('./components/tabs'),\n toast: require('./components/toast'),\n toolTip: require('./components/toolTip'),\n video: require('./components/video'),\n tile: require('./product/tile'),\n base: require('./product/base'),\n quickView: require('./product/quickView'),\n productTile: require('./components/productTile'),\n giftCertificate: require('./giftCertificate/giftCertificate').init,\n modal: require('./components/modal').init,\n slider: require('./components/slider').init,\n einsteinRecs: require('./components/einsteinRecs').init,\n wishlist: require('./wishlist/wishlist').init,\n cart: require('./cart'),\n scroll: require('./utilities/scroll'),\n headerUtils: require('./utilities/headerUtils'),\n pageDesigner: require('./pageDesigner')\n // storeLocator: require('./storeLocator/storeLocator') /** commenting out store locator so AB updates dont breack Citizen Map Custom Features */\n};\n\n$(document).ready(() => {\n Object.keys(baseFiles).forEach(function (key) {\n processInclude(baseFiles[key]);\n });\n});\n\nrequire('./thirdParty/bootstrap');\nrequire('focus-visible/dist/focus-visible.min.js');\nrequire('base/components/spinner');\n\nmodule.exports = {\n baseFiles\n};\n","'use strict';\n\nmodule.exports = function() {\n\n // Move modal from button to body to prevent overflow issues, eliminating any duplicates\n if ($('.button.has-modal').length > 0) {\n $('.button.has-modal').each((index, button) => {\n var $modal = $(button).find('.modal');\n\n if (!$('body > #' + $modal.attr('id')).length > 0) {\n $(button).find('.modal').appendTo('body');\n } else {\n $modal.remove();\n }\n });\n }\n\n};\n","'use strict';\n\nmodule.exports = function() {\n\n // add class to sliders containing animated hero banners\n if ($('.slider').find('.hero-text[data-animation]')) {\n var heroAnimationSliders = $('.slider').find('.hero-text[data-animation]').closest('.slider-container');\n \n for (var i = 0; i < heroAnimationSliders.length; i++) {\n heroAnimationSliders[i].classList.add('hero-has-animation');\n }\n }\n\n // if hero background video is set to play once, hide when finished and show replay button\n $('body').on('video:ended', (event, player) => {\n var $playerContainer = player.domElements.$cntr;\n \n if ($playerContainer.hasClass('hero-media') && $playerContainer.data('play-once') === true) {\n var $replayButton = $playerContainer.next('.replay-video');\n $playerContainer.addClass('video-stopped');\n\n $replayButton.click(event => {\n $playerContainer.removeClass('video-stopped');\n player.config.autoplay = true;\n if (player.type === 'youtube') {\n player.apiObj.seekTo(0);\n }\n if (player.type === 'hosted') {\n player.apiObj.currentTime(0);\n }\n if (player.type === 'vimeo') {\n player.apiObj.setCurrentTime(0);\n }\n player.play();\n });\n }\n });\n\n};\n","'use strict';\n\nconst Button = require('./button');\nconst Hero = require('./hero');\n\nfunction checkIfVisible($element, context) {\n var pageTop = $(window).scrollTop();\n var pageBottom = pageTop + $(window).height();\n var elementHeight = $element.height();\n var elementTop = $element.offset().top;\n var elementBottom = elementTop + elementHeight;\n\n // on ititial load if animated element is already in or above viewable area, animate immediately\n if (context === 'initialPageLoad' && elementTop <= pageBottom) {\n return true;\n }\n\n if (context === 'reset') {\n // element is above fold\n return (elementTop <= pageBottom);\n } else {\n // any portion of element is in viewport\n return ((elementTop <= pageBottom) && (elementBottom >= pageTop));\n }\n}\n\nfunction animateIfVisible($elements, context) {\n $elements.each((index, element) => {\n var $element = $(element);\n var animationClass = $element.data('animation');\n var isVisible = checkIfVisible($element, context);\n\n if (isVisible) {\n $element.removeClass('animation-initial-state').addClass(animationClass);\n }\n });\n}\n\nfunction resetAnimationElement($elements) {\n $elements.each((index, element) => {\n var $element = $(element);\n var shouldReset = !$element.data('animation-play-once');\n\n if (shouldReset) {\n var animationClass = $element.data('animation');\n var isVisible = checkIfVisible($element, 'reset');\n\n if (!isVisible) {\n $element.removeClass(animationClass).addClass('animation-initial-state');\n void element.offsetWidth; // allows animation to retrigger\n }\n }\n });\n}\n\nfunction initScrollEvents() {\n\n // trigger animations when animated component is scrolled to\n var $animationElements = $('[data-animation]');\n\n if ($animationElements.length) {\n animateIfVisible($animationElements, 'initialPageLoad');\n\n window.addEventListener('scrollUpdate', event => {\n var direction = event.detail.direction;\n\n if (direction === 'down') {\n animateIfVisible($animationElements, null);\n }\n\n if (direction === 'up') {\n resetAnimationElement($animationElements);\n }\n });\n }\n\n};\n\n\nmodule.exports = {\n initScrollEvents: initScrollEvents,\n button: Button,\n hero: Hero\n};\n","'use strict';\n\n/**\n * This client-side js file just acts as a wrapper for the site preferences\n * that are outputted by AB Controller: Data-CachedData\n */\n\nfunction getSitePreferences() {\n if (window && window.CachedData && window.CachedData.sitePreferences) {\n return window.CachedData.sitePreferences;\n }\n return {};\n}\n\nmodule.exports = {\n getSitePreferences : getSitePreferences\n};\n","'use strict';\nvar focusHelper = require('base/components/focus');\nvar abSlider = require('core/components/slider');\nvar siteIntegrations = require('../integrations/siteIntegrationsUtils');\nvar toggleObject = siteIntegrations.getIntegrationSettings();\nvar productListEnhancementsHelpers = require('../productListEnhancements/helpers.js');\n\n/**\n * Retrieves the relevant pid value\n * @param {jquery} $el - DOM container for a given add to cart button\n * @return {string} - value to be used when adding product to cart\n */\nfunction getPidValue($el) {\n var pid;\n\n if ($('#quickViewModal').hasClass('show') && !$('.product-set').length) {\n pid = $($el).closest('.modal-content').find('.product-quickview').data('pid');\n } else if ($('.product-set-detail').length || $('.product-set').length) {\n pid = $($el).closest('.product-detail').find('.product-id').text();\n } else if (($el).hasClass('single-variant-quick-add-to-cart')) {\n pid = $($el).data('pid');\n } else if (($el).parents('.popover').length) {\n pid = $($el).closest('.product-detail.product-quick-add-to-cart').data('pid');\n } else {\n pid = $('.product-detail:not(\".bundle-item\")').data('pid');\n }\n\n return pid;\n}\n\n/**\n * Retrieve contextual quantity selector\n * @param {jquery} $el - DOM container for the relevant quantity\n * @return {jquery} - quantity selector DOM container\n */\nfunction getQuantitySelector($el) {\n var quantitySelected;\n if ($el && $('.set-items').length) {\n quantitySelected = $($el).closest('.product-detail').find('.quantity-select');\n } else if ($el && $('.product-bundle').length) {\n var quantitySelectedModal = $($el).closest('.modal-footer').find('.quantity-select');\n var quantitySelectedPDP = $($el).closest('.bundle-footer').find('.quantity-select');\n if (quantitySelectedModal.val() === undefined) {\n quantitySelected = quantitySelectedPDP;\n } else {\n quantitySelected = quantitySelectedModal;\n }\n } else {\n quantitySelected = $('.quantity-select');\n }\n return quantitySelected;\n}\n\n/**\n * Retrieves the value associated with the Quantity pull-down menu\n * @param {jquery} $el - DOM container for the relevant quantity\n * @return {string} - value found in the quantity input\n */\nfunction getQuantitySelected($el) {\n return this.getQuantitySelector($el).val();\n}\n\n/**\n * Process the attribute values for an attribute that has image swatches\n *\n * @param {Object} attr - Attribute\n * @param {string} attr.id - Attribute ID\n * @param {Object[]} attr.values - Array of attribute value objects\n * @param {string} attr.values.value - Attribute coded value\n * @param {string} attr.values.url - URL to de/select an attribute value of the product\n * @param {boolean} attr.values.isSelectable - Flag as to whether an attribute value can be\n * selected. If there is no variant that corresponds to a specific combination of attribute\n * values, an attribute may be disabled in the Product Detail Page\n * @param {jQuery} $productContainer - DOM container for a given product\n * @param {Object} msgs - object containing resource messages\n */\nfunction processSwatchValues(attr, $productContainer, msgs) {\n if (attr.attributeId == 'color') {\n $productContainer.find('.color-display-value').text(attr.displayValue || '');\n };\n\n if (attr.attributeId == 'size') {\n $productContainer.find('[data-attr=\"size\"]').find('.non-color-display-value').text(attr.displayValue || '');\n };\n\n attr.values.forEach(function (attrValue) {\n var $attrValue = $productContainer.find('[data-attr=\"' + attr.id + '\"] [data-attr-value=\"' + attrValue.value + '\"]');\n\n var $swatchButton = $attrValue.parent('button');\n\n if (attrValue.selected) {\n $attrValue.addClass('selected');\n $attrValue.siblings('.selected-assistive-text').text(msgs.assistiveSelectedText);\n $attrValue.attr('selected', 'selected');\n } else {\n $attrValue.removeClass('selected');\n $attrValue.siblings('.selected-assistive-text').empty();\n $attrValue.removeAttr('selected');\n }\n\n if (attrValue.url) {\n $swatchButton.attr('data-url', attrValue.url);\n } else {\n $swatchButton.removeAttr('data-url');\n }\n\n // Disable if not selectable\n $attrValue.removeClass('selectable unselectable available unavailable out-of-stock');\n\n $attrValue.addClass(attrValue.selectable ? 'selectable' : 'unselectable');\n $attrValue.addClass(attrValue.available ? 'available' : toggleObject.viewOutOfStockItems ? 'out-of-stock' : 'unavailable');\n\n $attrValue.attr('value', attrValue.url).removeAttr('disabled');\n if (!attrValue.selectable) {\n $attrValue.attr('disabled', true);\n }\n });\n}\n\n/**\n * Check to see if the attribute button element can be clicked\n *\n * @param {Object} $attributeButtonElement - Attribute element button\n */\nfunction checkForClickableAttribute($attributeButtonElement) {\n return ($attributeButtonElement.attr('disabled') || $attributeButtonElement.data('url') === null || $attributeButtonElement.find('.unselectable').length || $attributeButtonElement.find('.selected').length);\n}\n\n\n/**\n * Process attribute values associated with an attribute that does not have image swatches\n *\n * @param {Object} attr - Attribute\n * @param {string} attr.id - Attribute ID\n * @param {Object[]} attr.values - Array of attribute value objects\n * @param {string} attr.values.value - Attribute coded value\n * @param {string} attr.values.url - URL to de/select an attribute value of the product\n * @param {boolean} attr.values.isSelectable - Flag as to whether an attribute value can be\n * selected. If there is no variant that corresponds to a specific combination of attribute\n * values, an attribute may be disabled in the Product Detail Page\n * @param {jQuery} $productContainer - DOM container for a given product\n */\nfunction processNonSwatchValues(attr, $productContainer, msgs) {\n var viewOutOfStockItems = window.CachedData.siteIntegrations.viewOutOfStockItems;\n var $attr = '.custom-select[data-attr=\"' + attr.id + '\"]';\n var $defaultOption = $productContainer.find($attr + '.select-' + attr.id + ' option:first-child');\n $defaultOption.attr('value', attr.resetUrl).attr('disabled', true);\n\n attr.values.forEach(function (attrValue) {\n var $attrValue = $productContainer.find($attr + ' [data-attr-value=\"' + attrValue.value + '\"]');\n $attrValue.attr('value', attrValue.url).removeAttr('disabled');\n var currentSelectedOption = $productContainer.find($attr + '.select-' + attr.id + ' option:selected').eq(0);\n\n if (!viewOutOfStockItems && (!attrValue.selectable || !attrValue.available)) {\n if (!attrValue.selectable) {\n $attrValue.attr('disabled', true);\n }\n //check if selected value is now unavailable, if so select the default option\n if (currentSelectedOption.data('attr-value') == attrValue.value) {\n $attrValue.removeAttr('selected');\n $($attr).prop('selectedIndex', 0);\n }\n // append a msg to option to tell user its not available with selected options\n $attrValue.html(attrValue.displayValue + msgs.unavailableMsg);\n } else {\n $attrValue.html(attrValue.displayValue);\n if (currentSelectedOption.text() == attrValue.displayValue) {\n $(currentSelectedOption).attr('selected', 'selected');\n $productContainer.find($attr).prop('selectedIndex', $(currentSelectedOption).index());\n }\n }\n });\n}\n\n/**\n * Routes the handling of attribute processing depending on whether the attribute has image\n * swatches or not\n *\n * @param {Object} attrs - Attribute\n * @param {string} attr.id - Attribute ID\n * @param {jQuery} $productContainer - DOM element for a given product\n * @param {Object} msgs - object containing resource messages\n */\nfunction updateAttrs(attrs, $productContainer, msgs) {\n var methods = this;\n\n //Get the available swatchable attribute array ['color','size'] (currently defined as a site pref, and added as a data attribute to the product container element\n var attrsWithSwatches = $productContainer.data('swatchable-attributes');\n\n attrs.forEach(function (attr) {\n if (attrsWithSwatches && attrsWithSwatches.indexOf(attr.attributeId) > -1) {\n methods.processSwatchValues(attr, $productContainer, msgs);\n } else {\n methods.processNonSwatchValues(attr, $productContainer, msgs);\n }\n });\n}\n\n/**\n * Updates the availability status in the Product Detail Page\n *\n * @param {Object} response - Ajax response object after an\n * attribute value has been [de]selected\n * @param {jQuery} $productContainer - DOM element for a given product\n */\nfunction updateAvailabilityProcess(response, $productContainer) {\n var availabilityValue = '';\n var availabilityMessages = response.product.availability.messages;\n if (!response.product.readyToOrder) {\n availabilityValue = '
';\n });\n }\n });\n\n return html;\n}\n\n/**\n * @typedef UpdatedOptionValue\n * @type Object\n * @property {string} id - Option value ID for look up\n * @property {string} url - Updated option value selection URL\n */\n\n/**\n * @typedef OptionSelectionResponse\n * @type Object\n * @property {string} priceHtml - Updated price HTML code\n * @property {Object} options - Updated Options\n * @property {string} options.id - Option ID\n * @property {UpdatedOptionValue[]} options.values - Option values\n */\n\n/**\n * Updates DOM using post-option selection Ajax response\n *\n * @param {OptionSelectionResponse} optionsHtml - Ajax response optionsHtml from selecting a product option\n * @param {jQuery} $productContainer - DOM element for current product\n */\nfunction updateOptions(optionsHtml, $productContainer) {\n\t// Update options\n $productContainer.find('.product-options').empty().html(optionsHtml);\n}\n\n/**\n * Updates slider for PDP main images and thumbnails from response containing images\n * @param {Object[]} imgs - Array of large product images,along with related information\n * @param {jQuery} $productContainer - DOM element for a given product\n */\nfunction createSlider(images, assets, $productContainer) {\n var $sliderContainers = $productContainer.find('.slider-container');\n var data = images !== null ? {images} : null;\n data.assets = assets || null;\n\n // Reversing order in which to update sliders so that thumbnails get initialized first\n $($sliderContainers.get().reverse()).each((index, sliderContainer) => {\n var $slider = $(sliderContainer).find('.slider');\n $slider.trigger('slider:update', data);\n });\n}\n\n/**\n * Parses JSON from Ajax call made whenever an attribute value is [de]selected\n * @param {Object} response - response from Ajax call\n * @param {Object} response.product - Product object\n * @param {string} response.product.id - Product ID\n * @param {Object[]} response.product.variationAttributes - Product attributes\n * @param {Object[]} response.product.images - Product images\n * @param {boolean} response.product.hasRequiredAttrsSelected - Flag as to whether all required\n * attributes have been selected. Used partially to\n * determine whether the Add to Cart button can be enabled\n * @param {jQuery} $productContainer - DOM element for a given product.\n */\nfunction handleVariantResponse(response, $productContainer) {\n var isChoiceOfBonusProducts = $productContainer.parents('.choose-bonus-product-dialog').length > 0;\n var isVariant;\n var isSetItem = $productContainer.hasClass('product-set-item-detail') ? true : false;\n\n if (response.product.variationAttributes) {\n this.updateAttrs(response.product.variationAttributes, $productContainer, response.resources);\n isVariant = response.product.productType === 'variant';\n if (isChoiceOfBonusProducts && isVariant) {\n $productContainer.parent('.bonus-product-item').data('pid', response.product.id);\n $productContainer.parent('.bonus-product-item').data('ready-to-order', response.product.readyToOrder);\n }\n }\n\n // Update primary images\n var primaryImages = response.product.images;\n var pdpGalleryAssets = response.product.pdpGalleryAssets;\n var $oldWishlistIcon = $productContainer.find('div.slide .product-list-enhancements-toggle-product').first().clone(true);\n\n this.createSlider(primaryImages, pdpGalleryAssets, $productContainer);\n // if variant is a product set item, update the sample image\n if (isSetItem) {\n $productContainer\n .find('.product-set-item-main-image')\n .attr('src', primaryImages.large[0].url)\n .attr('alt', primaryImages.large[0].alt);\n }\n\n // Update pricing\n if (!isChoiceOfBonusProducts) {\n var $priceSelector = $('.prices .price', $productContainer).length\n ? $('.prices .price', $productContainer)\n : $('.prices .price');\n $priceSelector.replaceWith(response.product.price.html);\n }\n\n // Update promotions\n $productContainer.find('.promotions').empty().html(response.product.promotionsHtml);\n\n this.updateAvailabilityProcess(response, $productContainer);\n\n if (isChoiceOfBonusProducts) {\n var $selectButton = $productContainer.find('.select-bonus-product');\n $selectButton.trigger('bonusproduct:updateSelectButton', {\n product: response.product, $productContainer: $productContainer\n });\n } else {\n // Enable \"Add to Cart\" button if all required attributes have been selected\n $('button.add-to-cart, button.add-to-cart-global, button.update-cart-product-global').trigger('product:updateAddToCart', {\n product: response.product, $productContainer: $productContainer\n }).trigger('product:statusUpdate', response.product);\n }\n\n // Update attributes\n $productContainer.find('.main-attributes').empty().html(this.getAttributesHtml(response.product.attributes));\n\n // Update wishlist\n if ($oldWishlistIcon && $oldWishlistIcon.length) {\n var $newWishlistIcon = $oldWishlistIcon;\n $newWishlistIcon.attr('data-wishlistpid', response.product.wishlistpid);\n\n //Make heart icon accurate\n var wishlist = require('../productListEnhancements/helpers.js');\n wishlist.updateLinkData($newWishlistIcon);\n\n var $newSliderMainImages = $productContainer.find('div.primary-images-main div.slide img');\n $newSliderMainImages.each((_i, newImage) => {\n var $newImage = $(newImage);\n $newImage.after($newWishlistIcon.clone(true));\n });\n }\n}\n\n/**\n * @typespec UpdatedQuantity\n * @type Object\n * @property {boolean} selected - Whether the quantity has been selected\n * @property {string} value - The number of products to purchase\n * @property {string} url - Compiled URL that specifies variation attributes, product ID, options,\n * etc.\n */\n\n/**\n * Updates the quantity DOM elements post Ajax call\n * @param {UpdatedQuantity[]} quantities -\n * @param {jQuery} $productContainer - DOM container for a given product\n */\nfunction updateQuantities(quantities, $productContainer) {\n if ($productContainer.parent('.bonus-product-item').length <= 0) {\n var optionsHtml = quantities.map(function (quantity) {\n var selected = quantity.selected ? ' selected ' : '';\n return '';\n }).join('');\n this.getQuantitySelector($productContainer).empty().html(optionsHtml);\n }\n}\n\n/**\n * updates the product view when a product attribute is selected or deselected or when\n * changing quantity\n * @param {string} selectedValueUrl - the Url for the selected variation value\n * @param {jQuery} $productContainer - DOM element for current product\n */\nfunction attributeSelect(selectedValueUrl, $productContainer) {\n var methods = this;\n\n if (selectedValueUrl) {\n $('body').trigger('product:beforeAttributeSelect',\n { url: selectedValueUrl, container: $productContainer });\n\n $.ajax({\n url: selectedValueUrl,\n method: 'GET',\n success: function (data) {\n methods.handleVariantResponse(data, $productContainer);\n methods.updateOptions(data.product.optionsHtml, $productContainer);\n methods.updateQuantities(data.product.quantities, $productContainer);\n $('body').trigger('product:afterAttributeSelect',\n { data: data, container: $productContainer });\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n }\n}\n\n/**\n * Retrieves url to use when adding a product to the cart\n *\n * @return {string} - The provided URL to use when adding a product to the cart\n */\nfunction getAddToCartUrl($productContainer) {\n return $productContainer.find('.add-to-cart-url').val();\n}\n\n/**\n * Parses the html for a modal window\n * @param {string} html - representing the body and footer of the modal window\n *\n * @return {Object} - Object with properties body and footer.\n */\nfunction parseHtml(html) {\n var $html = $('
').append($.parseHTML(html));\n var body = $html.find('.choice-of-bonus-product');\n var footer = $html.find('.modal-footer').children();\n\n return { body: body, footer: footer };\n}\n\n/**\n * Retrieves url to use when adding a product to the cart\n *\n * @param {Object} data - data object used to fill in dynamic portions of the html\n */\nfunction chooseBonusProducts(data) {\n var methods = this;\n\n $('.modal-body').spinner().start();\n\n if ($('#chooseBonusProductModal').length !== 0) {\n $('#chooseBonusProductModal').remove();\n }\n var bonusUrl;\n if (data.bonusChoiceRuleBased) {\n bonusUrl = data.showProductsUrlRuleBased;\n } else {\n bonusUrl = data.showProductsUrlListBased;\n }\n\n var htmlString = ''\n + '
';\n $('body').append(htmlString);\n $('.modal-body').spinner().start();\n\n $.ajax({\n url: bonusUrl,\n method: 'GET',\n dataType: 'json',\n success: function (response) {\n var parsedHtml = methods.parseHtml(response.renderedTemplate);\n $('#chooseBonusProductModal .modal-body').empty();\n $('#chooseBonusProductModal .enter-message').text(response.enterDialogMessage);\n $('#chooseBonusProductModal .modal-header .close .sr-only').text(response.closeButtonText);\n $('#chooseBonusProductModal .modal-body').html(parsedHtml.body);\n $('#chooseBonusProductModal .modal-footer').html(parsedHtml.footer);\n $('#chooseBonusProductModal').modal('show');\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n}\n\n/**\n * Updates the Mini-Cart quantity value after the customer has pressed the \"Add to Cart\" button\n * @param {string} response - ajax response from clicking the add to cart button\n */\nfunction handlePostCartAdd(response) {\n // conditional added for response, sometimes it was failing when called on page load\n if (response) {\n $('.minicart').trigger('count:update', response);\n var messageType = response.error ? 'alert-danger' : 'alert-success';\n // show add to cart toast\n if (response.newBonusDiscountLineItem\n && Object.keys(response.newBonusDiscountLineItem).length !== 0) {\n this.chooseBonusProducts(response.newBonusDiscountLineItem);\n } else {\n if ($('.add-to-cart-messages').length === 0) {\n $('body').append(\n ''\n );\n }\n\n $('.add-to-cart-messages').append(\n '
'\n + response.message\n + '
'\n );\n\n setTimeout(function () {\n $('.add-to-basket-alert').remove();\n }, 5000);\n }\n }\n}\n\n/**\n * Retrieves the bundle product item ID's for the Controller to replace bundle master product\n * items with their selected variants\n *\n * @return {string[]} - List of selected bundle product item ID's\n */\nfunction getChildProducts() {\n var childProducts = [];\n $('.bundle-item').each(function () {\n childProducts.push({\n pid: $(this).find('.product-id').text(),\n quantity: parseInt($(this).find('label.quantity').data('quantity'), 10)\n });\n });\n\n return childProducts.length ? JSON.stringify(childProducts) : [];\n}\n\n/**\n * Retrieve product options\n *\n * @param {jQuery} $productContainer - DOM element for current product\n * @return {string} - Product options and their selected values\n */\nfunction getOptions($productContainer) {\n var options = $productContainer\n .find('.product-option')\n .map(function () {\n var $elOption = $(this).find('.options-select');\n var urlValue = $elOption.val();\n var selectedValueId = $elOption.find('option[value=\"' + urlValue + '\"]')\n .data('value-id');\n return {\n optionId: $(this).data('option-id'),\n selectedValueId: selectedValueId\n };\n }).toArray();\n\n return JSON.stringify(options);\n}\n\n/**\n * Makes a call to the server to report the event of adding an item to the cart\n *\n * @param {string | boolean} url - a string representing the end point to hit so that the event can be recorded, or false\n */\nfunction miniCartReportingUrl(url) {\n if (url) {\n $.ajax({\n url: url,\n method: 'GET',\n success: function () {\n // reporting urls hit on the server\n },\n error: function () {\n // no reporting urls hit on the server\n }\n });\n }\n}\n\nfunction enableQuantitySteppers($context = $('body')) {\n var scope = this;\n var $steppers = $context.find('.quantity-stepper');\n if ($steppers.length) {\n $steppers.each((index, stepper) => {\n var $stepper = $(stepper);\n scope.methods.updateQuantityStepperDisabledStates($stepper);\n scope.methods.bindQuantityStepperButtons($stepper);\n scope.methods.bindQuantityStepperInput($stepper);\n });\n }\n}\n\nfunction updateQuantityStepperDisabledStates($stepper) {\n var min = parseInt($stepper.attr('data-min'));\n var max = parseInt($stepper.attr('data-max'));\n var $input = $stepper.find('input');\n var $minusButton = $stepper.find('[data-action=\"decrease\"]');\n var $plusButton = $stepper.find('[data-action=\"increase\"]');\n var value = !isNaN(parseInt($input.prop('data-qty'))) ? parseInt($input.prop('data-qty')) : parseInt($input.attr('data-qty'));\n\n if (value <= min) {\n $minusButton.addClass('disabled');\n } else {\n $minusButton.removeClass('disabled');\n }\n\n if (value >= max) {\n $plusButton.addClass('disabled');\n } else {\n $plusButton.removeClass('disabled');\n }\n}\n\nfunction bindQuantityStepperButtons($stepper) {\n var methods = this;\n var $select = $stepper.prev('select');\n var min = parseInt($stepper.data('min'));\n var max = parseInt($stepper.data('max'));\n\n $stepper.find('button').off('click').click(event => {\n var $button = $(event.target);\n var action = $button.data('action');\n var previousValue = parseInt($stepper.find('input').val());\n var newValue = previousValue;\n\n if (action === 'increase' && (previousValue + 1 <= max)) {\n newValue++;\n }\n if (action === 'decrease' && (previousValue - 1 >= min)) {\n newValue--;\n }\n if (newValue !== previousValue) {\n $select.find('option[value=\"' + newValue + '\"]').prop('selected', true).change();\n $stepper.find('input').prop('value', newValue).prop('data-qty', newValue);\n methods.updateQuantityStepperDisabledStates($stepper);\n $('body').trigger('quantityStepper:change', $stepper);\n }\n });\n}\n\nfunction bindQuantityStepperInput($stepper) {\n var methods = this;\n\n var $select = $stepper.prev('select');\n var min = parseInt($stepper.data('min'));\n var max = parseInt($stepper.data('max'));\n\n $stepper.find('input').off('change').change(event => {\n var $input = $(event.target);\n var previousValue = !isNaN(parseInt($input.prop('data-qty'))) ? parseInt($input.prop('data-qty')) : parseInt($input.attr('data-qty'));\n var newValue = parseInt($input.val());\n\n if (!isNaN(newValue) && newValue <= max && newValue >= min) {\n $select.find('option[value=\"' + newValue + '\"]').prop('selected', true).change();\n $input.prop('value', newValue).prop('data-qty', newValue);\n methods.updateQuantityStepperDisabledStates($stepper);\n $('body').trigger('quantityStepper:change', $stepper);\n } else {\n $input.prop('value', previousValue);\n }\n });\n}\n\n/**\n * Preselect Single Swatches if only one variant available and it is a swatch\n *\n * @param {object} $productContainer - DOM element holding attributes\n * @return {array} - The swatch elements that need to be selected - in this case it's just one\n*/\nfunction preselectSingleSwatchesInContainer(containerSelector = 'body') {\n var swatches = [];\n if ($(containerSelector) && $(containerSelector).length > 0) {\n var attributes = $(containerSelector).find('.attribute');\n $.each(attributes, function () {\n var disSwatch = $(this).find('.swatch');\n if (disSwatch.length == 1) {\n var firstswatch = $(disSwatch[0]);\n // If the single swatch is already preselected do not add it to the list to be selected (i.e. going straight to a variation's pdp)\n if (!firstswatch.find('span.selectable').hasClass('selected')) {\n swatches.push(firstswatch);\n }\n //If we want to hide the attribute selection completely when there is only one choice\n //disSwatch.parents('.attribute').addClass('visually-hidden');\n }\n });\n this.methods.selectSwatch(swatches);\n }\n}\n\n/**\n * Select Swatches takes an array of swatch dom elements that need to be preselected\n *\n * @param {array} The swatch elements that need to be selected\n*/\nfunction selectSwatch(swatches) {\n var methods = this;\n\n if (swatches.length > 0) {\n // This splice removes the first swatch element from the array, and stores it in the \"swatch\" variable\n var swatch = swatches.splice(0,1)[0];\n\n if ($('.product-bundle').length) {\n var $productContainer = $('.bundle-main-product').length ? $(swatch).closest('.bundle-main-product') : $(swatch).closest('.product-bundle');\n } else {\n var $productContainer = $(swatch).closest('.set-item');\n }\n\n if (!$productContainer.length) {\n $productContainer = $(swatch).closest('.product-detail');\n }\n\n $productContainer.find('.color-display-value').text($(swatch).data('displayvalue'));\n\n // This call triggers the selection of the current swatch element, and sends the new array to be passed back to this function afterward.\n methods.attributeSelect($(swatch).attr('data-url'), $productContainer, function() {\n methods.selectSwatch(swatches);\n });\n }\n}\n\nfunction updateProductListEnhancementsButtons() {\n var $oldProductListEnhancementsIcon;\n\n $('body')\n .on('product:beforeAttributeSelect', function(e, attrData) {\n $oldProductListEnhancementsIcon = attrData.container.find('div.slide .product-list-enhancements-toggle-product').first().clone(true);\n })\n .on('product:afterAttributeSelect', function(e, attrData) {\n if ($oldProductListEnhancementsIcon && $oldProductListEnhancementsIcon.length) {\n var $newProductListEnhancementsIcon = $oldProductListEnhancementsIcon;\n var $newSliderMainImages = attrData.container.find('div.primary-images-main div.slide img');\n\n $newProductListEnhancementsIcon.attr('data-wishlistpid', attrData.wishlistpid);\n productListEnhancementsHelpers.updateLinkData($newProductListEnhancementsIcon);\n\n $newSliderMainImages.each((_i, newImage) => {\n var $newImage = $(newImage);\n\n $newImage.after($newProductListEnhancementsIcon.clone(true));\n });\n }\n });\n}\n\nmodule.exports = {\n methods: {\n attributeSelect: attributeSelect,\n bindQuantityStepperButtons: bindQuantityStepperButtons,\n bindQuantityStepperInput: bindQuantityStepperInput,\n checkForClickableAttribute: checkForClickableAttribute,\n chooseBonusProducts: chooseBonusProducts,\n createSlider: createSlider,\n getAddToCartUrl: getAddToCartUrl,\n getAttributesHtml: getAttributesHtml,\n getChildProducts: getChildProducts,\n getOptions: getOptions,\n getPidValue: getPidValue,\n getQuantitySelected: getQuantitySelected,\n getQuantitySelector: getQuantitySelector,\n handlePostCartAdd: handlePostCartAdd,\n handleVariantResponse: handleVariantResponse,\n miniCartReportingUrl: miniCartReportingUrl,\n parseHtml: parseHtml,\n processNonSwatchValues: processNonSwatchValues,\n processSwatchValues: processSwatchValues,\n selectSwatch: selectSwatch,\n updateAttrs: updateAttrs,\n updateAvailabilityProcess: updateAvailabilityProcess,\n updateOptions: updateOptions,\n updateQuantities: updateQuantities,\n updateQuantityStepperDisabledStates: updateQuantityStepperDisabledStates,\n updateProductListEnhancementsButtons: updateProductListEnhancementsButtons\n },\n\n /**********\n * shared across QV and PDP\n */\n addToCart: function () {\n var scope = this;\n\n // if qty stepper input has focus, we need to blur it so product data can update before button click\n $(document).on('mouseenter', 'button.add-to-cart, button.add-to-cart-global', function (event) {\n var $button = $(event.target);\n var $container = $button.closest('.product-detail');\n if (!$container.length) {\n $container = $button.closest('.quick-view-dialog');\n }\n var $qtyStepperInput = $container.find('.quantity-stepper input');\n\n if ($qtyStepperInput.length && $qtyStepperInput.is(':focus')) {\n $qtyStepperInput.blur();\n }\n });\n\n $(document).on('click', 'button.add-to-cart, button.add-to-cart-global', function (event) {\n var addToCartUrl;\n var pid;\n var pidsObj;\n var setPids;\n var quantity;\n\n $('body').trigger('product:beforeAddToCart', this);\n\n if ($('.set-items').length && $(this).hasClass('add-to-cart-global')) {\n setPids = [];\n\n var $products = $(this).closest('.product-detail').find('.product-set-item-detail');\n if (!$products.length) {\n if ($(this).closest('.quick-view-dialog').length) {\n $products = $(this).closest('.quick-view-dialog').find('.product-set-item-detail');\n } else {\n $products = $('.product-detail'); // pagedesigner component 'Add all to cart btn' won't have .product-set-item-detail classes\n }\n }\n\n $products.each(function () {\n if (!$(this).hasClass('product-set-detail')) {\n setPids.push({\n pid: $(this).find('.product-id').text(),\n qty: $(this).find('.quantity-select').val(),\n options: scope.methods.getOptions($(this))\n });\n }\n });\n pidsObj = JSON.stringify(setPids);\n }\n\n pid = scope.methods.getPidValue($(this));\n\n quantity = $(this).hasClass('single-variant-quick-add-to-cart') ? 1 : scope.methods.getQuantitySelected($(this));\n\n var $productContainer = $(this).closest('.product-detail');\n if (!$productContainer.length) {\n if ($(this).hasClass('single-variant-quick-add-to-cart')) {\n addToCartUrl = $(this).data('url');\n } else {\n $productContainer = $(this).closest('.quick-view-dialog').find('.product-detail');\n var $productModalbody = $(this).closest('.modal-content');\n addToCartUrl = scope.methods.getAddToCartUrl($productModalbody);\n }\n } else {\n addToCartUrl = scope.methods.getAddToCartUrl($productContainer);\n }\n\n var form = {\n pid: pid,\n pidsObj: pidsObj,\n childProducts: scope.methods.getChildProducts(),\n quantity: quantity,\n options: scope.methods.getOptions($productContainer)\n };\n\n $(this).trigger('updateAddToCartFormData', form);\n if (addToCartUrl) {\n $.ajax({\n url: addToCartUrl,\n method: 'POST',\n data: form,\n success: function (data) {\n scope.methods.handlePostCartAdd(data);\n $('body').trigger('product:afterAddToCart', data);\n $('body').trigger('product:afterAddToCartQuickview', data); //cart page quickview only\n $.spinner().stop();\n scope.methods.miniCartReportingUrl(data.reportingURL);\n },\n error: function () {\n $.spinner().stop();\n }\n });\n }\n });\n },\n quickAddToCart: function () {\n $('body').on('product:singleSelectQuickAddToCart', function (e, response) {\n var addToCartUrl = getAddToCartUrl(response.container);\n\n var form = {\n pid: response.data.product.id,\n quantity: 1\n };\n\n $(response.container).trigger('updateAddToCartFormData', form);\n if (addToCartUrl) {\n $.ajax({\n url: addToCartUrl,\n method: 'POST',\n data: form,\n success: function (data) {\n handlePostCartAdd(data);\n $('body').trigger('product:afterAddToCart', data);\n $.spinner().stop();\n miniCartReportingUrl(data.reportingURL);\n },\n error: function () {\n $.spinner().stop();\n }\n });\n }\n });\n },\n updateAvailability: function () {\n $('body').on('product:updateAvailability', function (e, response) {\n var $productContainer = response.$productContainer;\n // bundle individual products\n $productContainer.find('.product-availability')\n .data('ready-to-order', response.product.readyToOrder)\n .data('available', response.product.available)\n .find('.availability-msg')\n .empty()\n .html(response.message);\n //Quickview\n var $dialog = $productContainer.closest('.quick-view-dialog');\n if ($dialog.length){\n if ($dialog.find('.product-availability').length) {\n // bundle all products\n var allAvailable = $dialog.find('.product-availability').toArray()\n .every(function (item) { return $(item).data('available'); });\n\n var allReady = $dialog.find('.product-availability').toArray()\n .every(function (item) { return $(item).data('ready-to-order'); });\n\n $dialog.find('.global-availability')\n .data('ready-to-order', allReady)\n .data('available', allAvailable);\n\n $dialog.find('.global-availability .availability-msg').empty()\n .html(allReady ? response.message : response.resources.info_selectforstock);\n } else {\n // single product\n $dialog.find('.global-availability')\n .data('ready-to-order', response.product.readyToOrder)\n .data('available', response.product.available)\n .find('.availability-msg')\n .empty()\n .html(response.message);\n }\n //main PDP\n } else {\n if ($productContainer.find('.global-availability').length) {\n var allAvailable = $productContainer.find('.product-availability').toArray()\n .every(function (item) { return $(item).data('available'); });\n\n var allReady = $productContainer.find('.product-availability').toArray()\n .every(function (item) { return $(item).data('ready-to-order'); });\n\n $productContainer.find('.global-availability')\n .data('ready-to-order', allReady)\n .data('available', allAvailable);\n\n $productContainer.find('.global-availability .availability-msg').empty()\n .html(allReady ? response.message : response.resources.info_selectforstock);\n }\n }\n });\n },\n availability: function () {\n var scope = this;\n\n $(document).on('change', '.quantity-select', function (e) {\n e.preventDefault();\n\n var $productContainer = $(this).closest('.product-detail');\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.modal-content').find('.product-quickview');\n }\n\n if ($('.bundle-items', $productContainer).length === 0) {\n scope.methods.attributeSelect($(e.currentTarget).find('option:selected').data('url'),\n $productContainer);\n }\n });\n },\n updateSetItemsAvailability: function () {\n var scope = this;\n\n $(document).on('change', '.product-set-quantity-select', function (e) {\n e.preventDefault();\n\n var $productContainer = $(this).closest('.product-set-detail').find('.set-items');\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.modal-content').find('.set-items');\n }\n var $quantitySelected = $(e.currentTarget).find('option:selected').val();\n\n $productContainer.find('.product-set-item-detail').each(function () {\n var $setItemQuantity = $(this).find('.quantity-select');\n var qtyStepper = $(this).find('.quantity-stepper');\n $setItemQuantity.val($quantitySelected).find('option').each(function () {\n if (this.value == $quantitySelected) {\n $(this).prop('selected','selected');\n $setItemQuantity.change();\n if (qtyStepper.length) {\n qtyStepper.find('input').val($quantitySelected).attr('data-qty',$quantitySelected);\n scope.methods.updateQuantityStepperDisabledStates(qtyStepper);\n }\n return false;\n }\n })\n });\n });\n },\n updateAddToCart: function () {\n $('body').on('product:updateAddToCart', function (e, response) {\n var $productContainer = response.$productContainer;\n // update local add to cart (for sets)\n $productContainer.find('button.add-to-cart').attr('disabled',\n (!response.product.readyToOrder || !response.product.available));\n // update global add to cart (single products, bundles)\n var $dialog = $(response.$productContainer).closest('.quick-view-dialog');\n if ($dialog.length){\n $dialog.find('.add-to-cart-global, .update-cart-product-global').attr('disabled',\n !$dialog.find('.global-availability').data('ready-to-order')\n || !$dialog.find('.global-availability').data('available')\n );\n } else {\n var enable = $productContainer.find('.product-availability').toArray().every(function (item) {\n return $(item).data('available') && $(item).data('ready-to-order');\n });\n $productContainer.find('button.add-to-cart-global').attr('disabled', !enable);\n }\n });\n },\n updateAttribute: function() {\n $('body').on('product:afterAttributeSelect', function (e, response) {\n response.container.find('#sizeChartModal').attr('data-product', response.data.product.id);\n\n //Quickview\n if ($('.modal.show .product-quickview>.bundle-items').length) {\n $('.modal.show').find(response.container).data('pid', response.data.product.id);\n $('.modal.show').find(response.container).find('.product-id').text(response.data.product.id);\n } else if ($('.set-items').length) {\n response.container.find('.product-id').text(response.data.product.id);\n } else if ($('.modal.show .product-quickview').length) {\n $('.modal.show .product-quickview').data('pid', response.data.product.id);\n $('.modal.show .full-pdp-link').attr('href', response.data.product.selectedProductUrl);\n $('.modal.show').find(response.container).find('.product-id').text(response.data.product.id);\n //Main PDP\n } else if ($('.product-detail>.bundle-items').length) {\n response.container.data('pid', response.data.product.id);\n response.container.find('.product-id').text(response.data.product.id);\n } else if ($('.product-set-detail').eq(0)) {\n response.container.data('pid', response.data.product.id);\n response.container.find('.product-id').text(response.data.product.id);\n response.container.find('.add-to-cart').data('pid', response.data.product.id);\n } else {\n $('.product-detail .add-to-cart').data('pid', response.data.product.id);\n $('.product-id').text(response.data.product.id);\n $('.product-detail:not(\".bundle-item\")').data('pid', response.data.product.id);\n }\n });\n },\n quickViewLoaded: function() {\n var scope = this;\n $(document).on('quickview:ready', 'body', (event, modal) => {\n scope.enableQuantitySteppers($(modal));\n });\n },\n miniCartLoaded: function() {\n var scope = this;\n $('body').on('minicart:loaded', (event, minicart) => {\n scope.enableQuantitySteppers($(minicart));\n });\n },\n preselectSingleSwatchesInContainer: preselectSingleSwatchesInContainer,\n //Attributes that display as non-color swatches\n nonColorAttribute: function () {\n var scope = this;\n\n $(document).on('click', 'button.swatch:not(.color-attribute)', function (e) {\n e.preventDefault();\n\n $('body').trigger('product:swatchClicked', [$(this), toggleObject]); // add trigger for any attribute click use (incl. nonClickable Attrs)\n if (scope.methods.checkForClickableAttribute($(this)) && !toggleObject.viewOutOfStockItems) {\n return;\n }\n\n if ($('.product-bundle').length) {\n var $productContainer = $('.bundle-main-product').length ? $(this).closest('.bundle-main-product') : $(this).closest('.product-bundle');\n } else {\n var $productContainer = $(this).closest('.set-item');\n }\n\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.product-detail');\n }\n\n scope.methods.attributeSelect($(this).attr('data-url'), $productContainer);\n\n $(this).closest('.non-color-attribute-swatches').find('.non-color-display-value').text($(this).find('.swatch-value').data('display-value'));\n });\n },\n //Attributes that display in a select dropdown (default)\n selectAttribute: function () {\n var scope = this;\n $(document).on('change', 'select[class*=\"select-\"], .options-select', function (e) {\n e.preventDefault();\n\n if ($('.product-bundle').length) {\n var $productContainer = $('.bundle-main-product').length ? $(this).closest('.bundle-main-product') : $(this).closest('.product-bundle');\n } else {\n var $productContainer = $(this).closest('.set-item');\n }\n\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.product-detail');\n }\n scope.methods.attributeSelect(e.currentTarget.value, $productContainer);\n });\n },\n //Attributes that display as color swatches\n colorAttribute: function () {\n var scope = this;\n\n $(document).on('click', '[data-attr=\"color\"] button', function (e) {\n e.preventDefault();\n\n $('body').trigger('product:swatchClicked', [$(this), toggleObject]); // add trigger for any attribute click use (incl. nonClickable Attrs)\n if (scope.methods.checkForClickableAttribute($(this)) && !toggleObject.viewOutOfStockItems) {\n return;\n }\n\n if ($('.product-bundle').length) {\n var $productContainer = $('.bundle-main-product').length ? $(this).closest('.bundle-main-product') : $(this).closest('.product-bundle');\n } else {\n var $productContainer = $(this).closest('.set-item');\n }\n\n if (!$productContainer.length) {\n $productContainer = $(this).closest('.product-detail');\n }\n scope.methods.attributeSelect($(this).attr('data-url'), $productContainer);\n\n $productContainer.find('.color-display-value').text($(this).find('.swatch').data('displayvalue'));\n });\n },\n enableQuantitySteppers: enableQuantitySteppers,\n\n sizeChart: function() {\n $('body').on('click', '.size-chart .size-chart-launcher', event => {\n event.preventDefault();\n var url = $(event.target).attr('href');\n var productId = $(event.target).closest('.product-detail').find('.product-id').html();\n var $sizeChartModal = $('.modal[data-product=' + productId + ']');\n var $modalBody = $sizeChartModal.find('.modal-body');\n\n $.ajax({\n url: url,\n type: 'get',\n dataType: 'html',\n success: function (data) {\n $modalBody.html(data);\n }\n });\n\n //if the sizechart is from a quickview append after all the modal-backdrops\n if ($(event.target).parents('.product-quickview').length) {\n var $sizeChartContainer = $(event.target).closest('.size-chart');\n\n $sizeChartModal.appendTo('body');\n $sizeChartModal.on('hide.bs.modal', event => {\n $sizeChartModal.appendTo($sizeChartContainer);\n });\n }\n $sizeChartModal.modal('show');\n });\n\n $('body').on('click', '#sizeChartModal .close', event => {\n $(event.target).closest('#sizeChartModal').modal('hide');\n });\n },\n\n /**********\n * from cart\n */\n bonusProductEdit: function() {\n var scope = this;\n\n $('body').on('bonusproduct:edit', (event, data) => {\n scope.methods.chooseBonusProducts(data);\n });\n },\n removeBonusProduct: function () {\n $(document).on('click', '.selected-pid .remove-bonus-product', event => {\n $(event.target).closest('.selected-pid').remove();\n var $selected = $('#chooseBonusProductModal .selected-bonus-products .selected-pid');\n var count = 0;\n if ($selected.length) {\n $selected.each(function () {\n count += parseInt($(this).data('qty'), 10);\n });\n }\n\n $('.pre-cart-products').html(count);\n $('.selected-bonus-products .bonus-summary').removeClass('alert-danger');\n $('body').trigger('modal:loaded', $('#chooseBonusProductModal')); // update quickview modal scroll height\n });\n },\n selectBonusProduct: function () {\n $(document).on('click', '.select-bonus-product', function () {\n var $choiceOfBonusProduct = $(this).parents('.choice-of-bonus-product');\n var pid = $(this).data('pid');\n var maxPids = $('.choose-bonus-product-dialog').data('total-qty');\n var submittedQty = parseInt($choiceOfBonusProduct.find('.bonus-quantity-select').val(), 10);\n var totalQty = 0;\n $.each($('#chooseBonusProductModal .selected-bonus-products .selected-pid'), function () {\n totalQty += $(this).data('qty');\n });\n totalQty += submittedQty;\n var optionID = $choiceOfBonusProduct.find('.product-option').data('option-id');\n var valueId = $choiceOfBonusProduct.find('.options-select option:selected').data('valueId');\n if (totalQty <= maxPids) {\n var selectedBonusProductHtml = ''\n + '