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
|
{% extends 'base.html' %}
{% block announce %}
<span class="twemoji" style="vertical-align: middle;">
{% include ".icons/octicons/heart-fill-24.svg" %}
</span>
<a class="pdm-expansions" style="display: none;">Python Dependency Manager</a>
{% endblock %}
{% block footer %}
<div id="readthedocs-embed-flyout"></div>
{{ super() }}
<div class="bot-container">
<a class="twemoji bot-button" href="javascript:void(0)" title="Ask bot about PDM">
{% include ".icons/fontawesome/solid/robot.svg" %}
</a>
<iframe
src="{{ config.extra.chatbot.url }}"
></iframe>
</div>
<script>
const botButton = document.querySelector('.bot-button');
const iFrame = document.querySelector('.bot-container > iframe');
const hideBot = () => {
iFrame.style.height = null;
botButton.style.display = 'block';
document.removeEventListener('click', hideBot);
}
botButton.addEventListener('click', (e) => {
const curHeight = window.getComputedStyle(iFrame).height;
const header = document.querySelector('.md-header');
const height = `calc(100vh - ${header.clientHeight + 120}px)`;
if (curHeight === '0px') {
iFrame.style.height = height;
botButton.style.display = 'none';
document.addEventListener('click', hideBot);
} else {
hideBot();
}
e.stopPropagation();
});
iFrame.addEventListener('click', (e) => {
e.stopPropagation();
});
window.addEventListener('resize', (e) => {
if (iFrame.style.height) {
const header = document.querySelector('.md-header');
const height = `calc(100vh - ${header.clientHeight + 120}px)`;
iFrame.style.height = height;
}
e.stopPropagation();
})
</script>
{% endblock %}
|
