;\n productType: string;\n product: string;\n\n constructor(materialBankElement) {\n this.el = document.querySelector(materialBankElement);\n }\n\n /**\n * Init app\n * @returns false if app element not found\n */\n public init() {\n if (!this.el) {\n return;\n }\n\n this.list = this.el.querySelector('.' + this.jsList);\n this.template = this.el.querySelector('.' + this.jsTemplate);\n this.productTypeSelect = this.el.querySelector('.' + this.jsProductTypeSelect);\n this.productSelect = this.el.querySelector('.' + this.jsProductSelect);\n this.typeButtons = this.el.querySelectorAll('.' + this.jsTypeButtons + ' button');\n this.params = {};\n this.url = new URLSearchParams(new URL(this.location).search);\n\n if (this.list && this.template) {\n this.activateApp();\n }\n }\n\n /**\n * Activate app (launch element listeners for buttons and selects and render app)\n */\n private activateApp() {\n this.params = {\n type: (this.url.get('type') ? this.url.get('type').split(',') : []),\n productType: this.url.get('productType') || this.productType,\n product: this.url.get('product') || this.product,\n 'stage-language': document.querySelector('html').getAttribute('lang')\n }\n this.elementListeners();\n this.render(this.getResults());\n }\n\n /**\n * Set listeners for specific elements\n */\n private elementListeners() {\n this.productTypeSelect.addEventListener('change', (e) => {\n this.params.productType = e.currentTarget.value;\n this.getResults();\n });\n this.productSelect.addEventListener('change', (e) => {\n this.params.product = e.currentTarget.value;\n this.getResults();\n });\n this.typeButtons.forEach((button) => {\n const value = button.getAttribute('data-value');\n this.refreshButtons();\n button.addEventListener('click', (e) => {\n if (value === 'copy') {\n navigator.clipboard.writeText(window.location.href);\n } else if (value === 'all') {\n this.params.type = [];\n this.getResults();\n } else {\n if (this.params.type.includes(value)) {\n this.params.type = this.params.type.filter(item => item !== value);\n } else {\n this.params.type.push(value);\n }\n this.getResults();\n }\n this.refreshButtons();\n });\n });\n this.params.productType ? this.productTypeSelect.value = this.params.productType : [];\n this.params.product ? this.productSelect.value = this.params.product : [];\n }\n\n /**\n * Refresh state of buttons\n */\n private refreshButtons() {\n this.typeButtons.forEach((button) => {\n const value = button.getAttribute('data-value');\n button.classList.remove('button--dark-blue', 'button--gray', 'button--text-blue');\n if (this.params.type.length > 0) {\n if (this.params.type.includes(value)) {\n button.classList.add('button--dark-blue');\n } else {\n button.classList.add('button--gray', 'button--text-blue');\n }\n } else {\n if (value === 'all') {\n button.classList.add('button--dark-blue');\n } else {\n button.classList.add('button--gray', 'button--text-blue');\n }\n }\n });\n }\n\n /**\n * Get materials from endpoint (stage-ajax)\n * @returns array of items from endpoint\n */\n private getResults() {\n this.params.type = this.params.type === 'all' ? null : this.params.type;\n for (const [key, value] of Object.entries(this.params)) {\n !value ? delete this.params[key] : [];\n }\n this.updateURL()\n return this.render(Movax.xhr.get(this.ajaxEndpoint, this.params));\n }\n\n /**\n * Render results to page\n * @param items array of items (materials)\n */\n private async render(items) {\n const result = await items;\n\n if (result) {\n let html = '';\n for (const [key, value] of Object.entries(result)) {\n html += Mustache.render(this.template.innerHTML, {\n ... result[key],\n heading: result[key].name,\n items: result[key].materials.map(material => {\n material.iconHtml = '';\n // material.downloadLink = '#';\n return material;\n }),\n });\n\n // if (result[key].materials.length > this.limit) {\n // html += ``;\n // }\n };\n\n this.list.innerHTML = html;\n // this.hideBeyondLimit();\n // this.addLoadMoreListeners();\n }\n }\n\n /**\n * Hides elements that goes beyond limit (this.limit)\n */\n private hideBeyondLimit() {\n this.el.querySelectorAll('.js-material-bank').forEach((bank) => {\n const bankItems = bank.querySelectorAll('.js-material-bank__item');\n if (bankItems.length > this.limit) {\n let counter = 0;\n bankItems.forEach((item) => {\n counter++;\n if (counter > this.limit) {\n item.style.display = 'none';\n }\n });\n }\n });\n }\n\n /**\n * Adds listeners to load more buttons\n */\n private addLoadMoreListeners() {\n this.list.querySelectorAll('.js-v3-app-material-bank-load-more').forEach((button) => {\n button.addEventListener('click', (e) => {\n e.currentTarget.parentElement.previousElementSibling.querySelectorAll('.js-material-bank__item').forEach((item) => {\n item.style.display = 'block';\n button.style.display = 'none';\n })\n });\n });\n }\n\n /**\n * Updates url\n */\n private updateURL() {\n window.history.replaceState({}, '', `${location.pathname}`); // Reset\n this.url = new URLSearchParams(new URL(this.location).search); // Reset\n for (const [key, value] of Object.entries(this.params)) {\n if (key !== 'stage-language') {\n this.url.set(key, value.toString());\n }\n }\n window.history.replaceState({}, '', `${location.pathname}?${this.url}`);\n }\n}\n","const Mustache = require('mustache');\nimport { Movax } from './Movax';\n\n/**\n * Contact form handler in Spare Part Cart page\n *\n *\n */\n\nexport class SparePartCartContact {\n\n private contactFormId: string; //sparepart-cart-contact-form\n private contactForm: Element;\n private contactTemplateId: string;\n private cartAdressesTemplateId: string;\n private addressSummaryId: string;\n private updateAddressButton: Element;\n private shippingRadioSelection: any;\n private submitContainer: Element;\n private ajaxEndpoint: string;\n private language: string;\n private summaryUpdated: boolean;\n private localizations: any;\n private contactDetailsStorageKey: string = 'cartDetails';\n private contactDetailsStorage: any;\n private storageTimeout: number = 24 * 60 * 60 * 1000;\n\n\n constructor() {\n this.contactFormId = 'sparepart-cart-contact-form';\n this.contactTemplateId = 'js-sparepart-cart-contact-template';\n this.cartAdressesTemplateId = 'js-sparepart-cart-contact-adresses';\n this.addressSummaryId = 'address-summary';\n\n //summary submit button container - hidden by default\n this.submitContainer = document.querySelector('.js-sparepart-order-submit');\n\n this.contactForm = document.getElementById(this.contactFormId);\n\n this.ajaxEndpoint = '/stage-ajax/sparepart_cart/';\n this.language = document.documentElement.lang;\n this.summaryUpdated = false;\n this.localizations = (window as any).LOCALIZATIONS?.sparepartcart || {};\n\n this.contactDetailsStorage = Movax.storage.getLocalStorageItem(this.contactDetailsStorageKey);\n }\n\n /**\n * attach contact form listener\n *\n */\n public attachListeners() {\n\n //if local storage found, populate form fields\n if(this.contactForm && this.contactDetailsStorage) {\n this.populateFormFields(this.contactDetailsStorage);\n }\n\n if (this.contactForm) {\n //update address button\n this.updateAddressButton = this.contactForm.querySelector('.js-update-address');\n this.updateAddressButton.addEventListener('click', (event) => {\n const formFields = this.collectFormFields();\n this.validateForm(formFields);\n });\n\n //listen to form changes\n this.contactForm.querySelectorAll('input').forEach((input) => {\n input.addEventListener('change', (event) => {\n this.onInputChange(event);\n });\n });\n }\n\n\n }\n\n /**\n * Populate form fields from local storage\n * @param {object} formFieldsStorage\n */\n public populateFormFields(formFieldsStorage : any){\n\n for (const key in formFieldsStorage){\n if(key !== 'toDifferentAddress'){\n document.forms[this.contactFormId][key].value = formFieldsStorage[key];\n }else{\n const targetId = document.forms[this.contactFormId][key].getAttribute('aria-controls');\n document.forms[this.contactFormId][key].checked = true;\n const extraContent = document.getElementById(targetId);\n extraContent.classList.remove('hidden');\n }\n\n }\n\n }\n\n /**\n * Collect form fields\n *\n * @returns{object}\n */\n public collectFormFields() {\n\n const form = this.contactForm as HTMLFormElement;\n const contactFormData: any = new FormData(form);\n const formFields: any = {};\n\n contactFormData.forEach((value, key) => {\n formFields[key] = value;\n });\n\n //populate shipping fields from invoice if shipping address not separate\n if (!formFields.toDifferentAddress) {\n for (var key in formFields) {\n //skip shipping type radio select\n if (key.includes('shipping') && key !== 'shippingType') {\n const invoiceKey = key.replace('shipping', '').toLowerCase();\n formFields[key] = formFields[invoiceKey];\n }\n }\n }\n\n return formFields;\n }\n\n\n /**\n * Validate form fields - validated by sending to Stage\n *\n * @param formFields\n */\n public async validateForm(formFields) {\n let validated = false;\n const errorContainer = document.getElementById('js-contact-form-error');\n\n //xhr params\n const params = {\n action: 'validateAddressForm',\n fields: JSON.stringify(formFields),\n language: this.language\n };\n\n //remove possible field-errors before validation\n document.querySelectorAll('.field-error').forEach(e => e.remove());\n\n try {\n const result = await this.makeAjaxRequest(params);\n this.updateAddressButton.classList.add('button--loading');\n\n //error -> show error field\n if (result.status === 'error') {\n this.showErrorFields(result.data.errors);\n throw new Error(result.message);\n }\n errorContainer.innerHTML = '';\n validated = true;\n } catch (error) {\n this.submitContainer.classList.add('hidden');\n errorContainer.innerHTML = error;\n validated = false;\n } finally {\n this.updateAddressButton.classList.remove('button--loading');\n }\n\n //check shipping type\n if (!formFields.shippingType) {\n validated = false;\n }\n\n if (validated) {\n //show order submit container\n this.submitContainer.classList.remove('hidden');\n //update address to summary\n this.updateFormAddress(formFields);\n //disable update button\n this.updateAddressButton.setAttribute('disabled', 'disabled');\n this.updateAddressButton.classList.add('button--disabled');\n\n //set formFields to localstorage\n Movax.storage.setLocalStorageItem(this.contactDetailsStorageKey, formFields, this.storageTimeout);\n\n }\n\n }\n\n /**\n * Show error in the form labels\n * @param errorFields\n */\n public showErrorFields(errorFields) {\n Object.keys(errorFields).map(field => {\n const fieldLabel = document.getElementById('js-cart-contact-' + field);\n const spanError = '' + errorFields[field][0] + '';\n fieldLabel.insertAdjacentHTML('beforeend', spanError);\n });\n }\n\n /**\n * update adress summary from the form data\n *\n * @param formFields - form with address information\n */\n public updateFormAddress(formFields) {\n\n const addressContainer = document.getElementById(this.addressSummaryId);\n const contactTemplate = document.getElementById(this.contactTemplateId).textContent;\n const cartAdressesTemplate = document.getElementById(this.cartAdressesTemplateId).textContent;\n\n //concatenate address template\n const concatAddressTemplate = `\n {{address}}
\n {{city}}, {{state}} {{zip}}
\n {{country}}\n `;\n\n //gather address information for render\n const concatInvoiceAddress = Mustache.render(concatAddressTemplate, {\n address: formFields.address1 + ' ' + formFields.address2,\n city: formFields.city,\n state: formFields.state,\n zip: formFields.zip,\n country: formFields.country\n });\n\n //gather address information for render\n const concatShippingAddress = Mustache.render(concatAddressTemplate, {\n address: formFields.shippingAddress1 + ' ' + formFields.shippingAddress2,\n city: formFields.shippingCity,\n state: formFields.shippingState,\n zip: formFields.shippingZip,\n country: formFields.shippingCountry\n });\n\n //Invoice address\n const invoiceAddress = {\n company: formFields.company,\n vat_number: formFields.vat_number,\n reference_number: formFields.reference_number,\n name: formFields.namefield,\n address: concatInvoiceAddress,\n email: formFields.email,\n tel: formFields.tel\n };\n\n //shipping address\n const shippingAddress = {\n company: formFields.shippingCompany,\n name: formFields.shippingName,\n address: concatShippingAddress,\n email: formFields.shippingEmail,\n tel: formFields.shippingTel\n };\n\n const addresses = {\n invoice: Mustache.render(contactTemplate, invoiceAddress),\n shipping: Mustache.render(contactTemplate, shippingAddress)\n };\n\n //create new markup and update summary\n const addressMarkup = Mustache.render(cartAdressesTemplate, addresses);\n addressContainer.innerHTML = addressMarkup;\n addressContainer.setAttribute('data-addresses', JSON.stringify(formFields));\n this.summaryUpdated = true;\n this.submitContainer.querySelector('#js-summary-warning').innerHTML = '';\n }\n\n private onInputChange(event) {\n // add shippingType selection into Summary\n if (event.target?.name === 'shippingType'){\n this.updateShippingType();\n } else {\n //warn user about unupdated data\n if(this.summaryUpdated) {\n this.summaryUpdated = false;\n this.submitContainer.querySelector('#js-summary-warning').innerHTML = this.localizations.updateWarning;\n //enable update button\n this.updateAddressButton.removeAttribute('disabled');\n this.updateAddressButton.classList.remove('button--disabled');\n }\n }\n }\n\n\n /**\n * Update summary shipping type\n */\n public updateShippingType() {\n const shippingTypeContainer: Element = document.getElementById('js-shipping-type');\n\n if (shippingTypeContainer) {\n const shippingChoice: any = event.currentTarget;\n shippingTypeContainer.innerHTML = shippingChoice.value;\n }\n\n }\n\n /**\n * Empty invoice and shipping details from local storage\n */\n public removeContactDetails() {\n return Movax.storage.removeLocalStorageItem(this.contactDetailsStorageKey);\n }\n\n /**\n * Make ajax request\n *\n * @param params parameters as object or serialized string\n * @returns {object} return object should contain status, message, data\n */\n private async makeAjaxRequest(params: object) {\n\n if (!this.ajaxEndpoint) {\n throw new Error('Form submission failed. Endpoint undefined.');\n }\n\n return Movax.xhr.get(this.ajaxEndpoint, params);\n }\n\n /**\n * returns contact form element\n */\n public getFormContainer () {\n return this.contactForm\n }\n\n}\n","import { MapApp } from './MapApp';\nimport { Movax } from './Movax';\nimport { ImageGallery } from './ImageGallery';\nimport { CoveringImage } from './CoveringImage';\n\nvar $ = require('jquery');\n\nexport module ReferencesApp {\n export function init(containerSelector:string, containerClass:string) {\n var map = new MapApp(containerSelector, containerClass, {\n scrollToActiveSingleView: true\n });\n\n // Reinit some components when view is loaded\n map.setSingleViewActiveCallback(function (viewElement) {\n var $element = $(viewElement);\n\n $element.find('.js-covering-image').each(function() {\n var coveringImage = new CoveringImage(this, 'covering-image', 100);\n coveringImage.init();\n });\n\n $element.find('.js-image-gallery').each(function() {\n var imageGallery = new ImageGallery(this, 'image-gallery');\n imageGallery.init();\n });\n\n // just to make sure everything loads\n setTimeout(function () {\n Movax.events.triggerResize();\n }, 100);\n });\n\n /**\n * This is called every time filtering options are changed\n */\n map.setFilteringHandler(function(filters, categories) {\n var filterCounter = 0,\n filteredList = [],\n key,\n i, j;\n\n for(key in filters) {\n if (filters.hasOwnProperty(key)) {\n filterCounter++;\n\n switch(key) {\n case 'category':\n\n // Filter by category\n if (typeof filters[key] === 'object' && filters[key].length) {\n filteredList = filteredList.concat(categories.filter(function(category) {\n var i, l;\n for (i = 0, l = filters[key].length; i < l; i++) {\n if(category.slug === filters[key][i]) {\n return true;\n }\n }\n\n return false;\n }))\n }\n break;\n }\n }\n }\n\n // if no filters are active, show all\n if(filterCounter === 0) {\n filteredList = categories;\n }\n\n return filteredList;\n });\n\n map.init();\n }\n}\n","import Mustache from 'mustache';\n\nconst folderTitleDivs = document.querySelectorAll('.file-list-fetch__button');\nconst fetchResultsFolders = document.querySelectorAll('div[id^=\"fetch-results__\"]');\nconst searchInput = document.querySelector('.js-material-bank__search');\n\n/**\n * fetch Studio folder's data, add it to search\n *\n */\nexport default function fetchFolderData() {\n\n for (let i = 0; i < fetchResultsFolders.length; i++) {\n fetchData(fetchResultsFolders[i], i);\n i === 0 && folderTitleDivs[0].classList.add('open');\n }\n\n searchInput.addEventListener('keyup', searchItems);\n}\n\n/**\n * Use Mustache template to render the fetched files\n * @param {object} items fetched inside fetchData()\n * @param {HTMLElement} container html element (folder) where the data is rendered\n */\nfunction renderItems(items, container) {\n const template = document.getElementById('js-file-list-fetch-template').innerHTML;\n const rendered = Mustache.render(template, items);\n container.innerHTML = rendered;\n}\n\n/**\n * Search files in all folders\n * @param {Event} e event triggered with keyup inside the search form\n */\nfunction searchItems(e) {\n const searchReg = new RegExp(e.target.value.toUpperCase());\n\n for (let folderIndex = 0; folderIndex < fetchResultsFolders.length; folderIndex++) {\n const items = fetchResultsFolders[folderIndex].children;\n\n let searchResultsCount = 0;\n\n for (let i = 0; i < items.length; i++) {\n const itemTitle = items[i].querySelector('p') ? items[i].querySelector('p').innerText.toUpperCase() : null;\n\n !searchReg.test(itemTitle) ?\n items[i].classList.add('hidden') :\n (items[i].classList.remove('hidden'), searchResultsCount++);\n }\n folderTitleDivs[folderIndex].classList.add('open');\n searchResultsCount > 0 && fetchResultsFolders[folderIndex].classList.remove('hidden');\n }\n}\n\n/**\n * Fetch data for a specific folder\n * @param {object} folder fetched inside fetchData()\n * @param {HTMLElement} folder html element (folder), the id of which is used to fetch the data\n */\n\nfunction fetchData(folder, index) {\n\n const folderId = folder.id.substring(15)\n folder.classList.add('spinner', 'spinner--black');\n\n const companyUuid = document.getElementById('js-material-bank--fetch').getAttribute('data-company');\n const showItemsButton = document.getElementById(folderId);\n\n fetch('/stage-ajax/file-list-fetch/' + folderId + '/' + companyUuid + '/')\n .then(response => response.json())\n .then(data => {\n folder.classList.remove('spinner', 'spinner--black');\n renderItems(data, folder);\n index !== 0 && folder.classList.toggle('hidden');\n\n showItemsButton.addEventListener('click', () => {\n showItemsButton.classList.toggle('open');\n folder.classList.toggle('hidden');\n });\n })\n .catch(error => {\n folder.innerHTML = 'Something went wrong.';\n console.error(error);\n })\n}\n","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);\n}","/**\n * EvEmitter v1.1.0\n * Lil' event emitter\n * MIT License\n */\n\n/* jshint unused: true, undef: true, strict: true */\n\n( function( global, factory ) {\n // universal module definition\n /* jshint strict: false */ /* globals define, module, window */\n if ( typeof define == 'function' && define.amd ) {\n // AMD - RequireJS\n define( factory );\n } else if ( typeof module == 'object' && module.exports ) {\n // CommonJS - Browserify, Webpack\n module.exports = factory();\n } else {\n // Browser globals\n global.EvEmitter = factory();\n }\n\n}( typeof window != 'undefined' ? window : this, function() {\n\n\"use strict\";\n\nfunction EvEmitter() {}\n\nvar proto = EvEmitter.prototype;\n\nproto.on = function( eventName, listener ) {\n if ( !eventName || !listener ) {\n return;\n }\n // set events hash\n var events = this._events = this._events || {};\n // set listeners array\n var listeners = events[ eventName ] = events[ eventName ] || [];\n // only add once\n if ( listeners.indexOf( listener ) == -1 ) {\n listeners.push( listener );\n }\n\n return this;\n};\n\nproto.once = function( eventName, listener ) {\n if ( !eventName || !listener ) {\n return;\n }\n // add event\n this.on( eventName, listener );\n // set once flag\n // set onceEvents hash\n var onceEvents = this._onceEvents = this._onceEvents || {};\n // set onceListeners object\n var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};\n // set flag\n onceListeners[ listener ] = true;\n\n return this;\n};\n\nproto.off = function( eventName, listener ) {\n var listeners = this._events && this._events[ eventName ];\n if ( !listeners || !listeners.length ) {\n return;\n }\n var index = listeners.indexOf( listener );\n if ( index != -1 ) {\n listeners.splice( index, 1 );\n }\n\n return this;\n};\n\nproto.emitEvent = function( eventName, args ) {\n var listeners = this._events && this._events[ eventName ];\n if ( !listeners || !listeners.length ) {\n return;\n }\n // copy over to avoid interference if .off() in listener\n listeners = listeners.slice(0);\n args = args || [];\n // once stuff\n var onceListeners = this._onceEvents && this._onceEvents[ eventName ];\n\n for ( var i=0; i < listeners.length; i++ ) {\n var listener = listeners[i]\n var isOnce = onceListeners && onceListeners[ listener ];\n if ( isOnce ) {\n // remove listener\n // remove before trigger to prevent recursion\n this.off( eventName, listener );\n // unset once flag\n delete onceListeners[ listener ];\n }\n // trigger listener\n listener.apply( this, args );\n }\n\n return this;\n};\n\nproto.allOff = function() {\n delete this._events;\n delete this._onceEvents;\n};\n\nreturn EvEmitter;\n\n}));\n","import { DLCenter } from './DLCenter';\n\nvar $ = require('jquery');\nrequire('magnific-popup');\n\n\n// This module could use some love, quick and dirty\nexport module DownloadCenter {\n export function init() {\n var dlcenter = new DLCenter(),\n toggleProductInCart,\n updateToggleGroup,\n toggleClass = 'js-product-add-to-cart',\n toggleAddedClass = toggleClass + '--added',\n $dlcenter = $('#js-dlcenter'),\n $itemCount,\n $generatingPopup;\n\n toggleProductInCart = function($el, isInCart) {\n if (isInCart) {\n $el.addClass(toggleAddedClass);\n $el.text($el.data('remove-text'));\n } else {\n $el.removeClass(toggleAddedClass);\n $el.text($el.data('add-text'));\n }\n }\n\n // Find toggle buttons on product pages\n $('.' + toggleClass).each(function() {\n var $this = $(this);\n\n if (dlcenter.isInCart($this.data('item'))) {\n toggleProductInCart($this, true);\n } else {\n toggleProductInCart($this, false);\n }\n\n $this.on('click', function(e) {\n var action;\n\n e.preventDefault();\n\n if ($this.hasClass(toggleAddedClass)) {\n dlcenter.removeItems($this.data('item')).then(function(res) {\n toggleProductInCart($this, false);\n });\n //action = 'remove';\n } else {\n dlcenter.addItems($this.data('item')).then(function(res) {\n toggleProductInCart($this, true);\n });\n //action = 'add';\n }\n });\n });\n\n\n updateToggleGroup = function($toggles, groupItems, allChecked) {\n var itemsObj = {},\n i, l;\n\n for (i = 0, l = groupItems.length; i < l; i++) {\n itemsObj[groupItems[i]] = true;\n }\n\n $toggles.each(function() {\n var $this = $(this),\n isGroupToggle = $(this).data('group-toggle'),\n ids = $this.data('ids')[0];\n\n if(typeof ids === 'object' && ids) {\n ids = JSON.stringify(ids);\n }\n\n if (!isGroupToggle && itemsObj[ids]) {\n if (allChecked) {\n $this.prop('checked', 'checked');\n } else {\n $this.prop('checked', '');\n }\n }\n });\n }\n\n function updateCartItemCount() {\n $itemCount.text(dlcenter.getItemCount());\n }\n\n // Main dlcenter functionality\n if ($dlcenter.length) {\n var $dlcenterToggles = $dlcenter.find('.js-dlcenter__toggle'),\n $generateLink = $dlcenter.find('.js-dlcenter__generate-pdf'),\n companyMode = $dlcenter.data('company-mode'),\n customAjaxUrl = $dlcenter.data('dlcenter-ajax');\n\n // If this is for example extranet product catalogue, we need different handler\n if(customAjaxUrl) {\n dlcenter.setHandlerAjaxUrl(customAjaxUrl);\n }\n\n $itemCount = $dlcenter.find('.js-dlcenter__item-count');\n $generatingPopup = $dlcenter.find('#js-dlcenter__pdf-generation-popup');\n\n $dlcenterToggles.on('click', function() {\n var $this = $(this),\n ids = $this.data('ids'),\n isGroupToggle = $this.data('group-toggle'),\n i, l;\n\n // Convert to string so we can compare results\n for(i=0, l=ids.length; itest',\n 'type': 'inline',\n 'midClick': true\n }\n });\n\n $progress.hide();\n $downloadLink.hide();\n e.preventDefault();\n\n dlcenter.generatePdf(function(progress) {\n pdfGenerationProgress(progress);\n }).then(function(downloadLink) {\n pdfGenerationCompleted(downloadLink);\n }, function(error) {\n pdfGenerationError();\n });\n });\n\n })();\n }\n }\n}\n","import { Movax } from './Movax';\n\nvar DLCENTER_AJAX_URL = '/stage-ajax/dlcenterhandler/' + Movax.dom.getLanguage(),\n COOKIE_NAME = 'dlcenter-client-cart',\n COOKIE_WAITING_NAME = 'dlcenter-waiting';\n\nexport class DLCenter {\n private cartItems;\n private handlerAjaxUrl: string;\n private progressPollInterval;\n private pollingFrequency:number = 2000;\n private jobid;\n private isWaiting: boolean = false;\n\n constructor() {\n\n // We need to create custom cookie for cart as the Stage cookie is http only and cannot be read by client\n var cookieStr = Movax.storage.readCookie(COOKIE_NAME);\n\n this.cartItems = [];\n\n if (cookieStr) {\n try {\n this.cartItems = JSON.parse(cookieStr);\n } catch (e) {\n console.log('DLCenter#constructor: Invalid cookie data');\n }\n }\n\n this.jobid = Movax.storage.readCookie(COOKIE_WAITING_NAME);\n\n this.handlerAjaxUrl = DLCENTER_AJAX_URL;\n\n if (this.jobid) {\n this.isWaiting = true;\n }\n }\n\n private _updateCart(cartItems) {\n this.cartItems = cartItems;\n\n // Only store this one for a day, so it will hopefully expire before http only cookie set by Stage\n Movax.storage.createCookie(COOKIE_NAME, JSON.stringify(this.cartItems), 1);\n }\n\n private _pdfProgressPoll(jobid, progressCallback) {\n var self = this,\n pdfGradualProgress = 0;\n\n\n return new Promise(function(resolve, reject) {\n\n if(!jobid) {\n Movax.storage.deleteCookie(COOKIE_WAITING_NAME);\n clearInterval(self.progressPollInterval);\n reject();\n }\n\n self.progressPollInterval = setInterval(function() {\n\n return Movax.xhr.get(self.handlerAjaxUrl, {\n 'action': 'getpdf',\n 'jobid': jobid\n }).then(function(res) {\n\n if(!res) {\n reject();\n }\n\n switch(res.status) {\n case 'failed':\n Movax.storage.deleteCookie(COOKIE_WAITING_NAME);\n clearInterval(self.progressPollInterval);\n reject();\n break;\n case 'done':\n Movax.storage.deleteCookie(COOKIE_WAITING_NAME);\n clearInterval(self.progressPollInterval);\n resolve(res.retdata.url);\n break;\n case 'running':\n var progress = Math.floor(parseFloat(res.retdata.progress) * 100) || 0,\n percentPerPoll = 0;\n\n if (res.retdata.phase && res.retdata.phase == 'pdf') {\n percentPerPoll = (45 / res.params.pages.length) * 8;\n }\n\n pdfGradualProgress += percentPerPoll;\n\n progressCallback(Math.min(Math.floor(0.55 * progress + pdfGradualProgress), 99));\n break;\n }\n });\n\n }, self.pollingFrequency);\n\n // Init with 0 percent\n progressCallback(0);\n });\n }\n\n public isInCart(item) {\n var i, l;\n for (i = 0, l = this.cartItems.length; i < l; i++){\n if(this.cartItems[i] === item) {\n return true;\n }\n }\n\n return false;\n }\n\n public getItemCount() {\n var i, l, counter = 0;\n\n // There might be empty additions, we don't want to count those\n for (i = 0, l = this.cartItems.length; i < l; i++) {\n if(this.cartItems[i]) {\n counter++;\n }\n }\n\n return counter;\n }\n\n /**\n * Set custom handler ajax url\n * @param {string} url\n */\n public setHandlerAjaxUrl(url:string) {\n this.handlerAjaxUrl = url;\n }\n\n /**\n * Remove items from cart\n * @return {Promise} updated cart\n */\n public removeItems(items) {\n var self = this;\n\n return new Promise(function(resolve, reject) {\n var itemsArray;\n\n // if single item as string\n if (typeof items === 'string') {\n itemsArray = [items];\n } else {\n itemsArray = items;\n }\n\n return Movax.xhr.get(self.handlerAjaxUrl, {\n 'action': 'remove',\n 'urls': itemsArray\n }).then(function (updatedCart) {\n self._updateCart(updatedCart);\n resolve(updatedCart);\n }, function (res) {\n reject(res);\n });\n });\n }\n\n /**\n * Add items to cart\n * @return {Promise} updated cart\n */\n public addItems(items) {\n var self = this;\n\n return new Promise(function(resolve, reject) {\n var itemsArray, i, l;\n\n // if single item as string\n if (typeof items === 'string') {\n itemsArray = [items];\n } else {\n itemsArray = items;\n }\n\n // Convert items to strings\n for(i=0, l=itemsArray.length; i(function(resolve, reject) {\n var itemsArray;\n\n return Movax.xhr.get(self.handlerAjaxUrl, {\n 'action': 'cart',\n }).then(function(cart) {\n //self._updateCart(updatedCart);\n resolve(cart);\n }, function(res) {\n reject(res);\n });\n });\n }\n\n /**\n * Generate pdf\n * @param {function} progressCallback\n * @return {Promise} download link\n */\n public generatePdf(progressCallback) {\n var self = this;\n\n return new Promise(function(resolve, reject) {\n var itemsArray;\n\n return Movax.xhr.get(self.handlerAjaxUrl, {\n 'action': 'pdf',\n }).then(function(jobid) {\n\n // Store job in cookie if user refreshes, we can continue\n Movax.storage.createCookie(COOKIE_WAITING_NAME, jobid, 1);\n self._pdfProgressPoll(jobid, progressCallback).then(function(res) {\n resolve(res);\n }, function () {\n reject();\n });\n }, function(res) {\n reject(res);\n });\n });\n }\n\n /**\n * Continue interrupted job (if you refresh page or something)\n * @param {function} progressCallback\n * @return {Promise} download link\n */\n public continueJob(progressCallback) {\n var self = this;\n return new Promise(function(resolve, reject) {\n self._pdfProgressPoll(self.jobid, progressCallback).then(function(res) {\n resolve(res);\n }, function() {\n reject();\n });\n });\n }\n\n public isJobInProgress() {\n return this.isWaiting;\n }\n\n public abortJob() {\n Movax.storage.deleteCookie(COOKIE_WAITING_NAME);\n }\n\n /**\n * clear cart\n * @return {Promise} cart items\n */\n public clearCart() {\n var self = this;\n\n return new Promise(function(resolve, reject) {\n return Movax.xhr.get(self.handlerAjaxUrl, {\n 'action': 'clear'\n }).then(function(items) {\n resolve(items);\n }, function(error) {\n reject();\n });\n });\n }\n}\n","/* eslint-disable */\n// ==ClosureCompiler==\n// @compilation_level ADVANCED_OPTIMIZATIONS\n// @externs_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/maps/google_maps_api_v3.js\n// ==/ClosureCompiler==\n\n/**\n * @name CSS3 InfoBubble with tabs for Google Maps API V3\n * @version 0.8\n * @author Luke Mahe\n * @fileoverview\n * This library is a CSS Infobubble with tabs. It uses css3 rounded corners and\n * drop shadows and animations. It also allows tabs\n */\n\n/*\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n\n/**\n * A CSS3 InfoBubble v0.8\n * @param {Object.=} opt_options Optional properties to set.\n * @extends {google.maps.OverlayView}\n * @constructor\n */\nfunction InfoBubble(opt_options) {\n this.extend(InfoBubble, google.maps.OverlayView);\n this.tabs_ = [];\n this.activeTab_ = null;\n this.baseZIndex_ = 100;\n this.isOpen_ = false;\n\n var options = opt_options || {};\n\n if (options['backgroundColor'] == undefined) {\n options['backgroundColor'] = this.BACKGROUND_COLOR_;\n }\n\n if (options['borderColor'] == undefined) {\n options['borderColor'] = this.BORDER_COLOR_;\n }\n\n if (options['borderRadius'] == undefined) {\n options['borderRadius'] = this.BORDER_RADIUS_;\n }\n\n if (options['borderWidth'] == undefined) {\n options['borderWidth'] = this.BORDER_WIDTH_;\n }\n\n if (options['padding'] == undefined) {\n options['padding'] = this.PADDING_;\n }\n\n if (options['arrowPosition'] == undefined) {\n options['arrowPosition'] = this.ARROW_POSITION_;\n }\n\n if (options['disableAutoPan'] == undefined) {\n options['disableAutoPan'] = false;\n }\n\n if (options['disableAnimation'] == undefined) {\n options['disableAnimation'] = false;\n }\n\n if (options['minWidth'] == undefined) {\n options['minWidth'] = this.MIN_WIDTH_;\n }\n\n if (options['shadowStyle'] == undefined) {\n options['shadowStyle'] = this.SHADOW_STYLE_;\n }\n\n if (options['arrowSize'] == undefined) {\n options['arrowSize'] = this.ARROW_SIZE_;\n }\n\n if (options['arrowStyle'] == undefined) {\n options['arrowStyle'] = this.ARROW_STYLE_;\n }\n\n this.buildDom_();\n\n this.setValues(options);\n}\nwindow['InfoBubble'] = InfoBubble;\n\n\n/**\n * Default arrow size\n * @const\n * @private\n */\nInfoBubble.prototype.ARROW_SIZE_ = 15;\n\n\n/**\n * Default arrow style\n * @const\n * @private\n */\nInfoBubble.prototype.ARROW_STYLE_ = 0;\n\n\n/**\n * Default shadow style\n * @const\n * @private\n */\nInfoBubble.prototype.SHADOW_STYLE_ = 1;\n\n\n/**\n * Default min width\n * @const\n * @private\n */\nInfoBubble.prototype.MIN_WIDTH_ = 50;\n\n\n/**\n * Default arrow position\n * @const\n * @private\n */\nInfoBubble.prototype.ARROW_POSITION_ = 50;\n\n\n/**\n * Default padding\n * @const\n * @private\n */\nInfoBubble.prototype.PADDING_ = 10;\n\n\n/**\n * Default border width\n * @const\n * @private\n */\nInfoBubble.prototype.BORDER_WIDTH_ = 1;\n\n\n/**\n * Default border color\n * @const\n * @private\n */\nInfoBubble.prototype.BORDER_COLOR_ = '#ccc';\n\n\n/**\n * Default border radius\n * @const\n * @private\n */\nInfoBubble.prototype.BORDER_RADIUS_ = 10;\n\n\n/**\n * Default background color\n * @const\n * @private\n */\nInfoBubble.prototype.BACKGROUND_COLOR_ = '#fff';\n\n\n/**\n * Extends a objects prototype by anothers.\n *\n * @param {Object} obj1 The object to be extended.\n * @param {Object} obj2 The object to extend with.\n * @return {Object} The new extended object.\n * @ignore\n */\nInfoBubble.prototype.extend = function(obj1, obj2) {\n return (function(object) {\n for (var property in object.prototype) {\n this.prototype[property] = object.prototype[property];\n }\n return this;\n }).apply(obj1, [obj2]);\n};\n\n\n/**\n * Builds the InfoBubble dom\n * @private\n */\nInfoBubble.prototype.buildDom_ = function() {\n var bubble = this.bubble_ = document.createElement('DIV');\n bubble.style['position'] = 'absolute';\n bubble.style['zIndex'] = this.baseZIndex_;\n\n var tabsContainer = this.tabsContainer_ = document.createElement('DIV');\n tabsContainer.style['position'] = 'relative';\n\n // Close button\n var close = this.close_ = document.createElement('IMG');\n close.style['position'] = 'absolute';\n close.style['width'] = this.px(12);\n close.style['height'] = this.px(12);\n close.style['border'] = 0;\n close.style['zIndex'] = this.baseZIndex_ + 1;\n close.style['cursor'] = 'pointer';\n close.src = 'https://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif';\n\n var that = this;\n google.maps.event.addDomListener(close, 'click', function() {\n that.close();\n google.maps.event.trigger(that, 'closeclick');\n });\n\n // Content area\n var contentContainer = this.contentContainer_ = document.createElement('DIV');\n contentContainer.style['overflowX'] = 'auto';\n contentContainer.style['overflowY'] = 'auto';\n contentContainer.style['cursor'] = 'default';\n contentContainer.style['clear'] = 'both';\n contentContainer.style['position'] = 'relative';\n\n var content = this.content_ = document.createElement('DIV');\n contentContainer.appendChild(content);\n\n // Arrow\n var arrow = this.arrow_ = document.createElement('DIV');\n arrow.style['position'] = 'relative';\n\n var arrowOuter = this.arrowOuter_ = document.createElement('DIV');\n var arrowInner = this.arrowInner_ = document.createElement('DIV');\n\n var arrowSize = this.getArrowSize_();\n\n arrowOuter.style['position'] = arrowInner.style['position'] = 'absolute';\n arrowOuter.style['left'] = arrowInner.style['left'] = '50%';\n arrowOuter.style['height'] = arrowInner.style['height'] = '0';\n arrowOuter.style['width'] = arrowInner.style['width'] = '0';\n arrowOuter.style['marginLeft'] = this.px(-arrowSize);\n arrowOuter.style['borderWidth'] = this.px(arrowSize);\n arrowOuter.style['borderBottomWidth'] = 0;\n\n // Shadow\n var bubbleShadow = this.bubbleShadow_ = document.createElement('DIV');\n bubbleShadow.style['position'] = 'absolute';\n\n // Hide the InfoBubble by default\n bubble.style['display'] = bubbleShadow.style['display'] = 'none';\n\n bubble.appendChild(this.tabsContainer_);\n bubble.appendChild(close);\n bubble.appendChild(contentContainer);\n arrow.appendChild(arrowOuter);\n arrow.appendChild(arrowInner);\n bubble.appendChild(arrow);\n\n var stylesheet = document.createElement('style');\n stylesheet.setAttribute('type', 'text/css');\n\n /**\n * The animation for the infobubble\n * @type {string}\n */\n this.animationName_ = '_ibani_' + Math.round(Math.random() * 10000);\n\n var css = '.' + this.animationName_ + '{-webkit-animation-name:' +\n this.animationName_ + ';-webkit-animation-duration:0.5s;' +\n '-webkit-animation-iteration-count:1;}' +\n '@-webkit-keyframes ' + this.animationName_ + ' {from {' +\n '-webkit-transform: scale(0)}50% {-webkit-transform: scale(1.2)}90% ' +\n '{-webkit-transform: scale(0.95)}to {-webkit-transform: scale(1)}}';\n\n stylesheet.textContent = css;\n document.getElementsByTagName('head')[0].appendChild(stylesheet);\n};\n\n\n/**\n * Sets the background class name\n *\n * @param {string} className The class name to set.\n */\nInfoBubble.prototype.setBackgroundClassName = function(className) {\n this.set('backgroundClassName', className);\n};\nInfoBubble.prototype['setBackgroundClassName'] =\n InfoBubble.prototype.setBackgroundClassName;\n\n\n/**\n * changed MVC callback\n */\nInfoBubble.prototype.backgroundClassName_changed = function() {\n this.content_.className = this.get('backgroundClassName');\n};\nInfoBubble.prototype['backgroundClassName_changed'] =\n InfoBubble.prototype.backgroundClassName_changed;\n\n\n/**\n * Sets the class of the tab\n *\n * @param {string} className the class name to set.\n */\nInfoBubble.prototype.setTabClassName = function(className) {\n this.set('tabClassName', className);\n};\nInfoBubble.prototype['setTabClassName'] =\n InfoBubble.prototype.setTabClassName;\n\n\n/**\n * tabClassName changed MVC callback\n */\nInfoBubble.prototype.tabClassName_changed = function() {\n this.updateTabStyles_();\n};\nInfoBubble.prototype['tabClassName_changed'] =\n InfoBubble.prototype.tabClassName_changed;\n\n\n/**\n * Gets the style of the arrow\n *\n * @private\n * @return {number} The style of the arrow.\n */\nInfoBubble.prototype.getArrowStyle_ = function() {\n return parseInt(this.get('arrowStyle'), 10) || 0;\n};\n\n\n/**\n * Sets the style of the arrow\n *\n * @param {number} style The style of the arrow.\n */\nInfoBubble.prototype.setArrowStyle = function(style) {\n this.set('arrowStyle', style);\n};\nInfoBubble.prototype['setArrowStyle'] =\n InfoBubble.prototype.setArrowStyle;\n\n\n/**\n * Arrow style changed MVC callback\n */\nInfoBubble.prototype.arrowStyle_changed = function() {\n this.arrowSize_changed();\n};\nInfoBubble.prototype['arrowStyle_changed'] =\n InfoBubble.prototype.arrowStyle_changed;\n\n\n/**\n * Gets the size of the arrow\n *\n * @private\n * @return {number} The size of the arrow.\n */\nInfoBubble.prototype.getArrowSize_ = function() {\n return parseInt(this.get('arrowSize'), 10) || 0;\n};\n\n\n/**\n * Sets the size of the arrow\n *\n * @param {number} size The size of the arrow.\n */\nInfoBubble.prototype.setArrowSize = function(size) {\n this.set('arrowSize', size);\n};\nInfoBubble.prototype['setArrowSize'] =\n InfoBubble.prototype.setArrowSize;\n\n\n/**\n * Arrow size changed MVC callback\n */\nInfoBubble.prototype.arrowSize_changed = function() {\n this.borderWidth_changed();\n};\nInfoBubble.prototype['arrowSize_changed'] =\n InfoBubble.prototype.arrowSize_changed;\n\n\n/**\n * Set the position of the InfoBubble arrow\n *\n * @param {number} pos The position to set.\n */\nInfoBubble.prototype.setArrowPosition = function(pos) {\n this.set('arrowPosition', pos);\n};\nInfoBubble.prototype['setArrowPosition'] =\n InfoBubble.prototype.setArrowPosition;\n\n\n/**\n * Get the position of the InfoBubble arrow\n *\n * @private\n * @return {number} The position..\n */\nInfoBubble.prototype.getArrowPosition_ = function() {\n return parseInt(this.get('arrowPosition'), 10) || 0;\n};\n\n\n/**\n * arrowPosition changed MVC callback\n */\nInfoBubble.prototype.arrowPosition_changed = function() {\n var pos = this.getArrowPosition_();\n this.arrowOuter_.style['left'] = this.arrowInner_.style['left'] = pos + '%';\n\n this.redraw_();\n};\nInfoBubble.prototype['arrowPosition_changed'] =\n InfoBubble.prototype.arrowPosition_changed;\n\n\n/**\n * Set the zIndex of the InfoBubble\n *\n * @param {number} zIndex The zIndex to set.\n */\nInfoBubble.prototype.setZIndex = function(zIndex) {\n this.set('zIndex', zIndex);\n};\nInfoBubble.prototype['setZIndex'] = InfoBubble.prototype.setZIndex;\n\n\n/**\n * Get the zIndex of the InfoBubble\n *\n * @return {number} The zIndex to set.\n */\nInfoBubble.prototype.getZIndex = function() {\n return parseInt(this.get('zIndex'), 10) || this.baseZIndex_;\n};\n\n\n/**\n * zIndex changed MVC callback\n */\nInfoBubble.prototype.zIndex_changed = function() {\n var zIndex = this.getZIndex();\n\n this.bubble_.style['zIndex'] = this.baseZIndex_ = zIndex;\n this.close_.style['zIndex'] = zIndex + 1;\n};\nInfoBubble.prototype['zIndex_changed'] = InfoBubble.prototype.zIndex_changed;\n\n\n/**\n * Set the style of the shadow\n *\n * @param {number} shadowStyle The style of the shadow.\n */\nInfoBubble.prototype.setShadowStyle = function(shadowStyle) {\n this.set('shadowStyle', shadowStyle);\n};\nInfoBubble.prototype['setShadowStyle'] = InfoBubble.prototype.setShadowStyle;\n\n\n/**\n * Get the style of the shadow\n *\n * @private\n * @return {number} The style of the shadow.\n */\nInfoBubble.prototype.getShadowStyle_ = function() {\n return parseInt(this.get('shadowStyle'), 10) || 0;\n};\n\n\n/**\n * shadowStyle changed MVC callback\n */\nInfoBubble.prototype.shadowStyle_changed = function() {\n var shadowStyle = this.getShadowStyle_();\n\n var display = '';\n var shadow = '';\n var backgroundColor = '';\n switch (shadowStyle) {\n case 0:\n display = 'none';\n break;\n case 1:\n shadow = '40px 15px 10px rgba(33,33,33,0.3)';\n backgroundColor = 'transparent';\n break;\n case 2:\n shadow = '0 0 2px rgba(33,33,33,0.3)';\n backgroundColor = 'rgba(33,33,33,0.35)';\n break;\n }\n this.bubbleShadow_.style['boxShadow'] =\n this.bubbleShadow_.style['webkitBoxShadow'] =\n this.bubbleShadow_.style['MozBoxShadow'] = shadow;\n this.bubbleShadow_.style['backgroundColor'] = backgroundColor;\n if (this.isOpen_) {\n this.bubbleShadow_.style['display'] = display;\n this.draw();\n }\n};\nInfoBubble.prototype['shadowStyle_changed'] =\n InfoBubble.prototype.shadowStyle_changed;\n\n\n/**\n * Show the close button\n */\nInfoBubble.prototype.showCloseButton = function() {\n this.set('hideCloseButton', false);\n};\nInfoBubble.prototype['showCloseButton'] = InfoBubble.prototype.showCloseButton;\n\n\n/**\n * Hide the close button\n */\nInfoBubble.prototype.hideCloseButton = function() {\n this.set('hideCloseButton', true);\n};\nInfoBubble.prototype['hideCloseButton'] = InfoBubble.prototype.hideCloseButton;\n\n\n/**\n * hideCloseButton changed MVC callback\n */\nInfoBubble.prototype.hideCloseButton_changed = function() {\n this.close_.style['display'] = this.get('hideCloseButton') ? 'none' : '';\n};\nInfoBubble.prototype['hideCloseButton_changed'] =\n InfoBubble.prototype.hideCloseButton_changed;\n\n\n/**\n * Set the background color\n *\n * @param {string} color The color to set.\n */\nInfoBubble.prototype.setBackgroundColor = function(color) {\n if (color) {\n this.set('backgroundColor', color);\n }\n};\nInfoBubble.prototype['setBackgroundColor'] =\n InfoBubble.prototype.setBackgroundColor;\n\n\n/**\n * backgroundColor changed MVC callback\n */\nInfoBubble.prototype.backgroundColor_changed = function() {\n var backgroundColor = this.get('backgroundColor');\n this.contentContainer_.style['backgroundColor'] = backgroundColor;\n\n this.arrowInner_.style['borderColor'] = backgroundColor +\n ' transparent transparent';\n this.updateTabStyles_();\n};\nInfoBubble.prototype['backgroundColor_changed'] =\n InfoBubble.prototype.backgroundColor_changed;\n\n\n/**\n * Set the border color\n *\n * @param {string} color The border color.\n */\nInfoBubble.prototype.setBorderColor = function(color) {\n if (color) {\n this.set('borderColor', color);\n }\n};\nInfoBubble.prototype['setBorderColor'] = InfoBubble.prototype.setBorderColor;\n\n\n/**\n * borderColor changed MVC callback\n */\nInfoBubble.prototype.borderColor_changed = function() {\n var borderColor = this.get('borderColor');\n\n var contentContainer = this.contentContainer_;\n var arrowOuter = this.arrowOuter_;\n contentContainer.style['borderColor'] = borderColor;\n\n arrowOuter.style['borderColor'] = borderColor +\n ' transparent transparent';\n\n contentContainer.style['borderStyle'] =\n arrowOuter.style['borderStyle'] =\n this.arrowInner_.style['borderStyle'] = 'solid';\n\n this.updateTabStyles_();\n};\nInfoBubble.prototype['borderColor_changed'] =\n InfoBubble.prototype.borderColor_changed;\n\n\n/**\n * Set the radius of the border\n *\n * @param {number} radius The radius of the border.\n */\nInfoBubble.prototype.setBorderRadius = function(radius) {\n this.set('borderRadius', radius);\n};\nInfoBubble.prototype['setBorderRadius'] = InfoBubble.prototype.setBorderRadius;\n\n\n/**\n * Get the radius of the border\n *\n * @private\n * @return {number} The radius of the border.\n */\nInfoBubble.prototype.getBorderRadius_ = function() {\n return parseInt(this.get('borderRadius'), 10) || 0;\n};\n\n\n/**\n * borderRadius changed MVC callback\n */\nInfoBubble.prototype.borderRadius_changed = function() {\n var borderRadius = this.getBorderRadius_();\n var borderWidth = this.getBorderWidth_();\n\n this.contentContainer_.style['borderRadius'] =\n this.contentContainer_.style['MozBorderRadius'] =\n this.contentContainer_.style['webkitBorderRadius'] =\n this.bubbleShadow_.style['borderRadius'] =\n this.bubbleShadow_.style['MozBorderRadius'] =\n this.bubbleShadow_.style['webkitBorderRadius'] = this.px(borderRadius);\n\n this.tabsContainer_.style['paddingLeft'] =\n this.tabsContainer_.style['paddingRight'] =\n this.px(borderRadius + borderWidth);\n\n this.redraw_();\n};\nInfoBubble.prototype['borderRadius_changed'] =\n InfoBubble.prototype.borderRadius_changed;\n\n\n/**\n * Get the width of the border\n *\n * @private\n * @return {number} width The width of the border.\n */\nInfoBubble.prototype.getBorderWidth_ = function() {\n return parseInt(this.get('borderWidth'), 10) || 0;\n};\n\n\n/**\n * Set the width of the border\n *\n * @param {number} width The width of the border.\n */\nInfoBubble.prototype.setBorderWidth = function(width) {\n this.set('borderWidth', width);\n};\nInfoBubble.prototype['setBorderWidth'] = InfoBubble.prototype.setBorderWidth;\n\n\n/**\n * borderWidth change MVC callback\n */\nInfoBubble.prototype.borderWidth_changed = function() {\n var borderWidth = this.getBorderWidth_();\n\n this.contentContainer_.style['borderWidth'] = this.px(borderWidth);\n this.tabsContainer_.style['top'] = this.px(borderWidth);\n\n this.updateArrowStyle_();\n this.updateTabStyles_();\n this.borderRadius_changed();\n this.redraw_();\n};\nInfoBubble.prototype['borderWidth_changed'] =\n InfoBubble.prototype.borderWidth_changed;\n\n\n/**\n * Update the arrow style\n * @private\n */\nInfoBubble.prototype.updateArrowStyle_ = function() {\n var borderWidth = this.getBorderWidth_();\n var arrowSize = this.getArrowSize_();\n var arrowStyle = this.getArrowStyle_();\n var arrowOuterSizePx = this.px(arrowSize);\n var arrowInnerSizePx = this.px(Math.max(0, arrowSize - borderWidth));\n\n var outer = this.arrowOuter_;\n var inner = this.arrowInner_;\n\n this.arrow_.style['marginTop'] = this.px(-borderWidth);\n outer.style['borderTopWidth'] = arrowOuterSizePx;\n inner.style['borderTopWidth'] = arrowInnerSizePx;\n\n // Full arrow or arrow pointing to the left\n if (arrowStyle == 0 || arrowStyle == 1) {\n outer.style['borderLeftWidth'] = arrowOuterSizePx;\n inner.style['borderLeftWidth'] = arrowInnerSizePx;\n } else {\n outer.style['borderLeftWidth'] = inner.style['borderLeftWidth'] = 0;\n }\n\n // Full arrow or arrow pointing to the right\n if (arrowStyle == 0 || arrowStyle == 2) {\n outer.style['borderRightWidth'] = arrowOuterSizePx;\n inner.style['borderRightWidth'] = arrowInnerSizePx;\n } else {\n outer.style['borderRightWidth'] = inner.style['borderRightWidth'] = 0;\n }\n\n if (arrowStyle < 2) {\n outer.style['marginLeft'] = this.px(-(arrowSize));\n inner.style['marginLeft'] = this.px(-(arrowSize - borderWidth));\n } else {\n outer.style['marginLeft'] = inner.style['marginLeft'] = 0;\n }\n\n // If there is no border then don't show thw outer arrow\n if (borderWidth == 0) {\n outer.style['display'] = 'none';\n } else {\n outer.style['display'] = '';\n }\n};\n\n\n/**\n * Set the padding of the InfoBubble\n *\n * @param {number} padding The padding to apply.\n */\nInfoBubble.prototype.setPadding = function(padding) {\n this.set('padding', padding);\n};\nInfoBubble.prototype['setPadding'] = InfoBubble.prototype.setPadding;\n\n\n/**\n * Set the padding of the InfoBubble\n *\n * @private\n * @return {number} padding The padding to apply.\n */\nInfoBubble.prototype.getPadding_ = function() {\n return parseInt(this.get('padding'), 10) || 0;\n};\n\n\n/**\n * padding changed MVC callback\n */\nInfoBubble.prototype.padding_changed = function() {\n var padding = this.getPadding_();\n this.contentContainer_.style['padding'] = this.px(padding);\n this.updateTabStyles_();\n\n this.redraw_();\n};\nInfoBubble.prototype['padding_changed'] = InfoBubble.prototype.padding_changed;\n\n\n/**\n * Add px extention to the number\n *\n * @param {number} num The number to wrap.\n * @return {string|number} A wrapped number.\n */\nInfoBubble.prototype.px = function(num) {\n if (num) {\n // 0 doesn't need to be wrapped\n return num + 'px';\n }\n return num;\n};\n\n\n/**\n * Add events to stop propagation\n * @private\n */\nInfoBubble.prototype.addEvents_ = function() {\n // We want to cancel all the events so they do not go to the map\n var events = ['mousedown', 'mousemove', 'mouseover', 'mouseout', 'mouseup',\n 'mousewheel', 'DOMMouseScroll', 'touchstart', 'touchend', 'touchmove',\n 'dblclick', 'contextmenu', 'click'];\n\n var bubble = this.bubble_;\n this.listeners_ = [];\n for (var i = 0, event; event = events[i]; i++) {\n this.listeners_.push(\n google.maps.event.addDomListener(bubble, event, function(e) {\n e.cancelBubble = true;\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n })\n );\n }\n};\n\n\n/**\n * On Adding the InfoBubble to a map\n * Implementing the OverlayView interface\n */\nInfoBubble.prototype.onAdd = function() {\n if (!this.bubble_) {\n this.buildDom_();\n }\n\n this.addEvents_();\n\n var panes = this.getPanes();\n if (panes) {\n panes.floatPane.appendChild(this.bubble_);\n panes.floatShadow.appendChild(this.bubbleShadow_);\n }\n};\nInfoBubble.prototype['onAdd'] = InfoBubble.prototype.onAdd;\n\n\n/**\n * Draw the InfoBubble\n * Implementing the OverlayView interface\n */\nInfoBubble.prototype.draw = function() {\n var projection = this.getProjection();\n\n if (!projection) {\n // The map projection is not ready yet so do nothing\n return;\n }\n\n var latLng = /** @type {google.maps.LatLng} */ (this.get('position'));\n\n if (!latLng) {\n this.close();\n return;\n }\n\n var tabHeight = 0;\n\n if (this.activeTab_) {\n tabHeight = this.activeTab_.offsetHeight;\n }\n\n var anchorHeight = this.getAnchorHeight_();\n var arrowSize = this.getArrowSize_();\n var arrowPosition = this.getArrowPosition_();\n\n arrowPosition = arrowPosition / 100;\n\n var pos = projection.fromLatLngToDivPixel(latLng);\n var width = this.contentContainer_.offsetWidth;\n var height = this.bubble_.offsetHeight;\n\n if (!width) {\n return;\n }\n\n // Adjust for the height of the info bubble\n var top = pos.y - (height + arrowSize);\n\n if (anchorHeight) {\n // If there is an anchor then include the height\n top -= anchorHeight;\n }\n\n var left = pos.x - (width * arrowPosition);\n\n this.bubble_.style['top'] = this.px(top);\n this.bubble_.style['left'] = this.px(left);\n\n var shadowStyle = parseInt(this.get('shadowStyle'), 10);\n\n switch (shadowStyle) {\n case 1:\n // Shadow is behind\n this.bubbleShadow_.style['top'] = this.px(top + tabHeight - 1);\n this.bubbleShadow_.style['left'] = this.px(left);\n this.bubbleShadow_.style['width'] = this.px(width);\n this.bubbleShadow_.style['height'] =\n this.px(this.contentContainer_.offsetHeight - arrowSize);\n break;\n case 2:\n // Shadow is below\n width = width * 0.8;\n if (anchorHeight) {\n this.bubbleShadow_.style['top'] = this.px(pos.y);\n } else {\n this.bubbleShadow_.style['top'] = this.px(pos.y + arrowSize);\n }\n this.bubbleShadow_.style['left'] = this.px(pos.x - width * arrowPosition);\n\n this.bubbleShadow_.style['width'] = this.px(width);\n this.bubbleShadow_.style['height'] = this.px(2);\n break;\n }\n};\nInfoBubble.prototype['draw'] = InfoBubble.prototype.draw;\n\n\n/**\n * Removing the InfoBubble from a map\n */\nInfoBubble.prototype.onRemove = function() {\n if (this.bubble_ && this.bubble_.parentNode) {\n this.bubble_.parentNode.removeChild(this.bubble_);\n }\n if (this.bubbleShadow_ && this.bubbleShadow_.parentNode) {\n this.bubbleShadow_.parentNode.removeChild(this.bubbleShadow_);\n }\n\n for (var i = 0, listener; listener = this.listeners_[i]; i++) {\n google.maps.event.removeListener(listener);\n }\n};\nInfoBubble.prototype['onRemove'] = InfoBubble.prototype.onRemove;\n\n\n/**\n * Is the InfoBubble open\n *\n * @return {boolean} If the InfoBubble is open.\n */\nInfoBubble.prototype.isOpen = function() {\n return this.isOpen_;\n};\nInfoBubble.prototype['isOpen'] = InfoBubble.prototype.isOpen;\n\n\n/**\n * Close the InfoBubble\n */\nInfoBubble.prototype.close = function() {\n if (this.bubble_) {\n this.bubble_.style['display'] = 'none';\n // Remove the animation so we next time it opens it will animate again\n this.bubble_.className =\n this.bubble_.className.replace(this.animationName_, '');\n }\n\n if (this.bubbleShadow_) {\n this.bubbleShadow_.style['display'] = 'none';\n this.bubbleShadow_.className =\n this.bubbleShadow_.className.replace(this.animationName_, '');\n }\n this.isOpen_ = false;\n};\nInfoBubble.prototype['close'] = InfoBubble.prototype.close;\n\n\n/**\n * Open the InfoBubble (asynchronous).\n *\n * @param {google.maps.Map=} opt_map Optional map to open on.\n * @param {google.maps.MVCObject=} opt_anchor Optional anchor to position at.\n */\nInfoBubble.prototype.open = function(opt_map, opt_anchor) {\n var that = this;\n window.setTimeout(function() {\n that.open_(opt_map, opt_anchor);\n }, 0);\n};\n\n/**\n * Open the InfoBubble\n * @private\n * @param {google.maps.Map=} opt_map Optional map to open on.\n * @param {google.maps.MVCObject=} opt_anchor Optional anchor to position at.\n */\nInfoBubble.prototype.open_ = function(opt_map, opt_anchor) {\n this.updateContent_();\n\n if (opt_map) {\n this.setMap(opt_map);\n }\n\n if (opt_anchor) {\n this.set('anchor', opt_anchor);\n this.bindTo('anchorPoint', opt_anchor);\n this.bindTo('position', opt_anchor);\n }\n\n // Show the bubble and the show\n this.bubble_.style['display'] = this.bubbleShadow_.style['display'] = '';\n var animation = !this.get('disableAnimation');\n\n if (animation) {\n // Add the animation\n this.bubble_.className += ' ' + this.animationName_;\n this.bubbleShadow_.className += ' ' + this.animationName_;\n }\n\n this.redraw_();\n this.isOpen_ = true;\n\n var pan = !this.get('disableAutoPan');\n if (pan) {\n var that = this;\n window.setTimeout(function() {\n // Pan into view, done in a time out to make it feel nicer :)\n that.panToView();\n }, 200);\n }\n};\nInfoBubble.prototype['open'] = InfoBubble.prototype.open;\n\n\n/**\n * Set the position of the InfoBubble\n *\n * @param {google.maps.LatLng} position The position to set.\n */\nInfoBubble.prototype.setPosition = function(position) {\n if (position) {\n this.set('position', position);\n }\n};\nInfoBubble.prototype['setPosition'] = InfoBubble.prototype.setPosition;\n\n\n/**\n * Returns the position of the InfoBubble\n *\n * @return {google.maps.LatLng} the position.\n */\nInfoBubble.prototype.getPosition = function() {\n return /** @type {google.maps.LatLng} */ (this.get('position'));\n};\nInfoBubble.prototype['getPosition'] = InfoBubble.prototype.getPosition;\n\n\n/**\n * position changed MVC callback\n */\nInfoBubble.prototype.position_changed = function() {\n this.draw();\n};\nInfoBubble.prototype['position_changed'] =\n InfoBubble.prototype.position_changed;\n\n\n/**\n * Pan the InfoBubble into view\n */\nInfoBubble.prototype.panToView = function() {\n var projection = this.getProjection();\n\n if (!projection) {\n // The map projection is not ready yet so do nothing\n return;\n }\n\n if (!this.bubble_) {\n // No Bubble yet so do nothing\n return;\n }\n\n var anchorHeight = this.getAnchorHeight_();\n var height = this.bubble_.offsetHeight + anchorHeight;\n var map = this.get('map');\n var mapDiv = map.getDiv();\n var mapHeight = mapDiv.offsetHeight;\n\n var latLng = this.getPosition();\n var centerPos = projection.fromLatLngToContainerPixel(map.getCenter());\n var pos = projection.fromLatLngToContainerPixel(latLng);\n\n // Find out how much space at the top is free\n var spaceTop = centerPos.y - height;\n\n // Fine out how much space at the bottom is free\n var spaceBottom = mapHeight - centerPos.y;\n\n var needsTop = spaceTop < 0;\n var deltaY = 0;\n\n if (needsTop) {\n spaceTop *= -1;\n deltaY = (spaceTop + spaceBottom) / 2;\n }\n\n pos.y -= deltaY;\n latLng = projection.fromContainerPixelToLatLng(pos);\n\n if (map.getCenter() != latLng) {\n map.panTo(latLng);\n }\n};\nInfoBubble.prototype['panToView'] = InfoBubble.prototype.panToView;\n\n\n/**\n * Converts a HTML string to a document fragment.\n *\n * @param {string} htmlString The HTML string to convert.\n * @return {Node} A HTML document fragment.\n * @private\n */\nInfoBubble.prototype.htmlToDocumentFragment_ = function(htmlString) {\n htmlString = htmlString.replace(/^\\s*([\\S\\s]*)\\b\\s*$/, '$1');\n var tempDiv = document.createElement('DIV');\n tempDiv.innerHTML = htmlString;\n if (tempDiv.childNodes.length == 1) {\n return /** @type {!Node} */ (tempDiv.removeChild(tempDiv.firstChild));\n } else {\n var fragment = document.createDocumentFragment();\n while (tempDiv.firstChild) {\n fragment.appendChild(tempDiv.firstChild);\n }\n return fragment;\n }\n};\n\n\n/**\n * Removes all children from the node.\n *\n * @param {Node} node The node to remove all children from.\n * @private\n */\nInfoBubble.prototype.removeChildren_ = function(node) {\n if (!node) {\n return;\n }\n\n var child;\n while (child = node.firstChild) {\n node.removeChild(child);\n }\n};\n\n\n/**\n * Sets the content of the infobubble.\n *\n * @param {string|Node} content The content to set.\n */\nInfoBubble.prototype.setContent = function(content) {\n this.set('content', content);\n};\nInfoBubble.prototype['setContent'] = InfoBubble.prototype.setContent;\n\n\n/**\n * Get the content of the infobubble.\n *\n * @return {string|Node} The marker content.\n */\nInfoBubble.prototype.getContent = function() {\n return /** @type {Node|string} */ (this.get('content'));\n};\nInfoBubble.prototype['getContent'] = InfoBubble.prototype.getContent;\n\n\n/**\n * Sets the marker content and adds loading events to images\n */\nInfoBubble.prototype.updateContent_ = function() {\n if (!this.content_) {\n // The Content area doesnt exist.\n return;\n }\n\n this.removeChildren_(this.content_);\n var content = this.getContent();\n if (content) {\n if (typeof content == 'string') {\n content = this.htmlToDocumentFragment_(content);\n }\n this.content_.appendChild(content);\n\n var that = this;\n var images = this.content_.getElementsByTagName('IMG');\n for (var i = 0, image; image = images[i]; i++) {\n // Because we don't know the size of an image till it loads, add a\n // listener to the image load so the marker can resize and reposition\n // itself to be the correct height.\n google.maps.event.addDomListener(image, 'load', function() {\n that.imageLoaded_();\n });\n }\n google.maps.event.trigger(this, 'domready');\n }\n this.redraw_();\n};\n\n/**\n * Image loaded\n * @private\n */\nInfoBubble.prototype.imageLoaded_ = function() {\n var pan = !this.get('disableAutoPan');\n this.redraw_();\n if (pan && (this.tabs_.length == 0 || this.activeTab_.index == 0)) {\n this.panToView();\n }\n};\n\n/**\n * Updates the styles of the tabs\n * @private\n */\nInfoBubble.prototype.updateTabStyles_ = function() {\n if (this.tabs_ && this.tabs_.length) {\n for (var i = 0, tab; tab = this.tabs_[i]; i++) {\n this.setTabStyle_(tab.tab);\n }\n this.activeTab_.style['zIndex'] = this.baseZIndex_;\n var borderWidth = this.getBorderWidth_();\n var padding = this.getPadding_() / 2;\n this.activeTab_.style['borderBottomWidth'] = 0;\n this.activeTab_.style['paddingBottom'] = this.px(padding + borderWidth);\n }\n};\n\n\n/**\n * Sets the style of a tab\n * @private\n * @param {Element} tab The tab to style.\n */\nInfoBubble.prototype.setTabStyle_ = function(tab) {\n var backgroundColor = this.get('backgroundColor');\n var borderColor = this.get('borderColor');\n var borderRadius = this.getBorderRadius_();\n var borderWidth = this.getBorderWidth_();\n var padding = this.getPadding_();\n\n var marginRight = this.px(-(Math.max(padding, borderRadius)));\n var borderRadiusPx = this.px(borderRadius);\n\n var index = this.baseZIndex_;\n if (tab.index) {\n index -= tab.index;\n }\n\n // The styles for the tab\n var styles = {\n 'cssFloat': 'left',\n 'position': 'relative',\n 'cursor': 'pointer',\n 'backgroundColor': backgroundColor,\n 'border': this.px(borderWidth) + ' solid ' + borderColor,\n 'padding': this.px(padding / 2) + ' ' + this.px(padding),\n 'marginRight': marginRight,\n 'whiteSpace': 'nowrap',\n 'borderRadiusTopLeft': borderRadiusPx,\n 'MozBorderRadiusTopleft': borderRadiusPx,\n 'webkitBorderTopLeftRadius': borderRadiusPx,\n 'borderRadiusTopRight': borderRadiusPx,\n 'MozBorderRadiusTopright': borderRadiusPx,\n 'webkitBorderTopRightRadius': borderRadiusPx,\n 'zIndex': index,\n 'display': 'inline'\n };\n\n for (var style in styles) {\n tab.style[style] = styles[style];\n }\n\n var className = this.get('tabClassName');\n if (className != undefined) {\n tab.className += ' ' + className;\n }\n};\n\n\n/**\n * Add user actions to a tab\n * @private\n * @param {Object} tab The tab to add the actions to.\n */\nInfoBubble.prototype.addTabActions_ = function(tab) {\n var that = this;\n tab.listener_ = google.maps.event.addDomListener(tab, 'click', function() {\n that.setTabActive_(this);\n });\n};\n\n\n/**\n * Set a tab at a index to be active\n *\n * @param {number} index The index of the tab.\n */\nInfoBubble.prototype.setTabActive = function(index) {\n var tab = this.tabs_[index - 1];\n\n if (tab) {\n this.setTabActive_(tab.tab);\n }\n};\nInfoBubble.prototype['setTabActive'] = InfoBubble.prototype.setTabActive;\n\n\n/**\n * Set a tab to be active\n * @private\n * @param {Object} tab The tab to set active.\n */\nInfoBubble.prototype.setTabActive_ = function(tab) {\n if (!tab) {\n this.setContent('');\n this.updateContent_();\n return;\n }\n\n var padding = this.getPadding_() / 2;\n var borderWidth = this.getBorderWidth_();\n\n if (this.activeTab_) {\n var activeTab = this.activeTab_;\n activeTab.style['zIndex'] = this.baseZIndex_ - activeTab.index;\n activeTab.style['paddingBottom'] = this.px(padding);\n activeTab.style['borderBottomWidth'] = this.px(borderWidth);\n }\n\n tab.style['zIndex'] = this.baseZIndex_;\n tab.style['borderBottomWidth'] = 0;\n tab.style['marginBottomWidth'] = '-10px';\n tab.style['paddingBottom'] = this.px(padding + borderWidth);\n\n this.setContent(this.tabs_[tab.index].content);\n this.updateContent_();\n\n this.activeTab_ = tab;\n\n this.redraw_();\n};\n\n\n/**\n * Set the max width of the InfoBubble\n *\n * @param {number} width The max width.\n */\nInfoBubble.prototype.setMaxWidth = function(width) {\n this.set('maxWidth', width);\n};\nInfoBubble.prototype['setMaxWidth'] = InfoBubble.prototype.setMaxWidth;\n\n\n/**\n * maxWidth changed MVC callback\n */\nInfoBubble.prototype.maxWidth_changed = function() {\n this.redraw_();\n};\nInfoBubble.prototype['maxWidth_changed'] =\n InfoBubble.prototype.maxWidth_changed;\n\n\n/**\n * Set the max height of the InfoBubble\n *\n * @param {number} height The max height.\n */\nInfoBubble.prototype.setMaxHeight = function(height) {\n this.set('maxHeight', height);\n};\nInfoBubble.prototype['setMaxHeight'] = InfoBubble.prototype.setMaxHeight;\n\n\n/**\n * maxHeight changed MVC callback\n */\nInfoBubble.prototype.maxHeight_changed = function() {\n this.redraw_();\n};\nInfoBubble.prototype['maxHeight_changed'] =\n InfoBubble.prototype.maxHeight_changed;\n\n\n/**\n * Set the min width of the InfoBubble\n *\n * @param {number} width The min width.\n */\nInfoBubble.prototype.setMinWidth = function(width) {\n this.set('minWidth', width);\n};\nInfoBubble.prototype['setMinWidth'] = InfoBubble.prototype.setMinWidth;\n\n\n/**\n * minWidth changed MVC callback\n */\nInfoBubble.prototype.minWidth_changed = function() {\n this.redraw_();\n};\nInfoBubble.prototype['minWidth_changed'] =\n InfoBubble.prototype.minWidth_changed;\n\n\n/**\n * Set the min height of the InfoBubble\n *\n * @param {number} height The min height.\n */\nInfoBubble.prototype.setMinHeight = function(height) {\n this.set('minHeight', height);\n};\nInfoBubble.prototype['setMinHeight'] = InfoBubble.prototype.setMinHeight;\n\n\n/**\n * minHeight changed MVC callback\n */\nInfoBubble.prototype.minHeight_changed = function() {\n this.redraw_();\n};\nInfoBubble.prototype['minHeight_changed'] =\n InfoBubble.prototype.minHeight_changed;\n\n\n/**\n * Add a tab\n *\n * @param {string} label The label of the tab.\n * @param {string|Element} content The content of the tab.\n */\nInfoBubble.prototype.addTab = function(label, content) {\n var tab = document.createElement('DIV');\n tab.innerHTML = label;\n\n this.setTabStyle_(tab);\n this.addTabActions_(tab);\n\n this.tabsContainer_.appendChild(tab);\n\n this.tabs_.push({\n label: label,\n content: content,\n tab: tab\n });\n\n tab.index = this.tabs_.length - 1;\n tab.style['zIndex'] = this.baseZIndex_ - tab.index;\n\n if (!this.activeTab_) {\n this.setTabActive_(tab);\n }\n\n tab.className = tab.className + ' ' + this.animationName_;\n\n this.redraw_();\n};\nInfoBubble.prototype['addTab'] = InfoBubble.prototype.addTab;\n\n/**\n * Update a tab at a speicifc index\n *\n * @param {number} index The index of the tab.\n * @param {?string} opt_label The label to change to.\n * @param {?string} opt_content The content to update to.\n */\nInfoBubble.prototype.updateTab = function(index, opt_label, opt_content) {\n if (!this.tabs_.length || index < 0 || index >= this.tabs_.length) {\n return;\n }\n\n var tab = this.tabs_[index];\n if (opt_label != undefined) {\n tab.tab.innerHTML = tab.label = opt_label;\n }\n\n if (opt_content != undefined) {\n tab.content = opt_content;\n }\n\n if (this.activeTab_ == tab.tab) {\n this.setContent(tab.content);\n this.updateContent_();\n }\n this.redraw_();\n};\nInfoBubble.prototype['updateTab'] = InfoBubble.prototype.updateTab;\n\n\n/**\n * Remove a tab at a specific index\n *\n * @param {number} index The index of the tab to remove.\n */\nInfoBubble.prototype.removeTab = function(index) {\n if (!this.tabs_.length || index < 0 || index >= this.tabs_.length) {\n return;\n }\n\n var tab = this.tabs_[index];\n tab.tab.parentNode.removeChild(tab.tab);\n\n google.maps.event.removeListener(tab.tab.listener_);\n\n this.tabs_.splice(index, 1);\n\n //delete tab;\n tab = null;\n\n for (var i = 0, t; t = this.tabs_[i]; i++) {\n t.tab.index = i;\n }\n\n if (tab.tab == this.activeTab_) {\n // Removing the current active tab\n if (this.tabs_[index]) {\n // Show the tab to the right\n this.activeTab_ = this.tabs_[index].tab;\n } else if (this.tabs_[index - 1]) {\n // Show a tab to the left\n this.activeTab_ = this.tabs_[index - 1].tab;\n } else {\n // No tabs left to sho\n this.activeTab_ = undefined;\n }\n\n this.setTabActive_(this.activeTab_);\n }\n\n this.redraw_();\n};\nInfoBubble.prototype['removeTab'] = InfoBubble.prototype.removeTab;\n\n\n/**\n * Get the size of an element\n * @private\n * @param {Node|string} element The element to size.\n * @param {number=} opt_maxWidth Optional max width of the element.\n * @param {number=} opt_maxHeight Optional max height of the element.\n * @return {google.maps.Size} The size of the element.\n */\nInfoBubble.prototype.getElementSize_ = function(element, opt_maxWidth,\n opt_maxHeight) {\n var sizer = document.createElement('DIV');\n sizer.style['display'] = 'inline';\n sizer.style['position'] = 'absolute';\n sizer.style['visibility'] = 'hidden';\n\n if (typeof element == 'string') {\n sizer.innerHTML = element;\n } else {\n sizer.appendChild(element.cloneNode(true));\n }\n\n document.body.appendChild(sizer);\n var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);\n\n // If the width is bigger than the max width then set the width and size again\n if (opt_maxWidth && size.width > opt_maxWidth) {\n sizer.style['width'] = this.px(opt_maxWidth);\n size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);\n }\n\n // If the height is bigger than the max height then set the height and size\n // again\n if (opt_maxHeight && size.height > opt_maxHeight) {\n sizer.style['height'] = this.px(opt_maxHeight);\n size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);\n }\n\n document.body.removeChild(sizer);\n //delete sizer;\n sizer = null;\n return size;\n};\n\n\n/**\n * Redraw the InfoBubble\n * @private\n */\nInfoBubble.prototype.redraw_ = function() {\n this.figureOutSize_();\n this.positionCloseButton_();\n this.draw();\n};\n\n\n/**\n * Figure out the optimum size of the InfoBubble\n * @private\n */\nInfoBubble.prototype.figureOutSize_ = function() {\n var map = this.get('map');\n\n if (!map) {\n return;\n }\n\n var padding = this.getPadding_();\n var borderWidth = this.getBorderWidth_();\n var borderRadius = this.getBorderRadius_();\n var arrowSize = this.getArrowSize_();\n\n var mapDiv = map.getDiv();\n var gutter = arrowSize * 2;\n var mapWidth = mapDiv.offsetWidth - gutter;\n var mapHeight = mapDiv.offsetHeight - gutter - this.getAnchorHeight_();\n var tabHeight = 0;\n var width = /** @type {number} */ (this.get('minWidth') || 0);\n var height = /** @type {number} */ (this.get('minHeight') || 0);\n var maxWidth = /** @type {number} */ (this.get('maxWidth') || 0);\n var maxHeight = /** @type {number} */ (this.get('maxHeight') || 0);\n\n maxWidth = Math.min(mapWidth, maxWidth);\n maxHeight = Math.min(mapHeight, maxHeight);\n\n var tabWidth = 0;\n if (this.tabs_.length) {\n // If there are tabs then you need to check the size of each tab's content\n for (var i = 0, tab; tab = this.tabs_[i]; i++) {\n var tabSize = this.getElementSize_(tab.tab, maxWidth, maxHeight);\n var contentSize = this.getElementSize_(tab.content, maxWidth, maxHeight);\n\n if (width < tabSize.width) {\n width = tabSize.width;\n }\n\n // Add up all the tab widths because they might end up being wider than\n // the content\n tabWidth += tabSize.width;\n\n if (height < tabSize.height) {\n height = tabSize.height;\n }\n\n if (tabSize.height > tabHeight) {\n tabHeight = tabSize.height;\n }\n\n if (width < contentSize.width) {\n width = contentSize.width;\n }\n\n if (height < contentSize.height) {\n height = contentSize.height;\n }\n }\n } else {\n var content = /** @type {string|Node} */ (this.get('content'));\n if (typeof content == 'string') {\n content = this.htmlToDocumentFragment_(content);\n }\n if (content) {\n var contentSize = this.getElementSize_(content, maxWidth, maxHeight);\n\n if (width < contentSize.width) {\n width = contentSize.width;\n }\n\n if (height < contentSize.height) {\n height = contentSize.height;\n }\n }\n }\n\n if (maxWidth) {\n width = Math.min(width, maxWidth);\n }\n\n if (maxHeight) {\n height = Math.min(height, maxHeight);\n }\n\n width = Math.max(width, tabWidth);\n\n if (width == tabWidth) {\n width = width + 2 * padding;\n }\n\n arrowSize = arrowSize * 2;\n width = Math.max(width, arrowSize);\n\n // Maybe add this as a option so they can go bigger than the map if the user\n // wants\n if (width > mapWidth) {\n width = mapWidth;\n }\n\n if (height > mapHeight) {\n height = mapHeight - tabHeight;\n }\n\n if (this.tabsContainer_) {\n this.tabHeight_ = tabHeight;\n this.tabsContainer_.style['width'] = this.px(tabWidth);\n }\n\n this.contentContainer_.style['width'] = this.px(width);\n this.contentContainer_.style['height'] = this.px(height);\n};\n\n\n/**\n * Get the height of the anchor\n *\n * This function is a hack for now and doesn't really work that good, need to\n * wait for pixelBounds to be correctly exposed.\n * @private\n * @return {number} The height of the anchor.\n */\nInfoBubble.prototype.getAnchorHeight_ = function() {\n var anchor = this.get('anchor');\n if (anchor) {\n var anchorPoint = /** @type google.maps.Point */(this.get('anchorPoint'));\n\n if (anchorPoint) {\n return -1 * anchorPoint.y;\n }\n }\n return 0;\n};\n\nInfoBubble.prototype.anchorPoint_changed = function() {\n this.draw();\n};\nInfoBubble.prototype['anchorPoint_changed'] = InfoBubble.prototype.anchorPoint_changed;\n\n\n/**\n * Position the close button in the right spot.\n * @private\n */\nInfoBubble.prototype.positionCloseButton_ = function() {\n var br = this.getBorderRadius_();\n var bw = this.getBorderWidth_();\n\n var right = 2;\n var top = 2;\n\n if (this.tabs_.length && this.tabHeight_) {\n top += this.tabHeight_;\n }\n\n top += bw;\n right += bw;\n\n var c = this.contentContainer_;\n if (c && c.clientHeight < c.scrollHeight) {\n // If there are scrollbars then move the cross in so it is not over\n // scrollbar\n right += 15;\n }\n\n this.close_.style['right'] = this.px(right);\n this.close_.style['top'] = this.px(top);\n};\n\nmodule.exports = InfoBubble;\n","/**\n * Check if the given variable is a function\n * @method\n * @memberof Popper.Utils\n * @argument {Any} functionToCheck - variable to check\n * @returns {Boolean} answer to: is a function?\n */\nexport default function isFunction(functionToCheck) {\n const getType = {};\n return (\n functionToCheck &&\n getType.toString.call(functionToCheck) === '[object Function]'\n );\n}\n","var $ = require('jquery');\nimport Mustache from 'mustache';\n\nexport function machineSearch(form) {\n //need to send language, get from html lang attr.\n let language = document.documentElement.lang;\n let formData = $(form).serialize();\n formData = formData + '&language=' + language;\n\n //get elements to pass into subfunctions\n const formElems = $('.activate-warranty__forms');\n\n //get response\n $.ajax({\n type: 'get',\n url: '/stage-ajax/get-serialnumber/',\n data: formData,\n cache: false,\n dataType: 'json',\n contentType: 'application/json; charset=utf-8',\n error: function(err) {\n console.log(err);\n },\n success: function(response) {\n if(response.status===\"success\"){\n //start showing machine information\n showSerial(response.data, formElems);\n } else {\n //SHOW ERROR - users needs this info\n showError(response, formElems);\n }\n }\n });\n}\n\n/*\n Shows the machine information\n {data} - object\n*/\nfunction showSerial(data, formElems){\n const resultTemplate = formElems.parents('.activate-warranty').find('.mustache-machine-result');\n\n // contruct these when there is more time\n let serialElement = formElems.find('.serial-number-found');\n let resultElement = formElems.find('.serial-number-found__txt');\n let serialErrorTxt = formElems.find('.serial-search-error');\n let machineInput = formElems.find('#machineId');\n let commissionReport = formElems.find('.commission-report');\n\n const isActivated = data.warranty_activated && data.warranty_activated !== \"0\";\n\n //we found some data eh? Lets show it.\n serialElement.show();\n resultElement.show();\n\n //clear previous error text and hide the element\n serialErrorTxt.hide();\n serialErrorTxt.text('');\n\n //collect data into text ( arms, clamps and pads (option: 4th jaw) )\n let armClampPadTxt = ( data._arms !== null ? data._arms : '' )\n + ( data._clamps !== null ? ', ' + data._clamps : '' )\n + ( data._pads !== null ? ', ' + data._pads : '' )\n + ( data.jaw !== 0 ? ', 4th jaw ' : '' );\n\n //show collected txt\n const mustacheParams = {\n serial: data.serial_number,\n model: data.model + ' ' + data.equipment,\n armClampPad: armClampPadTxt,\n isActivated\n };\n\n const resultContent = Mustache.render(resultTemplate.html() , mustacheParams );\n resultElement.html(resultContent);\n\n //if file does not exist, show file upload form\n if(!isActivated) {\n //update machineInput\n machineInput.val(data.uuid);\n commissionReport.show();\n } else {\n commissionReport.hide();\n }\n}\n\n/*\n Shows the machine search error\n {response} - object\n*/\nfunction showError(response, formElems){\n // contruct these when there is more time\n let serialElement = formElems.find('.serial-number-found');\n let serialErrorTxt = formElems.find('.serial-search-error');\n let machineInput = formElems.find('#machineId');\n let commissionReport = formElems.find('.commission-report');\n\n //show the machine info element\n serialElement.show();\n //hide other elements\n serialElement.find('.serial-number-found-txt').hide();\n\n //show error text\n serialErrorTxt.text(response.message);\n serialErrorTxt.show();\n\n //clear machineInput so we don't let wrong machine get files\n machineInput.val();\n commissionReport.hide();\n}\n\nexport default function init() {\n if( $('form.machine-search').length > 0 ) {\n //prevent form submit\n $('form.machine-search').on('submit', function (e) {\n e.preventDefault();\n machineSearch(this);\n });\n }\n}\n","import $ from 'jquery';\nimport Mustache from 'mustache';\nimport { ExtranetTable } from './ExtranetTable';\n\n\n\nexport function customerMachineSearch(form) {\n\n //need to send language, get from html lang attr.\n let language = document.documentElement.lang;\n let formData = $(form).serialize();\n formData = formData + '&language=' + language;\n let formValues = $(form).serializeArray();\n //get elements to pass into subfunctions\n const formElems = $('.customer-machines');\n\n //get response\n $.ajax({\n type: 'get',\n url: '/stage-ajax/movax-data-search-request/',\n data: formData,\n cache: false,\n dataType: 'json',\n contentType: 'application/json; charset=utf-8',\n error: function (err) {\n console.log(err);\n },\n success: function (data) {\n if (!data.message) {\n //start showing data-table\n showDataTable(data, formElems, formValues);\n } else {\n //SHOW ERROR\n showErrors(data, formElems, formValues);\n }\n }\n });\n}\n\n/**\n * Renders the machines data tables per years (Mustache), data is fetched via AJAX\n *\n * @param {object} data - search result in mustache formData, years{}, machineHeader{}\n * @param {object} formElems - (.customer-machines)\n * @param {object} formValues - form data values for rendering them back to user.\n */\n\nfunction showDataTable(data, formElems, formValues = '') {\n\n const eTable = new ExtranetTable('table-extranet--big');\n\n const resultTemplate = formElems.find('.mustache-machine-data-result');\n const formErrorElem = formElems.find('.form-error');\n\n //clear previous error text (if one exist) and hide the element\n formErrorElem.hide();\n formErrorElem.text('');\n\n //render search values\n let searchValues = {};\n //show some proper text for values label\n const searchValuesLocalization = {\n year: 'Year',\n serialnumber: 'Serial Number',\n country: 'Country',\n distributorName: 'Distributor',\n endCustomer: 'End-customer'\n }\n\n //set mustache data with localization\n searchValues.searchValues = formValues.map(key => {\n if (key.name !== 'companyUuid') {\n return {\n name: searchValuesLocalization[key.name],\n value: key.value\n }\n }\n }).filter(Boolean);\n\n //check if we have search values and show searched texts\n const searchValuesElem = $('.form-searchvalues');\n let formCheck = searchValues.searchValues.filter(val => val.value !== '');\n if (formCheck.length > 0) {\n const mustacheSeachValuesTemplate = formElems.find('.mustache-machine-search-values');\n const searchvaluesContent = Mustache.render(mustacheSeachValuesTemplate.html(), searchValues);\n searchValuesElem.html(searchvaluesContent);\n } else {\n //clear search values element\n searchValuesElem.html('');\n }\n\n //Mustache - data: years{}, machineHeader{}\n const mustacheParams = {\n years: data.years,\n machineHeader: data.machineHeader\n };\n\n //render data tables\n const resultElement = formElems.find('.customer-machines--datatable');\n const resultContent = Mustache.render(resultTemplate.html(), mustacheParams);\n resultElement.html(resultContent);\n\n //table sort for new data\n // $('table.table-sort').DataTable({\n // deferRender: true, //might optimze speed\n // paging: false,\n // searching: false,\n // info: false,\n // order: [],\n // columnDefs: [ {\n // targets: 'file',\n // orderable: false\n // }]\n // });\n\n //reinit table details function\n eTable.init();\n\n}\n\n/**\n * Shows the machine search error\n * @param {object} data - data.message, data.error from backend\n * @param {object[]} formElems form HTMLElements\n * @param {string} formValues form values\n */\nfunction showErrors(data, formElems, formValues = '') {\n\n let formErrorElem = formElems.find('.form-error');\n let serialnumberInput = formElems.find('#serialnumber');\n let endcustomerInput = formElems.find('#endcustomer');\n\n //show error text\n formErrorElem.text(data.message);\n formErrorElem.show();\n\n //clear inputs\n serialnumberInput.val('');\n endcustomerInput.val('');\n}\n\nexport default function init() {\n if ($('form.customer-machines__search-form').length > 0) {\n\n let form = $('form.customer-machines__search-form');\n let buttonReset = $('button[type=\"reset\"]');\n buttonReset.prop('disabled', true); //by default prevent reset\n //prevent form submit\n form.on('submit', function (e) {\n e.preventDefault();\n customerMachineSearch(this);\n buttonReset.prop('disabled', false); //enable reset\n });\n //form reset button, get machines\n form.on('reset', function (event) {\n setTimeout(function () {\n // executes after the form has been reset\n buttonReset.prop('disabled', true); //disable reset\n $('.form-searchvalues').html(''); //clear search value messages\n customerMachineSearch(form); //get all data, form values are now empty\n }, 1);\n });\n\n }\n}\n","/**\n * __ __\n * | \\/ |\n * | \\ / | _____ ____ ___ __\n * | |\\/| |/ _ \\ \\ / / _` \\ \\/ /\n * | | | | (_) \\ V / (_| |> <\n * |_| |_|\\___/ \\_/ \\__,_/_/\\_\\\n */\n\n// import branchBar from './modules/branch-bar';\nimport '@crasman/branch-bar/styles.css';\nimport { branchBar } from '@crasman/branch-bar';\nimport isotopeGrid from './components/isotope-grid';\nimport floatingLabel from './components/floating-label';\nimport tooltip from './components/tooltip';\nimport machineSearch from './components/machine-search'\nimport customerMachineSearch from './components/customer-machine-search';\nimport mobileNav from './components/mobile-nav';\nimport emails from './components/emails';\n// import dataTables from './components/datatable-sorting';\nimport './modules/register-service-worker';\n\n//Initialize everything on document ready\nexport default function master () {\n branchBar.init();\n isotopeGrid.init();\n floatingLabel.init();\n tooltip();\n machineSearch();\n customerMachineSearch();\n mobileNav.init();\n emails.init();\n // dataTables();\n}\n","import Tooltip from 'tooltip.js';\n\nexport default function init () {\n const tooltipElements = Array.from(document.querySelectorAll('.tooltip-trigger'));\n\n tooltipElements.forEach((element) => {\n\n //trigger is click by default, but can be changed to hover with class below\n const toolTipTrigger = element.classList.contains('tooltip-trigger--hover') ? 'hover' : 'click';\n\n new Tooltip(element, {\n placement: 'top',\n trigger: toolTipTrigger,\n title: element.dataset.tooltip\n });\n });\n}\n","/*!\n * jQuery JavaScript Library v3.6.1\n * https://jquery.com/\n *\n * Includes Sizzle.js\n * https://sizzlejs.com/\n *\n * Copyright OpenJS Foundation and other contributors\n * Released under the MIT license\n * https://jquery.org/license\n *\n * Date: 2022-08-26T17:52Z\n */\n( function( global, factory ) {\n\n\t\"use strict\";\n\n\tif ( typeof module === \"object\" && typeof module.exports === \"object\" ) {\n\n\t\t// For CommonJS and CommonJS-like environments where a proper `window`\n\t\t// is present, execute the factory and get jQuery.\n\t\t// For environments that do not have a `window` with a `document`\n\t\t// (such as Node.js), expose a factory as module.exports.\n\t\t// This accentuates the need for the creation of a real `window`.\n\t\t// e.g. var jQuery = require(\"jquery\")(window);\n\t\t// See ticket trac-14549 for more info.\n\t\tmodule.exports = global.document ?\n\t\t\tfactory( global, true ) :\n\t\t\tfunction( w ) {\n\t\t\t\tif ( !w.document ) {\n\t\t\t\t\tthrow new Error( \"jQuery requires a window with a document\" );\n\t\t\t\t}\n\t\t\t\treturn factory( w );\n\t\t\t};\n\t} else {\n\t\tfactory( global );\n\t}\n\n// Pass this if window is not defined yet\n} )( typeof window !== \"undefined\" ? window : this, function( window, noGlobal ) {\n\n// Edge <= 12 - 13+, Firefox <=18 - 45+, IE 10 - 11, Safari 5.1 - 9+, iOS 6 - 9.1\n// throw exceptions when non-strict code (e.g., ASP.NET 4.5) accesses strict mode\n// arguments.callee.caller (trac-13335). But as of jQuery 3.0 (2016), strict mode should be common\n// enough that all such attempts are guarded in a try block.\n\"use strict\";\n\nvar arr = [];\n\nvar getProto = Object.getPrototypeOf;\n\nvar slice = arr.slice;\n\nvar flat = arr.flat ? function( array ) {\n\treturn arr.flat.call( array );\n} : function( array ) {\n\treturn arr.concat.apply( [], array );\n};\n\n\nvar push = arr.push;\n\nvar indexOf = arr.indexOf;\n\nvar class2type = {};\n\nvar toString = class2type.toString;\n\nvar hasOwn = class2type.hasOwnProperty;\n\nvar fnToString = hasOwn.toString;\n\nvar ObjectFunctionString = fnToString.call( Object );\n\nvar support = {};\n\nvar isFunction = function isFunction( obj ) {\n\n\t\t// Support: Chrome <=57, Firefox <=52\n\t\t// In some browsers, typeof returns \"function\" for HTML