Data/12_Each_Page/right_Nav.qmd

<script>
console.log("Right Nav script is found and activated");
</script>


<div id="popper_Tooltip_Gen">
    Feel free to share your thoughts
<div id="pop_Arrow_Gen" data-popper-arrow></div>
</div>

<!-- Production version -->
<script src="https://unpkg.com/@popperjs/core@2"></script>

<!-- load external javascript-code -->
<script src="/Web_Code/Js/lotti_Sidebar_Anim.js"></script>

<script src='/Web_Code/Js/popper_Tooltip_General.js'></script>

<!-- documentation: https://docs.lottiefiles.com/dotlottie-player/ -->
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script>

<dotlottie-player
id="lotti_Anim_Each_Page"
mode="normal"
style="max-height:15rem"
background="transparent"
speed="1"
>
</dotlottie-player>

<script>
// get acceess to the right sidebar
const quartoMarginSidebar = document.getElementById("quarto-margin-sidebar");

// generate a place where the lotti animation shall be placed
const player = document.getElementById('lotti_Anim_Each_Page');

// take it from the previous position an move it to the new posistion --> removed prom previous DOM pos
quartoMarginSidebar.insertBefore(player, quartoMarginSidebar.firstChild);


/* --------------------------- get Feedback <p><a> -------------------------- */
// Create a new <p> element
const button_Elem = document.createElement('button');

// Create a new <a> element
const aElement = document.createElement('a');

// Set the href attribute of the <a> element
aElement.href = 'https://discord.gg/EEsXp39DaA';
aElement.id = 'feedback_A';

// open link in a new tab
aElement.setAttribute("target","_blank");
aElement.setAttribute("rel", "noopener noreferrer");

button_Elem.id = 'feedback_Button';

// button_Elem.setAttribute("aria-describedby","popper_Tooltip_Gen");
// aElement.setAttribute("aria-describedby","popper_Tooltip_Gen");

// Set the text content of the <a> element
const linkText = document.createElement('span');
linkText.textContent = 'Share your thoughts';

// Create a new SVG element
const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.setAttribute('viewBox', '0 0 512 512'); // set the viewBox attribute to define the SVG size
svgElement.setAttribute('class', 'ionicon'); // set the class attribute to apply any CSS styles
svgElement.setAttribute('width', '2rem'); // set the width attribute to scale the SVG
svgElement.setAttribute('height', '2rem'); // set the height attribute to scale the SVG

// Set the content of the SVG element to the contents of the SVG file
svgElement.innerHTML = `<!-- see https://ionic.io/ionicons/
see <ion-icon name="chatbox-ellipses-outline"></ion-icon> -->
<path d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v80l93.72-78.14a8 8 0 015.13-1.86H408a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56z" fill="none" stroke="#ecff7f" stroke-linejoin="round" stroke-width="32" />
<circle cx="160" cy="216" r="32" fill="#ecff7f" />
<circle cx="256" cy="216" r="32" fill="#ecff7f" />
<circle cx="352" cy="216" r="32" fill="#ecff7f" />`;


// Append the SVG element to the <a> element
aElement.appendChild(linkText);
aElement.appendChild(svgElement);

// Append the <a> element to the <p> element
button_Elem.appendChild(aElement);
quartoMarginSidebar.insertBefore(button_Elem, player.nextSibling);

// see: https://lottiefiles.com/129292-aeroplane-flying?lang=de
player.load('https://assets3.lottiefiles.com/packages/lf20_FsI2nYFYMo.json');
player.loop = false;

var second_Anim = false;

// Add event listener for click event
player.addEventListener('click', () => {
    player.play();
    complete_Check(second_Anim);

});


const popcorn = document.querySelector('#feedback_Button');
const tooltip = document.querySelector('#popper_Tooltip_Gen');

const popperInstance = Popper.createPopper(popcorn, tooltip, {
placement: 'top',
modifiers: [
    {
        name: 'offset',
    options: {
        offset: [0, 8],
    },
    },
],
});


// function onScriptLoad(popcorn) {
// if (typeof run_Pop === 'function') {
//     run_Pop(popcorn);
// }
// }

// document.addEventListener('readystatechange', (event) => {
// if (event.target.readyState === 'complete') {
//     onScriptLoad(popcorn);
// }
// });

// // If the script is already loaded before the readystatechange event, call the function directly
// if (document.readyState === 'complete') {
// onScriptLoad(popcorn);
// }


run_Pop(popcorn);

</script>