Add new support button

docs_overrides/js/extra.js

@@ -1,65 +1,11 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', function() {
 
     //
     // Open links in a new window
     //
 
-    document.querySelectorAll('a._blank').forEach(link => {
-        link.target = '_blank';
+    document.querySelectorAll('a._blank').forEach(function(a) {
+        a.target = '_blank';
     });
 
-    //
-    // Support button
-    //
-
-    if(document.getElementById('splash'))
-        return;
-
-    const support = document.createElement('a');
-    const heart = document.createElement('img');
-    const text = document.createTextNode('Support');
-
-    heart.src = 'https://github.githubassets.com/images/icons/emoji/unicode/2764.png';
-    heart.style.width = '24px';
-    //heart.style.paddingRight = '8px';
-    heart.classList.add('gemoji', 'heart');
-
-    support.href = 'https://alemart.github.io/encantar-js/support-my-work';
-    support.target = '_blank';
-    support.role = 'button';
-    support.style.display = 'flex';
-    support.style.alignItems = 'center';
-    support.style.position = 'fixed';
-    support.style.right = '16px';
-    support.style.bottom = '16px';
-    support.style.padding = '12px';// '0 20px';
-    //support.style.height = '48px';
-    support.style.color = 'var(--md-primary-fg-color)';
-    support.style.backgroundColor = 'var(--md-primary-bg-color)';
-    support.style.fontWeight = 'bold';
-    support.style.fontSize = '16px';
-    support.style.fontFamily = 'var(--md-text-font) sans-serif';
-    support.style.cursor = 'pointer';
-    support.style.borderWidth = '2px';
-    support.style.borderStyle = 'solid';
-    support.style.borderColor = 'var(--md-primary-fg-color)';
-    support.style.borderRadius = '100px';
-    support.style.transition = 'color 125ms,background-color 125ms,border-color 125ms';
-
-    support.addEventListener('pointerenter', () => {
-        support.style.backgroundColor = 'var(--md-accent-fg-color)';
-        support.style.borderColor = 'var(--md-accent-fg-color)';
-        support.style.color = 'var(--md-accent-bg-color)';
-    });
-
-    support.addEventListener('pointerleave', () => {
-        support.style.backgroundColor = 'var(--md-primary-bg-color)';
-        support.style.borderColor = 'var(--md-primary-fg-color)';
-        support.style.color = 'var(--md-primary-fg-color)';
-    });
-
-    support.appendChild(heart);
-    //support.appendChild(text);
-    document.body.appendChild(support);
-
 });

docs_overrides/main.html

@@ -20,4 +20,30 @@
 
 {% block content %}
 {{ super() }}
+{% endblock %}
+
+{% block footer %}
+<button id="support-button" onclick="document.getElementById('support-widget').classList.toggle('invisible')">
+    &#x1F468;&#x200D;&#x1F4BB; Need help?
+</button>
+<section id="support-widget" class="md-typeset invisible">
+    <h4>Technical support</h4>
+    <p>You can request technical help at <a class="support-link"></a></p>
+    <ul>
+        <li>Get expert guidance on how to create your AR experience with encantar.js</li>
+        <li>Ask technical questions</li>
+    </ul>
+</section>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var salad = 'nbjmup;tvqqpsuAfodboubs/efw';
+    var link = salad.split('').map(c => String.fromCharCode(c.charCodeAt(0)-1)).join('');
+    document.querySelectorAll('a.support-link').forEach(function(a) {
+        a.href = link;
+        if(a.innerText.length == 0)
+            a.innerText = link.substring(7);
+    });
+});
+</script>
+{{ super() }}
 {% endblock %}

docs_overrides/style/extra.css

@@ -28,3 +28,51 @@
     height: auto;
     max-width: 100%;
 }
+
+#support-widget {
+    position: fixed;
+    bottom: 80px;
+    right: 16px;
+    padding: 0 12px;
+    width: 256px;
+    font-size: 0.8rem;
+    color: var(--md-default-fg-color);
+    background-color: var(--md-primary-bg-color);
+    border-color: var(--md-primary-fg-color);
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 16px;
+    transform: scaleY(1);
+    transform-origin: bottom;
+    transition: transform 0.25s ease;
+    z-index: 1000;
+}
+
+#support-widget.invisible {
+    transform: scaleY(0);
+}
+
+#support-button {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    padding: 12px;
+    color: var(--md-primary-fg-color);
+    background-color: var(--md-primary-bg-color);
+    font-weight: bold;
+    font-size: 0.8rem;
+    font-family: sans-serif;
+    cursor: pointer;
+    border-width: 2px;
+    border-style: solid;
+    border-color: var(--md-primary-fg-color);
+    border-radius: 32px;
+    transition: color 125ms, background-color 125ms, border-color 125ms;
+    z-index: 1000;
+}
+
+#support-button:hover {
+    color: var(--md-accent-bg-color);
+    border-color: var(--md-accent-fg-color);
+    background-color: var(--md-accent-fg-color);
+}