Spaces:
Running
Running
File size: 4,440 Bytes
d6b8d19 b6ed5af d6b8d19 5ce9c54 d6b8d19 4abace5 d6b8d19 b6ed5af d6b8d19 b6ed5af d6b8d19 b6ed5af d6b8d19 d4f9f0d d6b8d19 b6ed5af d6b8d19 b6ed5af d6b8d19 abe9a93 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<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>
|