\n \n ![cart](\"https://assets.cartoonstock.com/images/shopping-cart.svg\")
Cart\n \n \n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n this.shadowRoot?.querySelector('#menu')?.addEventListener('click', () => location.href = 'https://www.cartoonstock.com')\n\n // Update cart number\n if (localStorage.getItem('cart')) (this.shadowRoot?.querySelector('#cart-quantity') as HTMLElement).innerText = JSON.parse(localStorage.getItem('cart') || '[]').reduce((acc:any, val:any) => acc + val.quantity, 0)\n else (this.shadowRoot?.querySelector('#cart-quantity') as HTMLElement).innerText = '0'\n\n window.eventBus.addEventListener('cart-updated', (e:CustomEvent) => (this.shadowRoot?.querySelector('#cart-quantity') as HTMLElement).innerText = JSON.parse(localStorage.getItem('cart') || '[]').reduce((acc:any, val:any) => acc + val.quantity, 0));\n\n // Open login modal\n this.shadowRoot?.querySelector('#login')?.addEventListener('click', () => location.href = 'https://www.cartoonstock.com')\n\n // Logged in event listener\n window.eventBus.addEventListener('logged-in', () => {\n this.loggedIn\n })\n\n // My account event listener\n this.shadowRoot?.querySelector('#my-account')?.addEventListener('click', () => location.href = 'https://www.cartoonstock.com')\n }\n\n get loggedIn() {\n (this.shadowRoot?.querySelector('#login') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#my-account') as HTMLElement).style.display = 'flex';\n return\n }\n\n get loggedOut() {\n (this.shadowRoot?.querySelector('#my-account') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#login') as HTMLElement).style.display = 'flex';\n return\n }\n})","import axios from '../node_modules/axios/index'\n\ncustomElements.define('license-packs-banner', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n Cart\n \n \n \n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n \n }\n})","customElements.define('cartoonstock-promo', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n Save money & time with License Packs
\n Find out more\n\n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n})","customElements.define('merchandise-homepage', class extends HTMLElement {\n mobile = window.innerWidth < 768\n\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n Same great cartoons, new & improved features
\n\n\n
\n\n Log in with your Cartoon Collections account\n \n 
\n
\n\n \n Find the perfect gift on the new store!
\n Browse by recipient and occasion
\n 
\n
\n\n \n\n \n Access your previous downloads & order history
\n\n 
\n
\n \n Securely save your payment details for speedy checkout
\n\n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n // Cards click event listeners\n this.shadowRoot?.querySelectorAll('.card').forEach((card:any) => card.addEventListener('click', () => location.href = card.dataset.url))\n\n // Change graphic for mobile/desktop\n window.addEventListener('resize', () => {\n if (window.innerWidth < 768) (this.shadowRoot?.querySelector('#merchandise-banner img') as HTMLImageElement).src = 'https://assets.cartoonstock.com/images/products-mobile.png'\n else (this.shadowRoot?.querySelector('#merchandise-banner img') as HTMLImageElement).src = 'https://assets.cartoonstock.com/images/products.png'\n })\n }\n})","customElements.define('commercial-homepage', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n Not just cartoon licensing….
\nExplore the CartoonStock store, caption contest & more
\n \n\n 
\n
\n\n \n \n \n Visit Our Store\n
\n \n
\n \n 
\n \n
\n \n
\n Caption contest
\nEver thought you could write knee-slapping captions? Now’s your chance! Enter our caption contest.
\n\n 
\n \n
\n \n
\n Cartoonathons
\nLive, virtual and personalized events bringing New Yorker cartoonists directly to YOU.
\n\n 
\n \n
\n \n
\n More
\nNews, interviews, caption contest commentary, licensing tips & more! Browse our blog.
\n\n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n})","customElements.define('menu-mobile-dropdown', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n Using cartoons for your business?
\nMade to measure solutions available
\n\n\n
\n\n \n 
\n
\n\n \n \n
\n Tailored licenses
\nCustom license agreements, tailored to your needs
\n\n 
\n
\n\n \n \n
\n Invoice terms
\nInvoice terms available upon request
\n\n 
\n
\n\n \n \n
\n Commercial access
\nLogin and download cartoons on invoice terms
\n\n 
\n
\n \n \n
\n Bespoke services
\nExpert image research, cartoonist events, & much more
\nFind out how we can help your next project
\n Get In Touch\n\n \n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n const dropdown = (this.shadowRoot?.querySelector('#dropdown') as HTMLElement)\n let html = ''\n JSON.parse((this.dataset.options as any)).forEach((option:any) => {\n html += /*html*/ `${option.name}`\n });\n dropdown.innerHTML = html\n\n this.shadowRoot?.querySelector('button')?.addEventListener('click', () => {\n if (dropdown.style.height == `${dropdown.scrollHeight}px`) {\n dropdown.style.height = '0px';\n (this.shadowRoot?.querySelector('button img') as HTMLElement).style.transform = 'rotate(0deg)'\n this.shadowRoot?.querySelector('button')?.classList.remove('selected')\n } else {\n this.parentNode?.querySelectorAll('menu-mobile-dropdown').forEach((el:any) => {\n el.close\n });\n this.shadowRoot?.querySelector('button')?.classList.add('selected');\n (this.shadowRoot?.querySelector('button img') as HTMLElement).style.transform = 'rotate(180deg)'\n dropdown.style.height = `${dropdown.scrollHeight}px`\n }\n })\n }\n\n get open() {\n const dropdown = (this.shadowRoot?.querySelector('#dropdown') as HTMLElement)\n this.shadowRoot?.querySelector('button')?.classList.add('selected');\n (this.shadowRoot?.querySelector('button img') as HTMLElement).style.transform = 'rotate(180deg)'\n dropdown.style.height = `${dropdown.scrollHeight}px`\n return (document.querySelector('menu-mobile') as HTMLElement).dataset.open = 'true'\n }\n\n get close() {\n (this.shadowRoot?.querySelector('#dropdown') as HTMLElement).style.height = '0px';\n (this.shadowRoot?.querySelector('button img') as HTMLElement).style.transform = 'rotate(0deg)'\n return this.shadowRoot?.querySelector('button')?.classList.remove('selected')\n }\n})","customElements.define('site-footer', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n \n \n\n \n\n \n 
\n 
\n 
\n 
\n \n\n \n © 2020 CartoonStock Ltd. All Rights Reserved\n \n\n \n\n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n})","import axios from '../node_modules/axios/index'\n\ncustomElements.define('nav-main', class extends HTMLElement {\n logged_in = false\n\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n \n \n \n \n \n 
\n \n\n \n\n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n this.shadowRoot?.querySelector('#menu')?.addEventListener('click', () => location.href = 'https://www.cartoonstock.com')\n\n // Log in event listener\n this.shadowRoot?.querySelector('#log-in-btn')?.addEventListener('click', () => location.href = 'https://www.cartoonstock.com')\n\n // Sign up event listener\n this.shadowRoot?.querySelector('#sign-up-btn')?.addEventListener('click', () => location.href = 'https://www.cartoonstock.com')\n\n // My account event listener\n this.shadowRoot?.querySelector('#my-account')?.addEventListener('click', () => location.href = 'https://www.cartoonstock.com')\n \n // Logged in event listener\n window.eventBus.addEventListener('logged-in', () => this.loggedIn)\n\n this.shadowRoot?.querySelector(`#${this.dataset.page}`)?.classList.add('selected')\n\n if (this.dataset.page === 'search') {\n const page = new URLSearchParams(location.search).get('type')\n if (page === 'store') this.shadowRoot?.querySelector('#store')?.classList.add('selected')\n else this.shadowRoot?.querySelector('#cartoons')?.classList.add('selected')\n }\n\n // Update cart number\n if (localStorage.getItem('cart')) {\n (this.shadowRoot?.querySelector('#cart-quantity') as HTMLElement).innerText = JSON.parse(localStorage.getItem('cart') || '[]').reduce((acc:any, val:any) => acc + val.quantity, 0);\n (this.shadowRoot?.querySelector('#cart-quantity-tablet') as HTMLElement).innerText = JSON.parse(localStorage.getItem('cart') || '[]').reduce((acc:any, val:any) => acc + val.quantity, 0)\n } else {\n (this.shadowRoot?.querySelector('#cart-quantity') as HTMLElement).innerText = '0';\n (this.shadowRoot?.querySelector('#cart-quantity-tablet') as HTMLElement).innerText = '0'\n }\n\n window.eventBus.addEventListener('cart-updated', (e:CustomEvent) => {\n (this.shadowRoot?.querySelector('#cart-quantity') as HTMLElement).innerText = JSON.parse(localStorage.getItem('cart') || '[]').reduce((acc:any, val:any) => acc + val.quantity, 0);\n (this.shadowRoot?.querySelector('#cart-quantity-tablet') as HTMLElement).innerText = JSON.parse(localStorage.getItem('cart') || '[]').reduce((acc:any, val:any) => acc + val.quantity, 0);\n })\n\n // Look for Microsoft login code in url (if redirected from social login)\n if (new URLSearchParams(window.location.search).get('code')) {\n axios.post('https://api2.cartoonstock.com/user/login/microsoft', {\n code: new URLSearchParams(window.location.search).get('code')\n }, { withCredentials: true }).then(res => {\n if (res.data.success) {\n localStorage.setItem('cs_uuid', res.data.uuid)\n this.loggedIn\n localStorage.setItem('login-method', 'microsoft')\n }\n })\n }\n }\n\n get loggedIn() {\n this.logged_in = true\n window.eventBus.dispatchEvent('uuid-updated');\n (this.shadowRoot?.querySelector('#log-in-btn') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#sign-up-btn') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#my-account') as HTMLElement).style.display = 'block';\n return\n }\n\n get loggedOut() {\n this.logged_in = false;\n (this.shadowRoot?.querySelector('#my-account') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#log-in-btn') as HTMLElement).style.display = 'block';\n (this.shadowRoot?.querySelector('#sign-up-btn') as HTMLElement).style.display = 'block';\n location.reload()\n return\n }\n\n get loginCheck() {\n return this.logged_in\n }\n})","import axios from '../node_modules/axios/index'\n\ncustomElements.define('nav-dropdown-gallery', class extends HTMLElement {\n height = this.dataset.name === 'Collections' ? '306px' : '320px'\n\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n \n \n\n \n\n \n \n Cart\n \n \n
\n Cart\n \n \n \n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n \n connectedCallback() {\n if (this.dataset.name === 'Products') {\n // No need for api call for 'Products\n const products = {\n cards: [\n {\n collection_url: 'https://www.cartoonstock.com/search?type=store&store_product=print',\n description: 'Bring our cartoons to your home or office - perfect for any room!',\n image_url: 'https://assets.cartoonstock.com/images/homepage-store/prints.png',\n title: 'Prints',\n type: 'Product'\n },\n {\n collection_url: 'https://www.cartoonstock.com/search?type=store&store_product=mug',\n description: 'This sturdy mug is perfect for your morning coffee, afternoon tea, or whatever hot beverage you enjoy.',\n image_url: 'https://assets.cartoonstock.com/images/homepage-store/mugs.png',\n title: 'Mugs',\n type: 'Product'\n },\n {\n collection_url: 'https://www.cartoonstock.com/search?type=store&store_product=tshirt',\n description: 'Unisex Short Sleeve T-Shirts.',\n image_url: 'https://assets.cartoonstock.com/images/homepage-store/tshirts.png',\n title: 'T-Shirts',\n type: 'Product'\n },\n {\n collection_url: 'https://www.cartoonstock.com/search?type=store&store_product=pillow',\n description: 'These throw pillows are precision-cut and hand-sewn to serve as the perfect decorative accent in any environment.',\n image_url: 'https://assets.cartoonstock.com/images/homepage-store/pillows.png',\n title: 'Pillows',\n type: 'Product'\n }\n ]\n };\n\n (this.shadowRoot?.querySelector('#left') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#right') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('a') as HTMLAnchorElement).style.display = 'none'\n\n let html = ''\n products.cards.forEach((card:any) => {\n html += /*html*/ `\n \n \n 
\n \n 
\n \n View all ${this.dataset.name}\n
\n \n \n \n \n 
\n
\n `\n });\n (this.shadowRoot?.querySelector('#gallery') as HTMLElement).style.justifyContent = 'center';\n (this.shadowRoot?.querySelector('#gallery') as HTMLElement).innerHTML = html;\n this.shadowRoot?.querySelectorAll('.card').forEach((card:any) => card.addEventListener('click', () => location.href = card.dataset.url));\n\n } else {\n // Get data for gallery\n let url = ''\n if (this.dataset.name === 'Topical') url = 'https://api2.cartoonstock.com/features/curated-topical'\n else if (this.dataset.name === 'Curated') url = 'https://api2.cartoonstock.com/features/curated'\n else if (this.dataset.name === 'Collections') url = 'https://api2.cartoonstock.com/features/publications'\n else if (this.dataset.name === 'Occasions') url = 'https://api2.cartoonstock.com/features/occasions'\n \n axios.get(url).then(res => {\n const collection = res.data\n \n let html = ''\n collection.cards.forEach((card:any) => {\n html += /*html*/ `\n ${card.title}
\n${card.description}
\n\n \n
\n `\n });\n (this.shadowRoot?.querySelector('#gallery') as HTMLElement).innerHTML = html;\n this.shadowRoot?.querySelectorAll('.card').forEach((card:any) => card.addEventListener('click', () => location.href = card.dataset.url));\n \n if (this.dataset.name === 'Occasions') (this.shadowRoot?.querySelector('a') as HTMLAnchorElement).style.display = 'none'\n else (this.shadowRoot?.querySelector('a') as HTMLAnchorElement).href = 'https://www.cartoonstock.com' + collection.url\n })\n \n // Nav scroll event listeners\n this.shadowRoot?.querySelectorAll('.svg').forEach((nav:any) => nav.addEventListener('click', () => this.navScroll(nav.id)))\n }\n\n }\n\n navScroll(id:string) {\n if (id === 'right') (this.shadowRoot?.querySelector('#gallery') as HTMLElement).scrollLeft += 250\n else (this.shadowRoot?.querySelector('#gallery') as HTMLElement).scrollLeft += -250\n }\n})","import '../components/nav-dropdown-gallery'\n\ncustomElements.define('nav-secondary', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n ${card.title}
\n${card.description}
\n\n \n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n if (this.dataset.page === 'search') {\n const page = new URLSearchParams(location.search).get('type')\n if (page === 'store') (this.shadowRoot?.querySelector('#container') as HTMLElement).style.backgroundColor = '#d4e3e4'\n }\n\n let html = ''\n JSON.parse((this.dataset.menuLeft as any)).forEach((button:any) => {\n if (button.type == 'dropdown-gallery') {\n html += /*html*/ `\n \n \n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n // Detect when sticky (scrolling)\n const observer = new IntersectionObserver( \n ([e]) => e.target.classList.toggle('isSticky', e.intersectionRatio < 1),\n {threshold: [1]}\n )\n observer.observe(this)\n\n // Search button pressed\n this.shadowRoot?.querySelector('#search-btn')?.addEventListener('click', () => {\n (this.shadowRoot?.querySelector('search-input') as any).search\n })\n\n // Search submission / save to history\n this.shadowRoot?.querySelector('form')?.addEventListener('submit', e => {\n e.preventDefault();\n (this.shadowRoot?.querySelector('search-input') as any).search\n })\n\n // Close search options\n this.shadowRoot?.addEventListener('click', e => {\n if (e.target != this.shadowRoot?.querySelector('search-options')) {\n (this.shadowRoot?.querySelector('search-options') as any).close\n }\n });\n\n // Open filters menu desktop\n this.shadowRoot?.querySelector('#filters-btn')?.addEventListener('click', e => {\n e.preventDefault();\n window.eventBus.dispatchEvent('filters-btn-desktop')\n })\n\n // Open filters menu tablet\n this.shadowRoot?.querySelector('#filters-btn-tablet')?.addEventListener('click', e => {\n e.preventDefault();\n (document.querySelector('search-filters-menu') as any)?.openTablet\n })\n }\n})","import axios from '../node_modules/axios/index'\nimport './search-desktop'\n\ncustomElements.define('banner-search', class extends HTMLElement {\n mobile = window.innerWidth < 768\n\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n \n \n \n\n \n\n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n if (this.dataset.page === 'home' && !this.mobile) {\n // Homepage layout\n (this.shadowRoot?.querySelector('#collection-tabs') as HTMLElement).innerHTML = /*html*/ `\n ${this.dataset.titleMain || ''}
\n${this.dataset.titleSecondary || ''}
\n\n ![merchandise graphic]()
\n
\n \n
\n Find your perfect cartoon gift
\n \n
\n 
\n 
\n 
\n 
\n `;\n (this.shadowRoot?.querySelector('#collection-tabs') as HTMLElement).style.margin = '40px 0 60px 0'\n } else if (this.dataset.page === 'store') {\n // Build dropdown menus\n axios.get('https://api2.cartoonstock.com/search/tags').then(res => {\n let html = ''\n res.data.occasions.forEach((occasion:{name:string, slug:string}) => {\n html += /*html*/ `\n \n `\n });\n (this.shadowRoot?.querySelector('#occasion') as HTMLSelectElement).innerHTML = html\n\n html = ''\n res.data.recipients.forEach((recipient:{name:string, slug:string}) => {\n html += /*html*/ `\n \n `\n });\n (this.shadowRoot?.querySelector('#recipient') as HTMLSelectElement).innerHTML = html\n });\n\n // Store page layout\n (this.shadowRoot?.querySelector('#text-content') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#collection-tabs') as HTMLElement).style.display = 'none';\n\n (this.shadowRoot?.querySelector('#store img') as HTMLImageElement).src = this.mobile ? 'https://assets.cartoonstock.com/images/homepage-store/store-header-mobile.png' : 'https://assets.cartoonstock.com/images/homepage-store/store-header.png';\n this.shadowRoot?.querySelector('form')?.addEventListener('submit', e => this.submitStore(e));\n\n (this.shadowRoot?.querySelector('#store') as HTMLElement).style.display = 'flex';\n }\n }\n\n submitStore(e:Event) {\n e.preventDefault()\n\n const occasion = (this.shadowRoot?.querySelector('#occasion') as HTMLSelectElement).value !== '' ? (this.shadowRoot?.querySelector('#occasion') as HTMLSelectElement).value : null\n const recipient = (this.shadowRoot?.querySelector('#recipient') as HTMLSelectElement).value !== '' ? (this.shadowRoot?.querySelector('#recipient') as HTMLSelectElement).value : null\n\n if (!occasion && !recipient) return\n else {\n let url = '/search?type=store'\n \n if (occasion) url += `&store_occasion=${occasion}`\n if (recipient) url += `&store_recipient=${recipient}`\n \n location.href = url\n }\n }\n})","import axios from '../node_modules/axios/index'\n\ncustomElements.define('suggested-tags', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n \n \n \n \n \n \n \n \n \n \n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n window.eventBus.addEventListener('search-query', (e:CustomEvent) => {\n const params = JSON.parse(window.localStorage.getItem('filters') as string)\n axios.post('https://api2.cartoonstock.com/search/search-keywords', {\n keyword: e.detail.keyword,\n ...params\n }, { withCredentials: true }).then(res => {\n let html = ''\n res.data.forEach((result:any) => {\n html += /*html*/ `\n ${result.keyword}
\n `\n });\n (this.shadowRoot?.querySelector('#container') as HTMLElement).innerHTML = html\n this.shadowRoot?.querySelectorAll('.tag').forEach((tag:any) => tag.style.visibility = 'visible')\n\n this.shadowRoot?.querySelectorAll('.tag').forEach((tag:any) => {\n tag.addEventListener('click', () => {\n window.eventBus.dispatchEvent('search', { keyword: tag.innerText })\n })\n })\n })\n })\n }\n})","import axios from '../node_modules/axios/index'\n\ncustomElements.define('collection-container', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n this.renderContent((this.dataset.collection as string))\n }\n\n renderContent(collectionName:string) {\n if (!collectionName) return\n axios.get(`https://api2.cartoonstock.com/${this.dataset.collection}`).then(res => {\n const collection = res.data;\n \n (this.shadowRoot?.querySelector('#header') as HTMLElement).innerText = collection.header;\n (this.shadowRoot?.querySelector('#subheader') as HTMLElement).innerText = collection.subheader;\n\n if (this.dataset.collection === 'features/occasions') {\n (this.shadowRoot?.querySelector('a') as HTMLAnchorElement).style.display = 'none'\n } else if (this.dataset.collection === 'features/gift-ideas') {\n (this.shadowRoot?.querySelector('a') as HTMLAnchorElement).href = 'https://www.cartoonstock.com/gift-ideas';\n (this.shadowRoot?.querySelector('a') as HTMLAnchorElement).innerText = collection.link_text;\n } else {\n (this.shadowRoot?.querySelector('a') as HTMLAnchorElement).href = 'https://www.cartoonstock.com' + collection.url;\n (this.shadowRoot?.querySelector('a') as HTMLAnchorElement).innerText = collection.link_text;\n }\n \n let html = ''\n collection.cards.forEach((card:any) => {\n html += /*html*/ `\n Curated collections
\nFind inspiration within our carefully curated collections
\n\n \n\n See all curated collections\n\n 
\n \n
\n `\n });\n (this.shadowRoot?.querySelector('#collection-cards') as HTMLElement).innerHTML = html\n this.shadowRoot?.querySelectorAll('.collection-card').forEach((card:any) => card.addEventListener('click', () => location.href = card.dataset.url))\n })\n }\n})","import axios from '../node_modules/axios/index'\n\ncustomElements.define('image-grid-mini', class extends HTMLElement {\n mobile = window.innerWidth < 768\n images:any\n \n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n \n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n window.addEventListener('resize', () => {\n if (window.innerWidth >= 768 && this.dataset.display === 'lowres') this.setGrid(300, 3)\n else if (window.innerWidth >= 768) this.setGrid(300, 2)\n else this.mobileImage(3)\n })\n\n this.fetchImages((this.dataset.url as string))\n }\n\n fetchImages(url:string) {\n axios.get(`https://api2.cartoonstock.com/${url}`).then(res => {\n if (!url) return\n // if (url.includes('suggestions') || url.includes('recently-viewed')) {\n if (this.dataset.display === 'personal' && (this.getRootNode() as any).host) {\n // Need to check if user has suggestions/recently viewed or not\n if (typeof res.data === 'string' || res.data.length < 10) return (this.getRootNode() as any).host.noData = url\n else {\n this.images = res.data\n if (!this.mobile) this.setGrid(300, 3)\n else this.mobileImage(3);\n (this.getRootNode() as any).host.hasData = url\n }\n } else if (this.dataset.display === 'lowres') {\n this.images = res.data\n if (!this.mobile) this.setGrid(300, 3)\n else this.mobileImage(3)\n } else {\n // Standard image set, no checks needed\n this.images = res.data\n if (!this.mobile) this.setGrid(300, 2)\n else this.mobileImage(3)\n }\n })\n }\n\n // Desktop or tablet, create grid\n setGrid(targetHeight:number, rowLimit:number) {\n if (typeof this.images === 'string') return\n const cartoons = this.images\n \n // Calcualte adjusted image widths\n cartoons.forEach((image:any, i:number) => cartoons[i].width = (targetHeight / image.files.preview.length) * image.files.preview.width)\n\n let html = '';\n (this.shadowRoot?.querySelector('#container') as HTMLElement).innerHTML = ''\n let widthCounter = 0 // Determine when width fills a row\n const heights: any[] = [] // Store height of each row\n let imageCount = 0 // Account for each image margin\n let rowCount = 0 // Limit amount of rows\n html = /*html*/ `\n
\n ${card.type}
\n${card.title}
\n${card.description}
\n`\n this.images.forEach((image:any) => {\n if (rowCount === rowLimit) return\n html += /*html*/ `
`\n imageCount++\n widthCounter += image.width\n if (widthCounter >= (this.shadowRoot?.querySelector('#container') as HTMLElement).offsetWidth) {\n heights.push(((this.shadowRoot?.querySelector('#container') as HTMLElement).offsetWidth - (this.mobile ? 20 : 60) - (imageCount * 20)) / (widthCounter / targetHeight))\n widthCounter = 0\n imageCount = 0\n html += /*html*/ `\n
\n \n `\n rowCount++\n }\n })\n html += '
';\n\n (this.shadowRoot?.querySelector('#container') as HTMLElement).innerHTML = html;\n\n // Remove last row if empty\n if ((this.shadowRoot?.querySelectorAll('.row:last-child')[0] as HTMLElement).childNodes.length === 1) (this.shadowRoot?.querySelectorAll('.row:last-child')[0] as HTMLElement).remove();\n\n // Set row heights, if last row set as target height\n this.shadowRoot?.querySelectorAll('.row').forEach((row:any, i:number) => {\n if (heights[i]) {\n row.dataset.height = heights[i]\n row.style.height = `${heights[i]}px`\n }\n else {\n row.dataset.height = targetHeight\n row.style.height = `${targetHeight}px`\n }\n });\n\n // Remove last row if not packed full\n if ((this.shadowRoot?.querySelector('.row:last-child') as HTMLElement).dataset.height === targetHeight.toString()) (this.shadowRoot?.querySelector('.row:last-child') as HTMLElement).remove();\n\n // Image click event listeners\n this.shadowRoot?.querySelectorAll('.cartoon-image').forEach((image:any) => image.addEventListener('click', () => location.href = 'https://www.cartoonstock.com/cartoon?searchID=' + image.dataset.searchId));\n \n\n (this.shadowRoot?.querySelector('#container') as HTMLElement).style.display = 'flex'\n }\n\n // On mobile, set one image only\n mobileImage(limit:number) {\n (this.shadowRoot?.querySelector('#container') as HTMLElement).innerHTML = '';\n let html = ''\n this.images.forEach((image:any, i:number) => {\n if (i < limit) html += /*html*/ `\n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n this.shadowRoot?.querySelector('button')?.addEventListener('click', () => {\n (this.shadowRoot?.querySelector('button') as HTMLElement).remove();\n (this.shadowRoot?.querySelector('image-grid-mini') as any).regenGrid = { targetHeight: 300, rowLimit: 10 }\n })\n }\n})","import axios from '../node_modules/axios/index'\n\ncustomElements.define('trending-searches', class extends HTMLElement {\n trending = ['cats', 'dogs', 'cats and dogs', 'something with a bit of a long title', 'cats', 'dogs', 'cats and dogs', 'something with a bit of a long title', 'cats', 'dogs', 'cats and dogs', 'something with a bit of a long title']\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n Topical cartoons newsfeed
\nA selection of the very latest topical cartoons uploaded to CartoonStock
\n\n\n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n if (this.dataset.type === 'store') {\n axios.get('https://api2.cartoonstock.com/features/trending-store').then(res => {\n let html = ''\n res.data.forEach((item:any, i:number) => i < 12 ? html += /*html*/ `Trending searches
\nOur most popular search terms over the past week
\n\n \n${item.keyword}
` : '');\n (this.shadowRoot?.querySelector('#trending') as HTMLElement).innerHTML = html\n \n this.shadowRoot?.querySelectorAll('#trending p').forEach((tag:any) => tag.addEventListener('click', () => window.eventBus.dispatchEvent('search', { keyword: tag.dataset.keyword })))\n });\n (this.shadowRoot?.querySelector('#header') as HTMLElement).innerText = 'Trending store searches';\n (this.shadowRoot?.querySelector('#subheader') as HTMLElement).innerText = 'Our most popular store search terms over the past week';\n } else {\n axios.get('https://api2.cartoonstock.com/features/trending').then(res => {\n let html = ''\n res.data.forEach((item:any, i:number) => i < 12 ? html += /*html*/ `${item.keyword}
` : '');\n (this.shadowRoot?.querySelector('#trending') as HTMLElement).innerHTML = html\n \n this.shadowRoot?.querySelectorAll('#trending p').forEach((tag:any) => tag.addEventListener('click', () => window.eventBus.dispatchEvent('search', { keyword: tag.dataset.keyword })))\n })\n }\n }\n})","import axios from '../node_modules/axios/index'\n\ncustomElements.define('contact-us', class extends HTMLElement {\n type = 'standard'\n\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n\n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n // Form submit event listener\n this.shadowRoot?.querySelector('form')?.addEventListener('submit', e => this.send(e))\n }\n\n // Send form data\n send(e:Event) {\n e.preventDefault()\n\n axios.post('https://api2.cartoonstock.com/contact', {\n category: 'cartoon_collections',\n sub_category: 'ghost_site',\n name: (this.shadowRoot?.querySelector('#name') as HTMLInputElement).value,\n email: (this.shadowRoot?.querySelector('#email') as HTMLInputElement).value,\n message: this.shadowRoot?.querySelector('textarea')?.value\n }).then(res => {\n if (res.data.success) {\n (this.shadowRoot?.querySelector('#help-text') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#panel') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#thanks') as HTMLElement).style.display = 'block';\n }\n })\n }\n})","import '../components/menu-mobile-dropdown'\n\ncustomElements.define('menu-mobile', class extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n \n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n this.shadowRoot?.querySelector('#close')?.addEventListener('click', () => {\n if (getComputedStyle((this.shadowRoot?.querySelector('#close') as HTMLElement)).order == '-1') {\n this.close('tablet')\n } else {\n this.close('mobile')\n }\n });\n\n this.shadowRoot?.host.addEventListener('click', (e:any) => {\n if (e.path[0] == this.shadowRoot?.host || e.path[0].id == 'container') {\n this.close('tablet')\n }\n })\n }\n \n set open(display:string) {\n const container = (this.shadowRoot?.querySelector('#container') as HTMLElement);\n (this.shadowRoot?.host as any).classList.add('background')\n container.style.display = 'flex'\n if (display == 'mobile') {\n container.style.transform = 'translateY(700px)';\n if (this.dataset.open === 'false') {\n (this.shadowRoot?.querySelector(`[data-name=\"${this.dataset.page}\"]`) as any).open\n }\n setTimeout(() => {\n container.style.transform = 'translateY(0px)'\n }, 20)\n } else {\n container.style.transform = 'translateX(414px)';\n if (this.dataset.open === 'false') {\n (this.shadowRoot?.querySelector(`[data-name=\"${this.dataset.page}\"]`) as any).open\n }\n setTimeout(() => {\n container.style.transform = 'translateX(0px)'\n }, 20)\n }\n }\n\n close(display:string) {\n const container = (this.shadowRoot?.querySelector('#container') as HTMLElement);\n (this.shadowRoot?.host as any).classList.remove('background')\n if (display == 'mobile') {\n container.style.transform = 'translateY(700px)'\n } else {\n container.style.transform = 'translateX(414px)'\n }\n setTimeout(() => {\n container.style.display = 'none'\n }, 500)\n }\n})","import './search-options'\nimport './search-input'\n\ncustomElements.define('search-mobile', class SearchMobile extends HTMLElement {\n constructor() {\n super()\n\n const template = document.createElement('template')\n template.innerHTML = /*html*/ `\n \n\n Need help?
\nSend us a message and we’ll get back to you as soon as possible.
\n\n\n \n\n \n
\n\n \n \n
\n Your message has been successfully sent
\nOne of our team members will get back to you as soon as they can
\n\n \n \n
\n `\n\n this.attachShadow({mode:'open'}).appendChild(template.content)\n }\n\n connectedCallback() {\n const menu = (this.shadowRoot?.querySelector('#search-menu') as HTMLElement)\n\n // Detect window resize for menu resizing/adjustments\n window.addEventListener('resize', () => {\n if (this.dataset.open === 'true') {\n menu.style.transition = 'none'\n menu.style.height = `${window.innerHeight}px`;\n setTimeout(() => {\n menu.style.transition = 'height 0.2s ease'\n }, 1000);\n }\n\n if (window.innerWidth > 767) (this.shadowRoot?.host as HTMLElement).style.display = 'none'\n else (this.shadowRoot?.host as HTMLElement).style.display = 'block'\n })\n\n // Open search menu\n this.shadowRoot?.querySelector('search-input')?.addEventListener('focus', () => {\n if (this.shadowRoot?.querySelector('#filters-btn-mobile')) (this.shadowRoot?.querySelector('#filters-btn-mobile') as HTMLElement).style.display = 'none'\n menu.style.height = `${window.innerHeight}px`;\n this.dataset.open = 'true';\n (this.shadowRoot?.querySelector('form') as HTMLElement).style.transform = 'translateY(190px)';\n (document.querySelector('nav-mobile') as HTMLElement).style.height = '0px';\n this.style.bottom = '0';\n (this.shadowRoot?.querySelector('search-input')?.shadowRoot?.querySelector('input') as HTMLElement).classList.add('input-open');\n (this.shadowRoot?.querySelector('#search-icon') as HTMLElement).classList.add('input-open');\n (this.shadowRoot?.querySelector('search-options')?.shadowRoot?.querySelector('#dropdown-button') as HTMLElement).style.display = 'flex';\n (this.shadowRoot?.querySelector('search-options')?.shadowRoot?.querySelector('.divider') as HTMLElement).style.display = 'block';\n (this.shadowRoot?.querySelector('search-input') as any).openSearch\n })\n\n // Close search menu\n this.shadowRoot?.querySelector('#close')?.addEventListener('click', () => {\n this.dataset.open = 'false'\n if (window.innerWidth < 767) {\n (this.shadowRoot?.querySelector('search-input')?.shadowRoot?.querySelector('#search-suggestions') as HTMLElement).style.display = 'none'\n }\n (this.shadowRoot?.querySelector('search-options')?.shadowRoot?.querySelector('#dropdown-button') as HTMLElement).style.display = 'none';\n (this.shadowRoot?.querySelector('#search-icon') as HTMLElement).classList.remove('input-open');\n (this.shadowRoot?.querySelector('search-options')?.shadowRoot?.querySelector('.divider') as HTMLElement).style.display = 'none';\n menu.style.height = '0';\n (this.shadowRoot?.querySelector('search-input')?.shadowRoot?.querySelector('input') as HTMLElement).classList.remove('input-open');\n if (this.shadowRoot?.querySelector('#filters-btn-mobile')) (this.shadowRoot?.querySelector('#filters-btn-mobile') as HTMLElement).style.display = 'flex';\n (this.shadowRoot?.querySelector('form') as HTMLElement).style.transform = 'translateY(0)';\n (document.querySelector('nav-mobile') as HTMLElement).style.height = 'auto';\n this.style.bottom = '70px';\n })\n\n // Close search options\n this.shadowRoot?.addEventListener('click', e => {\n if (e.target != this.shadowRoot?.querySelector('search-options')) {\n (this.shadowRoot?.querySelector('search-options') as any).close\n }\n })\n\n // Open filters\n this.shadowRoot?.querySelector('#filters-btn-mobile')?.addEventListener('click', e => {\n e.preventDefault();\n (document.querySelector('search-filters-menu') as HTMLElement).style.width = '100%';\n (document.querySelector('search-filters-menu') as HTMLElement).style.display = 'block';\n document.querySelector('search-filters-menu')?.shadowRoot?.querySelectorAll('search-filters-dropdown').forEach((dropdown:any) => {\n if (dropdown.dataset.open === 'true') dropdown.open\n })\n setTimeout(() => {\n (document.querySelector('search-filters-menu') as HTMLElement).style.transform = 'translateY(0)';\n }, 10);\n (this.shadowRoot?.host as HTMLElement).style.display = 'none'\n })\n }\n})"],"sourceRoot":""}