Show the modal closer to the sidebar and the content

Author: humitos

hoverxref/_static/css/micromodal.css

@@ -7,20 +7,20 @@
   bottom: 0;
   background: rgba(0,0,0,0.6);
   display: flex;
-  justify-content: center;
   align-items: center;
   z-index: 250;
 }
 
 .modal__container {
   background-color: #fff;
   padding: 30px;
-  max-width: 60%;
+  max-width: 1000px;
   max-height: 85%;
   border-radius: 4px;
   overflow-y: auto;
   box-sizing: border-box;
   z-index: 250;
+  position: relative;
 }
 
 .modal__header {

hoverxref/_static/js/hoverxref.js_t

@@ -124,25 +124,28 @@ $(document).ready(function() {
 `
     $('body').append(modalHtml);
 
-    var delay = {{ hoverxref_modal_hover_delay }}, setTimeoutConst;
-    $('.hoverxref').hover(function(event) {
-        var parent = $(event.target).parent();
-        console.debug('Event: ' + event + ' Element: ' + parent);
-        event.preventDefault();
-
-        setTimeoutConst = setTimeout(function(){
-            showModal(parent);
-        }, delay);
-    }, function(){
-        clearTimeout(setTimeoutConst);
-    });
+    function onShow(modal, element) {
+        // This is a HACK to get some "smart" left position of the
+        // modal depending its size.
+        var container = $('#micromodal .modal__container')
+        // FIXME: this element only exists in sphinx-rtd-theme
+        var maxWidth = $('.wy-nav-content').innerWidth() - 150 || 650;
+        var contentLeft = $('.rst-content:first').position().left || 250;
+        if (container.width() >= maxWidth) {
+            var left = contentLeft - 150;
+        }
+        else {
+            var left = contentLeft + 150;
+        }
+        console.debug('Container left position: ' + left);
+        container.css('left', left);
+    }
 
     function showModal(element) {
-        var $origin = $(element);
-        var project = $origin.data('project');
-        var version = $origin.data('version');
-        var doc = $origin.data('doc');
-        var section = $origin.data('section');
+        var project = element.data('project');
+        var version = element.data('version');
+        var doc = element.data('doc');
+        var section = element.data('section');
         console.debug('Data: project=' + project + ' version=' + version + ' doc=' + doc + ' section=' + section);
         var url = '{{ hoverxref_tooltip_api_host }}' + '/api/v2/embed/?' + 'project=' + project + '&version=' + version + '&doc=' + doc + '&section=' + section;
 
@@ -164,6 +167,7 @@ $(document).ready(function() {
             $('#micromodal-title').html(a);
             $('#micromodal-content').html(content);
             MicroModal.show('micromodal', {
+                onShow: {{ hoverxref_modal_onshow_function|default('onShow', true) }},
                 openClass: '{{ hoverxref_modal_openclass }}',
                 disableScroll: {{ 'true' if hoverxref_modal_disable_scroll else 'false' }},
                 disableFocus: {{ 'true' if hoverxref_modal_disable_focus else 'false' }},
@@ -182,5 +186,18 @@ $(document).ready(function() {
             };
         });
     };
+
+    var delay = {{ hoverxref_modal_hover_delay }}, setTimeoutConst;
+    $('.hoverxref').hover(function(event) {
+        var element = $(this);
+        console.debug('Event: ' + event + ' Element: ' + element);
+        event.preventDefault();
+
+        setTimeoutConst = setTimeout(function(){
+            showModal(element);
+        }, delay);
+    }, function(){
+        clearTimeout(setTimeoutConst);
+    });
     {% endif %}
 });

hoverxref/extension.py

@@ -125,6 +125,7 @@ def setup(app):
     app.add_config_value('hoverxref_modal', False, 'env')
     app.add_config_value('hoverxref_modal_hover_delay', 350, 'env')
     app.add_config_value('hoverxref_modal_class', 'rst-content', 'env')
+    app.add_config_value('hoverxref_modal_onshow_function', None, 'env')
     app.add_config_value('hoverxref_modal_openclass', 'is-open', 'env')
     app.add_config_value('hoverxref_modal_disable_focus', True, 'env')
     app.add_config_value('hoverxref_modal_disable_scroll', False, 'env')