drf-to-mkdoc 0.2.3__py3-none-any.whl → 0.3.0__py3-none-any.whl

drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/suggestions.js

@@ -2,22 +2,30 @@
 const TryOutSuggestions = {
     init: function() {
         this.suggestions = this.getAvailableSuggestions();
-        this.setupAutocomplete();
+        this.updateDatalist();
+        
+        // Re-initialize when window.queryParametersData changes
+        if (window.MutationObserver) {
+            this.setupDataObserver();
+        }
     },
-
-    setupAutocomplete: function() {
-        // Setup event listeners for all query parameter inputs
-        document.addEventListener('click', (e) => {
-            // Hide all suggestion dropdowns when clicking outside
-            if (!e.target.matches('#queryParams input')) {
-                this.hideAllSuggestions();
+    
+    setupDataObserver: function() {
+        // Check for changes in queryParametersData every second
+        setInterval(() => {
+            if (window.queryParametersData && window.queryParametersData._lastUpdate !== this._lastDataUpdate) {
+                this._lastDataUpdate = window.queryParametersData._lastUpdate;
+                this.suggestions = this.getAvailableSuggestions();
+                this.updateDatalist();
             }
-        });
+        }, 1000);
+    },
 
-        // Initial setup for existing inputs
+    setupAutocomplete: function() {
+        // Using native datalist, just make sure all inputs are properly initialized
         this.setupExistingInputs();
-
-        // Setup for the add button to attach listeners to new inputs
+        
+        // Setup for the add button to mark new inputs as initialized
         const addBtn = document.querySelector('.add-btn');
         if (addBtn) {
             addBtn.addEventListener('click', () => {
@@ -28,10 +36,27 @@ const TryOutSuggestions = {
             });
         }
     },
+    
+    updateDatalist: function() {
+        // Update the datalist with our suggestions
+        const datalist = document.getElementById('paramSuggestions');
+        if (datalist && this.suggestions.length > 0) {
+            // Clear existing options
+            datalist.innerHTML = '';
+            
+            // Add new options from our suggestions - without descriptions
+            this.suggestions.forEach(suggestion => {
+                const option = document.createElement('option');
+                option.value = suggestion.name;
+                // No description text as per requirement
+                datalist.appendChild(option);
+            });
+        }
+    },
 
     setupExistingInputs: function() {
         // Find all parameter name inputs
-        const paramInputs = document.querySelectorAll('#queryParams .kv-item input:first-child');
+        const paramInputs = document.querySelectorAll('#queryParams .name-input');
         paramInputs.forEach(input => {
             // Skip if already initialized
             if (input.dataset.autocompleteInitialized) return;
@@ -39,177 +64,59 @@ const TryOutSuggestions = {
             // Mark as initialized
             input.dataset.autocompleteInitialized = 'true';
             
-            // Create suggestions container for this input
-            const suggestionsContainer = document.createElement('div');
-            suggestionsContainer.className = 'param-suggestions';
-            suggestionsContainer.id = 'suggestions-' + Math.random().toString(36).substr(2, 9);
-            input.parentNode.style.position = 'relative';
-            input.parentNode.appendChild(suggestionsContainer);
-            
-            // Store reference to container
-            input.dataset.suggestionsContainer = suggestionsContainer.id;
-            
-            // Add event listeners
-            input.addEventListener('focus', () => this.showSuggestions(input));
-            input.addEventListener('input', () => this.filterSuggestions(input));
-            input.addEventListener('keydown', (e) => this.handleKeyNavigation(e, input));
+            // We're using the native datalist for autocomplete
+            // No need for custom suggestions dropdown
         });
     },
 
     getAvailableSuggestions: function() {
+        // Get query parameters only from window.queryParametersData
         const suggestions = [];
         
-        // Try to get query parameters from the page context
         if (window.queryParametersData) {
             const data = window.queryParametersData;
             
             // Add filter fields
             if (data.filter_fields && data.filter_fields.length > 0) {
-                suggestions.push(...data.filter_fields);
+                suggestions.push(...data.filter_fields.map(field => ({
+                    name: field
+                })));
             }
             
-            // Add search if available
-            if (data.search_fields && data.search_fields.length > 0) {
-                suggestions.push('search');
-            }
+            // Add search fields - only add the 'search' key, not individual fields
+            // The 'search' key will be added via special_keys
+            
+            // Add ordering fields - only add the 'ordering' key, not individual fields
+            // The 'ordering' key will be added via special_keys
             
-            // Add ordering if available
-            if (data.ordering_fields && data.ordering_fields.length > 0) {
-                suggestions.push('ordering');
+            // Add special keys
+            if (data.special_keys && data.special_keys.length > 0) {
+                suggestions.push(...data.special_keys.map(key => ({
+                    name: key
+                })));
             }
             
-            // Add pagination
+            // Add pagination fields
             if (data.pagination_fields && data.pagination_fields.length > 0) {
-                suggestions.push(...data.pagination_fields);
+                suggestions.push(...data.pagination_fields.map(field => ({
+                    name: field
+                })));
             }
         }
         
-        // Default common parameters
-        if (suggestions.length === 0) {
-            suggestions.push('search', 'ordering', 'page', 'page_size');
-        }
-        
-        // Remove duplicates and return
-        return [...new Set(suggestions)];
-    },
-
-    showSuggestions: function(input) {
-        const container = document.getElementById(input.dataset.suggestionsContainer);
-        if (!container) return;
-        
-        // Clear existing suggestions
-        container.innerHTML = '';
-        
-        // Filter suggestions based on input value
-        const inputValue = input.value.toLowerCase();
-        const filteredSuggestions = this.suggestions.filter(suggestion => 
-            suggestion.toLowerCase().includes(inputValue)
-        );
-        
-        if (filteredSuggestions.length === 0) {
-            container.classList.remove('show');
-            return;
-        }
-        
-        // Add suggestions to container
-        filteredSuggestions.forEach(suggestion => {
-            const suggestionElement = document.createElement('div');
-            suggestionElement.className = 'param-suggestion';
-            suggestionElement.textContent = suggestion;
-            suggestionElement.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this.selectSuggestion(input, suggestion);
-            });
-            container.appendChild(suggestionElement);
-        });
-        
-        // Show suggestions
-        container.classList.add('show');
-    },
-    
-    filterSuggestions: function(input) {
-        // Just re-show suggestions with current filter
-        this.showSuggestions(input);
-    },
-    
-    hideAllSuggestions: function() {
-        document.querySelectorAll('.param-suggestions').forEach(container => {
-            container.classList.remove('show');
-        });
+        return suggestions;
     },
     
     selectSuggestion: function(input, suggestion) {
         // Set input value
         input.value = suggestion;
         
-        // Hide suggestions
-        const container = document.getElementById(input.dataset.suggestionsContainer);
-        if (container) {
-            container.classList.remove('show');
-        }
-        
         // Focus on value input
         const valueInput = input.nextElementSibling;
         if (valueInput) {
             valueInput.focus();
         }
     },
-    
-    handleKeyNavigation: function(event, input) {
-        const container = document.getElementById(input.dataset.suggestionsContainer);
-        if (!container || !container.classList.contains('show')) return;
-        
-        const suggestions = container.querySelectorAll('.param-suggestion');
-        if (suggestions.length === 0) return;
-        
-        // Find currently selected suggestion
-        const selectedIndex = Array.from(suggestions).findIndex(el => el.classList.contains('selected'));
-        
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                this.navigateSuggestion(suggestions, selectedIndex, 1);
-                break;
-                
-            case 'ArrowUp':
-                event.preventDefault();
-                this.navigateSuggestion(suggestions, selectedIndex, -1);
-                break;
-                
-            case 'Enter':
-                event.preventDefault();
-                if (selectedIndex >= 0) {
-                    this.selectSuggestion(input, suggestions[selectedIndex].textContent);
-                } else if (suggestions.length > 0) {
-                    this.selectSuggestion(input, suggestions[0].textContent);
-                }
-                break;
-                
-            case 'Escape':
-                event.preventDefault();
-                container.classList.remove('show');
-                break;
-        }
-    },
-    
-    navigateSuggestion: function(suggestions, currentIndex, direction) {
-        // Remove current selection
-        if (currentIndex >= 0) {
-            suggestions[currentIndex].classList.remove('selected');
-        }
-        
-        // Calculate new index
-        let newIndex;
-        if (currentIndex < 0) {
-            newIndex = direction > 0 ? 0 : suggestions.length - 1;
-        } else {
-            newIndex = (currentIndex + direction + suggestions.length) % suggestions.length;
-        }
-        
-        // Select new suggestion
-        suggestions[newIndex].classList.add('selected');
-        suggestions[newIndex].scrollIntoView({ block: 'nearest' });
-    }
 };
 
 // Export for global access

drf_to_mkdoc/static/drf-to-mkdoc/javascripts/try-out/tabs.js

@@ -1,33 +1,76 @@
 // Tab management functionality
 const TabManager = {
     init: function() {
-        document.querySelectorAll('.try-out-form .tab').forEach(tab => {
+        document.querySelectorAll('.try-out-form .tab, .smart-tabs .tab, .response-tabs .tab').forEach(tab => {
             tab.addEventListener('click', () => {
                 this.switchTab(tab);
             });
+            
+            // Add keyboard support
+            tab.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.switchTab(tab);
+                }
+            });
         });
     },
 
     switchTab: function(activeTab) {
-        // Remove active class from all tabs and contents
-        document.querySelectorAll('.try-out-form .tab').forEach(t => t.classList.remove('active'));
-        document.querySelectorAll('.try-out-form .tab-content').forEach(c => c.classList.remove('active'));
+        const tabContainer = activeTab.closest('.smart-tabs, .response-tabs, .try-out-form');
+        if (!tabContainer) return;
+
+        // Remove active class from all tabs in this container
+        tabContainer.querySelectorAll('.tab').forEach(t => {
+            t.classList.remove('active');
+            t.setAttribute('aria-selected', 'false');
+        });
 
-        // Add active class to clicked tab
+        // Remove active class from all tab content
+        const contentContainer = tabContainer.parentElement || document;
+        contentContainer.querySelectorAll('.tab-content').forEach(c => {
+            c.classList.remove('active');
+        });
+
+        // Add active class to clicked tab and its content
         activeTab.classList.add('active');
+        activeTab.setAttribute('aria-selected', 'true');
         
         // Show corresponding content
-        const tabName = activeTab.getAttribute('data-tab');
-        const content = document.getElementById(tabName + 'Tab');
-        if (content) {
-            content.classList.add('active');
+        const contentId = activeTab.getAttribute('aria-controls') || activeTab.getAttribute('data-tab');
+        let content;
+        
+        if (contentId) {
+            content = document.getElementById(contentId) || document.getElementById(contentId + 'Tab');
+            if (content) {
+                content.classList.add('active');
+            }
         }
+        
+        // Debug logging
+        console.log('Tab switched to:', contentId, 'Content element:', content);
     }
 };
 
 // Initialize tabs when DOM is ready
 document.addEventListener('DOMContentLoaded', function() {
     TabManager.init();
+
+    // Also initialize when modal is shown (for dynamic content)
+    const modal = document.getElementById('tryOutModal');
+    if (modal) {
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    if (modal.classList.contains('show')) {
+                        // Re-initialize tabs when modal is shown
+                        setTimeout(() => TabManager.init(), 100);
+                    }
+                }
+            });
+        });
+        observer.observe(modal, { attributes: true });
+    }
 });
 
 // Export for global access

drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/badges.css

@@ -1,16 +1,22 @@
 /* ===== METHOD BADGES ===== */
 .method-badge {
     position: relative;
-    padding: 6px 12px;
+    display: inline-block;
+    padding: 4px 8px;
     font-size: 12px;
     font-weight: bold;
-    border-radius: 20px;
+    border-radius: 16px;
     color: white;
     text-transform: uppercase;
     overflow: hidden;
-    min-width: 60px;
+    min-width: 50px;
     text-align: center;
     flex-shrink: 0;
+    z-index: 0;
+    vertical-align: middle;
+    line-height: 1.2;
+    box-sizing: border-box;
+    white-space: nowrap;
 }
 
 .method-badge::before {
@@ -20,8 +26,10 @@
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-    transition: left 0.5s ease;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    transition: left 0.6s ease;
+    z-index: 1;
+    pointer-events: none;
 }
 
 .method-badge:hover::before {