[TikiWiki-commits] [Git][tikiwiki/tiki][master] [ENH] Comments: Add a "Copy Comment Link" Action

luci pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
39c50efa by David Maene at 2026-02-19T12:16:53+00:00
[ENH] Comments: Add a "Copy Comment Link" Action
---
* [FIX] wrongly committed tiki_base.css

* [ENH] UI/UX:  add highlight animation for linked comments

* [REF] introduce assignUniqueCopyId() to eliminate repeated ID generation logic

* [ENH] Enhance tiki filter
---
* [ENH] Tiki filter on tiki-admin_menus.php

* [ENH] Tiki filter on tiki-admin_menu_options.php

* [ENH] Tiki filter on tiki-admin_mailin.php

* [ENH] Tiki filter on tiki-admin_links.php

* [ENH] Tiki filter on tiki-admin_integrator_rules.php

* [ENH] Tiki filter on tiki-admin_ids.php

* [ENH] Tiki filter on tiki-admin_html_pages.php

* [ENH] Tiki filter on tiki-admin_html_page_content.php

* [ENH] Enhance tiki filter

See merge request tikiwiki/tiki!8754

See merge request tikiwiki/tiki!8926

- - - - -


4 changed files:

- lib/jquery_tiki/tiki-jquery.js
- lib/prefs/comments.php
- templates/comment/list_inner.tpl
- themes/base_files/scss/_tiki-comments.scss


Changes:

