{"version":3,"file":"interactive-storytelling.min.js","sources":["../js/interactive-storytelling.js"],"sourcesContent":["// @ts-check\n\n/**\n * @var window.LeaderLine\n */\n\n/**\n * @typedef {Object} HotspotRelation\n * @property {string} relation - The unique identifier of the related hotspot.\n * @property {string} relationship_description - The description of the relationship between the hotspots.\n *\n * @typedef {Object} HotspotItem\n * @property {HTMLElement} el - The HTML element representing the storytelling item.\n * @property {Object} data - The data associated with this storytelling item.\n * @property {string} data.uid - The unique identifier for this item.\n * @property {string} data.headshot_url - The URL of the headshot image for this item.\n * @property {string} data.name - The name of the person or entity represented by this item.\n * @property {string} data.title - The title of the person or entity represented by this item.\n * @property {string} data.description - A description of the person or entity represented by this item.\n * @property {string} data.color - The hex color code associated with this item.\n * @property {Array<HotspotRelation>} data.relationship - The relationships this item has with other items.\n *\n * @typedef {Object.<string, HotspotItem>} HotspotsCollection\n */\n\nconst InteractiveStorytelling = ( function() {\n\n\t/**\n     * Elements for the interactive storytelling.\n     */\n    let container,\n\t\tcontainerItems,\n        flyout,\n        flyoutCloseButton,\n\t\tflyoutBackButton,\n        flyoutHeadshot,\n        flyoutName,\n\t\tflyoutTitle,\n        flyoutDescription,\n        flyoutRelationship,\n\t\tflyoutRelationshipContainer,\n\t\tflyoutRelationshipWrapper;\n\n\t/**\n\t * @type {HotspotsCollection} The collection of hotspot elements.\n\t */\n\tlet hotspots = {};\n\n\t/**\n\t * @type {HotspotItem|null} The currently selected hotspot.\n\t */\n    let selectedHotspot = null;\n\n\t/**\n\t * @type {HotspotRelation|null} The currently selected hotspot relation.\n\t */\n\tlet selectedHotspotRelation = null;\n\n\t/**\n\t * @type {LeaderLine[]} The collection of relationship lines.\n\t */\n\tlet relationshipLines = [];\n\n\t/**\n\t * @type {number} The breakpoint for the flyout.\n\t */\n\tconst breakpoint = 800;\n\n\t/**\n\t * Populate the flyout with the data from the selected hotspot.\n\t *\n\t * @param {HotspotItem} item\n\t */\n\tfunction populateFlyout( item ) {\n\t\tconst itemData = item.data;\n\n\t\tconst updating = ! selectedHotspot || selectedHotspot.data.uid !== itemData.uid\n\n\t\tflyout.style.setProperty( '--item-color', item.data.color );\n\n\t\tlet headshot = itemData.headshot_url;\n\t\tlet name = itemData.name;\n\t\tlet title = itemData.title;\n\t\tlet description = itemData.description;\n\n\t\t// If we are focusing in on a relationship.\n\t\tif ( null !== selectedHotspotRelation ) {\n\t\t\tflyout.classList.add( 'focused-relation' );\n\n\t\t\tconst relation = hotspots[ selectedHotspotRelation.relation ];\n\n\t\t\tif ( relation ) {\n\t\t\t\theadshot = relation.data.headshot_url;\n\t\t\t\tname = relation.data.name;\n\t\t\t\ttitle = relation.data.title;\n\t\t\t\tdescription = selectedHotspotRelation.relationship_description;\n\t\t\t}\n\t\t} else {\n\t\t\tflyout.classList.remove( 'focused-relation' );\n\t\t}\n\n\t\tflyoutHeadshot.src = headshot;\n\t\tflyoutName.textContent = name;\n\t\tflyoutTitle.textContent = title;\n\t\tflyoutDescription.innerHTML = description;\n\n\t\t// If we are changing the selected hotspot...\n\t\tif ( updating ) {\n\n\t\t\t// Update related hotspots.\n\t\t\tconst relatedHotspots = itemData.relationship\n\t\t\t\t.map( relationObj => hotspots[ relationObj.relation ] )\n\t\t\t\t.filter( hotspot => hotspot !== undefined && hotspot !== null );\n\n\t\t\tdrawFlyoutRelatedHotspots( item, relatedHotspots );\n\t\t}\n\n\t\t// Focus the flyout.\n\t\tflyout.focus();\n\t}\n\n\t/**\n\t * Draw the related hotspots in the flyout.\n\t *\n\t * @param {HotspotItem} originalHotspot\n\t * @param {HotspotItem[]} relatedHotspots\n\t */\n\tfunction drawFlyoutRelatedHotspots( originalHotspot, relatedHotspots ) {\n\t\t// Clear the existing related hotspots.\n\t\tflyoutRelationship.innerHTML = '';\n\n\t\t// If no related hotspots, hide the relationships section.\n\t\tif ( 0 === relatedHotspots.length ) {\n\t\t\tflyoutRelationshipContainer.classList.add( 'hidden' );\n\t\t\treturn;\n\t\t}\n\n\t\tflyoutRelationshipContainer.classList.remove( 'hidden' );\n\n\t\trelatedHotspots.forEach( hotspot => {\n\t\t\t// Render the headshot container.\n\t\t\tconst headshotContainer = document.createElement( 'div' );\n\t\t\theadshotContainer.classList.add( 'interactive-storytelling__flyout-relationship-headshot' );\n\n\t\t\t// Render the headshot image.\n\t\t\tconst headshot = document.createElement( 'img' );\n\t\t\theadshot.src = hotspot.data.headshot_url;\n\t\t\theadshot.alt = hotspot.data.name;\n\n\t\t\theadshotContainer.appendChild( headshot );\n\n\t\t\t// Render the relationship.\n\t\t\tconst relationship = document.createElement( 'button' );\n\t\t\trelationship.classList.add( 'interactive-storytelling__flyout-relationship' );\n\t\t\trelationship.setAttribute( 'data-rel-id', originalHotspot.data.uid + '|' + hotspot.data.uid );\n\t\t\trelationship.appendChild( headshotContainer );\n\t\t\t// relationship.style.setProperty( '--item-color', hotspot.data.color );\n\n\t\t\tflyoutRelationship.appendChild( relationship );\n\t\t} );\n\t}\n\n\t/**\n\t * Adjust related leader line style when hovering or clicking on hotspots.\n\t *\n\t * @param {HotspotItem} hotspot\n\t */\n\tfunction highlightRelatedHotspots( hotspot ) {\n\t\t// Remove all related classes from hotspots.\n\t\tObject.values( hotspots ).forEach( hotspot => {\n\t\t\thotspot.el.classList.remove( 'related' );\n\t\t} );\n\n\t\t// Revert all relationships lines.\n\t\trelationshipLines.forEach( line => {\n\t\t\tconst lineEl = line.getSVGElm();\n\n\t\t\tlineEl.classList.remove( 'active' );\n\t\t\tline.setOptions( { size: 1 } );\n\t\t} );\n\n\t\t// Add the related class to each related hotspot.\n\t\thotspot.data.relationship.forEach( relationObj => {\n\t\t\tconst relatedHotspot = hotspots[ relationObj.relation ];\n\n\t\t\tif ( relatedHotspot ) {\n\t\t\t\trelationshipLines.forEach( line => {\n\t\t\t\t\tconst lineEl = line.getSVGElm();\n\n\t\t\t\t\tif ( lineEl.getAttribute( 'data-hs' ) === hotspot.data.uid || lineEl.getAttribute( 'data-he' ) === hotspot.data.uid ) {\n\t\t\t\t\t\tlineEl.classList.add( 'active' );\n\t\t\t\t\t\tline.setOptions( { size: 2 } );\n\n\t\t\t\t\t\t// Set the related class to the hotspots.\n\t\t\t\t\t\thotspots[ lineEl.getAttribute( 'data-hs' ) ].el.classList.add( 'related' );\n\t\t\t\t\t\thotspots[ lineEl.getAttribute( 'data-he' ) ].el.classList.add( 'related' );\n\n\t\t\t\t\t\t// Set color to the same as the selected hotspot.\n\t\t\t\t\t\thotspots[ lineEl.getAttribute( 'data-hs' ) ].el.style.setProperty( '--item-color', hotspot.data.color );\n\t\t\t\t\t\thotspots[ lineEl.getAttribute( 'data-he' ) ].el.style.setProperty( '--item-color', hotspot.data.color );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Revert back to the original state of the hotspots and relationship lines.\n\t */\n\tfunction clearHighlightedRelatedHotspots() {\n\t\tflyoutRelationship.innerHTML = '';\n\n\t\tObject.values( hotspots ).forEach( hotspot => {\n\t\t\thotspot.el.classList.remove( 'related' );\n\t\t\thotspot.el.style.setProperty( '--item-color', hotspot.data.color );\n\t\t} );\n\n\t\trelationshipLines.forEach( line => {\n\t\t\tconst lineEl = line.getSVGElm();\n\n\t\t\tlineEl.classList.remove( 'active' );\n\t\t\tline.setOptions( { size: 1 } );\n\t\t} );\n\t}\n\n\t/**\n\t * Set the selected hotspot and display the flyout.\n\t *\n\t * @param {HotspotItem} hotspot\n\t * @param {boolean} clearRelation\n\t */\n\tfunction setSelectedHotspot( hotspot, clearRelation = true ) {\n\t\tif ( selectedHotspot ) {\n\t\t\tselectedHotspot.el.classList.remove( 'active' );\n\t\t}\n\n\t\tif ( clearRelation ) {\n\t\t\tselectedHotspotRelation = null;\n\n\t\t\tflyoutBackButton.classList.remove( 'visible' );\n\t\t}\n\n\t\tpopulateFlyout( hotspot );\n\t\thighlightRelatedHotspots( hotspot );\n\n\t\tselectedHotspot = hotspot;\n\n\t\thotspot.el.classList.add( 'active' );\n\n\t\tcontainer.classList.add( 'has-flyout' );\n\t\tflyout.setAttribute( 'aria-expanded', 'true' );\n\t\tflyout.setAttribute( 'tabindex', '0' );\n\t}\n\n\t/**\n\t * Set the selected hotspot and relation view.\n\t *\n\t * @param {HotspotItem} hotspot\n\t * @param {HotspotRelation} relation\n\t */\n\tfunction setSelectedHotspotRelation( hotspot, relation ) {\n\t\tselectedHotspotRelation = relation;\n\n\t\tsetSelectedHotspot( hotspot, false );\n\n\t\tflyoutBackButton.classList.add( 'visible' );\n\t}\n\n\t/**\n\t * Generate leader lines to the relationships this hotspot has.\n\t */\n\tfunction generateRelationshipLines() {\n\t\trelationshipLines = [];\n\n\t\tObject.values(hotspots).forEach( ( hotspot ) => {\n\t\t\tconst relationObj = hotspot.data.relationship;\n\n\t\t\trelationObj.forEach( ( relation ) => {\n\t\t\t\tconst relatedHotspot = hotspots[ relation.relation ];\n\n\t\t\t\tif ( relatedHotspot ) {\n\t\t\t\t\t// Get leader line color from container CSS variable --relationship-line-color.\n\t\t\t\t\tconst color = getComputedStyle( container ).getPropertyValue( '--relationship-line-color' ).trim();\n\n\t\t\t\t\t// @ts-ignore\n\t\t\t\t\tconst line = new window.LeaderLine(\n\t\t\t\t\t\twindow.LeaderLine.pointAnchor(hotspot.el, {x: '50%', y: '50%'}),\n\t\t\t\t\t\twindow.LeaderLine.pointAnchor(relatedHotspot.el, {x: '50%', y: '50%'}),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcolor: color || 'white',\n\t\t\t\t\t\t\tsize: 1,\n\t\t\t\t\t\t\tpath: 'straight',\n\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\n\t\t\t\t\tline.getSVGElm().setAttribute( 'data-hs', hotspot.data.uid );\n\t\t\t\t\tline.getSVGElm().setAttribute( 'data-he', relation.relation );\n\n\t\t\t\t\tline.setOptions( { hs: hotspot.el, he: relatedHotspot.el } );\n\n\t\t\t\t\tcontainerItems.addEventListener( 'resizing', ( e ) => {\n\t\t\t\t\t\tline.position();\n\t\t\t\t\t} );\n\n\t\t\t\t\trelationshipLines.push( line );\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\t}\n\n\t/**\n\t * Clear the selected hotspot and flyout.\n\t */\n    function clearSelectedHotspot() {\n\t\tcontainer.classList.remove( 'has-flyout' );\n\t\tflyout.setAttribute( 'aria-expanded', 'false' );\n\t\tflyout.setAttribute( 'tabindex', '-1' );\n\n\t\tflyout.removeAttribute( 'style' );\n\t\tflyout.classList.remove( 'focused-relation' );\n\n\t\tif ( ! selectedHotspot ) {\n\t\t\treturn;\n\t\t}\n\n\t\tselectedHotspot.el.classList.remove( 'active' );\n\n        selectedHotspot = null;\n\t\tselectedHotspotRelation = null;\n\n\t\tflyoutHeadshot.src = '';\n\t\tflyoutName.textContent = '';\n\t\tflyoutTitle.textContent = '';\n\t\tflyoutDescription.innerHTML = '';\n\n\t\tclearHighlightedRelatedHotspots();\n\n\t\tif ( window.innerWidth < breakpoint ) {\n\t\t\tcontainer.scrollIntoView( { behavior: 'smooth', block: 'start' } );\n\t\t}\n\n\t\tflyoutBackButton.classList.remove( 'visible' );\n    }\n\n\t/**\n\t * Clear the selected hotspot relation.\n\t */\n\tfunction clearSelectedHotspotRelation() {\n\t\tif ( ! selectedHotspot ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetSelectedHotspot( selectedHotspot, true );\n\n\t\tflyoutRelationshipWrapper.scrollLeft = 0;\n\n\t\t// Remove active state from the relationships.\n\t\tconst activeRelationships = flyout.querySelectorAll( '.interactive-storytelling__flyout-relationship.active' );\n\n\t\tactiveRelationships.forEach( relationship => {\n\t\t\trelationship.classList.remove( 'active' );\n\t\t} );\n\t}\n\n\t/**\n\t * Event listener: Clicking on a hotspot.\n\t *\n\t * @param {Object} event - The event object.\n\t * @param {HTMLElement} event.currentTarget - The current target element.\n\t * @param {HTMLElement} event.target - The target element.\n\t */\n\tfunction handleHotspotClick( event ) {\n\t\tif ( ! event.currentTarget ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst target = event.currentTarget;\n\n\t\tif ( ! ( target instanceof HTMLElement ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst hotspot = target.getAttribute( 'data-uid' );\n\n\t\tif ( ! hotspot || ! hotspots[ hotspot ] ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Clear the selected hotspot if it's the same one.\n\t\tif ( selectedHotspot && selectedHotspot.data.uid === hotspot ) {\n\t\t\tclearSelectedHotspot();\n\t\t\treturn;\n\t\t}\n\n        setSelectedHotspot( hotspots[ hotspot ] );\n    }\n\n\t/**\n\t * Event listener: Clicking on a related hotspot.\n\t *\n\t * @param {Object} event - The event object.\n\t * @param {HTMLElement} event.currentTarget - The current target element.\n\t * @param {HTMLElement} event.target - The target element.\n\t */\n\tfunction handleHotspotRelationClick( event ) {\n\t\tif ( ! event.currentTarget ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst target = event.currentTarget;\n\n\t\tif ( ! ( target instanceof HTMLElement ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst hotspotRel = target.getAttribute( 'data-rel-id' );\n\n\t\tif ( ! hotspotRel ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Split by pipe.\n\t\tconst [ hotspot, relation ] = hotspotRel.split( '|' );\n\n\t\tif ( ! hotspot || ! hotspots[ hotspot ] ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t/**\n\t\t * @type {HotspotRelation|undefined}\n\t\t */\n\t\tconst hotspotRelation = hotspots[ hotspot ].data.relationship.find( rel => rel.relation === relation );\n\n\t\t// Check if hotspot has the relation.\n\t\tif ( ! hotspotRelation ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tsetSelectedHotspotRelation( hotspots[ hotspot ], hotspotRelation );\n\n\t\t// Clear other active relationships.\n\t\tconst activeRelationships = flyout.querySelectorAll( '.interactive-storytelling__flyout-relationship.active' );\n\n\t\tactiveRelationships.forEach( relationship => {\n\t\t\trelationship.classList.remove( 'active' );\n\t\t} );\n\n\t\t// Set class to the relationship.\n\t\ttarget.classList.add( 'active' );\n\n\t\tif ( window.innerWidth < breakpoint ) {\n\t\t\tflyout.scrollIntoView( { behavior: 'smooth', block: 'start' } );\n\t\t}\n\n\t\tflyoutRelationshipWrapper.scrollLeft = target.offsetLeft - flyoutRelationshipWrapper.offsetWidth / 2 + target.offsetWidth / 2;\n\t}\n\n\t/**\n\t * Setup the hotspots for the interactive storytelling.\n\t */\n\tfunction setupHotspots() {\n\t\tlet _hotspots = container.querySelectorAll( '.interactive-storytelling__item' );\n\n\t\t_hotspots.forEach( hotspot => {\n\t\t\tconst uid = hotspot.getAttribute( 'data-uid' );\n\t\t\tconst _hotspot = {};\n\n\t\t\t_hotspot.el = hotspot;\n\n\t\t\ttry {\n\t\t\t\t_hotspot.data = JSON.parse( hotspot.getAttribute( 'data-item' ) );\n\t\t\t\t_hotspot.data.color = '' === _hotspot.data.color ? getComputedStyle( hotspot ).getPropertyValue( '--item-color' ).trim() : _hotspot.data.color;\n\n\t\t\t\thotspots[ uid ] = _hotspot;\n\t\t\t} catch (error) {\n\t\t\t\tconsole.warn( 'Interactive Storytelling:', error );\n\t\t\t}\n\t\t} );\n\n\t\treturn hotspots;\n\t}\n\n\t/**\n\t * Setup the variables for the interactive storytelling.\n\t */\n\tfunction setupVariables() {\n\t\tcontainerItems \t\t\t\t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__items' ) );\n\t\tflyout \t\t\t\t\t\t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout' ) );\n\t\tflyoutCloseButton \t\t\t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout-close' ) );\n\t\tflyoutBackButton \t\t\t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout-back' ) );\n\t\tflyoutHeadshot \t\t\t\t= /** @type {HTMLImageElement} */ ( container.querySelector( '.interactive-storytelling__flyout-headshot img' ) );\n\t\tflyoutName \t\t\t\t\t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout-name' ) );\n\t\tflyoutTitle \t\t\t\t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout-title' ) );\n\t\tflyoutDescription \t\t\t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout-description' ) );\n\t\tflyoutRelationship \t\t\t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout-relationships' ) );\n\t\tflyoutRelationshipContainer = /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout-relationships-container' ) );\n\t\tflyoutRelationshipWrapper \t= /** @type {HTMLElement} */ ( container.querySelector( '.interactive-storytelling__flyout-relationships-wrapper' ) );\n\t}\n\n\t/**\n\t * Setup the event listeners for the interactive storytelling.\n\t */\n\tfunction setupEvents() {\n\t\tflyoutCloseButton.addEventListener( 'click', clearSelectedHotspot );\n\n\t\t// Handle accessibility open hotspot when focused and pressing enter.\n\t\tcontainer.addEventListener( 'keydown', ( event ) => {\n\t\t\tif ( event.key === 'Enter' && event.target.classList.contains( 'interactive-storytelling__item' ) ) {\n\t\t\t\thandleHotspotClick( { currentTarget: event.target, target: event.target } );\n\n\t\t\t\t// Set focus to the flyout first focusable element.\n\t\t\t\tconst focusableElements = flyout.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])');\n\t\t\t\tconst firstFocusableElement = focusableElements[0];\n\t\t\t\tfirstFocusableElement.focus();\n\t\t\t}\n\t\t} );\n\n\n\t\tcontainer.addEventListener( 'click', ( event ) => {\n\t\t\tconst target = event.target;\n\n\t\t\t// Handle clicking close inside of hotspot.\n\t\t\tconst closeEl = target.classList.contains( 'interactive-storytelling__item-close' ) ? target : target.closest( '.interactive-storytelling__item-close' );\n\n\t\t\tif ( closeEl ) {\n\t\t\t\tclearSelectedHotspot();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst backEl = target.classList.contains( 'interactive-storytelling__flyout-back' ) ? target : target.closest( '.interactive-storytelling__flyout-back' );\n\n\t\t\tif ( backEl ) {\n\t\t\t\tclearSelectedHotspotRelation();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Handle hotspot clicks\n\t\t\tconst hotspotEl = target.classList.contains( 'interactive-storytelling__item' ) ? target : target.closest('.interactive-storytelling__item');\n\n\t\t\tif ( hotspotEl ) {\n\t\t\t\thandleHotspotClick( { currentTarget: hotspotEl, target } );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Handle related hotspot clicks within the flyout\n\t\t\tconst relationshipEl = target.classList.contains( 'interactive-storytelling__flyout-relationship' ) ? target : target.closest('.interactive-storytelling__flyout-relationship');\n\n\t\t\tif ( relationshipEl ) {\n\t\t\t\thandleHotspotRelationClick( { currentTarget: relationshipEl, target } );\n\t\t\t\treturn;\n\t\t\t}\n\t\t} );\n\n\t\t// Hovering over a hotspot should highlight the related hotspots.\n\t\tcontainer.addEventListener( 'mouseover', ( event ) => {\n\t\t\tconst target = event.target;\n\n\t\t\t// Handle hotspot hover\n\t\t\tconst hotspotEl = target.closest( '.interactive-storytelling__item' );\n\n\t\t\tif ( hotspotEl && null === selectedHotspot ) {\n\t\t\t\thighlightRelatedHotspots( hotspots[ hotspotEl.getAttribute( 'data-uid' ) ] );\n\t\t\t\treturn;\n\t\t\t}\n\t\t} );\n\n\t\t// Clear the highlighted related hotspots when the mouse leaves the container.\n\t\tcontainer.addEventListener( 'mouseout', ( event ) => {\n\t\t\tconst target = event.target;\n\n\t\t\t// Handle hotspot hover out\n\t\t\tconst hotspotEl = target.closest( '.interactive-storytelling__item' );\n\n\t\t\tif ( hotspotEl && null === selectedHotspot ) {\n\t\t\t\tclearHighlightedRelatedHotspots();\n\t\t\t\treturn;\n\t\t\t}\n\t\t} );\n\n\t\t// Listen for escape key to close the flyout.\n\t\tdocument.addEventListener( 'keydown', ( event ) => {\n\t\t\tif ( event.key === 'Escape' ) {\n\t\t\t\tclearSelectedHotspot();\n\t\t\t}\n\t\t} );\n\n\t\tconst resizeObserver = new ResizeObserver( entries => {\n\t\t\tfor ( let entry of entries ) {\n\t\t\t\tconst event = new CustomEvent( 'resizing', { detail: { width: entry.contentRect.width, height: entry.contentRect.height } } );\n\n\t\t\t\tcontainerItems.dispatchEvent( event );\n\t\t\t}\n\t\t} );\n\n\t\tresizeObserver.observe( containerItems );\n\t}\n\n    return {\n\t\t/**\n\t\t * Initialize the interactive storytelling.\n\t\t *\n\t\t * @param {HTMLElement} c\n\t\t */\n        init: function( c ) {\n\t\t\tif ( ! c ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcontainer = c;\n\n\t\t\tsetupHotspots();\n\t\t\tsetupVariables();\n\t\t\tgenerateRelationshipLines();\n\t\t\tsetupEvents();\n        }\n    };\n} )();\n\n// Let's begin the interactive storytelling.\ndocument.addEventListener( 'DOMContentLoaded', function() {\n\tconst c = document.querySelector( '.interactive-storytelling' );\n\n\tif ( ! ( c instanceof HTMLElement ) ) {\n\t\treturn;\n\t}\n\n    InteractiveStorytelling.init( c );\n} );\n"],"names":["InteractiveStorytelling","let","container","containerItems","flyout","flyoutCloseButton","flyoutBackButton","flyoutHeadshot","flyoutName","flyoutTitle","flyoutDescription","flyoutRelationship","flyoutRelationshipContainer","flyoutRelationshipWrapper","hotspots","selectedHotspot","selectedHotspotRelation","relationshipLines","breakpoint","populateFlyout","item","relatedHotspots","originalHotspot","itemData","data","updating","uid","style","setProperty","color","headshot","headshot_url","name","title","description","classList","add","relation","relationship_description","remove","src","textContent","innerHTML","relationship","map","relationObj","filter","hotspot","length","forEach","headshotContainer","document","createElement","alt","appendChild","setAttribute","focus","highlightRelatedHotspots","Object","values","el","line","getSVGElm","setOptions","size","lineEl","getAttribute","clearHighlightedRelatedHotspots","setSelectedHotspot","clearRelation","clearSelectedHotspot","removeAttribute","window","innerWidth","scrollIntoView","behavior","block","handleHotspotClick","event","currentTarget","target","HTMLElement","handleHotspotRelationClick","hotspotRel","split","hotspotRelation","find","rel","querySelectorAll","scrollLeft","offsetLeft","offsetWidth","setupEvents","addEventListener","key","contains","relationshipEl","closest","hotspotEl","ResizeObserver","entries","entry","CustomEvent","detail","width","contentRect","height","dispatchEvent","observe","init","c","_hotspot","JSON","parse","getComputedStyle","getPropertyValue","trim","error","console","warn","querySelector","relatedHotspot","LeaderLine","pointAnchor","x","y","path","hs","he","position","push"],"mappings":"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"}