Merge pull request #127 from kossmac/master

feat: add copy-to-clipboard functionality for code elements

css/area_content.less

@@ -61,3 +61,78 @@
         line-height: @line-height-default;
     }
 }
+
+/* Code copy functionality styles */
+.code-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+
+    &.has-copy-btn {
+        .code,
+        pre {
+            padding-right: 3rem; // Make room for copy button
+        }
+    }
+}
+
+.code-copy-btn {
+    position: absolute;
+    top: 1.5rem;
+    right: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    background-color: @ini_background;
+    border: 1px solid @ini_border;
+    border-radius: @fix_border-radius;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity @transition, background-color @transition;
+    color: @ini_text;
+    line-height: 1;
+    
+    &:hover {
+        opacity: 1;
+        background-color: @ini_background_alt;
+    }
+    
+    &:active {
+        transform: translateY(1px);
+    }
+    
+    svg {
+        display: block;
+        width: 16px;
+        height: 16px;
+    }
+    
+    &.copy-success {
+        background-color: #d4edda;
+        border-color: #c3e6cb;
+        color: #155724;
+    }
+    
+    &.copy-error {
+        background-color: #f8d7da;
+        border-color: #f5c6cb;
+        color: #721c24;
+    }
+}
+
+/* Ensure code blocks have proper positioning context */
+.code,
+pre.code,
+pre > code {
+    position: relative;
+}
+
+/* Mobile adjustments */
+@media @screen_max-xs {
+    .code-copy-btn {
+        padding: 0.2rem 0.4rem;
+        
+        svg {
+            width: 14px;
+            height: 14px;
+        }
+    }
+}

js/copy-code.js

@@ -0,0 +1,137 @@
+/**
+ * Adds copy-to-clipboard functionality for code blocks
+ *
+ * @author Karsten Kosmala <kosmala@cosmocode.de>
+ */
+(function($) {
+    'use strict';
+
+    /**
+     * Create and insert copy button for a code element
+     */
+    var createCopyButton = function($codeElement) {
+        var $button = $('<button>')
+            .addClass('code-copy-btn')
+            .attr('title', 'Copy to clipboard')
+            .html('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>')
+            .on('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                copyCodeToClipboard($codeElement, $button);
+            });
+
+        // Create wrapper if code element is not already wrapped
+        var $wrapper = $codeElement.parent('.code-wrapper');
+        if (!$wrapper.length) {
+            $wrapper = $('<div>').addClass('code-wrapper');
+            $codeElement.wrap($wrapper);
+            $wrapper = $codeElement.parent();
+        }
+        
+        $wrapper.addClass('has-copy-btn').append($button);
+    };
+
+    /**
+     * Copy code content to clipboard
+     */
+    var copyCodeToClipboard = function($codeElement, $button) {
+        // Get text content without HTML
+        var textContent = $codeElement.text();
+        
+        // Create temporary textarea for copying
+        var $temp = $('<textarea>')
+            .css({
+                position: 'absolute',
+                left: '-9999px',
+                top: '0'
+            })
+            .val(textContent)
+            .appendTo('body');
+        
+        // Select and copy
+        $temp[0].select();
+        $temp[0].setSelectionRange(0, 99999); // For mobile devices
+        
+        try {
+            var successful = document.execCommand('copy');
+            if (successful) {
+                showCopyFeedback($button, true);
+            } else {
+                showCopyFeedback($button, false);
+            }
+        } catch (err) {
+            // Fallback for modern browsers
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(textContent).then(function() {
+                    showCopyFeedback($button, true);
+                }, function() {
+                    showCopyFeedback($button, false);
+                });
+            } else {
+                showCopyFeedback($button, false);
+            }
+        }
+        
+        $temp.remove();
+    };
+
+    /**
+     * Show visual feedback after copy attempt
+     */
+    var showCopyFeedback = function($button, success) {
+        var originalHtml = $button.html();
+        var originalTitle = $button.attr('title');
+        
+        if (success) {
+            $button
+                .addClass('copy-success')
+                .attr('title', 'Copied!')
+                .html('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+        } else {
+            $button
+                .addClass('copy-error')
+                .attr('title', 'Copy failed')
+                .html('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
+        }
+        
+        setTimeout(function() {
+            $button
+                .removeClass('copy-success copy-error')
+                .attr('title', originalTitle)
+                .html(originalHtml);
+        }, 2000);
+    };
+
+    /**
+     * Initialize copy buttons for all code elements
+     */
+    var initCopyButtons = function() {
+        // Find all elements with class "code"
+        $('.code').each(function() {
+            var $code = $(this);
+            // Skip if already has copy button
+            if ($code.parent('.has-copy-btn').length) return;
+            
+            createCopyButton($code);
+        });
+        
+        // Also handle pre > code combinations
+        $('pre > code').each(function() {
+            var $code = $(this);
+            var $pre = $code.parent();
+            // Skip if already has copy button
+            if ($pre.parent('.has-copy-btn').length) return;
+            
+            createCopyButton($pre);
+        });
+    };
+
+    // Initialize on DOM ready
+    $(function() {
+        initCopyButtons();
+        
+        // Re-initialize when new content is loaded (e.g., via AJAX)
+        $(document).on('DOMContentLoaded', initCopyButtons);
+    });
+
+})(jQuery);

script.js

@@ -7,4 +7,4 @@
 /* DOKUWIKI:include js/sidebar.js */
 /* DOKUWIKI:include js/direct.js */
 /* DOKUWIKI:include js/anchor.js */
-
+/* DOKUWIKI:include js/copy-code.js */