=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -945,59 +945,70 @@ $.fn.tiki = function(func) {
              *     eg. $(document).tiki('copy', () => 'content to copy', successCallback, errorCallback, '.copy-btn')
              */
             return (getText, onSuccess, onError, selector) => {
+                if (typeof ClipboardJS === 'undefined' || !ClipboardJS.isSupported()) return this;
                 if (!this.length && !selector) return this;
-                if (ClipboardJS.isSupported()) {
-                    if (! selector && ! $(this).attr('id')) {
-                        $(this).attr('id', 'copy-' + Math.random().toString(16).slice(2));
-                    }
-                    const thisElementSelector = selector || ($(this).attr('id') ? '#' + $(this).attr('id') : '.' + $(this).attr('class').trim().replace(/ /g, '.'));
-
-                    const initializeClipboard = (selector) => {
-                        const clipboard = new ClipboardJS(selector, {
-                            text: getText
-                        });
-                        if (typeof onSuccess === "function") clipboard.on('success', onSuccess.bind(this));
-                        if (typeof onError === "function") clipboard.on('error', onError.bind(this));
-                    };
-
-                    if (thisElementSelector.startsWith('#')) {
-                        initializeClipboard(thisElementSelector);
-                        return this;
-                    }
-
-                    $(document).find(thisElementSelector).each(function () {
-                        if (typeof getText !== "function") {
-                            getText = (trigger) => {
-                                const dataClipboardTarget = $(trigger).data('clipboard-target');
-                                return $(dataClipboardTarget).text();
-                            };
-                        }
 
-                        const uniqueId = "copy-" + Math.random().toString(16).slice(2);
-                        $(this).attr('id', uniqueId);
-                        initializeClipboard(`#${uniqueId}`);
+                const initializeClipboard = (elementSelector) => {
+                    const clipboard = new ClipboardJS(elementSelector, {
+                        text: typeof getText === "function" ? getText : (trigger) => {
+                            const target = $(trigger).data('clipboard-target');
+                            return $(target).text();
+                        },
+                        /**
+                         * For use in Bootstrap Modals or with any other library that changes the
+                         * focus we want to set the focused element as the container value
+                        */
+                        container: document.body
                     });
 
-                    $(document).on('shown.bs.modal', function() {
-                        $(this).find(selector).each(function() {
-                            if (typeof getText !== "function") {
-                                getText = (trigger) => {
-                                    const dataClipboardTarget = $(trigger).data('clipboard-target');
-                                    return $(dataClipboardTarget).text();
-                                };
-                            }
+                    if (typeof onSuccess === "function") clipboard.on('success', onSuccess.bind(this));
+                    if (typeof onError === "function") clipboard.on('error', onError.bind(this));
+                };
 
-                            const uniqueId = "copy-" + Math.random().toString(16).slice(2);
-                            $(this).attr('id', uniqueId);
-                            initializeClipboard(`#${uniqueId}`, getText, onSuccess, onError);
-                        });
-                    });
+                /**
+                * If a selector is provided, we use ClipboardJS's built-in delegation.
+                * This ensures functionality for elements added to the DOM after the initial load
+                */
+                if (selector) {
+                    initializeClipboard(selector);
+                    return this;
                 }
-                return this;
+
+                /**
+                 * Used when the plugin is called directly on existing DOM elements.
+                 * We ensure each element has a unique ID to allow ClipboardJS to target it specifically.
+                */
+                return this.each(function() {
+                    const $el = $(this);
+                    if (!$el.attr('id')) {
+                        $el.attr('id', 'copy-' + Math.random().toString(16).slice(2));
+                    }
+                    initializeClipboard('#' + $el.attr('id'));
+                });
             };
     }    // end switch(func)
 };
 
+$(document).tiki('copy')(
+    function (trigger) {
+        const fragment = $(trigger).data('thread-id');
+
+        if (!fragment) {
+            return "";
+        }
+
+        const url = new URL(window.location.href);
+        url.hash = fragment;
+
+        return url.toString();
+    },
+    function () {
+        showMessage(tr('Comment link copied'), 'success');
+    },
+    function () {
+        showMessage(tr('Comment link copy failed'), 'error');
+    }, '.copy-comment-link');
+
 (function($) {
     /**
      * Adds annotations to the content of text in ''container'' based on the


=====================================
lib/prefs/comments.php
=====================================
@@ -81,7 +81,7 @@ function prefs_comments_list()
         ],
         'comments_heading_links' => [
             'name' => tr('Anchor links on headings'),
-            'description' => tr('Cause a link icon to appear on hover over each heading, useful for sharing the URL to an exact location on a page.'),
+            'description' => tr('Displays a link icon on hover over each comment heading, allowing users to copy the link for easy sharing.'),
             'keywords' => 'Display hidden anchor on mouseover of headings',
             'type' => 'flag',
             'default' => 'y',


=====================================
templates/comment/list_inner.tpl
=====================================
@@ -11,14 +11,14 @@
                             <div class="comment-title">
                                 {$comment.title}
                                 {if $prefs.comments_heading_links eq 'y'}
-                                    <a class="heading-link" aria-label="{tr}Heading link{/tr}" href="{if ($comment.threadId neq $comments_parentId)}#threadId{$comment.threadId}{/if}">{icon name="link"}</a>
+                                    <button type="button" class="heading-link copy-comment-link tips btn btn-link p-0" title="|{tr}Click to copy the comment link{/tr}" aria-label="{tr}Heading link{/tr}" data-thread-id="{if $comment.threadId neq $comments_parentId}threadId{$comment.threadId}{/if}">{icon name="link" _class="me-1"}</button>
                                 {/if}
                             </div>
                         {/if}
                         <div class="comment-info">
                             {tr _0=$comment.userName|userlink}%0{/tr}{if $prefs.comments_threshold_indent neq '0' && $level && $level gte $prefs.comments_threshold_indent}>{tr _0=$repliedTo.userName|userlink}%0{/tr}{/if} <small class="date">{tr _0=$comment.commentDate|tiki_short_datetime}%0{/tr}</small>
                             {if $prefs.comments_heading_links eq 'y' and  $prefs.comments_notitle eq 'y'}
-                                <a class="heading-link" aria-label="{tr}Heading link{/tr}" href="{if ($comment.threadId neq $comments_parentId)}#threadId{$comment.threadId}{/if}">{icon name="link"}</a>
+                                <button type="button" class="heading-link copy-comment-link tips btn btn-link p-0" title="|{tr}Click to copy the comment link{/tr}" aria-label="{tr}Heading link{/tr}" data-thread-id="{if $comment.threadId neq $comments_parentId}threadId{$comment.threadId}{/if}">{icon name="link" _class="me-1"}</button>
                             {/if}
                         </div>
                     </h4>


=====================================
themes/base_files/scss/_tiki-comments.scss
=====================================
@@ -1,4 +1,18 @@
 // Comments
+.comment-highlight{
+  animation: highlight 3000ms ease-out;
+}
+
+@keyframes highlight {
+  50% {
+    background-color: #f5d142;
+    color:#222;
+  }
+  100% {
+    background-color: #d7cece;
+    color:#222;
+  }
+}
 
 #comment-container {
     display: none;



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/39c50efa9c7f88f576c27eed25abb11db9484022

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/39c50efa9c7f88f576c27eed25abb11db9484022
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs